/* ============================================================
   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:   48px;     /* 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);

  /* ── Spring-feel easing tokens ──
     --ease-spring overshoots slightly then settles, giving UI elements a
     sense of weight when they "land" (button releases, chevron flips, dot
     re-scales). --ease-out-soft decelerates smoothly without overshoot —
     used for height animations like accordion open/close where we can't
     visibly overshoot 1fr. Durations live in the rules that use them. */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────────────────────── 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;
  /* Lock text-size-adjust so Safari (which can auto-inflate text on small
     screens) and the standalone PWA (which never inflates) render at the
     same sizes. Without this, the home-screen app looks smaller than the
     in-Safari version of the same site. */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
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-4);
  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: 2px 16px env(safe-area-inset-bottom, 0);
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  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: 2px;
  padding: 2px 8px 4px;
  color: var(--text-2);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  position: relative;
  transition: color 0.18s ease;
}
.tabbar .tab .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 28px;
  border-radius: var(--r-pill);
  transition: background 0.18s ease;
}
.tabbar .tab svg {
  width: 20px; height: 20px;
  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); }

/* ── Library drill card (2026-05-26 refresh) ──
   Liquid-glass surface, color-coded kind pill at top-left, title + meta
   lines below. Replaces the older flat row with a thin left border. */
.drill-card {
  display: grid; grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  min-height: 72px;
  cursor: pointer;
  transition: background 0.22s var(--ease-out-soft),
              transform 0.32s var(--ease-spring);
}
.drill-card:active { background: rgba(255, 255, 255, 0.80); transform: scale(0.995); }
/* Stretch the anchor to fill its grid cell so taps anywhere in the left
   column hit the link, not the wrapper's empty padding region. */
.drill-card .dc-body {
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
  align-self: stretch;
}
.drill-card .dc-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
/* Color-coded kind pill — replaces the old left-border line. */
.drill-card .dc-kind {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F5F4EF;
}
.drill-card.kind-arrival   .dc-kind { background: var(--k-arrival); }
.drill-card.kind-warmup    .dc-kind { background: var(--k-warmup); }
.drill-card.kind-technical .dc-kind { background: var(--k-technical); }
.drill-card.kind-game      .dc-kind { background: var(--k-game); }
.drill-card.kind-cooldown  .dc-kind { background: var(--k-cooldown); }
.drill-card.kind-homework  .dc-kind { background: var(--k-homework); color: #1c1426; }
.drill-card.kind-fungame   .dc-kind { background: var(--k-fungame); }

.drill-card .dc-title {
  font-size: 16px; font-weight: 800;
  color: #1c1426;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 4px;
}
.drill-card .dc-meta {
  font-size: 13px;
  color: rgba(28, 20, 38, 0.62);
  line-height: 1.4;
  margin: 0;
}
.drill-card .dc-meta-principles {
  color: rgba(28, 20, 38, 0.78);
  font-weight: 600;
}
.drill-card .dc-session {
  font-size: 12px;
  color: rgba(28, 20, 38, 0.50);
  line-height: 1.4;
  margin: 4px 0 0;
}
.drill-card .star {
  width: var(--hit); height: var(--hit);
  display: flex; align-items: center; justify-content: center;
  color: rgba(28, 20, 38, 0.40);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.drill-card .star[aria-pressed="true"] { color: var(--c-joy); }

/* ── Library type selector (Soccer Drills / Athletic Development) ──
   Two distinct selectable cards in a 2-column grid. Each card has its own
   icon + name + drill count. Active card fills with the cyan→navy gradient
   so the choice reads as "switching libraries," not "filtering." */
.lib-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.lib-type-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 20, 38, 0.10);
  color: #1c1426;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  transition: background 0.28s var(--ease-out-soft),
              border-color 0.28s var(--ease-out-soft),
              transform 0.32s var(--ease-spring),
              color 0.22s var(--ease-out-soft);
}
.lib-type-card:active { transform: scale(0.98); }
.lib-type-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(35, 80, 163, 0.08);
  color: #2350A3;
}
.lib-type-icon svg { width: 20px; height: 20px; }
.lib-type-body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.lib-type-name {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
  color: #1c1426;
}
.lib-type-count {
  font-size: 11px; font-weight: 600;
  color: rgba(28, 20, 38, 0.55);
}
.lib-type-card.is-active {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  border-color: transparent;
  color: #F5F4EF;
  box-shadow: 0 6px 18px rgba(35, 80, 163, 0.22);
}
.lib-type-card.is-active .lib-type-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #F5F4EF;
}
.lib-type-card.is-active .lib-type-name { color: #F5F4EF; }
.lib-type-card.is-active .lib-type-count { color: rgba(255, 255, 255, 0.80); }

/* ── Inline Training Phase chips (horizontal scroll) ── */
.lib-phase-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 calc(-1 * var(--pad)) 14px;
  padding: 2px var(--pad);
  -webkit-overflow-scrolling: touch;
}
.lib-phase-row::-webkit-scrollbar { display: none; }
.lib-phase-chip {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 20, 38, 0.10);
  color: rgba(28, 20, 38, 0.78);
  font: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background 0.22s var(--ease-out-soft),
              color 0.22s var(--ease-out-soft),
              border-color 0.22s var(--ease-out-soft),
              transform 0.28s var(--ease-spring);
}
.lib-phase-chip:active { transform: scale(0.96); }
/* When active, the chip fills with the kind's color so the coach sees at
   a glance which phases are filtered. */
.lib-phase-chip.is-on {
  color: #F5F4EF;
  border-color: transparent;
}
.lib-phase-chip.kind-arrival.is-on   { background: var(--k-arrival); }
.lib-phase-chip.kind-warmup.is-on    { background: var(--k-warmup); }
.lib-phase-chip.kind-technical.is-on { background: var(--k-technical); }
.lib-phase-chip.kind-game.is-on      { background: var(--k-game); }
.lib-phase-chip.kind-cooldown.is-on  { background: var(--k-cooldown); }
.lib-phase-chip.kind-homework.is-on  { background: var(--k-homework); color: #1c1426; }
.lib-phase-chip.kind-fungame.is-on   { background: var(--k-fungame); }
.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 */
/* Banner sits directly on the page background — no surface, no border,
   no left-rail. Just the kicker label and message. Generous bottom margin
   so the search bar below has clear breathing room from the disclaimer. */
.pick-banner {
  display: block;
  padding: 4px 4px 0;
  margin-bottom: 32px;
  color: var(--text);
}
.pick-banner .lbl {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: #2350A3;
  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: 700; }

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

/* Search + filter header — sits directly on the page gradient (no sticky
   surface, no blur, no border). The search input has its own bg + border
   so it still reads clearly against the gradient. Scrolls with the page. */
.library-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0;
  margin: 0 0 var(--s-3);
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.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); }

/* Glossary index — A–Z list view */
.glossary-intro { margin-bottom: var(--s-4); }
.glossary-intro .eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}
.glossary-title {
  font-size: 24px; font-weight: 700;
  color: var(--text); line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.glossary-sub {
  font-size: 16px;
  color: var(--text-2);
  margin-top: 6px; line-height: 1.5;
}
.glossary-search {
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
}
.glossary-search input { font-size: 16px !important; }
/* Bump the "X terms" count text on the glossary page (other pages keep theirs) */
#gresults-meta { font-size: 14px; }

/* Notes-page search input matches the bumped notes type */
#nq { font-size: 19px !important; }

/* Kill the native search-input chrome (white box, inner shadow, rounded
   corners, clear button) so the input becomes a transparent text field
   sitting on the liquid-glass container. */
.glossary-search input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0;
  margin: 0;
  height: auto;
}
.glossary-search input[type="search"]::-webkit-search-decoration,
.glossary-search input[type="search"]::-webkit-search-cancel-button,
.glossary-search input[type="search"]::-webkit-search-results-button,
.glossary-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* View toggle — A–Z vs By category */
.glossary-viewtoggle {
  display: inline-flex;
  padding: 3px;
  margin-bottom: var(--s-3);
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  gap: 2px;
}
.glossary-viewtoggle .vt-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.glossary-viewtoggle .vt-btn[aria-selected="true"] {
  background: var(--text);
  color: #fff;
}

.glossary-az { /* (was padded for the side jump-bar — now removed) */ }

/* Category view */
.cat-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cat-toc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  text-decoration: none;
}
.cat-toc-link:hover {
  background: var(--bg-elev);
  border-color: var(--c-curiosity);
  color: var(--c-curiosity);
}
.cat-toc-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: 999px;
}

/* Category / A–Z section — liquid-glass card chrome on the header (the
   look the user liked). When open, the rounded bottom corners square off
   so the list container below visually continues the card. */
.cat-section { margin-bottom: 8px; }
.cat-section.is-closed { margin-bottom: 6px; }

.cat-header {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  /* Liquid glass */
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  transition: background 0.22s var(--ease-out-soft), transform 0.32s var(--ease-spring);
}
.cat-header:hover { background: rgba(255, 255, 255, 0.80); }
.cat-header:active { background: rgba(255, 255, 255, 0.85); transform: scale(0.998); }
.cat-section.is-open .cat-header {
  background: rgba(255, 255, 255, 0.80);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cat-header .cat-header-name { flex: 1; min-width: 0; }
.cat-header .cat-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
}

.cat-header .cat-chevron {
  color: var(--text-3);
  transition: transform 0.18s ease;
  transform: rotate(-90deg); /* closed → points right */
  flex-shrink: 0;
}
.cat-section.is-open .cat-chevron { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  .cat-header .cat-chevron { transition: none; }
}

/* Open list — continues the glass card with squared top corners. */
.cat-list {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-top: 0;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 4px 14px rgba(80, 40, 120, 0.06);
  padding: 8px;
  margin-top: -1px;
}
.cat-section.is-closed .cat-list { display: none; }

/* ── Term accordion ───────────────────────────────────────────────
   Closed state: liquid-glass card (matches the rest of the app).
   Open state: keeps the glass surface but expanded content inside is
   restyled to mirror the reference (cyan-blue accents, callouts,
   pills, etc.). See the .term-detail rules further down. */
.term-accordion {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: background 0.22s var(--ease-out-soft), transform 0.32s var(--ease-spring);
}
.term-accordion[open] {
  background: rgba(255, 255, 255, 0.80);
}
.term-accordion summary { list-style: none; cursor: pointer; }
.term-accordion summary::-webkit-details-marker { display: none; }

.term-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.term-summary .ts-text { flex: 1; min-width: 0; }
.term-summary .ts-term {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.term-summary .ts-def {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.term-accordion[open] .ts-def {
  display: none; /* hide the snippet once expanded — the full definition shows below */
}
.term-summary .gr-chevron {
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.term-accordion[open] .gr-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .term-summary .gr-chevron { transition: none; }
}

.term-body-wrap {
  padding: 4px 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

/* ── Filter view ── */
.filter-bar {
  margin-bottom: var(--s-3);
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.filter-chip:hover { background: rgba(255, 255, 255, 0.85); }
.filter-chip.is-on {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  box-shadow: 0 2px 6px rgba(31,31,46,0.18);
}
.filter-clear {
  appearance: none;
  font: inherit;
  cursor: pointer;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 0;
  text-decoration: underline;
}
/* .az-section / .az-header inherit from .cat-section / .cat-header — they
   share the same collapsible card look. The single-letter name is bigger
   and centered visually via .az-letter-name. */
.az-letter-name {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.az-list { display: grid; gap: 6px; }

.glossary-row {
  display: block;
  padding: 12px 14px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-md, 12px);
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease, transform 0.12s ease;
}
.glossary-row:active {
  background: rgba(255,255,255,0.85);
  transform: scale(0.995);
}
.glossary-row .gr-term {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.glossary-row .gr-def {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Term detail ───────────────────────────────── */
.term-detail .term-head { margin-bottom: var(--s-4); }
.term-detail .term-head .eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-curiosity); margin-bottom: 6px;
}
.term-detail .term-title {
  font-size: var(--fs-h1); font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}

/* Eyebrow at the top of the expanded body — small uppercase gradient text
   that mirrors the cyan→navy "Advanced Academy" pill in the topbar. */
.term-detail .term-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 8px 0 10px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}

/* The simple definition reads first — plain paragraph (no card), slightly
   larger and darker than body copy. Matches the reference image. */
.term-detail .term-definition {
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #1A1A1A;
  font-weight: 400;
}

/* Section wrappers — cyan→navy uppercase labels, no trailing line. */
.term-section { margin-bottom: 18px; }
.term-section:last-child { margin-bottom: 0; }
.term-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 8px;
  display: block;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.term-detail .term-body {
  font-size: 16px;
  line-height: 1.55;
  color: #6B6B73;
  margin: 0;
}

/* Voice stack — How-to-teach cards (reference style).
   - .voice-say (Cue) → italic quote with a thin purple left border, NO background
   - .voice-ask (For kids) → soft beige callout box
   - .voice-tip (Example) → soft sand callout (same family as For kids)
   - .voice-watch (Watch for) → soft amber callout
   Each card has a small uppercase sub-label inside it. */
.voice-stack { display: grid; gap: 10px; }
.term-detail .voice { padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.term-detail .voice .lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text-2, #6B6B73);
}
.term-detail .voice .lbl svg { display: none; } /* reference uses no icons inside cards */
.term-detail .voice p {
  font-size: 16px;
  line-height: 1.5;
  color: #2A2A30;
  margin: 0;
}

/* Cue: italic serif-style quote with cyan→navy left border, no background.
   The border is solid (a hard gradient on a 3px line reads as a single
   color); we use the cyan end so it complements the eyebrow gradient. */
.term-detail .voice-say {
  padding: 2px 0 2px 14px;
  border-left: 3px solid #18A0CA;
}
.term-detail .voice-say .lbl { color: var(--text-2, #6B6B73); }
.term-detail .voice-say p {
  font-family: Georgia, 'Iowan Old Style', 'Apple Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: #1A1A1A;
}

/* For kids: warm beige callout */
.term-detail .voice-ask {
  background: #EFE7DA;
  border-radius: 12px;
  padding: 14px 16px;
}
.term-detail .voice-ask .lbl { color: #6E5A40; }

/* Example: lighter sand callout (same family) */
.term-detail .voice-tip {
  background: #F1EAD8;
  border-radius: 12px;
  padding: 14px 16px;
}
.term-detail .voice-tip .lbl { color: #6E5A40; }

/* Watch for: soft amber callout */
.term-detail .voice-watch {
  background: #F4E9D2;
  border-radius: 12px;
  padding: 14px 16px;
}
.term-detail .voice-watch .lbl { color: #7A5E2E; }

/* ═══════════════════════════════════════════════════════════════
   Notes section visuals — clean cards, scoped to .notes-* classes
   so they don't bleed into the rest of the app.
   ═══════════════════════════════════════════════════════════════ */

/* Page header: title row with inline "+ New note" CTA on the right */
.notes-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.notes-header-text { flex: 1; min-width: 0; }
.notes-header-eyebrow {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}
.notes-header-title {
  font-size: 27px; font-weight: 700;
  color: var(--text); line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.notes-header-sub {
  font-size: 17px;
  color: var(--text-2);
  margin-top: 4px;
}
.notes-new-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  font: inherit; font-size: 17px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(35, 80, 163, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.notes-new-btn:active { transform: scale(0.98); }

.notes-gear-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  font: inherit;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.12s ease, color 0.12s ease;
}
.notes-gear-btn:hover { background: rgba(255, 255, 255, 0.85); color: var(--text); }
.notes-gear-btn:active { transform: scale(0.95); }

/* Filter pill row — horizontal scroll on small screens */
.notes-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.notes-filter-row::-webkit-scrollbar { display: none; }
.notes-filter-pill {
  appearance: none; cursor: pointer;
  flex-shrink: 0;
  padding: 7px 14px;
  font: inherit; font-size: 17px; font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.notes-filter-pill .pill-count {
  margin-left: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-3);
}
.notes-filter-pill:hover { background: rgba(255, 255, 255, 0.85); }
.notes-filter-pill.is-on {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  box-shadow: 0 2px 6px rgba(31, 31, 46, 0.18);
}
.notes-filter-pill.is-on .pill-count { color: rgba(255, 255, 255, 0.7); }

/* Stack of note cards */
.notes-card-list {
  display: grid;
  gap: 10px;
}

/* Note card — liquid-glass surface + colored left stripe per category */
.note-card {
  position: relative;
  display: block;
  padding: 14px 16px 14px 20px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.note-card:active {
  background: rgba(255, 255, 255, 0.85);
}
.note-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--note-stripe, #6B6B73);
}
.note-card.cat-feedback { --note-stripe: #3B82F6; }
.note-card.cat-positive { --note-stripe: #10B981; }
.note-card.cat-concern  { --note-stripe: #EF4444; }
.note-card.cat-reminder { --note-stripe: #F59E0B; }
.note-card.cat-homework { --note-stripe: #8B5CF6; }

.note-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.note-card-tags {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--note-stripe, var(--text-2));
}
.note-card-date {
  color: var(--text-3);
  flex-shrink: 0;
}
.note-card-body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.note-card-chip {
  display: inline-block;
  padding: 4px 11px;
  font-size: 15px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-2);
  border-radius: 999px;
}
/* Wrapper holds the note card + an optional sibling "View all" link.
   The stage is the swipe surface: contains the card + a delete button
   positioned behind the card on the right edge. */
.note-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.note-card-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden; /* clip the card translate so it doesn't bleed past the stage */
}
.note-card-stage .note-card {
  position: relative;
  z-index: 2;
  transition: transform 0.22s var(--ease-out-soft, cubic-bezier(0.32, 0.72, 0, 1));
  will-change: transform;
  touch-action: pan-y; /* allow vertical scrolling, claim horizontal */
}
.note-card-delete {
  appearance: none;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #fff;
  z-index: 1;
  font: inherit;
}
.note-card-delete:active { background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%); }
.note-card-wrap.is-revealed .note-card-delete {
  box-shadow: -4px 0 12px rgba(220, 38, 38, 0.18);
}
.note-card-sibling-link {
  display: block;
  margin-top: 6px;
  padding: 4px 4px 0;
  font-size: 16px;
  font-weight: 500;
  color: #2350A3;
  text-decoration: none;
}
.note-card-sibling-link:hover { text-decoration: underline; }

/* "By player" view — player summary card */
.player-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.player-row:active { background: rgba(255, 255, 255, 0.85); }
.player-avatar {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(35, 80, 163, 0.22);
}
.player-row-text { flex: 1; min-width: 0; }
.player-row-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.player-row-name .jersey {
  font-weight: 400;
  color: var(--text-3);
  font-size: 17px;
  margin-left: 4px;
}
.player-row-meta {
  font-size: 16px;
  color: var(--text-2);
  margin-top: 2px;
}
.player-row-chev {
  color: var(--text-3);
  flex-shrink: 0;
}

/* Back link used on detail / player history */
.notes-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 17px;
  color: var(--text-2);
  text-decoration: none;
}
.notes-back-link:hover { color: var(--text); }

/* Composer — bigger textarea, cleaner preview card */
.notes-composer-box {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
}
.notes-composer-textarea {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
  padding: 16px 18px;
  resize: vertical;
  outline: none;
  min-height: 140px;
}
.notes-composer-textarea::placeholder { color: var(--text-3); }

.notes-composer-preview {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}
.notes-composer-preview .pv-row { display: flex; gap: 6px; }
.notes-composer-preview .pv-lbl {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  font-weight: 600;
  min-width: 120px;
  padding-top: 1px;
}
.notes-composer-preview .pv-val { flex: 1; color: var(--text); }
.notes-composer-preview .pv-tag {
  display: inline-block;
  padding: 2px 9px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  margin-right: 4px;
  margin-bottom: 2px;
}
.notes-composer-preview .pv-flag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #18A0CA;
  margin-left: 6px;
}

.notes-composer-tip {
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.55;
  margin-bottom: 14px;
}
.notes-composer-tip code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--text-2);
  margin-right: 2px;
}

.notes-composer-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: 16px;
}

/* Note detail — clean stacked layout */
.note-detail {
  display: block;
}
.note-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.note-detail-cat {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}
.note-detail-date { color: var(--text-3); }
.note-detail-raw {
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  font-size: 20px;
  line-height: 1.55;
  color: #1A1A1A;
  margin-bottom: 24px;
  font-style: italic;
}
.note-detail-section { margin-bottom: 18px; }
.note-detail-section:last-of-type { margin-bottom: 0; }
.note-detail-section-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 8px;
  display: block;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.note-detail-section-body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
}
.note-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.note-detail-chip {
  display: inline-block;
  padding: 6px 13px;
  font-size: 16px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border-radius: 999px;
  text-decoration: none;
}
a.note-detail-chip:hover { background: rgba(0, 0, 0, 0.08); color: var(--text); }
.note-detail-actions {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.note-detail-actions .primary { text-align: center; }
.note-detail-delete {
  margin-top: 14px;
  text-align: center;
}

/* Player history — summary panel */
.player-summary {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  border-radius: 16px;
  margin-bottom: 14px;
}
.player-summary-block { margin-bottom: 12px; }
.player-summary-block:last-child { margin-bottom: 0; }
.player-summary-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
  display: block;
}
.player-summary-suggestions {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  padding-left: 18px;
}
.player-summary-footnote {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.5;
}

/* Empty state for the notes pages */
.notes-empty {
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.5;
}
.notes-empty a { color: #2350A3; text-decoration: none; font-weight: 500; }

/* Notes — small modal overlay for new-player / disambiguation prompts */
.notes-prompt-overlay {
  position: fixed; inset: 0;
  background: rgba(28, 20, 38, 0.4);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.notes-prompt-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(28, 20, 38, 0.18);
}
.notes-prompt-card code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Empty state inside a term section (matches reference's bordered "None yet" card) */
.term-detail .term-empty {
  padding: 14px 16px;
  border: 1px dashed #D8D3C8;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2, #6B6B73);
  font-size: 16px;
  text-align: center;
}

/* Related terms — soft gray pills.
   Higher-specificity selector (body.glass-app .term-detail .related-chip)
   needed to win over the global body.glass-app .related-chip rule that
   would otherwise make these chips white-on-white inside the term card. */
.related-strip { display: flex; flex-wrap: wrap; gap: 8px; }
body.glass-app .term-detail .related-chip,
.term-detail .related-chip {
  display: inline-block;
  padding: 7px 14px; min-height: 0;
  font-size: 15px; font-weight: 500;
  background: #ECE9E3;
  color: #2A2A30;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-decoration: none;
}
body.glass-app .term-detail .related-chip:hover,
.term-detail .related-chip:hover {
  background: #E2DED5;
  color: #1A1A1A;
  border-color: rgba(0, 0, 0, 0.10);
}

.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; }
.backup-panel .backup-hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

.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 page (2026-05-26 redesign) ──
   Single liquid-glass card matching the Plan-mode phase card. Source link
   pill on top, kind pill + title + principle chips inside the card, parsed
   detail rows inside the card body. Save + Edit at the bottom. */
.dd-page {
  display: flex; flex-direction: column;
  gap: 14px;
  padding-bottom: 40px;
}
.dd-source {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(35, 80, 163, 0.06);
  border: 1px solid rgba(35, 80, 163, 0.18);
  color: #2350A3;
  text-decoration: none;
  font-size: 12px; font-weight: 600;
  align-self: flex-start;
}
.dd-source strong { color: #1c1426; font-weight: 700; }
.dd-source-pip { color: #2350A3; font-weight: 800; }

/* Reused .sb-phase-card chrome; tweaks for the drill-detail variant. */
.dd-card .dd-head {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding-bottom: 4px;
}
.dd-card .dd-kind {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F5F4EF;
}
.dd-card.kind-arrival   .dd-kind { background: var(--k-arrival); }
.dd-card.kind-warmup    .dd-kind { background: var(--k-warmup); }
.dd-card.kind-warm-up   .dd-kind { background: var(--k-warmup); }
.dd-card.kind-technical .dd-kind { background: var(--k-technical); }
.dd-card.kind-game      .dd-kind { background: var(--k-game); }
.dd-card.kind-cooldown  .dd-kind { background: var(--k-cooldown); }
.dd-card.kind-cool-down .dd-kind { background: var(--k-cooldown); }
.dd-card.kind-homework  .dd-kind { background: var(--k-homework); color: #1c1426; }
.dd-card.kind-fungame   .dd-kind { background: var(--k-fungame); }
.dd-card .dd-title {
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c1426;
  line-height: 1.15;
  margin: 0 16px 8px;
  padding: 4px 0 0;
}
.dd-card .dd-pips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 16px 12px;
}
.dd-pip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(35, 80, 163, 0.08);
  color: #2350A3;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.dd-pip-touch   { background: rgba(255, 199, 73, 0.20); color: #8a5300; }
.dd-pip-courage { background: rgba(255, 90, 95, 0.18);  color: #a31621; }
.dd-pip-joy     { background: rgba(126, 87, 194, 0.18); color: #5d3aa3; }
.dd-card .dd-body { padding-top: 4px; }

/* Bottom action row — Save + (optionally) Edit. */
.dd-actions {
  display: flex; gap: 10px;
  margin-top: 8px;
}
.dd-save-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  border: 0;
  color: #F5F4EF;
  font: inherit;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(35, 80, 163, 0.20);
  transition: background 0.32s var(--ease-out-soft),
              transform 0.34s var(--ease-spring);
}
.dd-save-btn:active { transform: scale(0.97); }
.dd-save-btn.is-saved {
  background: rgba(35, 80, 163, 0.10);
  color: #2350A3;
  box-shadow: none;
}
.dd-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(35, 80, 163, 0.30);
  color: #2350A3;
  font: inherit;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.dd-edit-btn:active { background: rgba(35, 80, 163, 0.08); }

/* Inside the drill-detail page, strip the Glossary strip of all card
   chrome — no liquid glass, no border, no colored rail. Just the label
   and chips floating directly over the page gradient. Specificity bumped
   with body.glass-app to defeat any later glass-card cascade. */
.dd-page .glossary-strip,
body.glass-app .dd-page .glossary-strip {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 4px;
}
.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;
}

/* ════════════════════════════════════════════════════════════
   Curriculum Training page (2026-05-26 redesign).
   All 10 months as equal cards in a vertical list. Current month
   gets a gradient border + "Now training" pill so it stands out
   without dominating the layout. Replaces the old hero+season+list.
   ════════════════════════════════════════════════════════════ */
.curr-page {
  display: flex; flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}
.curr-head {
  padding: 4px 4px 0;
}
.curr-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}
.curr-title {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c1426;
  line-height: 1.1;
  margin: 6px 0 8px;
}
.curr-summary {
  font-size: 16px;
  color: rgba(28, 20, 38, 0.62);
}
/* Subtle nudge below the title pointing coaches at the program-overview
   accordion block sitting below the months list. */
.curr-hint {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 15px; font-weight: 600;
  color: #2350A3;
  letter-spacing: -0.005em;
}

/* Vertical list of month cards. */
.curr-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.curr-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  text-decoration: none;
  color: #1c1426;
  position: relative;
  transition: background 0.22s var(--ease-out-soft),
              transform 0.32s var(--ease-spring);
}
.curr-row:active { transform: scale(0.99); background: rgba(255, 255, 255, 0.78); }

/* Left tile — "MONTH 01" stacked. */
.curr-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  width: 72px; height: 72px;
  border-radius: 14px;
  background: rgba(35, 80, 163, 0.08);
  color: #2350A3;
}
.curr-tile-kicker {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.curr-tile-num {
  font-size: 27px; font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Right side — theme + subhead + tiny progress + count. */
.curr-body { min-width: 0; }
.curr-row-title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em;
  color: #1c1426;
  margin: 0 0 4px;
  line-height: 1.2;
}
.curr-row-desc {
  font-size: 14px; line-height: 1.4;
  color: rgba(28, 20, 38, 0.62);
  margin: 0 0 8px;
}
.curr-row-foot {
  display: flex; align-items: center;
  gap: 10px;
}
.curr-segs {
  display: flex; gap: 3px;
  flex: 1;
  min-width: 0;
}
.curr-seg {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(28, 20, 38, 0.10);
}
.curr-seg.is-done {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
}
.curr-row-count {
  font-size: 12px; font-weight: 700;
  color: rgba(28, 20, 38, 0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Section divider above the program-overview accordion stack. Sits below
   the months list so the year-level reference content reads as "more
   about the program" rather than competing with the primary nav. */
.curr-overview-label {
  margin: 24px 4px 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(28, 20, 38, 0.10);
}
.curr-overview-label-kicker {
  display: block;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2350A3;
  margin-bottom: 4px;
}
.curr-overview-label-note {
  font-size: 17px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.62);
  margin: 0 0 6px;
}

/* CURRENT month — gradient border + tiny "Now training" pill on top right. */
.curr-row.is-current {
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    linear-gradient(90deg, #18A0CA, #2350A3);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 22px rgba(35, 80, 163, 0.14);
}
.curr-row.is-current .curr-tile {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  box-shadow: 0 4px 10px rgba(35,80,163,0.20);
}
.curr-pill-now {
  position: absolute;
  top: 12px; right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* COMPLETE month — muted look, checkmark in tile. */
.curr-row.is-done {
  opacity: 0.78;
}
.curr-row.is-done .curr-tile {
  background: rgba(35, 80, 163, 0.04);
  color: rgba(35, 80, 163, 0.55);
}
.curr-row.is-done .curr-tile-num { display: none; }
.curr-row.is-done .curr-tile-check {
  font-size: 29px; font-weight: 800;
  color: #2350A3;
  line-height: 1;
}
.curr-tile-check { display: none; }
.curr-row.is-done .curr-tile-check { display: block; }
.curr-row.is-done .curr-tile-kicker { color: rgba(35, 80, 163, 0.55); }

/* ════════════════════════════════════════════════════════════
   Per-month page (2026-05-26 redesign).
   Lede + collapsible overview blocks + week-grouped sessions.
   Replaces the meta-cells / flat lists layout.
   ════════════════════════════════════════════════════════════ */
.mv-page {
  display: flex; flex-direction: column;
  gap: 14px;
  padding-bottom: 40px;
}

/* Header — eyebrow + big theme title + lede paragraph. */
.mv-head {
  padding: 4px 4px 4px;
}
.mv-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}
.mv-title {
  font-size: 34px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c1426;
  line-height: 1.05;
  margin: 6px 0 10px;
}
.mv-title .accent {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mv-lede {
  font-size: 17px; line-height: 1.55;
  color: rgba(28, 20, 38, 0.78);
  margin: 0;
}

/* Collapsible overview section — accordion pattern (matches Plan mode).
   "Monthly goals" and "Coach's note" each get their own block. */
.mv-section-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  overflow: hidden;
  scroll-margin-top: 64px;
}
.mv-section-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mv-section-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(35, 80, 163, 0.10);
  color: #2350A3;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.mv-section-icon svg { width: 16px; height: 16px; }
.mv-section-title {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.005em;
  color: #1c1426;
  margin: 0;
}
.mv-section-count {
  font-size: 14px; font-weight: 600;
  color: rgba(28, 20, 38, 0.55);
  margin-left: 6px;
}
.mv-section-chev {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(28,20,38,0.45);
  transition: transform 0.42s var(--ease-spring), color 0.28s var(--ease-out-soft);
}
.mv-section-chev svg { width: 100%; height: 100%; }
.mv-section-card.is-expanded .mv-section-chev {
  transform: rotate(180deg);
  color: #2350A3;
}
.mv-section-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-out-soft);
}
.mv-section-card.is-expanded .mv-section-body-wrap {
  grid-template-rows: 1fr;
}
.mv-section-body {
  overflow: hidden;
  padding: 0 16px 16px 16px;
  font-size: 17px; line-height: 1.55;
  color: rgba(28, 20, 38, 0.85);
}
.mv-section-body p { margin: 0 0 10px; }
.mv-section-body p:last-child { margin-bottom: 0; }

/* ── Program-overview content blocks (Training page year-level cards) ──
   These styles render inside .mv-section-body so they live inside the
   collapsible accordion chrome already defined above. */
.po-stack {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

/* Philosophy: 6 principle "pills" arranged in a tight grid. */
.po-pill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.po-pill {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(35, 80, 163, 0.04);
  border: 1px solid rgba(35, 80, 163, 0.10);
}
.po-pill h3 {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.005em;
  color: #2350A3;
  margin: 0 0 4px;
}
.po-pill p {
  font-size: 16px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.78);
  margin: 0;
}

/* Three-pillar cards (Touch / Courage / Joy). Stacked vertically. */
.po-letter-grid {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.po-letter-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
/* Letter pill spans BOTH rows so the title and body sit side-by-side with it
   instead of below an empty column. */
.po-letter-card > .po-letter {
  grid-row: 1 / span 2;
  align-self: start;
}
.po-letter-card h3 {
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.005em;
  color: #1c1426;
  margin: 0;
  align-self: center;
}
.po-letter-card p {
  font-size: 16px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.78);
  margin: 0;
}
.po-letter {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  font-size: 22px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}

/* TCQJ assessment cards — letter + label, baseline/target rows, how line. */
.po-tcqj-grid {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.po-tcqj-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
}
.po-tcqj-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.po-tcqj-head h3 {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #1c1426;
  margin: 0;
}
.po-tcqj-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.po-tcqj-cell {
  padding: 10px;
  border-radius: 10px;
  background: rgba(35, 80, 163, 0.05);
}
.po-tcqj-lbl {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2350A3;
  margin-bottom: 4px;
}
.po-tcqj-cell p {
  font-size: 15px; line-height: 1.4;
  color: #1c1426;
  margin: 0;
}
.po-tcqj-how {
  font-size: 15px; line-height: 1.45;
  color: rgba(28, 20, 38, 0.72);
  padding-top: 8px;
  border-top: 1px solid rgba(28, 20, 38, 0.08);
}
.po-tcqj-how-lbl {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2350A3;
  margin-right: 4px;
}

/* Numbered "Our promise" list — same vibe as monthly goals but two-line items. */
.po-promise {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.po-promise li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
}
.po-promise-num {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
}
.po-promise-text {
  font-size: 16px; line-height: 1.5;
  color: #1c1426;
  padding-top: 3px;
}
.po-promise-text strong {
  display: block;
  font-weight: 800;
  color: #1c1426;
  margin-bottom: 2px;
}

/* Goals list — ordered list with cyan numbered chips. */
.mv-goals {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 0; padding: 0;
  list-style: none;
}
.mv-goals li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
}
.mv-goals-num {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.mv-goals-text {
  font-size: 16px; line-height: 1.5;
  color: #1c1426;
  padding-top: 3px;
}

/* Week groups — header + nested practice cards. */
.mv-week {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
/* Extra breathing room between consecutive week blocks so the curriculum
   arc reads as distinct chapters instead of one long stack. */
.mv-week + .mv-week {
  margin-top: 24px;
}
.mv-week-head {
  padding: 4px 4px 0;
}
.mv-week-kicker {
  display: inline-block;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2350A3;
  padding: 0;
  background: transparent;
  margin-bottom: 8px;
}
.mv-week-arc {
  font-size: 15px; line-height: 1.5;
  color: rgba(28, 20, 38, 0.72);
  margin: 0;
}

/* Practice card — nested under a week. */
.mv-practice {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 12px rgba(80, 40, 120, 0.05);
  text-decoration: none;
  color: #1c1426;
  transition: background 0.22s var(--ease-out-soft),
              transform 0.32s var(--ease-spring);
}
.mv-practice:active { transform: scale(0.99); background: rgba(255, 255, 255, 0.72); }
.mv-practice-tile {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(35, 80, 163, 0.08);
  color: #2350A3;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.05;
}
.mv-practice.is-done .mv-practice-tile {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
}
.mv-practice-body { min-width: 0; }
.mv-practice-title {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #1c1426;
  line-height: 1.2;
  margin: 0 0 2px;
}
.mv-practice-tagline {
  font-size: 14px; line-height: 1.35;
  color: rgba(28, 20, 38, 0.62);
  margin: 0;
}
.mv-practice-chev {
  font-size: 20px; line-height: 1;
  color: rgba(28, 20, 38, 0.40);
  flex-shrink: 0;
}
.mv-practice-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(35, 80, 163, 0.12);
  color: #2350A3;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* 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 {
  /* ─── BACKGROUND EXPERIMENT ─────────────────────────────────────────
     New "aurora pop" wallpaper — deeper, more saturated pastels so the
     liquid-glass cards have richer colors to refract through.

     TO REVERT: comment out the ACTIVE block below and uncomment the
     ORIGINAL block beneath it.
     ───────────────────────────────────────────────────────────────── */

  /* ACTIVE — pastel mesh (original) */
  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;

  /* TEST — neutral off-white (swap comment to enable) */
  /*
  background: #F4F4F6;
  background-attachment: fixed;
  */

  /* EXPERIMENT — aurora pop (swap comment to enable) */
  /*
  background:
    radial-gradient(70% 60% at 15% 5%,  #ff9ec1 0%, transparent 60%),
    radial-gradient(60% 60% at 90% 15%, #ffc97a 0%, transparent 55%),
    radial-gradient(70% 70% at 85% 90%, #8fd9d2 0%, transparent 60%),
    radial-gradient(80% 90% at 5% 95%,  #b89aff 0%, transparent 65%),
    linear-gradient(160deg, #fff1f6 0%, #eef0ff 55%, #f0f8f6 100%);
  background-attachment: fixed;
  */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.glass-app .search,
body.glass-app .filter-trigger {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 4px 12px rgba(80, 40, 120, 0.06);
}
/* Higher-specificity active-state for the Filters button so it overrides
   the glass-app surface above. Cyan→navy gradient with white text matches
   the rest of the app's "active" treatments (mode toggle, etc.). */
body.glass-app .filter-trigger.on {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(35, 80, 163, 0.20);
}
body.glass-app .filter-trigger.on svg { color: #FFFFFF; }
body.glass-app .filter-trigger.on .count {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
body.glass-app .search:focus-within {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 3px rgba(122, 63, 196, 0.18);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Overlay sits BEHIND the input now. Its text is invisible — only the
   token background pills show through to highlight what the parser
   detected. The user reads what they actually typed from the input. */
.nl-overlay {
  position: absolute; inset: 0;
  padding: 0;
  display: flex; align-items: center;
  font: inherit; font-size: var(--fs-body);
  color: transparent;
  letter-spacing: inherit;
  white-space: pre;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
/* Input now renders normal visible text on top of the overlay. */
.nl-input {
  position: relative; z-index: 2;
  width: 100%; border: 0; outline: 0;
  background: transparent;
  font: inherit; font-size: var(--fs-body);
  color: #1c1426;
  -webkit-text-fill-color: #1c1426;
  caret-color: #1c1426;
  letter-spacing: inherit;
}
/* Hide native search clear button — it conflicts with the overlay. */
.nl-input::-webkit-search-cancel-button { display: none; }
.nl-input::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); }

/* Token highlight pills — overlay text is transparent now (input renders
   real text on top), so only the background tint shows under each token. */
.nl-tok-theme      { background: rgba(251,146, 60,0.28); color: transparent; }
.nl-tok-age        { background: rgba( 16,185,129,0.28); color: transparent; }
.nl-tok-duration   { background: rgba( 14,165,233,0.28); color: transparent; }
.nl-tok-equipment  { background: rgba(167,139,250,0.30); color: transparent; }
.nl-tok-players    { background: rgba(245,158, 11,0.28); color: transparent; }
.nl-tok-difficulty { background: rgba(244, 63, 94,0.28); color: transparent; }
.nl-tok-theme, .nl-tok-age, .nl-tok-duration,
.nl-tok-equipment, .nl-tok-players, .nl-tok-difficulty {
  border-radius: 5px;
  padding: 1px 4px;
  margin: 0 -1px;
  font-weight: 500;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Clean empty-state block that replaces the noisy tile grids when the
   Library has no filters or query applied. Sits below the Quick Links row
   and gives the coach a calm prompt to search or open Filters. */
.lib-landing-empty {
  margin: 28px 4px 12px;
  padding: 24px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  text-align: center;
}
.lib-landing-empty-title {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: #1c1426;
  margin-bottom: 8px;
}
.lib-landing-empty-msg {
  font-size: 14px; line-height: 1.5;
  color: rgba(28, 20, 38, 0.62);
}
.lib-landing-empty-msg strong {
  color: #2350A3;
  font-weight: 700;
}

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

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

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

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

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

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

/* Topbar chrome — hide back/forward arrows AND the hamburger app-wide.
   The injected .v3-switch-program gear (data-route-injected="true")
   takes the hamburger's place on the right side of the topbar on every
   page. !important wins over the various legacy `body.session-X #nav-back
   { display: inline-flex }` rules further down in this file. */
#nav-back,
#nav-forward,
.hamburger { display: none !important; }
/* Hide the FAB entirely on home-v3 per ship cut — Build session can move
   to a More tab later. */
body.home-v3 .fab-container { display: none !important; }

/* New topbar wordmark — logo + name + gradient "Academy" pill.
   Applied app-wide because the topbar is shared chrome. */
.topbar-brand {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0;
  color: inherit; font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar-logo {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.topbar-name {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em;
  color: #1c1426;
}
.topbar-pill {
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
}

/* Top-right control (now a settings gear). Opens the program switch sheet
   on tap. Transparent — just the icon on top of the page background. */
.v3-switch-program {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #1c1426;
  padding: 0;
}
.v3-switch-program:active { transform: scale(0.94); }
.v3-switch-gear {
  width: 24px; height: 24px;
  color: #2350A3;
}

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

.v3-program-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -16px 40px -8px rgba(15, 23, 42, 0.22);
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 210;
}
.v3-program-sheet.is-open { transform: translateY(0); }
.v3-sheet-grab {
  width: 36px; height: 4px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  margin: 6px auto 14px;
}
.v3-sheet-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 4px 12px;
}
/* Optional second line below .v3-sheet-title — used by the example-editor
   to show "M1 W1 P1 · Warm-Up · Sole Roll Turn" so the coach knows which
   drill they're editing. */
.v3-sheet-sub {
  font-size: 14px; font-weight: 600;
  color: #1c1426;
  padding: 0 4px 14px;
  margin-top: -4px;
}

/* ── Example-video editor sheet ───────────────────────────
   Bottom-sheet editor for managing per-drill example video URLs.
   Same chrome as .v3-program-sheet so motion + backdrop feel identical. */
.v3-vid-editor-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -16px 40px -8px rgba(15, 23, 42, 0.22);
  transform: translateY(100%);
  transition: transform 0.34s var(--ease-spring);
  z-index: 210;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.v3-vid-editor-sheet.is-open { transform: translateY(0); }

.v3-vid-editor-list {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.v3-vid-editor-row {
  display: grid;
  grid-template-columns: 26px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.v3-vid-editor-num {
  font-size: 13px; font-weight: 700;
  color: #2350A3;
  text-align: center;
}
.v3-vid-editor-url {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(28, 20, 38, 0.15);
  color: #1c1426;
  font: inherit;
  font-size: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.v3-vid-editor-url:focus {
  outline: none;
  border-color: #2350A3;
  box-shadow: 0 0 0 3px rgba(35, 80, 163, 0.15);
}
.v3-vid-editor-del {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(220, 38, 38, 0.08);
  border: 0;
  border-radius: 999px;
  color: #b91c1c;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.32s var(--ease-spring);
}
.v3-vid-editor-del:active { transform: scale(0.92); background: rgba(220, 38, 38, 0.18); }

.v3-vid-editor-add {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(35, 80, 163, 0.06);
  border: 1px dashed rgba(35, 80, 163, 0.35);
  color: #2350A3;
  font: inherit;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}
.v3-vid-editor-add:active { background: rgba(35, 80, 163, 0.12); }

.v3-vid-editor-restore {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: rgba(28, 20, 38, 0.55);
  font: inherit;
  font-size: 13px; font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 14px;
}
.v3-vid-editor-restore[hidden] { display: none; }

.v3-vid-editor-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(28, 20, 38, 0.08);
}
.v3-vid-editor-cancel,
.v3-vid-editor-save {
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  font: inherit;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.32s var(--ease-spring);
}
.v3-vid-editor-cancel {
  background: rgba(28, 20, 38, 0.06);
  color: #1c1426;
}
.v3-vid-editor-save {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  box-shadow: 0 4px 12px rgba(35, 80, 163, 0.20);
}
.v3-vid-editor-cancel:active,
.v3-vid-editor-save:active { transform: scale(0.97); }

/* ── Edit-videos affordance (inside .sb-phase-detail-body "Watch" rows) ── */
.v3-vid-edit-row {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.v3-vid-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(35, 80, 163, 0.25);
  color: #2350A3;
  font: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background 0.18s ease, transform 0.32s var(--ease-spring);
}
.v3-vid-edit-btn:active { background: rgba(35, 80, 163, 0.10); transform: scale(0.97); }
.v3-vid-edit-btn svg { flex-shrink: 0; }
.v3-vid-overridden {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(35, 80, 163, 0.12);
  color: #2350A3;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.v3-program-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 8px; border: 0; background: transparent;
  border-radius: 14px; text-align: left; cursor: pointer;
}
.v3-program-item:active { background: rgba(0,0,0,0.04); }

/* Thin divider + utility links inside the program-switcher sheet (Backup,
   etc.). Same row layout as .v3-program-item so it visually nests cleanly. */
.v3-sheet-divider {
  height: 1px;
  background: rgba(28, 20, 38, 0.10);
  margin: 6px 8px;
}
.v3-sheet-link {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 8px;
  border-radius: 14px; text-decoration: none;
  color: #1c1426;
}
.v3-sheet-link:active { background: rgba(0,0,0,0.04); }
.v3-sheet-link-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(35, 80, 163, 0.08);
  color: #2350A3;
}
.v3-sheet-link-icon svg { width: 18px; height: 18px; }
.v3-sheet-link-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.v3-sheet-link-name { font-size: 16px; font-weight: 600; color: var(--text); }
.v3-sheet-link-meta { font-size: 12px; color: var(--text-3); }
.v3-program-logo {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.v3-program-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.v3-program-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.v3-program-name { font-size: 16px; font-weight: 600; color: var(--text); }
.v3-program-meta { font-size: 12px; color: var(--text-3); }
.v3-program-check { width: 20px; height: 20px; color: var(--brand-purple); }
.v3-program-item:not(.is-current) .v3-program-check { display: none; }

/* Page layout — greeting + tall hero filling the viewport. */
.v3-page { display: flex; flex-direction: column; gap: 10px; }

/* PWA standalone mode renders content ~10% smaller than the same site in
   Safari (Safari quietly auto-inflates text on small screens; the home-
   screen app never does). Scale Home up to close that gap so the standalone
   experience matches what the coach previewed in Safari. */
@media (display-mode: standalone) {
  .v3-page { zoom: 1.1; }
}
.v3-greet { margin-top: 4px; }
.v3-greet h1 {
  font-size: 34px; line-height: 1.02; font-weight: 800;
  letter-spacing: -0.025em; margin: 4px 0 4px;
  white-space: nowrap;
}

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

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

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

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

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

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

/* ── NumberChip — reusable component-style block ────────────
   Cream rounded-square chip with a two-digit number. Toggles between
   a soft cream surface (collapsed, gradient digit) and a filled cyan→navy
   gradient (expanded, off-white digit). */
.v3-stage-num {
  width: 44px; height: 36px;
  border-radius: 12px;
  background: #F5F4EF;
  border: 0;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(28, 20, 38, 0.08);
  transition: all 180ms ease;
}
/* Inner span — the numeral. Gradient-clipped via background-clip:text. */
.v3-stage-num-text {
  background: linear-gradient(90deg, #18A0CA 0%, #2350A3 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 180ms ease;
}
/* EXPANDED — solid gradient fill, off-white digit on top. */
.v3-stage.is-open .v3-stage-num {
  background: linear-gradient(90deg, #18A0CA 0%, #2350A3 100%);
  box-shadow: 0 4px 10px rgba(35, 80, 163, 0.20);
}
.v3-stage.is-open .v3-stage-num-text {
  background: none;
  color: #F5F4EF;
  -webkit-text-fill-color: #F5F4EF;
}
.v3-stage-label-wrap {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.v3-stage-label {
  display: inline-block;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  width: max-content;
  max-width: 100%;
  /* Gradient TEXT via background-clip:text — no pill, no border, no bg.
     Same cyan→navy gradient as the upcoming-event card + the number
     circle, so labels and numbers share one identity. */
  color: var(--v3-to, #2350A3);
  background: linear-gradient(90deg, var(--v3-from, #18A0CA), var(--v3-to, #2350A3));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Activity title beneath the phase name — black, regular weight. */
.v3-stage-subhead {
  font-size: 13px; font-weight: 400;
  color: rgba(28, 20, 38, 0.78);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.v3-stage-mins {
  font-size: 13px; font-weight: 500;
  color: rgba(28, 20, 38, 0.55);
  white-space: nowrap;
}
.v3-stage-chev {
  width: 16px; height: 16px;
  color: rgba(28, 20, 38, 0.45);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sub-toggle chevrons stroke url(#v3-chev-grad). The defs live inside .v3-hero
   so the --v3-from / --v3-to CSS vars cascade into the stops. */
.v3-defs { position: absolute; pointer-events: none; overflow: hidden; }
.v3-stop-from { stop-color: var(--v3-from, #7a3fc4); }
.v3-stop-to   { stop-color: var(--v3-to,   #b569ff); }
.v3-stage[aria-expanded="true"] .v3-stage-chev,
.v3-stage.is-open .v3-stage-chev { transform: rotate(180deg); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ────────────────────────────────────────────────────────────
   Upcoming-event card — sits above the hero. Placeholder for the
   next-any-event from iCal (practice OR game). Houses the weather
   widget since weather scopes to whatever event is chronologically next.
   Style matches the reference: eyebrow + bold title + description +
   pill action button + small duration chip + weather. White text on a
   left→right cyan→navy gradient. */
.v3-event-card {
  position: relative;
  border-radius: 22px;
  padding: 20px 20px 20px;
  color: #FFFFFF;
  background: linear-gradient(90deg, #18A0CA 0%, #2350A3 100%);
  box-shadow:
    0 10px 28px rgba(35, 80, 163, 0.22),
    0 2px 6px rgba(35, 80, 163, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
/* Top row: "Up Next" pill + event eyebrow (Practice · date · time) inline. */
.v3-event-toprow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
/* Small "NEXT SESSION · M1 · W2 · P3" label above the eyebrow — answers
   "what is this card?" + which session at a glance. */
.v3-event-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F5F4EF;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 14px;
  border-radius: 999px;
  line-height: 1.3;
  flex-shrink: 0;
}
/* Plain-text M·W·P meta above the title — sits inside the content block as
   quiet context. No pill chip; the title is the visual focal point. */
.v3-event-mwp {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}
.v3-event-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  min-width: 0;
}
/* Weather row moved up — sits between the eyebrow and the title,
   directly tied to the event meta above it. */
.v3-event-weather-top {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.v3-event-weather-top .v3-weather {
  color: rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
}
.v3-event-weather-top .v3-weather-icon { color: rgba(255, 255, 255, 0.85); }
.v3-event-weather-top .v3-weather-temp,
.v3-event-weather-top .v3-weather-rain,
.v3-event-weather-top .v3-weather-sun { color: #FFFFFF; }
.v3-event-weather-top .v3-weather-sep { color: rgba(255, 255, 255, 0.40); }
.v3-event-weather-top .v3-weather-for { color: rgba(255, 255, 255, 0.70); }
.v3-event-title {
  font-size: 28px; line-height: 1.1; font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: #FFFFFF;
}
.v3-event-desc {
  font-size: 15px; line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
}
.v3-event-actions {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 0;
}
/* Primary Start button — white pill with dark text + play icon. */
.v3-event-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #122E73;
  border: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.v3-event-cta svg { width: 14px; height: 14px; }
.v3-event-cta:active { transform: scale(0.96); }
/* Compact Month card on Home — own layout so it stays tight enough to fit
   in the iPhone viewport alongside the event card. MONTH label above the
   big 01 numeral; theme + subhead on the right; progress + foot row below. */
.v3-month-card {
  padding: 14px 18px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 24px rgba(80, 40, 120, 0.10);
}
/* Top row — "Now training" eyebrow on the left, "Month X of Y" meta right. */
.v3-month-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.v3-month-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  /* Same source as Training-page .v2-eyebrow-accent — they stay in sync. */
  color: var(--today-grad-from, #18A0CA);
}
.v3-month-meta {
  font-size: 14px;
  color: rgba(28, 20, 38, 0.62);
}
/* Two-column body that stretches so MONTH's top edge sits flush with the
   title's top edge and 01's bottom sits flush with the last subhead line. */
.v3-month-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.v3-month-num-wrap {
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1;
}
/* "Month" — same display font family/weight as the 01 below, just smaller.
   Solid black gives the strongest contrast against the cyan eyebrow above. */
.v3-month-num-kicker {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 2px;
  color: #1c1426;
}
.v3-month-num {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 0.85;
  color: #1c1426;
}
.v3-month-info { min-width: 0; }
.v3-month-title {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em;
  color: #1c1426;
  margin: 0 0 6px;
  line-height: 1.15;
}
.v3-month-desc {
  font-size: 15px; line-height: 1.4;
  color: rgba(28, 20, 38, 0.62);
  margin: 0;
}
.v3-month-bar {
  margin-top: 14px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.v3-month-bar-inner {
  display: flex; gap: 3px;
  height: 8px;
}
/* Re-uses .v2-hbar-seg (defined elsewhere) for individual segments. */
.v3-month-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.v3-month-foot-left {
  font-size: 14px;
  color: rgba(28, 20, 38, 0.62);
}
.v3-month-cta {
  font-size: 15px; font-weight: 700;
  /* Match the Training-page "Continue ›" pill exactly (same CSS var). */
  color: var(--today-grad-from, #18A0CA);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--today-grad-from, #18A0CA);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.v3-month-cta:active { opacity: 0.85; }

/* Informational card for the next non-practice iCal event. Below the Month
   card on Home. Multi-row so the location can wrap and the full event info
   fits on screen. Awareness-only — tap opens the Ollie event in a new tab. */
.v3-other-card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  text-decoration: none;
  color: #1c1426;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.v3-other-card:active { opacity: 0.92; transform: scale(0.995); }

/* Top row: kind chip + date/time + chevron. */
.v3-other-head {
  display: flex; align-items: center; gap: 12px;
}
.v3-other-kind-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.14em;
}
.v3-other-icon {
  font-size: 14px;
  display: inline-flex;
  line-height: 1;
}
.v3-other-when {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600;
  color: rgba(28, 20, 38, 0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-other-chev {
  color: rgba(28, 20, 38, 0.45);
  font-size: 20px; line-height: 1;
  flex-shrink: 0;
}

/* Body rows. */
.v3-other-title {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: #1c1426;
  line-height: 1.2;
}
.v3-other-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.4;
  color: rgba(28, 20, 38, 0.72);
}
.v3-other-row-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.v3-other-row-text {
  flex: 1; min-width: 0;
}

/* Weather strip at the bottom of the card — same metrics as the Practice
   card. Sits in a soft divider to separate from the event meta above. */
.v3-other-weather {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid rgba(28, 20, 38, 0.08);
  font-size: 14px;
  color: rgba(28, 20, 38, 0.75);
}
.v3-other-weather .v3-weather-icon { width: 16px; height: 16px; color: rgba(28, 20, 38, 0.62); }
.v3-other-weather .v3-weather-temp,
.v3-other-weather .v3-weather-rain,
.v3-other-weather .v3-weather-sun { font-weight: 600; color: rgba(28, 20, 38, 0.85); }
.v3-other-weather .v3-weather-sep { color: rgba(28, 20, 38, 0.35); }

/* Month + Season progress strip — sits below the event card on Home.
   Two rows: current month progress + overall season progress, each with a
   gradient-filled progress bar. */
.v3-progress-strip {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 24px rgba(80, 40, 120, 0.10);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
}
.v3-prog-row {
  display: flex; flex-direction: column;
  gap: 6px;
}
.v3-prog-meta {
  display: flex; justify-content: space-between; align-items: baseline;
}
.v3-prog-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #2350A3;
}
.v3-prog-detail {
  font-size: 12px; font-weight: 500;
  color: rgba(28, 20, 38, 0.62);
}
.v3-prog-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(28, 20, 38, 0.10);
  overflow: hidden;
}
.v3-prog-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  transition: width 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stale-state upcoming card — grayed surface, neutral palette so it reads
   as "pending resolution" instead of "next thing to do". */
.v3-event-stale {
  background: linear-gradient(90deg, #5a6172 0%, #3d4252 100%);
  box-shadow:
    0 10px 28px rgba(40, 45, 60, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.v3-event-kicker-gray {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(245, 244, 239, 0.90);
}
.v3-event-stale-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 244, 239, 0.70);
  margin-bottom: 10px;
}
.v3-event-cta-gray {
  background: rgba(255, 255, 255, 0.92);
  color: #2c3344;
}

/* Secondary "Review" button — opens the session in Plan mode (B-layout)
   so the coach can swap drills, take notes, and skim the whole thing. */
.v3-event-review {
  display: inline-flex; align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.v3-event-review:active { transform: scale(0.96); opacity: 0.85; }
/* Duration chip — translucent glass, rounded. */
.v3-event-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px; font-weight: 600;
  margin-left: auto;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.v3-event-chip svg { width: 12px; height: 12px; }
/* Weather block inside the card — sits in a soft white-tint band so it
   reads as scoped-to-this-event without competing with the title. */
.v3-event-weather {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.v3-event-weather .v3-weather {
  color: rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
}
.v3-event-weather .v3-weather-icon { color: rgba(255, 255, 255, 0.85); }
.v3-event-weather .v3-weather-temp,
.v3-event-weather .v3-weather-rain,
.v3-event-weather .v3-weather-sun { color: #FFFFFF; }
.v3-event-weather .v3-weather-sep { color: rgba(255, 255, 255, 0.40); }
.v3-event-weather .v3-weather-for { color: rgba(255, 255, 255, 0.70); }

/* ────────────────────────────────────────────────────────────
   Session Detail PROTOTYPE A — Sectioned Read-Through
   Sticky header + every phase as its own expanded glass card.
   ──────────────────────────────────────────────────────────── */
body.session-a #nav-back,
body.session-a #nav-forward { display: inline-flex; }

.sa-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }

.sa-hero {
  padding: 18px 18px 14px;
  border-radius: 22px;
  position: sticky;
  top: 8px;
  z-index: 5;
}
.sa-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #2350A3;
  margin-bottom: 6px;
}
.sa-hero-title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: #1c1426;
}
.sa-hero-tag {
  font-size: 14px; line-height: 1.4;
  color: rgba(28,20,38,0.65);
  margin: 0 0 14px;
}
.sa-hero-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sa-action-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.70), rgba(255,255,255,0.55)) padding-box,
    linear-gradient(90deg, #18A0CA, #2350A3) border-box;
  color: #2350A3;
  font: inherit;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.sa-action-pill.is-done {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  border-color: transparent;
}
.sa-action-link {
  font-size: 12px; font-weight: 600;
  color: #2350A3;
  text-decoration: none;
  margin-left: auto;
}
.sa-action-link:active { opacity: 0.7; }

.sa-card { padding: 14px 16px; }
.sa-card-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(28,20,38,0.08);
  margin-bottom: 10px;
}
.sa-card-num {
  width: 44px; height: 36px;
  border-radius: 12px;
  background: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(28,20,38,0.08);
  border: 1px solid rgba(28,20,38,0.04);
}
.sa-card-num-text {
  background: linear-gradient(90deg, #18A0CA 0%, #2350A3 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sa-card-titles { min-width: 0; }
.sa-card-title {
  font-size: 16px; font-weight: 700;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}
.sa-card-sub {
  font-size: 12px; font-weight: 400;
  color: rgba(28,20,38,0.62);
  margin-top: 2px;
}
.sa-card-mins {
  font-size: 12px; font-weight: 600;
  color: rgba(28,20,38,0.55);
}
.sa-card-body { display: flex; flex-direction: column; gap: 10px; }
.sa-detail { padding: 6px 0; }
.sa-detail-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.005em;
  color: #1c1426;
  margin-bottom: 4px;
}
.sa-detail-icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #2350A3;
  flex-shrink: 0;
}
.sa-detail-icon svg { width: 100%; height: 100%; }
.sa-detail-body {
  font-size: 13px; line-height: 1.45;
  color: rgba(28,20,38,0.82);
}
.sa-detail-body p { margin: 0 0 6px; }
.sa-detail-body p:last-child { margin-bottom: 0; }
.sa-detail-body ul,
.sa-detail-body ol { margin: 4px 0 0; padding-left: 18px; line-height: 1.5; }

/* ────────────────────────────────────────────────────────────
   Session Detail PROTOTYPE B — Single-Phase Focus
   Phase tabs + progress dots on top; one card visible; nav at bottom.
   ──────────────────────────────────────────────────────────── */
body.session-b #nav-back,
body.session-b #nav-forward { display: inline-flex; }

.sb-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 100px; }

/* Unified glass container that visually scopes the session — hero + dots +
   tabs all live inside, so the tabs read as "phases within this session"
   instead of looking like top-level navigation. */
.sb-session-frame {
  padding: 16px 14px 12px;
  border-radius: 22px;
}
.sb-session-frame > .sb-hero { padding: 0; }

.sb-hero {
  padding: 4px 0 0;
}
/* "Phase 1 of 9 · Session Prep" sub-line — explicitly tells the coach what
   they're navigating within. */
.sb-phase-of {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  margin: 4px 0 10px;
}
.sb-phase-of-kicker {
  font-weight: 700;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sb-phase-of-sep   { color: rgba(28,20,38,0.30); }
.sb-phase-of-label { color: rgba(28,20,38,0.65); font-weight: 600; }
.sb-hero-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.sb-hero-meta { flex: 1; min-width: 0; }
.sb-hero-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}
.sb-hero-title {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c1426;
  line-height: 1.15;
}
.sb-complete-mini {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid #2350A3;
  background: transparent;
  color: #2350A3;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.sb-complete-mini.is-done {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  border-color: transparent;
}

/* Progress dots — compact 4px circles, one per phase. */
.sb-dots {
  display: flex; gap: 6px; padding: 0 2px 8px;
}
.sb-dot {
  flex: 1; height: 4px; max-width: 32px;
  border-radius: 999px;
  background: rgba(28,20,38,0.15);
  border: 0; padding: 0;
  cursor: pointer;
  transition: background 0.18s ease;
}
.sb-dot.is-active {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
}

/* Phase tabs — horizontally scrollable chip row. */
.sb-tabs {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 4px 0 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tab {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(28,20,38,0.10);
  color: rgba(28,20,38,0.62);
  font: inherit;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.sb-tab.is-active {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  border-color: transparent;
}

/* Single focused card. Generous padding since it's the only one visible. */
.sb-card { padding: 18px 18px 20px; }
.sb-card-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.sb-card-num {
  width: 44px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 10px rgba(35,80,163,0.20);
}
.sb-card-num-text { color: #F5F4EF; }
.sb-card-titles { min-width: 0; }
.sb-card-title {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.015em;
  color: #1c1426;
  line-height: 1.15;
}
.sb-card-sub {
  font-size: 13px; font-weight: 400;
  color: rgba(28,20,38,0.62);
  margin-top: 2px;
}
.sb-card-mins {
  font-size: 13px; font-weight: 700;
  color: #2350A3;
}
/* Plan-mode swap-drill affordance — small inline link above the body. */
.sb-card-actions {
  display: flex; justify-content: flex-end;
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(28, 20, 38, 0.08);
  margin-bottom: 12px;
}
.sb-swap-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(35, 80, 163, 0.25);
  color: #2350A3;
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.sb-swap-link svg { width: 12px; height: 12px; }
.sb-swap-link:active { opacity: 0.7; transform: scale(0.97); }

.sb-card-body { display: flex; flex-direction: column; gap: 14px; }
.sb-detail {}
.sb-detail-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.005em;
  color: #1c1426;
  margin-bottom: 5px;
}
.sb-detail-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #2350A3;
  flex-shrink: 0;
}
.sb-detail-icon svg { width: 100%; height: 100%; }
.sb-detail-body {
  font-size: 14px; line-height: 1.5;
  color: rgba(28,20,38,0.85);
}
.sb-detail-body p { margin: 0 0 8px; }
.sb-detail-body p:last-child { margin-bottom: 0; }
.sb-detail-body ul,
.sb-detail-body ol { margin: 4px 0 0; padding-left: 18px; line-height: 1.55; }

/* Bottom nav — fixed at the bottom edge inside the page padding. */
.sb-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  padding-top: 4px;
}
.sb-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(28,20,38,0.10);
  color: #1c1426;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.sb-nav-btn:disabled { opacity: 0.35; cursor: default; }
.sb-nav-next { justify-content: flex-end; text-align: right; }
.sb-nav-arrow {
  font-size: 20px; font-weight: 700; color: #2350A3;
  line-height: 1;
}
.sb-nav-lbl { display: flex; flex-direction: column; min-width: 0; }
.sb-nav-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}
.sb-nav-name {
  font-size: 13px; font-weight: 700;
  color: #1c1426;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-nav-link {
  align-self: center;
  font-size: 11px; font-weight: 600;
  color: #2350A3;
  text-decoration: none;
  padding: 6px 8px;
}

/* ════════════════════════════════════════════════════════════
   Plan-mode accordion redesign (2026-05-26).
   Vertical list of phase cards, one expanded at a time. Replaces
   the older single-phase-swipe layout. New class names live alongside
   the legacy .sb-* styles above (which are no longer rendered but
   left in place for now).
   ════════════════════════════════════════════════════════════ */

/* Top row — segmented Plan/Run toggle on the left. */
.sb-top {
  display: flex;
  align-items: center;
  padding: 4px 4px 8px;
}
.sb-segmented {
  display: inline-flex;
  padding: 3px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(28,20,38,0.10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.sb-segmented-btn {
  padding: 7px 18px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: rgba(28,20,38,0.65);
  font: inherit;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.32s var(--ease-out-soft),
              color 0.28s var(--ease-out-soft),
              transform 0.32s var(--ease-spring);
}
.sb-segmented-btn:active { transform: scale(0.95); }
.sb-segmented-btn.is-active {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  box-shadow: 0 2px 6px rgba(35, 80, 163, 0.20);
}

/* Session metadata strip — M·W·P eyebrow + theme title. */
.sb-meta {
  padding: 8px 4px 14px;
}
.sb-meta-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
  margin-bottom: 6px;
}
.sb-meta-title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #1c1426;
  line-height: 1.1;
  margin: 0;
}

/* Accordion list — one card per phase. */
.sb-accordion {
  display: flex; flex-direction: column;
  gap: 10px;
}

/* Phase card — liquid glass surface, collapsed by default. */
.sb-phase-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(80, 40, 120, 0.06);
  overflow: hidden;
  /* Shadow + scroll offset transition with the same spring as the body
     animation so the card feels like a cohesive object that rises when
     it expands. Scroll-margin-top means scrollIntoView lands just below
     the topbar, not flush with the screen top. */
  transition: box-shadow 0.38s var(--ease-out-soft);
  scroll-margin-top: 64px;
}
.sb-phase-card.is-expanded {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 22px rgba(35, 80, 163, 0.12);
}

/* Header — clickable, doubles as the collapse/expand affordance. */
.sb-phase-head {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.sb-phase-card.is-expanded .sb-phase-head {
  padding-bottom: 8px;
}
.sb-phase-num {
  width: 40px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(35,80,163,0.10), rgba(35,80,163,0.18));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em;
  color: #2350A3;
}
.sb-phase-card.is-expanded .sb-phase-num {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  box-shadow: 0 4px 10px rgba(35,80,163,0.18);
}
.sb-phase-titles { min-width: 0; }
.sb-phase-title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em;
  color: #1c1426;
  margin: 0;
  line-height: 1.15;
}
.sb-phase-sub {
  font-size: 14px; font-weight: 400;
  color: rgba(28,20,38,0.60);
  margin: 2px 0 0;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-phase-mins {
  font-size: 13px; font-weight: 700;
  color: #2350A3;
  white-space: nowrap;
}
.sb-phase-chev {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(28,20,38,0.45);
  /* Spring curve overshoots slightly past 180deg then settles — the
     chevron "snaps" rather than glides. */
  transition: transform 0.42s var(--ease-spring), color 0.28s var(--ease-out-soft);
}
.sb-phase-chev svg { width: 100%; height: 100%; }
.sb-phase-card.is-expanded .sb-phase-chev {
  transform: rotate(180deg);
  color: #2350A3;
}

/* Body wrap — CSS Grid 0fr→1fr trick for height animation. Can't overshoot
   1fr so we use a smooth out-soft curve at a longer duration instead. */
.sb-phase-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-out-soft);
}
.sb-phase-card.is-expanded .sb-phase-body-wrap {
  grid-template-rows: 1fr;
}
.sb-phase-body {
  overflow: hidden;
  padding: 0 16px 16px;
}
.sb-phase-card.is-expanded .sb-phase-body {
  /* Ensure the subhead has room to fully show once expanded. */
  white-space: normal;
}
.sb-phase-card.is-expanded .sb-phase-sub {
  white-space: normal;
}

/* Swap-drill affordance inside an expanded phase. */
.sb-phase-swap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(35, 80, 163, 0.25);
  color: #2350A3;
  font: inherit;
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.sb-phase-swap svg { width: 12px; height: 12px; }
.sb-phase-swap:active { opacity: 0.7; transform: scale(0.97); }

/* "Swapped" indicator pill on the phase header — tells the coach this
   drill isn't the original curriculum drill even when the card is collapsed.
   Inline with the title; small enough not to compete visually. */
.sb-phase-swapped {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(35, 80, 163, 0.12);
  color: #2350A3;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Detail rows — uppercase tiny label + body content. */
.sb-phase-detail {
  margin-bottom: 14px;
}
.sb-phase-detail:last-child { margin-bottom: 0; }
.sb-phase-detail-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #2350A3;
  margin-bottom: 6px;
}
.sb-phase-detail-icon {
  width: 13px; height: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #2350A3;
  flex-shrink: 0;
}
.sb-phase-detail-icon svg { width: 100%; height: 100%; }
.sb-phase-detail-body {
  font-size: 16px; font-weight: 400;
  line-height: 1.5;
  color: #1c1426;
}
.sb-phase-detail-body p { margin: 0 0 8px; }
.sb-phase-detail-body p:last-child { margin-bottom: 0; }
.sb-phase-detail-body ul,
.sb-phase-detail-body ol { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }

/* Voice callouts (Coach Says / Guided Question / Coaching Tip / Reflection /
   Watch For) — embedded quote block. Tinted background + icon label is
   enough visual differentiation; the gradient left rail was experimented
   with and removed (felt visually heavy alongside the other accent uses
   of the gradient). */
.sb-callout {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(35, 80, 163, 0.04);
}
.sb-callout:last-child { margin-bottom: 0; }
.sb-callout-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: #2350A3;
  margin-bottom: 6px;
}
.sb-callout-icon {
  font-size: 14px;
  line-height: 1;
}
.sb-callout-body {
  font-size: 16px; line-height: 1.55;
  color: #1c1426;
  font-style: italic;
}
.sb-callout-body p { margin: 0 0 6px; }
.sb-callout-body p:last-child { margin-bottom: 0; }
.sb-callout-body ul,
.sb-callout-body ol { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }

/* Mark-complete button at the bottom of the accordion. */
.sb-mark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 18px;
  margin-top: 8px;
  border-radius: 16px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  border: 0;
  color: #F5F4EF;
  font: inherit;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(35, 80, 163, 0.20);
}
.sb-mark.is-done {
  background: rgba(35, 80, 163, 0.10);
  color: #2350A3;
  box-shadow: none;
}
.sb-mark svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Spring-back release on tap — feels like rubber, not a hard snap. */
.sb-mark {
  transition: background 0.32s var(--ease-out-soft),
              color 0.28s var(--ease-out-soft),
              box-shadow 0.32s var(--ease-out-soft),
              transform 0.34s var(--ease-spring);
}
.sb-mark:active { transform: scale(0.96); }
.sb-phase-swap {
  transition: background 0.28s var(--ease-out-soft),
              transform 0.32s var(--ease-spring),
              opacity 0.18s ease;
}
.sb-phase-num {
  transition: background 0.34s var(--ease-out-soft),
              color 0.32s var(--ease-out-soft),
              box-shadow 0.34s var(--ease-out-soft);
}

/* ════════════════════════════════════════════════════════════
   Run-mode redesign (2026-05-26).
   Horizontal carousel of phase cards. Native scroll-snap so a swipe
   feels like flipping a deck of cards. ~16px peek of the next card on
   the right edge so swipe-ability is unmistakable. Pagination dots
   below. "Session complete" button appears only on the last phase.
   Reuses .sb-phase-card / .sb-phase-detail / .sb-callout from Plan mode
   so the in-card hierarchy stays identical across modes.
   ════════════════════════════════════════════════════════════ */

/* Page wrapper — same structure as Plan, but a different padding-bottom
   because Run has no sticky tabbar visible (tabs still render globally;
   this is just the inner layout). */
.sd-page-v2 {
  display: flex; flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

/* Horizontal carousel — flex row with scroll-snap. The negative margins
   bleed the carousel to the screen edges so its inner padding becomes
   the peek zone on each side. With 36px carousel padding and a 12px gap,
   ~24px of each adjacent card is visible at snap rest (24 = 36 − 12).
   That signals "you can swipe forward AND back" without any UI chrome. */
.sd-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 36px;
  /* Snap position aligns to 36px from the viewport's left edge — keeps
     card starts in the same spot as the visual padding so the first card
     anchors cleanly with no extra scroll on initial paint. */
  scroll-padding-left: 36px;
  margin: 0 -16px;
  /* Touch-feel tuning so a flick scrolls one card at a time on iOS. */
  -webkit-overflow-scrolling: touch;
}
.sd-carousel::-webkit-scrollbar { display: none; }
/* Each card spans viewport-minus-2×peek. */
.sd-carousel > .sb-phase-card {
  flex: 0 0 calc(100vw - 72px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Run mode cards are always expanded (no collapse — coach needs to see
   everything at a glance on the sideline). Force the body open regardless
   of the is-expanded class. */
.sd-carousel > .sb-phase-card .sb-phase-body-wrap {
  grid-template-rows: 1fr;
}
.sd-carousel > .sb-phase-card .sb-phase-chev {
  display: none;
}
.sd-carousel > .sb-phase-card .sb-phase-head {
  cursor: default;
  padding-bottom: 8px;
}
/* Always-active num pill in Run mode so the current phase reads as "live". */
.sd-carousel > .sb-phase-card .sb-phase-num {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  box-shadow: 0 4px 10px rgba(35,80,163,0.18);
}

/* Pagination dots — one per phase, current one bigger + gradient. */
.sd-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 7px;
  padding: 10px 0 4px;
}
.sd-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(28, 20, 38, 0.18);
  cursor: pointer;
  transition: background 0.32s var(--ease-out-soft),
              transform 0.42s var(--ease-spring);
}
/* Invisible padding zone — gives a ~28px tap target around each 7px dot
   so coaches don't have to be precise on the sideline. */
.sd-dot::before {
  content: '';
  position: absolute;
  inset: -10px;
}
.sd-dot.is-active {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  transform: scale(1.5);
}

/* "Session complete" full-width button — only visible on the last phase
   (controlled by JS adding/removing .is-visible). Same visual treatment as
   the Plan-mode .sb-mark so coaches recognize it as "the done button." */
.sd-mark-row {
  display: none;
  padding: 6px 4px 0;
}
.sd-mark-row.is-visible { display: block; }

/* ── Curriculum-adjacent prev/next session navigation ──
   Two pill buttons at the bottom of any session detail view so the coach
   can flip to the previous or next session without going back to the Month
   overview. Uses the canonical /session/MM/slug URL so the current mode
   (Plan or Run) carries through. */
.sb-session-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sb-session-nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 20, 38, 0.10);
  color: #1c1426;
  font: inherit;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  min-height: 56px;
  transition: background 0.28s var(--ease-out-soft),
              transform 0.32s var(--ease-spring);
}
.sb-session-nav-btn:active {
  background: rgba(35, 80, 163, 0.08);
  transform: scale(0.98);
}
.sb-session-nav-btn-prev { justify-content: flex-start; }
.sb-session-nav-btn-next { justify-content: flex-end; text-align: right; }
.sb-session-nav-arrow {
  font-size: 18px; font-weight: 700;
  color: #2350A3;
  line-height: 1;
  flex-shrink: 0;
}
.sb-session-nav-lbl {
  display: flex; flex-direction: column;
  min-width: 0;
}
.sb-session-nav-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(28, 20, 38, 0.55);
}
.sb-session-nav-name {
  font-size: 13px; font-weight: 700;
  color: #1c1426;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Empty slot when at an edge — keeps the grid layout but hides the visual. */
.sb-session-nav-empty {
  visibility: hidden;
}

/* Plan-mode "Planning complete →" button — visually distinct from the
   Run-mode "Session complete" so the coach knows tapping advances them
   into Run mode instead of marking the practice done. Outlined pill,
   not a filled gradient. */
.sb-plan-done {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 18px;
  margin-top: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1.5px solid #2350A3;
  color: #2350A3;
  font: inherit;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background 0.32s var(--ease-out-soft),
              transform 0.34s var(--ease-spring);
}
.sb-plan-done:active {
  background: rgba(35, 80, 163, 0.08);
  transform: scale(0.98);
}
.sb-plan-done svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   Session Detail PROTOTYPE C — Timeline / Running Clock
   Width-proportional phase bar; tap any segment to focus its content.
   ──────────────────────────────────────────────────────────── */
body.session-c #nav-back,
body.session-c #nav-forward { display: inline-flex; }

.sc-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }

.sc-hero { padding: 4px 4px 0; }
.sc-hero-row { display: flex; align-items: flex-start; gap: 12px; }
.sc-hero-meta { flex: 1; min-width: 0; }
.sc-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}
.sc-hero-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  color: #1c1426;
  line-height: 1.15; margin: 4px 0 0;
}
.sc-complete-mini {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid #2350A3;
  background: transparent;
  color: #2350A3;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.sc-complete-mini.is-done {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  border-color: transparent;
}

.sc-timeline-wrap {
  padding: 14px 12px 12px;
  border-radius: 18px;
}
.sc-timeline-ruler {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
  margin-bottom: 8px;
}
.sc-timeline {
  display: flex;
  gap: 3px;
  height: 56px;
}
.sc-seg {
  flex-grow: 1; min-width: 0;
  background: rgba(255,255,255,0.55);
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 4px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: all 180ms ease;
}
.sc-seg-mins {
  display: block;
  font-size: 13px; font-weight: 800;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sc-seg-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(28,20,38,0.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-seg.is-active {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(35,80,163,0.24);
}
.sc-seg.is-active .sc-seg-mins,
.sc-seg.is-active .sc-seg-label {
  color: #F5F4EF;
  -webkit-text-fill-color: #F5F4EF;
}
.sc-extras { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sc-extra {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(28,20,38,0.10);
  color: rgba(28,20,38,0.65);
  font: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.sc-extra.is-active {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  border-color: transparent;
}

.sc-card { padding: 16px 16px 18px; }
.sc-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(28,20,38,0.08);
  margin-bottom: 12px;
}
.sc-card-clock {
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  min-width: 64px;
}
.sc-clock-kicker {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  opacity: 0.85;
}
.sc-clock-time {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sc-card-titles { min-width: 0; }
.sc-card-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sc-card-title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.015em;
  color: #1c1426;
  line-height: 1.15;
  margin-top: 2px;
}
.sc-card-mins {
  font-size: 13px; font-weight: 700;
  color: #2350A3;
  font-variant-numeric: tabular-nums;
}
.sc-card-body { display: flex; flex-direction: column; gap: 12px; }
.sc-detail-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  color: #1c1426;
  margin-bottom: 4px;
}
.sc-detail-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #2350A3;
  flex-shrink: 0;
}
.sc-detail-icon svg { width: 100%; height: 100%; }
.sc-detail-body {
  font-size: 14px; line-height: 1.5;
  color: rgba(28,20,38,0.82);
}
.sc-detail-body p { margin: 0 0 6px; }
.sc-detail-body p:last-child { margin-bottom: 0; }
.sc-detail-body ul,
.sc-detail-body ol { margin: 4px 0 0; padding-left: 18px; line-height: 1.5; }

/* Cross-prototype nav row (used by C and D). */
.sc-cross, .sd-cross {
  display: inline-flex; align-self: center; gap: 4px;
  margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sc-cross a, .sd-cross a {
  padding: 4px 10px; border-radius: 999px;
  text-decoration: none;
  color: #2350A3;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(28,20,38,0.10);
}
.sc-cross > span, .sd-cross > span {
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
}

/* ────────────────────────────────────────────────────────────
   Session Detail PROTOTYPE D — Story / Card-Swipe
   Full-bleed gradient cards, tap edges to navigate. On-field UX.
   ──────────────────────────────────────────────────────────── */
body.session-d #nav-back,
body.session-d #nav-forward { display: inline-flex; }

.sd-page {
  position: relative;
  min-height: calc(100svh - 120px);
  display: flex; flex-direction: column;
  padding-bottom: 24px;
}

/* Story-style progress segments at the very top. */
.sd-segs {
  display: flex; gap: 3px;
  padding: 0 2px 12px;
}
.sd-seg {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(28,20,38,0.15);
}
.sd-seg.is-past   { background: linear-gradient(90deg, #18A0CA, #2350A3); }
.sd-seg.is-active { background: linear-gradient(90deg, #18A0CA, #2350A3); box-shadow: 0 0 0 1px rgba(35,80,163,0.18); }

.sd-meta {
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px;
  margin-bottom: 12px;
}
.sd-meta-eyebrow {
  flex: 1;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}
.sd-complete-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1.5px solid #2350A3;
  color: #2350A3;
  font: inherit;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.sd-complete-mini.is-done {
  background: linear-gradient(135deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  border-color: transparent;
}

.sd-card {
  flex: 1;
  /* Liquid glass — same surface language as Plan + the rest of the app.
     What differentiates Run from Plan is layout (one phase, big, focused),
     not color. Progress segments still cap the page above so the coach
     always knows where they are in the session. */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  padding: 28px 22px 24px;
  color: #1c1426;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 1px 0 0 rgba(150, 220, 255, 0.34),
    inset -1px 0 0 rgba(255, 160, 220, 0.22),
    0 12px 32px rgba(80, 40, 120, 0.12),
    0 2px 6px rgba(80, 40, 120, 0.06);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.sd-card-num {
  font-size: 56px; font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.sd-card-label {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1c1426;
  margin: 0 0 4px;
}
.sd-card-sub {
  font-size: 14px; font-weight: 500;
  color: rgba(28, 20, 38, 0.68);
  margin-bottom: 4px;
}
.sd-card-mins {
  display: inline-block;
  margin-top: 4px; margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #F5F4EF;
}
.sd-card-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px;
}
.sd-detail {}
.sd-detail-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(28, 20, 38, 0.62);
  margin-bottom: 4px;
}
.sd-detail-icon {
  width: 14px; height: 14px;
  color: #2350A3;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sd-detail-icon svg { width: 100%; height: 100%; }
.sd-detail-body {
  font-size: 14px; line-height: 1.5;
  color: rgba(28, 20, 38, 0.85);
}
.sd-detail-body p { margin: 0 0 6px; }
.sd-detail-body p:last-child { margin-bottom: 0; }
.sd-detail-body ul, .sd-detail-body ol {
  margin: 4px 0 0; padding-left: 18px;
  line-height: 1.5;
}
.sd-detail-body strong { color: #1c1426; }

/* Voice-callout block — Coach Says, Coaching Tip, Guided Questions,
   Reflection, Watch For. Light-glass tile with a gradient left rail.
   Stands out from regular details without being heavy. */
.sd-callout {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.55)) padding-box,
    linear-gradient(180deg, #18A0CA, #2350A3) border-box;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0 12px 12px 0;
  padding: 12px 14px 11px;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 4px 14px rgba(35, 80, 163, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.sd-callout .sd-detail-lbl {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #2350A3;
  margin-bottom: 6px;
}
.sd-callout .sd-detail-icon {
  width: 16px; height: 16px;
  color: #2350A3;
}
.sd-callout .sd-detail-body {
  color: #1c1426;
  font-size: 14px;
}
.sd-callout .sd-detail-body ul,
.sd-callout .sd-detail-body ol {
  padding-left: 16px;
}
.sd-callout .sd-detail-body li { padding: 2px 0; }
.sd-callout .sd-detail-body strong { color: #1c1426; }

/* Invisible tap zones — Instagram-style "tap left/right to navigate". */
.sd-tap {
  position: absolute;
  top: 60px; bottom: 80px;
  width: 25%;
  background: transparent; border: 0;
  cursor: pointer;
  z-index: 2;
}
.sd-tap-prev { left: 0; }
.sd-tap-next { right: 0; }
.sd-tap[disabled] { cursor: default; }

/* Bottom control bar — explicit arrows + center label, in case taps aren't obvious. */
.sd-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  padding: 10px 4px 0;
}
.sd-ctrl {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(28,20,38,0.10);
  color: #2350A3;
  font-size: 22px; font-weight: 700; line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.sd-ctrl:disabled { opacity: 0.30; cursor: default; }
.sd-ctrl-center {
  text-align: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(28,20,38,0.55);
}

/* Material-style enter animation for swipe-navigated session cards.
   The card briefly rises into view (eased translate + fade) when re-rendered
   after a swipe-commit, so the new phase doesn't snap into place abruptly. */
@keyframes sessionCardEnter {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.sb-card, .sd-card {
  animation: sessionCardEnter 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ────────────────────────────────────────────────────────────
   Universal session phase navigation — three patterns wired in parallel:
     1. Swipe       — touch the card and swipe horizontally (no UI)
     2. Edge arrows — small floating chips pinned vertically-centered
     3. Sticky bar  — floats above the bottom tab bar with prev/done/next
   Coach can use whichever is most natural and we'll trim later.
   ──────────────────────────────────────────────────────────── */

/* 2. Floating edge arrows — pinned to the viewport, always reachable. */
.session-edge-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 56px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #2350A3;
  font-size: 26px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 50;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px rgba(35, 80, 163, 0.12);
  -webkit-tap-highlight-color: transparent;
}
.session-edge-arrow:disabled { opacity: 0.25; cursor: default; }
.session-edge-arrow:active:not(:disabled) { transform: translateY(-50%) scale(0.93); }
.session-edge-prev { left: 6px;  }
.session-edge-next { right: 6px; }

/* 3. Sticky bottom nav bar — floats above the tab bar, always in thumb reach. */
.session-stickybar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom, 0));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 24px rgba(35, 80, 163, 0.14);
  z-index: 49;
}
.session-stickybtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: #1c1426;
  font: inherit;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.session-stickybtn:disabled { opacity: 0.35; cursor: default; }
.session-stickynext { justify-content: flex-end; text-align: right; }
.session-stickyglyph { font-size: 18px; line-height: 1; color: #2350A3; }
.session-stickylbl {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-stickymid {
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  border: 0;
  color: #F5F4EF;
  font: inherit;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.session-stickymid:active { transform: scale(0.96); opacity: 0.85; }

/* Reserve bottom space inside session pages so content doesn't hide under
   the sticky nav bar. */
body.session-a .sa-page,
body.session-b .sb-page,
body.session-c .sc-page,
body.session-d .sd-page { padding-bottom: calc(var(--tab-h) + 80px + env(safe-area-inset-bottom, 0)); }

/* ────────────────────────────────────────────────────────────
   Plan / Run mode toggle — used in the canonical /session view's
   header (B-layout in Plan, D-layout in Run).
   ──────────────────────────────────────────────────────────── */
.mode-toggle {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 20, 38, 0.10);
  padding: 2px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.mode-toggle-btn {
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(28, 20, 38, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 180ms ease;
}
.mode-toggle-btn.is-active {
  background: linear-gradient(90deg, #18A0CA, #2350A3);
  color: #F5F4EF;
  box-shadow: 0 2px 6px rgba(35, 80, 163, 0.20);
}