/* ============================================================
   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 to every surface-bearing element. The
   :where() wrapper keeps specificity low so existing pressed/
   active/colored states still win. */
body.glass-app :where(
  .card, .card-soft, .dash-card, .qa-card, .find-tile, .month-card,
  .session-card, .drill-card, .tile, .quick-stat, .find-form,
  .builder-meta, .note-item, .rating-summary, .backup-panel,
  .anim-pitch-card, .scorecard-card, .session-fragment .s-block,
  .session-fragment .session-head .meta-row,
  .session-action-btn, .icon-btn, .practice-chip, .chip, .related-chip,
  .filter-trigger, .search, .sheet, .sheet-sticky, .menu-drawer,
  .pick-banner, .session-nav .btn, .assess-tab[aria-pressed="true"],
  .slot, .cover-strip > div, .about-fragment .cover-meta > div,
  .about-fragment .month-meta > div,
  .builder-board, .btn-outline, .btn-ghost, .ghost, .pill,
  input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="date"], textarea, select
) {
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) 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 ──
   Apply to every card class that currently uses var(--surface) +
   var(--border). Exclude .dash-card.primary-card so the daily-
   gradient hero keeps its white-on-color identity. */
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);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  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 ── */

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);
  -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);
}
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.
   Only target the un-pressed state so the existing kind-arrival /
   kind-warmup / kind-technical etc. pressed colors keep their
   semantic identity (each block kind has its own brand color). */
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);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  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;
}

/* ── 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. */
}