:root{
  --bg:#fff; --text:#0b0b0b; --muted:#6b7280; --border:#e5e7eb;
  --brand:#0b0b0b; --accent:#ffd200; /* yellow */
}

*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Header */
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;letter-spacing:.3px}
.site-header{background:#000;color:#fff;border-bottom:4px solid var(--accent)}
.site-header a{color:#fff;text-decoration:none;margin-left:16px}

/* Headings & text */
h1{font-size:clamp(28px,4vw,40px);margin:16px 0 8px}
p{color:var(--muted)}

/* Buttons */
.btn{display:inline-block;padding:8px 14px;border-radius:10px;border:1px solid var(--border);text-decoration:none;background:#111;color:#fff}
.btn:hover{filter:brightness(1.1)}

/* Filters: checkboxes row + search on its own line */
.filters{display:grid;grid-template-columns:1fr auto;gap:12px;margin:16px 0}
.filter-block{display:flex;flex-direction:column;gap:6px}
.filter-block span{font-weight:700;color:var(--brand)}
.check-group{display:flex;flex-wrap:wrap;gap:8px}
.check-group label{
  display:flex;align-items:center;gap:6px;
  background:#111;color:#fff;border:1px solid #111;border-radius:8px;padding:6px 10px
}
.check-group input[type="checkbox"]{accent-color:var(--accent)}
.search{
  grid-column:1/-1; /* search on its own line */
  width:100%;padding:12px 14px;border:2px solid var(--brand);border-radius:10px;
  margin:4px 0;background:#fff
}

/* Grid: 3 per row desktop */
.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}

/* Collapsible cards */
.card{
  border:2px solid var(--brand);border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 2px 0 0 var(--accent)
}
.card h3{
  margin:0;cursor:pointer;background:#111;color:#fff;
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
  font-weight:800;letter-spacing:.2px
}
.card h3 .count{font-weight:600;color:#ffe24a}
.card h3 .chevron{transition:transform .25s ease}
.card:not(.collapsed) .chevron{transform:rotate(180deg)}
/* comfy inner padding so text isn’t flush */
.card .inner{padding:12px 16px 14px 16px}

.card.collapsed .segment,
.card.collapsed .ex,
.card.collapsed .notes{display:none}

/* Segments with bold yellow line */
.segment{
  margin:14px 0 6px;padding-top:8px;
  border-top:4px solid var(--accent);
  font-weight:800;color:#111
}

/* Exercise rows */
.ex{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px dashed var(--border)}
.ex:first-child{border-top:none}
.ex .info{display:flex;flex-direction:column;gap:6px}
.ex .meta{color:var(--muted);font-size:14px}

/* Coach's notes */
.notes{
  background:#fffbe6;border-left:4px solid var(--accent);
  margin-top:4px;padding:8px 10px;border-radius:6px;font-size:13px;color:#3f3f3f
}

/* Thumbnails */
.thumb{
  width:110px;height:62px;position:relative;overflow:hidden;
  border-radius:8px;border:2px solid var(--brand);background:#000;display:inline-block;cursor:pointer
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .play{
  position:absolute;right:6px;bottom:6px;background:var(--accent);color:#111;
  padding:2px 6px;border-radius:4px;font-size:12px;font-weight:800
}

/* Footer & modal */
.site-footer{background:#0b0b0b;color:#fff;border-top:4px solid var(--accent);padding:20px 0;margin-top:32px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff;max-width:900px;width:100%;border-radius:12px;padding:10px;position:relative}
.modal-close{position:absolute;right:8px;top:8px;background:#111827;color:#fff;border:none;border-radius:8px;padding:6px 10px;cursor:pointer}

/* Responsive */
@media (max-width:1100px){.folders{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .folders{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
}

/* Umbrella header inside each group */
.umbrella {
  border: 3px solid var(--brand);
  border-radius: 14px;
  overflow: hidden;
  background:#fff;
}
.umbrella + .umbrella { margin-top: 18px; }
.umbrella > .uhd {
  display:flex; justify-content:space-between; align-items:center;
  background:#111; color:#fff; padding:14px 16px; font-weight:800;
  border-bottom:4px solid var(--accent);
}
.badge-lock {
  background: var(--accent); color:#111; padding:2px 8px; border-radius:999px; font-weight:800;
}
.umbrella-body { padding: 10px 12px; }
.lock-note { padding:10px; background:#fffbe6; border-left:4px solid var(--accent); border-radius:8px; margin:12px 0; }


/* === Light theme refinements === */
:root{
  --bg: #f6f7fb;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #1e3a8a;
  --brand-2: #6366f1;
  --card: #ffffff;
  --accent: #fde68a;
  --border: #e5e7eb;
}

body{ background: var(--bg); color: var(--text); }

.site-header{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
}
.site-header a{ color: #eef2ff; }
.brand{ font-weight: 800; letter-spacing: .2px; }

.card{ background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.card h3{ color: var(--text); }
.card .inner{ color: var(--text); }

/* Program header */
.program-header{ text-align:center; margin: 1rem auto 1rem; }
.program-title{ font-size: clamp(1.25rem, 1.8vw, 2rem); margin: .25rem 0 .5rem; }
.lock-banner{ display:inline-block; margin:.25rem auto 1rem; padding:.75rem 1rem; background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; color:#7c2d12; }

/* Segment blocks */
.segment-block{ margin: 1.25rem 0 2rem; }
.segment-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.segment-name{ font-weight:700; }
.segment-note{ background:#eef2ff; border:1px solid #c7d2fe; padding:.75rem 1rem; border-radius:12px; color:#1e3a8a; margin:.25rem 0 1rem; }

/* Exercise grid */
.ex-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; }
@media (max-width: 980px){ .ex-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .ex-grid{ grid-template-columns: 1fr; } }

.ex-card{ display:flex; flex-direction:column; gap:.5rem; padding: .9rem; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.03); }
.ex-title{ font-weight:700; }
.ex-meta{ font-size:.9rem; color: var(--muted); }
.ex-thumb{ display:block; position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.ex-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ex-thumb .play{ position:absolute; bottom:.5rem; right:.5rem; background: var(--brand-2); color:#fff; font-weight:700; border-radius:999px; padding:.2rem .5rem; font-size:.85rem; }

/* Make the workouts stand out (subtle highlight on hover) */
.ex-card:hover{ box-shadow:0 4px 18px rgba(0,0,0,.07); transform: translateY(-1px); transition: .18s ease; }

/* Reduce all-black elsewhere by toning down headings/labels */
.filters .filter-block span{ color: var(--muted); }

/* Hide legacy containers when using new renderer */
.folders{ display:none; }



/* === Badges and toolbar === */
.program-toolbar{ display:flex; justify-content:center; gap:.5rem; margin:.25rem 0 .5rem; }
.btn-ghost{ background:#fff; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.4rem .7rem; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.btn-ghost:hover{ filter: brightness(0.98); }

.badges{ display:flex; gap:.35rem; flex-wrap:wrap; }
.badge{ display:inline-block; font-size:.75rem; line-height:1; padding:.35rem .5rem; border-radius:999px; border:1px solid var(--border); background:#f8fafc; color:#0f172a; }
.badge.difficulty-beginner{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.badge.difficulty-intermediate{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; }
.badge.difficulty-advanced{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.badge.difficulty-expert{ background:#fff7ed; border-color:#fed7aa; color:#7c2d12; }

.ex-actions{ display:flex; gap:.4rem; margin-top:.25rem; }
.icon-btn{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:.3rem .45rem; font-size:.8rem; }
.icon-btn:hover{ filter:brightness(0.98); }
.copy-ok{ background:#ecfdf5 !important; border-color:#a7f3d0 !important; }



/* === Logo & brand === */
.brand-link{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.logo{ height:40px; width:auto; display:block; border-radius:8px; background:#000; }
@media (max-width: 640px){ .logo{ height:32px; } }
.brand-text{ font-weight:800; letter-spacing:.3px; }