/* ============================================================
   Drill Factory — Stylesheet (light, minimalist)
   ============================================================ */
:root {
  --bg:          #f5f6f8;
  --bg-2:        #ffffff;
  --bg-3:        #eef0f3;
  --line:        #e5e7eb;
  --line-2:      #d3d6dd;
  --text:        #1b1f27;
  --text-2:      #4b5563;
  /* #828995 measured 3.52:1 on white, which fails WCAG AA (4.5:1) — and
     it was the colour of every drill description, why-line and coach
     note. The most-read text in the app, in a colour designed to be
     overlooked. #5f6674 is 5.77:1 on white and 5.05:1 on the pill
     background, so it passes everywhere it's used. 16 Sep 2026. */
  --muted:       #5f6674;
  --accent:      #303339;
  --accent-d:    #1d1f23;
  --accent-soft: #ededf0;
  --accent-contrast: #ffffff;
  --chart-accent: #303339;
  --ring-track:  #e7e9ed;
  --elite-accent: #303339;
  --blue:        #2f6f9e;
  --amber:       #8f6b1d;   /* 4.9:1 as text; was 3.37:1 */
  --orange:      #c2682f;
  --red:         #b04f63;
  --radius:      10px;
  /* Hairline borders instead of drop shadows — flatter and calmer.
     Shadows are reserved for things that genuinely float. */
  --shadow-sm:   none;
  --shadow:      0 16px 40px rgba(16,24,40,.14);
  --sidebar:     236px;
  --tabbar-h:    64px;   /* mobile tab bar — .page reserves this below the fold */
}

/* ---- Dark theme -------------------------------------------- */
html[data-theme="dark"] {
  --bg:          #101216;
  --bg-2:        #191c22;
  --bg-3:        #242830;
  --line:        #272b33;
  --line-2:      #383e49;
  --text:        #e8eaee;
  --text-2:      #b4bac4;
  --muted:       #939ba9;   /* 6.1:1 on the card; was 4.66:1 */
  --accent:      #e7e9ee;
  --accent-d:    #ffffff;
  --accent-soft: #262b33;
  --accent-contrast: #15171c;
  --chart-accent: #c9ced8;
  --ring-track:  #262a31;
  --elite-accent: #dfe2e8;
  --blue:        #6ea8d8;
  --amber:       #d4af5e;
  --orange:      #d8925c;
  --red:         #d98795;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);
  --shadow:      0 8px 28px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body.nav-open { overflow: hidden; }
body { overflow-x: hidden; }

/* App-like touch behaviour: no double-tap zoom, no pull-to-refresh
   bounce, no long-press callout, no tap highlight flash. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { touch-action: manipulation; overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent; }
button, a, label, .nav-item, .tab-item { -webkit-touch-callout: none; }

a { color: inherit; text-decoration: none; }
h1 { font-size: 1.65rem; font-weight: 680; letter-spacing: -.026em; line-height: 1.2; }
h2 { font-size: 1.22rem; font-weight: 680; letter-spacing: -.018em; }
h3 { font-size: .97rem; font-weight: 640; letter-spacing: -.008em; }
small { font-size: .8rem; }
.muted { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.opt { color: var(--muted); font-weight: 400; font-size: .8rem; }
.fineprint { color: var(--muted); font-size: .76rem; margin-top: 10px; }
.kicker { font-size: .7rem; font-weight: 700; letter-spacing: .09em; color: var(--muted); }
.link { color: var(--accent); font-size: .85rem; font-weight: 600; }
.link-btn { background: none; border: none; color: var(--accent); font: inherit;
  font-weight: 600; cursor: pointer; padding: 0; }

/* ---- Layout ------------------------------------------------ */
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar);
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 20px 14px;
  z-index: 60; transition: transform .26s ease;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; }
/* The tile behind the mark. Accent background, accent-contrast ink, so the
   cone glyph inside inverts with the theme. */
.brand-mark {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--accent); color: var(--accent-contrast);
  display: grid; place-items: center;
}
.brand-mark.big { width: 56px; height: 56px; border-radius: 14px; }
/* The glyph sits at 72% of the tile so the cone keeps an optical margin —
   the mark reads as a mark, not as a full-bleed shape. */
.mark-glyph { width: 72%; height: 72%; display: block; }
.brand-text { font-weight: 750; letter-spacing: -.01em; font-size: 1.05rem; line-height: 1.1; }
.brand-text small { display: block; color: var(--muted); font-weight: 500;
  letter-spacing: 0; margin-top: 2px; font-size: .72rem; }

/* min-height:0 lets this flex child shrink below its content, which is
   what allows it to scroll. Without it the list overflows the fixed
   sidebar and the items past the fold — Membership, Settings, Sign out —
   are unreachable on a short phone. The brand and the foot stay put. */
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: 9px; color: var(--text-2); font-weight: 550; font-size: .9rem;
  transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-d); font-weight: 650; }
.nav-icon { width: 19px; height: 19px; flex: none; display: grid; place-items: center; }
.nav-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-lock { margin-left: auto; display: grid; place-items: center; opacity: .55; }
.nav-lock svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 13px; }
.tier-chip {
  display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600;
  padding: 8px 11px; border-radius: 9px; background: var(--bg-3);
  border-left: 3px solid var(--c, var(--accent));
}
.demo-tag { color: var(--muted); font-size: .72rem; margin-top: 8px; padding-left: 4px; }

.app-main { margin-left: var(--sidebar); min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px; background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar-spacer { flex: 1; }
.icon-btn { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text);
  width: 38px; height: 38px; border-radius: 9px; font-size: 1.1rem; cursor: pointer; }

.streak-chip, .tier-pill {
  display: flex; align-items: center; gap: 5px; font-size: .81rem; font-weight: 600;
  padding: 7px 11px; border-radius: 8px; background: var(--bg-2);
  border: 1px solid var(--line-2); white-space: nowrap; color: var(--text-2);
}
.tier-pill { color: var(--c); border-color: color-mix(in srgb, var(--c) 38%, var(--line-2)); }
.level-chip { display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  padding: 5px 12px 5px 5px; border-radius: 8px; }
.lvl-badge { background: var(--accent-soft); color: var(--accent-d);
  font-weight: 800; font-size: .74rem; padding: 4px 8px; border-radius: 6px; }
.lvl-bar { width: 84px; height: 6px; background: var(--bg-3);
  border-radius: 999px; overflow: hidden; }
.lvl-bar span { display: block; height: 100%; background: var(--accent); }
.lvl-xp { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: .8rem;
  display: grid; place-items: center;
}
.hamburger { display: none; }

.page { max-width: 980px; margin: 0 auto; padding: 26px 22px 80px; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(20,28,40,.4); z-index: 55; }
body.nav-open .scrim { display: block; }

/* ---- Page header ------------------------------------------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head p { margin-top: 6px; max-width: 58ch; }
.back-link { color: var(--muted); font-size: .85rem; font-weight: 550;
  display: inline-block; margin-bottom: 14px; }
.back-link:hover { color: var(--text); }

/* ---- Cards ------------------------------------------------- */
.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 16px;
}
.card-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; }

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  padding: 10px 17px; border-radius: 9px; border: 1px solid transparent;
  transition: background .14s, border-color .14s; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-d); }
.btn-ghost { background: var(--bg-2); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-danger { background: #fdeef0; color: var(--red); border-color: #f0cdd3; }
.btn-danger:hover { background: #fbe2e6; }
.btn-danger-ghost { background: transparent; color: var(--muted);
  border-color: var(--line-2); }
.btn-danger-ghost:hover { color: var(--red); border-color: #e7b9c1; }
.btn-sm { padding: 7px 13px; font-size: .82rem; border-radius: 8px; }
.btn-lg { padding: 13px 24px; font-size: .96rem; width: 100%; margin-top: 6px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn + .btn { margin-left: 8px; }

/* ---- Stat tiles -------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 14px; }
.stat-tile { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm); }
.stat-icon { width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 1.1rem;
  background: var(--bg-3); }
.stat-value { font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; }
.stat-label { color: var(--muted); font-size: .78rem; }

/* ---- Forms ------------------------------------------------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: 6px; color: var(--text-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row.three { grid-template-columns: repeat(3, 1fr); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 10px 12px; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: #aab0bc; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23828995' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.toggle-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px;
  font-weight: 550; font-size: .92rem; cursor: pointer; }
.toggle-row input { width: auto; accent-color: var(--accent); }

/* ---- Onboarding -------------------------------------------- */
.onboard { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr;
  grid-template-rows: minmax(100vh, auto); align-items: stretch; }
.onboard-hero { padding: 56px 6vw; display: flex; flex-direction: column;
  justify-content: center; background: #21242b; color: #e6e7ea; }
.onboard-hero .brand-mark { background: #fff; color: #21242b; }
.onboard-hero h1 { font-size: 2.3rem; letter-spacing: -.02em; margin: 20px 0 10px;
  color: #fff; font-weight: 750; }
.tagline { color: #9b9ea7; font-size: 1.02rem; max-width: 380px; }
.tagline em { color: #fff; font-style: normal; font-weight: 600; }
.hero-points { list-style: none; margin-top: 26px; display: flex;
  flex-direction: column; gap: 13px; }
.hero-points li { font-size: .94rem; padding-left: 22px; position: relative;
  color: #c3c5cc; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: #9aa0ab; }
.onboard-card { padding: 48px 6vw; max-width: 540px; display: flex;
  flex-direction: column; justify-content: center; }
.onboard-card h2 { margin-bottom: 4px; }
.onboard-card .btn { margin-top: 8px; }

/* ---- Dashboard --------------------------------------------- */
.continue-card { padding: 0; overflow: hidden; }
.continue { display: flex; gap: 22px; padding: 22px; align-items: center; }
.continue-ring { flex: none; }
.continue-body h3 { font-size: 1.16rem; margin: 5px 0 2px; }
.continue-body .btn { margin-top: 12px; }
.cta-card { text-align: center; }
.empty-cta { padding: 22px 10px; text-align: center; }
.empty-emoji { font-size: 2.3rem; opacity: .9; }
.empty-cta h3 { margin: 10px 0 4px; }
.empty-cta .btn, .cta-card .btn { margin-top: 14px; }
.done-flag { color: var(--accent); font-weight: 650; margin: 10px 0; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-cols .card { margin-bottom: 0; }
.ach-mini { display: flex; flex-direction: column; gap: 11px; }
.ach-mini-item { display: flex; align-items: center; gap: 11px; }
.ach-mini-item span { font-size: 1.35rem; }
.ach-mini-item small { display: block; color: var(--muted); }
.tip { color: var(--text-2); }

/* ---- Program grid ------------------------------------------ */
.prog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.prog-card { background: var(--bg-2); border: 1px solid var(--line);
  border-top: 3px solid var(--c); border-radius: 13px; padding: 18px;
  box-shadow: var(--shadow-sm); }
.prog-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.prog-icon { line-height: 0; }
.prog-card h3 { font-size: 1.02rem; }
.badge { font-size: .67rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  letter-spacing: .03em; }
.badge-active { background: var(--accent-soft); color: var(--accent-d); }
.badge-ai { background: #e9f0f6; color: var(--blue); }
.prog-card-top .badge:first-of-type { margin-left: auto; }
.prog-bar { height: 7px; background: var(--bg-3); border-radius: 999px;
  overflow: hidden; margin: 12px 0 7px; }
.prog-bar span { display: block; height: 100%; background: var(--c); }
.prog-bar.big { height: 9px; }
.prog-meta { display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--muted); }
.prog-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.prog-actions .btn { margin-left: 0; }

/* ---- Banner ------------------------------------------------ */
.banner { background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 10px;
  padding: 12px 15px; font-size: .88rem; margin-bottom: 16px;
  box-shadow: var(--shadow-sm); }
.banner-demo { border-left-color: var(--blue); }
/* Weekly training load past the age-appropriate budget. Orange rather than
   red on purpose — this is a nudge to ease off, not an error. */
.drill-why { margin: 6px 0 0; font-size: .88rem; font-style: italic; color: var(--text-2); }
/* Warm-up and cooldown as phases with lists, instead of one paragraph. */
.ramp { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ramp-step { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; }
.ramp-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); padding-top: 3px; }
.ramp-items { margin: 0; padding-left: 16px; }
.ramp-items li { font-size: .92rem; color: var(--text-2); line-height: 1.45; margin-bottom: 2px; }
@media (max-width: 420px) { .ramp-step { grid-template-columns: 78px 1fr; gap: 8px; } }
/* ---- Assignment targets (coach) -----------------------------
   "Who is this for?" — unit tiles, and a player picker for the
   escape hatch. The reach line in the preview is the confirmation. */
.unit-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.unit-tile div small { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.pick-list { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-row:last-child { border-bottom: none; }
.pick-row input { width: 18px; height: 18px; flex: none; }
.pick-name { flex: 1; font-weight: 600; font-size: .92rem; }
.pick-meta { font-size: .8rem; color: var(--muted); }
.pv-reach { font-size: .92rem; color: var(--text); margin: 0 0 10px; padding: 9px 12px;
  border-radius: 9px; background: var(--accent-soft); line-height: 1.45; }
.pv-reach-none { background: transparent; border: 1px dashed var(--line-2); color: var(--text-2); }
@media (max-width: 520px) { .unit-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ---- Assignment preview (coach) -----------------------------
   "What your players will get." A real program from the real engine,
   shown compactly so a coach can judge the content before sending it. */
.pv { margin-top: 4px; }
.pv-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pv-week { display: inline-flex; flex-direction: column; align-items: center; min-width: 74px;
  padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-3);
  font-size: .82rem; font-weight: 650; color: var(--text); line-height: 1.2; }
.pv-week small { font-size: .66rem; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 2px; }
/* the reduce week is the point of the wave — make it visibly lighter */
.pv-week.pv-reduce { background: transparent; border-style: dashed; color: var(--text-2); }
.pv-week.pv-sharpen, .pv-week.pv-peak { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pv-summary { font-size: .92rem; color: var(--text-2); line-height: 1.5; margin: 0 0 6px; }
.pv-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-top: 6px; }
.pv-sessions, .pv-fitlist { margin: 0; padding-left: 18px; }
.pv-sessions li, .pv-fitlist li { font-size: .9rem; color: var(--text-2); margin-bottom: 5px; line-height: 1.4; }
.pv-fit { display: block; color: var(--text); font-weight: 600; font-size: .86rem; }
.pv-bookend { font-size: .88rem; color: var(--text-2); padding: 7px 0; }
.pv-tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent); margin-right: 6px; }
.pv-drills { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.pv-drill { padding: 9px 0; border-bottom: 1px solid var(--line); }
.pv-drill:last-child { border-bottom: none; }
.pv-drill-head { display: flex; align-items: baseline; gap: 8px; }
.pv-drill-head strong { flex: 1; font-size: .95rem; }
.pv-n { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--accent);
  color: var(--accent-contrast); font-size: .72rem; font-weight: 800; display: inline-flex;
  align-items: center; justify-content: center; transform: translateY(-1px); }
.pv-focus { font-size: .7rem; font-weight: 650; color: var(--blue); text-transform: uppercase;
  letter-spacing: .04em; margin: 2px 0 2px 28px; }
.pv-drill p { font-size: .88rem; color: var(--text-2); margin: 0 0 0 28px; line-height: 1.45; }
@media (max-width: 700px) { .pv-cols { grid-template-columns: 1fr; gap: 10px; } }

.banner-load { border-left-color: var(--orange); }

/* ---- Generate ---------------------------------------------- */
/* The step rail is a phone affordance — on desktop the whole form is
   two screens with the sidebar for context, so it only gets in the way.
   Hidden by default; the mobile block turns it on. */
/* ---- Build-a-program wizard --------------------------------
   One question per screen at every width, with Back/Next between them.
   The steps are hidden with CSS and never removed from the DOM:
   recommendationCard() and currentGenSelections() read the selects
   directly, so a step that isn't on screen still has to be findable. */
.gen-form[data-step] > .gen-section { display: none; }
.gen-form[data-step="1"] > #gen-s1,
.gen-form[data-step="2"] > #gen-s2,
.gen-form[data-step="3"] > #gen-s3,
.gen-form[data-step="4"] > #gen-s4 { display: block; }

/* Generate belongs to the last step only. */
.gen-form:not([data-step="4"]) .gen-actions { display: none; }

.gen-nav { display: flex; gap: 10px; margin-top: 20px; }
.gen-nav .btn { flex: 1; }

/* Sticks below the topbar, which is itself sticky at top:0. The offset
   mirrors how the topbar's height is built — 38px control + 11px bottom
   padding + 1px border, plus its top padding, which grows to the
   safe-area inset on a notched phone. */
.gen-steps { display: flex; gap: 6px; z-index: 30;
  position: sticky; top: calc(50px + max(11px, env(safe-area-inset-top)));
  padding: 10px 0; margin: -4px 0 18px;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.gen-step { flex: 1; display: flex; flex-direction: column; gap: 6px;
  align-items: center; background: none; border: none; padding: 2px 0;
  font-family: inherit; font-size: .74rem; font-weight: 650; cursor: pointer;
  color: var(--muted); line-height: 1.15; text-align: center;
  transition: color .18s; }
.gen-step:hover { color: var(--text-2); }
.gen-step .gs-bar { display: block; width: 100%; height: 3px; border-radius: 999px;
  background: var(--line-2); transition: background .18s; }
.gen-step.done .gs-bar { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.gen-step.active { color: var(--accent-d); }
.gen-step.active .gs-bar { background: var(--accent); }
.gen-section { margin-bottom: 24px; }
.gen-section h3 { margin-bottom: 12px; }
.skill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skill-card { position: relative; display: block; cursor: pointer;
  background: var(--bg-2); border: 1.5px solid var(--line-2);
  border-radius: 12px; padding: 16px; transition: border-color .14s, box-shadow .14s; }
.skill-card:hover { border-color: var(--muted); }
.skill-card input { position: absolute; opacity: 0; }
.skill-card:has(input:checked) { border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.skill-card.locked { opacity: .55; cursor: not-allowed; }
.skill-icon { line-height: 0; }
.skill-icon svg { width: 30px; height: 30px; }
.prog-icon svg { width: 26px; height: 26px; }
.cn-icon svg { width: 24px; height: 24px; }
.skill-icon svg, .prog-icon svg, .cn-icon svg {
  fill: none; stroke: var(--c, var(--accent));
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skill-name { font-weight: 650; margin: 7px 0 3px; }
.skill-tag { font-size: .78rem; color: var(--muted); }
.skill-lock { position: absolute; top: 12px; right: 12px; font-size: .62rem;
  font-weight: 700; color: var(--blue); letter-spacing: .05em;
  background: #e9f0f6; padding: 2px 7px; border-radius: 999px; }
.radio-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.radio-tile { display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--bg-2); border: 1.5px solid var(--line-2);
  border-radius: 11px; padding: 13px; }
.radio-tile input { width: auto; accent-color: var(--accent); }
.radio-tile:has(input:checked) { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.radio-tile small { display: block; color: var(--muted); }
.radio-tile.locked { opacity: .55; cursor: not-allowed; }
.tile-lock { margin-left: auto; flex: none; font-size: .62rem; font-weight: 700;
  color: var(--blue); letter-spacing: .05em; background: #e9f0f6;
  padding: 3px 8px; border-radius: 999px; }
.ai-note { background: #eef4f9; border: 1px solid #d6e3ee;
  color: #2c5d82; border-radius: 10px; padding: 11px 14px; font-size: .85rem;
  margin-bottom: 12px; }

/* ---- Program detail ---------------------------------------- */
.prog-hero-card { padding: 22px; }
.prog-hero { display: flex; gap: 22px; align-items: flex-start; }
.prog-hero-ring { flex: none; }
.prog-hero h1 { margin: 5px 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chip { background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; font-size: .76rem; font-weight: 550;
  color: var(--text-2); }
.chip-done { background: var(--accent-soft); color: var(--accent-d);
  border-color: transparent; }
.hero-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
  align-items: center; }
.hero-actions .btn { margin-left: 0; }

.coach-note { display: flex; gap: 13px; background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: 11px; padding: 15px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.cn-icon { line-height: 0; padding-top: 2px; }
.coach-note p { color: var(--muted); font-size: .9rem; margin-top: 2px; }

.week { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.week-head { width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: 15px 17px; cursor: pointer;
  background: none; border: none; color: var(--text); font: inherit; text-align: left; }
.week-head:hover { background: var(--bg-3); }
.week-head-l { display: flex; align-items: center; gap: 12px; }
.week-num { background: var(--bg-3); border-radius: 8px; font-weight: 700;
  font-size: .8rem; padding: 7px 9px; flex: none; }
.week-head-l small { display: block; color: var(--muted); font-weight: 400;
  margin-top: 2px; }
.week-head-r { display: flex; align-items: center; gap: 12px; }
.week-prog { font-size: .8rem; color: var(--muted); font-weight: 600; }
.caret { color: var(--muted); }
.week-body { padding: 4px 14px 14px; }
.sess-row { display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line); margin-top: 8px; }
.sess-row.next { border-color: var(--accent); background: var(--accent-soft); }
.sess-row.done .sess-info strong { color: var(--muted); }
.sess-status { font-size: 1rem; width: 22px; text-align: center; }
.sess-info { flex: 1; }
.sess-info small { display: block; color: var(--muted); }
.sess-row .btn { margin-left: 0; }

/* ---- Session ----------------------------------------------- */
.sess-hero { margin-bottom: 18px; }
.sess-hero h1 { margin-top: 5px; }
.block-label { font-size: .72rem; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; }
.block-label small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.drill { display: flex; gap: 12px; }
.drill.warmup { display: block; }
.drill.main { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.drill.main.checked { border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft); }
.drill-check { flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--accent-contrast);
  font-weight: 800; cursor: pointer; font-size: .9rem; }
.drill.checked .drill-check { background: var(--accent); border-color: var(--accent); }
.drill-body { flex: 1; }
.drill-head { display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; }
.vol { font-size: .8rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.drill-focus { font-size: .73rem; font-weight: 650; color: var(--blue);
  text-transform: uppercase; letter-spacing: .04em; margin: 3px 0; }
.drill-head strong { font-size: 1.02rem; letter-spacing: -.01em; }
/* The description is the instruction — what the player actually does.
   It was .88rem in the muted colour, i.e. styled as an aside. */
.drill-body p { font-size: .94rem; color: var(--text-2); line-height: 1.5; }
.coaching { margin: 9px 0 0 18px; }
.coaching li { font-size: .9rem; color: var(--text-2); margin-bottom: 4px; line-height: 1.45; }
.stars { display: flex; gap: 4px; }
.star { background: none; border: none; font-size: 1.6rem; cursor: pointer;
  color: var(--line-2); line-height: 1; }
.star.on { color: var(--amber); }
.log-card .btn-lg { margin-top: 8px; }

/* ---- Charts ------------------------------------------------ */
.chart { width: 100%; height: auto; }
.chart-val { fill: var(--text-2); font-size: 10px; font-weight: 650; }
.chart-lbl { fill: var(--muted); font-size: 9.5px; }
.chart-axis { stroke: var(--line-2); stroke-width: 1; }
.ring-label { fill: var(--text); font-size: 19px; font-weight: 750; }
.ring-sub { fill: var(--muted); font-size: 9px; }

/* ---- Achievements ------------------------------------------ */
.ach-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ach-progress .prog-bar { flex: 1; margin: 0; --c: var(--accent); }
.ach-progress span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ach-card { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 13px; padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.ach-card.locked { opacity: .55; }
.ach-card.got { border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: var(--accent-soft); }
.ach-badge { font-size: 2rem; }
.ach-card strong { display: block; margin: 7px 0 3px; font-size: .9rem; }
.ach-card small { color: var(--muted); }
.ach-xp { display: inline-block; margin-top: 8px; font-size: .72rem;
  font-weight: 700; color: var(--amber); }
.ach-tick { display: block; margin-top: 6px; font-size: .72rem;
  font-weight: 700; color: var(--accent); }

/* ---- Leaderboard ------------------------------------------- */
.lb-mine { display: flex; align-items: center; gap: 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 13px; padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.lb-rank-big { font-size: 1.9rem; font-weight: 800; color: var(--accent); }
.lb-mine small { display: block; color: var(--muted); }
.lb-list { display: flex; flex-direction: column; gap: 7px; }
.lb-row { display: flex; align-items: center; gap: 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px;
  box-shadow: var(--shadow-sm); }
.lb-row.you { border-color: var(--accent); background: var(--accent-soft); }
.lb-rank { font-size: 1rem; font-weight: 700; width: 38px; }
.lb-name { flex: 1; }
.lb-name small { display: block; color: var(--muted); }
.lb-xp { font-weight: 700; color: var(--text-2); }

/* ---- AI Coach ---------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: 12px; max-height: 52vh;
  overflow-y: auto; padding: 4px; margin-bottom: 14px; }
.chat-msg { display: flex; gap: 10px; max-width: 86%; }
.chat-msg.user { flex-direction: row-reverse; margin-left: auto; }
.chat-av { width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .85rem; font-weight: 700;
  background: var(--bg-3); color: var(--text-2); }
.chat-msg.coach .chat-av { background: var(--accent); color: var(--accent-contrast); }
.chat-bubble { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; font-size: .9rem;
  box-shadow: var(--shadow-sm); }
.chat-msg.user .chat-bubble { background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.suggest-chip { background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--text-2); border-radius: 999px; padding: 7px 13px; font: inherit;
  font-size: .8rem; cursor: pointer; }
.suggest-chip:hover { border-color: var(--accent); color: var(--accent); }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; }

/* ---- Membership -------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 22px; }
.tier-card { position: relative; background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 15px; padding: 22px 20px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); max-width: 460px; width: 100%; }
.tier-card.popular { border-color: var(--c); }
.tier-card.current { box-shadow: 0 0 0 2px var(--c) inset, var(--shadow-sm); }
.tier-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--c); color: #fff; font-size: .67rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; }
.tier-name { font-size: 1.05rem; font-weight: 750; color: var(--c); }
.tier-price { font-size: 1.45rem; font-weight: 800; margin: 4px 0; }
.tier-tag { color: var(--muted); font-size: .85rem; min-height: 38px; }
.tier-perks { list-style: none; margin: 14px 0; flex: 1; display: flex;
  flex-direction: column; gap: 8px; }
.tier-perks li { font-size: .86rem; color: var(--text-2); }
.feature-table { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 15px; padding: 20px; box-shadow: var(--shadow-sm); }
.feature-table h3 { margin-bottom: 12px; }
.feature-wrap { margin-top: 4px; }
.feature-wrap > summary { cursor: pointer; font-weight: 650; font-size: .9rem;
  padding: 12px 2px; list-style: none; display: flex; align-items: center; gap: 8px; }
.feature-wrap > summary::-webkit-details-marker { display: none; }
.feature-wrap > summary::after { content: "⌄"; margin-left: auto; color: var(--muted);
  transition: transform .18s; }
.feature-wrap[open] > summary::after { transform: rotate(180deg); }

.ft-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px;
  padding: 9px 0; border-top: 1px solid var(--line); align-items: center; }
.ft-row > div:not(.ft-label) { text-align: center; font-size: .85rem; }
.ft-label { font-size: .88rem; }
.yes { color: var(--accent); font-weight: 800; }
.no { color: var(--muted); }
.txt { color: var(--text-2); font-weight: 600; }

/* ---- Locked / upgrade screen ------------------------------- */
.locked-screen { text-align: center; padding: 40px 20px; max-width: 440px;
  margin: 0 auto; }
.locked-emoji { width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 13px;
  background: var(--bg-3); display: grid; place-items: center; }
.locked-emoji svg { width: 24px; height: 24px; stroke: var(--muted); fill: none;
  stroke-width: 1.8; }
.locked-screen h2 { margin: 10px 0 6px; }
.locked-tier { display: inline-block; border: 1.5px solid var(--c);
  border-radius: 12px; padding: 14px 28px; margin: 18px 0; }
.lt-name { font-weight: 700; color: var(--c); }
.lt-price { font-size: 1.15rem; font-weight: 800; }
.locked-screen .btn { margin: 6px 5px 0; }

.danger-card { border-color: #f0cdd3; }

/* ---- Overlay / loading / celebration ----------------------- */
.overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(20,28,40,.5); backdrop-filter: blur(3px); padding: 20px; }
.overlay.hidden { display: none; }
.loading, .celebrate { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 36px; text-align: center; max-width: 360px;
  box-shadow: var(--shadow); }
.loading h2 { margin: 14px 0 6px; }
.spinner { width: 42px; height: 42px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--bg-3); border-top-color: var(--accent);
  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; }
  65% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

.celebrate h2 { margin: 0 0 4px; font-size: 1.3rem; }
.celebrate-badge { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--accent-soft);
  animation: pop .45s ease both; }
.celebrate-badge svg { width: 32px; height: 32px; fill: none; stroke: var(--accent);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.celebrate-badge.level { background: var(--accent); }
.cb-level { font-size: 2rem; font-weight: 800; color: var(--accent-contrast); letter-spacing: -.02em; }
.celebrate .sub { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.xp-stat { background: var(--bg-3); border-radius: 12px; padding: 13px;
  margin-bottom: 18px; }
.xp-stat .amount { display: block; font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.02em; }
.xp-stat .label { display: block; font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 650; margin-top: 1px; }
.celebrate .btn { width: 100%; }

/* ---- Toasts ------------------------------------------------ */
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 9px; max-width: 340px; }
.toast { background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 12px 15px; font-size: .87rem; box-shadow: var(--shadow);
  transform: translateX(120%); opacity: 0; transition: transform .32s, opacity .32s; }
.toast.show { transform: translateX(0); opacity: 1; }
.toast.achv { border-left-color: var(--amber); }
.toast.warn { border-left-color: var(--orange); }

/* ---- Generate: group hint ---------------------------------- */
.gen-hint { color: var(--muted); font-size: .85rem; margin: -4px 0 12px; }

/* ---- Session objective + drill detail lines ---------------- */
.sess-objective { background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 11px;
  padding: 13px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.sess-objective .kicker { color: var(--muted); }
.sess-objective p { font-size: .97rem; color: var(--text); margin-top: 4px; line-height: 1.5; }

.drill-line { display: flex; gap: 8px; font-size: .83rem;
  color: var(--text-2); margin-top: 8px; }
.dl-tag { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); background: var(--bg-3);
  padding: 3px 7px; border-radius: 5px; height: fit-content; margin-top: 1px; }
.drill-line.group .dl-tag { color: var(--blue); background: #e9f0f6; }
.drill-line.solo .dl-tag { color: var(--accent-d); background: var(--accent-soft); }
.coaching + .drill-line { margin-top: 9px; }

.group-game .drill-head { margin-bottom: 6px; }
.group-game .drill-head strong { font-size: 1rem; }

.chip-group { background: var(--accent-soft); color: var(--accent-d);
  border-color: transparent; font-weight: 650; }

/* ---- Training journal -------------------------------------- */
.mood-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.mood-btn { padding: 9px 3px; cursor: pointer;
  background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: 9px;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--text-2);
  transition: border-color .14s, background .14s; }
.mood-btn:hover { border-color: var(--muted); }
.mood-btn.on { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-d); }

.journal-prompt { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: var(--bg-3); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 14px; }
.journal-prompt p { font-size: .92rem; font-weight: 550; margin-top: 3px; }
.journal-prompt .btn { flex: none; }

.journal-entry { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm); }
.je-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.je-date { font-weight: 700; font-size: .82rem; }
.je-mood { font-size: .68rem; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--bg-3); color: var(--text-2); }
.je-mood.mood-1 { background: #f4e3e6; color: #9c4453; }
.je-mood.mood-2 { background: #f4e8df; color: #9a5a32; }
.je-mood.mood-3 { background: var(--bg-3); color: var(--text-2); }
.je-mood.mood-4 { background: #e4ecf2; color: #355f82; }
.je-mood.mood-5 { background: #e3efe8; color: #2f6f4c; }
.je-del { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .82rem; padding: 3px 7px; border-radius: 6px;
  line-height: 1; }
.je-del:hover { color: var(--red); background: var(--bg-3); }
.je-prompt { font-size: .8rem; color: var(--muted); font-style: italic;
  margin-bottom: 6px; }
.je-text { font-size: .92rem; color: var(--text); }

/* ---- Game-Day Prep ----------------------------------------- */
.gd-top { display: flex; gap: 20px; align-items: center; }
.gd-ring { flex: none; }
.gd-setup { flex: 1; }
.gd-setup .field-row { margin-bottom: 4px; }
.gd-setup .field { margin-bottom: 0; }
.gd-hint { color: var(--muted); font-size: .82rem; margin-top: 10px; }

.gd-check { flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--accent-contrast);
  font-weight: 800; cursor: pointer; font-size: .9rem; }
.checked > .gd-check, .tl-item.checked .gd-check, .gd-row.checked .gd-check {
  background: var(--accent); border-color: var(--accent); }

/* fuel timeline */
.timeline { position: relative; margin-bottom: 14px; }
.timeline::before { content: ""; position: absolute; left: 71px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line); }
.tl-item { position: relative; display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.tl-item.checked { border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft); }
.tl-time { flex: none; width: 60px; font-size: .72rem; font-weight: 700;
  color: var(--accent-d); line-height: 1.3; padding-top: 2px; }
.tl-item .gd-check { z-index: 1; }
.tl-body { flex: 1; }
.tl-body strong { font-size: .94rem; }
.tl-body p { font-size: .84rem; color: var(--muted); margin-top: 2px; }

.gd-tips { margin: 0 0 0 18px; }
.gd-tips li { font-size: .87rem; color: var(--text-2); margin-bottom: 5px; }

/* mental / warm-up rows */
.gd-row { display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.gd-row.checked { border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft); }
.gd-row-body { flex: 1; }
.gd-row-body strong { font-size: .94rem; }
.gd-row-body p { font-size: .84rem; color: var(--muted); margin-top: 2px; }

/* match goals */
.gd-goal { display: flex; align-items: center; gap: 10px; }
.gd-goal-num { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-d); font-weight: 800;
  font-size: .76rem; display: grid; place-items: center; }
.gd-goals-card .gd-goal input { flex: 1; }

.gd-save-row { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.gd-save-row .btn { margin-left: 0; }

/* ---- Coach Hub --------------------------------------------- */
.squad-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.squad-card { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 13px; padding: 15px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px; }
.squad-top { display: flex; align-items: center; gap: 10px; }
.squad-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none;
  color: #fff; font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
.squad-id { flex: 1; min-width: 0; }
.squad-id strong { display: block; font-size: .95rem; }
.squad-id small { color: var(--muted); }
.squad-status { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; }
.squad-status.ok { background: var(--accent-soft); color: var(--accent-d); }
.squad-status.warn { background: #f4e8df; color: #9a5a32; }
.squad-status.bad { background: #f4e3e6; color: #9c4453; }
.squad-focus { font-size: .8rem; color: var(--muted); }
.squad-focus strong { color: var(--text-2); }
.squad-week { display: flex; flex-direction: column; gap: 5px; }
.sw-bar { height: 7px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.sw-bar span { display: block; height: 100%; }
.sw-label { font-size: .74rem; color: var(--muted); }
.squad-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem;
  color: var(--text-2); }
.squad-nudge { margin-top: 2px; align-self: flex-start; }

/* ---- Injury Rehab ------------------------------------------ */
.rehab-disclaimer { display: flex; gap: 11px; background: #fbf3e6;
  border: 1px solid #ecd9b3; border-radius: 11px; padding: 13px 15px;
  margin-bottom: 16px; font-size: .85rem; color: #7a5a1e; }
.rd-icon { flex: none; }
.rehab-disclaimer strong { color: #5e4516; }

.rehab-flags { display: flex; flex-direction: column; gap: 8px; }
.flag-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font-size: .87rem; }
.flag-row.on { border-color: #e2b3bb; background: #fbf0f2; }
.flag-row input { display: none; }
.flag-box { flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--line-2); background: var(--bg-2); color: #fff;
  font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.flag-row.on .flag-box { background: var(--red); border-color: var(--red); }

.rehab-stop { text-align: center; background: #fbf0f2; border: 1px solid #e9c4cb;
  border-radius: 14px; padding: 26px 22px; margin-bottom: 14px; }
.rs-icon { font-size: 2.2rem; }
.rehab-stop h2 { color: #9c3a4c; margin: 8px 0 6px; }
.rehab-stop p { color: #7a4a52; font-size: .9rem; max-width: 460px; margin: 0 auto 16px; }

.rehab-areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: 16px; }
.rehab-area { background: var(--bg-2); border: 1.5px solid var(--line-2);
  border-radius: 11px; padding: 13px 8px; cursor: pointer; text-align: center;
  font: inherit; color: var(--text); transition: border-color .14s, box-shadow .14s; }
.rehab-area:hover { border-color: var(--muted); }
.rehab-area.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rehab-area strong { display: block; font-size: .9rem; }
.rehab-area small { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }

.stage-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px; }
.stage-tab { background: var(--bg-2); border: 1.5px solid var(--line-2);
  border-radius: 10px; padding: 11px 8px; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 600; color: var(--text-2); display: flex;
  align-items: center; gap: 7px; justify-content: center; text-align: center; }
.stage-tab.on { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-d); }
.st-num { flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-3); color: var(--text-2); font-weight: 800; font-size: .72rem;
  display: grid; place-items: center; }
.stage-tab.on .st-num { background: var(--accent); color: #fff; }

.rehab-goal .kicker { color: var(--muted); }
.rehab-goal p { font-size: .95rem; color: var(--text-2); margin-top: 4px; }
.rehab-ex { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px; margin-bottom: 9px; box-shadow: var(--shadow-sm); }
.rex-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rex-head strong { font-size: .93rem; }
.rehab-ex p { font-size: .84rem; margin-top: 3px; }

.rehab-cue { display: flex; gap: 9px; font-size: .85rem; padding: 11px 13px;
  border-radius: 10px; margin-top: 10px; align-items: flex-start; }
.rehab-cue.ok { background: var(--accent-soft); color: var(--accent-d); }
.rehab-cue.warn { background: #f4e8df; color: #8a5526; }
.rc-tag { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding-top: 2px; }

.pain-rules { display: flex; flex-direction: column; gap: 8px; }
.pain-row { display: flex; align-items: center; gap: 10px; font-size: .85rem;
  color: var(--text-2); }
.pain-row strong { flex: none; width: 64px; }
.pain-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; }
.pain-row.green .pain-dot { background: #3f9d6b; }
.pain-row.amber .pain-dot { background: #cf9b3a; }
.pain-row.red .pain-dot { background: #c0566a; }

.rehab-seek { background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--red); border-radius: 10px; padding: 13px 15px;
  font-size: .85rem; color: var(--text-2); box-shadow: var(--shadow-sm); }

/* ---- Guided tour ------------------------------------------- */
body.tour-lock { overflow: hidden; }
#tour { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
#tour.show { pointer-events: auto; }
.tour-dim { position: absolute; inset: 0; background: rgba(18,22,30,.66); }
.tour-hole { position: absolute; border-radius: 11px;
  box-shadow: 0 0 0 9999px rgba(18,22,30,.66), 0 0 0 2px rgba(255,255,255,.85) inset;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-pop { position: fixed; width: min(304px, 88vw); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(16,24,40,.28); }
.tour-pop.centered { left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%); }
.tour-pop h3 { font-size: 1.05rem; margin: 9px 0 5px; }
.tour-pop p { font-size: .9rem; color: var(--text-2); line-height: 1.5; }
.tour-progress { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2);
  transition: width .2s, background .2s; }
.tour-dot.on { width: 17px; background: var(--accent); }
.tour-actions { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 15px; }
.tour-skip { background: none; border: none; color: var(--muted); font: inherit;
  font-size: .82rem; cursor: pointer; padding: 4px 2px; }
.tour-skip:hover { color: var(--text-2); }
.tour-nav-btns { display: flex; gap: 8px; }
.tour-nav-btns .btn { margin-left: 0; }
.tour-arrow { position: absolute; width: 0; height: 0; }
.tour-arrow.up    { top: -9px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--bg-2); }
.tour-arrow.down  { bottom: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--bg-2); }
.tour-arrow.left  { left: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid var(--bg-2); }
.tour-arrow.right { right: -9px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 9px solid var(--bg-2); }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 880px) {
  .sidebar { transform: translateX(-100%); }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow); }
  .app-main { margin-left: 0; }
  .hamburger { display: block; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-cols, .prog-grid, .radio-tiles, .tier-grid,
  .squad-list, .field-row, .field-row.three { grid-template-columns: 1fr; }
  /* Two up, not one. Seven skill cards stacked single-file came to 933px —
     a screen and a half of scrolling before the second question appears.
     The tagline is the tallest part of a card once the column is narrow
     (three wrapped lines), and the skill names carry the meaning on their
     own, so it steps aside on phones. */
  .skill-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .skill-card { padding: 12px; }
  .skill-tag { display: none; }
  .gen-section { margin-bottom: 18px; }

  /* Four stacked plan cards were 1,506px between them. Trimming the padding
     and tightening the perk list keeps every perk readable but gives back
     roughly a screen. */
  .tier-card { padding: 16px 15px; }
  .tier-perks { gap: 6px; margin: 10px 0; }
  /* The reserved tagline height exists to line cards up side by side.
     Stacked one per row there is nothing to line up with, so it is just
     empty space on the screen with the least of it. */
  .tier-tag { min-height: 0; }
  .early-access { padding: 16px; }

  /* Collapsed by default here, so it needs to look tappable. */
  .feature-wrap > summary { background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 11px; padding: 13px 15px; min-height: 46px; }

  /* Step rail: tells you at a glance that there are four questions below,
     which was not obvious when the fold cut through the first one. */
  /* Phone only: the submit rides above the tab bar rather than sitting at
     the end of the step, so it is always one tap away. */
  .gen-actions { position: sticky; bottom: calc(var(--tabbar-h) + 8px);
    z-index: 30; padding: 10px 0 4px;
    background: linear-gradient(to top, var(--bg) 72%, transparent); }
  .gen-actions .btn { width: 100%; }
  .gen-steps { font-size: .64rem; }
  .ach-grid, .rehab-areas, .mental-grid { grid-template-columns: repeat(2, 1fr); }
  .join-code-row { flex-direction: column; align-items: flex-start; }
  .disc-row { grid-template-columns: 1fr; gap: 4px; }
  .stage-tabs { grid-template-columns: 1fr; }
  .why-inner { padding-left: 16px; }
  .onboard { grid-template-columns: 1fr; grid-template-rows: auto; }
  .onboard-hero { padding: 40px 7vw; }
  .onboard-card { padding: 32px 7vw 50px; }
  .gd-top { flex-direction: column; text-align: center; }
  .gd-setup { width: 100%; }
  .gd-setup .field label { text-align: left; }
  .continue, .prog-hero { flex-direction: column; text-align: center; }
  .continue-body .chips, .prog-hero .chips { justify-content: center; }
  .hero-actions { justify-content: center; }
  .level-chip .lvl-xp { display: none; }
  .page { padding: 20px 16px 70px; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .ach-grid { grid-template-columns: 1fr; }
  .ft-row { grid-template-columns: 1.7fr .9fr .9fr; font-size: .74rem; gap: 4px; }
  .ft-label { font-size: .78rem; }
  .mode-tabs { flex-direction: column; }
  h1 { font-size: 1.3rem; }
  .tier-pill { display: none; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .lvl-bar { width: 52px; }
  .lvl-xp { display: none; }
}
@media (max-width: 360px) {
  .lvl-bar { display: none; }
  .streak-chip { padding: 7px 9px; }
}



/* ============================================================
   Modern layer — icon buttons, dark overrides, tab bar, motion
   ============================================================ */
.icon-btn { display: grid; place-items: center; }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Dark-mode component overrides ------------------------- */
html[data-theme="dark"] .topbar { background: rgba(19,22,27,.85); }
html[data-theme="dark"] .ai-note { background: #1c2733; border-color: #2b3b4d; color: #9ec3e2; }
html[data-theme="dark"] .badge-ai,
html[data-theme="dark"] .skill-lock,
html[data-theme="dark"] .tile-lock { background: #233240; color: #8fb8dd; }
html[data-theme="dark"] .rehab-disclaimer { background: #2a2413; border-color: #4a3d1e; color: #d3ba7c; }
html[data-theme="dark"] .rehab-disclaimer strong { color: #e6d096; }
html[data-theme="dark"] .rehab-stop { background: #2b1d22; border-color: #4a2c35; }
html[data-theme="dark"] .rehab-stop h2 { color: #e394a3; }
html[data-theme="dark"] .rehab-stop p { color: #c99aa4; }
html[data-theme="dark"] .rehab-cue.warn { background: #2b2117; color: #d8ab72; }
html[data-theme="dark"] .flag-row.on { background: #2c2025; border-color: #54333c; }
html[data-theme="dark"] .btn-danger { background: #33222a; color: #e394a3; border-color: #4c3038; }
html[data-theme="dark"] .btn-danger:hover { background: #3d2831; }
html[data-theme="dark"] .danger-card { border-color: #4c3038; }
html[data-theme="dark"] .je-mood.mood-1 { background: #33232b; color: #dc93a1; }
html[data-theme="dark"] .je-mood.mood-2 { background: #332a1f; color: #d8ab72; }
html[data-theme="dark"] .je-mood.mood-4 { background: #1f2a35; color: #8fb8dd; }
html[data-theme="dark"] .je-mood.mood-5 { background: #1f2c25; color: #8cc7a4; }
html[data-theme="dark"] .squad-status.ok { background: #1f2c25; color: #8cc7a4; }
html[data-theme="dark"] .squad-status.warn { background: #332a1f; color: #d8ab72; }
html[data-theme="dark"] .squad-status.bad { background: #33232b; color: #dc93a1; }

/* ---- Mobile bottom tab bar ---------------------------------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
html[data-theme="dark"] .tabbar { background: rgba(19,22,27,.92); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 5px 2px; color: var(--muted); font-size: .62rem;
  font-weight: 600; background: none; border: none; font-family: inherit;
  cursor: pointer; border-radius: 9px; text-align: center; }
.tab-item svg { width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab-item.active { color: var(--accent-d); }
@media (max-width: 880px) {
  .tabbar { display: flex; }
  .page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ---- Motion & micro-interactions ---------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; } }
.page > * { animation: fadeUp .32s ease both; }
.page > *:nth-child(2) { animation-delay: .04s; }
.page > *:nth-child(3) { animation-delay: .08s; }
.page > *:nth-child(4) { animation-delay: .12s; }
.page > *:nth-child(5) { animation-delay: .16s; }
.page > *:nth-child(n+6) { animation-delay: .2s; }

.prog-card, .tier-card, .squad-card, .ach-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
@media (hover: hover) {
  .prog-card:hover, .tier-card:hover, .squad-card:hover, .ach-card:hover {
    transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.10); }
}
.btn { transition: background .14s, border-color .14s, transform .1s ease; }
.btn:active { transform: scale(.97); }

/* ---- AI recommendation & "why this plan" -------------------- */
.field-help { font-size: .76rem; color: var(--muted); margin-top: 5px; }

.rec-card, .why-card { display: flex; gap: 13px; align-items: flex-start;
  border-radius: 13px; padding: 15px 17px; margin: 4px 0 18px; }
.rec-card { background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.why-card { background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); box-shadow: var(--shadow-sm);
  margin: 0 0 16px; }
.rec-icon { flex: none; line-height: 0; padding-top: 2px; }
.rec-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-d);
  stroke-width: 1.6; stroke-linejoin: round; }
.rec-body { flex: 1; }
.rec-body .kicker { color: var(--muted); }
.rec-headline { font-size: 1.08rem; font-weight: 750; letter-spacing: -.01em;
  margin: 3px 0 5px; color: var(--text); }
.rec-sub { font-weight: 500; font-size: .84rem; color: var(--muted); }
.rec-body p { font-size: .87rem; color: var(--text-2); line-height: 1.5; }

/* ---- Free-plan generation quota ----------------------------- */
.quota-banner { display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 11px;
  padding: 12px 15px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.quota-text { font-size: .87rem; color: var(--text-2); }
.quota-pips { display: flex; gap: 5px; margin-right: auto; }
.quota-pip { width: 24px; height: 6px; border-radius: 999px; background: var(--accent);
  opacity: .85; }
.quota-pip.used { background: var(--line-2); opacity: 1; }

/* ---- Collapsible drill detail (session screen) -------------- */
.drill-more { margin-top: 10px; }
.drill-more summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: 5px; font-size: .78rem; font-weight: 650;
  color: var(--accent-d); background: var(--bg-3); border-radius: 999px;
  padding: 5px 12px; user-select: none; }
.drill-more summary::-webkit-details-marker { display: none; }
.drill-more summary::after { content: "▾"; font-size: .7rem; }
.drill-more[open] summary::after { content: "▴"; }
.drill-more .dm-close { display: none; }
.drill-more[open] .dm-open { display: none; }
.drill-more[open] .dm-close { display: inline; }
.dm-inner { padding-top: 4px; }
.dm-inner .coaching { margin: 0 0 0 16px; }
.dm-inner .drill-line { align-items: flex-start; }

/* ---- Collapsible "why this plan" ---------------------------- */
.why-card.collapsible { display: block; padding: 0; }
.why-card.collapsible summary { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 13px; padding: 14px 16px; user-select: none; }
.why-card.collapsible summary::-webkit-details-marker { display: none; }
.why-sum { flex: 1; display: block; }
.why-sum .rec-headline { margin: 2px 0 0; font-size: 1rem; }
.why-caret { color: var(--muted); font-size: .8rem; transition: transform .18s; }
.why-card.collapsible[open] .why-caret { transform: rotate(180deg); }
.why-inner { padding: 0 16px 15px 51px; }
.why-inner p { font-size: .87rem; color: var(--text-2); line-height: 1.5; margin-bottom: 7px; }
.coach-line { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 10px !important; }

/* ---- Getting-started checklist ------------------------------ */
.gs-list { display: flex; flex-direction: column; gap: 9px; }
.gs-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.gs-item.next { border-color: var(--accent); background: var(--accent-soft); }
.gs-item.done .gs-body strong { color: var(--muted); text-decoration: line-through; }
.gs-tick { flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: var(--accent-contrast); }
.gs-item.done .gs-tick { background: var(--accent); border-color: var(--accent); }
.gs-body { flex: 1; }
.gs-body strong { font-size: .9rem; }
.gs-body small { display: block; color: var(--muted); margin-top: 2px; }
.gs-item .btn { flex: none; }

/* ---- Post-generation guide modal ---------------------------- */
.guide { position: relative; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 26px 22px; max-width: 430px;
  box-shadow: var(--shadow); max-height: 88vh; overflow-y: auto; }
.guide .kicker { color: var(--muted); }
.guide h2 { margin: 5px 0 3px; font-size: 1.25rem; }
.guide .sub { color: var(--muted); font-size: .9rem; margin-bottom: 16px; }
.guide-x { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--muted); font-size: .95rem; cursor: pointer; padding: 4px 7px;
  border-radius: 6px; line-height: 1; }
.guide-x:hover { background: var(--bg-3); color: var(--text); }
.guide-steps { display: flex; flex-direction: column; gap: 13px; margin-bottom: 18px; }
.guide-step { display: flex; gap: 12px; align-items: flex-start; }
.gs-num { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast); font-weight: 800;
  font-size: .76rem; display: grid; place-items: center; }
.guide-step strong { font-size: .92rem; }
.guide-step p { font-size: .84rem; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.guide-later { display: block; width: 100%; text-align: center; margin-top: 10px;
  color: var(--muted); }

/* ---- Mode tabs (Recovery) ----------------------------------- */
.mode-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.mode-tab { flex: 1; padding: 11px 10px; cursor: pointer; font: inherit;
  font-size: .86rem; font-weight: 650; color: var(--text-2);
  background: var(--bg-2); border: 1.5px solid var(--line-2); border-radius: 10px; }
.mode-tab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }

/* ---- Mental Coach ------------------------------------------- */
.mental-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
  margin-bottom: 18px; }
.mental-card { background: var(--bg-2); border: 1.5px solid var(--line-2);
  border-radius: 13px; padding: 15px 13px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); transition: border-color .14s, box-shadow .14s; }
.mental-card:hover { border-color: var(--muted); }
.mental-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mental-emoji { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.mental-card strong { display: block; font-size: .92rem; }
.mental-card small { display: block; color: var(--muted); margin-top: 2px; font-size: .78rem; }

/* ---- Game Analysis results ---------------------------------- */
.analysis-body .an-summary { font-size: .9rem; color: var(--text); margin-bottom: 11px; }
.an-section { margin-bottom: 10px; }
.an-section ul { margin: 6px 0 0 18px; }
.an-section li { font-size: .85rem; color: var(--text-2); margin-bottom: 4px; }
.an-next { font-size: .86rem; color: var(--text-2); background: var(--accent-soft);
  border-radius: 9px; padding: 10px 12px; }

/* ---- Feature table header row ------------------------------- */
.ft-head { border-top: none; font-weight: 700; font-size: .78rem; color: var(--muted); }
.ft-head .ft-label { font-size: .95rem; color: var(--text); font-weight: 700; }

/* ---- Auth screens ------------------------------------------- */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-card { background: var(--bg-2); border: 1.5px solid var(--line-2);
  border-radius: 12px; padding: 14px 12px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); transition: border-color .14s, box-shadow .14s; }
.role-card:hover { border-color: var(--muted); }
.role-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.role-icon { display: block; line-height: 0; margin-bottom: 8px; }
.role-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-d);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.role-card strong { display: block; font-size: .92rem; }
.role-card small { display: block; color: var(--muted); margin-top: 3px;
  font-size: .76rem; line-height: 1.4; }

.auth-error { background: #fbf0f2; border: 1px solid #e9c4cb; color: #9c3a4c;
  border-radius: 9px; padding: 10px 13px; font-size: .85rem; margin-bottom: 13px; }
html[data-theme="dark"] .auth-error { background: #2b1d22; border-color: #4a2c35; color: #e394a3; }
.auth-switch { text-align: center; font-size: .85rem; color: var(--muted);
  margin-top: 14px; }
.boot-wait { min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; }
.boot-wait p { color: var(--muted); font-size: .9rem; }

/* ---- Chat typing & streaming cues --------------------------- */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: typingBounce 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typingBounce {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.caret-blink { display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: text-bottom; animation: caretBlink .9s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typing i, .caret-blink { animation: none; }
}

.auth-notice { background: var(--accent-soft); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 10px 13px; font-size: .85rem; color: var(--text-2);
  margin-bottom: 13px; line-height: 1.5; }

.acc-picker { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.acc-picker .kicker { display: block; color: var(--muted); margin-bottom: 9px; }
.acc-chip { display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 9px 11px; margin-bottom: 7px; cursor: pointer; font: inherit;
  color: var(--text); text-align: left; }
.acc-chip:hover { border-color: var(--accent); }
.acc-av { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-contrast); font-weight: 700;
  font-size: .74rem; display: grid; place-items: center; }
.acc-meta strong { display: block; font-size: .87rem; }
.acc-meta small { color: var(--muted); font-size: .74rem; }

.signout-btn { width: 100%; margin-top: 9px; background: none; border: none;
  color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer;
  padding: 6px; border-radius: 7px; text-align: left; }
.signout-btn:hover { background: var(--bg-3); color: var(--text); }

/* ---- Parental consent --------------------------------------- */
.parent-required { background: #fbf3e6; border: 1px solid #ecd9b3; border-radius: 12px;
  padding: 14px 15px; margin-bottom: 14px; }
html[data-theme="dark"] .parent-required { background: #2a2413; border-color: #4a3d1e; }
.pr-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.pr-icon { font-size: 1.2rem; }
.pr-head strong { display: block; font-size: .9rem; color: #7a5a1e; }
html[data-theme="dark"] .pr-head strong { color: #e6d096; }
.pr-head small { display: block; color: #8a6b2e; font-size: .8rem; line-height: 1.45; margin-top: 3px; }
html[data-theme="dark"] .pr-head small { color: #c9ad76; }
.parent-required .field { margin-bottom: 0; }
.parent-required.age-blocked { background: #fbf0f2; border-color: #e9c4cb; }
.parent-required.age-blocked .pr-head { margin-bottom: 0; }
.parent-required.age-blocked strong { color: #9c3a4c; }
.parent-required.age-blocked small { color: #8a5560; }
html[data-theme="dark"] .parent-required.age-blocked { background: #2b1d22; border-color: #4a2c35; }
html[data-theme="dark"] .parent-required.age-blocked strong { color: #e394a3; }
html[data-theme="dark"] .parent-required.age-blocked small { color: #c99aa4; }

.consent-wait { text-align: center; }
.cw-icon { font-size: 2.6rem; margin-bottom: 6px; }
.consent-wait h2 { margin-bottom: 6px; }
.consent-steps { text-align: left; display: flex; flex-direction: column; gap: 13px;
  margin: 20px 0; }
.consent-share { background: var(--bg-3); border-radius: 12px; padding: 15px;
  margin: 18px 0; text-align: left; }
.consent-share .kicker { display: block; color: var(--muted); margin-bottom: 7px; }
.share-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; margin-bottom: 10px; word-break: break-all; color: var(--text-2); }
.consent-share .btn { margin-right: 7px; }
.consent-actions { display: flex; flex-direction: column; gap: 10px; align-items: center;
  margin-top: 8px; }

.parent-consent .kicker { display: block; color: var(--muted); }
.parent-consent h2 { margin: 5px 0 8px; }
.disc-table { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.disc-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); }
.disc-row:last-child { border-bottom: none; }
.disc-what strong { font-size: .85rem; }
.disc-why { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.perm-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 6px; }
.perm-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 12px 14px; }
.perm-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.perm-row input { display: none; }
.perm-box { flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid var(--line-2); background: var(--bg-2); }
.perm-row:has(input:checked) .perm-box { background: var(--accent); border-color: var(--accent);
  position: relative; }
.perm-row:has(input:checked) .perm-box::after { content: "✓"; position: absolute;
  inset: 0; display: grid; place-items: center; color: var(--accent-contrast);
  font-size: .76rem; font-weight: 800; }
.perm-text strong { display: block; font-size: .88rem; }
.perm-text small { display: block; color: var(--muted); font-size: .79rem;
  line-height: 1.45; margin-top: 3px; }

.code-input { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-weight: 700; }

.consent-granted { display: flex; align-items: center; gap: 12px;
  background: var(--accent-soft); border-radius: 12px; padding: 13px 15px;
  margin-bottom: 16px; }
.cg-tick { flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast); font-weight: 800;
  display: grid; place-items: center; }
.consent-granted strong { display: block; font-size: .9rem; }
.consent-granted small { display: block; color: var(--muted); font-size: .78rem; }

/* ---- Coach dashboard ---------------------------------------- */
.join-card { border-left: 3px solid var(--accent); }
.join-code-row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.join-code { font-size: 1.9rem; font-weight: 800; letter-spacing: .14em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  margin: 3px 0 4px; color: var(--text); }
.code-chip { font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .08em; font-weight: 700; }

.squad-avatar.sm { width: 30px; height: 30px; font-size: .7rem; }
.squad-avatar.big { width: 52px; height: 52px; font-size: 1rem; }
.squad-avatar { background: var(--accent); color: var(--accent-contrast); }

.msg-row { cursor: pointer; text-align: left; width: 100%; font: inherit;
  color: var(--text); }
.msg-row:hover { border-color: var(--accent); }
.unread-dot { flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: var(--accent-contrast);
  font-size: .68rem; font-weight: 800; display: grid; place-items: center; }

.coach-chat { max-height: 46vh; }
.msg-time { display: block; font-size: .66rem; color: var(--muted); margin-top: 5px; }

/* ============================================================
   Refinement layer — flatter, quieter, less decorated
   ============================================================ */

/* Nav: a subtle rail instead of a filled pill */
.nav-item { border-radius: 7px; font-size: .885rem; padding: 8px 10px; }
.nav-item.active { background: transparent; color: var(--text);
  font-weight: 640; position: relative; }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background: var(--accent); }
.nav-item.active .nav-icon { color: var(--accent-d); }
.nav-soon { margin-left: auto; font-size: .62rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; letter-spacing: .02em; }
.nav-item.soon { opacity: .72; }
.sidebar { padding: 22px 16px; }
.brand { padding-bottom: 24px; }
.brand-mark { border-radius: 8px; }

/* Surfaces: hairline, no shadow */
.stat-tile, .prog-card, .week, .drill.main, .journal-entry, .squad-card, .lb-row,
.tier-card, .feature-table, .chat-bubble, .banner, .rehab-ex, .gd-row, .tl-item,
.ach-card, .quota-banner, .rehab-seek, .why-card, .coach-note, .sess-objective {
  box-shadow: none;
}
.stat-tile { border-radius: 10px; padding: 15px 16px; }
.stat-icon { width: 34px; height: 34px; border-radius: 8px; }
.stat-icon svg { width: 17px; height: 17px; }
.stat-value { font-size: 1.35rem; font-weight: 680; }
.stat-label { font-size: .76rem; }
.stat-grid { gap: 10px; }

/* Buttons: tighter, less bouncy */
.btn { border-radius: 8px; font-weight: 570; font-size: .875rem; padding: 9px 16px;
  letter-spacing: -.005em; }
.btn:active { transform: none; }
.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: 7px; }
.btn-lg { padding: 12px 22px; font-size: .93rem; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-3); }

/* Chips & badges: outline, not filled blocks */
.chip { background: transparent; border-color: var(--line-2); font-size: .745rem;
  padding: 3px 9px; color: var(--muted); }
.chip-done, .chip-group { background: transparent; border-color: var(--line-2);
  color: var(--text-2); font-weight: 570; }
.badge { font-weight: 600; letter-spacing: 0; font-size: .64rem; }
.badge-active { background: transparent; color: var(--accent-d);
  border: 1px solid var(--line-2); }
.badge-ai { background: transparent; color: var(--blue); border: 1px solid var(--line-2); }
.kicker { font-weight: 620; letter-spacing: .07em; font-size: .68rem; }

/* Inputs */
input, select, textarea { border-radius: 8px; font-size: .9rem; padding: 9px 11px; }
.field label { font-size: .8rem; font-weight: 570; margin-bottom: 5px; }
.field { margin-bottom: 16px; }

/* Program & week rows */
.prog-card { border-radius: 11px; border-top-width: 1px; padding: 17px; }
.prog-card::before { content: none; }
.week { border-radius: 10px; margin-bottom: 8px; }
.week-num { border-radius: 6px; font-weight: 640; }
.sess-row { border-radius: 8px; }
.sess-row.next { background: transparent; border-color: var(--accent); }

/* Chat */
.chat-bubble { border-radius: 10px; }
.chat-msg.user .chat-bubble { background: var(--bg-3); border-color: var(--line); }
.suggest-chip { border-radius: 7px; font-size: .78rem; }

/* Tables & lists */
.tier-card, .feature-table { border-radius: 12px; }
.lb-row, .journal-entry, .squad-card, .ach-card { border-radius: 10px; }
.ach-card { padding: 15px 13px; }
.ach-badge { font-size: 1.6rem; }

/* Toasts sit above content, so they keep a shadow */
.toast { border-radius: 9px; box-shadow: 0 8px 24px rgba(16,24,40,.14); }
html[data-theme="dark"] .toast { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* Tab bar */
.tab-item { font-size: .6rem; font-weight: 570; }
.tab-item.active { color: var(--text); font-weight: 640; }

/* Coming soon */
.soon-screen { max-width: 460px; margin: 8px auto; text-align: center;
  padding: 34px 22px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); }
.soon-tag { display: inline-block; font-size: .66rem; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 3px 9px; }
.soon-screen h2 { margin: 14px 0 8px; }
.soon-screen p { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.soon-list { list-style: none; margin: 20px auto; max-width: 320px; text-align: left;
  display: flex; flex-direction: column; gap: 9px; }
.soon-list li { font-size: .87rem; color: var(--text-2); padding-left: 18px;
  position: relative; }
.soon-list li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.soon-note { font-size: .82rem !important; margin: 18px 0 20px; }

/* ---- Early-access notice ------------------------------------ */
.early-access { border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 26px; background: var(--bg-2); }
.early-access h3 { margin: 11px 0 7px; font-size: 1.05rem; }
.early-access p { font-size: .89rem; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.early-access em { font-style: normal; color: var(--text-2); font-weight: 570; }

/* ---- Coach-assigned program --------------------------------- */
.badge-coach { background: transparent; color: var(--accent-d);
  border: 1px solid var(--accent); }
.from-coach { border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 12px 14px; margin-bottom: 18px; font-size: .85rem;
  color: var(--text-2); }
.fc-tag { display: block; font-size: .66rem; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.from-coach p { margin-top: 7px; font-style: italic; color: var(--text); }

/* ---- Multi-skill session tags ------------------------------- */
.sess-skill { display: inline-block; font-size: .68rem; font-weight: 640;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 7px;
  margin-left: 8px; vertical-align: middle; }

/* ---- Program detail: calm header, no card-in-card ----------- */
.prog-top { margin-bottom: 26px; }
.prog-top-meta { font-size: .78rem; color: var(--muted); letter-spacing: .01em;
  margin-bottom: 6px; }
.prog-top h1 { margin-bottom: 20px; }
.prog-track { margin-bottom: 20px; max-width: 460px; }
.prog-track .prog-bar { margin: 0 0 8px; --c: var(--accent); }
.prog-track-meta { display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--muted); }
.prog-track-meta strong { color: var(--text); font-weight: 640; }

.why-card.collapsible { background: transparent; border: none; border-left: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; margin-bottom: 22px; }
.why-card.collapsible summary { padding: 13px 2px; gap: 8px; }
.why-title { font-size: .88rem; font-weight: 570; color: var(--text-2); }
.why-inner { padding: 0 2px 16px; }

/* Week list: a clean list, not stacked cards */
.week { background: transparent; border: none; border-top: 1px solid var(--line);
  border-radius: 0; margin: 0; }
.week:last-of-type { border-bottom: 1px solid var(--line); }
.week-head { padding: 15px 2px; }
.week-head:hover { background: transparent; }
.week-head:hover strong { color: var(--accent-d); }
.week-num { background: transparent; border: 1px solid var(--line-2);
  color: var(--muted); font-size: .72rem; padding: 5px 7px; }
.week-body { padding: 0 2px 14px; }
.sess-row { background: transparent; border-color: var(--line); }
.sess-row.next { border-color: var(--accent-d); }
.sess-status { color: var(--muted); }

/* ---- Celebration confetti ----------------------------------- */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 13px;
  border-radius: 2px; opacity: .95; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  to { transform: translateY(108vh) rotate(720deg); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .page > *, .confetti i, .celebrate-badge { animation: none !important; }
  .prog-card, .tier-card, .squad-card, .ach-card, .btn { transition: none !important; }
}

/* ---- Safe-area insets — notched phones & installed PWA ------
   Keeps the top bar clear of the status bar/notch and the page
   clear of the home indicator. env() is 0 in normal browsers,
   so desktop and non-notched phones are unchanged.            */
@supports (padding: max(0px)) {
  .topbar {
    padding-top: max(11px, env(safe-area-inset-top));
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
  .sidebar {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .page { padding-bottom: max(80px, calc(48px + env(safe-area-inset-bottom))); }
  #toasts { bottom: max(18px, calc(8px + env(safe-area-inset-bottom)));
    right: max(18px, env(safe-area-inset-right)); }
  .overlay { padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom)); }

  @media (max-width: 880px) {
    .topbar { padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right)); }
    .page { padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right)); }
  }
}

/* ============================================================
   Touch ergonomics — must stay last so it wins the cascade
   ============================================================ */
@media (max-width: 880px) {
  /* iOS auto-zooms any input whose font is under 16px. This is the
     only reliable way to stop it, and it has to beat the base rule. */
  input, select, textarea, .code-input { font-size: 16px; }

  /* Comfortable tap targets. Apple asks for 44px, Android 48dp;
     40px is the practical floor for a dense training UI. */
  .btn { min-height: 42px; padding: 10px 17px; }
  .btn-sm { min-height: 38px; padding: 8px 14px; }
  .suggest-chip { min-height: 38px; padding: 9px 14px; }
  .drill-check, .gd-check { width: 38px; height: 38px; font-size: 1.05rem; }
  .flag-box, .perm-box { width: 26px; height: 26px; }
  .star { font-size: 2.1rem; padding: 2px 4px; }
  .stars { gap: 8px; }
  .je-del, .guide-x { min-width: 36px; min-height: 36px; }
  .mood-btn { min-height: 44px; }
  .tab-item { min-height: 46px; justify-content: center; }
  .nav-item { min-height: 44px; }
  .link-btn { min-height: 36px; padding: 2px 0; }
  /* .link is the anchor version of the same control — "Open", "See all" in
     card headers. It was 20px tall and 35px wide, well under the 44px Apple
     asks for, and it sits next to nothing else so a near-miss does nothing
     at all. inline-flex keeps it inline while giving it a height. */
  .link { min-height: 36px; display: inline-flex; align-items: center; }
  /* The build-a-program step rail is navigation, so it needs a real target. */
  .gen-step { min-height: 44px; justify-content: center; }
  /* These three were missed when this block was written. Found 9 Sep 2026 by
     measuring every interactive element at 375×667 rather than 375×812.
     tour-skip was the worst at 28px — and it is the escape from a modal
     covering the whole screen, so it is the first control a new player has to
     hit. icon-btn covers the menu and theme toggles, which is how you reach
     navigation on a phone at all. */
  .tour-skip { min-height: 44px; padding: 0 12px; }
  .signout-btn { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  /* "How to do it" on every drill — 29px, and never covered by this block
     until 16 Sep 2026. It is how a player reads the setup and coaching
     points *during* a session, standing in a park with the ball at their
     feet, so it is one of the most-tapped controls in the app and one of
     the worst to miss. The pill is inline-flex already, so it only needs a
     height and the padding to match. Measured at 375×667, per gotcha 10. */
  .drill-more summary { min-height: 44px; padding: 5px 16px; }

  /* Give thumbs a bit more room at the edges */
  .page { padding-left: max(18px, env(safe-area-inset-left));
          padding-right: max(18px, env(safe-area-inset-right)); }

  /* The tab bar is fixed on top of the page, so the last control on a
     screen — "Generate my program" — has to clear its full height plus
     the home indicator. The safe-area rule earlier only reserves
     48px + inset, which is less than the bar itself once a notched
     phone adds an inset, leaving the button underneath it. */
  .page { padding-bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom)); }
}