/* Base = the warm-white / grey / orange scheme is the DEFAULT (see the light block below,
   applied by the bootstrap script). This :root is the DARK variant, retuned from gold to orange. */
:root {
  --bg: #17130f;
  --surface: #201a15;
  --surface-2: #271f18;
  --surface-3: #322820;
  --border: #3a2f25;
  --border-soft: #2b221b;
  --text: #f6f2ec;
  --muted: #b3a99c;
  --faint: #7e7264;
  --accent: #22a06b;
  --accent-2: #2eb87d;
  --accent-bright: #2eb87d;
  --green: #3ad07a;
  --green-dim: rgba(58,208,122,0.14);
  --red: #ff6b5d;
  --red-dim: rgba(255,107,93,0.14);
  --warn: #e5a13d;
  --warn-strong: #f0b45e;
  --warn-dim: rgba(229,161,61,0.14);
  --blue: #7aa2ff;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --shadow: 0 18px 50px -20px rgba(0,0,0,0.7);
  --shadow-sm: 0 6px 18px -8px rgba(0,0,0,0.6);
  --r: 16px;
  --r-sm: 10px;
  /* semantic tokens (themeable) */
  --text-body: #e0d8cd;
  --on-accent: #08130d;
  --accent-strong: #6ee7b7;
  --label: #b3a99c;
  --grid-line: rgba(255,255,255,0.028);
  --topbar-bg: rgba(23,19,15,0.72);
  --bar-bg: rgba(23,19,15,0.92);
}

/* DEFAULT theme: warm white, greys, one orange accent (Harvey / Cursor register). */
:root[data-theme="light"] {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f4f3f0;
  --surface-3: #eae8e2;
  --border: #e4e2db;
  --border-soft: #efeee9;
  --text: #1a1917;
  --text-body: #3c3a36;
  --muted: #6b6862;
  --faint: #767268;
  --accent: #157347;
  --accent-2: #0f5c39;
  --accent-strong: #0e5533;
  --accent-bright: #2f9d6a;
  --green: #157f3c;
  --green-dim: rgba(21,127,60,0.10);
  --red: #c0392b;
  --red-dim: rgba(192,57,43,0.09);
  --warn: #d97706;
  --warn-strong: #92610a;
  --warn-dim: rgba(217,119,6,0.10);
  --blue: #2563eb;
  --on-accent: #ffffff;
  --shadow: 0 24px 60px -30px rgba(26,25,23,0.22);
  --shadow-sm: 0 8px 20px -12px rgba(26,25,23,0.14);
  --label: #6b6862;
  --grid-line: rgba(26,25,23,0.045);
  --topbar-bg: rgba(251,250,248,0.82);
  --bar-bg: rgba(251,250,248,0.92);
}
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, .wordmark { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: 'SOFT' 0, 'WONK' 0; font-weight: 520; letter-spacing: -0.015em; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(21,115,71,0.3); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 14px clamp(16px, 4vw, 44px);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand .logo { flex: none; }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.wordmark span { color: var(--accent); }

.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tab {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  border: 0; background: transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.is-active { color: var(--on-accent); background: var(--accent); }
.tab-caret { width: 13px; height: 13px; flex: none; opacity: .7; transition: transform .15s; }

.nav-item { position: relative; }
.nav-item:hover .tab-caret, .nav-item:focus-within .tab-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px; box-shadow: var(--shadow); z-index: 55;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; gap: 1px;
  color: var(--text); font-size: 13.5px; font-weight: 600; font-family: var(--font-sans);
}
.nav-menu-item:hover { background: var(--surface-2); color: var(--accent-strong); }
.nav-menu-sub { color: var(--faint); font-size: 11.5px; font-weight: 500; }
@media (max-width: 860px) { .nav-menu { display: none; } }

/* ---------- Global search ---------- */
.nav-search { position: relative; margin-left: 14px; flex: none; min-width: 38px; }
/* Collapsed by default: a 38px search-icon button. Expands to the full field when open. */
.search-field {
  display: flex; align-items: center; gap: 9px; height: 38px; width: 38px; padding: 0; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--faint); cursor: pointer;
  transition: width .18s ease, border-color .15s, background .15s;
}
.search-field:hover { color: var(--text); border-color: var(--faint); }
.search-field:focus-visible { outline: none; border-color: var(--accent); color: var(--text); }
/* Open as a right-anchored overlay (absolute) so expanding never pushes the nav tabs off the row. */
.nav-search.is-open .search-field { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(200px, 26vw, 320px); padding: 0 12px; justify-content: flex-start; cursor: text; z-index: 61; }
.nav-search.is-open .search-results { left: auto; right: 0; }
.nav-search.is-open:focus-within .search-field { border-color: var(--accent); background: var(--surface-2); }
.nav-search:not(.is-open) #searchInput, .nav-search:not(.is-open) .search-esc { display: none; }
.search-field svg { width: 16px; height: 16px; flex: none; }
/* #searchInput (id specificity) beats the site-wide input[type="text"] rule,
   which would otherwise give this its own background/border/padding and make
   it look like a second, taller box nested inside .search-field. */
#searchInput {
  flex: 1; min-width: 0; width: auto; height: auto; background: transparent !important; border: 0 !important;
  color: var(--text); font-size: 13.5px; font-family: var(--font-sans); padding: 0; border-radius: 0;
}
#searchInput:focus { outline: none !important; }
#searchInput::placeholder { color: var(--faint); }
.search-esc {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(360px, 88vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow); z-index: 60; overflow: hidden; max-height: 360px; overflow-y: auto; padding: 6px;
}
.search-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 10px;
}
.search-row:hover, .search-row.sel { background: var(--surface-2); }
.search-type {
  flex: none; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--label); background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; min-width: 52px; text-align: center;
}
.search-col { min-width: 0; }
.search-label { color: var(--text); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-sub { color: var(--faint); font-size: 11.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { color: var(--muted); font-size: 13.5px; padding: 16px 10px; text-align: center; }
@media (max-width: 1080px) { .search-esc { display: none; } }
@media (max-width: 860px) { .nav-search { display: none; } }

.stats { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Landing/app split: signed-out visitors don't see the in-app nav, just a Get-started CTA */
body.gated .tabs, body.gated .nav-search, body.gated .mobile-tabs { display: none; }
#navGetStarted { display: none; padding: 9px 16px; font-size: 14px; }
body.gated #navGetStarted { display: inline-flex; }
.stat {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: 999px; font-weight: 700;
  font-family: var(--font-mono); font-size: 14px;
}
.stat svg { width: 13px; height: 13px; flex: none; }
.stat .flame { color: var(--accent); }
.streak.dim .flame { opacity: .4; }
.xp-dot { color: var(--muted); }
.streak .stat-val { color: var(--text); }
.stat.streak, .stat.xp { display: none; }   /* shown only when signed in (body not gated) */
body:not(.gated) .stat.streak, body:not(.gated) .stat.xp { display: flex; }

/* ---------- App shell demo: left-side navigation after Home ---------- */
.app-sidebar { display: none; }
body.app-shell:not(.gated) {
  background: color-mix(in srgb, var(--surface-2) 45%, var(--bg));
}
body.app-shell:not(.gated) .topbar {
  display: none;
}
body.app-shell:not(.gated) .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: 286px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 16px 16px;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  box-shadow: 12px 0 40px -34px rgba(26,25,23,.28);
}
.app-side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px 14px;
  cursor: pointer;
}
.app-side-brand:focus-visible,
.app-side-link:focus-visible,
.app-side-card:focus-visible,
.app-side-profile:focus-visible,
.app-side-collapse:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}
.app-side-collapse {
  position: absolute;
  top: 26px;
  right: -17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.app-side-collapse svg {
  width: 17px;
  height: 17px;
}
.app-side-section {
  margin: 22px 6px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--label);
}
.app-side-nav {
  display: grid;
  gap: 4px;
}
.app-side-link {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 650;
  text-align: left;
}
.app-side-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-side-link:hover {
  color: var(--text);
  background: var(--surface-2);
}
.app-side-link.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.app-side-link.is-active svg {
  color: var(--accent);
}
.app-side-card {
  width: 100%;
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  color: var(--text);
  position: relative;
}
.app-side-card b {
  font-size: 15px;
  line-height: 1.2;
}
.app-side-card span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.app-side-card i {
  justify-self: start;
  margin-top: 7px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-strong);
}
.app-question-card {
  background:
    radial-gradient(120px 80px at 95% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--surface);
}
.app-card-x {
  position: absolute;
  top: 13px;
  right: 13px;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
}
.side-profile-wrap {
  margin-top: auto;
  position: relative;
}
.app-side-profile {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}
.app-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
}
.app-side-profile b,
.app-side-profile i {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-side-profile b {
  font-size: 13.5px;
}
.app-side-profile i {
  margin-top: 1px;
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}
.app-side-profile svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
body.app-shell:not(.gated) #main {
  max-width: none;
  margin: 0 0 0 286px;
  padding: 0;
}

/* Compact sidebar: an icon-only rail. Desktop only — the mobile top bar keeps its own layout. */
@media (min-width: 941px) {
  body.app-shell:not(.gated).side-collapsed .app-sidebar { width: 86px; padding: 28px 14px 14px; }
  body.app-shell:not(.gated).side-collapsed #main { margin-left: 86px; }
  body.side-collapsed .app-side-brand { justify-content: center; padding: 0 0 14px; }
  body.side-collapsed .app-side-brand .wordmark { display: none; }
  body.side-collapsed .app-side-collapse svg { transform: rotate(180deg); }
  body.side-collapsed .app-side-section { font-size: 0; line-height: 0; margin: 14px 6px 6px; border-top: 1px solid var(--border-soft); }
  body.side-collapsed .app-side-link { justify-content: center; gap: 0; padding: 10px; }
  body.side-collapsed .app-side-link span { display: none; }
  body.side-collapsed .app-side-card { display: none; }
  body.side-collapsed .app-side-profile { grid-template-columns: 1fr; justify-items: center; padding: 10px 6px; }
  body.side-collapsed .app-side-profile > span:not(.app-avatar),
  body.side-collapsed .app-side-profile svg { display: none; }
}
body.app-shell:not(.gated) #view-learn,
body.app-shell:not(.gated) #view-practice,
body.app-shell:not(.gated) #view-firms,
body.app-shell:not(.gated) #view-combine,
body.app-shell:not(.gated) .landing {
  width: auto;
  margin-left: 0;
}
/* CS2-1: one container discipline for every app-shell view. Empirically measured
   (getBoundingClientRect at 1440/1720/2000px, both rail states): .dm's old 1460px cap
   was still centered via the base .dm rule's `margin: 0 auto`, so at wide viewports with
   the rail collapsed it reproduced the same class of bug as #view-dashboard .wrap below --
   just a smaller, less visible version of it (dead symmetric gutters once #main's fluid
   width exceeds 1460). News/Resume had the opposite problem: no gutter rule at all, so
   their content sat flush against the rail with zero padding (News' clipped-looking h1 and
   the secondary-story card flush against the viewport's right edge both traced to this).
   .db (dashboard's own content wrapper, appended by renderDashboard()) already had a
   reasonable clamp-based gutter of its own, just a slightly different clamp than this
   block's -- folded in here so every view's gutter is pixel-identical, not just similar.
   Fix: every view's mount reaches #main's full fluid width, with the same clamp-based
   horizontal gutter and no centering cap. */
body.app-shell:not(.gated) .dm,
body.app-shell:not(.gated) #combineBody,
body.app-shell:not(.gated) #groupsBody,
body.app-shell:not(.gated) #newsBody,
body.app-shell:not(.gated) #view-news .section-head,
body.app-shell:not(.gated) #resumeBody,
body.app-shell:not(.gated) .db {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: clamp(22px, 3vw, 46px);
  padding-right: clamp(22px, 3vw, 46px);
}
body.app-shell:not(.gated) .foot {
  display: none;
}
body.app-shell:not(.gated) .coach-fab {
  left: auto;
  right: 24px;
}
@media (max-width: 940px) {
  body.app-shell:not(.gated) .app-sidebar {
    inset: 0 0 auto 0;
    width: 100%;
    height: 68px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    overflow-x: auto;
  }
  body.app-shell:not(.gated) .app-side-brand {
    padding: 0;
    min-width: 154px;
  }
  body.app-shell:not(.gated) .app-side-collapse,
  body.app-shell:not(.gated) .app-side-section,
  body.app-shell:not(.gated) .app-side-card,
  body.app-shell:not(.gated) .app-side-profile {
    display: none;
  }
  body.app-shell:not(.gated) .app-side-nav {
    display: flex;
    gap: 6px;
  }
  body.app-shell:not(.gated) .app-side-nav + .app-side-section + .app-side-nav {
    display: none;
  }
  body.app-shell:not(.gated) .app-side-link {
    width: auto;
    min-height: 42px;
    white-space: nowrap;
    border-radius: 999px;
    padding: 9px 13px;
  }
  body.app-shell:not(.gated) .app-side-link svg {
    width: 16px;
    height: 16px;
  }
  body.app-shell:not(.gated) #main {
    margin: 68px 0 0;
  }
  body.app-shell:not(.gated) .coach-fab {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ---------- Layout ---------- */
#main { max-width: 960px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 44px) 80px; }
/* The editorial redesigned views use a wide .dm layout (max-width 1460). They must
   escape #main's narrow 960px column so their .dm re-centers at 1460 like the demos
   (home/dashboard/groups already break out elsewhere). */
#view-learn, #view-practice, #view-firms, #view-combine { width: 100vw; margin-left: calc(50% - 50vw); }
.view { display: none; animation: rise .35s ease both; }
.view.is-active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Landing / Home ---------- */
/* Home breaks out of #main's narrow column so it fills the whole screen */
.landing { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---- Full-screen hero (Harvey/Goldman): serif headline + a real graded answer ---- */
.landing-hero { padding: clamp(56px, 9vh, 110px) clamp(20px, 5vw, 72px) clamp(30px, 4vh, 48px);
  background: var(--bg); }
.hero-inner { width: 100%; max-width: 1400px; margin: 0 auto; }

/* centered stack: quiet eyebrow, one headline, one sentence, two actions */
.hero-head { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--faint); margin-bottom: clamp(20px, 3vh, 30px); }
.hero-h1 { font-size: clamp(38px, 4.8vw, 66px); font-weight: 458; line-height: 1.02; letter-spacing: -0.028em; margin: 0; color: var(--text); }
.hero-h1 .hl { color: var(--accent); }
.hero-lead { color: var(--text-body); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.62; margin: clamp(18px, 2.6vh, 26px) 0 clamp(26px, 3.6vh, 36px); max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* the main hero element: one real graded answer — question, transcript, AI grade */
.hero-grade { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; min-height: 452px;
  max-width: 980px; margin: clamp(48px, 7vh, 84px) auto 0; }
.hg-q { padding: clamp(18px, 2.2vw, 28px) clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid var(--border-soft); }
.hg-tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hg-question { font-family: var(--font-display); font-weight: 480; font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -0.02em; margin: 0; color: var(--text); }
.hg-body { display: grid; grid-template-columns: 1.4fr 1fr; }
.hg-transcript { padding: clamp(22px, 2.6vw, 36px); border-right: 1px solid var(--border-soft); }
.hg-grade { padding: clamp(22px, 2.6vw, 36px); background: var(--surface-2); }
.hg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 13px; }
.hg-transcript p { margin: 0; color: var(--text-body); font-size: clamp(15px, 1vw, 17px); line-height: 1.72; }
.hg-transcript .fill { color: var(--accent-strong); border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.hg-score-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.hg-score { font-family: var(--font-mono); font-weight: 600; font-size: clamp(46px, 5vw, 60px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.hg-tier { display: flex; flex-direction: column; }
.hg-tier span { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hg-tier b { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--text); }
.hg-notes { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.hg-notes li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: var(--text-body); }
.hg-notes li::before { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 700; }
.hg-notes li.good::before { content: "+"; color: var(--green); }
.hg-notes li.warn::before { content: "!"; color: var(--red); }
.hg-dims { display: grid; gap: 10px; }
.hg-dim { display: grid; grid-template-columns: 68px 1fr 30px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.hg-dim em { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; position: relative; }
.hg-dim em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.hero-grade.graded .hg-dim em::after { width: var(--w); }
.hg-dim i { text-align: right; font-family: var(--font-mono); font-style: normal; color: var(--text); }

/* interactive: question tabs */
.hg-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); }
.hg-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 12px clamp(14px, 1.5vw, 22px); display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit;
  transition: background .15s, border-color .15s; }
.hg-tab:hover { background: var(--surface-2); }
.hg-tab.on { border-bottom-color: var(--accent); }
.hg-tab-n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.hg-tab.on .hg-tab-n { color: var(--accent-strong); }
.hg-tab-c { font-size: 11px; color: var(--faint); }
.hg-tab.on .hg-tab-c { color: var(--text-body); }

/* interactive: transcript annotations cross-highlight with their grade note */
.hg-trans { margin: 0; color: var(--text-body); font-size: clamp(15px, 1vw, 17px); line-height: 1.72; min-height: 6.5em; }
.hg-anno { cursor: help; border-radius: 3px; padding: 0 1px; transition: background .15s; }
.hg-anno-good { border-bottom: 1.5px solid color-mix(in srgb, var(--green) 55%, transparent); }
.hg-anno-warn { color: var(--red); border-bottom: 1.5px solid color-mix(in srgb, var(--red) 55%, transparent); }
.hg-anno-good.lit { background: color-mix(in srgb, var(--green) 16%, transparent); }
.hg-anno-warn.lit { background: color-mix(in srgb, var(--red) 15%, transparent); }
.hg-note { border-radius: 6px; transition: background .15s; cursor: default; }
.hg-note.good.lit { background: color-mix(in srgb, var(--green) 13%, transparent); }
.hg-note.warn.lit { background: color-mix(in srgb, var(--red) 12%, transparent); }

/* interactive: delivery metrics line */
.hg-metrics { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.hg-metrics span { position: relative; }
.hg-metrics span + span::before { content: "·"; position: absolute; left: -12px; color: var(--faint); }
.hg-metrics { opacity: 0; transition: opacity .3s; }
.hero-grade.grading .hg-metrics, .hero-grade.graded .hg-metrics { opacity: 1; }

/* ---- "video" states: record (talking + live transcript) -> grading -> graded ---- */
.hg-body { min-height: 340px; }
.hg-grade { display: flex; flex-direction: column; }
.hg-label-live { display: flex; align-items: center; justify-content: space-between; }
.hg-recmeta { display: inline-flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .3s; }
.hero-grade.rec .hg-recmeta { opacity: 1; }
.hg-rec { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--red); }
.hg-rec::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--red); animation: hgBlink 1.1s steps(1) infinite; }
.hg-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes hgBlink { 50% { opacity: .25; } }

/* speaking waveform (only while recording) */
.hg-wave { display: flex; align-items: flex-end; gap: 3px; height: 0; opacity: 0; overflow: hidden; margin: 0; transition: opacity .3s, height .3s, margin .3s; }
.hero-grade.rec .hg-wave { height: 34px; opacity: 1; margin: 4px 0 14px; }
.hg-wave i { flex: 1; height: 20%; border-radius: 3px; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); }
.hero-grade.rec .hg-wave i { animation: hgWave 1s ease-in-out infinite; }
.hg-wave i:nth-child(odd) { animation-duration: .82s; }
.hg-wave i:nth-child(3n) { animation-delay: -.4s; }
.hg-wave i:nth-child(3n+1) { animation-delay: -.7s; }
.hg-wave i:nth-child(4n) { animation-delay: -.5s; }
@keyframes hgWave { 0%, 100% { height: 16%; opacity: .6; } 50% { height: 100%; opacity: 1; } }

/* live transcript reveal + caret */
.hg-seg { opacity: 0; transition: opacity .2s ease; }
.hg-seg.show { opacity: 1; }
.hg-w { opacity: 0; transition: opacity .16s ease; }
.hg-w.show { opacity: 1; }
.hg-cursor { display: none; width: 2px; height: 1.05em; background: var(--accent); vertical-align: text-bottom; margin-left: 1px; }
.hero-grade.rec .hg-cursor { display: inline-block; animation: hgBlink 1s steps(1) infinite; }

/* grade-side placeholders while recording / grading */
.hg-listen { display: none; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.hero-grade.rec .hg-listen-rec { display: flex; }
.hero-grade.grading .hg-listen-grade { display: flex; }
.hg-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.hg-eq i { width: 3px; height: 40%; border-radius: 2px; background: var(--accent); animation: hgEq .8s ease-in-out infinite; }
.hg-eq i:nth-child(2) { animation-delay: .12s; }
.hg-eq i:nth-child(3) { animation-delay: .28s; }
.hg-eq i:nth-child(4) { animation-delay: .4s; }
@keyframes hgEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.hg-spin { width: 15px; height: 15px; border-radius: 999px; border: 2px solid var(--surface-3); border-top-color: var(--accent); animation: hgSpin .7s linear infinite; }
@keyframes hgSpin { to { transform: rotate(360deg); } }

/* the graded result reveals only at the end */
.hg-result { display: none; }
.hero-grade.graded .hg-result { display: block; animation: hgUp .45s ease both; }
@keyframes hgUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .landing-hero { padding: 38px 20px 24px; }
  .hero-h1 { font-size: clamp(34px, 9vw, 52px); }
  .hg-body { grid-template-columns: 1fr; }
  .hg-transcript { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .hg-tab { flex: 1 1 auto; }
}

.landing-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.l-section { max-width: 1200px; margin: clamp(56px, 8vw, 100px) auto; padding: 0 clamp(20px, 4vw, 44px); }
.l-section-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.l-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 600; color: var(--label); margin: 0 0 10px; }
.l-h2 { font-size: clamp(26px, 4.5vw, 38px); margin: 0 0 12px; line-height: 1.08; }
.l-section-sub { color: var(--muted); font-size: clamp(15px, 2vw, 17px); line-height: 1.55; margin: 0; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; }
.step .step-n { font-family: var(--font-mono); font-size: 13px; color: var(--label); font-weight: 600; }
.step h3 { font-size: 19px; margin: 14px 0 8px; }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }

.icon-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); border: 1px solid var(--border); }
.icon-badge svg { width: 23px; height: 23px; }
.icon-badge.g { color: var(--green); }
.icon-badge.b { color: var(--blue); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bento-card { grid-column: span 2; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .12s, border-color .15s, background .15s; min-height: 152px; }
.bento-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface-2); }
.bento-card.wide { grid-column: span 3; }
.bento-card h3 { font-size: 19px; margin: 2px 0 0; }
.bento-card p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.bento-card .go { margin-top: auto; color: var(--label); font-size: 13px; font-weight: 600; transition: color .15s; }
.bento-card:hover .go { color: var(--accent-strong); }
@media (max-width: 860px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-card, .bento-card.wide { grid-column: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.soon-card { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; }
.soon-badge { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label); background: var(--surface-3); border: 1px solid var(--border); padding: 4px 9px; border-radius: 999px; }
.soon-card h3 { font-size: 20px; margin: 14px 0 8px; }
.soon-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }

.cta-band { text-align: center; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 20px; padding: clamp(30px, 6vw, 56px); box-shadow: var(--shadow); }
.cta-band h2 { font-size: clamp(26px, 4.5vw, 38px); margin: 0 0 12px; }
.cta-band p { color: var(--muted); margin: 0 0 24px; }

a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.theme-toggle { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: color .15s, border-color .15s, background .15s; }
.theme-toggle:hover { color: var(--text); border-color: var(--faint); }
.theme-toggle svg { width: 18px; height: 18px; }

.firm-mono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 11px; color: var(--label); background: var(--surface-3); border: 1px solid var(--border); }
.firm-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; background: #fff; padding: 2px; box-sizing: border-box; flex: none; }


.soon-tag { align-self: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }

/* ---------- Landing: product sections — real screenshots, short copy, lots of air ---------- */
.feature { max-width: 1240px; margin: clamp(96px, 13vw, 180px) auto; padding: 0 clamp(20px, 4vw, 44px); }
.feature-inner { display: grid; grid-template-columns: minmax(280px, 4fr) 6fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature.flip .feature-inner { grid-template-columns: 6fr minmax(280px, 4fr); }
.feature.flip .feature-copy { order: 2; }
.feature-title { font-family: var(--font-display); font-weight: 458; font-size: clamp(27px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.022em; margin: 0 0 14px; color: var(--text); }
.feature-sub { color: var(--text-body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; margin: 0 0 24px; max-width: 42ch; }
.feature-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 15px; color: var(--accent-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.feature-link svg { width: 16px; height: 16px; transition: transform .15s; }
.feature-link:hover, .feature-link:focus-visible { color: var(--accent); outline: none; }
.feature-link:hover svg, .feature-link:focus-visible svg { transform: translateX(3px); }

/* browser-style frame around real product screenshots */
.shot { margin: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.shot-dots { display: inline-flex; gap: 5px; }
.shot-dots i { width: 9px; height: 9px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); }
.shot-url { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.shot img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .feature { margin: clamp(64px, 14vw, 96px) auto; }
  .feature-inner, .feature.flip .feature-inner { grid-template-columns: 1fr; gap: 26px; }
  .feature.flip .feature-copy { order: 0; }
  .feature-sub { max-width: none; }
}

/* everything-else section: quiet item list beside a recruiting-calendar preview */
.cycle { max-width: 1240px; margin: clamp(96px, 13vw, 180px) auto; padding: 0 clamp(20px, 4vw, 44px); }
.cycle-inner { display: grid; grid-template-columns: minmax(300px, 5fr) 6fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.cycle-title { font-family: var(--font-display); font-weight: 458; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 clamp(22px, 3vw, 34px); color: var(--text); }
.cycle-list { display: grid; }
.cycle-item { display: block; text-align: left; appearance: none; background: none; border: 0; border-top: 1px solid var(--border-soft); padding: 15px 0; font: inherit; }
.cycle-item:last-child { border-bottom: 1px solid var(--border-soft); }
button.cycle-item { cursor: pointer; }
.cycle-item b { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; transition: color .15s; }
.cycle-item > span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
button.cycle-item:hover b, button.cycle-item:focus-visible b { color: var(--accent-strong); }
button.cycle-item:focus-visible { outline: none; }

/* recruiting-calendar preview (static mock in a .shot frame) */
.rc { padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px); }
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rc-month { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); color: var(--text); }
.rc-cycle { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 16px; }
.rc-dow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--faint); text-align: center; padding: 3px 0 6px; }
.rc-day { position: relative; height: 32px; display: grid; place-items: center; font-size: 12px; color: var(--text-body); border-radius: 7px; font-variant-numeric: tabular-nums; }
.rc-day.pad { visibility: hidden; }
.rc-day.mark { background: var(--green-dim); color: var(--accent-strong); font-weight: 600; }
.rc-day.mark::after { content: ""; position: absolute; bottom: 3px; width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--accent); }
.rc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.rc-list li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft); }
.rc-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.rc-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.rc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-t b { font-size: 14px; font-weight: 600; color: var(--text); }
.rc-t i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.rc-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.rc-pill.open { color: var(--on-accent); background: var(--accent-strong); border-color: var(--accent-strong); }
.rc-pill.due { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 900px) {
  .cycle-inner { grid-template-columns: 1fr; gap: 30px; }
}

/* final CTA */
.final-cta { max-width: 760px; margin: clamp(96px, 13vw, 190px) auto clamp(72px, 9vw, 130px); padding: 0 20px; text-align: center; }
.final-title { font-family: var(--font-display); font-weight: 458; font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 16px; color: var(--text); }
.final-sub { color: var(--text-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; margin: 0 0 28px; }
.final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.final-clubs { font-size: 13.5px; color: var(--muted); margin: 0; }
.final-clubs a { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.final-clubs a:hover { color: var(--accent); }

/* animated border beam on coming-soon cards */
@property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.soon-card { overflow: hidden; }
.soon-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam-angle), transparent 0 72%, var(--accent) 84%, var(--accent-2) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: beamspin 5s linear infinite; }
.soon-card:nth-child(2)::before { animation-delay: -2.5s; }
@keyframes beamspin { to { --beam-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Hero (daily) ---------- */
.hero {
  display: flex; align-items: center; gap: 28px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.hero-copy { flex: 1; min-width: 0; }
.eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 600; color: var(--label); margin: 0 0 10px; }
.hero-title { font-size: clamp(30px, 6vw, 46px); margin: 0 0 10px; line-height: 1.02; }
.hero-sub { color: var(--muted); margin: 0 0 22px; max-width: 46ch; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-meta { color: var(--faint); font-size: 13px; font-family: var(--font-mono); }

.hero-ring { position: relative; flex: none; width: 132px; height: 132px; }
.ring { width: 132px; height: 132px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1);
}
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-family: var(--font-mono); font-weight: 600; font-size: 22px; }
.ring-cap { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

/* streak strip (7 day dots) */
.streak-strip { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.day-dot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: var(--faint); font-family: var(--font-mono);
}
.day-dot .pip {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 14px;
}
.day-dot.done .pip { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.day-dot.today .pip { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 11px 18px; font-weight: 600; font-size: 15px;
  transition: transform .06s, background .15s, border-color .15s, opacity .15s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--faint); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- Section heads ---------- */
.section-head { margin-bottom: 28px; }
.section-title { font-size: clamp(28px, 5vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; }
.section-sub { color: var(--muted); margin: 0; }
.beta, .sorted-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 2px 8px; border-radius: 999px; vertical-align: middle; letter-spacing: .02em; }

/* ---------- Category grid ---------- */
.diff-chips { margin-bottom: 18px; }
.practice-topics-head { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cat-card.mixed { border-color: var(--accent); background: var(--surface-2); }
.cat-card:disabled { opacity: .45; cursor: default; transform: none; }
.cat-card:disabled:hover { border-color: var(--border); background: var(--surface); }
.diff-pill { font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.diff-pill.diff-easy { color: var(--green); background: var(--green-dim); }
.diff-pill.diff-medium { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.diff-pill.diff-hard { color: var(--red); background: var(--red-dim); }
.cat-card {
  text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px; transition: transform .12s, border-color .15s, background .15s;
  display: flex; flex-direction: column; gap: 10px;
}
.cat-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface-2); }
.cat-emoji { font-size: 26px; }
.cat-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.cat-meta { color: var(--faint); font-size: 12px; font-family: var(--font-mono); margin-top: auto; }
.cat-bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.cat-bar > i { display: block; height: 100%; background: var(--green); border-radius: 999px; width: 0; transition: width .5s; }

/* ---------- Quiz ---------- */
.quiz-wrap { margin-top: 24px; }
.quiz-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); animation: rise .3s ease both;
}
.quiz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.progress { flex: 1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .35s; }
.q-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.chip.diff-easy { color: var(--green); }
.chip.diff-medium { color: var(--accent); }
.chip.diff-hard { color: var(--red); }
.q-chips { display: flex; gap: 8px; margin-bottom: 14px; }
.q-prompt { font-size: clamp(18px, 3.4vw, 23px); font-weight: 500; margin: 6px 0 22px; line-height: 1.35; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  text-align: left; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r-sm); padding: 14px 16px; font-size: 15px;
  display: flex; align-items: center; gap: 12px; transition: background .12s, border-color .12s, transform .06s;
}
.choice:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-3); }
.choice .key { font-family: var(--font-mono); font-weight: 600; color: var(--faint); flex: none;
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--surface); }
.choice.correct { border-color: var(--green); background: var(--green-dim); }
.choice.correct .key { background: var(--green); color: #04160c; }
.choice.wrong { border-color: var(--red); background: var(--red-dim); }
.choice.wrong .key { background: var(--red); color: #200409; }
.choice:disabled { cursor: default; }

.num-row { display: flex; gap: 10px; }
.num-input, .select, input[type="text"], input[type="number"] {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 13px 15px; font-size: 15px; font-family: var(--font-mono); width: 100%;
}
.num-input:focus, .select:focus, input:focus { outline: 2px solid rgba(21,115,71,0.5); outline-offset: 1px; }

.flash-card {
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm);
  padding: 20px; text-align: center; color: var(--muted);
}
.flash-answer { color: var(--text); font-size: 17px; margin-top: 10px; }

.feedback {
  margin-top: 18px; border-radius: var(--r-sm); padding: 15px 16px; border: 1px solid var(--border);
  background: var(--surface-2); animation: rise .25s ease both;
}
.feedback.ok { border-color: var(--green); background: var(--green-dim); }
.feedback.no { border-color: var(--red); background: var(--red-dim); }
.feedback .fb-head { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.feedback .fb-body { color: var(--text); font-size: 14.5px; }
.feedback .fb-ans { font-family: var(--font-mono); color: var(--accent-2); }

.quiz-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.self-rate { display: flex; gap: 10px; }

/* ---------- Result ---------- */
.result { text-align: center; padding: 12px 0 6px; }
.result h2 { font-size: 30px; margin: 8px 0 4px; }
.result-score { font-family: var(--font-mono); font-size: 20px; color: var(--accent); }
.result-sub { color: var(--muted); margin: 8px 0 22px; }
.share-card {
  margin: 0 auto 20px; max-width: 420px; text-align: left;
  background: linear-gradient(135deg, #14100a, #0d0f15); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px; font-family: var(--font-mono);
}
.share-card .sc-line { color: var(--muted); font-size: 13px; margin-top: 4px; }
.share-card .sc-big { font-size: 22px; color: var(--text); font-weight: 600; margin-top: 6px; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Learn ---------- */
.crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.crumb .back { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-sm); padding: 8px 14px; font-size: 14px; font-weight: 600; }
.crumb .back:hover { background: var(--surface-3); }
.crumb .crumb-txt { color: var(--muted); font-size: 14px; }
.crumb .crumb-txt b { color: var(--text); }

.mod-list { display: flex; flex-direction: column; gap: 10px; }
.mod-row { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; transition: border-color .15s, background .15s, transform .1s; }
.mod-row:hover { border-color: var(--accent); background: var(--surface-2); transform: translateX(2px); }
.mod-num { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; background: var(--surface-3); color: var(--muted); }
.mod-row.done .mod-num { background: var(--green); color: #04160c; }
.mod-title { flex: 1; font-weight: 500; font-size: 16px; }
.mod-chev { color: var(--faint); font-size: 18px; }

.lesson-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow); animation: rise .3s ease both; }
.lesson-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--accent-strong); }
.lesson-title { font-size: clamp(24px, 4.5vw, 32px); margin: 8px 0 16px; line-height: 1.1; }
.lesson-objective { background: rgba(21,115,71,0.08); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; color: var(--text); margin-bottom: 26px; font-size: 15.5px; }
.lesson-block { margin-bottom: 26px; }
.lesson-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; font-family: var(--font-sans); font-weight: 700; }
.lesson-block p { margin: 0 0 12px; color: var(--text-body); line-height: 1.6; }
.lesson-block ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lesson-block ul li { position: relative; padding-left: 24px; color: var(--text-body); line-height: 1.5; }
.lesson-block ul li::before { content: "▸"; position: absolute; left: 4px; color: var(--accent); }
/* class-scoped list styling so lesson lists render correctly with or without a .lesson-block wrapper (the player uses them bare) */
ul.key-points, ul.mistakes { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
ul.key-points li, ul.mistakes li { position: relative; padding-left: 24px; color: var(--text-body); line-height: 1.55; }
ul.key-points li::before, ul.mistakes li::before { position: absolute; left: 4px; }
.key-points li::before { content: "◆"; color: var(--blue); font-size: 11px; top: 2px; }
.mistakes li::before { content: "✕"; color: var(--red); }
.worked { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px; font-family: var(--font-mono); font-size: 14px; }
.worked .w-setup { color: var(--text); margin-bottom: 12px; }
.worked ol { margin: 0 0 12px; padding-left: 22px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.worked ol li { line-height: 1.5; }
.worked .w-answer { color: var(--green); font-weight: 600; border-top: 1px solid var(--border); padding-top: 12px; }
.talk-row { display: flex; align-items: flex-start; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 16px; margin-bottom: 9px; }
.talk-row .quote { flex: 1; color: var(--text-body); font-style: italic; line-height: 1.5; }
.talk-row .quote::before { content: '“'; color: var(--accent); font-size: 20px; margin-right: 3px; }
.mic-btn { flex: none; background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.mic-btn:hover { color: var(--text); border-color: var(--accent); }
.lesson-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.learn-empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); padding: 30px; text-align: center; }

/* ---------- Comps ---------- */
.comp-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.learn-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip-btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: all .12s;
}
.chip-btn:hover { color: var(--text); border-color: var(--faint); }
.chip-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Segmented toggle pills (Learn track selector, Firms Rankings/Profiles). Matches .chip-btn. */
.club-tabs { display: flex; gap: 6px; margin: 4px 0 16px; flex-wrap: wrap; }
.club-tab { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: all .12s; }
.club-tab:hover { color: var(--text); border-color: var(--faint); }
.club-tab.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.comp-right { display: flex; gap: 10px; align-items: center; }
.comp-right .select { width: auto; font-family: var(--font-sans); }

.comp-stats { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mini-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 16px; }
.mini-stat .ms-val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--accent); }
.mini-stat .ms-lab { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.comp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.comp-table th {
  text-align: left; padding: 13px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none;
}
.comp-table th.num { text-align: right; }
.comp-table th:hover { color: var(--text); }
.comp-table th.sorted-desc::after { content: " ▾"; color: var(--accent); }
.comp-table th.sorted-asc::after { content: " ▴"; color: var(--accent); }
.comp-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.comp-table td.num { text-align: right; font-family: var(--font-mono); }
.comp-table tr:last-child td { border-bottom: 0; }
.comp-table tbody tr:hover { background: var(--surface-2); }
.tier-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.tier-BB { color: var(--blue); background: rgba(91,157,255,0.14); }
.tier-EB { color: var(--accent); background: rgba(21,115,71,0.14); }
.tier-MM { color: var(--green); background: rgba(47,208,122,0.14); }
.tier-Boutique { color: #c99bff; background: rgba(201,155,255,0.14); }
.you-row td { background: rgba(21,115,71,0.08); }
.you-tag { font-family: var(--font-mono); font-size: 10px; color: var(--on-accent); background: var(--accent); padding: 1px 6px; border-radius: 5px; margin-left: 6px; }
.total-val { color: var(--accent-2); font-weight: 600; }

/* ---------- Leaderboard ---------- */
#view-leaderboard { max-width: 640px; margin: 0 auto; }
#view-leaderboard .section-head { text-align: center; }
.lb-periods { margin-bottom: 18px; justify-content: center; }
.lb-nudge { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 16px; color: var(--muted); }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 13px 16px; }
.lb-row.me { border-color: var(--accent); background: rgba(21,115,71,0.08); }
.lb-rank { flex: none; width: 40px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--muted); }
.lb-row.top .lb-rank { font-size: 20px; }
.lb-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row.me .lb-name { color: var(--accent-2); }
.lb-xp { flex: none; font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.lb-loading { color: var(--faint); padding: 20px; text-align: center; }

/* ---------- Account ---------- */
.acct-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; transition: border-color .15s, background .15s;
}
.acct-chip:hover { border-color: var(--accent); background: var(--surface-2); }
.acct-chip .avatar { width: 20px; height: 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; }

.auth-modal { width: min(400px, 100%); text-align: center; }
.auth-modal h2 { margin: 0 0 6px; font-size: 22px; }
.auth-modal .modal-note { text-align: center; }
.btn-google {
  width: 100%; background: #fff; color: #1f2430; border: 1px solid #dfe3ea;
  display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; margin-top: 6px;
}
.btn-google:hover { background: #f2f4f8; }
.btn-google svg { flex: none; }
.google-btn-wrap { display: flex; justify-content: center; margin-top: 6px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; margin: 18px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-email { width: 100%; text-align: left; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.auth-msg { font-size: 13px; margin-top: 12px; min-height: 18px; }
.auth-msg.ok { color: var(--green); }
.auth-msg.err { color: var(--red); }
.auth-signed { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 8px 0 20px; }
.auth-signed .avatar-lg { width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.auth-signed .who { text-align: left; }
.auth-signed .who .email { font-weight: 600; }
.auth-signed .who .sub { color: var(--muted); font-size: 13px; font-family: var(--font-mono); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4,6,10,0.7); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 60; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px; width: min(520px, 100%); box-shadow: var(--shadow); animation: rise .25s ease both; }
.modal h2 { margin: 0 0 6px; font-size: 22px; }
.modal-note { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Footer ---------- */
.foot { max-width: 960px; margin: 0 auto; padding: 48px clamp(16px,4vw,44px) 44px; color: var(--faint); font-size: 12.5px; border-top: 1px solid var(--border-soft); }
.foot2-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px 28px; }
.foot2-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot2-brand-row { display: flex; align-items: center; gap: 9px; }
.foot2-brand-row .wordmark { font-size: 18px; }
.foot2-tagline { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.foot2-copy { margin: 8px 0 0; color: var(--faint); font-size: 12px; }
.foot2-h { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; font-size: 10.5px; font-weight: 600; color: var(--faint); margin: 0 0 14px; }
.foot2-link { font-family: var(--font-sans); font-size: 13px; color: var(--muted); background: none; border: 0; padding: 0; margin: 0 0 10px; cursor: pointer; text-decoration: none; text-align: left; }
.foot2-link:last-child { margin-bottom: 0; }
.foot2-link:hover { color: var(--text); }
@media (max-width: 700px) {
  .foot2-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .foot2-col.foot2-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot2-grid { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- Legal / policy page ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 44px) 80px; }
.legal h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 6px; }
.legal .legal-date { color: var(--faint); font-family: var(--font-mono); font-size: 13px; margin: 0 0 28px; }
.legal h2 { font-size: 20px; margin: 34px 0 12px; color: var(--text); }
.legal p { color: var(--text-body); line-height: 1.65; margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal ul li { position: relative; padding-left: 24px; color: var(--text-body); line-height: 1.6; }
.legal ul li::before { content: "▸"; position: absolute; left: 4px; color: var(--accent); }
.legal strong { color: var(--text); }
.legal a { color: var(--accent); }
.legal .legal-foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border-soft); }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface-3); border: 1px solid var(--border); color: var(--text); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s; z-index: 80; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 700px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .tabs { display: none; }
  .topbar { gap: 10px; }
  .stats { gap: 8px; }
  body:not(.gated) .stat.xp { display: none; }
  .mobile-tabs { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) { body:not(.gated) .stat.streak { display: none; } }
body { overflow-x: hidden; }

/* mobile bottom tab bar */
.mobile-tabs {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--bar-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.mobile-tabs button { flex: 1; background: transparent; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px; border-radius: 10px; }
.mobile-tabs button.is-active { color: var(--accent); background: var(--surface-2); }
@media (max-width: 700px) {
  #main { padding-bottom: 84px; }
  .foot { padding-bottom: 90px; }
}

/* ---------- AI recruiting coach ---------- */
.coach-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .15s, filter .15s;
}
.coach-fab:hover { transform: translateY(-2px); filter: brightness(1.03); }
.coach-fab svg { width: 20px; height: 20px; }
body.coach-open .coach-fab { display: none; }

.coach-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: min(384px, calc(100vw - 32px)); height: min(76vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); animation: coachIn .16s ease-out;
}
.coach-panel[hidden] { display: none; } /* author display:flex would otherwise beat the UA [hidden] rule */
@keyframes coachIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.coach-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2);
}
.coach-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.coach-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.coach-x { background: transparent; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 8px; }
.coach-x:hover { color: var(--text); }

.coach-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.coach-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; }
.coach-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border-soft); border-bottom-left-radius: 5px; color: var(--text-body); }
.coach-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-bottom-right-radius: 5px; color: var(--text); }
.coach-msg.err { color: var(--red); background: var(--red-dim); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.coach-msg strong { color: var(--text); font-weight: 700; }
.coach-msg code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.coach-msg.typing { display: inline-flex; gap: 4px; align-items: center; }
.coach-msg.typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--muted); animation: coachBlink 1s infinite; }
.coach-msg.typing span:nth-child(2) { animation-delay: .2s; }
.coach-msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes coachBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.coach-sugs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.coach-sug { text-align: left; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-body); font-size: 13px; font-weight: 500; padding: 7px 11px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s; }
.coach-sug:hover { border-color: var(--accent); color: var(--text); }

.coach-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-soft); background: var(--surface); }
.coach-form input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 11px 15px; font-family: var(--font-sans); font-size: 14.5px; }
.coach-form input:focus { outline: none; border-color: var(--accent); }
.coach-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; transition: filter .15s; }
.coach-send:hover { filter: brightness(1.05); }
.coach-send:disabled { opacity: .5; cursor: default; }
.coach-send svg { width: 18px; height: 18px; }

/* live coach card on the landing page */
.soon-card.live { width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); transition: transform .12s, border-color .15s, background .15s; display: flex; flex-direction: column; gap: 0; }
.soon-card.live:hover { transform: translateY(-3px); border-color: var(--green); }
.soon-badge.live { color: var(--green); background: var(--green-dim); border-color: color-mix(in srgb, var(--green) 34%, transparent); }
.soon-card .go { margin-top: 14px; color: var(--green); font-size: 13px; font-weight: 600; }

@media (max-width: 700px) {
  .coach-fab { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.app-shell:not(.gated) .coach-fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .coach-panel { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; height: min(72vh, 560px); }
}
@media (prefers-reduced-motion: reduce) {
  .coach-panel { animation: none; }
  .coach-msg.typing span { animation: none; }
  .coach-fab:hover, .soon-card.live:hover { transform: none; }
}

/* ---------- view flourishes: spotlight cards, staggered reveals, hero aurora ---------- */
/* keep hero content above the aurora + existing gold wash */
.hero::after { z-index: 0; }
.hero > * { position: relative; z-index: 1; }

/* cursor spotlight on grid cards (glow sits behind content via z-layering) */
.cat-card { position: relative; overflow: hidden; }
.cat-card > * { position: relative; z-index: 1; }
.cat-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  transition: opacity .3s;
}
.cat-card:hover::before { opacity: 1; }
/* accent hairline that lights up along the top edge on hover */
.cat-card::after {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; z-index: 1; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .25s;
}
.cat-card:hover::after { opacity: .9; }
.cat-card:disabled::before, .cat-card:disabled::after { display: none; }

/* spotlight on lesson module rows too */
.mod-row { position: relative; overflow: hidden; }
.mod-row > * { position: relative; z-index: 1; }
.mod-row::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  transition: opacity .3s;
}
.mod-row:hover::before { opacity: 1; }

/* progress bars: brand gradient fill; the drill ring picks up a soft glow */
.cat-bar > i { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 55%, var(--accent))); }
.ring-fg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 42%, transparent)); }

/* active difficulty chip gets a soft accent glow */
.chip-btn.on { box-shadow: 0 6px 18px -9px color-mix(in srgb, var(--accent) 85%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  /* staggered card entrance — animates `translate` (not `transform`) so it never fights the hover lift */
  .cat-grid .cat-card:not(:disabled) { animation: cardIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
  @keyframes cardIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

  .mod-list .mod-row { animation: rowIn .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes rowIn { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }

  .streak-strip .day-dot { animation: ddIn .4s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
  @keyframes ddIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

  /* today's streak pip breathes */
  .day-dot.today .pip { animation: pipPulse 2.6s ease-in-out infinite; }
  @keyframes pipPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent); }
    50% { box-shadow: 0 0 0 2px var(--accent), 0 0 15px -2px color-mix(in srgb, var(--accent) 70%, transparent); }
  }

  /* soft aurora drifting behind the drill hero */
  .hero::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset: -45% -12% auto -12%; height: 90%;
    background:
      radial-gradient(42% 60% at 26% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
      radial-gradient(38% 55% at 82% 24%, color-mix(in srgb, var(--green) 14%, transparent), transparent 72%);
    filter: blur(24px); opacity: .8;
    animation: aurora 14s ease-in-out infinite alternate;
  }
  @keyframes aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.1); } }
}

/* difficulty picker label in Practice */
.diff-label { align-self: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }

/* ---------- Learn: guided beginner path ---------- */
.learn-intro { max-width: 640px; margin: 0 0 26px; }
.learn-intro-h { font-size: clamp(20px, 3.4vw, 26px); margin: 0 0 8px; }
.learn-intro-p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 62ch; }

.path { display: flex; flex-direction: column; gap: 12px; }
.path-step {
  position: relative; text-align: left; width: 100%;
  display: grid; grid-template-columns: 46px 1fr auto; align-items: start; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px 20px; transition: transform .12s, border-color .15s, background .15s;
}
.path-step > * { position: relative; z-index: 1; }
.path-step::before {
  content: ""; position: absolute; z-index: 0; border-radius: inherit; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  transition: opacity .3s;
}
.path-step:hover::before { opacity: 1; }
.path-step:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-2); }
/* connector line threading the number nodes */
.path-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; left: 39px; top: 58px; width: 2px; height: calc(100% - 28px);
  background: var(--border);
}
.path-node {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 17px;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
}
.path-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.path-title { font-size: 18px; margin: 0; font-family: var(--font-display); }
.path-badge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 8px; border-radius: 999px; }
.path-badge.alt { color: var(--muted); background: var(--surface-3); }
.path-blurb { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 7px 0 11px; max-width: 60ch; }
.path-prog { display: flex; align-items: center; gap: 12px; max-width: 380px; }
.path-prog .cat-bar { flex: 1; }
.path-count { font-family: var(--font-mono); font-size: 12px; color: var(--faint); white-space: nowrap; }
.path-go { align-self: center; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--accent-strong); white-space: nowrap; }
.path-step.is-next { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); }
.path-step.is-next .path-node { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.path-step.is-done .path-node { background: var(--green); color: #04160c; border-color: var(--green); }
.path-step.is-done:not(:last-child)::after { background: color-mix(in srgb, var(--green) 45%, var(--border)); }

/* ---------- Practice: no-emoji depth cards ---------- */
.cat-sub { color: var(--muted); font-size: 12.5px; margin-top: -2px; }
.cat-depth { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

/* ---------- Drill: daily dashboard ---------- */
.drill-dash { margin-top: 22px; display: grid; gap: 18px; }
.drill-dash:empty { display: none; }
.dash-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: 10px; }
.mix-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mix-chip { display: inline-flex; align-items: baseline; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--text-body); }
.mix-chip b { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.dash-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dash-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 8px; text-align: center; }
.ds-n { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--text); }
.ds-n .stat-accent { color: var(--accent); }
.ds-l { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
@media (max-width: 560px) { .dash-stats { grid-template-columns: repeat(3, 1fr); } }

/* coach sign-in gate */
.coach-gate { margin: auto 0; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.coach-gate-t { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.coach-gate-p { color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 32ch; }
.coach-gate .btn { margin-top: 4px; }

/* ---------- leaderboard podium ---------- */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 8px 0 22px; }
.podium-spot { flex: 1 1 0; max-width: 190px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.podium-spot.rank-1 { flex-grow: 1.25; }
.podium-av { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text); background: var(--surface-3); border: 2px solid var(--border); margin-bottom: 9px; }
.podium-spot.rank-1 .podium-av { width: 64px; height: 64px; font-size: 25px; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.podium-name { font-weight: 600; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-spot.me .podium-name { color: var(--accent-2); }
.podium-xp { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); margin: 2px 0 10px; }
.podium-base { width: 100%; border-radius: 12px 12px 0 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.rank-1 .podium-base { height: 104px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--on-accent); }
.rank-2 .podium-base { height: 78px; background: linear-gradient(180deg, #d7dde8, #a7b1c2); color: #10151d; }
.rank-3 .podium-base { height: 60px; background: linear-gradient(180deg, #e3ac7d, #c17f47); color: #1c1108; }

/* ---------- groups / clubs ---------- */
#view-groups { max-width: 720px; margin: 0 auto; }
.groups-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.group-action { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.group-action h3 { margin: 0; font-size: 17px; }
.group-action p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.g-input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-sm); padding: 11px 13px; font-family: var(--font-sans); font-size: 14.5px; }
.g-input:focus { outline: none; border-color: var(--accent); }
.g-input.code { font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.group-action .btn { align-self: flex-start; }
.group-list { display: flex; flex-direction: column; gap: 10px; }
.group-card { position: relative; overflow: hidden; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; transition: transform .12s, border-color .15s, background .15s; }
.group-card > * { position: relative; z-index: 1; }
.group-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); transition: opacity .3s; }
.group-card:hover::before { opacity: 1; }
.group-card:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-2); }
.group-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.group-meta { grid-column: 1; font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 3px; }
.group-go { grid-column: 2; grid-row: 1 / span 2; color: var(--accent-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.group-invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; }
.gi-left { display: flex; flex-direction: column; gap: 2px; }
.gi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-family: var(--font-mono); }
.gi-code { font-family: var(--font-mono); font-weight: 700; font-size: 22px; letter-spacing: .16em; color: var(--accent); }
@media (max-width: 560px) { .groups-actions { grid-template-columns: 1fr; } }

/* ---------- club workspace: roster & cohorts ---------- */
.club-layout { display: flex; gap: 22px; align-items: flex-start; margin-top: 4px; }
.club-nav { flex: none; width: 178px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.club-navitem { text-align: left; padding: 9px 12px; border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; transition: color .15s, background .15s, border-color .15s; }
.club-navitem:hover { color: var(--text); background: var(--surface); }
.club-navitem.on { color: var(--accent-strong); background: var(--surface-2); border-color: var(--border); }
.club-nav-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); padding: 12px 12px 4px; }
.club-nav-label:first-child { padding-top: 2px; }
.club-pane { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .club-layout { flex-direction: column; gap: 12px; }
  .club-nav { width: 100%; flex-direction: row; overflow-x: auto; gap: 6px; position: static; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .club-nav-label { display: none; }
  .club-navitem { white-space: nowrap; flex: none; border-color: var(--border); }
}
.roster-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.roster-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.roster-list { display: flex; flex-direction: column; gap: 8px; }
.roster-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); flex-wrap: wrap; }
.rr-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rr-name { font-weight: 600; }
.rr-badges { display: inline-flex; gap: 6px; align-items: center; }
.rr-badge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--faint); }
.rr-badge.owner { color: var(--accent-strong); border-color: var(--accent); }
.rr-badge.admin { color: var(--text); }
.rr-role { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent); }
.rr-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rr-select { padding: 6px 8px; font-size: 13px; }
.rr-btn { padding: 6px 10px; font-size: 12px; }
.rr-btn.danger { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 40%, transparent); }
.cohort-mgr { margin: 4px 0 18px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }
.cohort-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-bottom: 10px; }
.cohort-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cohort-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.cohort-x { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: transparent; color: var(--faint); font-size: 14px; line-height: 1; }
.cohort-x:hover { color: var(--danger, #e5484d); }
.cohort-add { display: flex; gap: 8px; }
.cohort-add .g-input { flex: 1; }
.clubset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.clubset-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.cs-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.cs-desc { color: var(--muted); font-size: 13px; }
.cs-count { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.cs-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cs-del { color: var(--danger, #e5484d); }
.club-import { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.ci-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.club-import textarea.g-input { resize: vertical; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.ci-msg { font-size: 13px; color: var(--faint); min-height: 18px; }
.ci-cap { font-size: 12px; color: var(--muted); margin-top: 2px; }
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); flex-wrap: wrap; }
.file-title { font-weight: 600; }
.file-sub { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 2px; }
.file-acts { display: inline-flex; gap: 6px; }
.firmnote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.firmnote-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.fn-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fn-firm { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.fn-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-top: 6px; }
.fn-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.fn-acts, .al-acts { display: flex; gap: 6px; margin-top: 10px; }
.alumni-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.alumni-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.al-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-name { font-weight: 600; font-size: 15px; }
.al-open { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.al-sub { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.al-notes { font-size: 13px; color: var(--muted); line-height: 1.5; }
.al-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.al-check input { width: auto; }
.assign-subh { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 18px 0 10px; }
.assign-mine .assign-subh { margin-top: 24px; }
.assign-list { display: flex; flex-direction: column; gap: 10px; }
.assign-card { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.assign-card.done { opacity: .72; }
.assign-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assign-title { font-weight: 600; font-size: 15px; }
.assign-due { font-family: var(--font-mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.assign-due.over { color: var(--danger, #e5484d); }
.assign-target { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-top: 4px; }
.assign-desc { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.assign-bar { height: 7px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); overflow: hidden; margin-top: 10px; }
.assign-bar i { display: block; height: 100%; background: var(--accent); }
.assign-prog { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 6px; }
.assign-acts { display: flex; gap: 6px; margin-top: 10px; }
.assign-status { font-family: var(--font-mono); font-size: 11px; padding: 2px 9px; border-radius: 999px; }
.assign-status.ok { color: var(--accent-strong); border: 1px solid var(--accent); }
.assign-status.no { color: var(--faint); border: 1px solid var(--border); }
.af-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-top: 10px; }
.af-target { display: flex; flex-direction: column; gap: 8px; }
.af-hint { font-size: 12px; color: var(--muted); }
.af-members { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); padding: 10px; }

/* ---------- news: WSJ-style front page (nw2- prefix, Phase C1) ----------
   Chrome (header, tabs, meta) stays sans/mono like the rest of the app; story headlines go
   serif (font-display) -- this is the one place in the product that's meant to read like an
   actual newspaper front page. Cards use the shared surface/border/radius tokens throughout;
   no new colors are introduced. */
.nw2-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.nw2-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.nw2-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nw2-tabs::-webkit-scrollbar { display: none; }
.nw2-tab { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--faint); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 6px 13px; white-space: nowrap; cursor: pointer; transition: color .12s, background .12s; }
.nw2-tab:hover { color: var(--text); background: var(--surface-2); }
.nw2-tab.is-active { color: var(--on-accent); background: var(--accent); }

.nw2-stage { display: flex; flex-direction: column; gap: 32px; }
.nw2-sample-note { font-family: var(--font-mono); font-size: 12px; color: var(--faint); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); padding: 9px 14px; }
.nw2-loading { color: var(--muted); font-size: 14px; padding: 6px 0; }
.nw2-empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); padding: 30px; text-align: center; }

/* Shared media box: a real og:image, or the branded fallback when a story has none. */
.nw2-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw2-fallback { width: 100%; height: 100%; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.nw2-fallback-mark { font-family: var(--font-display); font-weight: 600; color: var(--muted); letter-spacing: .01em; text-align: center; padding: 0 10px; }
.nw2-fallback-rule { width: 32px; height: 2px; background: var(--accent); border-radius: 2px; }

/* Lead (top) story: image left, content right on desktop; stacks on narrow screens. */
.nw2-lead { display: flex; align-items: flex-start; gap: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.nw2-lead-media { flex: 0 0 44%; aspect-ratio: 16 / 9; overflow: hidden; }
.nw2-lead-media .nw2-fallback-mark { font-size: clamp(28px, 4vw, 44px); }
.nw2-lead-body { flex: 1; min-width: 0; padding: clamp(18px, 2.6vw, 30px) clamp(20px, 2.8vw, 32px) clamp(20px, 2.6vw, 28px) 0; display: flex; flex-direction: column; }
.nw2-kicker { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-strong); margin-bottom: 10px; }
.nw2-lead-headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(23px, 2.8vw, 33px); line-height: 1.14; letter-spacing: -0.015em; color: var(--text); margin: 0 0 12px; }
.nw2-lead-headline a { color: inherit; text-decoration: none; }
.nw2-lead-headline a:hover { color: var(--accent-strong); }
.nw2-lead-summary { font-size: 15.5px; line-height: 1.62; color: var(--text-body); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nw2-why-lbl { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-strong); margin: 2px 0 4px; }
.nw2-why-body { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.nw2-take { margin-bottom: 14px; }
.nw2-take-toggle { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--accent-strong); background: none; border: none; padding: 0; cursor: pointer; }
.nw2-take-toggle:hover { text-decoration: underline; }
.nw2-take-body { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.nw2-take-body.hidden { display: none; }
.nw2-take-inline { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.nw2-take-lbl { font-weight: 600; color: var(--text); }
.nw2-meta { margin-top: 10px; font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.nw2-source-link { font-family: var(--font-sans); font-weight: 600; color: var(--accent); text-decoration: none; }
.nw2-source-link:hover { text-decoration: underline; }
.nw2-source-plain { font-weight: 600; color: var(--faint); }
.nw2-meta-dot { color: var(--border); }
.nw2-meta-time { font-family: var(--font-mono); }

/* Secondary grid: next 2-4 stories as smaller cards. */
.nw2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.nw2-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.nw2-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); transform: translateY(-1px); }
.nw2-card-media { aspect-ratio: 16 / 9; overflow: hidden; }
.nw2-card-media .nw2-fallback-mark { font-size: 21px; }
.nw2-card-media .nw2-fallback-rule { width: 22px; }
.nw2-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nw2-card-headline { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.28; color: var(--text); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw2-card-meta { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; margin-top: auto; }

/* Rail: remaining headlines, no images, hairline-separated. */
.nw2-rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.nw2-rail-row { border-bottom: 1px solid var(--border-soft); }
.nw2-rail-item { display: flex; align-items: baseline; gap: 12px; padding: 12px 4px; text-decoration: none; color: inherit; }
a.nw2-rail-item:hover .nw2-rail-headline { color: var(--accent-strong); }
.nw2-rail-headline { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw2-rail-source { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; flex: none; }

@media (max-width: 720px) {
  .nw2-lead { flex-direction: column; }
  .nw2-lead-media { flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .nw2-lead-body { padding: 18px 20px 22px; }
}

/* The front page below is deliberately serif for story headlines (a newspaper register),
   but the page chrome -- including this static h1 -- stays sans, per the redesign brief. */
/* CS2-2: News' header switches to the dashboard/Practice register (sans, 20px/650) instead
   of the old serif-adjacent display size (clamp(28-40px)) -- the front-page stories below
   stay serif/display on purpose (see the nw2- block), but the page chrome now matches every
   other view's header exactly, not just its font-family. */
#view-news .section-title { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 6px; }
#view-news .section-sub { font-size: 13px; }

/* ---------- learn tracks ---------- */
.learn-tracks { margin-bottom: 8px; }
.learn-sub { margin: 0 0 6px; justify-content: flex-start; }
.behav-practice { display: block; width: 100%; text-align: left; padding: 16px 18px; margin: 4px 0 18px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--r); transition: border-color .15s, transform .12s; }
.behav-practice:hover { border-color: var(--accent); transform: translateY(-1px); }
.bp-h { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.bp-d { color: var(--muted); font-size: 13px; margin-top: 3px; }
.mod-title-wrap { flex: 1; min-width: 0; }
.mod-sub { color: var(--faint); font-size: 12.5px; margin-top: 2px; font-weight: 400; }

/* ---------- firms: rankings + profiles ---------- */
.stars { display: inline-flex; gap: 1px; color: var(--border); font-size: 15px; line-height: 1; }
.stars .star.full { color: var(--accent); }
.stars .star.half { background: linear-gradient(90deg, var(--accent) 50%, var(--border) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.star-input { display: inline-flex; gap: 3px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--border); }
.star-input .star.full { color: var(--accent); }
.star-input .star:hover { color: var(--accent-strong); }
.fr-filters { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.fr-filters .g-input { max-width: 220px; }
.fr-list { display: flex; flex-direction: column; gap: 8px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); flex-wrap: wrap; }
.fr-rank { font-family: var(--font-mono); font-size: 13px; color: var(--faint); width: 34px; flex: none; }
.fr-mid { flex: 1; min-width: 160px; }
.fr-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.fr-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.fr-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.fr-chip-v { color: var(--text); }
.fr-right { text-align: right; flex: none; margin-left: auto; }
.fr-overall { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 3px; }
.fr-star-fields { display: flex; flex-direction: column; gap: 8px; }
.fr-star-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fr-star-lbl { font-size: 14px; }
.fp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fp-head .firm-mono { width: 52px; height: 52px; font-size: 15px; }
.fp-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 4vw, 26px); }
.fp-meta { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 2px; }
.fp-blurb { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 68ch; }
.fp-link { margin: 8px 8px 8px 0; }
.fp-verdict { margin-top: 8px; }
.fp-sec-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 22px 0 10px; }
.fp-crowd { display: flex; align-items: center; gap: 10px; }
.fp-crowd-n { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
.fp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.fp-group { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.fp-group-h { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.fp-group-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 4px 0; }
.fp-group-r { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* ---------- global templates ---------- */
.tpl-cat-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 26px 0 12px; }
.tpl-cat-count { font-size: 10px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); letter-spacing: 0; }
.tpl-cat-empty { color: var(--faint); font-size: 13px; font-style: italic; margin: -4px 0 4px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tpl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.tpl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tpl-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.tpl-date { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.tpl-desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.tpl-body { max-height: 220px; overflow: auto; white-space: pre-wrap; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; color: var(--text); }
.tpl-acts { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }

/* ---------- interview vault ---------- */
#view-vault { max-width: 760px; margin: 0 auto; }
.vault-lock { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 18px; padding: clamp(22px, 4vw, 34px); text-align: center; box-shadow: var(--shadow); }
.vault-lock-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 4vw, 28px); }
.vault-lock-p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 54ch; margin: 10px auto 20px; }
.vault-prog-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.vault-prog { display: flex; gap: 8px; }
.vault-pip { width: 34px; height: 8px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); }
.vault-pip.on { background: var(--accent); border-color: var(--accent); }
.vault-prog-lbl { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
.vault-teaser-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 28px 0 12px; }
.vault-firm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.vault-firm-grid.locked { filter: blur(3px); opacity: .6; pointer-events: none; user-select: none; }
.vault-firm { position: relative; overflow: hidden; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; transition: transform .12s, border-color .15s, background .15s; }
.vault-firm > * { position: relative; z-index: 1; }
.vault-firm::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); transition: opacity .3s; }
button.vault-firm:hover::before { opacity: 1; }
button.vault-firm:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-2); }
.vf-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.vf-count { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 4px; }
.vault-group-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 26px 0 12px; }
.vault-group-h:first-child { margin-top: 6px; }
.vf-row { display: flex; align-items: center; gap: 13px; }
.vf-txt { min-width: 0; }
.vault-firm .firm-mono { flex: none; width: 42px; height: 42px; border-radius: 10px; font-size: 13px; letter-spacing: -.01em; }
.vault-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.vault-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-dim); border: 1px solid color-mix(in srgb, var(--green) 32%, transparent); padding: 5px 11px; border-radius: 999px; }
.vault-q-list { display: flex; flex-direction: column; gap: 12px; }
.vault-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; }
.vq-top { display: flex; gap: 8px; margin-bottom: 10px; }
.vq-prompt { font-size: 15.5px; line-height: 1.5; color: var(--text); }
.vq-reveal { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent-strong); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; }
.vq-reveal:hover { border-color: var(--accent); }
.vq-answer { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); color: var(--text-body); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.vault-form { display: flex; flex-direction: column; gap: 18px; }
.vf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.vf-field { display: flex; flex-direction: column; gap: 5px; }
.vf-lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.vf-proof { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; }
.vf-proof-h { font-weight: 600; font-size: 15px; }
.vf-proof-p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0 12px; }
.vf-questions { display: flex; flex-direction: column; gap: 14px; }
.vf-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.vault-form textarea.g-input { resize: vertical; line-height: 1.5; }
.vf-msg { color: var(--accent-strong); font-size: 13.5px; min-height: 18px; }
.vf-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.vf-result-h { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.vf-verdict { font-size: 13.5px; max-width: 52ch; }
.vf-verdict.ok { color: var(--green); }
.vf-verdict.no { color: var(--muted); }

/* ---------- dashboard ---------- */
/* ambient gradient-mesh + dot-grid backdrop, covering the full viewport (not just a hero
   band) - deliberately heavier than the faint body::before grid on the landing page.
   Lives outside #main/.view in index.html (see comment there for why) and is toggled by
   switchView() in app.js instead of relying on an ancestor's display:none. */
#view-dashboard { position: relative; }
/* Dashboard background: flat. The animated dark-era mesh + dot-grid is retired for the editorial
   warm-white system (it read as muddy colored smudges on the light canvas). */
.dash-bg, .dash-bg.is-active { display: none; }
/* CS2-1: this max-width + auto-margin was the actual root cause of "dashboard centered
   with so much whitespace" -- #main already tracks the rail correctly in both states
   (verified empirically), but this 1040px cap (smaller than every other view's, and a
   survivor from before #main went fluid) recentered a fixed-size box inside it, so the
   freed-up space when the rail collapses only ever shows up as *more* dead side gutter
   instead of more usable width. This outer .wrap is just the mount (#dashboardBody);
   renderDashboard() appends a .db-classed div as its one child (below) that already
   supplies its own real gutter via padding -- so .wrap itself needs no padding of its
   own, only to stop capping/centering. (An earlier pass here also added padding
   directly on .wrap, which double-counted against .db's and produced a ~90px gutter
   instead of the ~46px every other view gets -- reverted.) */
#view-dashboard .wrap { position: relative; z-index: 1; max-width: none; margin: 0; }
.dash-head { margin: 4px 0 18px; }
.dash-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 4vw, 30px); }
.dash-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
/* elevation ladder: page (--bg) < .dash-card (--surface-2) < nested items (--surface-3),
   so cards visibly separate from the page and their own contents visibly separate from them.
   Each card gets a soft radial glow in its --card-accent color (set per variant below),
   instead of a literal icon, for a bit of personality without adding more glyphs. */
.dash-card {
  --card-accent: var(--accent);
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent) 0%, transparent 55%),
    var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r); padding: 18px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.02) inset;
  transition: transform .12s, border-color .15s;
}
.dash-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--card-accent) 35%, var(--border)); }
.dash-card + .dash-card { margin-top: 16px; }
.dash-card.c-blue { --card-accent: var(--blue); }
.dash-card.c-green { --card-accent: var(--green); }
.dash-card-h { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 14px; }
.dash-edit { margin-top: 12px; }
.dash-progress-row { display: flex; gap: clamp(20px, 4vw, 34px); }
.dash-progress-stat .n { font-family: var(--font-mono); font-weight: 700; font-size: 26px; color: var(--text); }
.dash-progress-stat .l { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.dash-news { display: flex; flex-direction: column; gap: 8px; }
.dash-news-item { text-align: left; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; width: 100%; }
.dash-news-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.dash-news-sec { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.dash-news-h { font-size: 13px; line-height: 1.4; margin-top: 3px; color: var(--text); }
.dash-moat { margin-top: 16px; }
.moat-sec { margin-top: 16px; }
.moat-sec-h { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 8px; }
.moat-row { display: grid; grid-template-columns: 170px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 5px; }
.moat-label { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moat-barwrap { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.moat-bar { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.moat-n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } .moat-row { grid-template-columns: 120px 1fr 40px; } }

/* ---------- recruiting tracker ---------- */
.tracker-add { display: flex; gap: 8px; margin-bottom: 12px; }
.tracker-add .g-input { max-width: 260px; background: var(--surface); }
.tracker-list { display: flex; flex-direction: column; gap: 10px; }
.tracker-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; background: var(--surface-3); }
.tracker-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tracker-firm { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.tracker-row { display: flex; gap: 8px; margin-top: 10px; }
.tracker-row .g-input { flex: 1; background: var(--surface); }
.tracker-win { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tracker-apply { padding: 4px 12px; font-size: 13px; }
.dl-suggested { border-style: dashed; color: var(--muted); }

/* ---------- recruiting calendar ---------- */
#view-calendar .wrap { max-width: 1000px; margin: 0 auto; }
.win-badge { display: inline-flex; align-self: flex-start; align-items: baseline; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); }
.win-badge .win-sub { color: var(--faint); font-size: 11px; }
.win-badge.win-open { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-strong); }
.win-badge.win-scheduled { color: var(--text); }
.win-badge.win-closed { color: var(--faint); }
.win-verify { font-size: 11px; color: var(--faint); margin-top: 4px; }
.cal-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.cal-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-firm { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.cal-acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 640px) { .cal-row { flex-direction: column; align-items: stretch; } .cal-acts { justify-content: flex-end; } }
/* v2b: confidence + crowd reports + review queue */
.win-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.conf-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.conf-confirmed { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-strong); }
.conf-est { color: var(--faint); }
.rep-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.rep-closed { color: var(--faint); }
.win-report { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.win-report-l { font-size: 11px; color: var(--faint); }
.rep-btn { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.rep-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--text); }
.rq-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rq-desc { font-size: 14px; }
.rq-acts { display: flex; gap: 8px; flex: none; }

/* ---------- onboarding wizard ---------- */
.onboard-card { max-width: 560px; width: 92vw; max-height: 88vh; overflow: auto; }
.onboard-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.onboard-h { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 6px 0 2px; }
.onboard-lbl { font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.onboard-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.chip-multi { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-multi .chip-btn { cursor: pointer; }

/* ---------- learn redesign: landing rows + category lists + lesson player ----------
   (added by Track A with founder direction; Track C owns polish from here) */
.cat-rows { display: flex; flex-direction: column; margin-top: 4px; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 24px 8px; cursor: pointer; transition: background .15s; }
.cat-row:first-child { border-top: 1px solid var(--border); }
.cat-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cat-row-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3vw, 27px); color: var(--text); }
.cat-row-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 4px; max-width: 62ch; }
.cat-row-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; max-width: 300px; }
.cat-row-chev { font-size: 30px; color: var(--faint); flex: none; transition: color .15s, transform .15s; }
.cat-row:hover .cat-row-chev { color: var(--accent); transform: translateX(3px); }
.learn-also { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.learn-also-l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.learn-also-link { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.learn-also-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.learn-group-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 26px 0 10px; }
.mod-count { font-family: var(--font-mono); font-size: 11px; color: var(--faint); flex: none; margin-right: 6px; }
.player-dots { display: flex; gap: 6px; margin: 14px 0 18px; }
.player-dot { width: 28px; height: 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; padding: 0; }
.player-dot.on { background: var(--accent); border-color: var(--accent); }
.player-dot.done { background: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); border-color: transparent; }
.player-seg-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-strong); margin-bottom: 10px; }
.player-seg p { max-width: 68ch; line-height: 1.65; }
.player-seg { min-height: 180px; }

/* ---------- learn v2: bento landing + split-rail category (Option 1 + 3) ---------- */
.resume-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 20px; width: fit-content; max-width: 100%; }
.resume-l { color: var(--muted); font-size: 14px; }
.resume-strip b { font-family: var(--font-display); font-size: 14.5px; }
.resume-n { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.resume-go { padding: 8px 14px; font-size: 13px; }
.lbento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.lb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; text-align: left; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; display: flex; flex-direction: column; gap: 6px; }
.lb-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 18px 40px -20px rgba(0,0,0,.25); }
.lb-hero { grid-row: 1 / 3; justify-content: space-between; min-height: 330px; background: linear-gradient(150deg, var(--surface) 55%, color-mix(in srgb, var(--accent) 12%, var(--surface))); }
.lb-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); }
.lb-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-top: 6px; color: var(--text); }
.lb-title.big { font-size: 32px; }
.lb-title.sm { font-size: 17px; margin-top: 0; }
.lb-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-top: 6px; max-width: 46ch; }
.lb-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; }
.lb-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-icon { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); display: grid; place-items: center; color: var(--accent-strong); flex: none; }
.lb-icon svg { width: 21px; height: 21px; }
.lb-wide { grid-column: 2 / 4; flex-direction: row; align-items: center; gap: 18px; cursor: default; }
.lb-wide-txt { flex: 1; min-width: 0; }
.lb-wide-acts { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.lb-mini { padding: 7px 13px; font-size: 13px; }
.l-ring { --p: 0; width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-items: center; flex: none; }
.l-ring::after { content: attr(data-label); width: 54px; height: 54px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.l-ring.sm { width: 54px; height: 54px; }
.l-ring.sm::after { width: 41px; height: 41px; font-size: 9.5px; }
.lsplit { display: grid; grid-template-columns: 260px 1fr; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; min-height: 480px; }
.lrail { border-right: 1px solid var(--border); padding: 18px 12px; background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.lrail-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 10px 12px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; }
.lrail-h-r { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--faint); flex: none; }
.lrail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--muted); cursor: pointer; font-weight: 500; }
.lrail-item:hover { background: var(--surface-2); }
.lrail-item.on { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-strong); font-weight: 600; }
.lrail-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrail-c { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); flex: none; }
.lrail-drill { margin-top: 14px; border: 1px dashed var(--border); }
.lpane { padding: 24px 26px; min-width: 0; }
.lpane-h { font-family: var(--font-display); font-weight: 700; font-size: 23px; }
.lpane-sub { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 4px; max-width: 62ch; }
.continue-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 13px; padding: 13px 16px; margin: 16px 0 18px; font-size: 14px; }
.llrow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 13px 4px; cursor: pointer; }
.llrow:last-child { border-bottom: 0; }
.llrow:hover .lt { color: var(--accent-strong); }
.lnum { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex: none; }
.lnum.done { background: var(--accent); color: #fff; }
.llrow-txt { min-width: 0; }
.lt { font-weight: 600; font-size: 15px; color: var(--text); }
.ld { color: var(--faint); font-size: 12.5px; margin-top: 1px; }
@media (max-width: 900px) {
  .lbento { grid-template-columns: 1fr; grid-template-rows: none; }
  .lb-hero { grid-row: auto; min-height: 0; }
  .lb-wide { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .lsplit { grid-template-columns: 1fr; }
  .lrail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; gap: 4px; }
  .lrail-h { display: none; }
  .lrail-item { width: auto; flex: none; }
}

/* (networking stepper removed by founder call - the rail's STEP headers carry the timeline) */

/* ===== Firms redesign: The League + profile v2 + month-grid calendar ===== */
/* League — bento command center (frb-*), replaces the old podium/strips/rows */
.frb-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4px; }
.frb-tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.frb-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-bright) 55%, var(--border)); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--accent-strong) 42%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent-bright) 16%, transparent); }
.frb-tlabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
/* spotlight (2x2) */
.frb-spot { grid-column: span 2; grid-row: span 2; padding: 20px 22px; display: flex; flex-direction: column; width: 100%; appearance: none; font: inherit; color: var(--text); text-align: left; background: radial-gradient(420px 220px at 88% -20%, color-mix(in srgb, var(--accent-bright) 15%, transparent), transparent 62%), var(--surface); }
.frb-spot.frb-clickable { cursor: pointer; }
.frb-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent-bright) 55%, transparent), transparent 42%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.frb-spot-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.frb-crown { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); font-weight: 600; background: color-mix(in srgb, var(--accent-bright) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); padding: 5px 10px; border-radius: 999px; }
.frb-spot-body { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.frb-mono-lg { width: 72px; height: 72px; flex: none; border-radius: 18px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -.02em; color: var(--on-accent); background: linear-gradient(155deg, var(--accent-bright), var(--accent)); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent-strong) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.frb-spot-name { font-family: var(--font-display); font-size: 25px; line-height: 1.06; letter-spacing: -.02em; color: var(--text); font-weight: 700; margin: 0; }
.frb-spot-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.frb-nratings { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
.frb-ring { margin-left: auto; width: 84px; height: 84px; flex: none; border-radius: 50%; position: relative; display: grid; place-items: center; }
.frb-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.frb-ring-in { position: relative; z-index: 1; text-align: center; line-height: 1; }
.frb-ring-num { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); letter-spacing: -.02em; }
.frb-ring-den { font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: .08em; margin-top: 3px; }
.frb-spot-tag { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--accent-bright) 40%, transparent); }
.frb-cats { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.frb-cat { display: flex; align-items: center; gap: 9px; }
.frb-cn { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); width: 60px; flex: none; text-transform: uppercase; }
.frb-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.frb-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-bright), var(--accent-2)); }
.frb-cv { font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 600; width: 22px; text-align: right; }
/* empty-state invite */
.frb-spot-empty { align-items: flex-start; justify-content: center; }
.frb-spot-badge { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: var(--on-accent); background: linear-gradient(155deg, var(--accent-bright), var(--accent)); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent-strong) 60%, transparent); margin-bottom: 14px; }
.frb-spot-empty .frb-spot-name { font-size: 22px; }
.frb-spot-empty .frb-spot-tag { border-left: 0; padding-left: 0; margin: 10px 0 16px; }
.frb-spot-cta { align-self: flex-start; font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--on-accent); background: linear-gradient(135deg, var(--accent-bright), var(--accent)); border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent-strong) 65%, transparent); }
/* stat tiles */
.frb-stat { padding: 16px 16px 15px; display: flex; flex-direction: column; justify-content: space-between; }
.frb-snum { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1; margin-top: 12px; }
.frb-scap { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.35; }
.frb-you { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.frb-you .frb-snum { color: var(--accent-strong); }
/* CTA tile */
.frb-cta { grid-column: span 2; padding: 18px 20px; display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--accent-bright), var(--accent)); border-color: transparent; box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--accent-strong) 65%, transparent); color: var(--on-accent); }
.frb-cta h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0; color: var(--on-accent); }
.frb-cta p { margin: 3px 0 0; font-size: 11.5px; color: color-mix(in srgb, var(--on-accent) 78%, transparent); line-height: 1.4; }
.frb-cta-btn { margin-left: auto; flex: none; background: var(--surface); color: var(--accent-strong); font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; padding: 10px 16px; border-radius: 10px; border: 0; cursor: pointer; transition: transform .16s; }
.frb-cta-btn:hover { transform: translateY(-1px); }
/* contribution — full-width bar */
.frb-contrib { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; padding: 15px 22px; flex-wrap: wrap; }
.frb-contrib-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 380px; }
.frb-contrib-main { display: flex; align-items: baseline; gap: 13px; }
.frb-contrib-main .frb-snum { margin-top: 0; }
.frb-contrib-main .frb-scap { margin: 0; max-width: 60ch; }
.frb-contrib-r { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 1 1 240px; max-width: 340px; }
.frb-contrib-meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.frb-contrib-meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-bright), var(--accent-2)); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-bright) 50%, transparent); }
.frb-contrib-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--faint); text-align: right; }
.frb-contrib-note b { color: var(--accent-strong); font-weight: 600; }
/* league list — full-width */
.frb-league { grid-column: 1 / -1; padding: 16px 18px 10px; }
.frb-league-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.frb-lt { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.frb-legend { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; }
.frb-row { appearance: none; font: inherit; width: 100%; text-align: left; background: none; color: var(--text); border: 0; border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: 30px 34px 1fr auto 46px; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.frb-row:last-of-type { border-bottom: 0; }
.frb-row:hover { background: color-mix(in srgb, var(--accent-bright) 7%, var(--surface)); }
.frb-row.frb-top { background: color-mix(in srgb, var(--accent-bright) 9%, var(--surface)); }
.frb-rk { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--faint); text-align: center; }
.frb-row.frb-top .frb-rk { color: var(--accent-strong); }
.frb-row .firm-mono { width: 34px; height: 34px; font-size: 11px; flex: none; }
.frb-row.frb-unrated .firm-mono { color: var(--faint); background: color-mix(in srgb, var(--faint) 12%, transparent); border-color: color-mix(in srgb, var(--faint) 22%, transparent); }
.frb-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.frb-nm b { font-size: 13.5px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frb-spark { display: flex; gap: 5px; align-items: center; }
.frb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.frb-f5 { background: var(--accent-2); }
.frb-f4 { background: var(--accent-bright); }
.frb-f3 { background: color-mix(in srgb, var(--accent-bright) 55%, var(--surface-3)); }
.frb-f2 { background: color-mix(in srgb, var(--accent-bright) 35%, var(--surface-3)); }
.frb-ov { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); text-align: right; }
.frb-row.frb-unrated .frb-ov { color: var(--faint); font-weight: 600; }
.frb-empty { padding: 14px 4px; color: var(--muted); font-size: 13px; }
.frb-foot { font-size: 12px; color: var(--faint); margin: 10px 2px 2px; }
/* tier badge */
.frb-tier { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; flex: none; color: var(--accent-strong); background: color-mix(in srgb, var(--accent-bright) 13%, transparent); }
.frb-tier-bb { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
/* responsive */
@media (max-width: 900px) { .frb-bento { grid-template-columns: repeat(2, 1fr); } .frb-spot { grid-row: auto; } }
@media (max-width: 560px) {
  .frb-bento { grid-template-columns: 1fr; }
  .frb-spot, .frb-cta { grid-column: 1 / -1; }
  .frb-cats { grid-template-columns: 1fr; }
  .frb-spot-body { flex-wrap: wrap; }
  .frb-ring { margin-left: 0; }
  .frb-row { grid-template-columns: 26px 34px 1fr 46px; }
  .frb-spark { display: none; }
}
@media (prefers-reduced-motion: reduce) { .frb-tile, .frb-cta-btn { transition: none; } .frb-tile:hover, .frb-cta-btn:hover { transform: none; } }
/* Profile v2 */
.fp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }
.fp-mono { width: 56px; height: 56px; font-size: 15px; border-radius: 14px; }
.fp-ht { min-width: 0; }
.fp-tags { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.fp-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.fp-score { margin-left: auto; text-align: right; flex: none; }
.fp-score-n { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--accent-strong); line-height: 1.1; }
.fp-score-sub { font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 2px; }
.fp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; margin-top: 18px; }
/* mobile: keep the overall score/stars/count visible (don't hide it) - reflow it below the name */
@media (max-width: 800px) {
  .fp-grid { grid-template-columns: 1fr; }
  .fp-head { flex-wrap: wrap; }
  .fp-score { margin-left: 0; text-align: left; width: 100%; margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
  .fp-score-n { font-size: 24px; }
  .fp-score-sub { margin-top: 0; }
}
.fp-block + .fp-block { margin-top: 20px; }
.fp-block-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 8px; font-weight: 500; }
.fp-block-h2 { margin-top: 18px; }
.fp-block-note { letter-spacing: 0; text-transform: none; color: var(--faint); }
.fp-block-p { color: var(--text-body); font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.fp-team-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.team-chip { display: inline-flex; align-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent-strong); font-weight: 600; font-size: 12.5px; border-radius: 999px; padding: 5px 12px; }
.fp-fact { display: flex; gap: 10px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--border-soft); align-items: baseline; }
.fp-fact-l { color: var(--faint); width: 112px; flex: none; }
.fp-fact-v { font-weight: 600; min-width: 0; }
.fp-fact-v .conf-chip { margin-left: 6px; }
.fp-fact-tag { font-family: var(--font-mono); font-size: 10px; color: var(--faint); font-weight: 400; margin-left: 6px; }
.fp-rate-rows { display: flex; flex-direction: column; gap: 8px; }
.fp-rate-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fp-rate-l { width: 72px; color: var(--muted); flex: none; }
.fp-rtrack { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.fp-rfill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .7s cubic-bezier(.22,.61,.36,1); }
.fp-rate-v { font-family: var(--font-mono); font-size: 12px; width: 26px; text-align: right; flex: none; }
.fp-vault-tease { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r); padding: 16px; position: relative; overflow: hidden; }
.fp-vt-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 8px; }
.fp-vt-blur { filter: blur(5px); user-select: none; color: var(--muted); font-size: 13px; line-height: 1.7; }
.fp-vt-cta { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(color-mix(in srgb, var(--surface) 20%, transparent), color-mix(in srgb, var(--surface) 78%, transparent)); }
.fp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.fp-acts a.btn { text-decoration: none; display: inline-flex; align-items: center; }
/* Month-grid calendar */
.cal-toggle { margin-left: auto; }
.cal-chip { appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.cal-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 2px 0 12px; font-size: 11.5px; color: var(--muted); }
.cal-legend-it { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-dot.ev-open { background: var(--green); }
.cal-dot.ev-conf { background: var(--accent); }
.cal-dot.ev-est { background: var(--surface-2); border: 1px dashed var(--faint); }
.cal-months { display: flex; flex-direction: column; gap: 16px; }
.cal-month { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.cal-month.is-active { display: block; }
.cal-nav { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.cal-nav-btn { appearance: none; width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, background .15s; }
.cal-nav-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-2); }
.cal-nav-btn:disabled { opacity: .38; cursor: default; }
.cal-nav-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; min-width: 168px; text-align: center; }
.cal-nav-today { margin-left: auto; appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--accent-strong); font-family: var(--font-sans); font-weight: 600; font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: border-color .15s; }
.cal-nav-today:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cal-month-h { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--font-mono); font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.cal-dow div { padding: 2px 6px; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-day { min-height: 68px; border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px 5px; background: var(--surface-2); min-width: 0; }
.cal-day.dim { opacity: 0; pointer-events: none; }
.cal-day.today { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.cal-day-n { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.cal-day.today .cal-day-n { color: var(--accent-strong); font-weight: 600; }
.cal-ev { appearance: none; font: inherit; display: block; width: 100%; margin-top: 3px; font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; }
.cal-ev.ev-open { background: var(--green-dim); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.cal-ev.ev-conf { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.cal-ev.ev-est { background: var(--surface-3); color: var(--muted); border: 1px dashed var(--border); }
.cal-ev-more { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); margin-top: 3px; cursor: default; }
.cal-tba { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.cal-tba-l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.cal-tba-chip { appearance: none; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.cal-tba-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.cal-tba-note { flex-basis: 100%; font-size: 11.5px; color: var(--faint); }
@media (max-width: 720px) { .cal-day { min-height: 46px; } .cal-ev { font-size: 9px; padding: 1px 4px; } .cal-month { padding: 10px; } }

/* ===== Rehearse out loud (AI audio reviewer) ===== */
.rz-entry { margin: 22px 0 8px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--border); background: radial-gradient(520px 200px at 90% -30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface); box-shadow: var(--shadow-sm); }
.rz-entry-head { display: flex; gap: 14px; align-items: flex-start; }
.rz-entry-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 2px 0 0; }
.rz-entry-sub { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 64ch; }
.rz-tracks { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rz-track-btn { appearance: none; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.rz-track-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: var(--surface); }
.rz-hist { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.rz-hist-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.rz-hist-row { appearance: none; font: inherit; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 8px 6px; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.rz-hist-row:hover { background: var(--surface-2); }
.rz-hist-q { flex: 1; min-width: 0; font-size: 13px; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-hist-sc { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-strong); }

.rz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(18px, 3vw, 26px); box-shadow: var(--shadow-sm); }
.rz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rz-remain { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.rz-qlabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.rz-q { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 3vw, 22px); line-height: 1.35; margin: 6px 0 4px; }
.rz-stage { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rz-hint { font-size: 13px; color: var(--muted); text-align: center; }
.rz-rec, .rz-stop { min-width: 200px; }
.rz-stop { background: var(--red); color: #fff; border: 0; }
.rz-next { appearance: none; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.rz-next:hover { color: var(--accent-strong); }
.rz-pulse { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--red) 14%, transparent); }
.rz-pulse span { width: 20px; height: 20px; border-radius: 50%; background: var(--red); animation: rzPulse 1.1s ease-in-out infinite; }
@keyframes rzPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rz-pulse span { animation: none; } }
.rz-timer { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text); }
.rz-proc { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text); }
.rz-proc-sub { font-size: 12px; color: var(--faint); }
.rz-err { font-size: 14px; color: var(--red); text-align: center; max-width: 52ch; line-height: 1.5; }

.rz-fb-head { display: flex; gap: 20px; align-items: center; width: 100%; flex-wrap: wrap; }
.rz-overall { width: 92px; height: 92px; flex: none; border-radius: 50%; position: relative; display: grid; place-items: center; }
.rz-overall::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.rz-overall-in { position: relative; z-index: 1; text-align: center; line-height: 1; }
.rz-overall-n { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--text); }
.rz-overall-d { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.rz-scores { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.rz-score { display: flex; align-items: center; gap: 10px; }
.rz-score-l { flex: none; width: 74px; font-size: 12.5px; font-weight: 600; color: var(--text-body); }
.rz-score-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rz-score-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.rz-score-v { flex: none; width: 22px; text-align: right; font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text); }
.rz-stats { display: flex; gap: 10px; width: 100%; margin-top: 16px; flex-wrap: wrap; }
.rz-stat { flex: 1; min-width: 96px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.rz-stat.warn { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: var(--red-dim); }
.rz-stat.ok { border-color: color-mix(in srgb, var(--green) 32%, var(--border)); background: var(--green-dim); }
.rz-stat-b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.rz-stat-s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rz-oneliner { width: 100%; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-size: 14px; line-height: 1.5; color: var(--text-body); }
.rz-oneliner-l { font-weight: 700; color: var(--accent-strong); margin-right: 6px; }
.rz-lists { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.rz-list { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rz-list-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; color: var(--faint); }
.rz-list.good .rz-list-h { color: var(--green); }
.rz-list.fix .rz-list-h { color: var(--accent-strong); }
.rz-list.miss .rz-list-h { color: var(--red); }
.rz-list ul { margin: 0; padding-left: 18px; }
.rz-list li { font-size: 13px; line-height: 1.5; color: var(--text-body); margin: 4px 0; }
.rz-raw { width: 100%; margin-top: 12px; font-size: 13px; color: var(--text-body); line-height: 1.6; white-space: pre-wrap; }
.rz-transcript { width: 100%; margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.rz-transcript summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rz-transcript-t { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--text-body); }
.rz-acts { display: flex; gap: 10px; width: 100%; margin-top: 18px; flex-wrap: wrap; }
.rz-acts .btn { flex: 1; min-width: 140px; }
.rz-remain-foot { width: 100%; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 10px; }
@media (max-width: 560px) { .rz-fb-head { justify-content: center; text-align: center; } .rz-scores { min-width: 0; } }

/* Practice mode chooser: audio vs written */
.prac-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 8px; }
.prac-mode { appearance: none; font: inherit; text-align: left; display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); cursor: pointer; position: relative; box-shadow: var(--shadow-sm); transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease; }
.prac-mode:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-bright) 50%, var(--border)); box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--accent-strong) 34%, transparent); }
.prac-mode.hot { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: radial-gradient(520px 200px at 92% -30%, color-mix(in srgb, var(--accent-bright) 13%, transparent), transparent 60%), var(--surface); }
.prac-mode-body { min-width: 0; }
.prac-mode-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.prac-mode-s { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.prac-mode-tag { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); background: color-mix(in srgb, var(--accent-bright) 14%, transparent); border-radius: 999px; padding: 4px 10px; }
@media (max-width: 620px) { .prac-modes { grid-template-columns: 1fr; } }

/* ---------- The Combine (spoken gauntlet) ---------- */
#combineBody { width: 100%; }
.cmb-screen { display: none; animation: cmb-rise .34s cubic-bezier(.2,.7,.3,1); }
.cmb-screen.is-active { display: block; }
@keyframes cmb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cmb-spin { to { transform: rotate(360deg); } }
@keyframes cmb-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.cmb-hero { text-align: center; padding: 30px 24px 34px; }
.cmb-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.cmb-h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(36px, 7vw, 56px); line-height: 1.02; margin: 14px 0 10px; }
.cmb-h1 .cmb-amp { color: var(--accent); }
.cmb-sub { color: var(--text-body); font-size: clamp(15px, 2.2vw, 18px); max-width: 480px; margin: 6px auto 4px; }
.cmb-fine { color: var(--faint); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; margin-top: 14px; }
.cmb-events-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0 6px; }
.cmb-evt-chip { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; color: var(--text-body); font-weight: 500; }
.cmb-evt-chip .n { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.cmb-social { margin-top: 20px; color: var(--muted); font-size: 13.5px; }
.cmb-social b { color: var(--text); font-family: var(--font-mono); }
.cmb-cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: var(--on-accent); font-weight: 700; font-size: 17px; padding: 15px 34px; border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 12px 30px -12px rgba(21,115,71,.6); letter-spacing: -0.01em; transition: transform .12s ease, box-shadow .12s ease; }
.cmb-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(21,115,71,.7); }
.cmb-cta.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; font-weight: 600; font-size: 15px; padding: 13px 26px; }
.cmb-cta.secondary:hover { box-shadow: none; border-color: var(--accent); }
.cmb-warnbox { margin: 16px 20px 0; background: var(--red-dim); border: 1px solid var(--red); border-radius: 12px; padding: 12px 16px; color: var(--text); font-size: 13.5px; display: none; }
.cmb-warnbox.show { display: block; }

.cmb-game-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cmb-game-head .label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmb-game-head .label b { color: var(--accent); }
.cmb-game-head .live { font-family: var(--font-mono); font-size: 13px; color: var(--text-body); }
.cmb-timer { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin: 10px 0 22px; }
.cmb-timer .fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); border-radius: 6px; transition: width .3s linear; }
.cmb-timer.warn .fill { background: linear-gradient(90deg, var(--red), #ff8a5c); }
.cmb-timer.idle .fill { width: 0; }

.cmb-qcard { padding: 26px 24px 24px; text-align: center; }
.cmb-q-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cmb-q-prompt { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 4.2vw, 32px); line-height: 1.18; max-width: 560px; margin: 12px auto 6px; color: var(--text); }
.cmb-q-hint { color: var(--muted); font-size: 14px; margin: 8px auto 0; max-width: 460px; }
.cmb-meters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px 0 16px; }
.cmb-meter { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; min-width: 92px; text-align: center; }
.cmb-meter .v { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--text); line-height: 1.1; }
.cmb-meter .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-top: 3px; }
.cmb-meter.hot .v { color: var(--accent); }
.cmb-transcript { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 15px 17px; min-height: 92px; max-height: 190px; overflow-y: auto; color: var(--text-body); font-size: 15.5px; line-height: 1.55; text-align: left; }
.cmb-transcript.placeholder { color: var(--faint); font-style: italic; }
.cmb-rec-controls { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; min-height: 52px; align-items: center; }
.cmb-rec-btn { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 16px; padding: 14px 30px; border: none; border-radius: 999px; cursor: pointer; letter-spacing: -0.01em; transition: transform .12s, box-shadow .12s; }
.cmb-rec-btn.start { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: var(--on-accent); box-shadow: 0 12px 30px -12px rgba(21,115,71,.6); }
.cmb-rec-btn.start:hover { transform: translateY(-2px); }
.cmb-rec-btn.stop { background: var(--red); color: #fff; box-shadow: 0 12px 30px -12px rgba(255,93,108,.6); }
.cmb-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: cmb-pulse 1s ease-in-out infinite; }
.cmb-grading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-family: var(--font-mono); font-size: 14px; }
.cmb-mini-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: cmb-spin .8s linear infinite; }
.cmb-flash { text-align: center; color: var(--green); font-weight: 600; font-size: 15px; margin-top: 14px; height: 20px; }
.cmb-computing { text-align: center; padding: 70px 20px; }
.cmb-computing .spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--surface-3); border-top-color: var(--accent); margin: 0 auto 22px; animation: cmb-spin 0.8s linear infinite; }
.cmb-computing .t { font-family: var(--font-mono); color: var(--muted); font-size: 14px; letter-spacing: .05em; }
.cmb-offline-banner { display: none; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 9px 16px; color: var(--muted); font-size: 12px; text-align: center; border-radius: var(--r) var(--r) 0 0; font-family: var(--font-mono); }
.cmb-offline-banner.show { display: block; }

.cmb-result-hero { text-align: center; padding: 34px 24px 26px; position: relative; overflow: hidden; }
.cmb-result-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 240px at 50% -20%, rgba(21,115,71,.16), transparent 70%); pointer-events: none; }
.cmb-result-hero .cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); position: relative; }
.cmb-big-score { font-family: var(--font-mono); font-weight: 600; font-size: clamp(72px, 17vw, 122px); line-height: 1; letter-spacing: -0.02em; color: var(--accent); position: relative; margin: 6px 0; text-shadow: 0 6px 40px rgba(21,115,71,.35); }
.cmb-score-range { font-family: var(--font-mono); font-size: 13px; color: var(--faint); position: relative; }
.cmb-tier-badge { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 6px; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: var(--on-accent); font-weight: 700; font-size: 17px; padding: 10px 22px; border-radius: 999px; position: relative; box-shadow: 0 10px 26px -12px rgba(21,115,71,.7); font-family: var(--font-display); }
.cmb-pctile { color: var(--text-body); font-size: 16px; position: relative; margin-top: 8px; }
.cmb-pctile b { color: var(--text); }
.cmb-member-no { font-family: var(--font-mono); font-size: 13px; color: var(--muted); position: relative; margin-top: 12px; }
.cmb-breakdown { padding: 8px 24px 20px; }
.cmb-breakdown h3, .cmb-qmini h3 { font-size: 14px; color: var(--muted); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.cmb-bar-row { margin-bottom: 15px; }
.cmb-bar-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cmb-bar-row .nm { font-size: 15px; font-weight: 600; color: var(--text); }
.cmb-bar-row .nm .sub { color: var(--faint); font-weight: 400; font-size: 12.5px; font-family: var(--font-mono); margin-left: 8px; }
.cmb-bar-row .val { font-family: var(--font-mono); font-size: 14px; color: var(--text-body); }
.cmb-bar { height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.cmb-bar .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); width: 0; transition: width 1s cubic-bezier(.2,.7,.3,1); }
.cmb-bar-row.weak .fill { background: linear-gradient(90deg, var(--red), #ff8a5c); }
.cmb-bar-row.weak .nm .tagw { color: var(--red); font-size: 11px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; }
.cmb-qmini { padding: 4px 24px 18px; }
.cmb-qmini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.cmb-qmini-row .l { color: var(--text); font-weight: 500; }
.cmb-qmini-row .l small { display: block; color: var(--faint); font-weight: 400; font-size: 12px; font-family: var(--font-mono); }
.cmb-qmini-row .r { font-family: var(--font-mono); font-size: 15px; color: var(--accent); text-align: right; white-space: nowrap; font-weight: 600; }
.cmb-qmini-row .r small { color: var(--faint); font-size: 12px; }
.cmb-locked-wrap { position: relative; margin: 6px 8px 6px; }
.cmb-locked-inner { filter: blur(6px); opacity: .6; pointer-events: none; user-select: none; max-height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent); mask-image: linear-gradient(180deg, #000 38%, transparent); }
.cmb-lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; gap: 9px; }
.cmb-lock-overlay .lock-ic { font-size: 30px; }
.cmb-lock-overlay .lh { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--text); }
.cmb-lock-overlay .lp { color: var(--text-body); font-size: 13.5px; max-width: 360px; line-height: 1.5; margin-bottom: 4px; }
.cmb-fb-card { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.cmb-fb-card h4 { font-size: 14px; margin: 0 0 5px; color: var(--text); }
.cmb-fb-card .ol { color: var(--text-body); font-size: 13.5px; margin: 0; }
.cmb-fb-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.cmb-fb-card li { margin-bottom: 3px; }
.cmb-fb-lesson { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: color-mix(in srgb, var(--accent-bright) 14%, transparent); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 9px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cmb-fb-lesson:hover { border-color: var(--accent); }

/* ---------- Coming soon (gated pages) ---------- */
.coming-soon { text-align: center; padding: 48px 24px; border: 1px dashed var(--border); border-radius: 16px; background: var(--surface); }
.coming-soon .cs-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); background: color-mix(in srgb, var(--accent-bright) 14%, transparent); border-radius: 999px; padding: 5px 12px; }
.coming-soon .cs-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text); margin-top: 12px; }
.coming-soon .cs-sub { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ---------- Firm searchable multi-select (onboarding) ---------- */
.fsm { display: flex; flex-direction: column; gap: 8px; }
.fsm-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.fsm-empty { color: var(--faint); font-size: 13px; }
.fsm-chip { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--accent-bright) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.fsm-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.fsm-x:hover { color: var(--red); }
.fsm-inwrap { position: relative; }
.fsm-input { width: 100%; }
.fsm-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow); max-height: 224px; overflow-y: auto; padding: 4px; }
.fsm-opt { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.fsm-opt:hover { background: var(--surface-2); color: var(--accent-strong); }
.fsm-none { padding: 8px 10px; color: var(--faint); font-size: 13px; }
.cmb-fb { padding: 0 24px; }
.cmb-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 12px 24px 22px; }
.cmb-lb-head { text-align: center; padding: 28px 24px 6px; }
.cmb-lb-head h2 { font-size: 30px; margin: 0; }
.cmb-lb-head p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.cmb-lb-list { padding: 12px 16px 8px; }
.cmb-lb-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid transparent; }
.cmb-lb-row + .cmb-lb-row { margin-top: 2px; }
.cmb-lb-row .rank { font-family: var(--font-mono); font-size: 16px; color: var(--muted); text-align: center; font-weight: 600; }
.cmb-lb-row .who .nm { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmb-lb-row .who .sc { font-size: 12.5px; color: var(--faint); font-family: var(--font-mono); }
.cmb-lb-row .score { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--text); }
.cmb-lb-row.me { border-color: var(--accent); background: linear-gradient(180deg, rgba(21,115,71,.09), transparent); }
.cmb-lb-row.me .rank, .cmb-lb-row.me .score { color: var(--accent); }
.cmb-nudge { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 16px; color: var(--text-body); font-size: 14px; }
.cmb-foot { text-align: center; color: var(--faint); font-size: 12.5px; font-family: var(--font-mono); padding: 4px 24px 22px; }

/* ---------- Admin analytics ---------- */
.adm-wrap { max-width: 980px; margin: 0 auto; }
.adm-head { margin-bottom: 18px; }
.adm-title { font-size: 30px; margin: 0; }
.adm-sub { color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; margin-top: 4px; }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.adm-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.adm-kpi-v { font-family: var(--font-mono); font-weight: 600; font-size: 30px; color: var(--accent); line-height: 1; }
.adm-kpi-k { font-weight: 600; font-size: 13px; color: var(--text); margin-top: 8px; }
.adm-kpi-s { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.adm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.adm-card-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 14px; }
.adm-spark { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.adm-spark-col { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 2px; }
.adm-spark-bar { width: 100%; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); border-radius: 3px 3px 0 0; min-height: 3px; }
.adm-cap { color: var(--faint); font-family: var(--font-mono); font-size: 12px; margin-top: 10px; }
.adm-hbar { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; margin-bottom: 9px; font-size: 13.5px; }
.adm-hbar-l { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-hbar-track { background: var(--surface-3); border-radius: 6px; height: 12px; overflow: hidden; }
.adm-hbar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); border-radius: 6px; }
.adm-hbar-v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-body); white-space: nowrap; }
.adm-table { font-size: 13.5px; }
.adm-tr { display: grid; grid-template-columns: 1fr 60px 110px 60px; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.adm-th { color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-top: none; }
.adm-td { color: var(--text-body); }
.adm-td:first-child { font-family: var(--font-mono); }
.adm-empty { color: var(--faint); font-size: 13px; }
.adm-loading { color: var(--muted); padding: 30px; text-align: center; font-family: var(--font-mono); }
.adm-gate { text-align: center; padding: 60px 20px; }
.adm-gate-t { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.adm-gate-m { color: var(--muted); margin-top: 8px; }
@media (max-width: 620px) { .adm-hbar { grid-template-columns: 104px 1fr auto; } .adm-tr { grid-template-columns: 1fr 44px 84px 48px; } }

/* ============================================================
   Dashboard (signed-in home) — professional register: uniform
   metric cards, charted axes, real tables, one accent.
   ============================================================ */
.db { max-width: none; margin: 0 auto; padding: clamp(20px, 3vw, 34px) clamp(18px, 3.4vw, 44px) 64px; }

.db2-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.db2-h1 { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.db2-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.db2-actions { display: flex; gap: 10px; align-items: center; }
.db2-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 13.5px var(--font-sans); border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.db2-btn:hover { border-color: var(--faint); }
.db2-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.db2-btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.db2-link { border: 0; background: none; padding: 0; font: 600 12.5px var(--font-sans); color: var(--accent-strong); cursor: pointer; }
.db2-link:hover { color: var(--accent); }

.db2-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.db2-metric { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 15px 18px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s; }
.db2-metric:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.db2-metric .l { display: block; font-size: 12.5px; font-weight: 550; color: var(--muted); }
.db2-metric .v { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 25px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.db2-metric .v small { font-size: 13.5px; color: var(--faint); font-weight: 500; }
.db2-metric .d { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.db2-delta { display: inline-flex; align-items: center; gap: 3px; font: 600 11.5px var(--font-mono); padding: 1px 7px; border-radius: 6px; }
.db2-delta.up { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.db2-delta.down { color: var(--red); background: var(--red-dim); }
.db2-delta.flat { color: var(--muted); background: var(--surface-2); }

/* rows bottom-align; the last panel spans full width so the page closes flush */
.db2-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 14px; align-items: stretch; }
.db2-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; }
.db2-panel.wide { grid-column: 1 / -1; }
.db2-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.db2-ph h2 { font-family: var(--font-sans); font-size: 14px; font-weight: 650; letter-spacing: 0; margin: 0; color: var(--text); }
.db2-mono-cap { font: 500 11.5px var(--font-mono); color: var(--muted); }

.db2-chartwrap { padding: 16px 18px 6px; flex: 1; display: flex; flex-direction: column; }
.db2-chart { display: grid; grid-template-columns: 34px 1fr; gap: 6px; flex: 1; }
.db2-yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font: 500 10.5px var(--font-mono); color: var(--faint); padding: 2px 0 18px; }
.db2-plot { position: relative; min-height: 190px; }
.db2-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.db2-plot .grid line { stroke: var(--border-soft); stroke-width: 1; }
.db2-plot .series { fill: none; stroke: var(--accent); stroke-width: 2; }
.db2-plot .fill { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: none; }
.db2-plot .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.db2-xaxis { grid-column: 2; display: flex; justify-content: space-between; font: 500 10.5px var(--font-mono); color: var(--faint); padding-top: 6px; }
.db2-legend { display: flex; gap: 18px; padding: 8px 18px 14px; font-size: 12px; color: var(--muted); }
.db2-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: 6px; }
.db2-chart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 30px 24px; }
.db2-chart-empty.pad { padding: 34px 24px; }
.db2-chart-empty b { font-size: 14.5px; color: var(--text); }
.db2-chart-empty span { font-size: 13px; color: var(--muted); max-width: 34ch; line-height: 1.5; }
.db2-chart-empty .db2-btn { margin-top: 10px; }

.db2-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.db2-table th { text-align: left; font: 600 10.5px var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: 9px 18px; border-bottom: 1px solid var(--border-soft); }
.db2-table td { padding: 11px 18px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); }
.db2-table tr:last-child td { border-bottom: 0; }
.db2-table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.db2-table .firm { font-weight: 600; color: var(--text); }
.db2-table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.db2-empty-cell { text-align: center; color: var(--muted); padding: 26px 18px !important; font-size: 13px; }
.db2-status { display: inline-flex; align-items: center; gap: 6px; font: 550 12px var(--font-sans); color: var(--text-body); }
.db2-status i { width: 7px; height: 7px; border-radius: 999px; }
.db2-status.open i { background: var(--green); }
.db2-status.due i { background: var(--warn); }
.db2-status.later i { background: var(--faint); }
.db2-chip { display: inline-flex; align-items: center; font: 600 11.5px var(--font-sans); padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.db2-chip.good { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.db2-chip.warn { color: var(--warn-strong); background: var(--warn-dim); }
.db2-chip.neutral { color: var(--muted); background: var(--surface-2); }

.db2-today { padding: 6px 18px 0; flex: 1; }
.db2-task { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.db2-task:last-child { border-bottom: 0; }
.db2-task b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.db2-task > span:not(.mono) { font-size: 12px; color: var(--muted); }
.db2-task .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); align-self: center; }
.db2-task .mono.done { color: var(--accent-strong); }
.db2-prog { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; grid-column: 1 / -1; margin-top: 7px; }
.db2-prog i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s ease; }
.db2-cta { margin: 12px 18px 16px; display: block; width: calc(100% - 36px); border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 650 13.5px var(--font-sans); padding: 11px; cursor: pointer; }
.db2-cta:hover { background: var(--accent-2); }

.db2-topics { padding: 4px 0 8px; flex: 1; }
.db2-topic { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center; padding: 9px 18px; font-size: 13px; color: var(--text-body); }
.db2-topic .tr { height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.db2-topic .tr i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.db2-topic .tr i.low { background: var(--red); }
.db2-topic em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.db2-foot { margin-top: auto; padding: 10px 18px 13px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 12px; }

@media (max-width: 1060px) {
  .db2-grid { grid-template-columns: 1fr; }
  .db2-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .db2-metrics { grid-template-columns: 1fr; }
  .db2-head { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   Shared editorial app components (Learn / Practice / Firms / Clubs
   redesigns). Ported from the design mockups; .cal-* renamed to
   .dm-cal-* to avoid colliding with the existing calendar view.
   ============================================================ */
.dm { width: 100%; max-width: 1460px; margin: 0 auto; padding: clamp(18px,2.6vw,32px) clamp(18px,3.4vw,44px) 90px; }
.dm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(18px,2.4vw,30px); }
.dm-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--label); }
.dm-h1 { font-family: var(--font-display); font-weight: 480; font-size: clamp(27px,3.2vw,40px); letter-spacing: -0.022em; line-height: 1.05; margin: 7px 0 0; color: var(--text); }
.dm-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dm-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 11px 18px; font-weight: 600; font-size: 14.5px; font-family: var(--font-sans); cursor: pointer; text-decoration: none; }
.dm-btn.primary { background: var(--accent); color: var(--on-accent); }
.dm-btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: clamp(18px,1.5vw,24px); }
.card.pad0 { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.card-t { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--text); }
.card-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--label); }
.card-link { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); text-decoration: none; white-space: nowrap; }

.kpi { display: flex; flex-direction: column; gap: 3px; }
.kpi .n { font-family: var(--font-mono); font-weight: 600; font-size: clamp(26px,2.4vw,34px); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi .n.accent { color: var(--accent); }
.kpi .l { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kpi .d { font-size: 12px; color: var(--green); font-family: var(--font-mono); }

.pbar { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 12px; padding: 9px 0; }
.pbar + .pbar { border-top: 1px solid var(--border-soft); }
.pbar .pl { font-size: 13.5px; color: var(--text-body); }
.pbar .pt { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pbar .pt > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pbar .pv { text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.big-progress { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.big-progress b { font-family: var(--font-mono); font-weight: 600; font-size: 30px; color: var(--accent); }
.big-progress span { color: var(--muted); font-size: 13px; }

.ringwrap { display: flex; align-items: center; gap: 18px; }
.ring2 { position: relative; width: 108px; height: 108px; flex: none; }
.ring2 svg { transform: rotate(-90deg); }
.ring2 .bg { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.ring2 .fg { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.ring2 .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring2 .mid b { font-family: var(--font-mono); font-weight: 600; font-size: 24px; color: var(--text); }
.ring2 .mid s { text-decoration: none; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 20px; }
.mini-stats .ms .n { font-family: var(--font-mono); font-weight: 600; font-size: 19px; color: var(--text); }
.mini-stats .ms .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

.dm-cal-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 13px; padding: 12px clamp(18px,1.5vw,24px); border-top: 1px solid var(--border-soft); }
.dm-cal-row:first-child { border-top: 0; }
.dm-cal-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.dm-cal-mid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-cal-firm { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text); }
.dm-cal-firm i { width: 7px; height: 7px; border-radius: 999px; background: var(--border); flex: none; }
.dm-cal-row.open .dm-cal-firm i { background: var(--accent); }
.dm-cal-stage { font-size: 12px; color: var(--muted); }
.dm-cal-pill { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.dm-cal-pill.open { color: var(--on-accent); background: var(--accent-strong); border-color: var(--accent-strong); }

.frow { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border-soft); }
.frow:first-child { border-top: 0; }
.flogo { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 3px; box-sizing: border-box; }
.fname { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); }
.fsub { font-size: 12px; color: var(--muted); }
.fstars { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 1px; }
.frank { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.fcard { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.fcard-top { display: flex; align-items: center; gap: 11px; }
.fcard .fmeta { display: flex; gap: 16px; margin-top: 2px; }
.fcard .fmeta div { font-family: var(--font-mono); }
.fcard .fmeta .n { font-size: 15px; color: var(--text); font-weight: 600; }
.fcard .fmeta .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.sdots { display: flex; gap: 7px; }
.sdots i { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); }
.sdots i.on { background: var(--accent); border-color: var(--accent); }

.section-lead { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--label); margin: clamp(26px,3vw,40px) 0 14px; }

/* ---------- Learn A: curriculum index (ln-) ---------- */
.ln-intro { color: var(--text-body); font-size: 17px; max-width: 60ch; margin: -8px 0 22px; line-height: 1.55; }
.ln-continue { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 16px 22px; margin-bottom: 20px; }
.ln-continue .lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--label); }
.ln-continue b { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); }
.ln-continue .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ln-continue .go { margin-left: auto; }
.ln-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ln-grid { grid-template-columns: 1fr 1fr; } .ln-hero { grid-column: span 2; } }
@media (max-width: 680px) { .ln-grid { grid-template-columns: 1fr; } .ln-hero { grid-column: span 1; } }
.ln-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; cursor: pointer; transition: border-color .15s, transform .12s; }
.ln-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.ln-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-strong); }
.ln-t { font-family: var(--font-display); font-weight: 520; letter-spacing: -0.02em; font-size: 26px; color: var(--text); }
.ln-hero .ln-t { font-size: 34px; }
.ln-p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.ln-secs { display: flex; flex-wrap: wrap; gap: 8px; }
.ln-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-body); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px; }
.ln-chip.done { color: var(--accent-strong); }
.ln-chip.done::before { content: "\2713"; color: var(--accent); font-weight: 700; }
.ln-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.ln-prog { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ln-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.ln-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .8s cubic-bezier(.22,.61,.36,1); }
.ln-give { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 680px) { .ln-give { grid-template-columns: 1fr; } }
.ln-give .card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }

/* ---------- Learn B: syllabus rail + lesson reader (lb2- / rd-) ---------- */
.lb2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .lb2 { grid-template-columns: 1fr; } .lb2-rail { display: none; } }
.lb2-rail { position: sticky; top: 84px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); padding: 14px; max-height: calc(100vh - 108px); overflow-y: auto; }
.lb2-prog { padding: 8px 10px 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.lb2-prog b { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--accent); }
.lb2-prog span { font-size: 12px; color: var(--muted); }
.lb2-track { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--label); padding: 12px 10px 6px; }
.lb2-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-body); font-size: 13.5px; line-height: 1.4; }
.lb2-item:hover { background: var(--surface-2); }
.lb2-item.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); font-weight: 600; }
.lb2-item .tick { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--border); flex: none; display: grid; place-items: center; font-size: 9px; color: var(--accent); }
.lb2-item.done .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lb2-item.on .tick { border-color: var(--accent); }
.lb2-reader { min-width: 0; }
.rd-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-strong); }
.rd-h1 { font-family: var(--font-display); font-weight: 480; letter-spacing: -0.02em; font-size: clamp(28px, 3.4vw, 40px); margin: 8px 0 4px; line-height: 1.05; color: var(--text); }
.rd-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 22px; }
.rd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: clamp(22px, 2.4vw, 34px); }
.rd-lead { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--label); margin: 0 0 10px; }
.rd-card p { color: var(--text-body); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.rd-card p:last-child { margin-bottom: 0; }
.rd-objective b { color: var(--text); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; }
.rd-list { margin: 0 0 14px; padding-left: 20px; }
.rd-list li { color: var(--text-body); font-size: 15px; line-height: 1.65; margin-bottom: 7px; }
.rd-list li:last-child { margin-bottom: 0; }
.rd-worked { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 20px; margin: 18px 0; }
.rd-worked .k { font-family: var(--font-mono); font-size: 13px; color: var(--text); line-height: 2; }
.rd-worked .k b { color: var(--accent-strong); }
.rd-wsetup { color: var(--muted); }
.rd-say { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-top: 18px; }
.rd-say .lbl { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-strong); }
.rd-say p { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--text); margin: 8px 0 0; line-height: 1.55; }
.rd-say p + p { margin-top: 12px; }
.rd-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* ================= Practice: Daily 10 ritual (pr-) ================= */
/* legacy daily-strip nodes are kept in the DOM (JS writes to them) but hidden in the redesign */
#streakStrip[hidden], #drillDash[hidden] { display: none !important; }
.pr-streak-note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pr-top { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pr-top { grid-template-columns: 1fr; } }

/* Hero: today's set */
.pr-hero { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.pr-hero::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); pointer-events: none; }
.pr-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; position: relative; }
.pr-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; color: var(--accent-strong); }
.pr-hero-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; color: var(--text); margin: 8px 0 6px; }
.pr-hero-sub { color: var(--text-body); font-size: 15px; line-height: 1.55; max-width: 46ch; margin: 0; }
.pr-ring { width: 118px; height: 118px; flex: none; position: relative; }
.pr-ring svg { transform: rotate(-90deg); }
.pr-ring .bg { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.pr-ring .fg { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.pr-ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pr-ring .mid b { font-family: var(--font-mono); font-weight: 600; font-size: 27px; color: var(--text); font-variant-numeric: tabular-nums; }
.pr-ring .mid s { text-decoration: none; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 2px; }

/* the question dots — the signature */
.pr-track { position: relative; display: flex; gap: 8px; }
.pr-node { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.pr-dot { width: 100%; height: 9px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-soft); position: relative; }
.pr-node.done .pr-dot { background: var(--accent); border-color: var(--accent); }
.pr-node.now .pr-dot { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pr-node .pr-nlbl { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.pr-node.now .pr-nlbl { color: var(--accent-strong); }
.pr-track-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.pr-track-meta span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.pr-hero-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; }
.pr-hero-foot .pr-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.btn-xl { padding: 13px 24px; font-size: 15px; border-radius: 11px; }

/* weighting card */
.pr-mix-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pr-weight { display: flex; flex-direction: column; gap: 14px; }
.pr-wrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.pr-wrow .pr-wt { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text); }
.pr-wrow .pr-wp { font-family: var(--font-mono); font-size: 13px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.pr-wrow .pr-ws { grid-column: 1/-1; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pr-wbar { grid-column: 1/-1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pr-wbar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pr-wbar.dim > i { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }

/* topic tiles */
.pr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1180px) { .pr-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pr-tiles { grid-template-columns: repeat(2, 1fr); } }
.pr-tile { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 16px 16px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 11px; transition: border-color .15s, transform .12s; }
.pr-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.pr-tile:disabled { opacity: .5; cursor: default; transform: none; }
.pr-tile.mixed { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.pr-tname { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--text); line-height: 1.15; }
.pr-tbar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pr-tbar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.pr-tmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-tq { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pr-tacc { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.pr-tacc.weak { color: var(--red); }
.pr-flag { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border)); background: color-mix(in srgb, var(--red) 8%, transparent); border-radius: 999px; padding: 2px 7px; align-self: flex-start; }
.pr-flag.target { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* bottom row: lifetime stats + coach */
.pr-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pr-bottom { grid-template-columns: 1fr; } }
.pr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
.pr-kpis .kpi .n { font-size: clamp(24px, 2.2vw, 31px); }

.pr-coach { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); }
.pr-coach-body { display: flex; flex-direction: column; gap: 12px; }
.pr-coach-line { display: flex; gap: 11px; align-items: flex-start; }
.pr-coach-line .ic { width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 12px; margin-top: 1px; }
.pr-coach-line .ic.warn { background: var(--red); }
.pr-coach-line p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.pr-coach-line p b { color: var(--text); font-weight: 600; }
.pr-coach-cta { margin-top: 2px; }

.pr-voice { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--border); border-radius: 12px; padding: 13px 16px; background: var(--surface-2); }
.pr-voice .mic { width: 34px; height: 34px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pr-voice .vt b { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); display: block; }
.pr-voice .vt span { font-size: 12.5px; color: var(--muted); }
.pr-voice .vpill { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; background: var(--surface); white-space: nowrap; }

/* =====================================================================
   FIRMS — directory (firms-a) + profile (firms-b). All .fm- prefixed;
   reuses shared .dm / .card / .kpi / .mini-stats / .frow / .section-lead.
   ===================================================================== */

/* ---- filter bar ---- */
.fm-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.fm-fgroup { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; }
.fm-fgroup .fm-flabel { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--label); padding: 0 12px 0 13px; border-right: 1px solid var(--border-soft); align-self: stretch; display: flex; align-items: center; }
.fm-chips { display: flex; gap: 2px; padding: 4px; }
.fm-chip { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-body); background: transparent; border: 0; border-radius: 7px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.fm-chip:hover { background: var(--surface-2); }
.fm-chip.on { background: var(--accent); color: var(--on-accent); }
.fm-search { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); padding: 9px 14px; min-width: 220px; }
.fm-search svg { flex: none; color: var(--muted); }
.fm-search input { border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: 14px; color: var(--text); width: 100%; }
.fm-search input::placeholder { color: var(--muted); }

/* ---- results meta ---- */
.fm-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.fm-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fm-count b { color: var(--text); }
.fm-sort { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fm-sort b { color: var(--accent-strong); }

/* ---- firm grid ---- */
.fm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .fm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .fm-grid { grid-template-columns: 1fr; } }

.fm-card { text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.fm-card:hover { border-color: var(--accent); box-shadow: 0 12px 26px -14px rgba(21, 127, 60, 0.28); transform: translateY(-2px); }
.fm-card-top { display: flex; align-items: center; gap: 12px; }
.fm-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 5px; box-sizing: border-box; flex: none; }
.fm-mono { width: 44px; height: 44px; border-radius: 11px; flex: none; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text); letter-spacing: .02em; }
.fm-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.1; color: var(--text); }
.fm-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fm-tier { margin-left: auto; align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.fm-tier.bb { color: var(--accent-strong); border-color: var(--accent-strong); background: var(--green-dim); }

/* ---- the signature: 5-criteria fingerprint ---- */
.fm-fp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px 2px 2px; }
.fm-fp-col { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fm-fp-track { width: 100%; height: 60px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border-soft); display: flex; align-items: flex-end; overflow: hidden; }
.fm-fp-fill { width: 100%; background: var(--accent); border-radius: 0 0 5px 5px; }
.fm-fp-fill.hi { background: var(--accent); }
.fm-fp-fill.lo { background: var(--accent-bright); opacity: .55; }
.fm-fp-l { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fm-fp-v { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.fm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.fm-overall { display: flex; align-items: baseline; gap: 7px; }
.fm-overall .n { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.fm-overall .st { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 1px; }
.fm-nrate { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fm-win { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.fm-win.open { color: var(--on-accent); background: var(--accent-strong); border-color: var(--accent-strong); }

/* empty / unrated card variant */
.fm-card.unrated .fm-fp-fill { background: var(--surface-3); }
.fm-card.unrated .fm-overall .n { color: var(--muted); }

/* ---- page shell: results + right rail ---- */
.fm-shell { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media (max-width: 1080px) { .fm-shell { grid-template-columns: 1fr; } }
.fm-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
@media (max-width: 1080px) { .fm-rail { position: static; } }
.fm-legend-key { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; }
.fm-legend-key .k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); align-self: center; }
.fm-legend-key .v { font-size: 12.5px; color: var(--text-body); line-height: 1.35; }
.fm-legend-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.fm-legend-mini span { height: 34px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border-soft); display: flex; align-items: flex-end; }
.fm-legend-mini span i { display: block; width: 100%; background: var(--accent); border-radius: 0 0 4px 4px; }

/* ---- profile (firms-b) ---- */
.fm-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; margin-bottom: 16px; }
.fm-back:hover { color: var(--accent); }
.fm-phead { display: flex; align-items: flex-start; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--border-soft); margin-bottom: 24px; flex-wrap: wrap; }
.fm-plogo { width: 76px; height: 76px; border-radius: 18px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 10px; box-sizing: border-box; flex: none; box-shadow: var(--shadow-sm); }
span.fm-plogo { display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 20px; color: var(--text); }
.fm-phead-main { flex: 1; min-width: 280px; }
.fm-pname { font-family: var(--font-display); font-weight: 520; font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1.02; color: var(--text); margin: 2px 0 0; }
.fm-pbadges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fm-pbadge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-body); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.fm-pbadge.accent { color: var(--accent-strong); border-color: var(--accent-strong); background: var(--green-dim); }
.fm-pscore { text-align: right; flex: none; }
.fm-pscore .n { font-family: var(--font-mono); font-weight: 600; font-size: 46px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.fm-pscore .st { font-family: var(--font-mono); font-size: 15px; color: var(--accent); letter-spacing: 2px; margin-top: 6px; }
.fm-pscore .sub { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }

.fm-pgrid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .fm-pgrid { grid-template-columns: 1fr; } }

.fm-fpcard { padding: 22px 24px 20px; }
.fm-fphead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.fm-fptitle { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); }
.fm-fpnote { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fm-fp-big { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fm-fp-c { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fm-fp-t { position: relative; width: 100%; height: 150px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-soft); display: flex; align-items: flex-end; overflow: hidden; }
.fm-fp-b { width: 100%; background: var(--accent); border-radius: 0 0 8px 8px; position: relative; z-index: 1; }
.fm-fp-b.lo { background: var(--accent-bright); opacity: .6; }
.fm-fp-num { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.fm-fp-cap { text-align: center; }
.fm-fp-cap b { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.fm-fp-cap s { display: block; text-decoration: none; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.fm-fp-t::before { content: ""; position: absolute; left: 0; right: 0; top: 20%; height: 1px; background: var(--border-soft); opacity: .7; z-index: 0; }

.fm-block + .fm-block { margin-top: 22px; }
.fm-block-h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--label); margin: 0 0 9px; }
.fm-block-p { font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin: 0; }
.fm-block-p + .fm-block-p { margin-top: 10px; }
.fm-teamchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-teamchip { font-size: 13px; color: var(--text-body); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }

.fm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.fm-fact { background: var(--surface); padding: 12px 14px; }
.fm-fact .l { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fm-fact .v { font-size: 14px; color: var(--text); font-weight: 500; margin-top: 3px; }

.fm-win-card { padding: 0; overflow: hidden; }
.fm-win-top { padding: 18px 20px; border-bottom: 1px solid var(--border-soft); }
.fm-win-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--label); }
.fm-win-status { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.fm-win-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); flex: none; }
.fm-win-label { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); }
.fm-win-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.fm-conf { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-strong); border: 1px solid var(--accent-strong); background: var(--green-dim); border-radius: 999px; padding: 2px 8px; margin-top: 10px; }
.fm-win-apply { padding: 16px 20px; }
.fm-apply-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: var(--accent); color: var(--on-accent); font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; border: 0; border-radius: 10px; padding: 12px; cursor: pointer; text-decoration: none; }

.fm-post { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 20px; border-top: 1px solid var(--border-soft); align-items: center; text-decoration: none; }
.fm-post:hover .fm-post-t { color: var(--accent); }
.fm-post-t { font-size: 13.5px; font-weight: 500; color: var(--text); }
.fm-post-m { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); grid-column: 1; }
.fm-post-cyc { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-strong); border: 1px solid var(--accent-strong); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }

.fm-vault { padding: 20px; }
.fm-vault-h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--text); margin-bottom: 14px; }
.fm-lock { color: var(--muted); }
.fm-vq { position: relative; display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.fm-vq:first-of-type { border-top: 0; }
.fm-vq-n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; padding-top: 1px; }
.fm-vq-txt { font-size: 13.5px; line-height: 1.4; color: var(--text-body); filter: blur(4px); user-select: none; }
.fm-vault-cta { margin-top: 14px; }
.fm-vault-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; box-sizing: border-box; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; border-radius: 10px; padding: 11px; cursor: pointer; }
.fm-vault-btn:hover { border-color: var(--accent); color: var(--accent); }

.fm-grp + .fm-grp { border-top: 1px solid var(--border-soft); }
.fm-grp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.fm-grp-l { font-size: 13.5px; color: var(--text-body); }
.fm-grp-v { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.fm-grp-v b { color: var(--accent); }
.fm-mono-sm { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 10px; color: var(--text); box-sizing: border-box; }

/* ============================================================
   STREET VIEW (Phase C2) — editorial seed panel + quiet index tags.
   Reads window.STREETREPS_STREET_VIEW (data/firm-street-view.js) only,
   never firm_ratings/get_firm_rating_summary — a different data source
   from the crowd fingerprint above, kept visually separate (dashed/
   muted "seed" treatment, its own disclosure) so it never reads as
   real StreetReps user votes. See svEntry()/svBadge()/svPanel() in
   app.js.
   ============================================================ */
.sv-editorial { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .01em; }
.sv-index-editorial { margin: 0 0 14px; }
.sv-card .card-link { white-space: normal; text-align: right; }
.sv-limited { display: inline-block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--warn-strong); background: var(--warn-dim); border: 1px solid var(--warn); border-radius: 999px; padding: 4px 10px; }
.sv-bars { margin: 14px 0 4px; }
.sv-bar-row { display: grid; grid-template-columns: 64px 1fr 42px; align-items: center; gap: 12px; margin-bottom: 9px; }
.sv-bar-row:last-child { margin-bottom: 0; }
.sv-bar-l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.sv-bar-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.sv-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.sv-bar-v { font-family: var(--font-mono); font-size: 12px; color: var(--text-body); text-align: right; font-variant-numeric: tabular-nums; }
.sv-sources { margin-top: 16px; }
.sv-sources summary { cursor: pointer; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--label); list-style: none; }
.sv-sources summary::-webkit-details-marker { display: none; }
.sv-sources summary::before { content: '▸ '; }
.sv-sources[open] summary::before { content: '▾ '; }
.sv-source-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.sv-source { font-size: 12.5px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sv-source a { color: var(--accent-strong); text-decoration: none; }
.sv-source a:hover { text-decoration: underline; }
.sv-source-host { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
.sv-empty-note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 6px; }
.fm-sv-line { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--muted); margin-top: 3px; }

/* ============================================================
   CLUBS (view: groups) — clubs-b (directory) + clubs-a (club home)
   Page-specific, cl-/lb2- prefixed. Shared .dm/.card/.kpi/.podium/
   .mini-stats/.big-progress/.sdots/.pbar/.section-lead live above.
   ============================================================ */
/* The redesigned Clubs view owns the full editorial width: drop the legacy
   720px cap so the two-column cl-grid has room to breathe, matching Learn/
   Practice/Firms/Combine's wide .dm layout (max-width 1460, Phase A2).
   NOTE (Phase A2 fix): this used to force .dm to 100vw with a 50vw-based
   negative margin -- a full-bleed trick from the pre-sidebar topbar layout
   that measured against the true viewport. With the app-shell sidebar
   present, #view-groups (and #main) are already narrower than the viewport
   by the sidebar's width, so 100vw/50vw math overshot the real right edge by
   exactly half the sidebar width and pushed club cards off-screen. #view-
   groups is already correctly boxed by #main, so .dm here just needs the
   shared base recipe (width:100%; max-width:1460px; margin:0 auto -- see
   the shared .dm rule above) instead of its own viewport-relative rule.
   CS2-1 update: the shared .dm rule no longer caps at 1460 (that cap, still centered via
   the base .dm rule's margin:auto, reproduced dashboard's whitespace bug at wide viewports
   with the rail collapsed -- see the app-shell .dm block's comment). These inner children
   are now fluid to match, instead of re-imposing their own 1460/auto-margin cap. */
#view-groups { max-width: none; margin: 0; }
#view-groups .dm-head, #view-groups .cl-grid, #view-groups .lb-nudge, #view-groups #lbPeriods, #view-groups #lbBody, #view-groups .section-head { max-width: none; margin-left: 0; margin-right: 0; }
.cl-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 1080px){ .cl-grid { grid-template-columns: 1fr; } }
.cl-grid > .grid, .cl-grid > div > .club-layout { min-width: 0; }
.grid { display: grid; gap: 16px; }
.cl-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 4px 0; }
.cl-sidehead { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--label); margin: 0 0 14px; }

/* ---- SIGNATURE: join / create panel (directory) ---- */
.cl-join { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 62%); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 18px; padding: clamp(20px,2vw,28px); box-shadow: var(--shadow-sm); }
.cl-join-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--accent-strong); }
.cl-join-h { font-family: var(--font-display); font-weight: 520; font-size: clamp(19px,1.9vw,24px); letter-spacing: -.018em; color: var(--text); margin: 7px 0 4px; }
.cl-join-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
/* the code entry: 6 boxes + a transparent input laid over them */
.cl-code-box { position: relative; margin-bottom: 12px; }
.cl-code { display: flex; gap: 8px; }
.cl-code i { width: 46px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 24px; color: var(--text); background: var(--surface); border: 1px solid var(--border); font-style: normal; }
.cl-code i.filled { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cl-code i.caret { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.cl-code-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; background: transparent; color: transparent; cursor: pointer; font-size: 16px; letter-spacing: .5em; }
.cl-join-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-or { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.cl-create-row { display: flex; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.cl-input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--text); }
.cl-input::placeholder { color: var(--muted); }
@media (max-width: 520px){ .cl-create-row { flex-direction: column; } }

/* ---- club directory cards ---- */
.cl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
@media (max-width: 640px){ .cl-cards { grid-template-columns: 1fr; } }
.cl-card { position: relative; overflow: hidden; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0; cursor: pointer; transition: border-color .15s, transform .12s; font-family: var(--font-sans); }
.cl-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cl-card-top { display: flex; align-items: center; gap: 12px; }
.cl-card .cl-crest { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: -.02em; color: var(--on-accent); background: linear-gradient(155deg, var(--accent-bright), var(--accent)); box-shadow: none; }
.cl-card .cl-crest.alt { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.cl-cname { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-cmeta { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 3px; }
.cl-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.cl-cs { display: flex; flex-direction: column; gap: 2px; }
.cl-cs .n { font-family: var(--font-mono); font-weight: 600; font-size: 21px; color: var(--text); line-height: 1; }
.cl-cs .n.accent { color: var(--accent); }
.cl-cs .l { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.cl-code-tag { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cl-code-tag b { color: var(--accent); letter-spacing: .12em; font-weight: 600; }
.cl-open { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-strong); font-weight: 600; }

/* ---- standing-across-clubs rail (directory) ---- */
.cl-stand { display: flex; flex-direction: column; }
.cl-stand-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-soft); }
.cl-stand-row:first-child { border-top: 0; }
.cl-stand-mono { width: 38px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.cl-stand-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-stand-name { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-rankbar { display: flex; align-items: center; gap: 8px; }
.cl-rankbar .cl-track { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.cl-rankbar .cl-track > b { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.cl-rankbar .cl-of { font-family: var(--font-mono); font-size: 10px; color: var(--faint); white-space: nowrap; }
.cl-stand-rank { font-family: var(--font-mono); font-weight: 600; font-size: 17px; color: var(--accent); text-align: right; }
.cl-stand-rank s { text-decoration: none; display: block; font-size: 8.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* ---- club home: switcher chips ---- */
.cl-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cl-chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 8px 14px 8px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-chip .cl-mono { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: -.02em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.cl-chip.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.cl-chip.on .cl-mono { color: var(--on-accent); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.cl-chip.add { color: var(--accent-strong); border-style: dashed; }

/* ---- club home: masthead ---- */
.cl-mast { display: flex; align-items: flex-start; gap: 16px; }
.cl-mast .cl-crest { width: 60px; height: 60px; flex: none; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--on-accent); background: linear-gradient(155deg, var(--accent-bright), var(--accent)); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent-strong) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.cl-invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 12px; padding: 12px 16px; margin-top: 16px; }
.cl-gi-left { display: flex; flex-direction: column; gap: 2px; }
.cl-gi-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-family: var(--font-mono); }
.cl-gi-code { font-family: var(--font-mono); font-weight: 700; font-size: 21px; letter-spacing: .18em; color: var(--accent); }

/* KPI strip */
.cl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cl-kpis .kpi { padding: 4px 20px; border-left: 1px solid var(--border-soft); }
.cl-kpis .kpi:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 560px){ .cl-kpis { grid-template-columns: 1fr 1fr; gap: 16px 0; } .cl-kpis .kpi:nth-child(odd) { padding-left: 0; border-left: 0; } }

/* shared-reach bars link */
.cl-reach-link { text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--text-body); font: inherit; }
.cl-reach-link:hover { color: var(--accent-strong); }

/* ============================================================
   The Combine — score report + start screen (cmb2-*)
   Ported from combine-a.html (score report) + combine-b.html
   (start screen). Wired to the real typed/graded engine data.
   ============================================================ */
.cmb2-page { padding-top: clamp(14px,2vw,26px); }
.cmb2-report { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.cmb2-report--even { grid-template-columns: 1fr 1fr; }
.cmb2-report > * { min-width: 0; }
@media (max-width: 1080px){ .cmb2-report, .cmb2-report--even { grid-template-columns: 1fr; } }
.cmb2-report-foot { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .02em; }

/* ---- score hero card (result) + start hero (intro) share the shell ---- */
.cmb2-hero { position: relative; overflow: hidden; padding: clamp(24px,2.4vw,38px); }
.cmb2-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 120% at 100% 0, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%); }
.cmb2-hero.pad0 { padding: 0; }
.cmb2-hero.pad0::before { background: radial-gradient(64% 130% at 88% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
.cmb2-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cmb2-scap { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--label); }
.cmb2-newbest { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 999px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px; }
.cmb2-newbest::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

.cmb2-scorewrap { display: flex; align-items: flex-end; gap: clamp(20px,2.6vw,40px); margin: 20px 0 4px; flex-wrap: wrap; }
.cmb2-bignum { font-family: var(--font-mono); font-weight: 600; font-size: clamp(70px,8vw,116px); line-height: .86; letter-spacing: -0.03em;
  color: var(--text); font-variant-numeric: tabular-nums; }
.cmb2-bignum sub { font-size: 15px; vertical-align: baseline; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.cmb2-tiercol { padding-bottom: 12px; }
.cmb2-tier { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 560; font-size: clamp(22px,2vw,27px);
  letter-spacing: -0.02em; color: var(--text); }
.cmb2-tier .mark { width: 13px; height: 13px; color: var(--accent); flex: none; }
.cmb2-tiersub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-top: 6px; }

/* the 300-850 scale ruler */
.cmb2-scale { margin-top: 22px; }
.cmb2-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface-3)), color-mix(in srgb, var(--accent) 92%, transparent)); overflow: visible; }
.cmb2-tick { position: absolute; top: -6px; width: 2px; height: 22px; background: var(--border); }
.cmb2-marker { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; border-radius: 999px;
  background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--shadow-sm); transition: left .6s cubic-bezier(.2,.7,.3,1); }
.cmb2-scale-lbls { display: flex; justify-content: space-between; margin-top: 12px; }
.cmb2-scale-lbls span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.cmb2-scale-tiers { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 14px; }
.cmb2-st { text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface-2); }
.cmb2-st.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.cmb2-st b { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.cmb2-st.on b { color: var(--accent-strong); }
.cmb2-st s { text-decoration: none; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }

/* percentile ring block */
.cmb2-pct { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.cmb2-ring .fg { stroke: var(--accent); transition: stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1); }
.cmb2-pct-copy .n { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--text); }
.cmb2-pct-copy p { margin: 4px 0 0; color: var(--text-body); font-size: 14px; max-width: 40ch; }
.cmb2-pct-copy p b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.cmb2-pct-copy .sub { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

/* section breakdown bars (right column) */
.cmb2-brow { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.cmb2-brow:first-of-type { border-top: 0; padding-top: 4px; }
.cmb2-btop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cmb2-bname { font-size: 14.5px; color: var(--text); font-weight: 500; min-width: 0; }
.cmb2-bname s { text-decoration: none; color: var(--muted); font-size: 12px; margin-left: 8px; font-weight: 400; }
.cmb2-bval { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; flex: none; }
.cmb2-btrack { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.cmb2-btrack > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1s cubic-bezier(.2,.7,.3,1); }
.cmb2-brow.weak .cmb2-btrack > i { background: var(--red); }
.cmb2-wtag { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--red);
  background: var(--red-dim); border-radius: 999px; padding: 3px 8px; margin-left: 8px; }

/* answer-by-answer table */
.cmb2-qrow { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.cmb2-qrow > div { min-width: 0; }
.cmb2-qrow:first-child { border-top: 0; }
.cmb2-qn { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cmb2-qtag { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; padding: 2px 7px; }
.cmb2-qq { font-size: 13.5px; color: var(--text-body); margin-top: 4px; }
.cmb2-qmeta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.cmb2-qscore { font-family: var(--font-mono); font-weight: 600; font-size: 17px; color: var(--text); text-align: right; }
.cmb2-qscore s { text-decoration: none; font-size: 11px; color: var(--muted); }

/* leaderboard podium (compact, inside intro + result cards) */
.cmb2-podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: end; margin-bottom: 8px; }
.cmb2-pod { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); padding: 16px 12px; text-align: center; position: relative; min-width: 0; }
.cmb2-pod .medal { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: #4a3d10; }
.cmb2-pod.g { border-color: #d9b64a; background: linear-gradient(180deg, color-mix(in srgb,#e8c65c 22%, var(--surface)), var(--surface)); padding-top: 22px; }
.cmb2-pod.g .medal { background: linear-gradient(160deg,#f2d777,#cba23a); box-shadow: 0 4px 12px -6px rgba(203,162,58,.6); }
.cmb2-pod.s .medal { background: linear-gradient(160deg,#e6e6e6,#b9bcc2); color: #40434a; }
.cmb2-pod.b .medal { background: linear-gradient(160deg,#e2a878,#c07d47); color: #4a2e17; }
.cmb2-pod .nm { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmb2-pod .tr { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 2px; }
.cmb2-pod .sc { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--text); margin-top: 8px; }

.cmb2-lbrow { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.cmb2-lbrow > div { min-width: 0; }
.cmb2-lbrow.me { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 10px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.cmb2-lbrank { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.cmb2-lbnm { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmb2-lbtier { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.cmb2-lbsc { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--text); }

/* ---- start screen (intro) ---- */
.cmb2-hero-grid { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px,3vw,52px); align-items: center; }
@media (max-width: 1000px){ .cmb2-hero-grid { grid-template-columns: 1fr; } }
.cmb2-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--accent-strong); }
.cmb2-h1 { font-family: var(--font-display); font-weight: 480; font-size: clamp(36px,4.6vw,58px); line-height: 1.02; letter-spacing: -0.028em; margin: 16px 0 0; color: var(--text); }
.cmb2-h1 em { font-style: italic; color: var(--accent); }
.cmb2-sub { font-size: clamp(15px,1.3vw,17px); color: var(--text-body); max-width: 46ch; margin: 20px 0 0; line-height: 1.55; }
.cmb2-events { display: flex; gap: 10px; margin: 28px 0 0; flex-wrap: wrap; }
.cmb2-evt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 15px 8px 9px; }
.cmb2-evt .n { font-family: var(--font-mono); font-weight: 600; font-size: 11px; color: var(--on-accent); background: var(--accent); border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; }
.cmb2-evt span:last-child { font-size: 13.5px; color: var(--text); font-weight: 500; }
.cmb2-cta-row { display: flex; align-items: center; gap: 18px; margin: 32px 0 0; flex-wrap: wrap; }
.cmb2-free { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.cmb2-free b { color: var(--accent-strong); font-weight: 500; }

/* right rail: the format spec sheet */
.cmb2-spec { border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 24px; }
.cmb2-spec-h { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--label); margin-bottom: 6px; }
.cmb2-spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border-soft); }
.cmb2-spec-row:first-of-type { border-top: 0; }
.cmb2-spec-k { font-size: 13.5px; color: var(--text-body); }
.cmb2-spec-v { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--text); text-align: right; }
.cmb2-spec-v s { text-decoration: none; display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* your best score summary card */
.cmb2-best-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cmb2-best-num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(42px,4.4vw,58px); line-height: .9; color: var(--text); font-variant-numeric: tabular-nums; }
.cmb2-best-num s { text-decoration: none; font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.cmb2-tier-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 560; font-size: 20px; letter-spacing: -0.015em; color: var(--text); }
.cmb2-tier-badge .mark { width: 12px; height: 12px; color: var(--accent); flex: none; }
.cmb2-tier-sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 5px; }
.cmb2-best-ring .fg { stroke: var(--accent); }
.cmb2-best-empty { color: var(--text-body); font-size: 14.5px; line-height: 1.55; max-width: 44ch; }
.cmb2-dims { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 20px; }
.cmb2-dim { border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface); padding: 13px 12px; }
.cmb2-dim .n { font-family: var(--font-mono); font-weight: 600; font-size: 20px; color: var(--text); }
.cmb2-dim .n.weak { color: var(--red); }
.cmb2-dim .l { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 3px; }

/* "what it measures" three tiles */
.cmb2-measure { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; }
@media (max-width: 900px){ .cmb2-measure { grid-template-columns: 1fr; } }
.cmb2-mtile .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); margin-bottom: 13px; }
.cmb2-mtile .ic svg { width: 21px; height: 21px; }
.cmb2-mtile h3 { font-family: var(--font-display); font-weight: 560; font-size: 17px; margin: 0; color: var(--text); }
.cmb2-mtile p { margin: 7px 0 0; font-size: 14px; color: var(--text-body); line-height: 1.5; }

.cmb2-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px){ .cmb2-bottom { grid-template-columns: 1fr; } }

/* the game/compute screens now sit inside a .dm wrapper — keep them centered + narrow */
#cmb-game .cmb2-page, #cmb-compute .cmb2-page { max-width: 760px; }

/* ============================================================
   Learn navigation — A+C combo (lnav- track switcher + collapsible
   grouped sidebar from Direction A; lnc- search / breadcrumbs /
   prev-next from Direction C). Reuses the shipped .rd-* reader.
   ============================================================ */

/* two-pane grid: a slightly wider rail for the tree + track switcher */
.lnx-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }

/* ---- the rail ---- */
.lnx-rail {
  position: sticky; top: 84px; align-self: start;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 108px); overflow: hidden;
}

/* --- track switcher (segmented pills) — Direction A --- */
.lnav-switch { padding: 14px 14px 12px; border-bottom: 1px solid var(--border-soft); }
.lnav-switch-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--label); margin: 0 2px 8px;
}
.lnav-seg {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 3px;
}
.lnav-seg button {
  font: inherit; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px;
  color: var(--muted); background: transparent;
  padding: 7px 4px; border-radius: 7px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.lnav-seg button:hover { color: var(--text); }
.lnav-seg button.on {
  color: var(--accent-strong); background: var(--surface);
  box-shadow: 0 1px 2px rgba(26,25,23,0.06);
}

/* --- overall progress readout — Direction A --- */
.lnav-prog { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.lnav-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lnav-prog-top b { font-family: var(--font-mono); font-weight: 600; font-size: 21px; color: var(--accent); line-height: 1; }
.lnav-prog-top span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lnav-bar { height: 5px; border-radius: 999px; background: var(--surface-3); margin-top: 9px; overflow: hidden; }
.lnav-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* --- the JUMP / search field — the hero from Direction C --- */
.lnc-jump { padding: 12px 12px 10px; border-bottom: 1px solid var(--border-soft); }
.lnc-search {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: 11px; padding: 9px 11px;
  transition: border-color .14s, box-shadow .14s;
}
.lnc-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.lnc-search svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.lnc-search input.q {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--text); font-weight: 500;
}
.lnc-search input.q::placeholder { color: var(--muted); font-weight: 500; }
.lnc-kbd {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--label);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px;
}

/* live results dropped under the field */
.lnc-results { margin-top: 9px; display: flex; flex-direction: column; gap: 2px; }
.lnc-rlabel {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--label); padding: 4px 4px 5px;
}
.lnc-result {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 9px; padding: 8px 9px; cursor: pointer; font: inherit;
}
.lnc-result:hover, .lnc-result.sel { background: var(--surface-2); }
.lnc-result.sel { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.lnc-rnum {
  flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--border);
}
.lnc-result.sel .lnc-rnum { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.lnc-rmid { min-width: 0; flex: 1 1 auto; }
.lnc-rtitle { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnc-rtitle mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent-strong); padding: 0 1px; border-radius: 2px; }
.lnc-rpath { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnc-renter { flex: none; font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.lnc-result.sel .lnc-renter { color: var(--accent-strong); }
.lnc-noresult { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 8px 6px 4px; }

/* ---- scrollable grouped section list ---- */
.lnc-scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 12px; }

/* sub-track header (Technical / Behavioral / Investing) — Direction A */
.lnav-sub {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--label); padding: 14px 8px 6px;
}
.lnav-sub::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.lnav-sub:first-child { padding-top: 6px; }

/* a collapsible section (Accounting, DCF, …) — Direction C */
.lnc-sec { border-radius: 10px; }
.lnc-sec + .lnc-sec { margin-top: 1px; }
.lnc-sechead {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; padding: 9px 8px; border-radius: 9px; cursor: pointer; font: inherit;
}
.lnc-sechead:hover { background: var(--surface-2); }
.lnc-sec.open > .lnc-sechead { background: var(--surface-2); }
.lnc-caret { flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.lnc-sec.open > .lnc-sechead .lnc-caret { transform: rotate(90deg); }
.lnc-secname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.lnc-sec.active > .lnc-sechead .lnc-secname { color: var(--accent-strong); }
.lnc-seccount { flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lnc-sec.done > .lnc-sechead .lnc-seccount { color: var(--accent-strong); }
.lnc-secbar { flex: none; width: 30px; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.lnc-secbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* lessons inside an open section */
.lnc-lessons { padding: 2px 0 6px 8px; margin-left: 15px; border-left: 1px solid var(--border-soft); }
.lnc-sec:not(.open) .lnc-lessons { display: none; }
.lnc-lesson {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; padding: 6px 9px; border-radius: 8px; cursor: pointer; font: inherit;
  color: var(--text-body); font-size: 12.5px; line-height: 1.35;
}
.lnc-lesson:hover { background: var(--surface-2); }
.lnc-lesson.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); font-weight: 600; }
.lnc-tick {
  flex: none; width: 15px; height: 15px; border-radius: 999px; border: 1.5px solid var(--border);
  display: grid; place-items: center; font-size: 8px; color: var(--accent);
}
.lnc-lesson.done .lnc-tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lnc-lesson.on .lnc-tick { border-color: var(--accent); }
.lnc-ltitle { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* footer utility row — Direction A (collapse all) */
.lnav-foot {
  border-top: 1px solid var(--border-soft); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lnav-foot span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.lnav-foot button {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-strong); background: none; border: 0; padding: 0; cursor: pointer;
}
.lnav-foot button:hover { text-decoration: underline; }

/* ---- reader (right pane) — reuse the shipped rd- look ---- */
.lnc-reader { min-width: 0; }

/* breadcrumbs in the reader header — Direction C */
.lnc-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; margin-bottom: 14px;
}
.lnc-crumb { color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.lnc-crumb:hover { color: var(--text); }
.lnc-crumb.here { color: var(--accent-strong); font-weight: 600; cursor: default; }
.lnc-crumb-sep { color: var(--border); display: inline-flex; }
.lnc-crumb-sep svg { width: 11px; height: 11px; }

/* prev / next lesson controls at the foot of the reader — Direction C */
.lnc-foot { margin-top: 22px; }
.lnc-chip {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 6px 13px; margin-bottom: 14px;
}
.lnc-chip b { color: var(--accent-strong); font-weight: 600; }
.lnc-chip .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--border); }
.lnc-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lnc-pnbtn {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; font: inherit; box-shadow: var(--shadow-sm);
  transition: border-color .14s, transform .14s;
}
.lnc-pnbtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.lnc-pnbtn.next { justify-content: flex-end; text-align: right; }
.lnc-pnbtn.next .lnc-pnmid { align-items: flex-end; }
.lnc-pnarrow {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.lnc-pnbtn:hover .lnc-pnarrow { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lnc-pnarrow svg { width: 18px; height: 18px; }
.lnc-pnmid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lnc-pnkick { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.lnc-pntitle { font-family: var(--font-display); font-weight: 500; font-size: 15.5px; color: var(--text); line-height: 1.25; letter-spacing: -0.01em; }

/* mobile: rail stacks on top of the reader */
@media (max-width: 900px) {
  .lnx-grid { grid-template-columns: 1fr; gap: 18px; }
  .lnx-rail { position: static; max-height: none; }
  .lnc-scroll { max-height: 360px; }
  .lnc-pn { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lnav-seg button { font-size: 12px; padding: 7px 2px; }
  .lnc-secname { font-size: 13px; }
  .lnc-lesson { font-size: 12.5px; }
  .rd-worked .k { font-size: 11.5px; line-height: 1.85; overflow-wrap: anywhere; }
}

/* ============================================================
   Chat view — full-page coach (Claude/ChatGPT register):
   centered column, quiet thread, floating composer.
   ============================================================ */
body.on-chat .coach-fab { display: none; }
#view-chat.is-active { display: flex; flex-direction: column; height: 100vh; }
#chatBody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ch-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 850px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 32px); }
.ch-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-top: 26px; }
.ch-thread { display: flex; flex-direction: column; gap: 20px; padding-bottom: 16px; }

/* empty state */
.ch-hero { text-align: center; padding: clamp(48px, 16vh, 150px) 8px 24px; }
.ch-hello { font-family: var(--font-display); font-weight: 470; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; color: var(--text); }
.ch-hello-sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 auto 30px; max-width: 54ch; }
.ch-sugs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 620px; margin: 0 auto; }
.ch-sug { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 13px 15px; font: 550 13.5px/1.45 var(--font-sans); color: var(--text-body); cursor: pointer; transition: border-color .15s, background .15s; }
.ch-sug:hover, .ch-sug:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: var(--surface-2); outline: none; }
@media (max-width: 560px) { .ch-sugs { grid-template-columns: 1fr; } }

/* messages */
.ch-msg { display: flex; gap: 12px; align-items: flex-start; }
.ch-msg.me { justify-content: flex-end; }
.ch-msg.me .ch-body { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 16px 16px 4px 16px; padding: 11px 16px; max-width: 78%; font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.ch-avatar { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-3)); color: var(--accent-strong); font: 700 10px var(--font-mono); margin-top: 2px; }
.ch-msg.bot .ch-body { max-width: 88%; font-size: 14.5px; line-height: 1.68; color: var(--text-body); padding-top: 4px; overflow-wrap: break-word; }
.ch-msg.bot .ch-body strong { color: var(--text); }
.ch-msg.bot .ch-body code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px; }
.ch-note { margin-top: 10px; font: 500 11.5px var(--font-mono); color: var(--faint); }
.ch-msg.typing .ch-body { display: flex; gap: 5px; align-items: center; padding: 12px 0 0; }
.ch-msg.typing .ch-body span { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); animation: chDot 1.2s ease-in-out infinite; }
.ch-msg.typing .ch-body span:nth-child(2) { animation-delay: .15s; }
.ch-msg.typing .ch-body span:nth-child(3) { animation-delay: .3s; }
@keyframes chDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* composer */
.ch-composer-wrap { flex: none; padding: 10px 0 16px; }
.ch-composer { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 16px; padding: 9px 9px 9px 18px; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.ch-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ch-composer textarea { flex: 1; border: 0; background: none; resize: none; font: 500 15px/1.5 var(--font-sans); color: var(--text); outline: none; padding: 6px 0; max-height: 180px; }
.ch-composer textarea::placeholder { color: var(--faint); }
.ch-send { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background .15s, opacity .15s; }
.ch-send:hover { background: var(--accent-2); }
.ch-send:disabled { opacity: .45; cursor: default; }
.ch-send svg { width: 17px; height: 17px; }
.ch-hint { text-align: center; font-size: 11.5px; color: var(--faint); margin-top: 8px; }

/* signed-out gate (prod) */
.ch-gate { max-width: 420px; margin: 18vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 0 20px; }
.ch-gate b { font-size: 17px; color: var(--text); }
.ch-gate span { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.ch-gate .db2-btn { margin-top: 8px; }

@media (max-width: 940px) {
  #view-chat.is-active { height: calc(100vh - 68px); }
}

/* ============================================================
   Learn: professional register (matches the dashboard) + the
   paths-grid landing. Reader/rail keep their layout; headers
   drop the serif for the app's sans UI voice.
   ============================================================ */
#view-learn .dm-h1 { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 4px 0 0; }
#view-learn .dm-eyebrow { font-size: 11px; letter-spacing: .16em; }
#view-learn .rd-h1 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.015em; line-height: 1.15; }
#view-learn .dm-head { align-items: center; }

/* ============================================================
   Practice: same professional register as Learn/Dashboard (Phase A1).
   Layout, ring, hero and tile mechanics are unchanged -- this is a
   typography + spacing pass only. Every rule here is scoped under
   #view-practice: .dm-h1/.section-title/.cat-grid are shared with
   other views (Combine, Groups, Templates, News, Comps, Vault, the
   old landing cat-card grid), so the base rules stay untouched.
   ============================================================ */
#view-practice .dm-h1 { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 4px 0 0; }
#view-practice .dm-eyebrow { font-size: 11px; letter-spacing: .16em; }
#view-practice .dm-head { align-items: center; }

/* daily-set hero: keep the layout/ring, drop the serif on its titles */
#view-practice .pr-hero-title { font-family: var(--font-sans); font-weight: 650; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em; line-height: 1.15; margin: 6px 0 6px; }

/* topic tiles: same footprint for every tile incl. "Surprise me" -- explicit
   responsive columns instead of relying on the .cat-grid/.pr-tiles cascade
   order. Desktop 4-up, tablet 2-up, mobile 1-up. */
#view-practice #catGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1180px) { #view-practice #catGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { #view-practice #catGrid { grid-template-columns: 1fr; } }
#view-practice .pr-tname { font-family: var(--font-sans); }

/* section headings inside Practice (Audio practice, plus any other
   .section-title reached from here) join the sans register; the mono
   .section-lead eyebrows ("Open practice", "Your record") are unchanged. */
#view-practice .section-title { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 6px; }

/* Audio practice sits right after the daily-set/topic-tiles block and used
   to touch it directly (0px gap) -- give it the same breathing room as the
   rest of the page's vertical rhythm (.section-lead already reserves
   clamp(26px,3vw,40px) above itself for this exact purpose). */
#view-practice #audioHead { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--border-soft); }

/* ============================================================
   Firms: same professional register as Learn/Practice/Dashboard (Phase A2).
   The founder likes this view's layout, cards and tabs as-is -- this only
   retunes page/section-level chrome to sans. Card-internal serif accents
   (firm names on rows/cards, "Rating by group"/"Read the fingerprint"
   card titles, "The community fingerprint") are content styling, not page
   chrome, and are left as Fraunces on purpose.
   ============================================================ */
#view-firms .dm-h1 { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 4px 0 0; }
#view-firms .dm-eyebrow { font-size: 11px; letter-spacing: .16em; }
#view-firms .dm-head { align-items: center; }
/* firm-profile page heading (opened from a rankings card) */
#view-firms .fm-pname { font-family: var(--font-sans); font-weight: 650; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em; line-height: 1.15; }
/* the recruiting-calendar tab (reached from Firms) currently renders its
   "coming soon" placeholder; its title is a section-level heading */
#view-firms .cs-title { font-family: var(--font-sans); font-weight: 650; }

/* ============================================================
   Clubs (view: groups): same professional register (Phase A2). Layout,
   cards, and tab switching (Your clubs / The Street) are unchanged --
   sans page/section headings only.
   ============================================================ */
#view-groups .dm-h1 { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 4px 0 0; }
#view-groups .dm-eyebrow { font-size: 11px; letter-spacing: .16em; }
#view-groups .dm-head { align-items: center; }

.lp-sub { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; max-width: 62ch; }
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.lp-card { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 20px 18px; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .12s, box-shadow .15s; }
.lp-card:hover, .lp-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-sm); outline: none; }
.lp-card.start { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.lp-tag { position: absolute; top: 16px; right: 16px; font: 600 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.lp-title { font-size: 16px; font-weight: 700; color: var(--text); padding-right: 70px; }
.lp-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); flex: 1; }
.lp-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 500 11.5px var(--font-mono); color: var(--faint); }
.lp-meta b { color: var(--accent-strong); font-weight: 600; white-space: nowrap; }
.lp-bar { display: block; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.lp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
@media (max-width: 980px) { .lp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lp-grid { grid-template-columns: 1fr; } }

.lnav-back { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 2px 2px 10px; font: 600 12.5px var(--font-sans); color: var(--muted); cursor: pointer; }
.lnav-back:hover { color: var(--accent-strong); }

/* Learn landing v2: overview strip, tab filters, richer cards, up-next queue */
.lp-stats-wrap { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 14px; }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(120px, max-content)) 1fr; gap: 12px clamp(24px, 4vw, 56px); }
.lp-stat b { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-stat span { font-size: 11.5px; color: var(--muted); }
.lp-stat.wide { min-width: 0; text-align: right; }
.lp-stat.wide b { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 650; }
.lp-stats-bar { margin-top: 12px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.lp-stats-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.lp-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; margin-top: 18px; }
.lp-tabbtn { border: 0; background: transparent; font: 600 13px var(--font-sans); color: var(--muted); border-radius: 7px; padding: 7px 14px; cursor: pointer; }
.lp-tabbtn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(26,25,23,.08); }

.lp-grid { margin-top: 14px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chips i { font-style: normal; font: 550 11px var(--font-sans); color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.lp-chips i.more { color: var(--faint); background: transparent; }
.lp-beads { display: flex; gap: 4px; }
.lp-beads i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface-3); }
.lp-beads i.part { background: color-mix(in srgb, var(--accent) 38%, var(--surface-3)); }
.lp-beads i.done { background: var(--accent); }

.lp-next { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lp-next-h { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.lp-next-h b { font-size: 14px; font-weight: 650; color: var(--text); }
.lp-next-h span { font-size: 12px; color: var(--faint); }
.lp-next-row { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--border-soft); padding: 12px 18px; cursor: pointer; transition: background .15s; }
.lp-next-row:last-child { border-bottom: 0; }
.lp-next-row:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.lp-next-row .tag { font: 550 11px var(--font-sans); color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; max-width: 150px; }
.lp-next-row .mid { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-next-row .mid b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.lp-next-row .mid i { font-style: normal; font-size: 12px; color: var(--muted); }
.lp-next-row .min { font: 500 11.5px var(--font-mono); color: var(--faint); }
.lp-next-row .go { color: var(--accent-strong); font-weight: 700; }
@media (max-width: 640px) { .lp-next-row { grid-template-columns: 1fr auto; } .lp-next-row .tag, .lp-next-row .min { display: none; } }

/* Lesson reader tabs */
.rd-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; margin-bottom: 18px; }
.rd-tab { border: 0; background: transparent; font: 600 12.5px var(--font-sans); color: var(--muted); border-radius: 7px; padding: 6px 13px; cursor: pointer; }
.rd-tab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(26,25,23,.08); }

/* ============================================================
   Resume builder: template gallery + questionnaire wizard (P1 task 3).
   Professional register matching the dashboard (db2-*): sans headers,
   mono captions, one accent, existing db2-btn/db2-link buttons. Wizard
   itself is Google-Forms register -- one section per screen, a progress
   bar, big inputs, add-another cards, chip inputs. Prefix rz2- (rz- is
   already used by the audio-rehearse feature -- do not touch it).
   ============================================================ */
.rz2-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(20px, 3vw, 34px) clamp(18px, 3.4vw, 44px) 90px; }
.rz2-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.rz2-back { border: 0; background: none; padding: 0; font: 600 13px var(--font-sans); color: var(--muted); cursor: pointer; }
.rz2-back:hover { color: var(--text); }
.rz2-quiet-link { border: 0; background: none; padding: 0; font: 600 12.5px var(--font-sans); color: var(--accent-strong); cursor: pointer; }
.rz2-quiet-link:hover { color: var(--accent); }

.rz2-prog { margin-bottom: 18px; }
.rz2-prog-label { font: 500 11.5px var(--font-mono); color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.rz2-prog-bar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rz2-prog-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .35s ease; }

.rz2-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: clamp(22px, 3vw, 34px); }
.rz2-card.wide { max-width: none; }
.rz2-wrap:has(.rz2-card.wide) { max-width: 900px; }

.rz2-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; color: var(--label); margin: 0 0 6px; }
.rz2-h2 { font-family: var(--font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text); }
.rz2-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 22px; max-width: 60ch; }

.rz2-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.rz2-field:last-of-type { margin-bottom: 0; }
.rz2-label { font: 600 12.5px var(--font-sans); color: var(--text-body); }
.rz2-textarea { resize: vertical; line-height: 1.5; font-size: 14px; }

.rz2-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-soft); }

/* gallery */
.rz2-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.rz2-gcard { display: flex; flex-direction: column; gap: 12px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .12s; }
.rz2-gcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.rz2-gthumb { border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-soft); aspect-ratio: 8.5 / 11; }
.rz2-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz2-gmeta { display: flex; flex-direction: column; gap: 4px; }
.rz2-gmeta b { font-family: var(--font-sans); font-size: 15px; font-weight: 650; color: var(--text); }
.rz2-gmeta span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rz2-gcta { font: 600 12.5px var(--font-sans) !important; color: var(--accent-strong) !important; margin-top: 4px; }

/* add-another cards (education / experiences / activities) */
.rz2-list { display: flex; flex-direction: column; gap: 16px; }
.rz2-entry-card { border: 1px solid var(--border-soft); background: var(--surface-2); border-radius: 12px; padding: 18px; }
.rz2-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rz2-entry-n { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.rz2-entry-rm { border: 0; background: none; padding: 0; font: 600 12px var(--font-sans); color: var(--muted); cursor: pointer; }
.rz2-entry-rm:hover { color: var(--red); }
.rz2-entry-check { display: flex; align-items: center; gap: 8px; font: 500 13.5px var(--font-sans); color: var(--text-body); margin-bottom: 14px; cursor: pointer; }
.rz2-entry-check input { width: auto; }
.rz2-add-btn { align-self: flex-start; border: 1px dashed var(--border); background: var(--surface); color: var(--accent-strong); font: 600 13px var(--font-sans); border-radius: 9px; padding: 10px 16px; cursor: pointer; }
.rz2-add-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* chip / tag input (skills, certifications, interests) */
.rz2-tags { display: flex; flex-direction: column; gap: 8px; }
.rz2-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rz2-tagchip { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.rz2-tagx { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.rz2-tagx:hover { color: var(--red); }
.rz2-tags-input { width: 100%; }

/* review screen */
.rz2-rsection { padding: 16px 0; border-top: 1px solid var(--border-soft); }
.rz2-rsection:first-of-type { padding-top: 0; border-top: 0; }
.rz2-rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rz2-rhead b { font-family: var(--font-sans); font-size: 14.5px; font-weight: 650; color: var(--text); }
.rz2-rrow { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.rz2-rlabel { font: 550 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.rz2-rval { color: var(--text-body); line-height: 1.5; word-break: break-word; }
.rz2-gen { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rz2-gen-note { font-size: 12.5px; color: var(--muted); margin: 0; }

/* result screen: merged-docx preview + downloads (P1 task 5) */
.rz2-result { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.rz2-result-preview { min-width: 0; }
.rz2-preview-mount {
  background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 28px; max-height: 76vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
/* docx-preview's own generated markup: .docx-wrapper > section.docx is one page, rendered at
   its true Letter-size pixel width (816px @ 96dpi, fixed via an inline style) regardless of
   this rail panel's width. Capping width/max-width alone would force the text to reflow into
   a too-narrow column at full font size (wrong -- a page isn't a fluid element, it's a fixed
   sheet of paper); the correct fix is a JS-computed `transform: scale()` on the wrapper (see
   rzScalePreview in app.js, called right after docx.renderAsync resolves), which shrinks the
   whole rendered page proportionally, like zooming out on a real document. transform-origin
   top left keeps the scaled box's own top-left corner anchored so centering math is simple. */
.rz2-preview-mount .docx-wrapper { background: transparent; transform-origin: top left; }
.rz2-preview-mount .docx-wrapper section.docx {
  background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
  border-radius: 2px; margin: 0 0 24px;
}
.rz2-result-error { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px; }

.rz2-result-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; }
.rz2-score-box { border: 1px dashed var(--border); border-radius: 10px; min-height: 64px; background: var(--surface-2); }
.rz2-score-caption { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 0 0 10px; }
.rz2-result-btn { width: 100%; text-align: center; text-decoration: none; }
.rz2-result-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* score panel: deterministic linter results (P1 task 6). rzRenderScorePanel (app.js) swaps
   #rzScore's class from the dashed rz2-score-box placeholder to rz2-score-panel once the
   merge succeeds and the linter has real output to show -- professional register (mono
   score number, muted verdict word, quiet dot-list), not a gamified badge/confetti treatment. */
.rz2-score-panel { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); padding: 16px; }
.rz2-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.rz2-score-num { font-family: var(--font-mono); line-height: 1; }
.rz2-score-numval { font-size: 32px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.rz2-score-den { font-size: 14px; font-weight: 600; color: var(--faint); margin-left: 2px; }
.rz2-score-verdict { font: 650 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.rz2-score-verdict-strong { color: var(--green); background: var(--green-dim); }
.rz2-score-verdict-solid { color: var(--warn); background: var(--warn-dim); }
.rz2-score-verdict-needs-work { color: var(--red); background: var(--red-dim); }

.rz2-score-list { display: flex; flex-direction: column; gap: 11px; }
.rz2-score-row { display: flex; align-items: flex-start; gap: 9px; }
.rz2-score-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; }
.rz2-score-row.fail .rz2-score-dot { background: var(--red); }
.rz2-score-row.pass .rz2-score-dot { background: var(--green); }
.rz2-score-text { min-width: 0; }
.rz2-score-label { font: 600 12.5px var(--font-sans); color: var(--text); }
.rz2-score-row.pass .rz2-score-label { color: var(--muted); }
.rz2-score-detail { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 1px; word-break: break-word; }
.rz2-score-row.pass .rz2-score-detail { color: var(--faint); }

/* download rail: warn state when score < 60 -- an amber note above the buttons, never a
   disabled/blocked control (the brief is explicit: nudge, don't gate). */
.rz2-dl-group { display: flex; flex-direction: column; gap: 8px; }
.rz2-score-warn-note { font-size: 12px; line-height: 1.4; color: var(--warn-strong); background: var(--warn-dim); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 8px; padding: 8px 10px; margin: 0; }
.rz2-dl-warn .rz2-result-btn.primary { background: var(--warn); border-color: var(--warn); color: var(--on-accent); }
.rz2-dl-warn .rz2-result-btn.primary:hover { background: var(--warn-strong); border-color: var(--warn-strong); }

@media (max-width: 900px) {
  .rz2-result { grid-template-columns: 1fr; }
  .rz2-result-rail { position: static; order: 2; }
  .rz2-result-preview { order: 1; }
  .rz2-preview-mount { max-height: 70vh; padding: 16px; }
}

@media (max-width: 620px) {
  .rz2-rrow { grid-template-columns: 1fr; gap: 2px; }
  .rz2-gallery { grid-template-columns: 1fr 1fr; }
  .rz2-nav { flex-direction: column-reverse; align-items: stretch; }
  .rz2-nav button { width: 100%; }
}
@media (max-width: 420px) {
  .rz2-gallery { grid-template-columns: 1fr; }
}
.rd-say-cta { margin-top: 14px; }

/* A nav item whose dropdown would hold one entry renders as a plain tab (set by renderNavMenu). */
.nav-item.no-menu .tab-caret { display: none; }
.nav-item.no-menu .nav-menu { display: none; }

/* ---------- Sidebar profile popover (Settings / Sign out) ----------
   Anchored to .side-profile-wrap (the flex child that used to be .app-side-profile
   itself - margin-top:auto moved up to the wrapper so the button can stay a plain
   grid layout). Opens upward since the trigger sits at the bottom of the sidebar.
   Low-key by design: same surface/border/shadow-sm language as .nav-menu, just
   anchored bottom-up instead of top-down. */
.side-menu {
  /* left+right stretch it to the wrap in the full sidebar; min-width keeps it usable
     as a rightward flyout when the rail is collapsed to icons (wrap ~58px). */
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 170px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px; box-shadow: var(--shadow); z-index: 56;
}
.side-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 10px;
  color: var(--text); font-size: 13.5px; font-weight: 600; font-family: var(--font-sans);
}
.side-menu-item:hover { background: var(--surface-2); color: var(--accent-strong); }
.side-menu-item[hidden] { display: none; } /* author display:block would otherwise beat the UA [hidden] rule (same fix as .coach-panel) */
.side-menu-danger:hover { background: var(--red-dim); color: var(--red); }

/* Quiet way out at the bottom of the settings editor - ghost/danger-muted, never primary. */
.onboard-signout {
  display: block; width: 100%; margin-top: 18px; text-align: center;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 10px;
  color: var(--faint); font-size: 13px; font-weight: 600; font-family: var(--font-sans);
}
.onboard-signout:hover { color: var(--red); background: var(--red-dim); }

/* Quiet secondary row, same treatment as sign-out but neutral (not danger) -- sits just above it. */
.onboard-replay {
  display: block; width: 100%; margin-top: 18px; text-align: center;
  background: transparent; border: 0; border-radius: 8px; padding: 9px 10px;
  color: var(--faint); font-size: 13px; font-weight: 600; font-family: var(--font-sans);
}
.onboard-replay:hover { color: var(--accent-strong); background: var(--surface-2); }

/* ============================================================
   Onboarding tour (Phase C3): a skippable spotlight walkthrough of the
   sidebar, shown once to a freshly signed-in user (and replayable from
   Settings). Desktop dims the screen and cuts a "hole" around the current
   target via the box-shadow trick -- a small fixed box whose own huge
   box-shadow spread paints the dim color everywhere except its own border
   box, so the target itself shows through undimmed -- with a tooltip card
   placed beside it. Mobile (<=940px, where the sidebar itself becomes a
   top strip) skips the cutout entirely and centers the same 6-step card
   sequence over a plain dim backdrop.
   ============================================================ */
.tour-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: transparent;
}
.tour-overlay.tour-mobile {
  background: rgba(4,6,10,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tour-ring {
  position: fixed; background: transparent;
  border: 2px solid var(--accent); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(4,6,10,0.7);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
  pointer-events: none;
}
.tour-card {
  position: fixed; width: min(320px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 20px 22px;
  animation: rise .2s ease both;
}
.tour-overlay.tour-mobile .tour-card { position: static; }
.tour-counter { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tour-title { font-family: var(--font-sans); font-weight: 700; font-size: 17px; margin: 8px 0 6px; color: var(--text); }
.tour-body { font-size: 13.5px; line-height: 1.6; color: var(--text-body); margin: 0; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.tour-skip { background: transparent; border: 0; padding: 6px 2px; color: var(--faint); font-size: 12.5px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; }
.tour-skip:hover { color: var(--text); }
.tour-nav { display: flex; gap: 8px; }
.tour-nav .btn { padding: 8px 16px; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .tour-ring { transition: none; }
  .tour-card { animation: none; }
}

/* ---------- Landing: pricing — two plans, same spacing rhythm as .feature (Phase B3) ----------
   Stripe checkout isn't wired yet (Phase B4, blocked on live keys): Free's CTA reuses the
   existing [data-auth] gate; Reps+ is an honest disabled "coming soon" state, not a fake
   buy button. .soon-tag is the existing "Soon" pill reused verbatim from the cycle list. */
.pricing { max-width: 1240px; margin: clamp(96px, 13vw, 180px) auto; padding: 0 clamp(20px, 4vw, 44px); scroll-margin-top: 88px; } /* clears the sticky .topbar (67px) on #pricing anchor jumps */
.pricing-head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 64px); }
.pricing-title { font-family: var(--font-display); font-weight: 458; font-size: clamp(27px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.022em; margin: 0 0 14px; color: var(--text); }
.pricing-sub { color: var(--text-body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; margin: 0; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px); max-width: 840px; margin: 0 auto; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(26px, 3vw, 34px); box-shadow: var(--shadow-sm); }
.pricing-card.is-accent { border-color: var(--accent); box-shadow: 0 6px 20px -12px color-mix(in srgb, var(--accent) 35%, transparent); }
.pricing-card .soon-tag { align-self: flex-start; }
.pricing-card-head { display: flex; flex-direction: column; gap: 6px; }
.pricing-plan { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0; color: var(--text); }
.pricing-price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.pricing-price .amount { font-family: var(--font-display); font-weight: 458; font-size: clamp(34px, 4vw, 44px); letter-spacing: -0.02em; color: var(--text); }
.pricing-price .period { font-size: 14px; color: var(--muted); }
.pricing-list-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--label); margin: 0; }
.pricing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pricing-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.pricing-check { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--accent-strong); }
.pricing-list.is-soon .pricing-check { color: var(--faint); }
.pricing-cta { width: 100%; margin-top: auto; }
.pricing-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin: 0; text-align: center; }
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
}

/* pricing: muted usage-limit annotations on plan rows */
.pricing-list .pl-t { min-width: 0; }
.pricing-list .lim { font-style: normal; color: var(--faint); font-size: 12px; margin-left: 2px; }

/* firm card: the viewer's own scores stand in until the community average exists */
.fm-fp-fill.own { background: color-mix(in srgb, var(--accent) 42%, var(--surface-3)); }