/* ============================================================
   TutorGuru — Design System v2
   Warm-educational tone · calm for long study sessions
   Typography: Inter (UI/body) + Lora (serif display)
   Palette: warm paper (light) · warm near-black (dark)
   ============================================================ */

/* Fonts loaded in HTML head — link rel="stylesheet" to Google Fonts */

/* ---------- TOKENS ---------- */
:root {
  /* Warm-paper light palette */
  --bg:          #FAFAF7;
  --bg-elev:    #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2: #F4F2EC;
  --surface-3: #EDEAE0;

  --text:       #1F2328;
  --text-soft:  #3F4650;
  --text-mute:  #747B85;
  --text-inv:   #FFFFFF;

  --line:       #E8E4D8;
  --line-strong:#CFC9B8;

  --accent:     #0F766E;      /* calm teal */
  --accent-bg:  #E6F4F1;
  --accent-ink: #0B4E47;
  --accent-border:#9AD2CA;

  --pass:       #1B7F3E;
  --pass-bg:    #E3F2E8;
  --pass-ink:   #0E5528;

  --warn:       #A16207;
  --warn-bg:    #FDF3D4;
  --warn-ink:   #6B4405;

  --danger:     #B42318;
  --danger-bg:  #FBE7E4;
  --danger-ink: #7F1D1D;

  --info:       #1D4ED8;
  --info-bg:    #E1EBFB;
  --info-ink:   #163D9D;

  --highlight:  #FFF4C8;      /* subtle yellow for marks */

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows — soft, paper-like */
  --sh-1: 0 1px 2px rgba(20, 15, 10, .03), 0 1px 1px rgba(20, 15, 10, .04);
  --sh-2: 0 2px 4px rgba(20, 15, 10, .04), 0 6px 14px rgba(20, 15, 10, .06);
  --sh-3: 0 6px 16px rgba(20, 15, 10, .08), 0 16px 32px rgba(20, 15, 10, .08);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* Typography */
  --font-ui:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif:  "Lora", Georgia, "Times New Roman", serif;
  --font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  0.8125rem;
  --fs-sm:  0.9rem;
  --fs-base: 1.0625rem;      /* 17px default */
  --fs-md:  1.125rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.65;
  --lh-loose: 1.8;

  /* Layout */
  --reading-max: 68ch;
  --dash-max:   1180px;
  --sidebar-w:   240px;
  --sidebar-w-collapsed: 72px;
  --header-h:   64px;
}

/* Dark mode — warm near-black, not pure #000 */
[data-theme="dark"] {
  --bg:          #15181A;
  --bg-elev:     #1B1F22;
  --surface:     #1E2327;
  --surface-2:   #232A2F;
  --surface-3:   #2B3238;

  --text:        #E8E4DC;
  --text-soft:   #BFBDB0;
  --text-mute:   #8A8A83;
  --text-inv:    #15181A;

  --line:        #2A3137;
  --line-strong: #3B434A;

  --accent:      #5EEAD4;
  --accent-bg:   rgba(94, 234, 212, 0.08);
  --accent-ink:  #A7F3E6;
  --accent-border: rgba(94, 234, 212, 0.35);

  --pass:        #5FD68A;
  --pass-bg:     rgba(95, 214, 138, 0.1);
  --pass-ink:    #A7E7BD;

  --warn:        #F5C27A;
  --warn-bg:     rgba(245, 194, 122, 0.1);
  --warn-ink:    #F9D9A8;

  --danger:      #F28B82;
  --danger-bg:   rgba(242, 139, 130, 0.08);
  --danger-ink:  #FAB3AC;

  --info:        #8AB4F8;
  --info-bg:     rgba(138, 180, 248, 0.08);
  --info-ink:    #C5D9FB;

  --highlight:   rgba(253, 224, 71, 0.22);

  --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
  --sh-2: 0 4px 10px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
  --sh-3: 0 12px 28px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.35);
}

/* Font-family override (from settings) */
[data-font="serif"] { --font-ui: "Lora", Georgia, serif; }
[data-font="hyperlegible"] { --font-ui: "Atkinson Hyperlegible", -apple-system, sans-serif; }

/* Font size override */
[data-font-size="sm"]  { --fs-base: 1rem;      --fs-md: 1.0625rem;   --fs-lg: 1.1875rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;  --fs-3xl: 2.125rem; }
[data-font-size="lg"]  { --fs-base: 1.1875rem; --fs-md: 1.25rem;     --fs-lg: 1.375rem;  --fs-xl: 1.625rem; --fs-2xl: 2rem;     --fs-3xl: 2.5rem; }

/* ---------- RESET & BASE ---------- */
* { box-sizing: border-box; }
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; line-height: var(--lh-tight); color: var(--text); }
h1 { font-size: var(--fs-3xl); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-2xl); margin: var(--sp-7) 0 var(--sp-4); }
h3 { font-size: var(--fs-xl);  margin: var(--sp-6) 0 var(--sp-3); color: var(--accent-ink); }
h4 { font-size: var(--fs-lg);  margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-ui); font-weight: 600; color: var(--text-soft); }
p, ul, ol { color: var(--text-soft); }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.5rem; }
li + li { margin-top: var(--sp-2); }
strong, b { color: var(--text); font-weight: 600; }
em { font-style: italic; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 0.125em 0.375em; border-radius: var(--r-sm); color: var(--text); }
kbd { font-family: var(--font-mono); font-size: 0.8em; background: var(--surface-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; padding: 0.125em 0.4em; border-radius: var(--r-sm); color: var(--text); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* Selection */
::selection { background: var(--accent-bg); color: var(--accent-ink); }

/* Focus ring — visible & non-jarring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- LAYOUT ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
[data-layout="no-sidebar"] .app, .app[data-layout="no-sidebar"] { grid-template-columns: 1fr; }

/* ---------- SUBJECT SWITCHER (sidebar) ---------- */
.subject-switcher { position: relative; margin: 0 var(--sp-3) var(--sp-3); }
.subject-switcher .ss-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text); font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
}
.subject-switcher .ss-trigger:hover { background: var(--surface-3); border-color: var(--accent-border); }
.subject-switcher .ss-label-col { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.subject-switcher .ss-eyebrow { font-size: 0.62rem; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.subject-switcher .ss-now { font-size: 0.85rem; color: var(--text); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 600; }
.subject-switcher .ss-caret { color: var(--text-mute); font-size: 0.8em; margin-left: 6px; transition: transform .15s; flex-shrink: 0; }
.subject-switcher[data-open="true"] .ss-caret { transform: rotate(180deg); }
.subject-switcher .ss-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 4px;
  z-index: 20;
  max-height: 360px; overflow-y: auto;
}
.subject-switcher .ss-menu[hidden] { display: none; }
.subject-switcher .ss-item {
  display: block; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); color: var(--text-soft);
  text-decoration: none; font-size: var(--fs-xs);
  transition: background .1s;
}
.subject-switcher .ss-item:hover { background: var(--accent-bg); color: var(--accent-ink); text-decoration: none; }
.subject-switcher .ss-item strong { display: block; color: var(--text); font-size: 0.84rem; margin-bottom: 2px; font-weight: 600; }
.subject-switcher .ss-item .ss-item-meta { color: var(--text-mute); font-size: 0.72rem; }
.subject-switcher .ss-item.ss-hub { border-top: 1px solid var(--line); margin-top: 4px; padding-top: var(--sp-2); color: var(--accent); font-weight: 600; }
.subject-switcher .ss-section-label { font-size: 0.6rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px var(--sp-3) 2px; font-weight: 700; }

.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sidebar .brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  text-decoration: none; color: var(--text);
}
.sidebar .brand .mark {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  color: var(--text-inv); display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem;
  box-shadow: var(--sh-1);
}
.sidebar .brand .name { font-family: var(--font-serif); font-weight: 600; font-size: 1.125rem; }
.sidebar .brand .sub  { color: var(--text-mute); font-size: var(--fs-xs); margin-top: -2px; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav .section-label {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.72rem; color: var(--text-mute); font-weight: 600;
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
}
.sidebar nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar nav a.active { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.sidebar nav a .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.sidebar nav a.active .icon { opacity: 1; color: var(--accent); }
.sidebar nav a .badge {
  margin-left: auto; background: var(--accent); color: var(--text-inv);
  font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  min-width: 22px; text-align: center;
}
.sidebar .footer-util { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.sidebar .streak-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--warn-bg); color: var(--warn-ink);
  border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: 600;
}

.main {
  min-width: 0;
  padding: var(--sp-4) 0 var(--sp-8);
}
.app-header {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6);
  height: var(--header-h);
  position: sticky; top: 0; z-index: 10;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .app-header { background: rgba(21, 24, 26, 0.85); }
.app-header .crumbs {
  color: var(--text-mute);
  font-size: var(--fs-sm);
  display: flex; align-items: center; gap: var(--sp-2);
  /* Each crumb stays on one line — prevents short labels wrapping to two lines on
     mobile because the natural space breaks. (UX audit 2026-04-23.) */
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.app-header .crumbs a, .app-header .crumbs strong { white-space: nowrap; }
.app-header .crumbs a { color: var(--text-soft); text-decoration: none; }
.app-header .crumbs a:hover { color: var(--accent); }
.app-header .crumbs .sep, .app-header .crumbs .crumb-sep { color: var(--text-mute); }
.app-header .actions { display: flex; align-items: center; gap: var(--sp-2); }
/* Header utility buttons: tap-target ≥40px on mobile (WCAG 2.5.5 says 44px;
   we shave a touch because the icons sit on a roomy nav bar with no near-by
   click traps). Desktop keeps the visual proportions. */
.app-header .actions button { min-width: 40px; min-height: 40px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.app-header .actions button svg { width: 18px; height: 18px; }

.content { padding: var(--sp-6); max-width: var(--dash-max); margin: 0 auto; }
/* Reading column left-aligned (was margin: 0 auto = centered) — when the
   sidebar is on the left and there's no right rail, centring leaves a wedge
   of dead space on the left while the prose runs out of room on the right.
   Left-align uses the width naturally. User feedback Batch M-rev. */
.content.reading { max-width: calc(var(--reading-max) + 4rem); padding: var(--sp-6) var(--sp-6) var(--sp-8); margin: 0; }
.content.reading article { max-width: var(--reading-max); margin: 0; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.55rem 1.05rem;
  background: var(--accent); color: var(--text-inv);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-weight: 500; font-size: var(--fs-sm);
  text-decoration: none;
  transition: filter .12s, transform .12s, box-shadow .12s;
  box-shadow: var(--sh-1);
}
.btn:hover { filter: brightness(0.96); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn .icon { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent-border); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-bg); }
.btn.subtle { background: var(--surface-2); color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.subtle:hover { background: var(--surface-3); }
.btn.danger { background: var(--danger); }
.btn.sm { padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }
.btn.lg { padding: 0.75rem 1.4rem; font-size: var(--fs-base); }
.btn.icon-only { padding: 0.45rem; }
.btn.icon-only .icon { width: 18px; height: 18px; }

.btn-group { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.btn-group button { padding: 0.3rem 0.75rem; background: transparent; color: var(--text-soft); border: 0; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.btn-group button.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--sh-1); }

/* ---------- CARDS ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
}
.card + .card { margin-top: var(--sp-4); }
.card-title { font-family: var(--font-serif); font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.card-lead  { color: var(--text-mute); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }

/* ---------- CALLOUTS ---------- */
.callout {
  display: grid; grid-template-columns: 32px 1fr;
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
}
/* When a callout is missing the .cicon (just .cbody alone), let the body span
   the full width — otherwise it gets squeezed into the 32px icon column and
   wraps one word per line. Caught 2026-04-28 on the journal page. */
.callout > .cbody:only-child { grid-column: 1 / -1; }
/* Authored content (TutorGuru unit pages) uses bare <strong> + <p> children
   inside .callout without the .cicon/.cbody wrapper. Switch to single column
   so each child spans the full width instead of being crammed into 32px. */
.callout:not(:has(> .cicon)) { grid-template-columns: 1fr; }
.callout .cicon { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.callout .cbody p:last-child, .callout .cbody ul:last-child { margin-bottom: 0; }
.callout .ctitle { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.callout.tip        { background: var(--info-bg);    border-left-color: var(--info);    }
.callout.tip .cicon  { color: var(--info); }
.callout.warn       { background: var(--warn-bg);    border-left-color: var(--warn);    }
.callout.warn .cicon { color: var(--warn); }
.callout.pearl      { background: var(--pass-bg);    border-left-color: var(--pass);    }
.callout.pearl .cicon { color: var(--pass); }
.callout.danger     { background: var(--danger-bg);  border-left-color: var(--danger);  }
.callout.danger .cicon { color: var(--danger); }
.callout.sa         { background: var(--warn-bg);    border-left-color: var(--warn);    }
.callout.sa .cicon  { color: var(--warn); }

/* ---------- TABLES ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-5); }
th, td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--surface-2); font-weight: 600; color: var(--text); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--surface-2); }

/* ---------- MASTERY RING (SVG) ---------- */
.ring { display: inline-grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-bg { stroke: var(--line); }
.ring .ring-fg { stroke: var(--accent); transition: stroke-dashoffset .6s cubic-bezier(.3,.1,.2,1); }
.ring .ring-label { position: absolute; font-size: 0.85rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ring.lg .ring-label { font-size: 1.25rem; }

/* ---------- DASHBOARD HERO ---------- */
.hero-dash {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
@media (max-width: 900px) { .hero-dash { grid-template-columns: 1fr; } }

.hero-card {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: ""; position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-bg) 0%, transparent 70%);
  opacity: 0.5; pointer-events: none;
}
.hero-card .eyebrow { color: var(--accent-ink); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: var(--sp-2); }
.hero-card h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-3xl); }
.hero-card p  { color: var(--text-soft); margin: 0 0 var(--sp-5); max-width: 50ch; }
.hero-card .hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
}
.stat-card .sc-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); flex-shrink: 0; }
.stat-card .sc-icon svg { width: 20px; height: 20px; }
.stat-card .sc-num { font-family: var(--font-serif); font-size: 1.65rem; font-weight: 600; color: var(--text); line-height: 1; }
.stat-card .sc-label { color: var(--text-mute); font-size: var(--fs-xs); margin-top: 2px; }

/* Section headers */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-7) 0 var(--sp-3); }
.section-head h2 { margin: 0; }
.section-head .sh-link { font-size: var(--fs-sm); color: var(--accent); text-decoration: none; font-weight: 500; }

/* ---------- UNIT LIST / CARDS ---------- */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-4); }
.unit-card-new {
  display: block;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.unit-card-new:hover { text-decoration: none; border-color: var(--accent-border); box-shadow: var(--sh-2); transform: translateY(-2px); }
.unit-card-new .uc-top { display: flex; justify-content: space-between; align-items: start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.unit-card-new .uc-num { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; }
.unit-card-new .uc-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.125rem; color: var(--text); line-height: 1.3; margin-bottom: var(--sp-2); }
.unit-card-new .uc-sub { font-size: var(--fs-sm); color: var(--text-mute); }
.unit-card-new .uc-meta { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-mute); }
.unit-card-new .uc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-mute); }
.unit-card-new.sub { background: var(--surface-2); }
.unit-card-new.coming { opacity: 0.65; pointer-events: none; }
.unit-card-new.coming .uc-badge { background: var(--surface-3); color: var(--text-mute); }
.unit-card-new .uc-badge {
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--pass-bg); color: var(--pass-ink);
}
.unit-card-new .uc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--sp-3); }
.unit-card-new .tag { font-size: 0.7rem; padding: 2px 8px; background: var(--surface-2); color: var(--text-mute); border-radius: var(--r-pill); }

/* ---------- READING PAGE ---------- */
.reading article h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.reading article .lead { font-size: var(--fs-md); color: var(--text-mute); margin-bottom: var(--sp-5); max-width: 58ch; }
.reading article .meta-row {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  color: var(--text-mute); font-size: var(--fs-sm);
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.reading article .meta-row .mr-item { display: inline-flex; align-items: center; gap: 6px; }
.reading article .meta-row .mr-item svg { width: 15px; height: 15px; opacity: 0.75; }

.reading article section { margin: var(--sp-7) 0; }
.reading article section > h2:first-child { margin-top: 0; }
.reading article blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-5); border-left: 3px solid var(--line-strong); color: var(--text-soft); font-style: italic; }

/* Hero image */
.hero-image {
  width: 100%; max-width: 100%; margin: 0 0 var(--sp-5);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--accent-bg);
  border: 1px solid var(--line);
}
.hero-image svg, .hero-image img { width: 100%; height: auto; display: block; }

/* TOC */
.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0 var(--sp-6);
}
.toc-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-mute); margin-bottom: var(--sp-2); }
.toc ol { margin: 0; padding-left: 1.4rem; }
.toc li { margin: 0.25rem 0; }
.toc a { color: var(--text-soft); text-decoration: none; font-size: var(--fs-sm); }
.toc a:hover { color: var(--accent); }

/* Reading progress bar at top */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: transparent; z-index: 50; pointer-events: none;
}
.reading-progress .bar { height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }

/* ---------- DETAILS / COLLAPSIBLE ---------- */
details.toggle {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin: var(--sp-3) 0;
  overflow: hidden;
}
details.toggle > summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text);
}
details.toggle > summary::-webkit-details-marker { display: none; }
details.toggle > summary::after { content: "＋"; color: var(--text-mute); font-size: 1.1em; transition: transform .2s; }
details.toggle[open] > summary::after { content: "−"; }
details.toggle > .body { padding: 0 var(--sp-4) var(--sp-4); }

/* ---------- FLASHCARD ---------- */
.flash-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; }
/* Row that holds [← nav-arrow] [CARD] [→ nav-arrow] side by side */
.flash-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); width: 100%; max-width: 700px; }
.flash-nav {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  color: var(--accent);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .08s;
  flex-shrink: 0;
}
.flash-nav:hover { background: var(--accent-bg); border-color: var(--accent-border); box-shadow: var(--sh-2); }
.flash-nav:active { transform: scale(0.94); }
.flash-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.flash-nav svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .flash-row { grid-template-columns: 1fr; }
  .flash-row .flash-nav { justify-self: center; min-width: 44px; min-height: 44px; }
  /* On mobile, hide the redundant "click again to flip back" helper — touch
     users intuitively tap to flip, and the helper was overflowing the fixed
     card height onto the deep-dive chip row. (UX audit 2026-04-23 — A7.3.) */
  .face .flip-hint { display: none; }
  /* Auto-injected deep-dive footer needs vertical breathing room on mobile */
  .dd-link-footer { padding: var(--sp-3) 0 !important; }
  /* Header on narrow viewports — hide the crumbs entirely (the sidebar nav
     and the platform back gesture both let users navigate back; the crumbs
     were getting squeezed to invisibility next to the pomodoro+icons row).
     UX audit 2026-04-23 — A3.4 recommendation. */
  .app-header { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .app-header .crumbs { display: none; }
}
.flash-meta {
  display: flex; gap: var(--sp-4); align-items: center; color: var(--text-mute); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.flash-meta .pill { padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-soft); }
.flash-card {
  width: 100%; max-width: 600px; min-height: 300px;
  perspective: 1400px;
  cursor: pointer;
  user-select: none;
}
.flash-card .flash-inner {
  position: relative; width: 100%; height: 100%; min-height: 300px;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.flash-card.flipped .flash-inner { transform: rotateY(180deg); }
.flash-card .face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: var(--sp-6);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 1.15rem; line-height: 1.5;
}
.flash-card .face.back { transform: rotateY(180deg); background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-border); }
.flash-card .face .flip-hint { position: absolute; bottom: var(--sp-3); left: 0; right: 0; text-align: center; font-size: 0.72rem; color: var(--text-mute); letter-spacing: 0.05em; text-transform: uppercase; }

.flash-controls { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: center; }
.flash-rate { display: flex; gap: var(--sp-2); }
.flash-rate button { padding: 0.55rem 1.1rem; border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .1s, background .15s; }
.flash-rate button:hover { transform: translateY(-2px); }
.flash-rate button[data-rate="again"] { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger); }
.flash-rate button[data-rate="hard"]  { background: var(--warn-bg);   color: var(--warn-ink);   border-color: var(--warn); }
.flash-rate button[data-rate="good"]  { background: var(--pass-bg);   color: var(--pass-ink);   border-color: var(--pass); }
.flash-rate button[data-rate="easy"]  { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent); }
.flash-rate button .subtext { display: block; font-size: 0.7rem; color: var(--text-mute); margin-top: 2px; font-weight: 500; }

/* ---------- QUIZ (UWorld-style) ---------- */
.quiz-container { max-width: 780px; margin: 0 auto; }
.quiz-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
}
.quiz-scenario {
  background: var(--info-bg); border-left: 3px solid var(--info);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: var(--r-md); color: var(--info-ink); font-style: italic;
}
.quiz-stem { font-weight: 500; color: var(--text); font-size: 1.05rem; margin-bottom: var(--sp-4); line-height: 1.5; }
.quiz-stem .qnum { color: var(--accent); font-weight: 700; margin-right: 0.4em; }
.quiz-type-tag { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-mute); background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-pill); margin-bottom: var(--sp-2); }

.quiz-opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.quiz-opt {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  position: relative;
}
.quiz-opt:hover { border-color: var(--accent-border); background: var(--accent-bg); }
.quiz-opt .opt-key {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--fs-sm);
  display: grid; place-items: center; flex-shrink: 0;
}
.quiz-opt .opt-text { color: var(--text); font-size: var(--fs-sm); line-height: 1.5; padding-top: 4px; }
.quiz-opt.picked { border-color: var(--accent); background: var(--accent-bg); }
.quiz-opt.picked .opt-key { background: var(--accent); color: var(--text-inv); }
/* CRITICAL: hide rationales before reveal — otherwise the "why" text leaks
   the answer to the student before they've picked. (UX bug found by Playwright
   test 2026-04-23 — was visible on desktop AND mobile.) */
.quiz-opt .rationale { display: none; }

.quiz-item.revealed .quiz-opt.correct { border-color: var(--pass); background: var(--pass-bg); }
.quiz-item.revealed .quiz-opt.correct .opt-key { background: var(--pass); color: #fff; }
.quiz-item.revealed .quiz-opt.wrong   { border-color: var(--danger); background: var(--danger-bg); }
.quiz-item.revealed .quiz-opt.wrong .opt-key { background: var(--danger); color: #fff; }
.quiz-item.revealed .quiz-opt .rationale {
  display: block;
  grid-column: 2; margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  color: var(--text-soft); font-size: var(--fs-xs); line-height: 1.5;
}
.quiz-item.revealed .quiz-opt.correct .rationale { border-color: var(--pass); }
.quiz-item.revealed .quiz-opt.wrong   .rationale { border-color: var(--danger); }

.quiz-teaching {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--warn-bg); border-radius: var(--r-md);
  color: var(--warn-ink); font-size: var(--fs-sm);
  display: none;
}
.quiz-item.revealed .quiz-teaching { display: block; }
.quiz-teaching strong { color: var(--warn-ink); }

.quiz-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- POMODORO WIDGET ---------- */
.pomo-widget {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 10px 6px 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pomo-widget .pomo-ring { width: 22px; height: 22px; }
.pomo-widget.running .pomo-ring .ring-fg { stroke: var(--accent); }
.pomo-widget.break .pomo-ring .ring-fg { stroke: var(--pass); }
.pomo-widget button { background: transparent; border: 0; padding: 4px 6px; color: var(--text-mute); cursor: pointer; border-radius: var(--r-sm); }
.pomo-widget button:hover { background: var(--surface-2); color: var(--text); }
.pomo-widget .pomo-clock { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 44px; }
.pomo-widget .pomo-label { font-size: var(--fs-xs); color: var(--text-soft); white-space: nowrap; }
@media (max-width: 720px) { .pomo-widget .pomo-label { display: none; } }

/* ---------- SETTINGS / MODAL ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  max-width: 520px; width: 90%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: var(--sh-3);
}
.modal h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); }
.modal .field { margin-bottom: var(--sp-5); }
.modal .field label { display: block; font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.modal .field .help { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--sp-1); }

/* ---------- EDIT-CONTENT MODAL SHELL (cards / quiz / unit notes) ----------
   Different shape from the legacy `.modal` settings panel: this uses a fixed
   full-viewport overlay that centres a panel, so the modal opens in the
   middle of the visible viewport regardless of how far down the user has
   scrolled in the underlying page. The legacy `.modal` (used by Settings)
   is unchanged. */
.modal-shell {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
}
.modal-shell .modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.modal-shell .modal-panel {
  position: relative; z-index: 1;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  width: 100%;            /* respect inline max-width set per-modal */
  /* svh (small viewport height) excludes browser chrome on mobile, unlike vh
     which includes the address-bar area. Falls back to vh on older browsers. */
  max-height: 90vh;
  max-height: 90svh;
  min-height: 0;          /* override flexbox default min-height:auto so max-height is honoured */
  display: flex; flex-direction: column;
  overflow: hidden;       /* contain the body's scroll, keep head/foot pinned */
}
.modal-shell .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal-shell .modal-head h2 { margin: 0; font-size: var(--fs-lg); }
.modal-shell .modal-body {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-shell .modal-foot {
  flex: 0 0 auto;
  background: var(--bg-elev);
}
/* Mobile: full-width with small safe-area padding, panel uses the full viewport.
   max-height: 100% (relative to modal-shell which is viewport-sized) avoids
   the iOS-style 100vh-includes-address-bar bug where 100vh > actual viewport. */
@media (max-width: 540px) {
  .modal-shell { padding: 0; }
  .modal-shell .modal-panel { max-height: 100vh; max-height: 100svh; height: 100%; border-radius: 0; border: 0; }
}

/* Search overlay */
.search-overlay { position: fixed; inset: 0; z-index: 90; display: none; align-items: start; justify-content: center; padding-top: 12vh; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); }
.search-overlay.open { display: flex; }
.search-box {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: 92%; max-width: 640px;
  max-height: 70vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.search-box input {
  width: 100%; padding: var(--sp-4) var(--sp-5);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 1.15rem; outline: none;
}
.search-box input::placeholder { color: var(--text-mute); }
/* Scope filter row — pills above the results list. Lets the student narrow
   to "just learning material" / "just flashcards" / "just exam questions"
   so the scroll list isn't a noisy mix when they want to focus on one type. */
.search-scopes {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.search-scopes .scope-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.search-scopes .scope-chip:hover { border-color: var(--accent-border); color: var(--text); }
.search-scopes .scope-chip.active {
  background: var(--accent); color: var(--text-inv); border-color: var(--accent);
}
.search-scopes .scope-chip .sc-count {
  background: rgba(0,0,0,0.08); color: inherit;
  padding: 1px 6px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.search-scopes .scope-chip.active .sc-count { background: rgba(255,255,255,0.18); }
@media (max-width: 540px) {
  .search-scopes { padding: var(--sp-2) var(--sp-3); gap: 4px; }
  .search-scopes .scope-chip .sc-label {
    /* Truncate long labels on narrow viewports so all 4 chips fit one row */
    max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

.search-results { overflow-y: auto; padding: var(--sp-2); }
.search-result { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.search-result:hover, .search-result.active { background: var(--accent-bg); }
.search-result .sr-title { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.search-result .sr-meta  { font-size: var(--fs-xs); color: var(--text-mute); }
.search-result .sr-snippet { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.search-result .sr-snippet mark { background: var(--highlight); color: var(--text); padding: 0 2px; border-radius: 2px; }
.search-hint { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); color: var(--text-mute); background: var(--surface-2); border-top: 1px solid var(--line); display: flex; gap: var(--sp-4); }

/* Legacy per-unit "Mark as reviewed" button — superseded by the auto-injected
   .unit-reviewed-toggle from mountUnitNotesUI. Hide so unit pages don't show
   two toggles. (UX audit 2026-04-23 — A3.2.) */
#mark-reviewed-btn { display: none; }

/* ---------- CRAM MODE ----------
   Procedurally-derived 10-minute revision view per unit. Uses unit-structures.json.
   Designed to be skim-readable in low-time-high-stress contexts. */
.cram-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.cram-controls { min-width: 240px; }
.cram-picker { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
.cram-section { margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.cram-distill { background: var(--accent-bg); border-color: var(--accent-border); border-left: 4px solid var(--accent); }
.cram-distill .cram-eyebrow { font-size: var(--fs-xs); color: var(--accent-ink); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cram-distill-text { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; color: var(--text); margin: var(--sp-2) 0 0; }
.cram-h { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.cram-count { font-size: 0.7rem; padding: 2px 8px; background: var(--surface-2); color: var(--text-mute); border-radius: var(--r-pill); font-weight: 600; }
.cram-prose p { margin: 0 0 var(--sp-3); }
.cram-prose ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.cram-pearl { padding: var(--sp-2) var(--sp-3); background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: var(--r-sm); margin: var(--sp-2) 0; font-size: var(--fs-sm); }
.cram-facts { padding-left: var(--sp-5); margin: 0; }
.cram-facts li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); line-height: 1.55; }
.cram-mnemonics { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.cram-mnem { padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); border-left: 3px solid var(--warn); }
.cram-mnem-title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.cram-mnem-body { font-size: var(--fs-sm); color: var(--text-soft); }
.cram-q, .cram-cards details { background: var(--surface-2); border-radius: var(--r-md); margin-bottom: var(--sp-2); padding: var(--sp-3); }
.cram-q summary { cursor: pointer; font-weight: 500; line-height: 1.5; list-style: none; }
.cram-q summary::before { content: '▸ '; color: var(--accent-ink); margin-right: 4px; transition: transform .15s; }
.cram-q[open] summary::before { content: '▾ '; }
.cram-q-answer { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-soft); }
.cram-q-why { margin-top: var(--sp-2); color: var(--text-mute); font-style: italic; }
.cram-q-tp { margin-top: var(--sp-2); padding: var(--sp-2); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-sm); }
.cram-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- AUDIO NARRATION OVERLAY ----------
   Web Speech API-based "Listen to this unit" player. Bottom-of-page drawer
   that highlights the currently-spoken paragraph, with playback + voice + speed
   controls. Survives page navigation via stored position per unit. */
.listen-launch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--accent-bg); color: var(--accent-ink);
  border: 1px solid var(--accent-border); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.listen-launch-btn:hover { background: var(--accent); color: white; }
.listen-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--bg-elev); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  padding: var(--sp-3) var(--sp-4); display: none;
}
.listen-drawer.open { display: block; }
.listen-drawer .ld-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.listen-drawer .ld-progress { flex: 1 1 200px; min-width: 200px; }
.listen-drawer .ld-status { font-size: var(--fs-xs); color: var(--text-mute); }
.listen-drawer .ld-bar { height: 4px; background: var(--surface-2); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.listen-drawer .ld-bar-fg { height: 100%; background: var(--accent); width: 0%; transition: width .2s linear; }
.listen-drawer button { min-width: 44px; min-height: 44px; padding: 6px 10px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; color: var(--text); font-size: var(--fs-sm); }
.listen-drawer button:hover { background: var(--surface-2); }
.listen-drawer button.primary { background: var(--accent); color: white; border-color: var(--accent); }
.listen-drawer select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: var(--fs-xs); max-width: 140px; }
.listen-drawer .ld-close { margin-left: auto; }
.ld-bm-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.ld-bm-chip:hover { background: var(--accent-bg); color: var(--accent-ink); }
/* Transcript panel — slides up from the drawer when 📖 Transcript is toggled */
.listen-drawer.expanded { max-height: 75vh; overflow: hidden; display: flex; flex-direction: column; }
.listen-drawer .ld-transcript { display: block; max-height: 60vh; overflow-y: auto; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--bg); }
.listen-drawer .ld-transcript[hidden] { display: none; }
.ld-tx-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.ld-tx-close-btn { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 12px; cursor: pointer; font-size: var(--fs-sm); color: var(--text); }
.ld-tx-close-btn:hover { background: var(--surface-2); }
.ld-bm-panel { background: var(--surface-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-3); }
.ld-bm-title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 4px; }
.ld-bm-empty { color: var(--text-mute); font-size: var(--fs-xs); }
.ld-bm-item { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; font-size: var(--fs-sm); border-top: 1px dashed var(--line); }
.ld-bm-item:first-child { border-top: 0; }
.ld-bm-time { font-variant-numeric: tabular-nums; color: var(--text-mute); min-width: 44px; }
.ld-bm-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-bm-jump, .ld-bm-del { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.ld-bm-del { color: var(--danger-ink); }
.ld-tx-seg { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-2); cursor: pointer; transition: background .15s; }
.ld-tx-seg:hover { background: var(--surface-2); }
.ld-tx-seg.active { background: var(--accent-bg); border-left: 3px solid var(--accent); }
.ld-tx-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; font-size: var(--fs-sm); }
.ld-tx-time { font-variant-numeric: tabular-nums; color: var(--text-mute); }
.ld-tx-bm { margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 2px 6px; }
.ld-tx-seg p { margin: 4px 0; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.ld-tx-loading, .ld-tx-empty { padding: var(--sp-4); color: var(--text-mute); text-align: center; }
/* Highlighted paragraph (the one currently being spoken) */
.listen-current {
  background: linear-gradient(90deg, var(--accent-bg) 0%, transparent 100%) !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: var(--sp-3) !important;
  scroll-margin-top: 80px;
}
@media (max-width: 640px) {
  .listen-drawer { padding: var(--sp-2); }
  .listen-drawer .ld-row { gap: var(--sp-2); }
  .listen-drawer select { max-width: 110px; }
  /* Push article bottom padding up so the drawer doesn't cover content */
  body.listen-active .content { padding-bottom: 140px; }
}

/* ---------- DEEP DIVE ----------
   Pages live at primary-healthcare-2/deep-dive/<slug>.html and reuse the
   `.app` + `.sidebar` + `.main` shell. The body carries `class="deep-dive-page"`
   so we can give travelled-pages a subtly different feel from unit pages
   without rewriting layout. Inline link `.dd-link` is the primary surface
   for stumbling into a deep-dive from a unit. `.dd-gloss` is the inline
   <details> micro-form for very short concepts that don't deserve a page. */

/* Inline link inside unit prose — magnifier glyph + soft accent background */
.dd-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-bg);
  color: var(--accent-ink);
  text-decoration: none;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-pill);
  padding: 2px 10px 2px 8px;
  font-weight: 600; font-size: 0.94em;
  transition: background .15s, transform .12s;
}
.dd-link::before {
  content: "🔍";
  font-size: 0.85em;
  filter: grayscale(0.3);
}
.dd-link::after {
  content: "→";
  margin-left: 2px; opacity: 0.7;
  transition: transform .15s;
}
.dd-link:hover { background: var(--accent); color: white; text-decoration: none; transform: translateY(-1px); }
.dd-link:hover::after { transform: translateX(3px); opacity: 1; }

/* Block variant — for the "callout" placement under a unit section */
.dd-link-block {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .12s;
}
.dd-link-block:hover { text-decoration: none; box-shadow: var(--sh-2); transform: translateY(-1px); }
.dd-link-block .ddb-icon { font-size: 1.5rem; flex: 0 0 auto; }
.dd-link-block .ddb-body { flex: 1 1 auto; }
.dd-link-block .ddb-eyebrow { font-size: var(--fs-xs); color: var(--accent-ink); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dd-link-block .ddb-title { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text); font-weight: 600; margin-top: 2px; }
.dd-link-block .ddb-meta { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 4px; }
.dd-link-block .ddb-arrow { font-size: 1.25rem; color: var(--accent-ink); flex: 0 0 auto; }

/* Inline micro-deep-dive (short concept, no page warranted) */
.dd-gloss {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-3) 0;
  font-size: var(--fs-sm);
}
.dd-gloss > summary {
  cursor: pointer; font-weight: 600; color: var(--accent-ink); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.dd-gloss > summary::before { content: "🔍"; font-size: 0.9em; }
.dd-gloss[open] > summary { margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); }

/* Deep-dive page chrome */
body.deep-dive-page .content { max-width: 880px; }
.dd-back-strip {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  backdrop-filter: blur(6px);
}
.dd-back-strip .dd-back-link {
  color: var(--accent-ink); text-decoration: none; font-weight: 600;
}
.dd-back-strip .dd-back-link:hover { text-decoration: underline; }
.dd-back-strip .dd-badge {
  background: var(--accent); color: white;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 10px; border-radius: var(--r-pill);
}
.dd-back-strip .dd-meta-inline { color: var(--text-mute); font-size: var(--fs-xs); margin-left: auto; }

/* Hero block on deep-dive pages */
.dd-hero { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.dd-hero h1 { margin: 0 0 var(--sp-2); font-size: 2rem; line-height: 1.2; }
.dd-hero .dd-subtitle { font-size: 1.1rem; color: var(--text-soft); margin: 0 0 var(--sp-3); font-style: italic; }
.dd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-tag {
  font-size: 0.72rem; padding: 2px 10px;
  background: var(--surface-2); color: var(--text-mute);
  border-radius: var(--r-pill); font-weight: 600;
}

/* TOC — same look as the unit-page "In this unit" block */
.dd-toc {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
}
.dd-toc strong { display: block; font-size: var(--fs-sm); color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.dd-toc ol { margin: 0; padding-left: var(--sp-5); }
.dd-toc li { margin: 4px 0; font-size: var(--fs-sm); }
.dd-toc a { color: var(--text); text-decoration: none; }
.dd-toc a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Related + Referenced-from footers */
.dd-related, .dd-referenced-from {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2); border-radius: var(--r-md);
  border-left: 3px solid var(--accent-border);
}
.dd-related h3, .dd-referenced-from h3 {
  margin: 0 0 var(--sp-3); font-size: var(--fs-sm);
  color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase;
}
.dd-related ul, .dd-referenced-from ul { margin: 0; padding-left: var(--sp-4); }
.dd-related li, .dd-referenced-from li { margin: 6px 0; font-size: var(--fs-sm); }

/* Deep-dive index page — reuses .unit-grid + .unit-card-new shell, so no
   new grid CSS needed (per UX-scalability rule: same pattern scales to 30+). */

/* Sticky video block (Geeky Medics pattern, deferred — placeholder) */
.dd-video.sticky { position: sticky; top: 60px; }
.dd-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-md); }

/* Mobile tweaks */
@media (max-width: 640px) {
  .dd-back-strip { padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
  .dd-back-strip .dd-meta-inline { margin-left: 0; flex-basis: 100%; }
  .dd-hero h1 { font-size: 1.5rem; }
  .dd-link-block { flex-direction: column; align-items: flex-start; }
  .dd-link-block .ddb-arrow { display: none; }
  /* Tables on mobile: wrap in a horizontally-scrollable container so wide
     reference tables don't break the layout. (UX audit 2026-04-23.) */
  article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  article table thead, article table tbody { white-space: nowrap; }
}

/* ---------- HEATMAP (GitHub-style) ---------- */
.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 100%; }
.heatmap .hm-cell {
  aspect-ratio: 1; background: var(--surface-2); border-radius: 3px;
  min-width: 12px;
}
.heatmap .hm-cell[data-level="1"] { background: rgba(15, 118, 110, 0.25); }
.heatmap .hm-cell[data-level="2"] { background: rgba(15, 118, 110, 0.5); }
.heatmap .hm-cell[data-level="3"] { background: rgba(15, 118, 110, 0.75); }
.heatmap .hm-cell[data-level="4"] { background: var(--accent); }
[data-theme="dark"] .heatmap .hm-cell[data-level="1"] { background: rgba(94, 234, 212, 0.18); }
[data-theme="dark"] .heatmap .hm-cell[data-level="2"] { background: rgba(94, 234, 212, 0.38); }
[data-theme="dark"] .heatmap .hm-cell[data-level="3"] { background: rgba(94, 234, 212, 0.65); }
[data-theme="dark"] .heatmap .hm-cell[data-level="4"] { background: var(--accent); }

/* Toast */
.toast-holder { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: var(--sp-2); z-index: 200; pointer-events: none; }
.toast {
  background: var(--bg-elev); border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  color: var(--text); font-size: var(--fs-sm);
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 220px;
  animation: toast-in .25s cubic-bezier(.2,.7,.3,1);
  pointer-events: auto;
}
.toast .ticon { width: 18px; height: 18px; color: var(--pass); }
.toast .toast-act { margin-left: auto; padding: 4px 12px; background: transparent; border: 1px solid var(--accent); color: var(--accent-ink); border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-xs); cursor: pointer; }
.toast .toast-act:hover { background: var(--accent-bg); }
.toast.info .ticon { color: var(--info); }
.toast.warn .ticon { color: var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- HIGH-YIELD EXAM-FOCUS HIGHLIGHT ---------- */
/* Default: mark elements render as plain text (no highlight). */
mark.hi-yield { background: transparent; color: inherit; padding: 0; }
/* When exam-focus is ON: subtle warm-yellow wash. */
[data-exam-focus="on"] mark.hi-yield {
  background: var(--highlight);
  color: var(--text);
  padding: 1px 3px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="dark"][data-exam-focus="on"] mark.hi-yield {
  background: rgba(253, 224, 71, 0.22);
  color: var(--text);
}

/* Cramming-user feedback Batch L: when exam-focus is ON, suppress
   distracting non-essential content so the eye lands on the hi-yield bits.
   Reflection prompts collapse, deep-dive cross-link footers hide, paragraphs
   without highlights dim to 65% opacity. The user can still scroll to
   anything; we just take the visual weight off. */
[data-exam-focus="on"] .reveal-prompt,
[data-exam-focus="on"] .dd-link-block,
[data-exam-focus="on"] .reflection-grade,
[data-exam-focus="on"] details.section-sources {
  display: none !important;
}
[data-exam-focus="on"] article > p,
[data-exam-focus="on"] section > p,
[data-exam-focus="on"] article > ul,
[data-exam-focus="on"] section > ul {
  opacity: 0.65;
  transition: opacity .15s;
}
[data-exam-focus="on"] article > p:hover,
[data-exam-focus="on"] section > p:hover,
[data-exam-focus="on"] article > ul:hover,
[data-exam-focus="on"] section > ul:hover { opacity: 1; }
/* Paragraphs/lists CONTAINING a hi-yield mark stay full opacity */
[data-exam-focus="on"] p:has(mark.hi-yield),
[data-exam-focus="on"] li:has(mark.hi-yield),
[data-exam-focus="on"] ul:has(mark.hi-yield) { opacity: 1 !important; }
/* Always keep callouts (Pass-first summary etc) prominent */
[data-exam-focus="on"] .callout,
[data-exam-focus="on"] .pearl,
[data-exam-focus="on"] .sa-context { opacity: 1 !important; }

/* ---------- PER-SECTION SOURCES (subtle disclosure) ---------- */
details.section-sources {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-xs);
}
details.section-sources > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-mute);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  transition: color .15s, background .15s;
  user-select: none;
}
details.section-sources > summary::-webkit-details-marker { display: none; }
details.section-sources > summary:hover { color: var(--text-soft); background: var(--surface-2); }
details.section-sources > summary::before { content: "📖"; font-size: 0.85em; opacity: 0.7; }
details.section-sources[open] > summary { color: var(--text); }
details.section-sources .src-list {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-md);
  color: var(--text-mute);
  list-style: none;
}
details.section-sources .src-list li { margin: 0.25rem 0; line-height: 1.5; }
details.section-sources .src-list li::before { content: "• "; color: var(--text-mute); }

/* ---------- REFLECTION CARD (reveal-on-click) ---------- */
.reflection-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-3) 0;
}
.reflection-card .rc-q {
  font-weight: 500; color: var(--text); margin: 0 0 var(--sp-3); line-height: 1.5;
}
.reflection-card .rc-q .rc-num { color: var(--accent); font-weight: 700; margin-right: 6px; }
.reflection-card button.show-frame {
  background: transparent; border: 1px solid var(--accent-border);
  color: var(--accent); padding: 0.35rem 0.9rem; border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.reflection-card button.show-frame:hover { background: var(--accent-bg); }
.reflection-card .rc-frame {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--accent-bg); border-radius: var(--r-md);
  color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.55;
  display: none;
}
.reflection-card .rc-frame strong { color: var(--accent-ink); }
.reflection-card.revealed .rc-frame { display: block; }
.reflection-card.revealed button.show-frame { display: none; }

/* ---------- FLOATING BACK-TO-TOP ---------- */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2);
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s, transform .2s, background .15s, box-shadow .15s;
  pointer-events: none;
  z-index: 40;
}
.back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--accent); color: var(--text-inv); box-shadow: var(--sh-3); }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- UNIT META EXAM-FOCUS TOGGLE ---------- */
.exam-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.exam-toggle:hover { color: var(--text); border-color: var(--warn); }
.exam-toggle.on { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.exam-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background .15s; }
.exam-toggle.on .dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.18); }

/* ---------- VIDEO/RESOURCE LIST ---------- */
ul.res-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
ul.res-list a.res-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
ul.res-list a.res-item:hover { border-color: var(--accent-border); transform: translateX(2px); box-shadow: var(--sh-1); text-decoration: none; }
ul.res-list a.res-item .ri-icon { color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; }
ul.res-list a.res-item .ri-title { flex: 1; font-weight: 500; }
ul.res-list a.res-item .ri-meta { font-size: var(--fs-xs); color: var(--text-mute); }

/* Hero swap: switch between inline SVG and external image */
.hero-image[data-hero-style="detailed"] .hero-inline { display: none; }
.hero-image[data-hero-style="simple"] .hero-external { display: none; }
.hero-image .hero-external img {
  width: 100%; height: auto; display: block;
  background: var(--surface-2);
}

/* Utility */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.muted { color: var(--text-mute); }
.hidden { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); }

/* ---------- MOBILE NAV (hamburger + slide-in drawer) ----------
   Below 900px the desktop sidebar collapses. Hamburger button (rendered by
   renderHeader()) toggles body.nav-open which slides the sidebar in from
   the left as a fixed drawer with a tap-to-close backdrop. Reuses the
   existing sidebar markup — no parallel mobile nav. */
.nav-trigger {
  display: none;
  background: transparent; border: 0; padding: 8px 10px; cursor: pointer;
  color: var(--text); font-size: 1.4rem; line-height: 1;
  border-radius: var(--r-md);
}
.nav-trigger:hover { background: var(--surface-2); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 90; display: none; }
body.nav-open .nav-backdrop { display: block; }

/* Responsive — laptop-first, graceful mobile */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app-header { padding: 0 var(--sp-3); }
  .content { padding: var(--sp-4); }
  /* Sidebar becomes a fixed slide-in drawer instead of hidden */
  .sidebar {
    display: block;
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 280px; max-width: 85vw;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
    box-shadow: 4px 0 18px rgba(0,0,0,0.15);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-trigger { display: inline-flex; align-items: center; justify-content: center; }
}

/* Sticky unit CTA bar (Mark reviewed + Next unit). Slides up after 50% scroll. */
.sticky-unit-cta {
  position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 120%);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 12px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  z-index: 80;
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  max-width: calc(100vw - 32px);
}
.sticky-unit-cta.visible { transform: translate(-50%, 0); opacity: 1; }
.sticky-unit-cta .btn { white-space: nowrap; }

/* Deep-dive read tracking — pill in section header + read-state on tile */
.dd-progress {
  display: inline-flex; align-items: center; padding: 2px 12px;
  background: var(--surface-2); color: var(--text-soft);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  margin-left: var(--sp-3);
}
.unit-card-new.dd-read { border-left: 3px solid var(--pass); }

/* Per-unit completion meter (3 segments: cards seen / matured / reviewed flag) */
.uc-progress {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4px; margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}
.uc-progress .upg {
  position: relative; height: 6px; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden; display: block;
}
.uc-progress .upg i {
  position: absolute; inset: 0; border-radius: inherit;
  width: var(--pct, 0%);
  background: var(--accent-soft, #99c4b4);
  transition: width .25s ease;
}
.uc-progress .upg[data-kind="seen"] i   { background: var(--info, #38BDF8); }
.uc-progress .upg[data-kind="mature"] i { background: var(--warn, #F59E0B); }
.uc-progress .upg[data-kind="review"] i { background: var(--pass, #10B981); width: 0%; }
.uc-progress .upg[data-kind="review"][data-on="yes"] i { width: 100%; }

/* Back arrow in app header — appears on every non-hub page. Familiar nav
   pattern; hits history.back() with a parent-page fallback. */
.header-back { font-size: 1.1rem; line-height: 1; color: var(--text-soft); margin-right: 4px; }
.header-back:hover { color: var(--accent); background: var(--surface-2); }

/* Tool tiles on subject dashboards — visually distinct from unit tiles so the
   eye doesn't gloss past them as Yet More Units. */
.tool-card { background: var(--accent-bg); border-left: 3px solid var(--accent); }
.tool-card:hover { background: color-mix(in srgb, var(--accent-bg) 70%, white); }

/* Hub tools — inline icon strip in the header (desktop) so 5 features are
   discoverable at a glance. Hidden on mobile (sidebar drawer covers it). */
.hub-tools-strip { display: inline-flex; gap: 4px; align-items: center; padding: 0 6px; border-left: 1px solid var(--line); margin-left: 4px; }
.hub-tool-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  text-decoration: none; border: 0; outline: 0; font-size: 1.05rem;
  color: var(--text-soft);
  transition: background .12s, color .12s;
}
.hub-tool-icon:hover,
.hub-tool-icon:focus-visible { background: var(--accent-bg); color: var(--accent); text-decoration: none; }
.hub-tool-icon.active { background: var(--highlight); color: var(--text); }
@media (max-width: 900px) {
  .hub-tools-strip { gap: 2px; padding: 0 4px; margin-left: 0; border-left: 0; }
  .hub-tool-icon { width: 32px; height: 32px; font-size: 0.95rem; }
}

/* Clinical-decision flowchart widget */
.fc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); margin: var(--sp-3) 0; }
.fc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.fc-restart { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; }
.fc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-mute); margin-bottom: var(--sp-2); }
.fc-crumb { background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-pill); }
.fc-arrow { color: var(--text-mute); }
.fc-question { font-size: 1.05rem; font-weight: 500; margin: var(--sp-3) 0; }
.fc-answers { display: flex; flex-direction: column; gap: var(--sp-2); }
.fc-answer { padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; text-align: left; font-size: 0.95rem; transition: background .12s; }
.fc-answer:hover { background: var(--accent-bg); border-color: var(--accent); }
.fc-terminal.sev-danger { border-color: var(--danger); background: var(--danger-bg, #FEE2E2); }
.fc-terminal.sev-warn { border-color: var(--warn); background: var(--warn-bg, #FEF3C7); }
.fc-terminal.sev-info { border-color: var(--accent); background: var(--accent-bg); }
.fc-decision { font-size: 1.1rem; font-weight: 700; margin: var(--sp-3) 0; }
.fc-reasoning, .fc-action { font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* User-highlight layer + floating menu */
mark.user-hl { padding: 0 2px; border-radius: 2px; cursor: pointer; }
mark.user-hl-y { background: #FEF3C7; color: #78350F; }
mark.user-hl-g { background: #D1FAE5; color: #064E3B; }
mark.user-hl-b { background: #DBEAFE; color: #1E3A8A; }
[data-theme="dark"] mark.user-hl-y { background: rgba(253,224,71,0.18); color: #FCD34D; }
[data-theme="dark"] mark.user-hl-g { background: rgba(95,214,138,0.18); color: var(--pass-ink); }
[data-theme="dark"] mark.user-hl-b { background: rgba(96,165,250,0.18); color: #93C5FD; }
[data-theme="dark"] .occl-region.other { background: rgba(40,46,52,0.85); color: var(--text-soft); border: 1px dashed var(--line-strong); }
[data-theme="dark"] .occl-region.target.hide { background: var(--accent); color: var(--text-inv); border: 2px solid var(--accent-ink); }
[data-theme="dark"] .occl-region.target.reveal { background: rgba(95,214,138,0.85); color: var(--text-inv); border: 2px solid var(--pass); }
mark.user-hl[data-note]::after { content: " 📝"; font-size: 0.85em; opacity: 0.7; }
.hl-menu {
  display: flex; gap: 6px; padding: 6px 8px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 1000;
  font-size: var(--fs-xs);
}
.hl-menu .hl-swatch { width: 28px; height: 28px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); cursor: pointer; font-weight: 700; }
.hl-menu .hl-note-btn { padding: 4px 10px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.hl-menu .hl-note-btn:hover { background: var(--surface-2); }

/* Weakness-finder dashboard widget */
.weakness-card { margin: var(--sp-4) 0 var(--sp-5); }
.weak-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.weak-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
@media (max-width: 540px) {
  .weak-list li { flex-direction: column; align-items: stretch; }
  .weak-list li .btn { text-align: center; }
}

/* Cloze-deletion rendering */
.cloze-blank { font-family: var(--font-mono, monospace); color: var(--accent-ink); padding: 0 2px; background: var(--surface-2); border-radius: 3px; letter-spacing: 1px; }
.cloze-reveal { background: var(--accent-bg); color: var(--accent-ink); padding: 1px 4px; border-radius: 3px; font-weight: 600; }

/* Image-occlusion card type — image with rectangular overlays. The "target"
   region is hidden on the front and revealed on the back; other regions stay
   labeled in muted ink to preserve context. */
.occl-prompt { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-2); font-style: italic; }
.occl-stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.occl-stage img { width: 100%; height: 100%; display: block; object-fit: contain; }
.occl-region { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border-radius: 3px; pointer-events: none; }
.occl-region.other { background: rgba(255,255,255,0.7); color: var(--text-soft); border: 1px dashed var(--line-strong, #aaa); }
.occl-region.target.hide { background: var(--accent); color: white; border: 2px solid var(--accent-ink); }
.occl-region.target.reveal { background: var(--pass-bg); color: var(--pass-ink); border: 2px solid var(--pass); }
.occl-region span { padding: 0 4px; text-align: center; line-height: 1.1; }

/* Per-card image attachment (renders above question/answer) */
.card-image { margin: 0 0 var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card-image img { max-width: 100%; max-height: 240px; border-radius: var(--r-md); border: 1px solid var(--line); object-fit: contain; }
.card-image figcaption { font-size: var(--fs-xs); color: var(--text-mute); text-align: center; }

/* Cram-mode print stylesheet — applies whenever the user prints OR when the
   "🖨️ Print / save PDF" button toggles body.cram-printing. Strips all chrome
   and lays the must-know-facts/mnemonics in a dense 2-column block. */
@media print {
  /* Universal print rules — every page strips chrome on print, so a student
     can hand-write a notebook page from any unit / journal / care-plan / cram
     sheet without seeing sidebar + header + Pomodoro etc in the printout.
     Sarah persona feedback Batch L: print only worked for cram before. */
  .sidebar, .app-header, .cram-controls, .cram-nav, .nav-trigger, .nav-backdrop,
  .sticky-unit-cta, .listen-drawer, .reading-progress, .back-to-top,
  #toast-mount, .skip-link, .sticky-mini-toc, .visual-aids,
  .hub-tools-strip, .pomo-widget, .header-streak,
  .modal-backdrop, .modal-shell, .nav-backdrop,
  .cp-actions, .cp-row > div:last-child,
  #al-toolbar, #al-progress, #al-grid, #cp-print, #cp-new {
    display: none !important;
  }
  body, .app, .main, .content { background: #fff !important; color: #000 !important; }
  .app { display: block !important; padding: 0 !important; margin: 0 !important; }
  .main, .content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  /* Generic typography clean-up for print — readable sans-serif body, serif heads */
  body { font-family: Georgia, "Times New Roman", serif !important; font-size: 10pt !important; line-height: 1.45 !important; }
  h1 { font-size: 18pt !important; margin: 0 0 4mm !important; color: #000 !important; }
  h2 { font-size: 13pt !important; margin: 6mm 0 2mm !important; border-bottom: 1px solid #ccc !important; padding-bottom: 1mm !important; color: #000 !important; }
  h3 { font-size: 11pt !important; margin: 4mm 0 1mm !important; color: #000 !important; }
  p, li { font-size: 10pt !important; line-height: 1.4 !important; }
  ul, ol { margin: 1mm 0 2mm !important; padding-left: 5mm !important; }
  a { color: #000 !important; text-decoration: none !important; }
  /* Cram-mode 2-column layout — only when body.cram-printing is set */
  body.cram-printing .cram-header { padding: 0 !important; margin: 0 0 8mm !important; border: 0 !important; }
  body.cram-printing .cram-header .eyebrow { font-size: 8pt !important; color: #555 !important; }
  body.cram-printing .cram-header h1 { font-size: 16pt !important; margin: 2mm 0 1mm !important; }
  body.cram-printing #cram-sub { font-size: 8.5pt !important; color: #444 !important; }
  body.cram-printing #cram-body { columns: 2; column-gap: 8mm; column-fill: balance; font-size: 9pt; line-height: 1.35; }
  body.cram-printing .cram-section { break-inside: avoid; page-break-inside: avoid; margin: 0 0 4mm !important; padding: 2mm 3mm !important; border: 1px solid #ccc !important; border-radius: 2mm !important; background: #fff !important; }
  body.cram-printing .cram-h { font-size: 10pt !important; margin: 0 0 1.5mm !important; color: #000 !important; }
  body.cram-printing .cram-distill { background: #f7f7f3 !important; border-color: #999 !important; }
  body.cram-printing .cram-distill-text { font-weight: 600; }
  body.cram-printing .cram-prose, body.cram-printing .cram-prose p, body.cram-printing .cram-prose li { font-size: 9pt !important; }
  /* Care-plan one-per-page styling */
  body.care-plan-printing .cp-row { padding: 4mm !important; border: 1px solid #ccc !important; border-radius: 2mm !important; page-break-after: always; }
  body.care-plan-printing .cp-row:last-child { page-break-after: auto; }
  body.care-plan-printing .cp-row > div:first-child { font-size: 11pt; }
  body.care-plan-printing .cp-row strong { font-size: 13pt; display: block; margin-bottom: 2mm; }
  /* Journal entries — keep the date headers, hide draft + import controls */
  .journal-entry { break-inside: avoid; page-break-inside: avoid; padding: 3mm 0 !important; border-bottom: 1px solid #ccc; }
  .journal-controls, #jrn-controls, #jrn-draft { display: none !important; }
  /* Unit pages — hide source-details so clipboard print is just the prose */
  .reveal-prompt, .section-sources, .toc, .reflection-grade { display: none !important; }
  details > summary { list-style: none; font-weight: 600; }
  details > * { display: revert !important; }
  /* Page footer fingerprint — different content per print context */
  body.cram-printing::after { content: "TutorGuru · cram sheet · printed for personal study"; display: block; position: fixed; bottom: 4mm; left: 0; right: 0; text-align: center; font-size: 7pt; color: #888; }
  body.care-plan-printing::after { content: "TutorGuru · printed for personal study"; display: block; position: fixed; bottom: 4mm; left: 0; right: 0; text-align: center; font-size: 7pt; color: #888; }
  body:not(.cram-printing):not(.care-plan-printing)::after { content: "TutorGuru · printed for personal study"; display: block; position: fixed; bottom: 4mm; left: 0; right: 0; text-align: center; font-size: 7pt; color: #888; }
}
.sticky-unit-cta .suc-end { color: var(--text-mute); font-size: var(--fs-sm); padding: 0 var(--sp-2); }
@media (max-width: 540px) {
  .sticky-unit-cta { left: 8px; right: 8px; bottom: 8px; transform: translateY(150%); max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
  .sticky-unit-cta.visible { transform: translateY(0); }
  .sticky-unit-cta a, .sticky-unit-cta button { flex: 1 1 auto; text-align: center; }
}

/* ================================================================
   UNIFIED SELECTED-STATE PATTERN (Batch I — 2026-04-29)
   The exam-focus highlight (warm-yellow wash on mark.hi-yield) is the
   established "this matters now" visual. Reuse it everywhere selection
   needs to feel identical: hub icons active, scope chips active, care-plan
   checkbox checked, hi-yield filter active, occlusion answer revealed, etc.
================================================================ */
.is-selected,
.scope-chip.active,
.scope-chip[aria-pressed="true"],
.filter-chip.active,
.toc a.active,
.tool-card.active {
  background: var(--highlight);
  color: var(--text);
  border-color: color-mix(in srgb, var(--highlight) 50%, var(--accent) 50%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--highlight) 70%, transparent 30%);
}
[data-theme="dark"] .is-selected,
[data-theme="dark"] .scope-chip.active,
[data-theme="dark"] .scope-chip[aria-pressed="true"],
[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .toc a.active,
[data-theme="dark"] .tool-card.active {
  background: rgba(253, 224, 71, 0.18);
  color: var(--text);
  border-color: rgba(253, 224, 71, 0.45);
  box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.22);
}

/* Pomodoro widget — bulletproof dark surface (was looking white in dark mode
   when nested inside theme-aware backdrops). Explicit override + ensure
   children inherit colour from the dark surface family. */
[data-theme="dark"] .pomo-widget {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
[data-theme="dark"] .pomo-widget .pomo-clock,
[data-theme="dark"] .pomo-widget .pomo-label { color: var(--text); }
[data-theme="dark"] .pomo-widget .ring-bg { stroke: rgba(255,255,255,0.12); }
/* Running state: brand-teal border glow so the long-running state is visually
   distinct from idle (was identical except for ring-fill colour). */
.pomo-widget.running {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-bg);
}
[data-theme="dark"] .pomo-widget button { color: var(--text-soft); }

/* ---------------- Hub-tool-icon: brand-aligned active state ----------------
   The shared `.is-selected` yellow-wash is too aggressive on a 36 px icon —
   reads as warning. Override here to use the same teal-on-teal-bg pattern
   as the sidebar nav.active state. Kills a brand-mismatch reported by the
   visual reviewer (#12). */
.hub-tool-icon.active,
.hub-tool-icon.is-selected {
  background: var(--accent-bg);
  color: var(--accent-ink);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent 75%);
}

/* ---------------- Hero image: slim banner, not full block ----------------
   Visual reviewer #8: hero SVG was competing with the new visual-aids card.
   Crop to a slim ~100 px banner so the meaningful diagrams aren't pushed
   below the fold on a 1366 x 768 laptop. */
.hero-image {
  max-height: 110px;
  overflow: hidden;
}
.hero-image svg {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 60%;
}
@media (max-width: 720px) {
  .hero-image { max-height: 80px; }
}

/* ---------------- Vertical rhythm: brand-teal section markers ----------------
   Reviewer #16: sections felt arbitrary because there was no visual
   hairline between them. Tab-marker pseudo-element gives each h2 a 36 px
   teal line above it — small touch, big rhythm payoff. */
section h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--sp-2);
  border-radius: 1px;
}
section { scroll-margin-top: 80px; }

/* ---------------- Note-merge-suggest panel: cream backdrop in CSS, not inline ----
   L4 / V#15: inline `style="background: #ECFDF5; border-left: 3px solid #10B981"`
   forced a `!important` arms race in the dark override and used a colour borrowed
   from a "success" palette not used elsewhere. Strip the inline (see app.js change),
   keep the swatch on-brand. */
.note-merge-panel {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
}
[data-theme="dark"] .note-merge-panel {
  background: rgba(94, 234, 212, 0.10);
  border-left-color: var(--accent);
  color: var(--text);
}

/* ---------------- Occlusion: ergonomic focus ring, all-revealed shortcut ----
   L11: thin global outline overlapped neighbour cells in tightly-packed grids.
   M10: replaced per-region for-loop on reveal-all/hide-all with a parent class. */
.occlusion-hotspot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.occlusion-card.all-revealed .occlusion-hotspot {
  fill-opacity: 0;
  pointer-events: none;
}
.occlusion-card.all-revealed .occlusion-label { opacity: 1; }

/* ---------------- visually-hidden helper (used by ARIA live regions) ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Skip-to-content link (a11y U#2) ---------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-link:focus {
  position: fixed;
  left: 12px; top: 12px;
  width: auto; height: auto;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* ---------------- prefers-reduced-motion (a11y U#5) ----------------
   Vestibular-sensitive users opted out get near-zero motion globally,
   plus disable smooth-scroll + heartbeat ring sweeps. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Note-modal merge-suggest panel — dark mode swap from cream/green to
   theme-aware surface. The hardcoded #ECFDF5 from the inline style of the
   "🚀 Suggest for permanent merge" label was invisible in dark mode. The
   inline styles still set the cream backdrop in light mode; the rule below
   overrides for dark. */
[data-theme="dark"] .note-merge-panel {
  background: rgba(94, 234, 212, 0.08) !important;
  border-left-color: var(--accent) !important;
  color: var(--text) !important;
}
.note-merge-panel { transition: background .15s, color .15s; }

/* Care-plan checklist — alignment + dark-mode visibility (the native
   checkbox was invisible on dark surfaces). accent-color + flex-align fix
   the misalignment screenshot. */
.cp-checklist label {
  align-items: center !important;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s;
}
.cp-checklist label:hover { background: var(--surface-2); }
.cp-checklist input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.cp-checklist label:has(input:checked) {
  background: var(--accent-bg);
  font-weight: 500;
}
[data-theme="dark"] .cp-checklist label:has(input:checked) {
  background: rgba(94, 234, 212, 0.10);
}

/* ================================================================
   STICKY MINI-TOC (Batch I — I5)
   Auto-cloned from the inline <nav class="toc"> on unit pages, shown
   as a fixed right-rail when the user scrolls past the inline TOC.
   Hidden on viewports narrower than the 3-column reading layout.
================================================================ */
.sticky-mini-toc {
  position: fixed;
  top: 88px;
  right: 16px;
  width: 184px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  font-size: 0.72rem;
  z-index: 50;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.sticky-mini-toc.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.sticky-mini-toc .smt-title {
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  margin-bottom: var(--sp-2);
}
.sticky-mini-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: smt; }
.sticky-mini-toc li { counter-increment: smt; margin: 2px 0; }
.sticky-mini-toc li::before {
  content: counter(smt) ".";
  display: inline-block;
  width: 18px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.sticky-mini-toc a {
  color: var(--text-soft);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  display: inline;
  line-height: 1.35;
}
.sticky-mini-toc a:hover { color: var(--accent); background: var(--accent-bg); }
/* Current-section highlight uses the same teal accent as sidebar nav.active —
   keeps the "you are here" mental model consistent across the app. */
.sticky-mini-toc a.current {
  color: var(--accent-ink);
  font-weight: 600;
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}
@media (max-width: 1340px) { .sticky-mini-toc { display: none; } }

/* ================================================================
   MERMAID DIAGRAM CONTAINERS (Batch J — visual aids)
   Used by Corni.mountMermaid(). Inline SVG rendered by mermaid.min.js.
================================================================ */
.mermaid-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  overflow-x: auto;
}
.mermaid-card .mc-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--text);
}
.mermaid-card .mc-caption {
  color: var(--text-mute);
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
}
.mermaid-card { position: relative; }
.mermaid-card svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.mermaid-error,
.viz-error {
  color: var(--danger, #B91C1C);
  font-size: var(--fs-xs);
  font-family: ui-monospace, monospace;
  background: var(--surface-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
}
.mc-expand-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-soft);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mc-expand-btn:hover { background: var(--accent-bg); color: var(--accent-ink); }

/* Mermaid fullscreen modal — pannable + zoomable view of any diagram. */
.mermaid-fs {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.mermaid-fs .mfs-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mermaid-fs .mfs-title { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text); flex: 1; }
.mermaid-fs .mfs-controls { display: flex; align-items: center; gap: var(--sp-2); }
.mermaid-fs .mfs-controls button {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); padding: 4px 12px;
  border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm);
  min-width: 36px;
}
.mermaid-fs .mfs-controls button:hover { background: var(--accent-bg); border-color: var(--accent-border); }
.mermaid-fs .mfs-zoom { font-variant-numeric: tabular-nums; min-width: 50px; text-align: center; color: var(--text-mute); font-size: var(--fs-sm); }
.mermaid-fs .mfs-close { color: var(--text-mute); }
.mermaid-fs .mfs-stage {
  flex: 1; overflow: hidden;
  background: var(--surface);
  cursor: grab;
  outline: none;
  position: relative;
}
.mermaid-fs .mfs-stage:active { cursor: grabbing; }
.mermaid-fs .mfs-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}
.mermaid-fs .mfs-canvas svg { max-width: none !important; height: auto !important; display: block; }
.mermaid-fs .mfs-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); color: white;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  pointer-events: none;
  opacity: 0; animation: mfs-hint-fade 4s ease-out forwards;
}
@keyframes mfs-hint-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ================================================================
   READ | LISTEN | SEE TOGGLE (Batch J — J3)
   Segmented control at the top of every unit page; lets the learner
   pick their preferred input modality. Persists per-unit in localStorage.
================================================================ */
.modality-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
  margin: var(--sp-3) 0 var(--sp-4);
}
.modality-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.modality-toggle button:hover { color: var(--text); }
.modality-toggle button.active {
  background: var(--highlight);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
[data-theme="dark"] .modality-toggle button.active {
  background: rgba(253, 224, 71, 0.20);
  color: var(--text);
}
.modality-pane[hidden] { display: none; }
.modality-pane { animation: mp-fade 0.18s ease-out; }
@keyframes mp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
   IMAGE OCCLUSION CARDS (Batch J — J4)
   Vanilla SVG hotspots that hide on a labelled diagram. Click to reveal.
================================================================ */
.occlusion-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}
.occlusion-card .oc-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.occlusion-card .oc-prompt {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.occlusion-svg-wrap { position: relative; max-width: 100%; }
.occlusion-svg-wrap svg { display: block; max-width: 100%; height: auto; }
.occlusion-hotspot {
  fill: var(--accent);
  fill-opacity: 0.85;
  stroke: var(--accent);
  cursor: pointer;
  transition: fill-opacity .14s;
}
.occlusion-hotspot:hover { fill-opacity: 0.65; }
.occlusion-hotspot.revealed { fill-opacity: 0; pointer-events: none; }
.occlusion-label {
  font-size: 11px;
  fill: var(--text);
  font-family: var(--font-sans);
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s;
}
.occlusion-label.revealed { opacity: 1; }
.occlusion-controls {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

/* ================================================================
   VISUAL-AIDS SECTION (Batch J — wraps mermaid + flowchart cards)
   Sits after the TOC on every unit page. Collapsible <details>,
   default open so a learner sees structure before prose.
================================================================ */
.visual-aids {
  margin: var(--sp-4) 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.visual-aids .va-summary {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--surface) 100%);
  border-bottom: 1px solid transparent;
  user-select: none;
  list-style: none;
}
[data-theme="dark"] .visual-aids .va-summary {
  background: linear-gradient(135deg, rgba(94,234,212,0.14) 0%, var(--surface) 60%);
}
.visual-aids .va-summary::-webkit-details-marker { display: none; }
.visual-aids .va-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform .15s;
  color: var(--accent);
  font-size: 0.85em;
}
.visual-aids[open] .va-summary::before { transform: rotate(90deg); }
.visual-aids[open] .va-summary { border-bottom-color: var(--line); }
.visual-aids .va-summary .va-meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  font-weight: 400;
}
/* Auto-swap meta copy based on open/closed state — uses data-* attrs so we
   don't need JS to keep the label honest after toggle. */
.visual-aids .va-summary .va-meta { font-size: 0; }
.visual-aids .va-summary .va-meta::after { font-size: var(--fs-xs); }
.visual-aids[open] .va-summary .va-meta::after { content: attr(data-open); }
.visual-aids:not([open]) .va-summary .va-meta::after { content: attr(data-closed); }
.visual-aids .va-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.mermaid-card[data-mermaid-id="mindmap"] .mc-title::before {
  content: "MIND-MAP · ";
  color: var(--text-mute);
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mermaid-card[data-mermaid-id="flowchart"] .mc-title::before {
  content: "FLOWCHART · ";
  color: var(--text-mute);
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.visual-aids .va-grid > .mermaid-card { margin: 0; }
@media (max-width: 900px) {
  .visual-aids .va-grid { grid-template-columns: 1fr; }
  /* On phones, default the visual aids to COLLAPSED so the prose isn't pushed
     a full screen below the fold. The summary still cues that diagrams exist. */
  details.visual-aids[open] { /* CSS can't toggle the open attribute, so the
     JS sets it on small viewports — see the script in unit-page IIFE. */ }
}

/* ============== PRINT / PDF EXPORT ============== */
@media print {
  @page { size: A4; margin: 18mm 16mm; }
  body { background: #fff; color: #000; }
  .sidebar, .app-header, .reading-progress, .modal-shell,
  .sticky-mini-toc, [data-print-hide], #onboarding-modal,
  .pomodoro, .floating-menu, .back-to-top,
  .visual-aids > summary,
  details.visual-aids:not([open]) { display: none !important; }
  details.visual-aids[open] > summary { display: none !important; }
  details.visual-aids[open] { padding: 0; border: none; }

  .app, .main, .content { display: block; padding: 0; max-width: none; }
  .content.reading { padding: 0 !important; }
  article { max-width: none; }

  h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
  figure, table, aside.callout, aside.exam-checkpoint { page-break-inside: avoid; }
  figure { max-width: 100%; margin: 1em 0; }
  svg { max-width: 100%; height: auto; }

  table { border-collapse: collapse; width: 100%; font-size: 10pt; }
  table th, table td { border: 1px solid #888; padding: 4px 6px; }
  thead { display: table-header-group; }

  mark, mark.hi-yield, .hi-yield {
    background: transparent !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
    font-weight: 700;
    padding: 0 2px;
  }
  aside.callout, aside.exam-checkpoint { border: 1px solid #888; padding: 8px 12px; margin: 8px 0; }
  details > summary { font-weight: 700; }
  details[open] > * { display: revert !important; }

  a { color: inherit; text-decoration: none; }
  a[href^="http"]::after, a[href^="https"]::after { content: " (" attr(href) ")"; font-size: 9pt; opacity: 0.7; }
  a[href^="../"]::after, a[href^="#"]::after { content: ""; }

  body { font-size: 10pt; line-height: 1.45; }
  p, li { font-size: 10pt; }
  .lead { font-size: 12pt; }
  h1 { font-size: 22pt; }
  h2 { font-size: 16pt; margin-top: 1em; }
  h3 { font-size: 13pt; }

  .article-footer { display: none !important; }
  nav.toc ol { columns: 2; column-gap: 2em; }
}

/* ============================================================
   Cornell-style augmentation (Phase 0.5 — research-backed layout)
   ============================================================ */
.cornell-cue {
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  border-radius: var(--r-md);
}
.cornell-cue summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-ink);
  font-size: var(--fs-md);
  padding: 4px 0;
}
.cornell-cue ol { margin: var(--sp-2) 0 0 var(--sp-4); padding: 0; }
.cornell-cue li { margin-bottom: 6px; line-height: 1.5; }
.cornell-cue .cue-tip {
  font-size: var(--fs-xs); color: var(--text-mute); font-style: italic;
  margin-top: var(--sp-2);
}

.exam-freq-pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  font-weight: 600;
  margin-right: 6px;
}
.exam-freq-pill.high { background: #FEF3C7; color: #92400E; }
.exam-freq-pill.top  { background: #FEE2E2; color: #B91C1C; }

.textbook-fig {
  margin: var(--sp-4) 0;
  text-align: center;
}
.textbook-fig img {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.textbook-fig figcaption {
  font-size: var(--fs-xs); color: var(--text-mute);
  margin-top: 6px; font-style: italic;
}

.feynman-block {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-5) 0;
}
.feynman-block h3 {
  margin: 0 0 8px 0;
  font-size: var(--fs-md);
  color: var(--text);
}
.feynman-block .help {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-bottom: var(--sp-2);
}
.feynman-block textarea {
  width: 100%;
  min-height: 90px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg);
  resize: vertical;
}
.feynman-block .save-state {
  font-size: var(--fs-xs);
  color: var(--accent-ink);
  margin-top: 6px;
  min-height: 16px;
}

.review-tracker {
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.review-tracker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.review-tracker input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
}

.markscheme-cues {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: #FEF9E6;
  border-left: 3px solid #D97706;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.markscheme-cues strong { color: #92400E; }