/* ============================================================
   Utah Rio FC Academy — v28 Design System (Light Pastel)
   Warm cream surfaces · soft pastel gradients on hero moments ·
   navy as single action color · categorical color restored as
   small, muted navigation anchors only.
============================================================ */

:root {
  /* ── Surfaces ── */
  --bg:           #FAF7F2;            /* warm cream page background */
  --bg-elev:      #F4F1EA;            /* subtle elevation under bars */
  --bg-alt:       #F1EEE6;            /* alt section background */
  --surface:      #FFFFFF;            /* card surface */
  --surface-soft: #FAFAF7;            /* secondary surface */
  --overlay:      rgba(31,31,46,0.42);

  /* ── Borders ── */
  --border:        rgba(0,0,0,0.06);
  --border-strong: rgba(0,0,0,0.10);
  --border-focus:  #1F1F2E;

  /* ── Text (3 levels) ── */
  --text:           #1F1F2E;
  --text-primary:   #202235;  /* Home: primary dark text */
  --text-secondary: #6F7485;  /* Home: supporting gray (larger / more visible) */
  --text-tertiary:  #9AA1B2;  /* Home: small labels & metadata */
  --text-2:         #6B6B7B;
  --text-3:         #9CA3AF;

  /* ── Brand / action color (single) ── */
  --accent:     #1F1F2E;              /* near-black/navy — primary action */
  --accent-2:   #0B0B14;              /* hover */
  --accent-bg:  rgba(31,31,46,0.06);

  /* Brand DNA preserved for sparingly-used moments */
  --navy:       #0d1b2e;
  --gold:       #C9A84C;
  --gold-soft:  #F6ECD1;

  /* ── Semantic ── */
  --warn:       #D08A2A;
  --warn-bg:    rgba(208,138,42,0.10);
  --danger:     #C24A3A;
  --danger-bg:  rgba(194,74,58,0.10);

  /* ── Categorical color (restored, muted — used as small navigation
        anchors only: 3px borders, tiny chips, soft tinted callouts.
        Never used as full surface fills.) ── */
  --c-touch:      #2A8FA3;  --c-touch-bg:    rgba(42,143,163,0.10);
  --c-courage:    #D45D63;  --c-courage-bg:  rgba(212,93,99,0.10);
  --c-curiosity:  #5B6FD8;  --c-curiosity-bg:rgba(91,111,216,0.10);
  --c-joy:        #E0962F;  --c-joy-bg:      rgba(224,150,47,0.10);

  --k-arrival:    #6B7A99;  --k-arrival-bg:  rgba(107,122,153,0.10);
  --k-warmup:     #5FA676;  --k-warmup-bg:   rgba(95,166,118,0.10);
  --k-technical:  #4860A8;  --k-technical-bg:rgba(72,96,168,0.10);
  --k-game:       #D45D63;  --k-game-bg:     rgba(212,93,99,0.10);
  --k-cooldown:   #D99B34;  --k-cooldown-bg: rgba(217,155,52,0.10);
  --k-homework:   #B06AD6;  --k-homework-bg: rgba(176,106,214,0.10);
  --k-fungame:    #EC6FA0;  --k-fungame-bg:  rgba(236,111,160,0.10);

  /* Voice callout palette (muted tints) */
  --voice-say:    #5FA676;  --voice-say-bg:    rgba(95,166,118,0.08);
  --voice-tip:    #D45D63;  --voice-tip-bg:    rgba(212,93,99,0.08);
  --voice-watch:  #D99B34;  --voice-watch-bg:  rgba(217,155,52,0.08);
  --voice-ask:    #5B6FD8;  --voice-ask-bg:    rgba(91,111,216,0.08);

  /* ── Hero (Prototype A pastel) + per-month gradients (Prototype B bold).
        White text on every gradient surface. ── */
  --grad-hero:    linear-gradient(135deg, #F4A2BA 0%, #F4B58E 50%, #BFA8E8 100%);
  --grad-intro:   linear-gradient(135deg, #1F1F2E 0%, #2A4DAA 100%);
  --grad-m-a:     linear-gradient(135deg, #2A4DAA 0%, #5B3FB5 100%);
  --grad-m-b:     linear-gradient(135deg, #06B6D4 0%, #2A4DAA 100%);
  --grad-m-c:     linear-gradient(135deg, #16A34A 0%, #06B6D4 100%);
  --grad-m-d:     linear-gradient(135deg, #5B3FB5 0%, #C026D3 100%);
  --grad-m-e:     linear-gradient(135deg, #F97316 0%, #EC4899 100%);
  --grad-m-f:     linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
  --grad-stat-1:  linear-gradient(135deg, #2A4DAA 0%, #5B3FB5 100%);
  --grad-stat-2:  linear-gradient(135deg, #06B6D4 0%, #2A4DAA 100%);
  --grad-stat-3:  linear-gradient(135deg, #16A34A 0%, #06B6D4 100%);

  /* ── Typography ── */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-label: 13px;
  --fs-caption: 12px;

  /* ── Spacing scale ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px;  --s-8: 40px; --s-9: 56px;

  /* ── Radius ── */
  --r-sm:    6px;
  --r-md:    10px;     /* buttons + inputs */
  --r-lg:    16px;     /* cards */
  --r-xl:    20px;
  --r-2xl:   24px;     /* hero & gradient cards */
  --r-3xl:   28px;
  --r-pill:  999px;

  /* ── Layout ── */
  --bar-h:   54px;
  --tab-h:   64px;     /* edge-to-edge bottom nav */
  --pad:     16px;
  --max-w:   720px;
  --hit:     44px;

  /* ── Legacy aliases (keep inline-styled spans working) ── */
  --sub:           var(--text-3);
  --text-soft:     var(--text-2);
  --bg-soft:       var(--bg-elev);
  --rule:          var(--border);
}

/* ───────────────────────── reset / base ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  color-scheme: light;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }

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

/* ───────────────────────── app chrome ───────────────────────── */

.app {
  min-height: 100%;
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0));
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0));
}

/* Top bar — minimal: brand on the left, hamburger on the right */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  background: rgba(250,247,242,0.92);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: var(--pad); padding-right: var(--pad);
  z-index: 50;
  border-bottom: 1px solid var(--border);
}
.topbar-brand {
  background: transparent; border: 0; padding: 4px 0;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Right-side cluster of nav controls (back / forward / hamburger) */
.topbar-actions {
  display: flex; align-items: center;
  gap: 2px;
  margin-right: -8px;
  flex-shrink: 0;
}
.topbar-nav-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, opacity 120ms ease;
}
.topbar-nav-btn svg { width: 18px; height: 18px; }
.topbar-nav-btn:active { background: rgba(0, 0, 0, 0.06); }

/* Hamburger button — three lines that morph into × when menu is open */
.hamburger {
  width: var(--hit); height: var(--hit);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  background: transparent; border: 0; padding: 0;
  color: var(--text);
  cursor: pointer;
  position: relative;
}
.hamburger span {
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.26s cubic-bezier(0.2,0.7,0.3,1),
              opacity 0.18s ease;
  transform-origin: center;
}
body.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop shared with FAB pattern but its own element so they don't collide */
.menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 115;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
body.menu-open .menu-backdrop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

/* Slide-in drawer from the right */
.menu-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(82vw, 320px);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px -8px rgba(15,23,42,0.15);
  z-index: 120;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0) + var(--s-4)) var(--pad) var(--s-6);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
body.menu-open .menu-drawer { transform: translateX(0); }

.menu-drawer-nav {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  min-height: 52px;
  transition: background 0.15s ease;
}
.menu-item:hover { background: var(--bg-elev); }
.menu-item:active { background: var(--surface-2); }

/* Active page in the hamburger drawer — gradient on label + icon only,
   no background tint or border accent. */
.menu-item[aria-current="page"] .menu-item-label {
  background: linear-gradient(135deg, var(--today-grad-from) 0%, var(--today-grad-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.menu-item[aria-current="page"] .menu-item-icon {
  background: transparent;
}
.menu-item[aria-current="page"] .menu-item-icon svg {
  stroke: url(#today-grad);
  stroke-width: 2;
}
.menu-item-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--text-2);
  flex-shrink: 0;
}
.menu-item-icon svg { width: 20px; height: 20px; }
.menu-item-label { flex: 1; }

/* Switch Program — collapsible section in the drawer */
.menu-section {
  border-top: 1px solid var(--border);
  margin-top: var(--s-4);
  padding-top: var(--s-2);
}
.menu-section-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  background: transparent; border: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font: inherit; font-size: 16px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: 52px;
}
.menu-section-toggle:hover { background: var(--bg-elev); }
.menu-section-toggle .menu-section-chev {
  width: 18px; height: 18px;
  color: var(--text-3);
  transition: transform 0.22s ease;
}
.menu-section.open .menu-section-chev { transform: rotate(180deg); }

.menu-program-list {
  display: flex; flex-direction: column;
  max-height: 0;
  overflow: hidden;
  padding: 0 4px;
  transition: max-height 0.28s cubic-bezier(0.2,0.7,0.3,1),
              padding 0.28s cubic-bezier(0.2,0.7,0.3,1);
}
.menu-section.open .menu-program-list {
  max-height: 240px;
  padding: 4px 4px 4px;
}
.menu-program-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.menu-program-item:hover { background: var(--bg-elev); }
.menu-program-item.is-active {
  border-color: var(--text);
  background: var(--bg-elev);
}
.menu-program-body { flex: 1; min-width: 0; }
.menu-program-name {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.menu-program-meta {
  font-size: 12px; font-weight: 500;
  color: var(--text-3);
  margin-top: 2px;
}
.menu-program-check {
  width: 22px; height: 22px;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.18s ease;
  flex-shrink: 0;
}
.menu-program-item.is-active .menu-program-check { opacity: 1; }

/* View container */
.view {
  padding: var(--s-6) var(--pad) var(--s-8);
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Bottom tab bar — edge-to-edge, pinned to bottom, light surface.
   Material Design 3 pattern: icon + label, with a soft pill behind
   the active icon as the active indicator. */
.tabbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0));
  padding: 8px 4px env(safe-area-inset-bottom, 0);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--border);
  z-index: 40;
}
.tabbar .tab {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 4px;
  padding: 4px 2px 6px;
  color: var(--text-2);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  min-height: var(--hit);
  position: relative;
  transition: color 0.18s ease;
}
.tabbar .tab .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 30px;
  border-radius: var(--r-pill);
  transition: background 0.18s ease;
}
.tabbar .tab svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  transition: stroke-width 0.18s ease;
}
.tabbar .tab[aria-current="page"] {
  font-weight: 600;
  /* Label uses full daily gradient via background-clip text */
  background: linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tabbar .tab[aria-current="page"] .icon-wrap {
  background: transparent;
  box-shadow: none;
}
/* Icon strokes pick up the shared SVG <linearGradient id="today-grad"> def
   that's injected at boot — so the icon shows the FULL gradient (3 stops). */
.tabbar .tab[aria-current="page"] svg {
  stroke-width: 2.2;
  stroke: url(#today-grad);
}
.tabbar .tab:active .icon-wrap { background: var(--bg-elev); }
.tabbar .tab[aria-current="page"]:active .icon-wrap { background: transparent; }

/* ───────────────────────── typography helpers ───────────────────────── */

.eyebrow,
.section-tag,
.filter-label,
.lbl,
.kind {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.page-greeting,
.page-title,
.home-greeting h1,
.month-hero h1,
.term-detail .term-title,
.hero h1,
.about-fragment .about-intro .hero-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
}
.page-greeting .accent,
.page-greeting .wave,
.home-greeting h1 .accent,
.month-hero h1 .accent,
.about-fragment .about-intro .hero-title .accent,
.hero h1 .accent,
.session-card .name .accent,
.session-fragment .session-head .name span,
.session-fragment .section-title span,
.subsection .accent,
.about-fragment .about-section .section-title span {
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.section-title,
.session-fragment .section-title,
.subsection {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 14px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.section-title .more {
  font-size: var(--fs-caption); font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
}

.page-sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin-top: var(--s-2);
}

/* ───────────────────────── cards ───────────────────────── */

.card,
.card-soft,
.month-card,
.session-card,
.drill-card,
.dash-card,
.tile,
.quick-stat,
.find-form,
.builder-meta,
.note-item,
.rating-summary,
.backup-panel,
.anim-pitch-card,
.session-fragment .s-block,
.session-fragment .session-head .meta-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
  padding: var(--s-4);
  position: relative;
}

/* Press feedback */
.card, .pill, .chip, .btn, .month-card, .session-card, .drill-card,
.dash-card, .related-chip, .tile, .anim-play-btn, .anim-example-btn,
.primary, .quick-stat, .practice-chip, .find-tile, .more-link {
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
}
.card:active, .month-card:active, .session-card:active, .drill-card:active,
.dash-card:active, .tile:active, .primary:active, .btn:active, .quick-stat:active,
.practice-chip:active, .find-tile:active {
  transform: scale(0.985);
}
.session-card:hover, .drill-card:hover, .dash-card:hover, .tile:hover {
  border-color: var(--border-strong);
}

/* ───────────────────────── HERO CARD — upcoming session ───────────────────────── */

.dash-card.primary-card {
  background: var(--grad-hero);
  border: 0;
  border-radius: var(--r-2xl);
  padding: var(--s-6) var(--s-5);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.dash-card.primary-card::before {
  content: "✦";
  position: absolute; top: 28px; right: 60px;
  font-size: 13px; color: rgba(255,255,255,0.85);
  pointer-events: none;
}
.dash-card.primary-card::after {
  content: "✧";
  position: absolute; top: 92px; right: 42px;
  font-size: 10px; color: rgba(255,255,255,0.75);
  pointer-events: none;
}
.dash-card.primary-card .lbl {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: none;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.dash-card.primary-card .name {
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.dash-card.primary-card .meta {
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.92);
  margin-top: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.dash-card.primary-card .lbl,
.dash-card.primary-card .pinned-badge {
  text-shadow: none;
}

/* Upcoming-session card wraps a link + a button, so card itself is a div. */
.upcoming-card {
  display: flex; flex-direction: column; gap: 0;
}
.upcoming-card .upcoming-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Below the break line — only the "And Beyond Soccer —" quote */
.upcoming-beyond {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.28);
}
.upcoming-beyond-quote {
  display: block;
  font-size: 14px; line-height: 1.45;
  color: #FFFFFF;
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.upcoming-beyond-quote::before { content: "\201C"; opacity: 0.85; margin-right: 2px; }
.upcoming-beyond-quote::after  { content: "\201D"; opacity: 0.85; margin-left: 2px; }
.upcoming-card .pinned-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 2;
}
.upcoming-card .mark-complete-btn {
  margin-top: 18px;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.96);
  color: var(--text);
  border: 0;
  border-radius: var(--r-md);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.18s ease, transform 0.12s ease;
}
.upcoming-card .mark-complete-btn:hover { background: #FFFFFF; }
.upcoming-card .mark-complete-btn:active { transform: scale(0.98); }
.upcoming-card.upcoming-done {
  text-align: left;
}
.upcoming-card.upcoming-done .lbl { background: rgba(255,255,255,0.30); }

/* ───────────────────────── Undo toast (lives on document.body) ───────────────────────── */

.undo-toast {
  position: fixed;
  left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%) translateY(40%);
  opacity: 0;
  visibility: hidden;
  display: flex; align-items: center; gap: 14px;
  background: var(--text);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 32px -4px rgba(0,0,0,0.30);
  z-index: 200;
  max-width: calc(100% - 32px);
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 0.22s ease,
              visibility 0s linear 0.30s;
}
.undo-toast.open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
              opacity 0.18s ease,
              visibility 0s linear 0s;
}
.undo-toast-msg { font-size: 13px; font-weight: 500; }
.undo-toast-btn {
  background: transparent; border: 0;
  color: #F4A2BA;
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 2px 6px;
  cursor: pointer;
}

/* ───────────────────────── Session action bar (pin / complete) ───────────────────────── */

.session-action-bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.session-action-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
  text-align: center;
  line-height: 1.3;
}
.session-action-btn:hover { background: var(--bg-elev); }
.session-action-btn .session-action-ico { font-size: 14px; }
.session-action-btn.on {
  background: var(--text);
  border-color: var(--text);
  color: #FFFFFF;
}

/* Warning card variant — amber accent line */
.dash-card.warn {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.dash-card.warn::before {
  content: "";
  position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: var(--warn);
  border-radius: 0 2px 2px 0;
}
.dash-card.warn .lbl { color: var(--warn); }

/* ───────────────────────── buttons ───────────────────────── */

.primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: var(--hit);
  padding: 12px 22px;
  background: var(--accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-decoration: none;
}
.primary:hover { background: var(--accent-2); }
.primary:active { background: var(--accent-2); }
.primary:disabled {
  background: var(--bg-elev); color: var(--text-3);
  cursor: not-allowed;
}
.primary.gold,
.primary.accent,
.primary.warm,
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.primary.gold:hover, .primary.accent:hover, .primary.warm:hover, .btn-outline:hover {
  background: var(--bg-elev);
}

.link {
  font: inherit; background: transparent; border: 0; padding: 0;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 32px;
}
.link:hover { color: var(--accent-2); }
.link.danger { color: var(--danger); }

.icon-btn {
  width: var(--hit); height: var(--hit);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-elev); }

/* ───────────────────────── chips / pills ───────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.chip.kind-arrival[aria-pressed="true"]   { background: var(--k-arrival);   border-color: var(--k-arrival); }
.chip.kind-warmup[aria-pressed="true"]    { background: var(--k-warmup);    border-color: var(--k-warmup); }
.chip.kind-technical[aria-pressed="true"] { background: var(--k-technical); border-color: var(--k-technical); }
.chip.kind-game[aria-pressed="true"]      { background: var(--k-game);      border-color: var(--k-game); }
.chip.kind-cooldown[aria-pressed="true"]  { background: var(--k-cooldown);  border-color: var(--k-cooldown); }
.chip.kind-homework[aria-pressed="true"]  { background: var(--k-homework);  border-color: var(--k-homework); color: #FFFFFF; }
.chip.kind-fungame[aria-pressed="true"]   { background: var(--k-fungame);   border-color: var(--k-fungame); color: #FFFFFF; }

.chip-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin: 0 calc(var(--pad) * -1) var(--s-4);
  padding-left: var(--pad); padding-right: var(--pad);
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip-wrap {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--s-4);
}

.filter-group { margin-bottom: var(--s-5); }
.filter-label { margin-bottom: 10px; display: block; }

/* Inline tag pills — TCQJ rubric labels */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--text-2);
}
.tag.tag-touch     { color: var(--c-touch);     background: var(--c-touch-bg); }
.tag.tag-courage   { color: var(--c-courage);   background: var(--c-courage-bg); }
.tag.tag-curiosity { color: var(--c-curiosity); background: var(--c-curiosity-bg); }
.tag.tag-joy       { color: var(--c-joy);       background: var(--c-joy-bg); }

/* ───────────────────────── practice chips (home shortcuts) ───────────────────────── */

.practice-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  margin: 0 calc(var(--pad) * -1) var(--s-6);
  padding: 0 var(--pad);
  scrollbar-width: none;
}
.practice-row::-webkit-scrollbar { display: none; }
.practice-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  text-decoration: none;
}
.practice-chip .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-courage);
}
.practice-chip:nth-child(2) .pip { background: var(--c-curiosity); }
.practice-chip:nth-child(3) .pip { background: var(--c-joy); }
.practice-chip:nth-child(4) .pip { background: var(--k-warmup); }
.practice-chip:nth-child(5) .pip { background: var(--k-homework); }

/* ───────────────────────── forms ───────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-4); }
.field .lbl {
  font-size: 11px; font-weight: 500; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 0;
}
.field input, .field textarea, .field select, .select {
  font: inherit; font-size: var(--fs-body);
  min-height: var(--hit);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239ca3af' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
}

.checkbox-row { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-2); cursor: pointer;
  user-select: none;
}
.checkbox-pill input { display: none; }
.checkbox-pill:has(input:checked) {
  background: var(--accent); color: #FFFFFF; border-color: var(--accent);
}

/* Search bar */
.search {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--hit);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--fs-body); color: var(--text);
}
.search input::placeholder { color: var(--text-3); }
.search .icon { color: var(--text-3); display: flex; }

/* ───────────────────────── filter sheet ───────────────────────── */

.filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  cursor: pointer;
}
.filter-trigger .count {
  background: var(--accent); color: #FFFFFF;
  font-size: 11px; font-weight: 600;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  padding: 0 6px;
}
.filter-trigger svg { width: 16px; height: 16px; color: currentColor; }

.sheet-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-3xl) var(--r-3xl) 0 0;
  max-height: 90vh;
  z-index: 101;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-shadow: 0 -16px 36px -10px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  padding-top: 12px;
}
.sheet.open { transform: translateY(0); }
.sheet::before {
  content: ""; display: block;
  width: 38px; height: 5px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  margin: 0 auto 14px;
  flex-shrink: 0;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px var(--s-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet-head h3 {
  font-size: var(--fs-h3); font-weight: 700; color: var(--text);
}
.sheet-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-top: var(--s-6);
}

/* Sticky footer inside the sheet — always visible, accounts for tabbar */
.sheet-sticky {
  flex-shrink: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.primary-block {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* ───────────────────────── facet filter UI ───────────────────────── */

.facet-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}

.facet-group {
  border-bottom: 1px solid var(--border);
}
.facet-group:last-child { border-bottom: 0; }

.facet-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text);
  min-height: var(--hit);
}
.facet-header:active { background: var(--bg-elev); }
.facet-title {
  font-size: var(--fs-body); font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.facet-meta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-3);
}
.facet-selected {
  font-size: 11px; font-weight: 600;
  color: var(--text);
  background: var(--accent-bg);
  padding: 2px 10px; border-radius: var(--r-pill);
}
.facet-chev {
  width: 18px; height: 18px;
  transition: transform 0.18s ease;
  color: var(--text-3);
}
.facet-group.open .facet-chev { transform: rotate(180deg); }

.facet-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.facet-group.open .facet-body { max-height: 460px; }
.facet-options {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 20px 16px;
}
.facet-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 6px 12px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.facet-chip:active { transform: scale(0.97); }
.facet-chip.on {
  background: var(--text);
  border-color: var(--text);
  color: #FFFFFF;
}
.facet-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-elev);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.facet-chip.on .facet-count {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.18);
}

/* ───────────────────────── active filter strip (above results) ───────────────────────── */

.active-filter-strip {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--text);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  min-height: 28px;
}
.active-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 13px;
  line-height: 1;
  margin-left: 2px;
}
.active-chip:hover .active-chip-x { background: rgba(255,255,255,0.30); }
.active-chip-clear {
  background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 8px;
}
.active-chip-clear:hover { color: var(--text); }

/* ───────────────────────── home screen ───────────────────────── */

.home-greeting { margin-bottom: var(--s-5); }
.home-greeting .date {
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.005em;
  margin-bottom: 6px;
}
.home-greeting h1 {
  font-size: var(--fs-h1); font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Quick stats — 3-up (Completed · Built · Bookmarks) */
.quick-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.quick-stats-2x2 { grid-template-columns: repeat(2, 1fr); }
.quick-stat {
  padding: var(--s-4);
  text-align: left;
  min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.quick-stat:nth-child(1),
.quick-stat:nth-child(2),
.quick-stat:nth-child(3) { background: var(--surface); }
.quick-stat .num {
  font-size: 26px; font-weight: 700; color: var(--text);
  line-height: 1; letter-spacing: -0.025em;
}
.quick-stat .lbl {
  font-size: 11px; font-weight: 500; color: var(--text-2);
  letter-spacing: 0.01em;
  margin-top: 10px;
  text-transform: none;
}

/* Month rail — vertical list of row cards (icon | body | chev) */
.month-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
}

.month-rail .intro-card,
.month-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.month-rail .intro-card .num,
.month-card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--grad-m-a);
  color: #FFFFFF;
  padding: 0;
  text-transform: none;
}
.month-card:nth-of-type(6n+1) .num { background: var(--grad-m-a); }
.month-card:nth-of-type(6n+2) .num { background: var(--grad-m-b); }
.month-card:nth-of-type(6n+3) .num { background: var(--grad-m-c); }
.month-card:nth-of-type(6n+4) .num { background: var(--grad-m-d); }
.month-card:nth-of-type(6n+5) .num { background: var(--grad-m-e); }
.month-card:nth-of-type(6n)   .num { background: var(--grad-m-f); }
.month-rail .intro-card .num { background: var(--grad-intro); }

.month-rail .month-body { min-width: 0; }
.month-rail .intro-card .name,
.month-card .name {
  font-size: 16px; font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}
.month-card .name .accent { color: var(--text); }
.month-rail .intro-card .meta,
.month-card .meta {
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  margin-top: 2px;
}
.month-rail .chev {
  color: var(--text-3);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}

/* "All months →" link in the section header — green per the design ref */
.section-title .more.month-link { color: #16A34A; font-weight: 600; }

/* Quick tiles (Library / Build) — same card style, icon mark */
.tile-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.tile {
  padding: var(--s-4);
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 112px;
  text-decoration: none; color: inherit;
}
.tile .tile-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-curiosity-bg); color: var(--c-curiosity);
}
.tile.warm .tile-icon { background: var(--c-courage-bg); color: var(--c-courage); }
.tile .lbl {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.tile .name {
  font-size: var(--fs-body); font-weight: 600; color: var(--text);
  letter-spacing: -0.01em; line-height: 1.25;
}

/* "Find drills" inline tile (full-width card on home) */
.find-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  margin-bottom: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
}
.find-tile .find-tile-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-courage-bg);
  color: var(--c-courage);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.find-tile .find-tile-body { flex: 1; min-width: 0; }
.find-tile .lbl {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.find-tile .name {
  font-size: var(--fs-body); font-weight: 600; color: var(--text-primary);
  margin-top: 4px;
}
.find-tile .meta { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 4px; }
.find-tile .chev { color: var(--text-3); font-size: 22px; }

/* Daily-gradient variant — RECOMMEND label as gradient text, icon tile filled
   with today's gradient (white SVG inside). Reads --today-grad-from/to set by JS. */
.find-tile.find-tile-purple .find-tile-icon {
  background: linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  color: #FFFFFF;
}
.find-tile.find-tile-purple .find-tile-icon svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.find-tile.find-tile-purple .lbl {
  background: linear-gradient(90deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ───────────────────────── Quick-access gradient cards (Home) ───────────────────────── */

.qa-stack {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
}
.qa-card {
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  min-height: 120px;
  transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.qa-card:hover { border-color: var(--border-strong); }
.qa-card:active { transform: scale(0.985); }

/* Per-card variants — all off-white now, the daily gradient lives on the hero */
.qa-card.qa-program,
.qa-card.qa-build,
.qa-card.qa-library,
.qa-card.qa-players { background: var(--surface); }

/* ── Quick-access prototype variants (A, B, C) ──
   --today-grad-from / --today-grad-to are set on :root by JS each load. */

/* Prototype labels + Select buttons (visible only when no prototype chosen) */
.qa-prototypes {
  display: flex; flex-direction: column; gap: var(--s-6);
  margin: 0 0 var(--s-5);
}
.qa-prototype { display: flex; flex-direction: column; gap: var(--s-3); }
.qa-proto-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.qa-select-btn {
  width: 100%;
}

/* Prototype A — bold left border in today's gradient */
.qa-proto-a .qa-card {
  position: relative;
  overflow: hidden;
}
.qa-proto-a .qa-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
}
.qa-proto-a .qa-card .qa-body { padding-left: 8px; }

/* Prototype B — bold top border in today's gradient */
.qa-proto-b .qa-card {
  position: relative;
  overflow: hidden;
}
.qa-proto-b .qa-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
}
.qa-proto-b .qa-card { padding-top: 18px; }

/* Prototype C — category label rendered as gradient text */
.qa-proto-c .qa-card .qa-lbl {
  background: linear-gradient(90deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Stats prototypes (1/2 chooser) ── */
.stats-prototypes {
  display: flex; flex-direction: column; gap: var(--s-6);
  margin: 0 0 var(--s-5);
}
.stats-prototype { display: flex; flex-direction: column; gap: var(--s-3); }

/* Compact scorecard row — 3 dense data chips */
.scorecard {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.scorecard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.scorecard-num {
  font-size: 20px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.scorecard-lbl {
  font-size: 10px; font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 6px;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.qa-card .qa-body { min-width: 0; display: flex; flex-direction: column; }
.qa-card .qa-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.qa-card .qa-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.qa-card .qa-meta {
  font-size: 11px; font-weight: 500;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* Inline "View All" link below a meta line — tap target inside a card that
   overrides the outer card's navigation (handled by [data-link] JS). */
.qa-card .qa-meta-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,0,0,0.30);
  cursor: pointer;
  align-self: flex-start;
}
.qa-card .qa-meta-cta:hover { text-decoration-color: var(--text-primary); }
.qa-card .qa-meta-cta:active { opacity: 0.7; }
.qa-card .qa-chev {
  position: absolute;
  top: 12px; right: 14px;
  color: var(--text-3);
  font-size: 20px; line-height: 1;
  font-weight: 400;
}

/* ───────────────────────── Floating Action Button (FAB) ───────────────────────── */

:root { --brand-purple: #7C3AED; --brand-purple-deep: #6D28D9; }

/* Backdrop shown when the FAB speed-dial is open — sits above the page +
   nav but below the FAB itself. Fades in/out, tap-anywhere closes the menu
   (the existing outside-click handler picks it up automatically). */
.fab-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.fab-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

.fab-container {
  position: fixed;
  right: 20px;
  /* DEFAULT: lifted slightly above the tab bar */
  bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom, 0));
  width: 56px; height: 56px;
  z-index: 110;
  transition: bottom 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* OPEN: slides up to make space for the speed-dial options below it */
.fab-container.open {
  bottom: calc(var(--tab-h) + 134px + env(safe-area-inset-bottom, 0));
}

.fab {
  width: 100%; height: 100%;
  border-radius: 50%;
  /* Background gradient set inline by JS (matches today's hero gradient) */
  background: var(--brand-purple);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  box-shadow: 0 8px 22px -4px rgba(15, 23, 42, 0.30),
              0 2px 6px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab:active { transform: scale(0.88); }
.fab .fab-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20)); }

.fab-icon {
  width: 26px; height: 26px;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fab-container.open .fab-icon { transform: rotate(45deg); }

/* Speed-dial menu — absolutely positioned BELOW the FAB so it fills the
   space the FAB vacates when it slides up. */
.fab-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease,
              transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 0.28s;
}
.fab-container.open .fab-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  /* Slight delay so the FAB slides up first, then the menu fades in below */
  transition: opacity 0.20s ease 0.12s,
              transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s,
              visibility 0s linear 0s;
}
.fab-option {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px;
  background: #FFFFFF;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: var(--text);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  min-height: 44px;
}
.fab-option-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.10);
  color: var(--brand-purple);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fab-option-icon svg { width: 16px; height: 16px; }
.fab-option-label { white-space: nowrap; }

/* Stagger menu items so they cascade in */
.fab-container.open .fab-menu .fab-option:nth-child(1) { transition-delay: 0.02s; }
.fab-container.open .fab-menu .fab-option:nth-child(2) { transition-delay: 0.06s; }

/* Hide FAB while a text input has focus (keyboard active) */
body.keyboard-active .fab-container { display: none; }

/* ───────────────────────── Program page (full-width gradient cards) ───────────────────────── */

.program-hero { margin-bottom: var(--s-6); }
.program-hero .eyebrow {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.program-hero .page-sub a { color: var(--text); font-weight: 500; }

.program-list {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  margin: 0 0 var(--s-8);
}
.program-card {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  /* Material-style tile: 10px corners — sharp enough to feel structured and
     genuinely tappable, soft enough to remain mobile-friendly. */
  border-radius: 10px;
  background: var(--surface);
  /* One subtle neutral border defines the edges crisply. */
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-height: 116px;
  /* Material resting elevation — two crisp layers, no large blurry haloes. */
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 4px 10px rgba(15, 23, 42, 0.05);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
/* Pressed state — card shifts DOWN slightly and the shadow collapses, giving
   the physical feel of pushing a tile into the surface. */
.program-card:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Default-only: 10px daily-gradient strip pinned to the top of the card. */
.program-card:not(.proto-1):not(.proto-3)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  pointer-events: none;
}

.program-card-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.program-card-code {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-primary);
}
.program-card-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.program-card-sub {
  font-size: 13px; font-weight: 500;
  line-height: 1.5;
  color: var(--text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Horizontal row of tappable session dots — top-right of the card */
.program-dots {
  display: flex; align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.program-dot {
  width: 12px; height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  /* Double-background trick: surface fill inside, daily gradient as the
     ring around it (visible where the border is transparent). */
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%) border-box;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
}
.program-dot:active { transform: scale(0.8); }
.program-dot.is-done {
  border-color: transparent;
  background: linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
}

/* ───── Prototype sections (preview only — three card variants stacked) ───── */
.program-prototypes {
  display: flex; flex-direction: column;
  gap: var(--s-7);
}
.proto-section { display: flex; flex-direction: column; gap: var(--s-3); }
.proto-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.proto-hint {
  font-size: 12px; font-weight: 500;
  color: var(--text-tertiary);
  margin-top: -4px;
}

/* ── Prototype 1 — premium scorecard.
   • Generous 28px radius (rounded-3xl) for a Tailwind/MUI-style modern card.
   • Short gradient strip on top with a subtle wavy bottom edge and the
     dots row spread evenly across the full width.
   • White body below carries a capsule-pill MONTH label, theme title, and
     description, in clean hierarchy.
   • Base .program-card supplies shadow + asymmetric border + hover lift. ── */
.program-card.proto-1 {
  padding: 0;
  /* Inherits 10px radius from the base — strip's top corners follow via the
     card's overflow:hidden. */
  min-height: 150px;
}

.proto-1-head {
  background: linear-gradient(135deg, var(--today-grad-from, #BB73E0) 0%, var(--today-grad-to, #FF8DDB) 100%);
  /* Roughly 2/3 of the previous strip height; horizontal padding gives the
     dots clean breathing room on either side. */
  padding: 6px 24px 14px;
  display: flex; align-items: center;
  /* Subtle wavy bottom edge. Path stays well below the dots row (min curve
     y ≈ 84% of strip height) so the gradient always covers the dots. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 88C70 96 30 84 0 92Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 88C70 96 30 84 0 92Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Dots row inside the strip — bigger and spread evenly */
.program-card.proto-1 .program-dots {
  width: 100%;
  justify-content: space-between;
  gap: 0;
}
.program-card.proto-1 .program-dot {
  width: 18px; height: 18px;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
}
.program-card.proto-1 .program-dot.is-done {
  background: var(--surface-soft, #FAFAF7);
  border-color: transparent;
}

.proto-1-body {
  padding: 12px 18px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
}
/* MONTH X label — compact capsule pill in the body. Subtle, supportive,
   doesn't clash with the sharper 18px card shape. */
.program-card.proto-1 .program-card-code {
  align-self: flex-start;     /* don't stretch full width */
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.04);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 4px;
  font-weight: 600;
}
.program-card.proto-1 .program-card-title {
  margin-top: 0;
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
}

/* ── Wave-variant overrides on the proto-1 strip ──
   Each variant swaps the mask path so only the bottom-edge curve changes;
   all other strip + body styling is inherited from .proto-1 above. */

/* Wave 1 — large dramatic arc peaking in the middle of the strip.
   Endpoints y=95 (deep), controls y=65 → peak at t=0.5 lands at y=72.5,
   safely below the pill/dots row (which bottoms out around y=58). */
.program-card.proto-wave-1 .proto-1-head {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 95C70 65 30 65 0 95Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 95C70 65 30 65 0 95Z' fill='black'/%3E%3C/svg%3E");
}

/* Wave 2 — gentle broad asymmetric curve, taller on the left.
   All curve y ≥ 70, well below the pill/dots row. */
.program-card.proto-wave-2 .proto-1-head {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 70C70 75 30 88 0 92Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 70C70 75 30 88 0 92Z' fill='black'/%3E%3C/svg%3E");
}

/* Wave 3 — two full wave cycles across the bottom edge.
   Crests pulled down to y=68 (was 60) so the gradient still covers the
   pill/dots row across the entire width. */
.program-card.proto-wave-3 .proto-1-head {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 78C85 95 70 68 50 80C30 95 15 68 0 82Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 0L100 78C85 95 70 68 50 80C30 95 15 68 0 82Z' fill='black'/%3E%3C/svg%3E");
}

/* ── Prototype 3 — full seasonal-gradient card, white text, translucent
   MONTH X pill (mirrors the original gradient-card design). ── */
.program-card.proto-3 {
  background: linear-gradient(135deg, var(--card-grad-from, #BB73E0) 0%, var(--card-grad-to, #FF8DDB) 100%);
}
.program-card.proto-3 .program-card-code {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.program-card.proto-3 .program-card-title {
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
}
.program-card.proto-3 .program-card-sub {
  color: rgba(255, 255, 255, 0.85);
}
.program-card.proto-3 .program-dot {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
.program-card.proto-3 .program-dot.is-done {
  background: #FFFFFF;
  border-color: transparent;
}

/* ───────────────────────── month screen ───────────────────────── */

.month-hero { margin-bottom: var(--s-6); }
.month-hero .num-line {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.month-hero .lede {
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65;
  margin-top: var(--s-3);
}

.cover-strip {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: var(--s-5) 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cover-strip > div {
  padding: 14px 16px;
  background: var(--surface);
}
.cover-strip .lbl {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.cover-strip .val {
  font-size: var(--fs-body); font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
}
.cover-strip .sub {
  font-size: var(--fs-caption); color: var(--text-3); margin-top: 2px;
}

.subsection { margin: var(--s-7) 0 var(--s-3); }
.subsection-rule { display: none; }

.goal-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.goal-list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 14px 0;
  font-size: var(--fs-sm); line-height: 1.65;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.goal-list li:last-child { border-bottom: 0; }
.goal-list .num {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-3);
}

.coach-note {
  background: var(--c-joy-bg);
  border-left: 3px solid var(--c-joy);
  padding: 14px 16px;
  border-radius: var(--r-md);
  margin: var(--s-4) 0;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text);
}
.coach-note strong { color: var(--text); }

/* ───────────────────────── session card list ───────────────────────── */

.session-list { display: grid; gap: var(--s-3); }

.session-card {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--s-4);
  border-left: 3px solid var(--c-curiosity);
  text-decoration: none;
  color: inherit;
  min-height: 72px;
}
.session-card .body { min-width: 0; padding-right: 8px; }
.session-card .coords {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
}
.session-card .name {
  font-size: var(--fs-body); font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-top: 6px;
  line-height: 1.3;
}
.session-card .tagline {
  font-size: var(--fs-caption); color: var(--text-2); margin-top: 4px;
  line-height: 1.5;
}
.session-card .chev { color: var(--text-3); font-size: 22px; padding: 0 4px; }
.session-card .notes-badge {
  position: absolute; top: 12px; right: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-joy);
  background: var(--c-joy-bg);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* Completed session — dim the card slightly + green checkmark badge */
.session-card.is-completed {
  opacity: 0.70;
  border-left-color: var(--k-warmup);
}
.session-card.is-completed .name,
.session-card.is-completed .tagline {
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.25);
  text-decoration-thickness: 1px;
}
.session-card .completed-badge {
  position: absolute; top: 12px; right: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #FFFFFF;
  background: var(--k-warmup);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* Completed history page — row layout with toggleable green check */
.session-card.completed-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  opacity: 1; /* override .is-completed dimming for the history page */
}
.session-card.completed-row .completed-row-body { min-width: 0; }
.session-card.completed-row .completed-badge { display: none; }
.session-card.completed-row .name,
.session-card.completed-row .tagline {
  text-decoration: none;
}
.completion-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--k-warmup);
  background: var(--k-warmup);
  color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.completion-check:hover {
  background: transparent;
  color: var(--k-warmup);
}
.completion-check:active { transform: scale(0.88); }
.completion-check svg { width: 18px; height: 18px; }

/* Completed history page — month groupings */
.completed-group { margin-bottom: var(--s-7); }
.completed-group-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.completed-group-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  color: #FFFFFF;
  background: var(--text);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.completed-group-name {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  flex: 1;
}
.completed-group-count {
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tappable scorecard card — visual affordance that it's a link */
.scorecard-card.scorecard-tappable {
  text-decoration: none; color: inherit; display: block;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.12s ease;
}
.scorecard-card.scorecard-tappable:hover { border-color: var(--border-strong); }
.scorecard-card.scorecard-tappable:active { transform: scale(0.97); }

/* ───────────────────────── drill cards ───────────────────────── */

.drill-list { display: grid; gap: var(--s-3); }

.drill-card {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: var(--s-4);
  border-left: 3px solid var(--border);
  min-height: 72px;
}
.drill-card.kind-arrival   { border-left-color: var(--k-arrival); }
.drill-card.kind-warmup    { border-left-color: var(--k-warmup); }
.drill-card.kind-technical { border-left-color: var(--k-technical); }
.drill-card.kind-game      { border-left-color: var(--k-game); }
.drill-card.kind-cooldown  { border-left-color: var(--k-cooldown); }
.drill-card.kind-homework  { border-left-color: var(--k-homework); }
.drill-card.kind-fungame   { border-left-color: var(--k-fungame); }

.drill-card .body { min-width: 0; padding-right: 8px; text-decoration: none; color: inherit; }
.drill-card .kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.drill-card.kind-arrival   .kind { color: var(--k-arrival); }
.drill-card.kind-warmup    .kind { color: var(--k-warmup); }
.drill-card.kind-technical .kind { color: var(--k-technical); }
.drill-card.kind-game      .kind { color: var(--k-game); }
.drill-card.kind-cooldown  .kind { color: var(--k-cooldown); }
.drill-card.kind-homework  .kind { color: var(--k-homework); }
.drill-card.kind-fungame   .kind { color: var(--k-fungame); }

.drill-card .name {
  font-size: var(--fs-body); font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-top: 6px;
  line-height: 1.3;
}
.drill-card .sub {
  font-size: var(--fs-caption); color: var(--text-3);
  margin-top: 6px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.drill-card .sub .pip { color: var(--text-2); font-weight: 500; }
.drill-card .star {
  width: var(--hit); height: var(--hit);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
}
.drill-card .star[aria-pressed="true"] { color: var(--c-joy); }
.drill-card .star svg { width: 22px; height: 22px; }

/* Source pill */
.source-tag {
  display: inline-block;
  padding: 2px 8px; margin-left: 6px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--bg-elev); color: var(--text-3);
}
.source-tag.source-repo            { color: var(--c-curiosity); background: var(--c-curiosity-bg); }
.source-tag.source-homework        { color: var(--k-homework);  background: var(--k-homework-bg); }
.source-tag.source-athletic        { color: var(--c-courage);   background: var(--c-courage-bg); }
.source-tag.source-movement        { color: var(--c-touch);     background: var(--c-touch-bg); }
.source-tag.source-custom          { color: var(--c-joy);       background: var(--c-joy-bg); }
.source-tag.source-academy-games   { color: var(--k-fungame);   background: var(--k-fungame-bg); }
.source-tag.source-development     { color: var(--c-curiosity); background: var(--c-curiosity-bg); }

/* Pick-mode banner */
.pick-banner {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  color: var(--text);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.pick-banner .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.pick-banner .msg {
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text);
}
.pick-banner strong { color: var(--text); font-weight: 600; }

.drill-card .pick-add {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-bg);
}
.drill-card .pick-add svg { width: 18px; height: 18px; }

.results-meta {
  font-size: var(--fs-caption); font-weight: 500;
  color: var(--text-3);
  margin-bottom: 12px;
}

/* ───────────────────────── session view (binder fragment) ───────────────────────── */

.session-fragment .page-header,
.session-fragment .page-footer { display: none; }
.session-fragment .page-body { padding: 0; }

.session-fragment .session-head { margin-bottom: var(--s-6); }
.session-fragment .session-head .where {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  margin-bottom: 10px;
}
.session-fragment .session-head .name {
  font-size: var(--fs-h1); font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.session-fragment .session-head .pull {
  font-size: var(--fs-sm); color: var(--text-2);
  line-height: 1.65; margin-bottom: 16px;
  font-style: normal;
}
.session-fragment .session-head .meta-row {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  padding: 14px 16px;
}
.session-fragment .session-head .meta-row .item { display: flex; flex-direction: column; gap: 4px; }
.session-fragment .session-head .meta-row .lbl {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.session-fragment .session-head .meta-row .val {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}

/* Timeline — restored kind colors */
.session-fragment .session-timeline { margin-bottom: var(--s-6); }
.session-fragment .session-timeline .lbl {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.session-fragment .session-timeline .bar {
  display: flex; gap: 2px;
  height: 52px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.session-fragment .session-timeline .seg {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: var(--fs-sm); font-weight: 600;
  padding: 0 4px; min-width: 0;
}
.session-fragment .session-timeline .seg .name {
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.92; margin-top: 2px;
}
.session-fragment .session-timeline .seg-arrival   { background: var(--k-arrival); }
.session-fragment .session-timeline .seg-warmup    { background: var(--k-warmup); }
.session-fragment .session-timeline .seg-technical { background: var(--k-technical); }
.session-fragment .session-timeline .seg-game      { background: var(--k-game); }
.session-fragment .session-timeline .seg-cooldown  { background: var(--k-cooldown); }

/* Setup brief */
.session-fragment .setup-brief {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
  overflow: hidden;
}
.session-fragment .setup-brief .col { padding: 14px 16px; background: var(--surface); }
.session-fragment .setup-brief .lbl {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.session-fragment .setup-brief .body {
  font-size: var(--fs-caption); color: var(--text); line-height: 1.55;
}
.session-fragment .setup-brief .body strong { color: var(--text); font-weight: 600; }

/* Block cards — restored kind colors as 3px left borders + tinted kind labels */
.session-fragment .s-block {
  display: block;
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  border-left: 3px solid var(--border);
}
.session-fragment .s-block.swapped {
  border-left: 3px solid var(--c-joy);
}
.session-fragment .s-block .left {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.session-fragment .s-block .left .kind {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--bg-elev); color: var(--text-2);
}
.session-fragment .s-block.kind-arrival   { border-left-color: var(--k-arrival); }
.session-fragment .s-block.kind-arrival   .left .kind { background: var(--k-arrival-bg); color: var(--k-arrival); }
.session-fragment .s-block.kind-warmup    { border-left-color: var(--k-warmup); }
.session-fragment .s-block.kind-warmup    .left .kind { background: var(--k-warmup-bg); color: var(--k-warmup); }
.session-fragment .s-block.kind-technical { border-left-color: var(--k-technical); }
.session-fragment .s-block.kind-technical .left .kind { background: var(--k-technical-bg); color: var(--k-technical); }
.session-fragment .s-block.kind-game      { border-left-color: var(--k-game); }
.session-fragment .s-block.kind-game      .left .kind { background: var(--k-game-bg); color: var(--k-game); }
.session-fragment .s-block.kind-cooldown  { border-left-color: var(--k-cooldown); }
.session-fragment .s-block.kind-cooldown  .left .kind { background: var(--k-cooldown-bg); color: var(--k-cooldown); }
.session-fragment .s-block.kind-fungame   { border-left-color: var(--k-fungame); }
.session-fragment .s-block.kind-fungame   .left .kind { background: var(--k-fungame-bg); color: var(--k-fungame); }
.session-fragment .s-block .left .time {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-2);
}
.session-fragment .s-block .left .time .unit {
  font-size: 11px; color: var(--text-3); margin-left: 4px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.session-fragment .s-block .right .title {
  font-size: var(--fs-h3); font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.session-fragment .s-block.featured .right .title { font-size: 20px; }
.session-fragment .s-block .right .body p {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.65;
  margin-bottom: 10px;
}
.session-fragment .s-block .right .body p:last-child { margin-bottom: 0; }
.session-fragment .s-block .right .body strong { color: var(--text); font-weight: 600; }

/* Principle tags — restored */
.session-fragment .principle-tags {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.session-fragment .principle-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-elev); color: var(--text-2);
}
.session-fragment .principle-tag.touch   { color: var(--c-touch);   background: var(--c-touch-bg); }
.session-fragment .principle-tag.courage { color: var(--c-courage); background: var(--c-courage-bg); }
.session-fragment .principle-tag.joy     { color: var(--c-joy);     background: var(--c-joy-bg); }

/* Block setup */
.session-fragment .block-setup {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0 0 14px;
}
.session-fragment .block-setup .col { padding: 12px 14px; background: var(--bg-elev); }
.session-fragment .block-setup .lbl {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.session-fragment .block-setup .body {
  font-size: var(--fs-caption); line-height: 1.55; color: var(--text);
}

/* Steps */
.session-fragment .s-steps { margin-top: 14px; }
.session-fragment .s-steps .item {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.session-fragment .s-steps .item:last-child { border-bottom: 0; }
.session-fragment .s-steps .num {
  font-size: 15px; font-weight: 700;
  color: var(--c-curiosity);
  font-variant-numeric: tabular-nums;
}
.session-fragment .s-steps .text {
  font-size: var(--fs-sm); line-height: 1.65; color: var(--text);
}

/* Voice callouts — restored muted colors */
.session-fragment .voice {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--c-curiosity);
  background: var(--c-curiosity-bg);
  border-radius: var(--r-md);
}
.session-fragment .voice + .voice { margin-top: 10px; }
.session-fragment .voice .lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.session-fragment .voice ul { list-style: none; padding: 0; margin: 0; }
.session-fragment .voice li {
  font-size: var(--fs-sm); line-height: 1.65;
  padding: 3px 0 3px 14px; position: relative; color: var(--text);
}
.session-fragment .voice li::before {
  content: "—"; position: absolute; left: 0; color: currentColor; opacity: 0.55;
}
.session-fragment .voice p {
  font-size: var(--fs-sm); line-height: 1.65; color: var(--text); margin: 0 0 8px;
}
.session-fragment .voice p:last-child { margin-bottom: 0; }
.session-fragment .voice-say   { border-left-color: var(--voice-say);   background: var(--voice-say-bg); }
.session-fragment .voice-say   .lbl { color: var(--voice-say); }
.session-fragment .voice-say   li, .session-fragment .voice-say   p { font-style: italic; color: #2f3d2f; }
.session-fragment .voice-tip   { border-left-color: var(--voice-tip);   background: var(--voice-tip-bg); }
.session-fragment .voice-tip   .lbl { color: var(--voice-tip); }
.session-fragment .voice-tip   li, .session-fragment .voice-tip   p { color: #4a2418; }
.session-fragment .voice-watch { border-left-color: var(--voice-watch); background: var(--voice-watch-bg); }
.session-fragment .voice-watch .lbl { color: var(--voice-watch); }
.session-fragment .voice-watch li, .session-fragment .voice-watch p { color: #4a3a14; }
.session-fragment .voice-ask   { border-left-color: var(--voice-ask);   background: var(--voice-ask-bg); }
.session-fragment .voice-ask   .lbl { color: var(--voice-ask); }
.session-fragment .voice-ask   li, .session-fragment .voice-ask   p { color: #2c3540; }

.session-fragment .s-cues {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--voice-say); background: var(--voice-say-bg);
  border-radius: var(--r-md);
}
.session-fragment .s-cues .lbl {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--voice-say); margin-bottom: 8px;
}
.session-fragment .s-cues ul { list-style: none; padding: 0; margin: 0; }
.session-fragment .s-cues li {
  font-size: var(--fs-sm); color: #2f3d2f; line-height: 1.65;
  padding: 3px 0 3px 14px; position: relative; font-style: italic;
}
.session-fragment .s-cues li::before { content: "—"; position: absolute; left: 0; color: var(--voice-say); opacity: 0.7; }

/* Pitch diagrams */
.session-fragment .pitch-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-3);
}
.session-fragment .pitch-card { display: flex; flex-direction: column; gap: 12px; }
.session-fragment .pitch-card .objective {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.session-fragment .pitch-card .objective .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
}
.session-fragment .pitch-card .objective .text {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.6;
}
.session-fragment .pitch-card .pitch {
  width: 100%; aspect-ratio: 1.6 / 1;
  background: #6e8c5a;
  border-radius: var(--r-md);
  overflow: hidden;
}
.session-fragment .pitch-card .pitch svg { width: 100%; height: 100%; display: block; }
.session-fragment .pitch-card .meta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.session-fragment .pitch-card .meta .name { font-size: var(--fs-caption); font-weight: 600; color: var(--text); }
.session-fragment .pitch-card .meta .size {
  font-size: 10px; letter-spacing: 0.08em; color: var(--c-curiosity);
  text-transform: uppercase; font-weight: 600;
}
.session-fragment .pitch-card .action-key {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.session-fragment .pitch-card .action-key .step {
  display: flex; gap: 10px; align-items: baseline;
  font-size: var(--fs-caption); color: var(--text); line-height: 1.5;
}
.session-fragment .pitch-card .action-key .num {
  color: var(--c-curiosity); font-size: var(--fs-sm); font-weight: 700;
  flex: 0 0 18px;
}
.session-fragment .pitch-card .legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.session-fragment .pitch-card .legend .item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text);
}
.session-fragment .pitch-card .legend .swatch {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
.session-fragment .pitch-card .legend .swatch svg { width: 100%; height: 100%; }

/* Legend reference pages */
.session-fragment .legend-page { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-3); }
.session-fragment .legend-section-head {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.session-fragment .legend-section-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.session-fragment .legend-row { display: flex; gap: 12px; align-items: center; }
.session-fragment .legend-icon {
  width: 48px; height: 48px;
  background: #6e8c5a;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; padding: 4px;
  flex-shrink: 0;
}
.session-fragment .legend-icon svg { width: 100%; height: 100%; }
.session-fragment .legend-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 2px; }
.session-fragment .legend-desc { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.55; }

/* Send-off card */
.session-fragment .send-off {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: linear-gradient(135deg, #FDFBF5, #FAF7EE);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-lg);
}
.session-fragment .send-off .kicker {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.session-fragment .send-off .recap {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border-radius: var(--r-md);
}
.session-fragment .send-off .recap .label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); padding-top: 4px;
}
.session-fragment .send-off .recap .skill-name {
  font-size: var(--fs-h3); font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 4px;
}
.session-fragment .send-off .recap .skill-line {
  font-size: var(--fs-caption); line-height: 1.55; color: var(--text); margin-bottom: 8px;
}
.session-fragment .send-off .ask { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.session-fragment .send-off .ask .ask-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.session-fragment .send-off .ask ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px; counter-reset: ask;
}
.session-fragment .send-off .ask ol li {
  counter-increment: ask;
  display: grid; grid-template-columns: 22px 1fr; gap: 6px;
  font-size: var(--fs-caption); line-height: 1.55; color: var(--text); font-style: italic;
}
.session-fragment .send-off .ask ol li::before {
  content: counter(ask, decimal-leading-zero);
  color: var(--gold); font-size: var(--fs-caption); font-weight: 600; font-style: normal;
  font-variant-numeric: tabular-nums;
}
.session-fragment .send-off .bridge {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.session-fragment .send-off .quote {
  font-size: var(--fs-h3); font-weight: 600;
  line-height: 1.35;
  color: var(--text); margin-bottom: 10px;
  font-style: italic;
}
.session-fragment .send-off .quote::before { content: "\201C"; color: var(--gold); margin-right: 2px; }
.session-fragment .send-off .quote::after  { content: "\201D"; color: var(--gold); margin-left: 2px; }
.session-fragment .send-off .lesson {
  font-size: var(--fs-sm); line-height: 1.65; color: var(--text); margin-bottom: 10px;
}
.session-fragment .send-off .tieback {
  display: flex; gap: 6px; align-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
}
.session-fragment .send-off .tieback .pip {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* Homework strip */
.session-fragment .s-homework {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: linear-gradient(135deg, #2a1f3e, #0d1b2e);
  color: #FFFFFF;
  border-radius: var(--r-lg);
  position: relative;
}
.session-fragment .s-homework::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.session-fragment .s-homework .kicker {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.session-fragment .s-homework .title {
  font-size: var(--fs-h3); font-weight: 700; color: #FFFFFF;
  line-height: 1.25; margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.session-fragment .s-homework p {
  font-size: var(--fs-sm); color: rgba(255,255,255,0.88);
  line-height: 1.65; margin-bottom: 8px;
}
.session-fragment .s-homework strong { color: #FFFFFF; }
.session-fragment .s-homework .ask {
  font-size: var(--fs-caption); color: var(--gold);
  font-style: italic; margin-top: 12px;
}

/* Pitch SVG helpers */
.session-fragment .pitch-line  { stroke: rgba(13,27,46,0.35); stroke-width: 0.6; fill: none; }
.session-fragment .pitch-fill  { fill: rgba(201,168,76,0.06); stroke: var(--gold); stroke-width: 0.6; stroke-dasharray: 3 2; }
.session-fragment .pitch-cone  { fill: var(--gold); }
.session-fragment .pitch-att   { fill: var(--gold); }
.session-fragment .pitch-def   { fill: var(--navy); }
.session-fragment .pitch-coach { fill: #2a3a5a; }
.session-fragment .pitch-arrow { stroke: var(--gold); stroke-width: 0.8; fill: none; stroke-dasharray: 2 1.5; }
.session-fragment .pitch-run   { stroke: var(--navy); stroke-width: 0.6; fill: none; stroke-dasharray: 1 1; }

.session-fragment .s-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 10px; display: inline-block;
}
.session-fragment .notes-ledger, .session-fragment .scratch-page { display: none; }

.session-fragment .section-tag {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  margin: var(--s-6) 0 10px;
}
.session-fragment .gold-rule { display: none; }
.session-fragment .commit-list { display: flex; flex-direction: column; }
.session-fragment .commit-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.session-fragment .commit-item:last-child { border-bottom: 0; }
.session-fragment .commit-num {
  font-size: 17px; font-weight: 700;
  color: var(--c-curiosity); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.session-fragment .commit-text { font-size: var(--fs-sm); color: var(--text); line-height: 1.65; }
.session-fragment .commit-text strong { color: var(--text); font-weight: 600; }
.session-fragment .divider { display: none; }

/* Per-block notes editor */
.session-fragment .block-notes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
}
.session-fragment .block-notes label { display: block; }
.session-fragment .block-notes .lbl {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 8px;
}
.session-fragment .block-notes textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  padding: 10px 12px;
  font: inherit; font-size: var(--fs-sm); line-height: 1.55;
  color: var(--text);
  resize: vertical;
  min-height: 60px;
  border-radius: var(--r-md);
}
.session-fragment .block-notes textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Block swap bar */
.session-fragment .s-block .block-swap-bar {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.session-fragment .s-block .block-swap-bar .link {
  font-size: var(--fs-caption); font-weight: 500; color: var(--c-curiosity);
}
.session-fragment .s-block .swap-indicator {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-joy);
  background: var(--c-joy-bg);
  padding: 3px 10px; border-radius: var(--r-pill);
}

/* Session prev/next */
.session-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.session-nav .btn {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
  min-height: 64px;
  text-align: left;
}
.session-nav .btn[disabled] { opacity: 0.4; pointer-events: none; }
.session-nav .btn .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
}
.session-nav .btn .name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.session-nav .next { text-align: right; align-items: flex-end; }

/* ───────────────────────── animations ───────────────────────── */

.anim-pitch-card { cursor: pointer; margin: var(--s-4) 0; padding: var(--s-4); }
.anim-pitch-card .anim-lbl {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-joy); margin-bottom: 10px;
}

.drill-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-4) 0;
  align-items: flex-start;
}
.drill-actions > .anim-pitch-card { flex-basis: 100%; order: -1; }
.drill-actions .anim-toggle { margin: 0; }

.example-btns { display: flex; flex-wrap: wrap; gap: 6px; }

.anim-toggle { margin: var(--s-4) 0; }
.anim-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  background: var(--accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.anim-play-btn:hover { background: var(--accent-2); }
.anim-play-btn svg { color: #FFFFFF; }
.anim-play-btn:active { transform: scale(0.96); }

.anim-hide-btn {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-2);
  font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.anim-hide-btn:hover { color: var(--text); border-color: var(--border-strong); }

.anim-example-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-caption); font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.anim-example-btn svg { color: var(--c-courage); }
.anim-example-btn:active { transform: scale(0.96); }
.anim-example-btn:hover { background: var(--bg-elev); }

.anim-pitch-card .anim-stage {
  width: 100%; aspect-ratio: 16/9;
  background: #6e8c5a;
  border-radius: var(--r-md);
  overflow: hidden;
}
.anim-pitch-card .anim-stage svg { width: 100%; height: 100%; display: block; }
.anim-pitch-card .anim-key {
  font-size: var(--fs-caption); color: var(--text);
  margin-top: 10px; line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .anim-stage animate { display: none; }
}

/* ───────────────────────── library — sticky search + inline filter panel ───────────────────────── */

/* Sticky search/filter header — pins below the topbar when scrolling */
.library-head {
  position: sticky;
  top: calc(var(--bar-h) + env(safe-area-inset-top, 0));
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--pad)) 0;
  padding: var(--s-3) var(--pad);
  background: rgba(250,247,242,0.95);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.library-head .search { flex: 1; margin-bottom: 0; }

/* Inline collapsible filter panel — slides open below the search bar.
   Uses grid-template-rows 0fr→1fr trick for smooth content-aware animation. */
.filter-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.30s cubic-bezier(0.2, 0.7, 0.3, 1),
              margin 0.30s cubic-bezier(0.2, 0.7, 0.3, 1);
  margin: 0 calc(-1 * var(--pad));
  background: var(--surface);
}
.filter-panel.open {
  grid-template-rows: 1fr;
  margin-bottom: var(--s-4);
}
.filter-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.filter-panel.open .filter-panel-inner {
  padding: var(--s-5) var(--pad);
  border-bottom: 1px solid var(--border);
}

/* Filter button active state (when panel is open) */
.filter-trigger.on {
  background: var(--text);
  border-color: var(--text);
  color: #FFFFFF;
}
.filter-trigger.on svg { color: #FFFFFF; }
.filter-trigger.on .count {
  background: rgba(255,255,255,0.22);
  color: #FFFFFF;
}

/* Peer-level filter sections — all visible at once when panel is open */
.filter-section { margin-bottom: var(--s-5); }
.filter-section:last-child { margin-bottom: 0; }
.filter-section-head {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.filter-section-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* Active filter strip — horizontally scrollable above the count */
.active-filter-strip {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: var(--s-3);
  scrollbar-width: none;
  align-items: center;
}
.active-filter-strip::-webkit-scrollbar { display: none; }
.active-filter-strip .active-chip { flex-shrink: 0; }
.active-filter-strip .active-chip-clear { flex-shrink: 0; }

/* Empty state — message + clear-all link, stacked & centered */
.empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  font-size: var(--fs-sm); color: var(--text-3);
  text-align: center; padding: 36px 20px;
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.empty .empty-msg { color: var(--text-2); font-size: var(--fs-body); }
.empty .link { margin-top: 4px; }

/* ───────────────────────── custom builder ───────────────────────── */

.builder-hero { margin-bottom: var(--s-5); }
.builder-hero .eyebrow { color: var(--c-curiosity); margin-bottom: 8px; }
.builder-hero .builder-title {
  font-size: var(--fs-h1); font-weight: 700; color: var(--text);
  letter-spacing: -0.025em; line-height: 1.15;
}
.builder-hero .builder-title .accent { color: var(--c-curiosity); }
.builder-hero .builder-lede {
  font-size: var(--fs-sm); color: var(--text-2); margin-top: 10px; line-height: 1.65;
}

.builder-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 14px;
  margin-bottom: var(--s-4);
  gap: 1px;
}
.builder-meta > div {
  padding: 0 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.builder-meta > div + div { border-left: 1px solid var(--border); }
.builder-meta .lbl {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.builder-meta .val {
  font-size: var(--fs-h2); font-weight: 700;
  color: var(--text); letter-spacing: -0.02em;
}

.slot-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.slot {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  border-left: 3px solid var(--border);
  position: relative;
}
.slot.kind-arrival   { border-left-color: var(--k-arrival); }
.slot.kind-warmup    { border-left-color: var(--k-warmup); }
.slot.kind-technical { border-left-color: var(--k-technical); }
.slot.kind-game      { border-left-color: var(--k-game); }
.slot.kind-cooldown  { border-left-color: var(--k-cooldown); }

.slot .slot-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.slot .slot-kind {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
}
.slot .slot-time { font-size: 11px; color: var(--text-3); }
.slot.empty .slot-pick {
  font-size: var(--fs-body); color: var(--text-3);
  margin-top: 8px;
}
.slot.filled .slot-name {
  font-size: var(--fs-body); font-weight: 600; color: var(--text);
  line-height: 1.25;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.slot.filled .slot-source {
  font-size: 11px; color: var(--text-3); margin-top: 6px;
}
.slot .slot-actions {
  display: flex; gap: 16px; margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed var(--border-strong);
}
.builder-actions {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: center; margin-bottom: var(--s-5);
}
.saved-session { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.saved-session .link.danger { font-size: 22px; padding: 0 6px; }

.custom-block-wrap { position: relative; }
.custom-block-source {
  font-size: 11px; color: var(--text-3);
  padding: 8px 0 14px; font-weight: 500;
}
.custom-block-source a { color: var(--c-curiosity); text-decoration: underline; }

/* ───────────────────────── players ───────────────────────── */

.player-form { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.note-form { display: grid; gap: 10px; margin-bottom: var(--s-4); }
.note-form textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm);
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: var(--r-md);
  resize: vertical; min-height: 60px;
}
.note-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.note-list { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.note-item {
  display: grid; grid-template-columns: 1fr 28px; gap: 10px;
  padding: 14px;
  border-left: 3px solid var(--c-joy);
}
.note-item .note-ts {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-joy); margin-bottom: 4px;
}
.note-item .note-text {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.6; white-space: pre-wrap;
}
.note-item .link.danger { font-size: 18px; padding: 0; }

.rating-summary {
  display: grid; gap: 10px; margin-bottom: var(--s-5);
  padding: 16px;
}
.rating-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
}
.rating-lbl { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }

.stars { display: inline-flex; gap: 4px; }
.stars .star, .stars .star-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--border-strong);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.stars .star svg, .stars .star-btn svg { width: 100%; height: 100%; }
.stars .star.on, .stars .star-btn.on { color: var(--c-joy); }

.assess-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-bottom: var(--s-4);
  padding: 4px;
  background: var(--bg-elev);
  border-radius: var(--r-pill);
}
.assess-tab {
  padding: 10px 8px;
  background: transparent; border: 0;
  border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  transition: all 0.18s ease;
}
.assess-tab[aria-pressed="true"] {
  color: var(--text); background: var(--surface);
}

.assess-panel { display: grid; gap: 0; margin-bottom: var(--s-4); }
.rate-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.rate-row:first-child { border-top: 1px solid var(--border); }
.rate-lbl { display: flex; flex-direction: column; gap: 4px; }
.rate-lbl .name {
  font-size: var(--fs-body); font-weight: 600; color: var(--text);
  line-height: 1.25; letter-spacing: -0.01em;
}
.rate-lbl .desc { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.5; }

/* Progression matrix */
.progression-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 12px;
}
.prog-head { padding: 4px 0; }
.prog-period {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  color: var(--text-3); background: var(--bg-elev);
}
.prog-period.has { color: var(--c-curiosity); background: var(--c-curiosity-bg); }
.prog-section-head {
  font-size: var(--fs-body); font-weight: 700;
  color: var(--text);
  margin: 14px 0 4px;
  border-top: 1px solid var(--border); padding-top: 10px;
  letter-spacing: -0.01em;
}
.prog-lbl { font-size: var(--fs-caption); color: var(--text); font-weight: 500; padding: 4px 0; }
.prog-cell {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 0; font-size: var(--fs-caption); color: var(--text);
}
.prog-cell.empty { color: var(--border-strong); justify-content: center; }
.prog-cell .stars .star { width: 14px; height: 14px; }
.prog-cell .num-val { font-size: var(--fs-body); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.trend { font-size: var(--fs-caption); font-weight: 700; margin-left: 2px; }
.trend.up   { color: var(--k-warmup); }
.trend.down { color: var(--c-courage); }
.trend.same { color: var(--text-3); }

/* Numeric input rows */
.num-panel { display: grid; gap: 0; margin-bottom: 4px; }
.num-row { border-bottom: 1px solid var(--border); }
.num-row:first-child { border-top: 1px solid var(--border); }
.num-row label {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 0;
}
.num-row input {
  width: 96px; text-align: right;
  font: inherit; font-size: var(--fs-body);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-md);
}
.num-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.num-val { font-size: var(--fs-body); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Today dashboard cards */
.dash-grid { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.dash-card {
  display: block;
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
}
.dash-card .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  margin-bottom: 8px;
}
.dash-card .name {
  font-size: var(--fs-h3); font-weight: 700; color: var(--text);
  line-height: 1.25; letter-spacing: -0.015em;
}
.dash-card .meta { font-size: var(--fs-caption); color: var(--text-2); margin-top: 8px; }
.dash-card .dash-pills { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dash-note {
  display: block; padding: 12px 0; border-top: 1px dashed var(--border-strong); margin-top: 10px;
}
.dash-note .dash-note-meta {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 6px;
}
.dash-note .dash-note-text {
  font-size: var(--fs-caption); color: var(--text); line-height: 1.65; font-style: italic;
}

/* ───────────────────────── find drills ───────────────────────── */

.find-form {
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.find-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  margin-top: 6px;
}

.save-plan-btn {
  width: var(--hit); height: var(--hit);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-curiosity-bg);
  color: var(--c-curiosity);
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.save-plan-btn:active { transform: scale(0.94); }
.save-plan-btn.saved { background: var(--c-joy-bg); color: var(--c-joy); }

/* ───────────────────────── glossary ───────────────────────── */

.drill-card.glossary-card { border-left-color: var(--c-curiosity); }
.drill-card.glossary-card .kind { color: var(--c-curiosity); }
.drill-card.glossary-card .name { font-size: var(--fs-body); }

.term-detail .term-head { margin-bottom: var(--s-6); }
.term-detail .term-head .eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 10px;
}
.term-detail .term-title {
  font-size: var(--fs-h1); font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.term-detail .term-lede {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.65;
  padding: 14px;
  background: var(--c-curiosity-bg);
  border-left: 3px solid var(--c-curiosity);
  border-radius: var(--r-md);
}
.term-detail .term-body {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text);
  margin-bottom: 8px;
}
.term-detail .section-tag {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  margin: var(--s-6) 0 12px;
}
.term-detail .voice {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--c-curiosity);
  background: var(--c-curiosity-bg);
  border-radius: var(--r-md);
}
.term-detail .voice .lbl {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.term-detail .voice p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text); }
.term-detail .voice-say   { border-left-color: var(--voice-say);   background: var(--voice-say-bg); }
.term-detail .voice-say   .lbl { color: var(--voice-say); }
.term-detail .voice-say   p    { font-style: italic; color: #2f3d2f; }
.term-detail .voice-tip   { border-left-color: var(--voice-tip);   background: var(--voice-tip-bg); }
.term-detail .voice-tip   .lbl { color: var(--voice-tip); }
.term-detail .voice-tip   p    { color: #4a2418; }
.term-detail .voice-watch { border-left-color: var(--voice-watch); background: var(--voice-watch-bg); }
.term-detail .voice-watch .lbl { color: var(--voice-watch); }
.term-detail .voice-watch p    { color: #4a3a14; }
.term-detail .voice-ask   { border-left-color: var(--voice-ask);   background: var(--voice-ask-bg); }
.term-detail .voice-ask   .lbl { color: var(--voice-ask); }
.term-detail .voice-ask   p    { color: #2c3540; }

.related-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.related-chip {
  display: inline-block;
  padding: 6px 12px; min-height: 32px;
  font-size: var(--fs-caption); font-weight: 500;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
}
.related-chip:hover { background: var(--bg-elev); border-color: var(--c-curiosity); color: var(--c-curiosity); }

.glossary-strip {
  margin-top: -4px; margin-bottom: 6px;
  padding: 12px;
  background: var(--c-curiosity-bg);
  border-left: 3px solid var(--c-curiosity);
  border-radius: var(--r-md);
}
.glossary-strip .lbl {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 8px;
}

/* ───────────────────────── about ───────────────────────── */

.backup-panel {
  margin-bottom: var(--s-7);
  padding: var(--s-5);
  border-left: 3px solid var(--c-curiosity);
}
.backup-panel .section-tag {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 12px;
}
.backup-panel .backup-lede {
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65; margin-bottom: 16px;
}
.backup-actions { display: grid; gap: var(--s-2); }
.backup-actions .primary { width: 100%; }
.backup-actions .link { text-align: left; padding: 8px 0; }

.about-fragment .about-hero {
  padding: 0 0 var(--s-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-7);
}
.about-fragment .about-intro .eyebrow {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 12px;
}
.about-fragment .about-intro .hero-title {
  font-size: var(--fs-h1); font-weight: 700;
  color: var(--text);
  line-height: 1.15; letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.about-fragment .about-intro .hero-title .accent { color: var(--c-curiosity); }
.about-fragment .about-intro .hero-lede {
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7;
}
.about-fragment .about-section { margin-bottom: var(--s-7); }
.about-fragment .about-section + .about-section {
  padding-top: var(--s-7); border-top: 1px solid var(--border);
}
.about-fragment .about-section .section-tag {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin: 0 0 10px;
}
.about-fragment .about-section .section-title {
  font-size: var(--fs-h2); font-weight: 700;
  color: var(--text);
  line-height: 1.3; letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  display: block;
}
.about-fragment .about-section .section-title span { color: var(--c-curiosity); }
.about-fragment .body-text {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text);
  margin-bottom: var(--s-4);
}
.about-fragment .body-text strong { color: var(--text); font-weight: 600; }
.about-fragment .body-text:last-child { margin-bottom: 0; }
.about-fragment .divider { height: 1px; background: var(--border); margin: var(--s-6) 0; }
.about-fragment .tcqj-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.about-fragment .tcqj-card { padding: 18px 0; border-top: 1px solid var(--border); }
.about-fragment .tcqj-card .letter {
  font-size: 32px; font-weight: 700; color: var(--c-curiosity); line-height: 1;
  letter-spacing: -0.025em;
}
.about-fragment .tcqj-card h3 {
  font-size: var(--fs-body); font-weight: 700; color: var(--text); margin: 8px 0 12px;
  letter-spacing: -0.01em;
}
.about-fragment .tcqj-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.about-fragment .tcqj-card .cell .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 4px;
}
.about-fragment .tcqj-card .cell p { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.6; }
.about-fragment .benefit-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.about-fragment .benefit-card { padding: 16px 0; border-top: 1px solid var(--border); }
.about-fragment .benefit-card h3 {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
}
.about-fragment .benefit-card p { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; }
.about-fragment .pill-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.about-fragment .pill { padding: 16px 0; border-top: 1px solid var(--border); }
.about-fragment .pill h3 {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
}
.about-fragment .pill p { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; }
.about-fragment .struct-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.about-fragment .struct-card { padding: 16px 0; border-top: 1px solid var(--border); }
.about-fragment .struct-card .icon {
  font-size: 24px; color: var(--c-curiosity); line-height: 1; font-weight: 700;
}
.about-fragment .struct-card h3 {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 8px 0 6px;
}
.about-fragment .struct-card p { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.6; }
.about-fragment .two-col { display: block; }
.about-fragment .two-col > * + * { margin-top: var(--s-6); }
.about-fragment .curr-table { display: none; }
.about-fragment .stat-box {
  border-top: 1px solid var(--border); padding: 16px 0 14px;
}
.about-fragment .stat-box .num {
  font-size: 36px; color: var(--text); line-height: 1; font-weight: 700;
  letter-spacing: -0.025em;
}
.about-fragment .stat-box .desc {
  font-size: var(--fs-caption); color: var(--text-2);
  margin-top: 8px; line-height: 1.6;
}
.about-fragment .cover-meta,
.about-fragment .month-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-4);
}
.about-fragment .cover-meta > div,
.about-fragment .month-meta > div {
  padding: 12px 14px; background: var(--surface);
}
.about-fragment .cover-meta .lbl,
.about-fragment .month-meta .lbl {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.about-fragment .cover-meta .val,
.about-fragment .month-meta .val {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}

/* ───────────────────────── swipe-to-delete ───────────────────────── */

.swipe-card-wrap { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.swipe-card {
  position: relative;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
  touch-action: pan-y;
  background: var(--surface);
  z-index: 2;
}
.swipe-card.open { transform: translateX(-96px); }
.swipe-delete {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 96px;
  background: var(--danger);
  color: #FFFFFF;
  border: 0;
  font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  z-index: 1;
}
.swipe-delete:active { background: #973f25; }

/* ───────────────────────── drill detail page ───────────────────────── */

.drill-detail { display: flex; flex-direction: column; gap: var(--s-4); }
.drill-detail .source-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-caption); font-weight: 500;
  color: var(--text); text-decoration: none;
  align-self: flex-start;
}
.drill-detail .source-link .pip { color: var(--c-curiosity); }
.drill-detail .session-fragment .s-block { padding: var(--s-5); }

/* ───────────────────────── misc utilities ───────────────────────── */

.empty {
  font-size: var(--fs-sm); color: var(--text-3);
  text-align: center; padding: 32px 20px;
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.error {
  padding: 16px;
  background: var(--danger-bg);
  color: var(--text);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.loading {
  padding: 60px 20px;
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}

.hero { margin-bottom: var(--s-5); }
.hero .eyebrow {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  margin-bottom: 10px;
}
.hero h1 {
  font-size: var(--fs-h1); font-weight: 700;
  color: var(--text); line-height: 1.15;
  letter-spacing: -0.025em;
}
.hero h1 .accent { color: var(--c-curiosity); }
.hero p {
  font-size: var(--fs-sm); color: var(--text-2); margin-top: 10px; line-height: 1.65;
}

.section-tag {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity);
  margin: var(--s-6) 0 10px;
}

/* Fade-in on render */
@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.view.view-just-rendered { animation: appFadeIn 0.22s ease both; }
@media (prefers-reduced-motion: reduce) {
  .view.view-just-rendered { animation: none; }
}

/* Larger phones */
@media (min-width: 480px) {
  :root { --pad: 20px; }
  .session-fragment .session-head .name { font-size: 32px; }
  .session-fragment .pitch-grid { grid-template-columns: 1fr 1fr; }
  .session-fragment .legend-section-grid { grid-template-columns: 1fr 1fr; }
  .about-fragment .tcqj-grid { grid-template-columns: 1fr 1fr; }
  .about-fragment .benefit-grid { grid-template-columns: 1fr 1fr; }
  .about-fragment .pill-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .about-fragment .pill { border-top: 1px solid var(--border); padding: 16px 0; }
  .quick-stats { gap: var(--s-4); }
}

@media (min-width: 640px) {
  .home-greeting h1 { font-size: 32px; }
  .about-fragment .about-intro .hero-title { font-size: 36px; }
  .about-fragment .struct-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }
  .about-fragment .struct-card { border-top: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   UPDATE-AVAILABLE BANNER
   Top-of-screen banner shown when the service worker detects a new app
   version. Tap Refresh to reload the page and pick up the new build.
   ───────────────────────────────────────────────────────────────────── */
.update-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  background: linear-gradient(135deg,
                              var(--today-grad-from, #6366F1) 0%,
                              var(--today-grad-to,   #EC4899) 100%);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  animation: update-banner-slide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes update-banner-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.update-banner-msg { flex: 1; min-width: 0; }
.update-banner-btn {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.22);
  border: 0; color: #fff;
  padding: 8px 16px; border-radius: 8px;
  font: inherit; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.update-banner-btn:hover,
.update-banner-btn:active { background: rgba(255, 255, 255, 0.32); }
.update-banner-dismiss {
  flex: 0 0 auto;
  background: none; border: 0; color: #fff;
  padding: 4px 8px; font-size: 22px; line-height: 1;
  cursor: pointer; opacity: 0.75;
}
.update-banner-dismiss:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   PARENT EXPECTATIONS PROTOTYPE (2026-05-21)
   ───────────────────────────────────────────────────────────────────── */

/* Compact tile on the player detail page that links to the full tracker. */
.expect-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg,
                              color-mix(in oklab, var(--today-grad-from) 8%, var(--bg-elev)) 0%,
                              color-mix(in oklab, var(--today-grad-to) 10%, var(--bg-elev)) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
}
.expect-tile-body { flex: 1; min-width: 0; }
.expect-tile-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sub); margin-bottom: 4px;
}
.expect-tile-title { font-size: 15px; font-weight: 600; color: var(--text); }
.expect-tile-pips { margin-top: 6px; display: flex; gap: 4px; font-size: 12px; }
.expect-pip { color: var(--sub); }
.expect-pip.done {
  color: transparent;
  background: linear-gradient(135deg, var(--today-grad-from), var(--today-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Progress bar at the top of the tracker. */
.expect-progress { margin: 4px 0 18px; }
.expect-progress-bar {
  height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden;
}
.expect-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--today-grad-from), var(--today-grad-to));
  transition: width 0.3s ease;
}
.expect-progress-lbl {
  font-size: 12px; color: var(--sub); margin-top: 6px;
}

/* Stack of 3 checkpoint cards. */
.expect-stack { display: grid; gap: 12px; }

.expect-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid; gap: 12px;
}
.expect-card.has {
  border-color: color-mix(in oklab, var(--today-grad-from) 30%, var(--border));
}
.expect-card.editing {
  border-color: var(--today-grad-from);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--today-grad-from) 14%, transparent);
}
.expect-card-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.expect-step {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--today-grad-from), var(--today-grad-to));
  color: #fff;
}
.expect-card.empty .expect-step {
  background: var(--surface-2);
  color: var(--sub);
}
.expect-card-titles { flex: 1; min-width: 0; }
.expect-card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.expect-card-sub { font-size: 12px; color: var(--sub); margin-top: 2px; line-height: 1.4; }
.expect-status {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.expect-status.done {
  color: transparent;
  background: color-mix(in oklab, var(--today-grad-from) 14%, var(--bg-elev));
  background-clip: padding-box;
  border: 1px solid color-mix(in oklab, var(--today-grad-from) 35%, var(--border));
}
.expect-status.done::before {
  content: "✓ Captured";
  background: linear-gradient(135deg, var(--today-grad-from), var(--today-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.expect-status.done { font-size: 0; }
.expect-status.done::before { font-size: 11px; }
.expect-status.pending {
  background: var(--surface-2);
  color: var(--sub);
}
.expect-card-body { display: grid; gap: 10px; }
.expect-section {}
.expect-lbl {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--sub); margin-bottom: 4px;
}
.expect-text {
  font-size: 14px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap;
}
.expect-card-actions {
  display: flex; gap: 12px; align-items: center;
  padding-top: 4px;
}
.expect-card.empty .expect-card-actions {
  border-top: 0; padding-top: 0;
}
.expect-card-actions .primary {
  display: inline-block; padding: 10px 14px;
  background: linear-gradient(135deg, var(--today-grad-from), var(--today-grad-to));
  color: #fff;
  border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.expect-card-actions .link {
  background: none; border: 0; padding: 6px 0;
  color: var(--sub); font-size: 13px; cursor: pointer;
}
.expect-card-actions .link.danger { color: #C0413A; }

/* Inline edit form */
.expect-form { display: grid; gap: 12px; }
.expect-field { display: grid; gap: 6px; }
.expect-field-lbl {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.expect-field-lbl .optional { color: var(--sub); font-weight: 400; }
.expect-field input,
.expect-field textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit; color: var(--text);
}
.expect-field textarea { resize: vertical; min-height: 60px; }
.expect-field input:focus,
.expect-field textarea:focus {
  outline: none;
  border-color: var(--today-grad-from);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--today-grad-from) 14%, transparent);
}
.expect-form-actions {
  display: flex; justify-content: flex-end; gap: 12px; align-items: center;
}
.expect-form-actions .primary {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--today-grad-from), var(--today-grad-to));
  color: #fff; border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.expect-recap { margin-top: 22px; }

/* ─────────────────────────────────────────────────────────────────────
   GRADIENT ROTATION PROTOTYPE (2026-05-21)

   Applies the daily rotating gradient to title-accent spans across all
   pages. Coverage (auto via existing markup): Home greeting "Coach.",
   Players "Players", Find Drills "drills", Glossary "Terms.", Session
   Builder "Session", Month/Session accent words, Section title spans.

   Coverage (via new accent-span wraps below): Foundation Year, Completed
   count, Program-hero coming-soon title.

   Toggle the whole prototype OFF by deleting this block — the earlier
   reset rule at ~line 453 will re-assert plain text color.
   ───────────────────────────────────────────────────────────────────── */
.home-greeting h1 .accent,
.month-hero h1 .accent,
.hero h1 .accent,
.hero h1 span.accent,
.session-card .name .accent,
.session-fragment .session-head .name span,
.session-fragment .section-title span,
.section-title span,
.subsection .accent,
.builder-title .accent,
.program-hero .page-title .accent,
.term-detail .term-title .accent,
h1 .accent,
h2 .accent {
  background: linear-gradient(135deg,
                              var(--today-grad-from, #BB73E0) 0%,
                              var(--today-grad-to, #FF8DDB) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* ═════════════════════════════════════════════════════════════════
   Liquid-glass redesign preview — scoped to body.glass-preview only.
   Activated by the #/glass route; route() clears the class on exit.
   ═════════════════════════════════════════════════════════════════ */

/* Photo wallpaper behind everything so the backdrop-blur on the glass cards
   actually has color/contrast to catch. Local asset at icons/glass-bg.jpg
   keeps the preview offline-friendly once the SW caches it. Minimal veil so
   the image's blues/greens come through clearly behind the cards. */
body.glass-preview {
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0.02) 50%, rgba(15, 23, 42, 0.06) 100%),
    url('icons/glass-bg.jpg') center / cover no-repeat;
  background-attachment: fixed, fixed;
}
body.glass-preview .app {
  background: transparent;
}

body.glass-preview .glass-preview-hero {
  margin: 0 0 var(--s-6);
}
body.glass-preview .glass-preview-hero .eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: #6366F1;
  margin-bottom: 8px;
}
body.glass-preview .glass-preview-hero .page-title {
  color: #0F172A;
}
body.glass-preview .glass-preview-hero .page-title .accent {
  background: linear-gradient(90deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.glass-preview .glass-preview-hero .page-sub {
  color: #64748B;
}

/* List of glass cards — spacing-only separation, no dividers */
body.glass-preview .glass-list {
  display: flex; flex-direction: column;
  gap: 14px;
  margin: 0 0 var(--s-8);
}

/* The glass card itself */
body.glass-preview .glass-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.80);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 4px 24px rgba(99, 102, 241, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  padding: 0;
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
body.glass-preview .glass-card:hover,
body.glass-preview .glass-card:focus-visible,
body.glass-preview .glass-card:active {
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 8px 32px rgba(99, 102, 241, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}

/* Gradient identity band at the top of every card */
body.glass-preview .glass-card-band {
  height: 6px; width: 100%;
  background: linear-gradient(90deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
  border-radius: 20px 20px 0 0;
}

body.glass-preview .glass-card-body {
  padding: 16px 16px 20px;
  background: transparent;
}
body.glass-preview .glass-card-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
body.glass-preview .glass-card-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366F1;
}
body.glass-preview .glass-card-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0F172A;
  margin-bottom: 6px;
}
body.glass-preview .glass-card-desc {
  font-size: 15px; font-weight: 400;
  line-height: 1.5;
  color: #64748B;
}

/* Session dots (top-right of label row) */
body.glass-preview .glass-dots {
  display: flex; align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.glass-preview .glass-dot {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.20);
  border: 1px solid rgba(99, 102, 241, 0.35);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
body.glass-preview .glass-dot:active { transform: scale(0.85); }
body.glass-preview .glass-dot.is-done {
  background: #6366F1;
  border-color: transparent;
}

/* FAB — override the global daily-gradient inline style with !important
   because that style is set on the element by JS at boot. */
body.glass-preview .fab {
  background: linear-gradient(135deg, #6366F1, #A855F7) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.40);
  width: 56px; height: 56px;
  border-radius: 50%;
}

/* Bottom navigation — frosted-glass treatment */
body.glass-preview .tabbar {
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
}
body.glass-preview .tabbar .tab { color: #94A3B8; }
body.glass-preview .tabbar .tab[aria-current="page"] { color: #6366F1; }
body.glass-preview .tabbar .tab[aria-current="page"] svg { stroke: #6366F1; }

/* ═════════════════════════════════════════════════════════════════
   Training v2 — pastel mesh-gradient wallpaper + frosted glass tiers.
   Three stacked sections: Now Training hero (light glass) · Season
   progress (med glass) · Up next & completed list (per-row glass).
   Gradient accents track the site's daily rotation.
   ═════════════════════════════════════════════════════════════════ */

body.training-v2 {
  background:
    radial-gradient(70% 60% at 15% 5%,  #ffd3e1 0%, transparent 60%),
    radial-gradient(60% 60% at 90% 15%, #ffe5b8 0%, transparent 55%),
    radial-gradient(70% 70% at 85% 90%, #cfe1ff 0%, transparent 60%),
    radial-gradient(80% 90% at 5% 95%,  #e6d5ff 0%, transparent 65%),
    linear-gradient(180deg, #fff8f2 0%, #f7f3ff 100%);
  background-attachment: fixed;
}
body.training-v2 .app { background: transparent; }

.v2-page {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "DM Sans", sans-serif;
  color: #1c1426;
  padding: 4px 0 40px;
}

/* Shared glass effect — applied via per-section background/border. */
.v2-hero,
.v2-season,
.v2-row,
.v2-row-tile,
.v2-hbar {
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
}

/* ── 1) Now Training hero — light glass ── */
.v2-hero {
  padding: 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(80, 40, 120, 0.10),
    0 1px 3px rgba(80, 40, 120, 0.06);
}
.v2-hero-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.v2-eyebrow-accent {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--today-grad-from, #7a3fc4);
}
.v2-hero-meta {
  font-size: 12px;
  color: rgba(28, 20, 38, 0.62);
}
.v2-hero-body {
  display: flex; gap: 14px; align-items: flex-end;
  margin-top: 14px;
}
.v2-hero-num {
  font-size: 84px;
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #1c1426;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 6px rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.v2-hero-right { flex: 1; min-width: 0; }
.v2-hero-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  color: #1c1426;
  margin: 0 0 4px;
  line-height: 1.2;
}
.v2-hero-desc {
  font-size: 13px;
  color: rgba(28, 20, 38, 0.62);
  line-height: 1.4;
  margin: 0;
}

/* Hero 8-segment progress pill */
.v2-hbar {
  margin-top: 16px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.v2-hbar-inner {
  display: flex; gap: 3px;
  height: 6px;
}
.v2-hbar-seg {
  flex: 1;
  border-radius: 2px;
  background: rgba(28, 20, 38, 0.12);
}
.v2-hbar-seg.is-filled {
  background: linear-gradient(180deg, var(--today-grad-from, #7a3fc4) 0%, var(--today-grad-to, #b569ff) 100%);
  box-shadow: 0 0 8px rgba(122, 63, 196, 0.4);
}

.v2-hero-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.v2-hero-foot-left {
  font-size: 12px;
  color: rgba(28, 20, 38, 0.62);
}
.v2-hero-cta {
  font-size: 13px; font-weight: 700;
  color: var(--today-grad-from, #7a3fc4);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--today-grad-from, rgba(122, 63, 196, 0.3));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.v2-hero-cta:active { opacity: 0.85; }

/* ── 2) Season card — med glass ── */
.v2-season {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(80, 40, 120, 0.10),
    0 1px 3px rgba(80, 40, 120, 0.06);
}
.v2-season-top {
  display: flex; justify-content: space-between; align-items: center;
}
.v2-season-label {
  font-size: 14px; font-weight: 600;
  color: #1c1426;
}
.v2-season-meta {
  font-size: 12px;
  color: rgba(28, 20, 38, 0.62);
}
.v2-sbar {
  margin-top: 10px;
  display: flex; gap: 3px;
  height: 6px;
}
.v2-sbar-seg {
  flex: 1;
  border-radius: 2px;
}
.v2-sbar-seg-done    { background: #1c1426; }
.v2-sbar-seg-future  { background: rgba(28, 20, 38, 0.12); }
.v2-sbar-seg-current { background: linear-gradient(90deg, var(--today-grad-from, #7a3fc4) 0%, var(--today-grad-to, #ff5fa2) 100%); }

/* ── 3) Up next & completed list ── */
.v2-list-label {
  margin-top: 22px;
  padding: 0 4px 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28, 20, 38, 0.62);
}
.v2-list {
  display: flex; flex-direction: column;
  gap: 10px;
}

.v2-row {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(80, 40, 120, 0.10),
    0 1px 3px rgba(80, 40, 120, 0.06);
}
.v2-row-done {
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.70);
}
.v2-row-upcoming {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.v2-row:active { transform: scale(0.992); }

.v2-row-tile {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.v2-tile-check {
  font-size: 15px; font-weight: 700;
  color: #1c1426;
  line-height: 1;
}
.v2-tile-num {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.02em;
  color: #1c1426;
}

.v2-row-body { flex: 1; min-width: 0; }
.v2-row-head {
  display: flex; justify-content: space-between; gap: 8px;
}
.v2-row-title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  color: #1c1426;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-row-meta {
  font-size: 11.5px;
  color: rgba(28, 20, 38, 0.62);
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-row-desc {
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(28, 20, 38, 0.62);
  line-height: 1.4;
}

/* ── Home v2 additions (greeting block + 2×2 quick tiles) ── */

.v2-greet {
  margin-bottom: 14px;
}
.v2-greet-date {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28, 20, 38, 0.62);
  margin-bottom: 6px;
}
.v2-greet-line {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: #1c1426;
}
.v2-greet-name {
  background: linear-gradient(90deg, var(--today-grad-from, #7a3fc4) 0%, var(--today-grad-to, #ff5fa2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.v2-tiles {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v2-tile {
  display: flex; align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(80, 40, 120, 0.10),
    0 1px 3px rgba(80, 40, 120, 0.06);
  transition: transform 120ms ease;
}
.v2-tile:active { transform: scale(0.985); }
.v2-tile-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--today-grad-from, #7a3fc4);
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
}
.v2-tile-icon svg { width: 18px; height: 18px; }
.v2-tile-body { min-width: 0; }
.v2-tile-label {
  font-size: 14px; font-weight: 600;
  color: #1c1426;
  letter-spacing: -0.01em;
}
.v2-tile-meta {
  font-size: 11.5px;
  color: rgba(28, 20, 38, 0.62);
  margin-top: 2px;
}

/* ═════════════════════════════════════════════════════════════════
   Liquid-glass — global. Activated by body.glass-app on the HTML
   element (index.html). Promotes the training-v2 aesthetic
   (pastel mesh wallpaper + frosted glass tiers) to home, month,
   and session views. Existing class names are reused so view
   templates need no changes; .dash-card.primary-card (the hero
   with daily gradient) is excluded via :not() to preserve the
   white-on-gradient treatment.
   ═════════════════════════════════════════════════════════════════ */

body.glass-app {
  /* Pastel mesh wallpaper — the chrome below the cards. */
  background:
    radial-gradient(70% 60% at 15% 5%,  #ffd3e1 0%, transparent 60%),
    radial-gradient(60% 60% at 90% 15%, #ffe5b8 0%, transparent 55%),
    radial-gradient(70% 70% at 85% 90%, #cfe1ff 0%, transparent 60%),
    radial-gradient(80% 90% at 5% 95%,  #e6d5ff 0%, transparent 65%),
    linear-gradient(180deg, #fff8f2 0%, #f7f3ff 100%);
  background-attachment: fixed;

  /* Re-map the design tokens so every existing selector that uses
     var(--surface) / var(--border) / var(--bg-elev) etc. becomes
     translucent automatically. Backdrop-filter is added below via
     a broad selector list since it can't be carried by a variable. */
  --surface:        rgba(255, 255, 255, 0.55);
  --surface-soft:   rgba(255, 255, 255, 0.40);
  --surface-2:      rgba(255, 255, 255, 0.70);
  --bg-elev:        rgba(255, 255, 255, 0.40);
  --bg-alt:         rgba(255, 255, 255, 0.30);
  --border:         rgba(255, 255, 255, 0.85);
  --border-strong:  rgba(255, 255, 255, 0.95);
  --overlay:        rgba(28, 20, 38, 0.32);
  --accent-bg:      rgba(122, 63, 196, 0.12);
}
body.glass-app .app { background: transparent; }

/* Apply backdrop-filter selectively. iOS Safari crashes when too
   many backdrop-filter layers are alive at once — the library
   page renders 1500+ drill rows, so per-row GPU blur is not
   viable. The pastel mesh wallpaper still shows through any
   translucent surface (token override above), so rows look
   glassy without needing their own backdrop-filter.
   Limit this rule to:
     • chrome that appears once per page (topbar/tabbar/drawer/sheet)
     • framing surfaces with low instance counts (hero cards, search,
       filter trigger, focused inputs)
     • dialog-like overlays
   Explicitly excluded: .drill-card, .related-chip, .chip, plus any
   class that can render dozens-to-thousands of instances. */
body.glass-app :where(
  .menu-drawer,
  .sheet, .sheet-sticky,
  .search, .filter-trigger,
  .upcoming-card, .find-tile,
  .pick-banner,
  input[type="text"]:focus, input[type="search"]:focus,
  input[type="email"]:focus, input[type="number"]:focus,
  input[type="tel"]:focus, input[type="url"]:focus,
  input[type="date"]:focus, textarea:focus, select:focus
) {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
}

/* Exclude the daily-gradient hero from token-driven translucency —
   it gets its background from var(--grad-hero), not var(--surface),
   so it's already safe, but we lock the radius + glass outer ring. */

/* Topbar — frosted over the mesh. The existing .topbar already has
   backdrop-filter; we just dial the opacity down so the mesh shows
   through and bump the saturation for a more "glass" feel. */
body.glass-app .topbar {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.80);
}

/* Bottom tabbar — same treatment. */
body.glass-app .tabbar {
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* ── Shared glass card treatment ──
   Translucent surface + soft shadow on every card class. Note:
   backdrop-filter is intentionally NOT set here. iOS Safari crashes
   when too many backdrop-filter layers are alive at once (the
   library page renders 1500+ drill rows), so per-card GPU blur is
   off. The mesh wallpaper still shows through the translucent
   white, so the look reads as glass without the cost. The smaller
   set of single-instance / dialog elements that DO get backdrop-
   filter is handled by the :where() rule above. */
body.glass-app .card,
body.glass-app .card-soft,
body.glass-app .dash-card:not(.primary-card),
body.glass-app .qa-card,
body.glass-app .find-tile,
body.glass-app .month-card,
body.glass-app .session-card,
body.glass-app .drill-card,
body.glass-app .tile,
body.glass-app .quick-stat,
body.glass-app .find-form,
body.glass-app .builder-meta,
body.glass-app .note-item,
body.glass-app .rating-summary,
body.glass-app .backup-panel,
body.glass-app .anim-pitch-card,
body.glass-app .scorecard-card,
body.glass-app .session-fragment .s-block,
body.glass-app .session-fragment .session-head .meta-row {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(255, 255, 255, 0.40),
    0 8px 24px rgba(80, 40, 120, 0.10),
    0 1px 3px rgba(80, 40, 120, 0.06);
}

/* Press feedback — gentle scale, slightly more opaque on tap. */
body.glass-app .card:active,
body.glass-app .card-soft:active,
body.glass-app .dash-card:not(.primary-card):active,
body.glass-app .qa-card:active,
body.glass-app .find-tile:active,
body.glass-app .month-card:active,
body.glass-app .session-card:active,
body.glass-app .drill-card:active,
body.glass-app .tile:active,
body.glass-app .quick-stat:active {
  background: rgba(255, 255, 255, 0.70);
  transform: scale(0.992);
}

/* The qa-card variant overrides (qa-program/qa-build/qa-library/qa-players)
   set background: var(--surface) at higher specificity than .qa-card alone.
   Override them here so the glass treatment wins. */
body.glass-app .qa-card.qa-program,
body.glass-app .qa-card.qa-build,
body.glass-app .qa-card.qa-library,
body.glass-app .qa-card.qa-players {
  background: rgba(255, 255, 255, 0.55);
}

/* Upcoming-session hero — keep the daily gradient background, but
   soften the corners and add a glassy outer ring so it reads as part
   of the same family. */
body.glass-app .dash-card.primary-card {
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 12px 32px rgba(80, 40, 120, 0.18),
    0 1px 3px rgba(80, 40, 120, 0.08);
}

/* Month listing — keep the per-month gradient num tile, but let the
   surrounding card go glass and bump the radius to match. */
body.glass-app .month-card {
  border-radius: 18px;
}

/* Session list inside a month — keep the colored left accent rail;
   the card body goes glass. Slight padding bump so the rail doesn't
   crowd the glass border. */
body.glass-app .session-card {
  border-radius: 18px;
  border-left-width: 3px;
}

/* Session detail (.s-block) — glass panel for each block. The legacy
   s-block sets padding via the shared base rule (var(--s-4)); we keep
   that and just retune the surface. */
body.glass-app .session-fragment .s-block {
  border-radius: 18px;
}

/* Section titles inside the session view — bump the accent gradient
   so it reads against the mesh. */
body.glass-app .session-fragment .section-title span {
  background: linear-gradient(90deg, var(--today-grad-from, #7a3fc4) 0%, var(--today-grad-to, #ff5fa2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Chrome surfaces — drawer, sheet, search bar, filter trigger ── */

body.glass-app .menu-drawer {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    -12px 0 40px -8px rgba(80, 40, 120, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.90);
}
body.glass-app .menu-item:hover { background: rgba(255, 255, 255, 0.55); }
body.glass-app .menu-item:active { background: rgba(255, 255, 255, 0.70); }

body.glass-app .sheet-backdrop {
  background: rgba(28, 20, 38, 0.32);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
body.glass-app .sheet {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 -16px 40px -10px rgba(80, 40, 120, 0.20);
}

body.glass-app .search,
body.glass-app .filter-trigger {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 4px 12px rgba(80, 40, 120, 0.06);
}
body.glass-app .search:focus-within {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 3px rgba(122, 63, 196, 0.18);
}

/* ── Inputs / textareas / selects — glassy on the same mesh.
   Backdrop-filter only on focus (Safari can struggle with many
   stacked filter layers, and forms can have many fields). */

body.glass-app input[type="text"],
body.glass-app input[type="search"],
body.glass-app input[type="email"],
body.glass-app input[type="number"],
body.glass-app input[type="tel"],
body.glass-app input[type="url"],
body.glass-app input[type="date"],
body.glass-app textarea,
body.glass-app select {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
body.glass-app input[type="text"]:focus,
body.glass-app input[type="search"]:focus,
body.glass-app input[type="email"]:focus,
body.glass-app input[type="number"]:focus,
body.glass-app input[type="tel"]:focus,
body.glass-app input[type="url"]:focus,
body.glass-app input[type="date"]:focus,
body.glass-app textarea:focus,
body.glass-app select:focus {
  outline: 0;
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 3px rgba(122, 63, 196, 0.18);
}

/* ── Chips / pills — translucent so they don't feel plastic.
   No backdrop-filter here: chips render in dozens per page
   (related-chips on drill detail, filter chips on library),
   and stacking GPU blur layers per chip can crash iOS Safari.
   Translucent bg on the mesh wallpaper gives the glass look
   without the cost. */
body.glass-app .chip:not([aria-pressed="true"]),
body.glass-app .related-chip,
body.glass-app .practice-chip {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

/* ── Buttons — primary keeps gradient identity, just rounder + glass shadow ── */
body.glass-app .primary {
  border-radius: 999px;
  box-shadow:
    0 6px 18px rgba(80, 40, 120, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* Ghost / outline buttons → frosted glass */
body.glass-app .btn-outline,
body.glass-app .ghost,
body.glass-app .btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* ── Undo toast — glass slab so it lifts off the mesh nicely ── */
body.glass-app .undo-toast {
  background: rgba(28, 20, 38, 0.80);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 40px rgba(0, 0, 0, 0.28);
}

/* ── Notes badge / completed badge on session cards — keep them
   readable against the new glass card behind them. Their existing
   solid backgrounds already work; just nudge the radius. */
body.glass-app .session-card .notes-badge,
body.glass-app .session-card .completed-badge {
  border-radius: 999px;
}

/* ── Animation / drill diagram cards — preserve the diagram's
   crisp lines but let the surrounding card be glass. */
body.glass-app .anim-pitch-card svg {
  filter: drop-shadow(0 1px 2px rgba(80, 40, 120, 0.08));
}

/* ── Scorecard tiles (stat triplets) — already covered by the
   shared rule; shrink the radius for the compact look. */
body.glass-app .scorecard-card {
  border-radius: 14px;
}

/* ── Natural-language search input — token highlights ──
   The .nl-input-wrap layers two elements: a transparent <input> the user
   actually types into, and a <div class="nl-overlay"> mirroring the same
   text positioned absolutely behind the input. Recognized tokens get
   colored backgrounds in the overlay; the input itself is transparent
   so the caret + typed text appear over the colored spans.
   Scroll position would normally desync between them, but since the
   input never overflows on phone widths (single line, mobile font),
   we don't need a scroll sync. */

.nl-search { padding: 8px 14px; align-items: stretch; min-height: var(--hit); }
.nl-search .icon { align-self: center; flex-shrink: 0; }

.nl-input-wrap {
  flex: 1; position: relative;
  display: flex; align-items: center;
  min-width: 0;
  min-height: 28px;
}

.nl-overlay {
  position: absolute; inset: 0;
  padding: 0;
  display: flex; align-items: center;
  font: inherit; font-size: var(--fs-body);
  color: var(--text);
  letter-spacing: inherit;
  white-space: pre;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.nl-input {
  position: relative; z-index: 2;
  width: 100%; border: 0; outline: 0;
  background: transparent;
  font: inherit; font-size: var(--fs-body);
  color: transparent;
  caret-color: var(--text);
  letter-spacing: inherit;
  -webkit-text-fill-color: transparent;
}
/* Hide native search clear button — it conflicts with the overlay. */
.nl-input::-webkit-search-cancel-button { display: none; }
.nl-input::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); }

/* Per-field token colors. Solid pill backgrounds so they pop against
   the mesh wallpaper. */
.nl-tok-theme      { background: rgba(251,146, 60,0.22); color: #b45309; }
.nl-tok-age        { background: rgba( 16,185,129,0.22); color: #047857; }
.nl-tok-duration   { background: rgba( 14,165,233,0.22); color: #0369a1; }
.nl-tok-equipment  { background: rgba(167,139,250,0.25); color: #5b21b6; }
.nl-tok-players    { background: rgba(245,158, 11,0.22); color: #92400e; }
.nl-tok-difficulty { background: rgba(244, 63, 94,0.22); color: #9f1239; }
.nl-tok-theme, .nl-tok-age, .nl-tok-duration,
.nl-tok-equipment, .nl-tok-players, .nl-tok-difficulty {
  border-radius: 5px;
  padding: 1px 4px;
  margin: 0 -1px;
  font-weight: 500;
}

.nl-status {
  display: flex; align-items: center;
  gap: 6px;
  margin: 8px 4px 0;
  font-size: 11px;
  color: rgba(28, 20, 38, 0.62);
}
.nl-status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.results-overflow {
  margin: 14px 4px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.50);
  border: 1px dashed rgba(28, 20, 38, 0.18);
  font-size: 12px;
  color: rgba(28, 20, 38, 0.72);
  text-align: center;
  line-height: 1.5;
}
.results-overflow-hint {
  display: block;
  margin-top: 2px;
  color: rgba(28, 20, 38, 0.50);
  font-size: 11px;
}

/* ── Library landing — category tiles ──
   Filter-first browse: a small grid of glass tiles per facet so coaches
   pick a category before any drill rows render. Keeps the page light
   (~20 tiles vs ~1500 drill rows) and matches how the library is
   actually used. */

.lib-landing { margin-top: 4px; }

.lib-cat-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 8px;
  margin: 18px 4px 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28, 20, 38, 0.62);
}
.lib-cat-head:first-of-type { margin-top: 6px; }
.lib-cat-head-note {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(28, 20, 38, 0.48);
}

.lib-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lib-cat-grid-quick { grid-template-columns: 1fr 1fr 1fr; }
.lib-cat-grid-kinds { grid-template-columns: 1fr 1fr; }
.lib-cat-grid-sources { grid-template-columns: 1fr 1fr; }
.lib-cat-grid-diff  { grid-template-columns: 1fr 1fr 1fr; }
.lib-cat-grid-ages  { grid-template-columns: 1fr 1fr 1fr; }
.lib-cat-grid-bp    { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.lib-cat-tile {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(255, 255, 255, 0.40),
    0 8px 24px rgba(80, 40, 120, 0.10),
    0 1px 3px rgba(80, 40, 120, 0.06);
  color: #1c1426;
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease;
  min-height: 84px;
}
.lib-cat-tile:active {
  transform: scale(0.985);
  background: rgba(255, 255, 255, 0.70);
}
.lib-cat-tile-count {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1c1426;
  font-variant-numeric: tabular-nums;
}
.lib-cat-tile-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(28, 20, 38, 0.78);
}

/* Kind tiles get a colored left rail tying them to the session-card
   identity color for the same kind (kind-arrival / kind-warmup / etc.). */
.lib-cat-tile-kind { border-left-width: 3px; padding-left: 13px; }
.lib-cat-tile-kind.kind-arrival   { border-left-color: var(--k-arrival); }
.lib-cat-tile-kind.kind-warmup    { border-left-color: var(--k-warmup); }
.lib-cat-tile-kind.kind-technical { border-left-color: var(--k-technical); }
.lib-cat-tile-kind.kind-game      { border-left-color: var(--k-game); }
.lib-cat-tile-kind.kind-cooldown  { border-left-color: var(--k-cooldown); }
.lib-cat-tile-kind.kind-homework  { border-left-color: var(--k-homework); }
.lib-cat-tile-kind.kind-fungame   { border-left-color: var(--k-fungame); }

/* Difficulty tiles use the same colored-rail idiom as kinds, with three
   stops on a soft green→amber→rose progression. */
.lib-cat-tile-diff { border-left-width: 3px; padding-left: 13px; }
.lib-cat-tile-diff.diff-beginner     { border-left-color: #5FA676; }
.lib-cat-tile-diff.diff-intermediate { border-left-color: #D99B34; }
.lib-cat-tile-diff.diff-advanced     { border-left-color: #D45D63; }

/* Body-part tiles — compact (17 of them in a 3-col grid) so we keep
   the landing scrollable without overwhelming. No colored rail because
   anatomy isn't semantically color-coded in this design system. */
.lib-cat-tile-bp {
  padding: 10px 12px;
  min-height: 60px;
}
.lib-cat-tile-bp .lib-cat-tile-count {
  font-size: 18px;
}
.lib-cat-tile-bp .lib-cat-tile-label {
  font-size: 12px;
}

.lib-cat-tile-quick {
  min-height: 72px;
}
.lib-cat-tile-quick .lib-cat-tile-count {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--today-grad-from, #7a3fc4) 0%, var(--today-grad-to, #ff5fa2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lib-landing-hint {
  margin: 22px 4px 4px;
  font-size: 12px;
  color: rgba(28, 20, 38, 0.55);
  line-height: 1.5;
}

/* ── Edge case: legacy body.training-v2 and body.glass-preview
   scoped designs still apply on #/program and #/glass. We DON'T
   want the glass-app body class to interfere with them when the
   user lands on those routes. Since the router doesn't strip
   glass-app, and training-v2 / glass-preview rules come earlier
   in the file with comparable specificity, we explicitly defer
   to them when both classes are present. */
body.glass-app.training-v2,
body.glass-app.glass-preview {
  /* Background re-asserts whichever scoped route is active; the
     individual training-v2 / glass-preview rules below have their
     own selectors and will paint over the cards. */
}

/* ────────────────────────────────────────────────────────────
   Home v3 prototype — scoped to body.home-v3 only.
   Live home page (#/) is untouched. Compare at #/home-v3.
   ──────────────────────────────────────────────────────────── */

/* Page background — falls through to body.glass-app's pastel mesh so the
   home-v3 view matches the rest of the app's chrome. Topbar/tabbar inherit
   the glass-app translucent treatment. */

/* ── .glass-effect — Apple-style Liquid Glass material ──────
   Modeled on SwiftUI's .glassEffect(.regular, in: …) modifier.
   Highly translucent surface, heavy backdrop blur + saturation so the
   underlying gradient bleeds through with refractive lift, asymmetric
   rim highlight (bright top edge, fading sides) for the "light catching
   glass" feel, and a specular sheen across the top portion.

   Apply by adding `glass-effect` to any element. The optional
   `interactive` modifier adds the press-response from SwiftUI's
   .interactive(true). Scoped under body.home-v3 so the style only
   activates on the prototype route. */
body.home-v3 .glass-effect {
  position: relative;
  border-radius: 22px;
  /* Tinted high enough that the card surface reads against the pastel mesh,
     but low enough that the wallpaper still bleeds through for the refractive
     feel. Tuned for body.glass-app's wallpaper. */
  background: rgba(255, 255, 255, 0.40);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
          backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  /* Asymmetric rim + CHROMATIC EDGE — slight cyan on the left, slight
     magenta on the right. Mimics chromatic aberration of real glass. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(80, 40, 120, 0.06),
    inset 1px 0 0 rgba(150, 220, 255, 0.38),
    inset -1px 0 0 rgba(255, 160, 220, 0.26),
    0 12px 32px rgba(80, 40, 120, 0.12),
    0 2px 6px rgba(80, 40, 120, 0.06);
  color: #1c1426;
}
/* Specular sheen — soft white smear across the top portion of the surface. */
body.home-v3 .glass-effect::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.06) 28%,
      transparent 55%),
    /* Diagonal highlight band, like light streaking across glass */
    linear-gradient(115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.06) 50%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Fake thickness layer — a second, slightly inset glass tint that creates
   the impression the surface has depth, not just a flat film. */
body.home-v3 .glass-effect::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%);
  box-shadow:
    inset 0 0 24px rgba(150, 220, 255, 0.10),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
/* Children sit above both pseudo-element layers. */
body.home-v3 .glass-effect > * { position: relative; z-index: 1; }

/* .interactive — SwiftUI's fluid touch response. Subtle scale + brighten. */
body.home-v3 .glass-effect.interactive {
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.18s ease,
              border-color 0.18s ease;
}
body.home-v3 .glass-effect.interactive:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

/* Topbar chrome — hide back/forward arrows + hamburger on home-v3.
   The injected .v3-switch-program (data-route-injected="true") takes
   the hamburger's place on the right side of the topbar. */
body.home-v3 #nav-back,
body.home-v3 #nav-forward,
body.home-v3 .hamburger { display: none !important; }

/* Switch-program control (logo + chevron down) — sits where the hamburger was. */
.v3-switch-program {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 4px 6px;
  color: var(--text); cursor: pointer; border-radius: var(--r-pill);
}
.v3-switch-program:active { background: rgba(0,0,0,0.06); }
.v3-switch-logo {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #9600FF, #AEBAF8);
  color: #FFFFFF; font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
}
.v3-switch-chev { width: 14px; height: 14px; opacity: 0.65; }

/* Bottom sheet for switch-program. */
.v3-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.32);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
  z-index: 200;
}
.v3-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.v3-program-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -16px 40px -8px rgba(15, 23, 42, 0.22);
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 210;
}
.v3-program-sheet.is-open { transform: translateY(0); }
.v3-sheet-grab {
  width: 36px; height: 4px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  margin: 6px auto 14px;
}
.v3-sheet-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 4px 12px;
}
.v3-program-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 8px; border: 0; background: transparent;
  border-radius: 14px; text-align: left; cursor: pointer;
}
.v3-program-item:active { background: rgba(0,0,0,0.04); }
.v3-program-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #9600FF, #AEBAF8);
  color: #FFFFFF; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v3-program-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.v3-program-name { font-size: 16px; font-weight: 600; color: var(--text); }
.v3-program-meta { font-size: 12px; color: var(--text-3); }
.v3-program-check { width: 20px; height: 20px; color: var(--brand-purple); }
.v3-program-item:not(.is-current) .v3-program-check { display: none; }

/* Page layout — greeting + tall hero filling the viewport. */
.v3-page { display: flex; flex-direction: column; gap: 14px; }
.v3-greet { margin-top: 4px; }
.v3-greet h1 {
  font-size: 30px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.015em; margin: 6px 0 0;
}

/* Weather widget — inline, single line, muted. No card.
   Each metric gets its own glyph (temperature / rain / sunset). */
.v3-weather {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-3);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.v3-weather-metric {
  display: inline-flex; align-items: center; gap: 4px;
}
.v3-weather-icon { display: inline-flex; width: 14px; height: 14px; color: var(--text-3); }
.v3-weather-icon svg { width: 100%; height: 100%; }
.v3-weather-sep { opacity: 0.40; }
.v3-weather-temp { font-weight: 600; color: var(--text-2); }
.v3-weather-rain,
.v3-weather-sun { color: var(--text-2); }
/* "for tomorrow 5:00 PM" caption — visually subordinate but always present
   so it's clear the forecast is scoped to the next session, not now. */
.v3-weather-for {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  margin-left: 2px;
}

/* Hero card — liquid glass (matches v2 Training NOW TRAINING card).
   Weather condition surfaces only as accent via --v3-from / --v3-to
   CSS vars set inline on the .v3-hero element.
   The card itself is mostly translucent — the pastel mesh wallpaper
   shows through. A thin top-left → bottom-right gradient sheen gives
   the "refractive glass" feel; the border + inset highlights produce
   the rim of light at the card's edge. */
/* .v3-hero — layout/sizing only; visual treatment comes from .glass-card. */
.v3-hero {
  padding: 18px;
  display: flex; flex-direction: column;
  min-height: calc(100svh - 280px - var(--tab-h));
  overflow: hidden;
}
.v3-hero-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.v3-hero-coord {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v3-from, #7a3fc4);
}
.v3-hero-weather {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-from, #7a3fc4), var(--v3-to, #b569ff));
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
}
.v3-hero-weather svg { width: 13px; height: 13px; }

.v3-hero-title {
  font-size: 26px; line-height: 1.1; font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 6px;
  color: #1c1426;
}
.v3-hero-skill {
  font-size: 14px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.68);
  margin-bottom: 12px;
}
.v3-hero-quote {
  font-size: 13px; line-height: 1.45; font-style: italic;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 2px solid var(--v3-from, #7a3fc4);
  border-radius: 0 10px 10px 0;
  margin-bottom: 16px;
  color: rgba(28, 20, 38, 0.78);
}

/* Drill breakdown — scrollable region inside the hero. */
.v3-bd-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.v3-bd-row { padding: 8px 0; border-top: 1px solid rgba(28, 20, 38, 0.10); }
.v3-bd-row:first-child { border-top: 0; }
.v3-bd-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(28, 20, 38, 0.55);
  margin-bottom: 3px;
}
.v3-bd-body { font-size: 13px; line-height: 1.4; color: rgba(28, 20, 38, 0.85); }

/* Numbered training stages — accordion. Each .v3-stage contains a clickable
   .v3-stage-row (number + label + duration + chevron) and a hidden
   .v3-stage-details panel that expands on tap. */
.v3-stages { margin-bottom: 14px; }
.v3-stage { border-top: 1px solid rgba(28, 20, 38, 0.10); }
.v3-stage:first-child { border-top: 0; }

.v3-stage-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.v3-stage-row:active { background: rgba(28, 20, 38, 0.03); }

.v3-stage-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  /* --stage-from/--stage-to override per-phase; fall back to weather-accent
     gradient for non-phase rows (Session Prep, Send-Off, Beyond Soccer, Homework). */
  border: 1.5px solid var(--stage-from, var(--v3-from, #7a3fc4));
  color: var(--stage-from, var(--v3-from, #7a3fc4));
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  background: rgba(255, 255, 255, 0.40);
  transition: background 0.24s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.v3-stage.is-open .v3-stage-num {
  background: linear-gradient(135deg, var(--stage-from, var(--v3-from, #7a3fc4)), var(--stage-to, var(--v3-to, #b569ff)));
  color: #FFFFFF;
  border-color: transparent;
}
.v3-stage-label-wrap {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.v3-stage-label {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  /* Phase name tinted with either the per-phase color (Arrival / Warm-Up /
     Technical / Game / Cool-Down) or the weather-accent gradient as fallback.
     Solid color when from == to (phase rows); gradient when they differ. */
  color: #1c1426;
  background: linear-gradient(135deg, var(--stage-from, var(--v3-from, #7a3fc4)), var(--stage-to, var(--v3-to, #b569ff)));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  width: max-content;
  max-width: 100%;
}
/* Activity title beneath the phase name — black, regular weight. */
.v3-stage-subhead {
  font-size: 13px; font-weight: 400;
  color: rgba(28, 20, 38, 0.78);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.v3-stage-mins {
  font-size: 13px; font-weight: 500;
  color: rgba(28, 20, 38, 0.55);
  white-space: nowrap;
}
.v3-stage-chev {
  width: 16px; height: 16px;
  color: rgba(28, 20, 38, 0.45);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sub-toggle chevrons stroke url(#v3-chev-grad). The defs live inside .v3-hero
   so the --v3-from / --v3-to CSS vars cascade into the stops. */
.v3-defs { position: absolute; pointer-events: none; overflow: hidden; }
.v3-stop-from { stop-color: var(--v3-from, #7a3fc4); }
.v3-stop-to   { stop-color: var(--v3-to,   #b569ff); }
.v3-stage[aria-expanded="true"] .v3-stage-chev,
.v3-stage.is-open .v3-stage-chev { transform: rotate(180deg); }

/* Material-style smooth height animation via CSS grid 0fr → 1fr.
   No max-height guesswork — fits whatever content is inside. */
.v3-stage-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.v3-stage.is-open .v3-stage-details { grid-template-rows: 1fr; }
.v3-stage-details-inner {
  overflow: hidden;
  /* Fade-in content slightly when opening (uses parent class for trigger). */
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.04s;
}
.v3-stage.is-open .v3-stage-details-inner { opacity: 1; }

.v3-stage-detail {
  padding: 8px 4px 8px 40px; /* indent under the number circle */
}
.v3-stage-detail:first-child { padding-top: 4px; }
.v3-stage-detail:last-child  { padding-bottom: 12px; }
.v3-stage-detail-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.005em;
  color: #1c1426;
  margin-bottom: 3px;
}
.v3-stage-detail-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--v3-from, #7a3fc4);
  flex-shrink: 0;
}
.v3-stage-detail-icon svg { width: 100%; height: 100%; }
.v3-stage-detail-body {
  font-size: 13px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.78);
}

/* Inline pitch diagram — the same SVG the session page renders, miniaturized.
   Dark background reproduces the look the symbols were designed against. */
.v3-stage-diagram {
  margin-top: 4px;
  background: linear-gradient(180deg, #1a1230 0%, #2a1a4a 100%);
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}
.v3-stage-diagram svg {
  width: 100%; height: auto;
  display: block;
}

/* Inline "Tap to view diagram ⌄" toggle — sits on the Activity label line,
   pushed to the right. No background, no border — just gradient-colored text +
   gradient chevron so it reads as a link/affordance without competing visually. */
.v3-stage-detail.v3-detail-collapsible .v3-stage-detail-lbl {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
}
.v3-detail-toggle {
  background: transparent; border: 0; padding: 2px 0 2px 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v3-from, #7a3fc4);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.v3-detail-toggle:active { opacity: 0.7; }
.v3-detail-toggle .v3-detail-chev {
  width: 14px; height: 14px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.v3-detail-collapsible.is-open .v3-detail-toggle .v3-detail-chev { transform: rotate(180deg); }

.v3-detail-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.v3-detail-collapsible.is-open .v3-detail-collapse { grid-template-rows: 1fr; }
.v3-detail-collapse-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.04s;
}
.v3-detail-collapsible.is-open .v3-detail-collapse-inner { opacity: 1; }

/* Inside the v3 hero accordion, normalize the Play / Example buttons so
   they read at the same visual weight. Global .anim-play-btn ships with
   uppercase + 600 weight + letter-spacing (chunky on its own), which made
   it look much larger than the Example link beside it. Scoped overrides
   here only — the rest of the app keeps its original button styling. */
body.home-v3 .v3-stage-detail-body .anim-toggle { margin: 0; }
body.home-v3 .v3-stage-detail-body .drill-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
body.home-v3 .v3-stage-detail-body .example-btns {
  display: contents;   /* let the buttons sit alongside Play in the same flex row */
}
body.home-v3 .v3-stage-detail-body .anim-play-btn,
body.home-v3 .v3-stage-detail-body .anim-example-btn {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 8px;
}
body.home-v3 .v3-stage-detail-body .anim-play-btn svg,
body.home-v3 .v3-stage-detail-body .anim-example-btn svg {
  width: 12px; height: 12px;
}

/* Video / animation link list. */
.v3-vid-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px;
}
.v3-vid-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--v3-from, #7a3fc4);
  text-decoration: none;
  font-weight: 600; font-size: 13px;
  padding: 4px 0;
}
.v3-vid-link:active { opacity: 0.7; }

/* Ask-them-before-they-go list inside Send-Off accordion. */
.v3-stage-ol {
  margin: 4px 0 0; padding: 0 0 0 18px;
  font-size: 13px; line-height: 1.5;
  color: rgba(28, 20, 38, 0.82);
}
.v3-stage-ol li { padding: 2px 0; }

/* Voice block bullets (Coach Says, Guided Questions, Coaching Tip, Reflection,
   Watch For) — same visual treatment for all five since they're peer callouts. */
.v3-voice-list {
  margin: 4px 0 0; padding: 0 0 0 18px;
  font-size: 13px; line-height: 1.5;
  color: rgba(28, 20, 38, 0.82);
}
.v3-voice-list li { padding: 2px 0; }

/* Numbered drill sub-steps (s-steps in the binder). */
.v3-steps-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.v3-step-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
}
.v3-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-from, #7a3fc4), var(--v3-to, #b569ff));
  color: #FFFFFF;
  font-size: 11px; font-weight: 700;
  line-height: 1;
}
.v3-step-text {
  font-size: 13px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.82);
}

/* Multi-paragraph Activity body. */
.v3-stage-detail-body p {
  margin: 0 0 8px;
}
.v3-stage-detail-body p:last-child { margin-bottom: 0; }

/* Spacing between the numbered stages list and the meta rows that follow. */
.v3-meta-list { padding-top: 4px; }

/* Hero nav arrows — small icon buttons grouped between coord and weather. */
.v3-hero-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; }
.v3-nav-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  color: var(--v3-from, #7a3fc4);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.18s ease;
}
.v3-nav-btn svg { width: 14px; height: 14px; }
.v3-nav-btn:active { transform: scale(0.92); }
.v3-nav-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  color: rgba(28, 20, 38, 0.45);
}

/* Coord row '✓' badge when the current session is completed. */
.v3-coord-check {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v3-from, #7a3fc4), var(--v3-to, #b569ff));
  color: #FFFFFF;
  font-size: 10px; font-weight: 700;
  line-height: 1;
}

/* Stale-session nudge — soft tinted bar above the foot when start time has
   passed and the session is still uncompleted. Non-blocking hint. */
.v3-stale-nudge {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  background: rgba(245, 158, 11, 0.10);   /* amber tint */
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(28, 20, 38, 0.78);
}
.v3-stale-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}
.v3-stale-text { flex: 1; }
.v3-stale-cta {
  background: transparent; border: 0; padding: 0;
  font: inherit; font-size: 12px; font-weight: 700;
  color: #b45309;
  cursor: pointer;
  white-space: nowrap;
}
.v3-stale-cta:active { opacity: 0.7; }

/* Right-aligned Complete pill — accent-colored outline, matches Continue ›
   button in the v2 Training card. */
.v3-hero-foot { display: flex; justify-content: flex-end; margin-top: 14px; }

/* Completed-state foot — ✓ badge + Undo + Next pills. */
.v3-hero-foot-done {
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.v3-complete-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--v3-from, #7a3fc4);
}
.v3-complete-badge svg {
  width: 16px; height: 16px;
  padding: 3px;
  background: linear-gradient(135deg, var(--v3-from, #7a3fc4), var(--v3-to, #b569ff));
  color: #FFFFFF;
  border-radius: 50%;
}
.v3-undo-pill, .v3-next-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--v3-from, rgba(122, 63, 196, 0.5));
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 700;
  color: var(--v3-from, #7a3fc4);
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: opacity 0.18s ease, transform 0.12s ease;
}
.v3-next-pill {
  background: linear-gradient(135deg, var(--v3-from, #7a3fc4), var(--v3-to, #b569ff));
  color: #FFFFFF;
  border-color: transparent;
  margin-left: auto;
}
.v3-undo-pill:active, .v3-next-pill:active { transform: scale(0.96); opacity: 0.85; }
.v3-complete-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--v3-from, #7a3fc4);
  border: 1px solid var(--v3-from, rgba(122, 63, 196, 0.5));
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.005em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: background 0.18s ease, transform 0.12s ease;
}
.v3-complete-pill svg { width: 14px; height: 14px; }
.v3-complete-pill:active { transform: scale(0.96); opacity: 0.85; }
.v3-complete-pill.is-done {
  background: linear-gradient(135deg, var(--v3-from, #7a3fc4), var(--v3-to, #b569ff));
  color: #FFFFFF;
  border-color: transparent;
}

/* FAB repositioned to horizontally centered just above the nav bar. */
body.home-v3 .fab-container {
  left: 50%; right: auto;
  transform: translateX(-50%);
}
body.home-v3 .fab {
  background: var(--brand-purple) !important;
}
/* Speed-dial menu — center under the FAB when 3 options stack. */
body.home-v3 .fab-menu {
  right: auto; left: 50%;
  transform: translate(-50%, -8px) scale(0.96);
  align-items: center;
}
body.home-v3 .fab-container.open .fab-menu {
  transform: translate(-50%, 0) scale(1);
}
/* Add a 3rd-child stagger since v3 has 3 actions instead of 2. */
body.home-v3 .fab-container.open .fab-menu .fab-option:nth-child(3) {
  transition-delay: 0.10s;
}
/* Lift further when open since there are 3 options now. */
body.home-v3 .fab-container.open {
  bottom: calc(var(--tab-h) + 184px + env(safe-area-inset-bottom, 0));
}

/* Dark-glass text overrides removed — home-v3 is back on the pastel
   mesh wallpaper, so the default dark text colors (defined in the base
   .v3-hero / .v3-stage-* rules above) apply unchanged. */