/* JeffENT Rotation Companion, "Cool Precision": cool slate + teal-blue,
   crisp editorial structure (seam-grid layout, flat surfaces), amber accent,
   semantic red-flag preserved in data even though the UI badges were removed. */

:root {
  /* "Midnight Cobalt": cool neutral canvas, cobalt-blue primary, deep
     midnight-slate hero, no orange/amber/yellow anywhere in the palette. */
  --ground: #e7ecf5;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #edf1f6;
  --primary: #2563eb;
  --primary-deep: #1d4ed8;
  --primary-tint: #eff6ff;
  --accent: #0ea5e9;
  --accent-tint: #f0f9ff;
  --hero-bg: #1b1f3b;      /* deep midnight slate: hero banner + high-emphasis surfaces */
  --hero-ink: #f4f6ff;
  --hero-ink-soft: #b9bfe0;
  --flag: #dc2626;         /* semantic: red-flag / don't-miss */
  --flag-tint: #fef2f2;
  --good: #059669;
  --muted-label: #94a3b8;  /* eyebrow / section-label color, replaces the old amber */
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px -8px rgba(15,23,42,.10);
  --shadow-lift: 0 4px 10px rgba(15,23,42,.06), 0 22px 40px -20px rgba(15,23,42,.18);
  --radius: 14px;
  --radius-lg: 18px;
  --sidenav-w: 288px;
  --flashpanel-w: min(380px, 33vw); /* neither rail may exceed 1/3 of the viewport */
  --pimppanel-w: min(380px, 33vw); /* mirrors --flashpanel-w; only one of the two right rails is ever open at once */
  --tb-l: 0px; --tb-r: 0px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --scroll-tint: #2f6ff0;  /* light mode: a genuinely saturated blue -- mixed in at a low
                               percentage this reads as "tinted", not "went dark/gray" the
                               way a desaturated navy would at the same lightness drop */
  --scroll-progress: 0;    /* 0 at top of page, 1 at bottom -- kept in sync by initScrollTint() in app.js */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #10131f; --surface: #1a1e30; --surface-2: #212540;
    --ink: #e4e8ff; --ink-soft: #a8b0d6; --ink-faint: #767ea8;
    --line: #2c3153; --line-soft: #262a48;
    --primary: #7fa6ff; --primary-deep: #9db6ff; --primary-tint: #202a4d;
    --accent: #67c9f2; --accent-tint: #182a38;
    --hero-bg: #0d0f22; --hero-ink: #f4f6ff; --hero-ink-soft: #9aa2d6;
    --flag: #f0847a; --flag-tint: #34211f;
    --good: #6cd6ab;
    --muted-label: #767ea8;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -16px rgba(0,0,0,.5);
    --scroll-tint: #0a1330;  /* dark mode: deep indigo -- blue-hued but darker than --ground, so
                                 scrolling down still reads as "deeper", not "brighter" */
  }
}
:root[data-theme="dark"] {
  --ground: #10131f; --surface: #1a1e30; --surface-2: #212540;
  --ink: #e4e8ff; --ink-soft: #a8b0d6; --ink-faint: #767ea8;
  --line: #2c3153; --line-soft: #262a48;
  --primary: #7fa6ff; --primary-deep: #9db6ff; --primary-tint: #202a4d;
  --accent: #67c9f2; --accent-tint: #182a38;
  --hero-bg: #0d0f22; --hero-ink: #f4f6ff; --hero-ink-soft: #9aa2d6;
  --flag: #f0847a; --flag-tint: #34211f;
  --good: #6cd6ab;
  --muted-label: #767ea8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -16px rgba(0,0,0,.5);
  --scroll-tint: #0a1330;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Ambient scroll gradient: a real top-to-bottom gradient sits behind the
   page at all times (not a flat color swap) -- background-attachment:
   fixed pins it to the viewport, so the top of whatever's currently on
   screen is always the lighter stop and the bottom the (scroll-adjusted)
   deeper one. Both stops mix in more --scroll-tint the further down the
   page you are, via initScrollTint() in app.js keeping --scroll-progress
   (0 at the top of the page, 1 at the bottom) synced to scroll position;
   this rule only ever reads it. Kept deliberately faint -- low single-
   digit percentages -- so it reads as a mood shift, not a color change.
   Falls back to flat --ground with no JS (the property stays at 0). */
body {
  margin: 0; color: var(--ink);
  background-color: var(--ground);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--scroll-tint) calc(1% + var(--scroll-progress, 0) * 3%), transparent),
    color-mix(in srgb, var(--scroll-tint) calc(3% + var(--scroll-progress, 0) * 9%), transparent) 100%);
  background-attachment: fixed;
  font-family: "Work Sans", system-ui, -apple-system, sans-serif;
  font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; width: 100%; }
.mono { font-family: "JetBrains Mono", monospace; }
h1,h2,h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
p { margin: 0 0 .9em; }
button { font-family: inherit; cursor: pointer; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 20; }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 22px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 10px 18px -14px rgba(15,23,42,.14);
}
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 3px; border-radius: 10px;
  min-width: 0; flex: 1 1 auto; }
.brand:hover { background: var(--surface-2); }
.brand > div { min-width: 0; overflow: hidden; }
/* Same hand-drawn monoline convention as every track/eyebrow icon on the
   site (viewBox, currentColor stroke, round caps) instead of the old
   gradient/glow raster logo -- an ear with sound reaching it, since that's
   legible at a glance and matches the icon language used everywhere else. */
.mark { color: var(--primary); display: grid; place-items: center; width: 42px; height: 42px;
  background: var(--primary-tint); border-radius: 11px; flex: 0 0 auto; }
.brand-mark { width: 58%; height: 58%; display: block; }
/* Truncates fluidly with whatever room the flex row actually has, at any
   viewport width, instead of the old fixed 1.5rem block wrapping onto a
   second/third line and pushing the icon cluster off-screen once the
   window narrows past the point where "ENT Rotation Companion" fits. */
.brand-name { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 1.28rem; line-height: 1.1; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(46vw, 320px); }
.brand-sub { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 12px; color: var(--ink-faint); font-size: 13.5px; min-width: 190px; }
@media (max-width: 640px) { .search { display: none; } }
/* Icon cluster reads as one grouped control (shared tint container) instead
   of loose separately-bordered squares, with tighter internal gap between
   the icons themselves than the gap separating the cluster from search/theme. */
.icon-cluster { display: flex; align-items: center; gap: 4px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 3px; flex: 0 0 auto; }
.icon-btn { border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  width: 34px; height: 34px; border-radius: 7px; font-size: 15.5px; flex: 0 0 auto;
  transition: color .16s var(--ease-out), background-color .16s var(--ease-out), transform .12s var(--ease-out); }
.icon-btn:hover { color: var(--primary-deep); background: var(--surface); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn[aria-expanded="true"] { color: var(--primary-deep); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn svg { width: 17px; height: 17px; display: block; }
/* nav-toggle stands alone (not inside .icon-cluster), so it keeps its own
   border/surface treatment rather than relying on a shared group container. */
.nav-toggle { border-color: var(--line); background: var(--surface); }
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle svg { width: 18px; height: 18px; }

/* ---- mobile topbar: everything above wraps to 3 lines and overflows the
   viewport below ~480px (fixed 56px brand mark + 1.5rem name + 4 full-size
   icon buttons never fit 375px). One row, always, on phones -- shrink the
   brand mark, drop the subtitle, truncate the name, and tighten the icon
   cluster instead of letting flex wrap or overflow it off-screen. */
@media (max-width: 560px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand .mark { width: 36px; height: 36px; border-radius: 9px; }
  .brand > div { min-width: 0; overflow: hidden; }
  .brand-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { display: none; }
  .tb-right { gap: 6px; flex: 0 0 auto; }
  .icon-btn { width: 34px; height: 34px; font-size: 14.5px; }
}

/* ---- layout ---- */
main.wrap { padding-top: 48px; padding-bottom: 60px; min-height: 60vh; }
.screen { animation: fade .28s var(--ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted-label); font-weight: 600; }
.h-lead { font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: -.015em; margin: 12px 0 0; }
.sub { color: var(--ink-soft); max-width: 58ch; margin-top: 14px; }

/* ---- home hero ---- */
.home-hero { margin: 6px 0 36px; max-width: 640px; }
.hero-title { font-size: clamp(2.1rem, 5.5vw, 3.1rem); letter-spacing: -.02em; margin: 14px 0 0; }
.hero-sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 56ch; margin-top: 14px; }

/* ---- shared per-track badge (icon + accent color) ---- */
.track-badge { line-height: 1; }
.eyebrow-row { display: flex; align-items: center; gap: 9px; }
.eyebrow-icon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 16%, var(--surface));
  color: var(--track-color, var(--primary)); }
.eyebrow-icon .track-symbol { display: block; }
.track-head { margin-bottom: 2px; }
.mod-head .eyebrow-row { margin-bottom: 2px; }

/* ---- home dashboard ---- */
.btn { border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 11px 20px; border-radius: 6px; font-weight: 600; font-size: 15px;
  transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out), transform .12s var(--ease-out); }
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn { color: #06211f; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .btn { color: #fff; } }
.btn:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--primary); }
.btn.ghost:hover { background: var(--primary-tint); }
.btn.small { padding: 8px 14px; font-size: 14px; }

.callout { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 16px 18px; margin: 22px 0; }
.callout .tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding-top: 3px; white-space: nowrap; }
.callout p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 4px; flex-wrap: wrap; }
.section-head h2 { font-size: 1.5rem; }
.section-head .count, .section-head .hint { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-faint); }
.section-head.feed-head { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line-soft); }

/* ---- home: segmented statistics widget ---- */
/* One unified card, divided into segments by a vertical hairline, instead of
   three separate boxes -- reads as a single instrument panel. Each segment
   is a real button (jumps to the roadmap / due queue / settings), and the
   whole panel can be minimized to a one-line summary via .dash-toggle. */
.dash-panel { margin: 26px 0 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.dash-head { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.dash-panel.collapsed .dash-head { border-bottom: 0; }
.dash-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 600; }
.dash-toggle { display: flex; align-items: center; gap: 6px; border: 0; background: none;
  color: var(--ink-soft); font-size: 12px; font-weight: 500; padding: 4px 8px; margin: -4px -8px;
  border-radius: 7px; cursor: pointer; transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.dash-toggle:hover { color: var(--ink); background: var(--surface-2); }
.dash-chev { font-size: 9px; transition: transform .2s var(--ease-out); }
.dash-panel.collapsed .dash-chev { transform: rotate(180deg); }
.progress-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.dash-panel.collapsed .progress-strip { display: none; }
@media (max-width: 760px) { .progress-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .progress-strip { grid-template-columns: 1fr; } }
.dash-summary { display: none; padding: 13px 18px; font-size: 13px; color: var(--ink-soft); }
.dash-panel.collapsed .dash-summary { display: block; }
.pcard { padding: 18px 22px; border-left: 1px solid var(--line-soft); border-top: 0; border-right: 0; border-bottom: 0;
  background: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background-color .15s var(--ease-out), transform .1s var(--ease-out); }
.pcard:hover { background: var(--surface-2); }
.pcard:active { transform: translateY(1px); }
.pcard:first-child { border-left: 0; }
@media (max-width: 760px) { .pcard:nth-child(2n+1) { border-left: 0; } .pcard:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }
@media (max-width: 420px) { .pcard { border-left: 0 !important; } .pcard:not(:first-child) { border-top: 1px solid var(--line-soft); } }
.pcard .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.pcard .big { font-family: "Source Serif 4", serif; font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pcard .cta-hint { font-size: 11px; color: var(--primary); margin-top: 6px; opacity: 0; transform: translateY(-2px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
.pcard:hover .cta-hint, .pcard:focus-visible .cta-hint { opacity: 1; transform: none; }
.bar { height: 6px; background: var(--surface-2); overflow: hidden; margin-top: 10px; border-radius: 99px; }
.bar > i { display: block; height: 100%; background: var(--primary); transition: width .5s var(--ease-out); border-radius: 99px; }
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none; } }

/* mini 7-day activity sparkline under the streak stat */
.spark-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.spark rect { fill: var(--primary); }
.spark-lbl { font-size: 10px; color: var(--ink-faint); font-family: "JetBrains Mono", monospace; }

/* ---- home: subspecialty tile grid ---- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
@media (min-width: 1180px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tile-grid { grid-template-columns: 1fr; } }
/* Two-tone card: a pastel-tinted banner (icon + badge) over a plain white body. */
.tile { text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); background: var(--surface); overflow: hidden;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
  display: flex; flex-direction: column; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .tile:not(:disabled):hover { transform: translateY(-3px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--track-color, var(--primary)) 10%, rgba(15,23,42,.06)),
      0 22px 40px -20px color-mix(in srgb, var(--track-color, var(--primary)) 28%, rgba(15,23,42,.18));
    border-color: color-mix(in srgb, var(--track-color, var(--primary)) 45%, var(--line)); }
}
.tile:not(:disabled):active { transform: translateY(-1px); box-shadow: var(--shadow); }
.tile:disabled { cursor: default; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }
/* No position/z-index here on purpose: .tile-body overlaps this banner by
   20px (see its negative margin below), and .tile-body must stay the
   later-in-DOM, non-positioned sibling so normal paint order puts it above
   the banner in that overlap band. Giving the banner `position: relative`
   promoted it into its own paint layer, which then painted ON TOP of
   .tile-body in that band regardless of DOM order -- faded/"cut"-looking
   card titles across every tile. overflow:hidden alone is enough to clip
   the gradient to the banner's own box; it needs no positioning context. */
.tile-banner { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 34px; overflow: hidden;
  background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--track-color, var(--primary)) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--track-color, var(--primary)) 8%, var(--surface)); }
.tile-body { background: var(--surface); padding: 14px 18px 18px; margin-top: -20px;
  display: flex; flex-direction: column; gap: 10px; }
.tile-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.08);
  color: var(--track-color, var(--primary)); }
.tile-icon .track-symbol { display: block; font-size: 22px; }
.chip { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--ink-soft); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.06); border: none; }
.tile h3 { font-size: 1.05rem; color: var(--ink); }
.tile .meta { font-size: 12.5px; color: var(--ink-faint); font-family: "JetBrains Mono", monospace; }
.tile .bar > i { background: var(--track-color, var(--primary)); }

/* ---- home: vertical feature-row feed (replaces the tile grid below the
   filter pills) -- one wide horizontal card per subspecialty, a continuous
   scroll feed instead of a grid. Flatter and denser than the rest of the
   site's card language on purpose, per spec: 8px radius cap, flat elevation,
   4px left accent border keyed to the track's own color. ---- */
.feature-list { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }
.feature-row { display: flex; align-items: center; gap: 20px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--track-color, var(--primary));
  border-radius: 8px; padding: 22px 24px; cursor: pointer;
  transition: border-color .16s var(--ease-out), background-color .16s var(--ease-out); }
.feature-row:hover { background: color-mix(in srgb, var(--track-color, var(--primary)) 4%, var(--surface));
  border-color: var(--line); border-left-color: var(--track-color, var(--primary)); }
.feature-row:disabled { cursor: default; opacity: .55; }
.fr-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 14%, var(--surface));
  color: var(--track-color, var(--primary)); }
.fr-icon .track-symbol { display: block; font-size: 24px; }
.fr-body { flex: 1 1 auto; min-width: 0; }
.fr-body h3 { font-size: 1.15rem; color: var(--ink); }
.fr-anchors { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; font-family: "JetBrains Mono", monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-stats { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.fr-progress { width: 110px; }
.fr-progress .fr-pct { font-size: 12px; color: var(--ink-soft); font-family: "JetBrains Mono", monospace; margin-bottom: 5px; }
.fr-pill { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-deep); }
.fr-emergency { font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  background: var(--flag-tint); color: var(--flag); }
.fr-cta { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background-color .16s var(--ease-out); }
.feature-row:hover .fr-cta { color: #fff; background: var(--primary); border-color: var(--primary); }
@media (max-width: 760px) {
  .feature-row { flex-wrap: wrap; }
  .fr-stats { width: 100%; justify-content: space-between; }
  .fr-cta { margin-left: auto; }
}

/* ---- home: filter bar (pill category filters above the tile grid) ---- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; }
.filter-pill { font-size: 13px; font-weight: 500; color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out); }
.filter-pill:hover { border-color: var(--ink-faint); color: var(--ink); }
.filter-pill.active { background: var(--hero-bg); border-color: var(--hero-bg); color: #fff; }
/* Scrollspy: a soft ring, not a solid fill, so it never reads as "this is
   the applied filter" -- only .active (an actual click) does that. */
.filter-pill.spy-active:not(.active) { border-color: var(--track-color, var(--primary)); color: var(--ink); box-shadow: 0 0 0 1px var(--track-color, var(--primary)); }

/* ---- slim sticky wayfinding strip: pinned just under the topbar on any
   screen that opts in (module, anatomy detail, ...). Deliberately quiet --
   a translucent one-line strip, not a second header competing with the
   real title below it, which scrolls away normally. ---- */
.page-head { position: sticky; top: var(--topbar-h, 73px); z-index: 8;
  background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(10px);
  margin: 0 -20px 0; padding: 10px 20px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden; }
.page-head .crumb, .page-head .ph-eyebrow, .page-head .crumb-sep { flex: 0 0 auto; }
.page-head .crumb { margin-bottom: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); opacity: .85; }
.page-head .crumb:hover { color: var(--primary); opacity: 1; }
.page-head .crumb-sep { color: var(--line); font-size: 12px; }
.page-head .ph-eyebrow { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0;
  cursor: pointer; transition: opacity .15s ease; }
.page-head .ph-eyebrow .eyebrow-icon { width: 18px; height: 18px; border-radius: 5px; opacity: .8; }
.page-head .ph-eyebrow .eyebrow-icon svg { width: 11px; height: 11px; }
.page-head .ph-eyebrow .eyebrow { font-size: 10px; opacity: .8; }
.page-head .ph-eyebrow:hover { opacity: .75; }
.page-head .ph-eyebrow:hover .eyebrow { color: var(--primary); }
.page-head .ph-current { font-family: "Source Serif 4", serif; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; text-align: left;
  background: none; border: 0; padding: 2px 0; cursor: pointer; transition: color .15s ease; }
.page-head .ph-current:hover { color: var(--primary); }
@media (max-width: 640px) { .page-head { margin: 0 -16px 0; padding: 8px 16px; } }

/* ---- module / track view ---- */
.crumb { background: none; border: 0; color: var(--primary); font-size: 14px; padding: 0; margin-bottom: 14px; font-weight: 500; }
.crumb:hover { text-decoration: underline; }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding-top: 24px; }
.mod-head h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -.01em; }
.mod-head .sub { color: var(--ink-soft); margin-top: 8px; max-width: 52ch; }
.status-chip { font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 5px 11px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent); white-space: nowrap; }

/* Segmented capsule controller: one pill-shaped track holding all segments,
   the active one lifted onto its own white chip -- reads as "one control
   with a position", not a row of independent underlined links. */
.tabs { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 4px; margin: 28px 0 32px; overflow-x: auto; width: fit-content; max-width: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%); }
.tab { border: 0; background: none; padding: 9px 18px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  border-radius: 8px; white-space: nowrap; flex: 0 0 auto;
  transition: color .16s var(--ease-out), background-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.tab:hover { color: var(--ink); }
@media (max-width: 560px) {
  .tabs { margin: 20px 0 20px; width: 100%; }
  .tab { padding: 9px 14px; font-size: 13.5px; flex: 1 1 auto; text-align: center; }
  .panel { padding: 20px 18px; }
}
.tab[aria-selected="true"] { color: var(--primary-deep); background: var(--surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 0 rgba(15,23,42,.03); font-weight: 600; }
:root[data-theme="dark"] .tab[aria-selected="true"], :root:not([data-theme="light"]) .tab[aria-selected="true"] {
  box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .25s ease; }
@media (prefers-reduced-motion: reduce) { .tabpane.active { animation: none; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 30px; box-shadow: var(--shadow); margin-bottom: 28px;
  transition: box-shadow .18s var(--ease-out), transform .18s var(--ease-out); }
.panel:last-child { margin-bottom: 0; }
.panel h3 { font-size: 1.18rem; margin-bottom: 10px; }
.panel p.panel li { color: var(--ink-soft); font-size: 15px; }
.panel ul { padding-left: 1.15em; margin: .4em 0; }
.panel li { margin: .28em 0; }
.panel strong { color: var(--ink); }
.empty-note { color: var(--ink-faint); font-size: 14px; font-style: italic; padding: 6px 0; }

/* ---- anatomy tab: SaaS-dashboard topic grid -> full-width detail page ----
   A single track-tinted accent (via --track-color) carries the whole
   section instead of a rotating six-color cycle -- one considered color
   decision instead of six arbitrary ones. Each card's media slot shows a
   real figure thumbnail when the note/diagram has one, else a tinted
   track-icon placeholder so nothing looks broken or empty. A shared dot+
   label visual language (section head, card chip) ties the whole page
   together as one system rather than disconnected components. */
.tg-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 0 0 32px; padding: 22px 26px 22px 30px;
  border-radius: var(--radius-lg); border: 1px solid var(--line-soft); overflow: hidden;
  background: radial-gradient(130% 170% at 0% 0%, color-mix(in srgb, var(--track-color, var(--primary)) 9%, transparent), transparent 65%), var(--surface); }
.tg-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--track-color, var(--primary)); }
.tg-hero-title { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -.02em; margin-bottom: 8px; }
.tg-hero-sub { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; max-width: 56ch; margin: 0; }
.tg-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.tg-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 6px 12px; border-radius: 8px; background: var(--surface); color: var(--ink-soft); white-space: nowrap;
  border: 1px solid var(--line); }

.tg-filter-bar { position: relative; display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.tg-filter { background: none; border: 0; padding: 2px 0 13px; font-size: 14.5px; font-weight: 500; color: var(--ink-faint);
  letter-spacing: .01em; transition: color .15s var(--ease-out), transform .15s var(--ease-out); }
.tg-filter:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.tg-filter.active { color: var(--ink); font-weight: 600; }
.tg-filter:hover:not(.active) { color: var(--ink-soft); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .tg-filter:hover:not(.active) { transform: none; } }
/* animated sliding underline, positioned by JS to sit under whichever pill is active */
.tg-filter-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--primary);
  transition: left .22s var(--ease-drawer, ease), width .22s var(--ease-drawer, ease); }
@media (prefers-reduced-motion: reduce) { .tg-filter-indicator { transition: none; } }

/* Notes and Diagrams render as two distinct sections, stacked with real
   vertical separation, instead of one merged grid where a note card and a
   diagram card could land side by side in the same row -- especially
   confusing when their titles cover the same topic. */
.tg-sections { display: flex; flex-direction: column; gap: 44px; transition: opacity .14s ease; }
.tg-sections.tg-grid-fade { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .tg-sections, .tg-sections.tg-grid-fade { transition: none; opacity: 1; } }
.tg-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.tg-group-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-faint); }
.tg-group-dot.diagram { background: var(--track-color, var(--primary)); }
.tg-group-title { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 1.2rem; color: var(--ink);
  letter-spacing: -.01em; }
.tg-group-rule { flex: 1 1 auto; height: 1px; background: var(--line-soft); }
.tg-group-count { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint); background: var(--surface-2);
  padding: 3px 10px; border-radius: 999px; }

.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 8px; }
.tg-card { position: relative; text-align: left; border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; width: 100%;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.tg-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
  background: var(--ink-faint); opacity: .3; }
.tg-card[data-kind="diagram"]::before { background: var(--track-color, var(--primary)); opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .tg-card:hover { transform: translateY(-4px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--track-color, var(--primary)) 10%, rgba(15,23,42,.06)),
      0 22px 40px -20px color-mix(in srgb, var(--track-color, var(--primary)) 28%, rgba(15,23,42,.18));
    border-color: color-mix(in srgb, var(--track-color, var(--primary)) 45%, var(--line)); }
  .tg-card:hover .tg-media img { transform: scale(1.06); }
  .tg-card:hover .tg-media .tg-placeholder-icon { transform: scale(1.1) rotate(-4deg); }
}
.tg-card:active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .tg-card, .tg-card .tg-media img, .tg-card .tg-placeholder-icon { transition: none; } }
.tg-media { margin: 12px 12px 0; border-radius: 13px; aspect-ratio: 16/10; display: flex; align-items: center;
  justify-content: center; overflow: hidden; background: color-mix(in srgb, var(--track-color, var(--primary)) 8%, var(--surface-2)); }
.tg-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .3s var(--ease-out); }
.tg-placeholder-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 20%, var(--surface)); color: var(--track-color, var(--primary));
  transition: transform .3s var(--ease-out); }
.tg-placeholder-icon .track-symbol svg { width: 22px; height: 22px; }
.tg-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.tg-body h3 { font-size: 1rem; color: var(--ink); line-height: 1.3; letter-spacing: -.005em; }
.tg-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-chip { align-self: flex-start; margin-top: 4px; display: flex; align-items: center; gap: 5px;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--ink-faint); }
.tg-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
.tg-chip.diagram { color: var(--track-color, var(--primary)); }
.tg-chip.diagram::before { background: var(--track-color, var(--primary)); }

.anatomy-detail { animation: fade .2s ease; }
@media (prefers-reduced-motion: reduce) { .anatomy-detail { animation: none; } }
.anatomy-back { background: none; border: 0; color: var(--primary); font-size: 14px; padding: 0; margin-bottom: 16px; font-weight: 500; }
.anatomy-back:hover { text-decoration: underline; }
.anatomy-detail-title { font-size: 1.4rem; margin: 0; }
/* one-line "what this page covers" caption used on clinical-block panels
   (the anatomy lesson header uses .lesson-tagline instead -- see below). */
.detail-tagline { color: var(--ink-faint); font-size: 13px; line-height: 1.45; margin: -6px 0 16px; max-width: 640px; }
.panel .detail-tagline { margin-bottom: 14px; }
.anatomy-detail-body.panel { max-width: 720px; }

/* ---- anatomy lesson page: sidebar + track-tinted hero + next-lesson nav ----
   Same "one considered accent color" language as .tg-hero, so a lesson page
   reads as a continuation of the topic-grid overview it was opened from,
   not a plainer sub-page. */
.lesson-shell { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 900px) { .lesson-shell { grid-template-columns: 216px minmax(0, 1fr); gap: 32px; } }

.lesson-nav { order: -1; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 14px; }
.lesson-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 0 6px 10px; }
.lesson-nav-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.lesson-nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
  padding: 10px 6px 4px; }
.lesson-nav-group:first-child { padding-top: 0; }
.lesson-nav-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; border: 0;
  background: none; border-radius: 8px; padding: 7px 6px; font-size: 13px; line-height: 1.35; color: var(--ink-soft);
  transition: background-color .14s var(--ease-out), color .14s var(--ease-out); }
.lesson-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.lesson-nav-item.active { background: color-mix(in srgb, var(--track-color, var(--primary)) 12%, var(--surface-2)); color: var(--ink); font-weight: 600; cursor: default; }
.lesson-nav-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; margin-top: 5px;
  background: var(--line); }
.lesson-nav-item.active .lesson-nav-dot { background: var(--track-color, var(--primary)); }
@media (max-width: 899px) {
  .lesson-nav { order: 0; }
  .lesson-nav-list { max-height: none; flex-direction: row; overflow-x: auto; overflow-y: visible; gap: 8px;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .lesson-nav-group { display: none; }
  .lesson-nav-item { flex: 0 0 auto; width: auto; white-space: nowrap; border: 1px solid var(--line-soft); padding: 7px 12px; }
  .lesson-nav-item .lesson-nav-dot { margin-top: 0; align-self: center; }
}

.lesson-main { min-width: 0; }
.lesson-hero { position: relative; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 18px 22px 20px; margin-bottom: 24px;
  background: radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--track-color, var(--primary)) 10%, transparent), transparent 65%), var(--surface); }
.lesson-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--track-color, var(--primary)); }
/* kicker top-left, tagline top-right, on one row when there's room; the
   tagline drops to its own line (still up top, not under the title) once
   the card gets too narrow to fit both side by side. */
.lesson-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lesson-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--track-color, var(--primary)); font-weight: 600; }
.lesson-tagline { color: var(--ink-faint); font-size: 12px; line-height: 1.4; text-align: right; max-width: 300px; }
.lesson-title { font-size: 1.4rem; margin: 10px 0 0; }
@media (max-width: 640px) { .lesson-tagline { text-align: left; max-width: none; } }

/* Compact top-of-page mirror of .lesson-next below, so advancing to the next
   lesson doesn't require scrolling past the whole note/diagram body first. */
.lesson-next-top { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 12px 6px 14px;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 6%, var(--surface));
  color: var(--track-color, var(--primary)); font-size: 12.5px; font-weight: 600;
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out); }
.lesson-next-top::before { content: "Next:"; color: var(--ink-faint); font-weight: 500; }
.lesson-next-top:hover { border-color: color-mix(in srgb, var(--track-color, var(--primary)) 45%, var(--line)); transform: translateX(1px); }
@media (prefers-reduced-motion: reduce) { .lesson-next-top:hover { transform: none; } }
.lesson-next-top-title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lesson-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  margin-top: 28px; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--track-color, var(--primary)) 6%, var(--surface)); text-align: left;
  transition: border-color .16s var(--ease-out), transform .16s var(--ease-out), background-color .16s var(--ease-out); }
.lesson-next:hover { border-color: color-mix(in srgb, var(--track-color, var(--primary)) 45%, var(--line)); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .lesson-next:hover { transform: none; } }
.lesson-next-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lesson-next-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.lesson-next-title { font-family: "Source Serif 4", serif; font-size: 1.05rem; color: var(--ink); }
.lesson-next-arrow { flex: 0 0 auto; font-size: 1.3rem; color: var(--track-color, var(--primary)); transition: transform .16s var(--ease-out); }
.lesson-next:hover .lesson-next-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .lesson-next:hover .lesson-next-arrow { transform: none; } }
div.anatomy-detail-body:not(.panel) { max-width: 720px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
div.anatomy-detail-body:not(.panel) strong { color: var(--ink); }
div.anatomy-detail-body:not(.panel) ul { padding-left: 1.2em; margin: .5em 0; }
div.anatomy-detail-body:not(.panel) li { margin: .3em 0; }
/* the diagram detail body IS a .panel (from buildDiagramPanel), let its stage breathe at full page width */
.anatomy-detail-body.panel .diagram-stage svg.anatomy-detail-body.panel .stack-stage { max-width: 420px; }

.study-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--hero-bg); border: 1px solid transparent; border-radius: var(--radius-lg);
  padding: 24px 26px; flex-wrap: wrap; }
.study-cta .eyebrow { color: var(--hero-ink-soft); }
.study-cta .n { font-family: "Source Serif 4", serif; font-size: 1.4rem; color: var(--hero-ink); margin-top: 6px; }
.study-cta .cta-sub { color: var(--hero-ink-soft); font-size: 14px; margin-top: 6px; }
.study-cta .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
/* pure white pill CTA on the dark hero, no gold/amber */
.study-cta .btn { border-color: #fff; background: #fff; color: var(--hero-bg); border-radius: 999px; }
.study-cta .btn:hover { background: #e2e8f0; border-color: #e2e8f0; }
.study-cta .btn.ghost { background: transparent; border-color: #ffffff55; color: #fff; border-radius: 999px; }
.study-cta .btn.ghost:hover { background: #ffffff1a; }

/* ---- hero: due-count column on top, then a continuously-scrollable list of
   every track with the most cards due first -- mastery ring + direct Review
   button per row. The row set is rendered 3x by app.js and the scroll
   position is silently rewound each time it nears either end, so scrolling
   past the last track (or above the first) loops back around instead of
   dead-ending. ---- */
.hero-body { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.hero-left { max-width: 480px; }
.sr-list-wrap { position: relative; }
.sr-list-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--hero-bg)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.sr-list { display: flex; flex-direction: column; gap: 8px; max-height: 322px; overflow-y: auto; scroll-behavior: auto;
  -webkit-overflow-scrolling: touch; }
.sr-list::-webkit-scrollbar { width: 6px; }
.sr-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.sr-row { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 10px 14px;
  cursor: pointer; text-align: left; width: 100%; flex: 0 0 auto;
  transition: background-color .16s var(--ease-out), transform .16s var(--ease-out); }
.sr-row:hover, .sr-row:focus-visible { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.sr-row.sr-empty { cursor: default; }
.sr-row.sr-empty:hover { background: rgba(255,255,255,.06); transform: none; }
.sr-ring { flex: 0 0 auto; line-height: 0; }
.sr-info { flex: 1 1 auto; min-width: 0; }
.sr-name { font-size: 13.5px; font-weight: 600; color: var(--hero-ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-meta { font-size: 11.5px; color: var(--hero-ink-soft); margin-top: 3px; font-family: "JetBrains Mono", monospace; }
.sr-review-btn { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out); }
.sr-review-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; }
@media (max-width: 640px) {
  .sr-name { max-width: 44vw; }
  .sr-meta { font-size: 11px; }
}

/* ---- module list (track with >1 module) ---- */
.mod-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.mod-row { text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--track-color, var(--primary)); border-radius: 10px;
  padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; width: 100%;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), transform .16s var(--ease-out); }
.mod-row:hover { border-color: var(--line); border-left-color: var(--track-color, var(--primary)); transform: translateY(-2px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--track-color, var(--primary)) 10%, rgba(15,23,42,.06)),
    0 22px 40px -20px color-mix(in srgb, var(--track-color, var(--primary)) 28%, rgba(15,23,42,.18)); }
@media (prefers-reduced-motion: reduce) { .mod-row { transition: none; } }
.mod-row .row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.mod-row h3 { font-size: 1.08rem; }
.mod-row p { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ---- study card ---- */
.study-shell { max-width: 620px; margin: 0 auto; }
.progress { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .5s var(--ease-out); }
.flashcard { position: relative; background: var(--surface);
  background-image: linear-gradient(155deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 55%);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift);
  padding: 32px 28px 28px; min-height: 260px; display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.flashcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); }
.card-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.pill { font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 3px 9px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line-soft); }
.card-front { font-size: 1.28rem; font-family: "Source Serif 4", serif; font-weight: 600; line-height: 1.35;
  letter-spacing: -.005em; }
.card-back { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); color: var(--ink-soft); }
.card-back.hidden { display: none; }
.card-back ul { margin: .4em 0; padding-left: 1.1em; }
.card-back li { margin: .25em 0; }
.card-back strong { color: var(--ink); }
.cloze-blank { display: inline-block; padding: 0 8px; margin: 0 1px; border-radius: 4px;
  background: var(--accent-tint); color: var(--accent); font-weight: 700; letter-spacing: .03em; }
.card-back .cloze-answer.cloze-answer { background: var(--accent-tint); color: var(--accent);
  border-radius: 4px; padding: 0 4px; font-weight: 700; }
/* Review-status notice as a small badge pill (dot + label in a tinted
   capsule) instead of bare text, matching the pill language used for the
   card's track/topic tags right above the card front. */
.card-source { margin-top: auto; padding-top: 16px; display: flex; align-items: center; }
.card-source .rev { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-tint); border-radius: 999px; padding: 4px 10px 4px 8px; }
.card-source .rev::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; flex: 0 0 auto; }

.answer-controls { display: flex; gap: 10px; margin-top: 20px; justify-content: center; flex-wrap: wrap; }
/* Each rating gets a resting-state tint of its own difficulty color (not
   just on hover) so "Again / Good / Easy" read as distinct at a glance,
   plus a bolder label vs. a visibly muted sublabel for real contrast. */
.rate { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 14px;
  transition: border-color .16s var(--ease-out), color .16s var(--ease-out), background-color .16s var(--ease-out), transform .12s var(--ease-out), box-shadow .16s var(--ease-out); }
.rate.again { border-color: color-mix(in srgb, var(--flag) 35%, var(--line)); color: color-mix(in srgb, var(--flag) 70%, var(--ink)); background: color-mix(in srgb, var(--flag) 6%, var(--surface)); }
.rate.good { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); color: var(--primary-deep); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.rate.easy { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); color: color-mix(in srgb, var(--good) 75%, var(--ink)); background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.rate:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--primary) 40%, transparent); }
.rate.again:hover { border-color: var(--flag); color: var(--flag); background: var(--flag-tint);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--flag) 40%, transparent); }
.rate.easy:hover { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent);
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--good) 40%, transparent); }
.rate:active { transform: translateY(1px); box-shadow: none; }
.rate small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-soft); font-family: "JetBrains Mono", monospace; margin-top: 2px; }
.reveal-btn { align-self: center; margin-top: 22px; }
.reveal-btn::after { content: "→"; margin-left: 8px; display: inline-block; transition: transform .16s var(--ease-out); }
.reveal-btn:hover::after { transform: translateX(3px); }
.done-panel { text-align: center; padding: 40px 20px; }
.done-panel .big { font-family: "Source Serif 4", serif; font-size: 2rem; color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .flashcard, .rate, .reveal-btn::after { transition: none; } }

/* ---- clinical tab tables ---- */
.tbl-scroll { overflow-x: auto; margin: 10px 0; position: relative; border-radius: 8px; }
.tbl-scroll::after { content: "⤢"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(15,23,42,.5); color: #fff; display: grid; place-items: center; font-size: 12px; line-height: 1;
  opacity: 0; cursor: zoom-in; transition: opacity .15s ease, background-color .15s ease; }
.tbl-scroll:hover::after { opacity: 1; }
.tbl-scroll::after:hover { background: rgba(15,23,42,.75); }
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:hover td { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }

/* ---- table lightbox: click any table to read it enlarged ---- */
.table-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,16,.82);
  display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.table-lightbox[hidden] { display: none; }
.table-lightbox .tl-panel { background: var(--surface); border-radius: 14px; padding: 30px; max-width: 92vw; max-height: 88vh;
  overflow: auto; cursor: default; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.table-lightbox .tl-panel table { font-size: 17px; min-width: 620px; }
.table-lightbox .tl-panel thead th { padding: 15px 20px; }
.table-lightbox .tl-panel tbody td { padding: 15px 20px; }
.table-lightbox .tl-close { position: fixed; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 0; color: #fff; display: grid; place-items: center; z-index: 1001; font-size: 22px; }
.table-lightbox .tl-close:hover { background: rgba(255,255,255,.22); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 420px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
td.flag { color: var(--flag); font-weight: 600; }

/* ---- cases ---- */
.case { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--track-color, var(--accent));
  border-radius: 10px; padding: 26px 28px; margin: 24px 0; box-shadow: var(--shadow); }
.case .stem { font-size: 1.08rem; }
.case .stem b { color: var(--ink); }
.case .ans { padding: 12px 14px; color: var(--ink-soft); font-size: 14.5px; background: var(--surface-2); border-radius: 9px; }
.case .teach { margin-top: 12px; padding: 12px 14px; background: var(--primary-tint); border-radius: 9px; color: var(--primary-deep); font-size: 14px; }

/* ---- case index: teaser list, click one to open its one-by-one stepper
   (mirrors the Anatomy tab's index-grid -> detail-page convention). ---- */
.case-index { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.case-row { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--track-color, var(--accent));
  border-radius: 10px; padding: 16px 18px; transition: border-color .16s var(--ease-out), background-color .16s var(--ease-out), transform .16s var(--ease-out); }
.case-row:hover { background: color-mix(in srgb, var(--track-color, var(--accent)) 4%, var(--surface)); transform: translateY(-1px); }
.case-row-num { flex: 0 0 auto; width: 22px; padding-top: 2px; color: var(--ink-faint); font-size: 12px; }
.case-row-body p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.case-row-meta { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); }

/* ---- case stepper: one case, one question at a time ---- */
.case-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.case-back { border: 0; background: none; color: var(--primary); font-size: 13px; font-weight: 500; padding: 0; cursor: pointer; }
.case-back:hover { text-decoration: underline; }
.case-count { font-size: 12px; color: var(--ink-faint); }
.case-arrows { display: flex; gap: 6px; }
.case-arrow { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 7px; font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .15s var(--ease-out), color .15s var(--ease-out); }
.case-arrow:hover:not(:disabled) { border-color: var(--primary); color: var(--ink); }
.case-arrow:disabled { opacity: .4; cursor: default; }
.case-step { margin-top: 16px; }
/* Answered questions accumulate above the current one instead of being
   replaced by it, so a case reads as one growing record. A hairline
   separates each answered Q&A block, and the current question gets a
   little more visual weight than the settled ones above it. */
.case-q { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.case-q:first-child { padding-top: 0; border-top: 0; }
.case-q.done .case-q-text { font-weight: 500; color: var(--ink-soft); }
.case-q-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 8px; }
.case-q-text { font-size: 1.05rem; color: var(--ink); font-weight: 600; line-height: 1.4; }
.case-a { margin-top: 14px; animation: cardReveal .22s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .case-a { animation: none; } }
.case-controls { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.case-step-back { border: 0; background: none; color: var(--ink-faint); font-size: 12.5px; font-weight: 500;
  padding: 0; cursor: pointer; transition: color .15s var(--ease-out); }
.case-step-back:hover { color: var(--ink-soft); text-decoration: underline; }

/* ---- card library: every flashcard, individually, grouped by module ---- */
.lib-controls { margin: 22px 0 14px; }
.lib-search { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; color: var(--ink); font-size: 15px; }
.lib-search::placeholder { color: var(--ink-faint); }
.lib-search:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.lib-filter-bar { margin-bottom: 10px; }
.lib-groups { display: flex; flex-direction: column; gap: 36px; margin-top: 24px; }
.lib-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lib-group-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--track-color, var(--ink-faint)); }
.lib-group-title { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.lib-group-rule { flex: 1 1 auto; height: 1px; background: var(--line-soft); }
.lib-group-count { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint); background: var(--surface-2);
  padding: 3px 10px; border-radius: 999px; }
.lib-rows { display: flex; flex-direction: column; gap: 8px; }
.lib-row { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--track-color, var(--primary));
  border-radius: 9px; overflow: hidden; }
.lib-row-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; padding: 13px 16px; cursor: pointer; }
.lib-row-front { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lib-row-flags { flex: 0 0 auto; display: flex; gap: 6px; }
.lib-row-chev { flex: 0 0 auto; color: var(--ink-faint); font-size: 12px; }
.lib-row.open .lib-row-head { background: var(--surface-2); }
.lib-row-body { padding: 4px 16px 18px; }
.lib-face { margin-top: 12px; }
.lib-face-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 5px; }
.lib-face-content { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.lib-row-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.lib-edit-form { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.lib-edit-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
  margin-top: 12px; }
.lib-edit-label:first-child { margin-top: 0; }
.lib-edit-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); }
.lib-edit-textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; color: var(--ink); font-size: 13.5px; font-family: "JetBrains Mono", monospace;
  line-height: 1.5; resize: vertical; }
.lib-edit-textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.pill.edited { background: var(--accent-tint); color: var(--accent); border-color: transparent; font-weight: 600; }
.pill.noted { background: var(--primary-tint); color: var(--primary-deep); border-color: transparent; font-weight: 600; }
.card-note { margin-top: 14px; padding: 10px 14px; background: var(--accent-tint); border-radius: 9px;
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.card-note strong { color: var(--ink); }

/* ---- diagram / image label (nested inside an anatomy .panel) ---- */
.diagram-stage { background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px; padding: 12px; position: relative; margin: 4px 0 14px; }
.diagram-stage svg { width: 100%; height: auto; max-width: 280px; display: block; margin: 0 auto; }
.hotspot { cursor: pointer; }
.hotspot circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2; transition: r .15s ease; }
.hotspot:hover circle.hotspot:focus circle { r: 9; }
@media (prefers-reduced-motion: reduce) { .hotspot circle { transition: none; } }
.lbl-flag { fill: var(--surface); stroke: var(--line); }
.lbl-text { font-family: "JetBrains Mono", monospace; font-size: 11px; fill: var(--ink); }
.lbl-hidden { display: none; }
.label-list { list-style: none; padding: 0; margin: 12px 0 0; }
.label-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.label-list li button { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; width: 26px; height: 26px; color: var(--primary); font-weight: 600; }
.label-list li.revealed span { color: var(--ink); }
.label-list li span { color: var(--ink-faint); }

/* ---- media: source attribution (required on every real image/stack) ---- */
.media-source { font-size: 12px; color: var(--ink-faint); font-style: italic; margin: 8px 0 0; }

/* ---- kind:"image" diagrams, percent-positioned label dots over a raster image ---- */
.image-stage { padding: 10px; }
.img-frame { position: relative; border-radius: 8px; overflow: hidden; line-height: 0; }
.img-frame img { display: block; width: 100%; height: auto; }
.img-dot { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 6px; margin: -6px; cursor: pointer; }
.img-dot .dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.img-dot:hover .dot.img-dot:focus-visible .dot.img-dot.revealed .dot { background: var(--flag); box-shadow: 0 0 0 1px var(--flag); }
.lbl-pill { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px;
  font-size: 12px; color: var(--ink); box-shadow: var(--shadow); pointer-events: none; }
.lbl-pill.lbl-hidden { display: none; }

/* ---- CT stack viewer ---- */
.stack-stage { position: relative; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px;
  overflow: hidden; line-height: 0; max-width: 480px; margin: 0 auto; }
.stack-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.stack-labels { position: absolute; inset: 0; }
.stack-label { position: absolute; transform: translate(-50%, -50%); }
.stack-label .dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); margin: 0 auto; }
.stack-controls { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; max-width: 480px; margin-left: auto; margin-right: auto; }
.stack-slider { flex: 1 1 160px; accent-color: var(--primary); }
.stack-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack-counter { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding: 26px 0 44px; margin-top: 30px; }
.foot .mono { font-size: 12px; color: var(--ink-faint); }
.disclaimer { font-size: 12px; color: var(--ink-faint); margin: 6px 0 0; max-width: 62ch; }
.link-btn { border: 0; background: none; padding: 0; margin: 0; color: var(--ink-faint); font-size: 12px;
  font-family: "JetBrains Mono", monospace; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--primary); }

/* ---- about page ---- */
.about-body { max-width: 62ch; margin-top: 18px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.about-body p { margin: 0 0 1em; }

/* ---- anatomy topic -> flashcard test-yourself CTA ---- */
.topic-study-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--primary-tint); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-top: 24px; flex-wrap: wrap; }
.topic-study-cta .n { font-family: "Source Serif 4", serif; font-size: 1.05rem; color: var(--primary-deep); }
.topic-study-cta .cta-sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.pill.ms{background:var(--primary-tint);color:var(--primary-deep);border-color:transparent;font-weight:500;}

/* ---- functional search (topbar) ---- */
.search-wrap { position: relative; min-width: 150px; flex: 1 1 340px; max-width: 480px; margin-right: 20px; }
@media (max-width: 640px) { .search-wrap { display: none; } }
.search-input { width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 10.5px 52px 10.5px 40px; color: var(--ink); font-size: 14.5px; }
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.search-icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; }
.search-input:focus ~ .search-icon { color: var(--primary); }
.search-kbd { position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  font-size: 10.5px; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 6px; pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-width: 80vw;
  max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 8px; z-index: 30; }
.search-group-label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); padding: 8px 8px 4px; }
.search-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: 8px; }
.search-item:hover.search-item:focus-visible { background: var(--surface-2); }
.si-type { flex: 0 0 auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600;
  color: var(--primary-deep); background: var(--primary-tint); border-radius: 6px; padding: 3px 6px; margin-top: 1px; }
.si-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-title { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.si-snippet { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.search-empty { padding: 14px 10px; color: var(--ink-faint); font-size: 13.5px; font-style: italic; }
.search-hl { background: var(--accent-tint); color: var(--accent); border-radius: 3px; padding: 0 1px; font-weight: 700; }

@keyframes searchFlash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--shadow); } }
.search-target-hit { animation: searchFlash 1.4s ease; }
@media (prefers-reduced-motion: reduce) { .search-target-hit { animation: none; } }

/* ---- study settings panel ---- */
.settings-wrap { position: relative; }
.settings-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; max-width: 88vw;
  max-height: 80vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 16px; z-index: 30; }
.settings-panel:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
.settings-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.settings-row { display: flex; flex-direction: column; gap: 8px; }
.settings-row label, .settings-row .settings-label { display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.settings-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.settings-row input[type="number"] { width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; color: var(--ink); font-size: 13.5px; }
.settings-preview { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-faint); }
.settings-reset { align-self: flex-start; border: 0; background: none; color: var(--accent);
  font-size: 12.5px; font-weight: 500; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.settings-reset:hover { color: var(--ink); }
.settings-divider { height: 1px; background: var(--line-soft); margin: 2px 0; }
.settings-danger { width: 100%; border: 1px solid var(--flag); background: var(--flag-tint); color: var(--flag);
  border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.settings-danger:hover { background: var(--flag); color: var(--ground); }
.settings-note { font-size: 12px; color: var(--good); }

/* ---- custom dropdown (replaces native <select>, whose open list is
   drawn by the OS and can't be themed): a trigger button + our own
   floating listbox, styled like the rest of the app's popovers
   (search results, settings panel itself). Used in Study settings and
   the flashcards scope picker. ---- */
.csel { position: relative; width: 100%; }
.csel-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  color: var(--ink); font-size: 13.5px; text-align: left;
  transition: border-color .15s var(--ease-out); }
.csel-trigger:hover, .csel-trigger:focus-visible { border-color: var(--primary); outline: none; }
.csel.open .csel-trigger { border-color: var(--primary); }
.csel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-chev { flex: 0 0 auto; color: var(--ink-faint); font-size: 11px; transition: transform .15s var(--ease-out); }
.csel.open .csel-chev { transform: rotate(180deg); }
.csel-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; z-index: 40; list-style: none; margin: 0; }
.csel-opt { padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.csel-opt:hover, .csel-opt:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.csel-opt.active { background: var(--primary-tint); color: var(--primary-deep); font-weight: 600; }
/* Flashcards scope picker sits inline next to the Due/All toggle. */
.fp-scope.csel { flex: 1 1 auto; min-width: 0; }
.fp-scope .csel-trigger { font-size: 12px; padding: 7px 9px; border-radius: 6px; background: var(--surface); }
.fp-scope .csel-list { font-size: 12.5px; }

/* ---- all-due-cards CTA + cross-module card origin pill ---- */
.study-cta.all-due-cta { margin: 14px 0 4px; }
.pill.track { background: var(--accent-tint); color: var(--accent); border-color: transparent; font-weight: 600; }
.pill.cloze { background: var(--primary-tint); color: var(--primary-deep); border-color: transparent; font-weight: 600; }

/* Inline anatomy-note figures: standard size, click to enlarge */
.anatomy-detail-body .note-fig { margin: 8px auto 16px; text-align: center; }
.note-fig img {
  display: inline-block; max-height: 260px; width: auto; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  cursor: zoom-in; transition: box-shadow .12s ease;
}
.note-fig img:hover, .note-fig img:focus-visible { box-shadow: 0 0 0 2px var(--primary); outline: none; }
.note-fig figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.35; }

/* A note's figures as a row at the top: centered, evenly spaced, wrapping
   to their own line each rather than packing tight against the left edge
   the way bare inline-block siblings do. */
.fig-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 20px; margin: 4px 0 20px; }
.fig-row .note-fig { flex: 0 1 300px; margin: 0; }
.fig-row .note-fig img { max-height: 240px; }
.img-frame img { cursor: zoom-in; }

/* Figure sources, collected at the bottom of an anatomy topic */
.fig-sources { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
.fig-sources-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 0 0 6px; }
.fig-sources ul { margin: 0; padding-left: 16px; }
.fig-sources li { font-size: 11.5px; color: var(--ink-faint); font-style: italic; line-height: 1.45; }

/* Lightbox: full-screen figure viewer with zoom + pan */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,16,.88); }
.lightbox[hidden] { display: none; }
.lightbox-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox-stage img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; border-radius: 8px; background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); transform-origin: center center; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lightbox-close { position: fixed; top: 12px; right: 16px; width: 44px; height: 44px; font-size: 30px; line-height: 1;
  background: rgba(0,0,0,.4); border: 0; color: #fff; cursor: pointer; border-radius: 10px; z-index: 1002; }
.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-tools { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1002; }
.lightbox-tools button { min-width: 40px; height: 36px; padding: 0 12px; font-size: 16px; background: rgba(0,0,0,.4);
  color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.lightbox-tools button:hover { background: rgba(255,255,255,.2); }
.lightbox-cap { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; color: rgba(255,255,255,.85);
  font-size: 12.5px; font-style: italic; padding: 0 24px; z-index: 1001; pointer-events: none; }

/* ===== Side navigation + flashcards panel (fixed rails under the sticky topbar) ===== */
/* Only needed at >=1040px, where .topbar gets negative margins to stay
   full-bleed past the rail padding -- scoped to that breakpoint because
   overflow-x:clip on body also clips position:fixed descendants (like the
   mobile .sidenav drawer) to the body box, hiding them entirely. */
@media (min-width: 1040px) {
  body { overflow-x: clip; }
}

/* ---- left side navigation ---- */
.sidenav { position: fixed; top: var(--topbar-h, 73px); left: 0; bottom: 0; width: 30vw; min-width: 264px; max-width: 400px; background: var(--surface);
  border-right: 1px solid var(--line); overflow-y: auto; padding: 16px 12px; z-index: 9;
  transform: translateX(-100%); transition: transform .32s var(--ease-drawer);
  /* soften the hard seam where the drawer meets the translucent topbar --
     a quick mask fade instead of a flat cut edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 100%); }
body.nav-open .sidenav { transform: none; }
.sn-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
  color: var(--ink-soft); padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 500;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out); }
.sn-item:hover { background: var(--surface-2); color: var(--ink); }
.sn-item:active { transform: translateY(1px); }
.sn-item.active { background: var(--primary-tint); color: var(--primary-deep); }
.sn-ic { display: inline-flex; width: 20px; justify-content: center; align-items: center; color: var(--primary); }
.sn-ic svg { width: 16px; height: 16px; }
.sn-home .sn-ic { font-size: 16px; }
.sn-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin: 16px 10px 6px; }
.nav-backdrop { position: fixed; inset: var(--topbar-h, 73px) 0 0 0; background: rgba(0,0,0,.35); z-index: 8; opacity: 0; pointer-events: none; transition: opacity .28s var(--ease-out); }
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

/* ---- wide screens: the drawer becomes a toggleable permanent rail ----
   Pinned open by default (unless the visitor collapsed it, remembered via
   body.sidebar-collapsed). Content is centered within whatever width remains
   -- a padding-left on <body> reserves the rail's space so the existing
   `margin:0 auto` on .wrap centers correctly in the leftover area, instead
   of a margin-left on .wrap itself pushing all the slack to one side. */
@media (min-width: 1040px) {
  .sidenav { width: var(--sidenav-w); min-width: var(--sidenav-w); max-width: var(--sidenav-w);
    transform: none; box-shadow: none;
    transition: transform .28s var(--ease-drawer); }
  body.sidebar-collapsed .sidenav { transform: translateX(-100%); }
  .nav-backdrop { display: none; }
  /* Reserve space for whichever rails are open (left sidebar, right flashcards
     panel, both, or neither) via two custom properties, so main content
     always condenses to fit instead of a fixed panel sitting on top of it. */
  body:not(.sidebar-collapsed) { --tb-l: var(--sidenav-w); }
  body.flash-open { --tb-r: var(--flashpanel-w); }
  body.pimp-open { --tb-r: var(--pimppanel-w); }
  body { padding-left: var(--tb-l); padding-right: var(--tb-r);
    transition: padding-left .28s var(--ease-drawer), padding-right .28s var(--ease-drawer); }
  /* the topbar stays full-bleed across the top, ignoring body's padding */
  .topbar { margin-left: calc(-1 * var(--tb-l)); margin-right: calc(-1 * var(--tb-r));
    width: calc(100% + var(--tb-l) + var(--tb-r));
    transition: margin-left .28s var(--ease-drawer), margin-right .28s var(--ease-drawer), width .28s var(--ease-drawer); }
  main.wrap { max-width: 1180px; }
  .foot .wrap { max-width: 1180px; }
  /* Home gets a little extra breathing room when the viewport has it to
     spare; still shrinks with the rest of .wrap as the side rails open
     and claim their padding-left/right on <body>. */
  body.on-home main.wrap { max-width: 1320px; }
}

/* ---- right flashcards panel ----
   Below the 1040px rail breakpoint this is a full overlay drawer (like
   .sidenav), so it gets a drawer-appropriate width here; --flashpanel-w's
   "never more than 1/3 of the viewport" rule only makes sense once it's
   sharing the screen with real content as a pinned rail, so that formula
   is reapplied inside the >=1040px block below instead of used as the
   base width -- otherwise a phone (33vw of ~375px) gets an unusably
   cramped ~124px panel. */
.flashpanel, .pimppanel { position: fixed; top: var(--topbar-h, 73px); right: 0; bottom: 0; width: min(400px, 88vw); max-width: 92vw; background: var(--surface);
  border-left: 1px solid var(--line); overflow-y: auto; z-index: 9; transform: translateX(100%); transition: transform .32s var(--ease-drawer); }
body.flash-open .flashpanel { transform: none; }
body.pimp-open .pimppanel { transform: none; }
@media (min-width: 1040px) {
  .flashpanel { width: var(--flashpanel-w); }
  .pimppanel { width: var(--pimppanel-w); }
}
.fp-head, .pp-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1; }
.fp-title, .pp-title { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 1.05rem;
  display: flex; align-items: center; gap: 10px; }
.fp-title .mark, .pp-title .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-tint);
  color: var(--primary); display: grid; place-items: center; flex: 0 0 auto; }
.fp-title .mark svg, .pp-title .mark svg { width: 60%; height: 60%; display: block; }
.fp-body, .pp-body { padding: 16px; }
.fp-ctx { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); font-weight: 700;
  margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 0; }
.fp-prog { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.fp-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px; transition: width .3s var(--ease-out); }
.fp-count { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; font-family: "JetBrains Mono", monospace; }
.fp-card { margin-bottom: 16px; }
.fp-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fp-done { text-align: center; padding: 18px 0; }
.fp-done .big { font-size: 1.3rem; color: var(--primary-deep); font-family: "Source Serif 4", serif; }

/* ---- sidebar dropdown groups ---- */
.sn-trackrow .sn-name { flex: 1; }
.sn-caret { font-size: 10px; color: var(--ink-faint); transition: transform .15s ease; }
.sn-group.open .sn-caret { transform: rotate(90deg); }
.sn-sub { display: none; margin: 2px 0 6px; }
.sn-group.open .sn-sub { display: block; }
.sn-subitem { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink-soft);
  padding: 7px 10px 7px 40px; border-radius: 8px; font-size: 13px; }
.sn-subitem { transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.sn-subitem:hover { background: var(--surface-2); color: var(--ink); }
.sn-subitem.active { background: color-mix(in srgb, var(--track-color, var(--primary)) 14%, transparent);
  color: var(--track-color, var(--primary)); font-weight: 600; }

/* ---- sidebar: each subspecialty row/badge picks up its own track color
   (set as --track-color on .sn-group) instead of one flat neutral gray,
   matching the tiles/feature-rows/roadmap elsewhere on the site. ---- */
.sn-trackrow .sn-badge { width: 25px; height: 25px; border-radius: 7px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 16%, transparent);
  color: var(--track-color, var(--primary)); }
.sn-trackrow .sn-badge .track-symbol svg { width: 15px; height: 15px; }
.sn-trackrow:hover { background: color-mix(in srgb, var(--track-color, var(--primary)) 8%, transparent); }
.sn-trackrow.active { background: color-mix(in srgb, var(--track-color, var(--primary)) 13%, transparent);
  color: var(--track-color, var(--primary)); border-left: 3px solid var(--track-color, var(--primary));
  padding-left: 7px; }

/* ---- hover tooltips (small label under any [data-tip] control) ---- */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--ground); font-size: 11px; font-weight: 500; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; box-shadow: var(--shadow); z-index: 100; pointer-events: none; }

/* ---- numbered landmark dots ---- */
.hotspot circle { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.hotspot text.hot-num { fill: #fff; font: 700 9px "Work Sans", sans-serif; pointer-events: none; }
.hotspot:hover circle, .hotspot:focus-visible circle { fill: var(--flag); }
.img-dot .dot { width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ---- flashcard panel resize handle ---- */
.fp-resize, .pp-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; }
.fp-resize:hover, .pp-resize:hover { background: color-mix(in srgb, var(--primary) 40%, transparent); }

/* ---- in-app cross-reference links + hover preview ---- */
.xref { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.xref:hover { color: var(--primary); }
/* ---- inline glossary terms: same preview-card mechanism as .xref (shared
   #xrefPreview element in JS), but definition-only, no page to open. ---- */
.term { border-bottom: 1.5px dotted var(--primary); text-underline-offset: 2px; cursor: help; }
.term:hover, .term:focus-visible { border-bottom-style: solid; color: var(--primary-deep); }
.xref-preview { position: absolute; z-index: 200; width: 300px; max-width: 86vw; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; pointer-events: none; }
.xref-preview[hidden] { display: none; }
.xp-title { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--ink); }
.xp-sub { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.xp-go { font-size: 11px; color: var(--primary); margin-top: 8px; font-weight: 600; }

/* ---- glossary term popover: opens on click, richer than the hover card
   above (a close button, and an optional "Read more" for the added
   clinical detail), so long entries don't have to cram into a tooltip. ---- */
.glossary-popover { position: absolute; z-index: 210; width: 320px; max-width: 90vw; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 16px 18px;
  animation: fade .15s ease; }
.glossary-popover[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .glossary-popover { animation: none; } }
.gp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gp-title { font-family: "Source Serif 4", serif; font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; }
.gp-close { flex: 0 0 auto; background: none; border: 0; color: var(--ink-faint); font-size: 15px; line-height: 1;
  cursor: pointer; padding: 2px; margin: -2px -2px 0 0; border-radius: 6px; }
.gp-close:hover { color: var(--ink); background: var(--surface-2); }
.gp-def { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.gp-more { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); }
.gp-more[hidden] { display: none; }
.gp-toggle { margin-top: 10px; background: none; border: 0; color: var(--primary); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.gp-toggle:hover { text-decoration: underline; }
.gp-chev { display: inline-block; transition: transform .15s var(--ease-out); }
.gp-toggle.open .gp-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .gp-chev { transition: none; } }

/* revealed landmark dot highlight (SVG) */
.hotspot.revealed circle { fill: var(--flag); }

/* ============================================================
   FLASHCARD PANEL: scope + mode controls (v0.4)
   A dropdown (All modules / one subspecialty) plus a Due/All
   toggle, pinned above the card stage inside the panel.
   ============================================================ */
.fp-controlbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
/* .fp-scope's own control styling lives with the .csel component above,
   since the flashcards scope picker is a custom dropdown, not a <select>. */
.fp-mode { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.fp-mode-btn {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .04em;
  padding: 7px 11px; background: var(--surface); color: var(--ink-faint); border: 0; cursor: pointer;
}
.fp-mode-btn + .fp-mode-btn { border-left: 1px solid var(--line); }
.fp-mode-btn:hover { color: var(--ink); }
.fp-mode-btn.active { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .fp-mode-btn.active, :root:not([data-theme="light"]) .fp-mode-btn.active { color: #06211f; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .fp-mode-btn.active { color: #fff; } }
.fp-stage { min-height: 40px; }

/* ============================================================
   PIMP QUESTIONS quiz screen (v0.4)
   Self-graded oral-recall quiz, browsed by subspecialty/procedure.
   ============================================================ */
.pq-shuffle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.pq-shuffle input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.pq-grouphead h2 { display: flex; align-items: center; gap: 9px; }
.pq-groupbadge { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 16%, transparent);
  color: var(--track-color, var(--primary)); }
.pq-groupbadge .track-symbol { display: block; }
.pq-allrow { border-left: 3px solid var(--track-color, var(--primary)); }

.pq-card { max-width: 720px; margin: 0 auto; }
.pq-q { font-family: "Source Serif 4", serif; font-size: 1.3rem; line-height: 1.4; margin-top: 10px; }
.pq-a {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
  font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap;
}
.pq-controls { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.rate.pq-got { border-color: var(--good); color: var(--good); }
.rate.pq-got:hover { background: var(--good); color: #fff; border-color: var(--good); }
:root[data-theme="dark"] .rate.pq-got:hover, :root:not([data-theme="light"]) .rate.pq-got:hover { color: #06211f; }

.pq-summary { text-align: center; max-width: 520px; margin: 30px auto 0; }
.pq-scorebig { font-family: "Source Serif 4", serif; font-size: 3rem; color: var(--primary-deep); line-height: 1; }
.pq-scoreline { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.pq-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* Small keyboard hint under the answer controls (flashcards + FAQ quiz). */
.kbd-hint { text-align: center; margin-top: 10px; font-size: 11px; color: var(--ink-faint); letter-spacing: .03em; }
.fp-controls + .kbd-hint { margin-top: 8px; }
.undo-btn { display: block; border: 1px dashed var(--line); background: none; color: var(--ink-faint);
  font-size: 12px; padding: 7px 14px; border-radius: 8px; margin: 10px auto 0; cursor: pointer;
  transition: border-color .15s var(--ease-out), color .15s var(--ease-out); }
.undo-btn:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }
/* Most-missed CTA uses the flag (red) accent instead of the default gold. */
.study-cta.pq-misscta .btn { border-color: var(--flag); background: var(--flag); color: #fff; }
.study-cta.pq-misscta .btn:hover { background: color-mix(in srgb, var(--flag) 85%, black); border-color: color-mix(in srgb, var(--flag) 85%, black); }

/* Occlusion labels: opaque covers over printed labels, revealed on click */
.img-occ { position: absolute; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; }
.img-occ .occ-num { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--surface); border: 1px solid var(--primary); border-radius: 4px; color: var(--primary-deep);
  font-size: 11px; font-weight: 700; transition: opacity .12s ease; }
.img-occ:hover .occ-num { border-color: var(--flag); }
.img-occ.revealed .occ-num { opacity: 0; pointer-events: none; }


/* ---- elevated shadow token for dark mode (matches light --shadow-lift) ---- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-lift: 0 4px 12px rgba(0,0,0,.32), 0 22px 42px -20px rgba(0,0,0,.6); } }
:root[data-theme="dark"] { --shadow-lift: 0 4px 12px rgba(0,0,0,.32), 0 22px 42px -20px rgba(0,0,0,.6); }

/* ---- staggered entrance for the home tile grid (motion: 30-80ms cascade, ease-out) ---- */
@media (prefers-reduced-motion: no-preference) {
  .tile-grid > .tile { animation: tileIn .36s var(--ease-out) backwards; }
  .tile-grid > .tile:nth-child(1) { animation-delay: 20ms; }
  .tile-grid > .tile:nth-child(2) { animation-delay: 70ms; }
  .tile-grid > .tile:nth-child(3) { animation-delay: 120ms; }
  .tile-grid > .tile:nth-child(4) { animation-delay: 170ms; }
  .tile-grid > .tile:nth-child(5) { animation-delay: 220ms; }
  .tile-grid > .tile:nth-child(6) { animation-delay: 270ms; }
  .tile-grid > .tile:nth-child(7) { animation-delay: 320ms; }
  .tile-grid > .tile:nth-child(n+8) { animation-delay: 360ms; }
}
@keyframes tileIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- global reduced-motion safety net ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}


/* ===== Motion pass v2: reveal + hover life (all respect the reduced-motion net above) ===== */
/* Stronger tab crossfade */
.tabpane.active { animation: fade .28s var(--ease-out); }

/* Flashcard answer reveal: fade + rise when the back is shown, and its controls */
.card-back:not(.hidden) { animation: cardReveal .26s var(--ease-out); }
.answer-controls { animation: cardReveal .3s var(--ease-out); }
@keyframes cardReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Figures gain a little life on hover */
.note-fig img { transition: box-shadow .18s var(--ease-out), transform .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .note-fig img:hover { transform: scale(1.012); } }

/* Scroll-reveal: only active when JS marks the body (so no-JS keeps everything visible) */
body.js-motion .reveal-init { opacity: 0; transform: translateY(12px); }
body.js-motion .reveal-init.in { opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
/* Small per-group cascade so cards in the same row/grid settle in sequence,
   not all at once -- mirrors the tile-grid's load-in stagger. */
.progress-strip .pcard:nth-child(2), .sr-list .sr-row:nth-child(2) { transition-delay: 60ms; }
.progress-strip .pcard:nth-child(3), .sr-list .sr-row:nth-child(3) { transition-delay: 120ms; }
.progress-strip .pcard:nth-child(4), .sr-list .sr-row:nth-child(4) { transition-delay: 180ms; }
.sr-list .sr-row:nth-child(5) { transition-delay: 240ms; }
.roadmap-list .rm-row:nth-child(2), .mod-list .mod-row:nth-child(2) { transition-delay: 50ms; }
.roadmap-list .rm-row:nth-child(3), .mod-list .mod-row:nth-child(3) { transition-delay: 100ms; }
.roadmap-list .rm-row:nth-child(4) { transition-delay: 150ms; }
.roadmap-list .rm-row:nth-child(5) { transition-delay: 200ms; }
.roadmap-list .rm-row:nth-child(n+6) { transition-delay: 240ms; }
.tg-grid .tg-card:nth-child(2) { transition-delay: 40ms; }
.tg-grid .tg-card:nth-child(3) { transition-delay: 80ms; }
.tg-grid .tg-card:nth-child(4) { transition-delay: 120ms; }
.tg-grid .tg-card:nth-child(5) { transition-delay: 160ms; }
.tg-grid .tg-card:nth-child(n+6) { transition-delay: 200ms; }
.tabpane .panel:nth-of-type(2) { transition-delay: 60ms; }
.tabpane .panel:nth-of-type(3) { transition-delay: 120ms; }
.tabpane .panel:nth-of-type(n+4) { transition-delay: 180ms; }
.feature-list .feature-row:nth-child(2) { transition-delay: 40ms; }
.feature-list .feature-row:nth-child(3) { transition-delay: 80ms; }
.feature-list .feature-row:nth-child(4) { transition-delay: 120ms; }
.feature-list .feature-row:nth-child(n+5) { transition-delay: 160ms; }

/* ---- Home's one deliberate peak ----
   Every other reveal on this screen (stat cards, tiles, feature rows) uses
   the same quiet fade+rise on purpose -- they're orientation and browsing,
   not the point of the page. The due-queue hero *is* the point (it's the
   whole reason to open the app today), so it gets the only distinct
   entrance on Home: more travel, a slower settle, and a soft glow bloom
   instead of a flat fade. Higher specificity than the shared rule above
   (four classes vs two) so this wins without !important. */
body.js-motion .study-cta.all-due-cta.reveal-init { opacity: 0; transform: translateY(22px) scale(.97); }
body.js-motion .study-cta.all-due-cta.reveal-init.in { opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow .9s var(--ease-out);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -24px color-mix(in srgb, var(--primary) 40%, transparent); }
/* One soft, non-repeating pulse on the primary action once the hero has
   settled into view -- an invitation to click, not a loop that nags. */
body.js-motion .study-cta.all-due-cta.reveal-init.in .cta-actions .btn:first-child {
  animation: heroCtaPulse 1.1s var(--ease-out) .55s 1 both;
}
@keyframes heroCtaPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  65% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---- curriculum roadmap ---- */
.roadmap-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.rm-row { display: flex; gap: 16px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--track-color, var(--primary)); border-radius: 10px;
  box-shadow: var(--shadow); padding: 18px 20px; }
.rm-num { font-size: 12px; color: var(--ink-faint); padding-top: 3px; flex: 0 0 auto; width: 1.6em; }
.rm-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--track-color, var(--primary)) 16%, var(--surface));
  color: var(--track-color, var(--primary)); }
.rm-body { min-width: 0; flex: 1 1 auto; }
.rm-body h3 { font-size: 1.05rem; }
.rm-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.rm-mods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rm-modchip { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s var(--ease-out), color .15s var(--ease-out); }
.rm-modchip:hover { border-color: var(--track-color, var(--primary)); color: var(--ink); }
.rm-draft { font-family: "JetBrains Mono", monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); background: var(--accent-tint); border-radius: 3px; padding: 1px 5px; }

/* ---- Home hero stat count-up: one deliberate load moment, not a scattered effect ---- */
.pcard .big.count-live { transition: none; }