/* =========================================================================
   get-certified-pro — Design System (Design Brief B)
   Editorial, paper-forward, ink-not-glow. Light-first.
   ========================================================================= */

:root{
  /* Type faces */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --font:    "Newsreader", Georgia, "Iowan Old Style", Cambria, serif;
  --ui:      "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", "SF Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* Type scale (fluid) */
  --t-domain: clamp(2.4rem, 1.6rem + 3vw, 3.25rem);
  --t-h1: clamp(1.75rem, 1.3rem + 1.6vw, 2rem);
  --t-h2: 1.5rem;
  --t-body: 1.125rem;
  --t-ui: 0.9375rem;
  --t-label: 0.75rem;

  /* Surfaces & ink (light — default) */
  --paper: #FAF7F2;
  --paper-2: #F3EEE6;
  --card: #FFFFFF;
  --ink: #1F1B16;
  --ink-2: #5C544A;
  /* --ink-3 drives uppercase mono micro-labels + meta suffixes; darkened from
     #8A8073 (~3.2:1) to clear WCAG AA 4.5:1 for small text on --paper. */
  --ink-3: #6B6357;
  --rule: #E4DCCF;

  /* Accent */
  --accent: #1D6E63;
  --accent-strong: #155048;
  --accent-tint: #E1EFEC;
  --accent-ink: #0C332E;

  /* Secondary editorial accent */
  --rust: #B4531F;
  --rust-tint: #F3E4D9;

  /* Semantic (feedback only) */
  --ok: #2F7D4F;   --ok-tint: #E4F1E8;
  --warn: #B8860B; --warn-tint: #F6EEDA;
  --err: #B23A2E;  --err-tint: #F6E2DF;

  /* RGB channels for translucent surfaces (sticky bars use rgba() so the real
     paper color shows through — color-mix(...transparent) was rendering opaque
     to backdrop-filter fallbacks and confusing contrast tooling). */
  --paper-rgb: 250,247,242;
  --card-rgb: 255,255,255;

  /* Spacing scale (8px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px;

  --radius: 7px;
  --radius-sm: 5px;
  --measure: 68ch;
  --shadow: 0 1px 2px rgba(31,27,22,.06);
  --shadow-2: 0 6px 24px rgba(31,27,22,.08);
  --shell-max: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --topbar-h: 60px;   /* matches .topbar height; used to offset the sticky spine */
}

[data-theme="dark"]{
  --paper: #1A1714;
  --paper-2: #221E1A;
  --card: #242019;
  --ink: #F0EAE0;
  --ink-2: #B7AE9F;
  --ink-3: #8A8073;
  --rule: #3A342C;
  --accent: #4FB3A3;
  --accent-strong: #6EC6B8;
  --accent-tint: #123430;
  --accent-ink: #CFF0E8;
  --rust: #D98A5B;
  --rust-tint: #33261C;
  --paper-rgb: 26,23,20;
  --card-rgb: 36,32,25;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 6px 24px rgba(0,0,0,.4);
}

/* -------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  /* faint paper grain via subtle repeating gradient */
  background-image:
    radial-gradient(rgba(31,27,22,.018) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; }
button{ font-family:inherit; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-strong); }
::selection{ background:var(--accent-tint); color:var(--accent-ink); }

h1,h2,h3{ font-family:var(--display); font-weight:560; line-height:1.12; color:var(--ink); }
h1{ font-size:var(--t-h1); }

/* utility label */
.kicker{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* -------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:var(--s6);
  height:60px; padding:0 clamp(16px, 4vw, 40px);
  background:rgba(var(--paper-rgb), .88);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.topbar-brand{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  color:var(--ink); cursor:pointer; background:none; border:0;
  /* S4: 44px min hit-box (icon can stay small) */
  min-height:44px; padding:0 4px; margin-left:-4px;
  flex-shrink:0;
}
.topbar-brand .mark{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:4px; padding:2px 5px;
  transform:translateY(-2px);
}
.topbar-brand .wordmark{ white-space:nowrap; }
.topnav{ display:flex; gap:2px; margin-left:auto; }
.topnav a, .topnav button{
  font-family:var(--ui); font-size:var(--t-ui); white-space:nowrap;
  color:var(--ink-2); background:none; border:0; cursor:pointer;
  padding:8px 12px; border-radius:6px; transition:background .15s var(--ease), color .15s var(--ease);
}
.topnav a:hover, .topnav button:hover{ background:var(--paper-2); color:var(--ink); }
.topnav a.active{ color:var(--accent-ink); background:var(--accent-tint); }
.topbar-right{ display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.topnav + .topbar-right{ margin-left:8px; }

/* ============================================================================
   MODE SWITCH — the delightful, eye-catching Serious ⇄ Pixel control.
   One role="switch" button with two labeled segments and a sliding thumb that
   glides behind the active segment. Restyled by body[data-mode]: a refined,
   tactile teal-accented pill in serious mode; a chunky, hard-edged pixel switch
   in pixel mode. Shared base here; per-skin polish below.
   ============================================================================ */
.mode-switch{
  --ms-thumb-w:50%;                 /* half the track (two equal segments)     */
  --ms-thumb-x:0%;                  /* serious=0%, pixel=100% (set per skin)    */
  position:relative; display:inline-flex; align-items:stretch;
  height:44px; padding:4px; gap:0;
  border:1px solid var(--rule); border-radius:999px;
  background:var(--paper-2);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 2px rgba(31,27,22,.06);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.mode-switch:hover{ border-color:var(--accent); box-shadow:inset 0 1px 2px rgba(31,27,22,.06), 0 2px 10px rgba(29,110,99,.12); }
.mode-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* the gliding highlight that sits under the active segment */
.mode-switch .ms-thumb{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(var(--ms-thumb-w) - 4px);
  transform:translateX(var(--ms-thumb-x));
  border-radius:999px; background:var(--card);
  box-shadow:var(--shadow-2);
  transition:transform .34s var(--ease), background .24s var(--ease), border-radius .24s var(--ease);
  z-index:0;
}

/* each labeled segment */
.mode-switch .ms-seg{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:0 14px; white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; line-height:1; color:var(--ink-3);
  transition:color .24s var(--ease);
}
.mode-switch .ms-ico{ display:inline-flex; transition:transform .24s var(--ease), color .24s var(--ease); }
.mode-switch .ms-glyph{ display:block; }
.mode-switch .ms-txt{ transform:translateY(.5px); }

/* ---- SERIOUS skin: refined teal pill, thumb parked left under "Serious" ---- */
body[data-mode="serious"] .mode-switch{ --ms-thumb-x:0%; }
body[data-mode="serious"] .mode-switch .ms-seg-serious{ color:var(--accent-ink); }
body[data-mode="serious"] .mode-switch .ms-seg-serious .ms-ico{ color:var(--accent); }
body[data-mode="serious"] .mode-switch:hover .ms-seg-pixel{ color:var(--ink-2); }

/* ---- PIXEL skin: chunky hard-edged switch, thumb slid right under "Pixel" ----
   (Refined further alongside styles.pixel.css in a later stage; this base
   already reads as a distinct, playful SNES-style toggle.) */
body[data-mode="pixel"] .mode-switch{
  --ms-thumb-x:100%;
  border-radius:2px; border-width:2px; border-color:var(--accent);
  background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--paper);
}
body[data-mode="pixel"] .mode-switch .ms-thumb{
  border-radius:2px; background:var(--accent-tint);
  box-shadow:0 2px 0 0 var(--accent-strong), inset 0 0 0 1px var(--accent);
}
body[data-mode="pixel"] .mode-switch .ms-seg-pixel{ color:var(--accent-ink); }
body[data-mode="pixel"] .mode-switch .ms-seg-pixel .ms-ico{ color:var(--accent-strong); }
body[data-mode="pixel"] .mode-switch:hover .ms-seg-serious{ color:var(--ink-2); }

@media (prefers-reduced-motion: reduce){
  .mode-switch, .mode-switch .ms-thumb, .mode-switch .ms-seg, .mode-switch .ms-ico{ transition:none; }
}
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:7px; background:var(--card);
  color:var(--ink-2); cursor:pointer; transition:.15s var(--ease);
}
.icon-btn:hover{ color:var(--ink); border-color:var(--ink-3); }
.nav-toggle{ display:none; }

/* ---- mobile: collapse nav into a drawer ---- */
.nav-drawer{
  position:fixed; top:0; right:0; z-index:60;
  width:min(84vw, 320px); height:100dvh;
  background:var(--card); border-left:1px solid var(--rule);
  box-shadow:var(--shadow-2);
  transform:translateX(102%); transition:transform .28s var(--ease);
  display:flex; flex-direction:column; padding:18px;
  visibility:hidden;
}
.nav-drawer.open{ transform:translateX(0); visibility:visible; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s6); padding-bottom:var(--s3); border-bottom:1px solid var(--rule); }
.drawer-nav{ display:flex; flex-direction:column; gap:2px; }
.drawer-nav a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--ui); font-size:1.05rem; color:var(--ink);
  padding:14px 12px; border-radius:8px; border-bottom:1px solid var(--rule);
  transition:.15s var(--ease);
}
.drawer-nav a:last-child{ border-bottom:0; }
.drawer-nav a .arrow{ color:var(--ink-3); transition:transform .15s var(--ease); }
.drawer-nav a:hover{ background:var(--paper-2); }
.drawer-nav a:hover .arrow{ transform:translateX(3px); color:var(--accent); }
.drawer-nav a.active{ color:var(--accent-ink); background:var(--accent-tint); }
.drawer-nav a.active .arrow{ color:var(--accent); }
.drawer-scrim{
  position:fixed; inset:0; z-index:55; background:rgba(31,27,22,.42);
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
}
.drawer-scrim.show{ opacity:1; pointer-events:auto; }
body.drawer-open{ overflow:hidden; }

@media (max-width:768px){
  .topnav{ display:none; }
  .nav-toggle{ display:grid; }
  .topbar{ gap:var(--s3); }
}
@media (max-width:420px){
  .topbar-brand .wordmark{ display:none; }
  /* ==== UPGRADE: mobile fixes (Agent D) ================================
   * M10 — serious mode-switch: at very narrow widths the two uppercase text
   * segments crowd/clip. Drop the labels and keep the ☀/⬛ glyphs — the glyphs
   * alone stay an unambiguous, 44px-tall tap target. */
  body[data-mode="serious"] .mode-switch .ms-txt{ display:none; }
  body[data-mode="serious"] .mode-switch .ms-seg{ padding:0 12px; }
  /* M11 — serious topbar crowding: with brand + mode-switch the row can still
   * overflow at <420px. Let it wrap gracefully and keep a comfy tap height. */
  .topbar{ flex-wrap:wrap; height:auto; min-height:60px; padding-top:8px; padding-bottom:8px; row-gap:8px; }
}

/* -------------------------------------------------------------- app view */
body[data-mode="serious"] #app{ min-height:calc(100vh - 60px); }
body[data-mode="serious"] .view{ max-width:var(--shell-max); margin:0 auto; padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px) 96px; }
body[data-mode="serious"] .view[hidden]{ display:none; }

/* -------------------------------------------------------------- buttons */
body[data-mode="serious"] .btn{
  font-family:var(--ui); font-size:var(--t-ui); font-weight:560;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:.16s var(--ease);
}
body[data-mode="serious"] .btn-primary{ background:var(--accent); color:#fff; }
body[data-mode="serious"] .btn-primary:hover{ background:var(--accent-strong); color:#fff; }
body[data-mode="serious"] .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
body[data-mode="serious"] .btn-ghost:hover{ border-color:var(--ink-3); background:var(--paper-2); }
body[data-mode="serious"] .btn .arrow{ transition:transform .16s var(--ease); }
body[data-mode="serious"] .btn:hover .arrow{ transform:translateX(3px); }

/* ==============================================================
   HOME — editorial landing
   ============================================================== */
body[data-mode="serious"] .home-hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,5vw,64px);
  align-items:start; padding-bottom:var(--s12);
  border-bottom:1px solid var(--rule); margin-bottom:var(--s12);
}
body[data-mode="serious"] .home-hero-main{ align-self:center; }
@media (max-width:820px){ body[data-mode="serious"] .home-hero{ grid-template-columns:1fr; gap:var(--s8); } }
body[data-mode="serious"] .home-hero .lede-kicker{ margin-bottom:var(--s4); }
body[data-mode="serious"] .home-hero-aside{ display:flex; flex-direction:column; gap:var(--s6); }

/* resume card — hairline-framed, anchored to the headline top */
body[data-mode="serious"] .hero-resume{
  display:flex; flex-direction:column; gap:8px; text-align:left; width:100%;
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--rust);
  border-radius:var(--radius); padding:var(--s6); cursor:pointer;
  box-shadow:var(--shadow); transition:.18s var(--ease);
}
body[data-mode="serious"] .hero-resume:hover{ border-color:var(--accent); border-left-color:var(--rust); box-shadow:var(--shadow-2); transform:translateY(-1px); }
body[data-mode="serious"] .hr-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rust); }
body[data-mode="serious"] .hr-code{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
body[data-mode="serious"] .hr-name{ font-family:var(--display); font-size:1.2rem; font-weight:560; color:var(--ink); line-height:1.2; }
body[data-mode="serious"] .hr-meter{ margin:6px 0 4px; }
body[data-mode="serious"] .hr-next{ font-family:var(--ui); font-size:.85rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; }
body[data-mode="serious"] .hr-next .arrow{ color:var(--accent); transition:transform .16s var(--ease); }
body[data-mode="serious"] .hero-resume:hover .hr-next .arrow{ transform:translateX(3px); }

/* cold-start index — a small editorial list of the tracks */
body[data-mode="serious"] .hero-index{ border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s6); background:var(--card); box-shadow:var(--shadow); }
body[data-mode="serious"] .hero-index-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:var(--s4); }
body[data-mode="serious"] .hero-index-list{ list-style:none; margin:0; padding:0; counter-reset:none; }
body[data-mode="serious"] .hero-index-list li{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:12px; padding:10px 0; border-top:1px solid var(--rule); }
body[data-mode="serious"] .hero-index-list li:first-child{ border-top:0; }
body[data-mode="serious"] .hi-num{ font-family:var(--display); font-size:1.1rem; font-weight:600; color:var(--ink-3); }
body[data-mode="serious"] .hi-code{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--accent); }
body[data-mode="serious"] .hi-dn{ font-family:var(--ui); font-size:.78rem; color:var(--ink-3); }
body[data-mode="serious"] .home-title{
  font-family:var(--display); font-weight:560;
  font-size:var(--t-domain); line-height:1.04;
  letter-spacing:-.01em; margin:0 0 var(--s6);
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 1;
}
body[data-mode="serious"] .home-title em{ font-style:italic; color:var(--accent); }
body[data-mode="serious"] .home-lede{
  font-size:1.2rem; line-height:1.65; color:var(--ink-2);
  max-width:52ch; margin:0;
}
body[data-mode="serious"] .hero-meta{
  font-family:var(--ui); font-size:var(--t-ui); color:var(--ink-2);
  border-left:2px solid var(--rust); padding-left:var(--s4);
  margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px;
}
body[data-mode="serious"] .hero-meta dt{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); align-self:center; }
body[data-mode="serious"] .hero-meta dd{ margin:0; color:var(--ink); }

body[data-mode="serious"] .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s6); gap:var(--s4); }
body[data-mode="serious"] .section-head h2{ font-size:1.6rem; margin:0; }
body[data-mode="serious"] .section-head .kicker{ }

/* cert list — editorial rows, not gradient cards */
body[data-mode="serious"] .cert-list{ display:flex; flex-direction:column; }
body[data-mode="serious"] .cert-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,40px);
  align-items:center;
  padding:var(--s8) var(--s6);
  border-top:1px solid var(--rule);
  cursor:pointer; text-align:left; width:100%;
  background:none; border-left:0; border-right:0; border-bottom:0;
  transition:background .18s var(--ease), padding .18s var(--ease);
  position:relative;
}
body[data-mode="serious"] .cert-row:last-child{ border-bottom:1px solid var(--rule); }
body[data-mode="serious"] .cert-row:hover{ background:var(--card); }
body[data-mode="serious"] .cert-row:hover .cert-go{ transform:translateX(0); opacity:1; }
body[data-mode="serious"] .cert-index{
  font-family:var(--display); font-size:2.4rem; font-weight:560;
  color:var(--ink-3); line-height:1; min-width:1.4ch;
  transition:color .18s var(--ease);
}
body[data-mode="serious"] .cert-row:hover .cert-index{ color:var(--rust); }
body[data-mode="serious"] .cert-main{ min-width:0; }
body[data-mode="serious"] .cert-code{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px; display:inline-block;
}
body[data-mode="serious"] .cert-code-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
body[data-mode="serious"] .cert-code-row .cert-code{ margin-bottom:0; }
body[data-mode="serious"] .cert-beta{ font-family:var(--mono); font-size:.56rem; letter-spacing:.11em; text-transform:uppercase; color:var(--rust); background:var(--rust-tint, rgba(180,90,40,.12)); border:1px solid var(--rust); border-radius:99px; padding:2px 8px; line-height:1.3; }
body[data-mode="serious"] .cert-name{ font-family:var(--display); font-size:1.5rem; font-weight:540; margin:0 0 6px; }
body[data-mode="serious"] .cert-blurb{ font-size:1rem; color:var(--ink-2); margin:0; max-width:60ch; line-height:1.55; }
body[data-mode="serious"] .cert-facts{ display:flex; gap:18px; margin-top:12px; flex-wrap:wrap; }
body[data-mode="serious"] .cert-fact{ font-family:var(--ui); font-size:.82rem; color:var(--ink-3); }
body[data-mode="serious"] .cert-fact b{ color:var(--ink); font-weight:600; }
body[data-mode="serious"] .cert-facts-note{ margin-top:8px; font-family:var(--ui); font-size:.72rem; font-style:italic; color:var(--ink-3); }
body[data-mode="serious"] .cert-progress-mini{ margin-top:14px; max-width:280px; }
body[data-mode="serious"] .cert-go{
  font-family:var(--ui); font-size:var(--t-ui); font-weight:560; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  opacity:.55; transform:translateX(-6px); transition:.18s var(--ease);
}
@media (max-width:640px){
  body[data-mode="serious"] .cert-row{ grid-template-columns:auto 1fr; }
  body[data-mode="serious"] .cert-go{ display:none; }
}

/* thin progress meter (reused) */
body[data-mode="serious"] .meter{ height:5px; background:var(--paper-2); border-radius:99px; overflow:hidden; border:1px solid var(--rule); }
body[data-mode="serious"] .meter > i{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s var(--ease); }
body[data-mode="serious"] .meter-row{ display:flex; align-items:center; gap:10px; }
body[data-mode="serious"] .meter-row .meter{ flex:1; }
body[data-mode="serious"] .meter-pct{ font-family:var(--mono); font-size:.72rem; color:var(--ink-2); min-width:3.5ch; text-align:right; }

/* home footer note */
body[data-mode="serious"] .home-note{
  margin-top:var(--s16); padding-top:var(--s8); border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:.85rem; color:var(--ink-3); max-width:60ch;
}

/* ==============================================================
   DOMAIN PATHWAY — the guided roadmap
   ============================================================== */
body[data-mode="serious"] .pathway-head{ margin-bottom:var(--s12); }
body[data-mode="serious"] .crumb{
  font-family:var(--ui); font-size:var(--t-ui); color:var(--ink-2);
  background:none; border:0; cursor:pointer; padding:0; margin-bottom:var(--s6);
  display:inline-flex; align-items:center; gap:6px;
}
body[data-mode="serious"] .crumb:hover{ color:var(--accent); }
body[data-mode="serious"] .pathway-title{ font-family:var(--display); font-size:var(--t-domain); font-weight:560; margin:0 0 var(--s4); letter-spacing:-.01em; font-variation-settings:"opsz" 144,"SOFT" 20; }
body[data-mode="serious"] .pathway-code{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
body[data-mode="serious"] .pathway-lede{ font-size:1.15rem; color:var(--ink-2); max-width:var(--measure); margin:var(--s4) 0 0; }

body[data-mode="serious"] .pathway-meta{
  display:flex; flex-wrap:wrap; gap:var(--s8); margin-top:var(--s8);
  padding:var(--s6) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
body[data-mode="serious"] .pw-stat{ display:flex; flex-direction:column; gap:2px; }
body[data-mode="serious"] .pw-stat .v{ font-family:var(--display); font-size:1.5rem; font-weight:560; color:var(--ink); }
body[data-mode="serious"] .pw-stat .l{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .pw-stat .v em{ font-style:normal; color:var(--accent); }

body[data-mode="serious"] .roadmap-intro{
  display:flex; align-items:center; gap:12px; margin:var(--s12) 0 var(--s6);
}
body[data-mode="serious"] .roadmap-intro h2{ font-size:1.35rem; margin:0; }
body[data-mode="serious"] .roadmap-intro .line{ flex:1; height:1px; background:var(--rule); }
body[data-mode="serious"] .roadmap-intro .hint{ font-family:var(--ui); font-size:.85rem; color:var(--ink-3); }

/* the roadmap — a connected vertical path */
body[data-mode="serious"] .roadmap{ position:relative; margin-left:6px; }
body[data-mode="serious"] .roadmap::before{
  content:""; position:absolute; left:19px; top:22px; bottom:38px;
  width:2px; background:var(--rule);
}
body[data-mode="serious"] .domain-node{
  position:relative; display:grid;
  grid-template-columns:40px 1fr; gap:var(--s6);
  padding:0 0 var(--s8) 0;
  align-items:start;
}
body[data-mode="serious"] .node-marker{
  position:relative; z-index:1;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.95rem; font-weight:600;
  background:var(--card); color:var(--ink-2);
  border:2px solid var(--rule);
  transition:.2s var(--ease);
}
body[data-mode="serious"] .domain-node.done .node-marker{ background:var(--accent); border-color:var(--accent); color:#fff; }
body[data-mode="serious"] .domain-node.current .node-marker{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
body[data-mode="serious"] .domain-card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s6); box-shadow:var(--shadow);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  cursor:pointer; text-align:left; width:100%;
  display:block;
}
body[data-mode="serious"] .domain-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-2); transform:translateY(-1px); }
body[data-mode="serious"] .domain-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
body[data-mode="serious"] .dc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; }
body[data-mode="serious"] .dc-kicker{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .dc-title{ font-family:var(--display); font-size:1.35rem; font-weight:540; margin:6px 0 0; color:var(--ink); }
body[data-mode="serious"] .dc-blurb{ font-size:1rem; color:var(--ink-2); margin:10px 0 0; line-height:1.55; max-width:64ch; }

/* weight bar — rust */
body[data-mode="serious"] .weight{ display:flex; align-items:center; gap:10px; margin-top:14px; }
body[data-mode="serious"] .weight-bar{ width:120px; height:6px; background:var(--rust-tint); border-radius:99px; overflow:hidden; }
body[data-mode="serious"] .weight-bar > i{ display:block; height:100%; background:var(--rust); border-radius:99px; }
body[data-mode="serious"] .weight-label{ font-family:var(--mono); font-size:.72rem; color:var(--rust); letter-spacing:.03em; }
body[data-mode="serious"] .weight-label b{ font-weight:600; }

/* Prominent per-domain progress bar in the roadmap (full width, labelled) */
body[data-mode="serious"] .dc-progress-row{ margin-top:var(--s5); }
body[data-mode="serious"] .dc-progress-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px;
}
body[data-mode="serious"] .dc-progress-label{
  font-family:var(--ui); font-size:.78rem; letter-spacing:.02em; color:var(--ink-3);
  text-transform:uppercase;
}
body[data-mode="serious"] .dc-progress-pct{
  font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--accent-ink);
}
body[data-mode="serious"] .dc-progress-track{
  height:9px; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:99px; overflow:hidden;
}
body[data-mode="serious"] .dc-progress-fill{
  display:block; height:100%; background:var(--accent); border-radius:99px;
  transition:width .5s var(--ease); min-width:0;
}
body[data-mode="serious"] .dc-progress-fill.is-done{ background:var(--gold, #c9a227); }

body[data-mode="serious"] .dc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--rule);
  flex-wrap:wrap;
}
body[data-mode="serious"] .dc-count{ font-family:var(--ui); font-size:.85rem; color:var(--ink-3); }
body[data-mode="serious"] .dc-count b{ color:var(--ink); font-weight:600; }
body[data-mode="serious"] .dc-progress{ display:flex; align-items:center; gap:10px; min-width:180px; flex:1; max-width:260px; }
body[data-mode="serious"] .dc-cta{ font-family:var(--ui); font-size:var(--t-ui); font-weight:560; color:var(--accent); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
body[data-mode="serious"] .domain-node.done .dc-cta{ color:var(--ink-2); }

body[data-mode="serious"] .status-pill{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; border:1px solid var(--rule); color:var(--ink-3);
}
body[data-mode="serious"] .status-pill.done{ background:var(--accent-tint); color:var(--accent-ink); border-color:transparent; }
body[data-mode="serious"] .status-pill.current{ background:var(--rust-tint); color:var(--rust); border-color:transparent; }

body[data-mode="serious"] .pathway-end{
  margin-top:var(--s8); margin-left:64px; padding:var(--s6);
  border:1px dashed var(--rule); border-radius:var(--radius);
  font-family:var(--ui); font-size:.9rem; color:var(--ink-2);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
@media (max-width:640px){
  body[data-mode="serious"] .domain-node{ grid-template-columns:32px 1fr; gap:var(--s4); }
  body[data-mode="serious"] .node-marker{ width:32px; height:32px; font-size:.8rem; }
  body[data-mode="serious"] .roadmap::before{ left:15px; }
  body[data-mode="serious"] .pathway-end{ margin-left:0; }
}

/* -------------------------------------------------------------- placeholder views */
body[data-mode="serious"] .placeholder{
  max-width:var(--measure); margin:0 auto; text-align:center;
  padding:var(--s16) var(--s4);
}
body[data-mode="serious"] .placeholder h1{ font-family:var(--display); font-size:2rem; margin:0 0 var(--s4); }
body[data-mode="serious"] .placeholder p{ color:var(--ink-2); }
body[data-mode="serious"] .placeholder .kicker{ display:block; margin-bottom:var(--s4); }

/* -------------------------------------------------------------- toast */
body[data-mode="serious"] .toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--paper);
  font-family:var(--ui); font-size:.9rem; padding:10px 18px; border-radius:8px;
  box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:.22s var(--ease); z-index:80;
}
body[data-mode="serious"] .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* -------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce){
  body[data-mode="serious"] *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body[data-mode="serious"] .reveal{ opacity:0; transform:translateY(8px); animation:reveal .4s var(--ease) forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }
body[data-mode="serious"] .reveal.d1{ animation-delay:.05s; } body[data-mode="serious"] .reveal.d2{ animation-delay:.1s; }
body[data-mode="serious"] .reveal.d3{ animation-delay:.15s; } body[data-mode="serious"] .reveal.d4{ animation-delay:.2s; }

/* ==============================================================
   STAGE 4 — Complementary tools (shared scaffolding)
   ============================================================== */
body[data-mode="serious"] .tool-view{ }
body[data-mode="serious"] .tool-head{ margin-bottom:var(--s8); }
body[data-mode="serious"] .tool-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s2); }
body[data-mode="serious"] .tool-title{ font-family:var(--display); font-size:var(--t-domain); font-weight:560; margin:0; letter-spacing:-.01em; font-variation-settings:"opsz" 144,"SOFT" 20; }
body[data-mode="serious"] .tool-sub{ font-size:1.1rem; color:var(--ink-2); max-width:var(--measure); margin:var(--s4) 0 0; }
body[data-mode="serious"] .tool-actions{ margin-top:var(--s6); }

/* cert switch (segmented, mono codes) */
body[data-mode="serious"] .cert-switch{ display:inline-flex; gap:2px; padding:3px; background:var(--paper-2); border:1px solid var(--rule); border-radius:9px; }
body[data-mode="serious"] .cs-btn{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:none; border:0; cursor:pointer; padding:7px 12px; border-radius:6px; transition:.15s var(--ease); }
body[data-mode="serious"] .cs-btn:hover{ color:var(--ink); }
body[data-mode="serious"] .cs-btn.active{ background:var(--card); color:var(--accent-ink); box-shadow:var(--shadow); }
body[data-mode="serious"] [data-theme="dark"] .cs-btn.active{ color:var(--accent); }

body[data-mode="serious"] .tool-empty{ max-width:var(--measure); padding:var(--s12) 0; text-align:center; margin:0 auto; }
body[data-mode="serious"] .tool-empty h3{ font-family:var(--display); font-size:1.5rem; margin:0 0 var(--s3); }
body[data-mode="serious"] .tool-empty p{ color:var(--ink-2); }

/* shared thin bar (readiness/breakdown) */
body[data-mode="serious"] .tbar{ height:8px; border-radius:99px; background:var(--paper-2); border:1px solid var(--rule); overflow:hidden; }
body[data-mode="serious"] .tbar > i{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .5s var(--ease); }
body[data-mode="serious"] .tbar.ok > i{ background:var(--ok); } body[data-mode="serious"] .tbar.warn > i{ background:var(--warn); } body[data-mode="serious"] .tbar.err > i{ background:var(--err); }

/* gauge (donut) */
body[data-mode="serious"] .gauge{ position:relative; width:130px; height:130px; }
body[data-mode="serious"] .gauge .g-track{ stroke:var(--paper-2); }
body[data-mode="serious"] .gauge-zero .g-track{ stroke:var(--rule); }
body[data-mode="serious"] .gauge .g-val{ stroke:var(--accent); transition:stroke-dashoffset .7s var(--ease); }
body[data-mode="serious"] .gauge .g-tick{ stroke:var(--rust); }
body[data-mode="serious"] .gauge-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
body[data-mode="serious"] .g-big{ font-family:var(--display); font-size:1.9rem; font-weight:560; color:var(--ink); line-height:1; }
body[data-mode="serious"] .g-small{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }

/* ==============================================================
   CHEAT SHEETS
   ============================================================== */
body[data-mode="serious"] .cheat-doc{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(20px,4vw,52px); }
body[data-mode="serious"] .cheat-doc-head{ border-bottom:2px solid var(--ink); padding-bottom:var(--s4); margin-bottom:var(--s8); }
body[data-mode="serious"] .cheat-doc-code{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
body[data-mode="serious"] .cheat-doc-title{ font-family:var(--display); font-size:clamp(1.6rem,1.2rem+1.6vw,2.1rem); font-weight:560; margin:6px 0 4px; }
body[data-mode="serious"] .cheat-doc-meta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }

body[data-mode="serious"] .cheat-section{ margin-bottom:var(--s12); break-inside:avoid; }
body[data-mode="serious"] .cheat-section:last-child{ margin-bottom:0; }
body[data-mode="serious"] .cheat-sec-title{ font-family:var(--display); font-size:1.35rem; font-weight:540; margin:0 0 var(--s4); display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--rule); padding-bottom:8px; }
body[data-mode="serious"] .cheat-sec-num{ font-family:var(--mono); font-size:.8rem; color:var(--rust); font-weight:600; }

/* cheat table */
body[data-mode="serious"] .cheat-table-wrap{ overflow-x:auto; }
body[data-mode="serious"] .cheat-table{ width:100%; border-collapse:collapse; font-family:var(--ui); font-size:.9rem; }
body[data-mode="serious"] .cheat-table th{ text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:8px 14px; border-bottom:1.5px solid var(--rule); white-space:nowrap; }
body[data-mode="serious"] .cheat-table td{ padding:11px 14px; border-bottom:1px solid var(--rule); color:var(--ink-2); vertical-align:top; line-height:1.5; }
body[data-mode="serious"] .cheat-table td.cell-key{ color:var(--ink); font-weight:600; font-family:var(--mono); font-size:.82rem; white-space:nowrap; }
body[data-mode="serious"] .cheat-table tbody tr:hover{ background:var(--paper); }
body[data-mode="serious"] .cheat-table code{ font-family:var(--mono); font-size:.85em; background:var(--paper-2); padding:1px 5px; border-radius:4px; }

/* in-lesson reference table (authored inside a block[] to replace a wall of text) */
body[data-mode="serious"] .gc-tbl-wrap{ overflow-x:auto; margin:14px 0 18px; border:1px solid var(--rule); border-radius:10px; }
body[data-mode="serious"] .gc-tbl{ width:100%; border-collapse:collapse; font-family:var(--ui); font-size:.9rem; }
body[data-mode="serious"] .gc-tbl caption{ caption-side:top; text-align:left; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:10px 14px 4px; }
body[data-mode="serious"] .gc-tbl th{ text-align:left; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:9px 14px; border-bottom:1.5px solid var(--rule); background:var(--paper); white-space:nowrap; }
body[data-mode="serious"] .gc-tbl td{ padding:10px 14px; border-bottom:1px solid var(--rule); color:var(--ink-2); vertical-align:top; line-height:1.5; }
body[data-mode="serious"] .gc-tbl tbody tr:last-child td{ border-bottom:0; }
body[data-mode="serious"] .gc-tbl td.cell-key{ color:var(--ink); font-weight:600; font-family:var(--mono); font-size:.8rem; white-space:nowrap; }
body[data-mode="serious"] .gc-tbl tbody tr:hover{ background:var(--paper); }
body[data-mode="serious"] .gc-tbl code{ font-family:var(--mono); font-size:.85em; background:var(--paper-2); padding:1px 5px; border-radius:4px; }
body[data-mode="serious"] .concept-p--rich{ margin:0; }

/* cheat numbers */
body[data-mode="serious"] .cheat-numbers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s3); }
body[data-mode="serious"] .num-tile{ border:1px solid var(--rule); border-radius:var(--radius-sm); padding:var(--s4); background:var(--paper); display:flex; flex-direction:column; gap:3px; }
body[data-mode="serious"] .num-value{ font-family:var(--display); font-size:1.7rem; font-weight:560; color:var(--accent); line-height:1; }
body[data-mode="serious"] .num-label{ font-family:var(--ui); font-size:.85rem; font-weight:600; color:var(--ink); }
body[data-mode="serious"] .num-detail{ font-family:var(--ui); font-size:.78rem; color:var(--ink-3); line-height:1.45; }

/* cheat cards */
body[data-mode="serious"] .cheat-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s3); }
body[data-mode="serious"] .cheat-card{ border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:var(--s4); background:var(--paper); }
body[data-mode="serious"] .cc-title{ font-family:var(--ui); font-size:.98rem; font-weight:600; margin:0 0 5px; color:var(--ink); }
body[data-mode="serious"] .cc-desc{ font-family:var(--ui); font-size:.85rem; color:var(--ink-2); margin:0; line-height:1.5; }

/* cheat decision */
body[data-mode="serious"] .cheat-decision{ display:flex; flex-direction:column; gap:2px; }
body[data-mode="serious"] .dec-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4); border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--paper); }
body[data-mode="serious"] .dec-row + .dec-row{ margin-top:6px; }
body[data-mode="serious"] .dec-if, body[data-mode="serious"] .dec-then{ display:flex; flex-direction:column; gap:4px; font-family:var(--ui); font-size:.9rem; color:var(--ink); }
body[data-mode="serious"] .dec-tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .dec-tag.then{ color:var(--accent); }
body[data-mode="serious"] .dec-arrow{ font-family:var(--mono); color:var(--rust); font-size:1.1rem; }
@media (max-width:560px){ body[data-mode="serious"] .dec-row{ grid-template-columns:1fr; } body[data-mode="serious"] .dec-arrow{ transform:rotate(90deg); justify-self:start; } }

/* ==============================================================
   LABS
   ============================================================== */
body[data-mode="serious"] .lab-list{ display:flex; flex-direction:column; gap:var(--s8); }
body[data-mode="serious"] .lab-item{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(18px,3vw,32px); }
body[data-mode="serious"] .lab-head{ margin-bottom:var(--s4); }
body[data-mode="serious"] .lab-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
body[data-mode="serious"] .lab-num{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; }
body[data-mode="serious"] .lab-chip{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--rule); border-radius:99px; padding:2px 9px; }
body[data-mode="serious"] .lab-chip.free{ color:var(--ok); background:var(--ok-tint); border-color:transparent; }
body[data-mode="serious"] .lab-chip.paid{ color:var(--warn); background:var(--warn-tint); border-color:transparent; }
body[data-mode="serious"] .lab-title{ font-family:var(--display); font-size:1.4rem; font-weight:560; margin:0 0 8px; }
body[data-mode="serious"] .lab-objective{ font-size:1rem; color:var(--ink-2); margin:0; max-width:70ch; line-height:1.6; }

body[data-mode="serious"] .lab-prog{ display:flex; align-items:center; gap:12px; margin:var(--s4) 0 var(--s6); }
body[data-mode="serious"] .lab-prog .meter{ flex:1; max-width:320px; }
body[data-mode="serious"] .lab-prog-label{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); }

body[data-mode="serious"] .lab-steps{ list-style:none; margin:0; padding:0; counter-reset:labstep; }
body[data-mode="serious"] .lab-step{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--rule); align-items:start; }
body[data-mode="serious"] .lab-step-body{ min-width:0; }
body[data-mode="serious"] .lab-check{ width:26px; height:26px; border-radius:7px; border:1.5px solid var(--rule); background:var(--card); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.15s var(--ease); flex-shrink:0; margin-top:2px; }
body[data-mode="serious"] .lab-check:hover{ border-color:var(--accent); }
body[data-mode="serious"] .lab-check.done{ background:var(--accent); border-color:var(--accent); }
body[data-mode="serious"] .lab-step-title{ font-family:var(--ui); font-size:1rem; font-weight:600; color:var(--ink); counter-increment:labstep; }
body[data-mode="serious"] .lab-step-title::before{ content:counter(labstep) ". "; color:var(--ink-3); font-family:var(--mono); font-size:.85rem; }
body[data-mode="serious"] .lab-step.done .lab-step-title{ color:var(--ink-3); }
body[data-mode="serious"] .lab-step-detail{ font-family:var(--ui); font-size:.9rem; color:var(--ink-2); margin:6px 0 0; line-height:1.6; max-width:72ch; }
body[data-mode="serious"] .lab-cmd{ position:relative; margin:10px 0 0; background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:12px 14px 12px 14px; overflow-x:auto; }
body[data-mode="serious"] .lab-cmd-label{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px; }
body[data-mode="serious"] .lab-cmd code{ font-family:var(--mono); font-size:.85rem; color:var(--ink); white-space:pre-wrap; }

body[data-mode="serious"] .lab-foot{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s6); }
@media (max-width:640px){ body[data-mode="serious"] .lab-foot{ grid-template-columns:1fr; } }
body[data-mode="serious"] .lab-success, body[data-mode="serious"] .lab-cleanup{ border-radius:var(--radius-sm); padding:var(--s4); border:1px solid var(--rule); }
body[data-mode="serious"] .lab-success{ background:var(--ok-tint); border-color:transparent; }
body[data-mode="serious"] [data-theme="dark"] .lab-success{ background:color-mix(in srgb, var(--ok) 15%, transparent); }
body[data-mode="serious"] .lab-foot-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:5px; }
body[data-mode="serious"] .lab-foot-label.ok{ color:var(--ok); }
body[data-mode="serious"] .lab-success p, body[data-mode="serious"] .lab-cleanup p{ font-family:var(--ui); font-size:.86rem; color:var(--ink-2); margin:0; line-height:1.55; }

/* ==============================================================
   PRACTICE EXAMS
   ============================================================== */
body[data-mode="serious"] .btn-lg{ padding:13px 26px; font-size:1rem; }

/* config */
body[data-mode="serious"] .exam-config{ max-width:760px; }
body[data-mode="serious"] .exam-config-lead h2{ font-family:var(--display); font-size:1.6rem; margin:0 0 6px; }
body[data-mode="serious"] .exam-config-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s6); margin:var(--s8) 0 var(--s4); }
body[data-mode="serious"] .opt-group{ display:flex; flex-direction:column; gap:10px; }
body[data-mode="serious"] .opt-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .opt-row{ display:flex; flex-wrap:wrap; gap:6px; }
body[data-mode="serious"] .opt-btn{ font-family:var(--ui); font-size:.88rem; color:var(--ink-2); background:var(--card); border:1px solid var(--rule); border-radius:7px; padding:9px 14px; cursor:pointer; transition:.15s var(--ease); text-align:left; }
body[data-mode="serious"] .opt-btn:hover{ border-color:var(--ink-3); color:var(--ink); }
body[data-mode="serious"] .opt-btn.active{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
body[data-mode="serious"] [data-theme="dark"] .opt-btn.active{ color:var(--accent); }
body[data-mode="serious"] .exam-count-note{ font-family:var(--mono); font-size:.75rem; color:var(--ink-3); margin:var(--s4) 0 0; }
body[data-mode="serious"] .exam-config-foot{ margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--rule); }

/* runtime */
body[data-mode="serious"] .exam-bar{ position:sticky; top:60px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s3) var(--s4); margin-bottom:var(--s8); background:rgba(var(--paper-rgb), .94); backdrop-filter:blur(8px); border:1px solid var(--rule); border-radius:var(--radius); flex-wrap:wrap; }
body[data-mode="serious"] .exam-bar-left{ display:flex; align-items:center; gap:12px; min-width:200px; flex:1; }
body[data-mode="serious"] .exam-mini-meter{ flex:1; max-width:220px; height:6px; background:var(--paper-2); border:1px solid var(--rule); border-radius:99px; overflow:hidden; }
body[data-mode="serious"] .exam-mini-meter > i{ display:block; height:100%; background:var(--accent); transition:width .3s var(--ease); }
body[data-mode="serious"] .exam-answered{ font-family:var(--mono); font-size:.74rem; color:var(--ink-2); white-space:nowrap; }
body[data-mode="serious"] .exam-bar-right{ display:flex; align-items:center; gap:12px; }
body[data-mode="serious"] .exam-timer-wrap{ font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--ink); padding:5px 12px; border-radius:6px; background:var(--paper-2); border:1px solid var(--rule); }
body[data-mode="serious"] .exam-timer-wrap.untimed{ font-size:.72rem; font-weight:400; color:var(--ink-3); letter-spacing:.04em; }
body[data-mode="serious"] .exam-timer-wrap.low{ color:var(--err); background:var(--err-tint); border-color:transparent; }

body[data-mode="serious"] .exam-qs{ display:flex; flex-direction:column; gap:var(--s6); }
body[data-mode="serious"] .exam-q{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(16px,3vw,28px); box-shadow:var(--shadow); }
body[data-mode="serious"] .exam-q-head{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s4); flex-wrap:wrap; }
body[data-mode="serious"] .exam-q-num{ font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--accent); }
body[data-mode="serious"] .exam-q-domain{ font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .exam-q-type{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rust); background:var(--rust-tint); padding:2px 8px; border-radius:99px; }
body[data-mode="serious"] .exam-q-stem{ font-size:1.12rem; line-height:1.6; color:var(--ink); margin:0 0 var(--s4); max-width:var(--measure); }
body[data-mode="serious"] .exam-q-stem.fill{ line-height:2.1; }
body[data-mode="serious"] .fill-input{ font-family:var(--mono); font-size:.92rem; color:var(--accent-ink); background:var(--accent-tint); border:0; border-bottom:2px solid var(--accent); border-radius:4px 4px 0 0; padding:2px 8px; min-width:120px; margin:0 3px; }
body[data-mode="serious"] [data-theme="dark"] .fill-input{ color:var(--accent); }
body[data-mode="serious"] .fill-input:focus{ outline:none; background:var(--card); }

body[data-mode="serious"] .exam-options{ display:flex; flex-direction:column; gap:8px; }
body[data-mode="serious"] .exam-opt{ display:flex; align-items:flex-start; gap:12px; text-align:left; width:100%; font-family:var(--ui); font-size:1rem; color:var(--ink); background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:13px 16px; cursor:pointer; transition:.14s var(--ease); }
body[data-mode="serious"] .exam-opt:hover{ border-color:var(--ink-3); background:var(--paper); }
body[data-mode="serious"] .exam-opt.sel{ border-color:var(--accent); background:var(--accent-tint); }
body[data-mode="serious"] [data-theme="dark"] .exam-opt.sel{ background:var(--accent-tint); }
body[data-mode="serious"] .exam-opt-mark{ width:19px; height:19px; border-radius:50%; border:2px solid var(--ink-3); flex-shrink:0; margin-top:2px; transition:.14s var(--ease); position:relative; }
body[data-mode="serious"] .exam-opt-mark.box{ border-radius:5px; }
body[data-mode="serious"] .exam-opt.sel .exam-opt-mark{ border-color:var(--accent); background:var(--accent); }
body[data-mode="serious"] .exam-opt.sel .exam-opt-mark::after{ content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%; background:#fff; top:0; left:0; right:0; bottom:0; }
body[data-mode="serious"] .exam-opt.sel .exam-opt-mark.box::after{ border-radius:1px; width:5px; height:9px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); margin-top:-1px; }
body[data-mode="serious"] .exam-opt-text{ line-height:1.5; }
body[data-mode="serious"] .exam-run-foot{ margin-top:var(--s8); display:flex; justify-content:center; }

/* results */
body[data-mode="serious"] .exam-results{ }
body[data-mode="serious"] .results-hero{ display:grid; grid-template-columns:auto 1fr; gap:var(--s8); align-items:center; padding-bottom:var(--s8); border-bottom:1px solid var(--rule); margin-bottom:var(--s8); }
@media (max-width:600px){ body[data-mode="serious"] .results-hero, body[data-mode="serious"] .ready-hero{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
body[data-mode="serious"] .results-verdict, body[data-mode="serious"] .ready-label{ font-family:var(--display); font-size:2rem; font-weight:560; margin:6px 0 8px; }
body[data-mode="serious"] .results-verdict.ok, body[data-mode="serious"] .ready-label.ok{ color:var(--ok); }
body[data-mode="serious"] .results-verdict.warn, body[data-mode="serious"] .ready-label.warn{ color:var(--warn); }
body[data-mode="serious"] .results-verdict.err, body[data-mode="serious"] .ready-label.err{ color:var(--err); }
body[data-mode="serious"] .results-line{ font-family:var(--ui); font-size:.95rem; color:var(--ink-2); margin:0 0 6px; }
body[data-mode="serious"] .results-line b{ color:var(--ink); }
body[data-mode="serious"] .results-actions, body[data-mode="serious"] .ready-cta{ display:flex; gap:10px; margin-top:var(--s4); flex-wrap:wrap; }
@media (max-width:600px){ body[data-mode="serious"] .results-actions, body[data-mode="serious"] .ready-cta{ justify-content:center; } }

body[data-mode="serious"] .domain-breakdown, body[data-mode="serious"] .ready-domains{ margin-top:var(--s8); }
body[data-mode="serious"] .brk-title{ font-family:var(--display); font-size:1.3rem; font-weight:540; margin:0 0 var(--s6); }
body[data-mode="serious"] .brk-row{ margin-bottom:var(--s6); }
body[data-mode="serious"] .brk-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
body[data-mode="serious"] .brk-dnum{ font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--accent); }
body[data-mode="serious"] .brk-dtitle{ font-family:var(--ui); font-size:.95rem; color:var(--ink); flex:1; }
body[data-mode="serious"] .brk-score{ font-family:var(--mono); font-size:.82rem; font-weight:600; }
body[data-mode="serious"] .brk-score.ok{ color:var(--ok); } body[data-mode="serious"] .brk-score.warn{ color:var(--warn); } body[data-mode="serious"] .brk-score.err{ color:var(--err); }

body[data-mode="serious"] .exam-review{ margin-top:var(--s8); border-top:1px solid var(--rule); padding-top:var(--s6); }
body[data-mode="serious"] .exam-review summary{ font-family:var(--ui); font-size:.95rem; font-weight:600; color:var(--accent); cursor:pointer; }
body[data-mode="serious"] .review-item{ border-left:3px solid var(--rule); padding:var(--s3) 0 var(--s3) var(--s4); margin-top:var(--s4); }
body[data-mode="serious"] .review-item.ok{ border-left-color:var(--ok); }
body[data-mode="serious"] .review-item.err{ border-left-color:var(--err); }
body[data-mode="serious"] .review-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
body[data-mode="serious"] .review-badge{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:99px; font-weight:600; }
body[data-mode="serious"] .review-badge.ok{ background:var(--ok-tint); color:var(--ok); }
body[data-mode="serious"] .review-badge.err{ background:var(--err-tint); color:var(--err); }
body[data-mode="serious"] .review-qnum{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }
body[data-mode="serious"] .review-stem{ font-size:1rem; color:var(--ink); margin:0 0 6px; line-height:1.5; }
body[data-mode="serious"] .review-answer{ font-family:var(--ui); font-size:.88rem; color:var(--ink-2); margin:0 0 4px; }
body[data-mode="serious"] .review-exp{ font-family:var(--ui); font-size:.86rem; color:var(--ink-2); margin:0; line-height:1.55; }

/* ==============================================================
   READINESS / PROGRESS
   ============================================================== */
body[data-mode="serious"] .ready-hero{ display:grid; grid-template-columns:auto 1fr; gap:var(--s8); align-items:center; padding-bottom:var(--s8); border-bottom:1px solid var(--rule); margin-bottom:var(--s8); }
body[data-mode="serious"] .ready-gauge{ display:flex; flex-direction:column; align-items:center; gap:10px; }
body[data-mode="serious"] .ready-target{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
body[data-mode="serious"] .pass-pill{ font-family:var(--mono); font-weight:600; font-size:.72rem; color:var(--rust); background:var(--rust-tint); border:1px solid color-mix(in srgb, var(--rust) 35%, transparent); border-radius:99px; padding:2px 9px; letter-spacing:.02em; }
body[data-mode="serious"] .pass-pill-note{ color:var(--ink-3); }

body[data-mode="serious"] .ready-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s4); margin-bottom:var(--s12); }
body[data-mode="serious"] .ready-tile{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s6) var(--s4); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:4px; }
body[data-mode="serious"] .rt-big{ font-family:var(--display); font-size:2rem; font-weight:560; color:var(--ink); line-height:1; }
body[data-mode="serious"] .rt-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); }
body[data-mode="serious"] .rt-detail{ font-family:var(--ui); font-size:.78rem; color:var(--ink-3); margin-top:4px; line-height:1.45; }

body[data-mode="serious"] .ready-domains-sub{ margin:0 0 var(--s6); font-size:.95rem; }
body[data-mode="serious"] .ready-drow{ padding:var(--s4) 0; border-top:1px solid var(--rule); }
body[data-mode="serious"] .ready-drow:last-child{ border-bottom:1px solid var(--rule); }
body[data-mode="serious"] .drow-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
body[data-mode="serious"] .drow-dnum{ font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--accent); width:2.2ch; }
body[data-mode="serious"] .drow-titles{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
body[data-mode="serious"] .drow-title{ font-family:var(--ui); font-size:1rem; font-weight:600; color:var(--ink); }
body[data-mode="serious"] .drow-meta{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3); letter-spacing:.02em; }
body[data-mode="serious"] .drow-pct{ font-family:var(--display); font-size:1.3rem; font-weight:560; }
body[data-mode="serious"] .drow-pct.ok{ color:var(--ok); } body[data-mode="serious"] .drow-pct.warn{ color:var(--warn); } body[data-mode="serious"] .drow-pct.err{ color:var(--err); }
body[data-mode="serious"] .drow-cta{ display:inline-block; font-family:var(--ui); font-size:.8rem; color:var(--accent); margin-top:10px; }

/* ==============================================================
   GUIDED LESSON FLOW — concept reader · recall check · checkpoint
   ============================================================== */
body[data-mode="serious"] .lesson-view{ max-width:1080px; }

/* ---- shared spine (progress rail across concepts) ---- */
/* Sticky under the topbar so the breadcrumb + back control are ALWAYS visible as
 * the learner scrolls a long concept (scout found crumbTop -5466px — scrolled far
 * off-screen). Backed by --topbar-h so it tucks right beneath the sticky topbar. */
body[data-mode="serious"] .lesson-spine{
  margin-bottom:var(--s8);
  position:sticky; top:var(--topbar-h,60px); z-index:20;
  background:rgba(var(--paper-rgb), .94);
  backdrop-filter:saturate(120%) blur(8px);
  padding-top:var(--s4); margin-top:calc(var(--s4) * -1);
}
body[data-mode="serious"] .ls-crumb-row{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4); }
body[data-mode="serious"] .ls-crumb-row .crumb{ margin-bottom:0; }
/* Full breadcrumb trail (Home / CODE / Domain N) */
body[data-mode="serious"] .ls-breadcrumb{ display:flex; align-items:center; gap:6px; font-family:var(--ui); font-size:var(--t-ui); flex-wrap:wrap; }
body[data-mode="serious"] .bc-link{ background:none; border:0; padding:2px 2px; cursor:pointer; color:var(--ink-2); border-radius:4px; }
body[data-mode="serious"] .bc-link:hover{ color:var(--accent); }
body[data-mode="serious"] .bc-sep{ color:var(--ink-3); }
body[data-mode="serious"] .bc-current{ color:var(--ink); font-weight:500; }
/* Back control: an obvious 44px tap target on mobile; compact chip on desktop. */
body[data-mode="serious"] .crumb-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:0;
  min-height:36px; padding:4px 10px; border:1px solid var(--rule); border-radius:99px;
  background:var(--paper-2);
}
body[data-mode="serious"] .crumb-back:hover{ color:var(--accent); border-color:var(--accent); }
body[data-mode="serious"] .ls-domainmark{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:640px){
  /* keep only the compact back control + trail on small screens; hide the long
   * domain title so the sticky row stays a single, unobtrusive line. */
  body[data-mode="serious"] .ls-domainmark{ display:none; }
  body[data-mode="serious"] .crumb-back{ min-height:44px; }
  body[data-mode="serious"] .lesson-spine{ top:calc(var(--topbar-h,60px)); }
}
body[data-mode="serious"] .ls-progress-line{ display:flex; align-items:center; gap:var(--s4); padding-top:var(--s4); border-top:1px solid var(--rule); flex-wrap:wrap; }
body[data-mode="serious"] .ls-step-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
body[data-mode="serious"] .ls-pct{ font-family:var(--mono); font-size:.75rem; color:var(--ink-2); margin-left:auto; }
body[data-mode="serious"] .spine-rail{ list-style:none; display:flex; align-items:center; gap:7px; margin:0; padding:0; flex:1; min-width:0; flex-wrap:wrap; }
body[data-mode="serious"] .spine-node{ position:relative; width:26px; height:26px; display:grid; place-items:center; }
body[data-mode="serious"] .spine-dot{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  background:var(--card); color:var(--ink-3); border:1.5px solid var(--rule);
  transition:.2s var(--ease);
}
body[data-mode="serious"] .spine-node.read .spine-dot{ background:var(--accent); border-color:var(--accent); color:#fff; font-size:0; }
body[data-mode="serious"] .spine-node.read .spine-tick{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; pointer-events:none; }
body[data-mode="serious"] .spine-node.active .spine-dot{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
body[data-mode="serious"] .spine-node.checkpoint .spine-dot.flag{ background:var(--rust-tint); border-color:color-mix(in srgb,var(--rust) 35%,transparent); color:var(--rust); }
body[data-mode="serious"] .spine-node.checkpoint.read .spine-dot.flag{ background:var(--rust); border-color:var(--rust); color:#fff; }
body[data-mode="serious"] .spine-node.checkpoint.active .spine-dot.flag{ box-shadow:0 0 0 3px var(--rust-tint); }
/* Mobile: the concept-progress nodes are read-only indicators (not buttons),
 * but on a 390px phone the wrapped two-row rail sat cramped and the dots were
 * marginal to read/aim at. Give each node a 44x44 min box (the visible dot stays
 * small) and a bit more inter-node + inter-row breathing room. */
@media (max-width:640px){
  /* Single-row, horizontally-scrollable stepper on phones: the old wrapped grid
   * (check,2,3 / 4,5,6 / 7,flag) read as an awkward irregular block and ate
   * vertical space before the concept began. A no-wrap scroll rail keeps it to
   * ONE compact line; the step label reads "Concept N of M" beside it. */
  body[data-mode="serious"] .ls-progress-line{ flex-wrap:nowrap; align-items:center; }
  body[data-mode="serious"] .spine-rail{
    flex-wrap:nowrap; gap:10px; row-gap:0; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 2px 4px; scroll-snap-type:x proximity; -ms-overflow-style:none;
    /* overflow cue: fade the right edge so it reads as "more concept nodes →"
     * (nodes 6/7 + the checkpoint flag scroll into view). The gradient mask is
     * inert to touch, so the rail still scrolls freely. */
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  body[data-mode="serious"] .spine-rail::-webkit-scrollbar{ display:none; }
  body[data-mode="serious"] .spine-node{ min-width:34px; width:34px; min-height:34px; flex:0 0 auto; scroll-snap-align:center; }
  body[data-mode="serious"] .ls-step-label{ flex:0 0 auto; }
  body[data-mode="serious"] .ls-pct{ flex:0 0 auto; }
}

/* ---- lesson footer nav ---- */
body[data-mode="serious"] .lesson-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid var(--rule); flex-wrap:wrap; }
body[data-mode="serious"] .btn .arrow-l{ transition:transform .16s var(--ease); }
body[data-mode="serious"] .btn:hover .arrow-l{ transform:translateX(-3px); }

/* ==================== CONCEPT READER ==================== */
body[data-mode="serious"] .concept-tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); background:var(--rust-tint); border-radius:99px; padding:3px 11px; display:inline-block; }
body[data-mode="serious"] .concept-title{ font-family:var(--display); font-size:var(--t-domain); font-weight:560; line-height:1.06; letter-spacing:-.012em; margin:var(--s4) 0 var(--s4); font-variation-settings:"opsz" 144,"SOFT" 24; }
body[data-mode="serious"] .concept-summary{ font-family:var(--font); font-size:1.32rem; line-height:1.55; color:var(--ink-2); max-width:60ch; margin:0 0 var(--s8); }
body[data-mode="serious"] .concept-summary strong{ color:var(--ink); font-weight:600; }

body[data-mode="serious"] .concept-grid{ display:grid; grid-template-columns:1fr minmax(280px, 360px); gap:clamp(24px,4vw,56px); align-items:start; }
@media (max-width:860px){ body[data-mode="serious"] .concept-grid{ grid-template-columns:1fr; } }
body[data-mode="serious"] .concept-prose{ min-width:0; }
body[data-mode="serious"] .concept-p{ font-size:var(--t-body); line-height:1.75; color:var(--ink); margin:0 0 var(--s6); max-width:66ch; }
body[data-mode="serious"] .concept-p strong{ font-weight:600; }
body[data-mode="serious"] .concept-p em{ color:var(--accent-strong); }
/* Inline code identifiers (stop_reason, tool_use, …) — ONE consistent treatment
   everywhere in the reader (prose, callouts, deep-dive, example, pitfall, key
   terms) so an identifier never reads as monospace here and plain serif there.
   Tinted chip + mono keeps underscores intact and legible; overflow-wrap lets
   long identifiers (model_context_window_exceeded) break instead of overflowing. */
body[data-mode="serious"] .concept-prose code,
body[data-mode="serious"] .concept-summary code,
body[data-mode="serious"] .exam-callout code,
body[data-mode="serious"] .pitfall-callout code,
body[data-mode="serious"] .worked-example code,
body[data-mode="serious"] .deep-dive code,
body[data-mode="serious"] .key-facts code{
  font-family:var(--mono); font-size:.86em; color:var(--accent-strong);
  background:var(--accent-tint); padding:.06em .34em; border-radius:5px;
  overflow-wrap:anywhere; word-break:normal;
}
/* code-block bodies (.ce-body / .cd-cmd) are dark slabs — never apply the
   inline chip treatment to code inside them (that would be light-on-light). */
body[data-mode="serious"] .ce-body code,
body[data-mode="serious"] .cd-cmd code{ background:none; padding:0; border-radius:0; overflow-wrap:normal; }
body[data-mode="serious"] [data-theme="dark"] .concept-prose code,
body[data-mode="serious"] [data-theme="dark"] .concept-summary code,
body[data-mode="serious"] [data-theme="dark"] .exam-callout code,
body[data-mode="serious"] [data-theme="dark"] .pitfall-callout code,
body[data-mode="serious"] [data-theme="dark"] .worked-example code,
body[data-mode="serious"] [data-theme="dark"] .deep-dive code,
body[data-mode="serious"] [data-theme="dark"] .key-facts code{ color:var(--accent); }
/* callouts sit on a tinted ground already — give their code chips contrast */
body[data-mode="serious"] .exam-callout code{ background:rgba(255,255,255,.55); }
body[data-mode="serious"] [data-theme="dark"] .exam-callout code{ background:rgba(0,0,0,.28); }

/* exam callout — the "why it matters" block */
body[data-mode="serious"] .exam-callout{ background:var(--accent-tint); border-radius:var(--radius); padding:var(--s6); margin:0 0 var(--s8); border-left:3px solid var(--accent); }
body[data-mode="serious"] .exam-callout .callout-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-strong); display:block; margin-bottom:8px; }
body[data-mode="serious"] [data-theme="dark"] .exam-callout .callout-label{ color:var(--accent); }
body[data-mode="serious"] .exam-callout p{ margin:0; font-family:var(--ui); font-size:.98rem; line-height:1.6; color:var(--accent-ink); }
body[data-mode="serious"] [data-theme="dark"] .exam-callout p{ color:var(--ink); }
body[data-mode="serious"] .exam-callout em{ font-style:italic; }

/* aside: figure + key terms */
body[data-mode="serious"] .concept-aside{ position:sticky; top:80px; display:flex; flex-direction:column; gap:var(--s6); }
@media (max-width:860px){ body[data-mode="serious"] .concept-aside{ position:static; } }
body[data-mode="serious"] .concept-fig{ margin:0; border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
body[data-mode="serious"] .fig-frame{ padding:var(--s6); background:var(--paper); display:grid; place-items:center; position:relative; }
/* Zoom discoverability: a SMALL magnifier chip pinned to the top-right corner of
 * the diagram frame — it must NEVER cover the diagram it describes. The diagram
 * stays fully legible + auto-animating underneath; the chip is an optional
 * enhancement, not a gate. It rides on the shared .is-zoomable affordance
 * (cursor:zoom-in) that GC_FIGZOOM adds. */
body[data-mode="serious"] .fig-zoom-hint{
  position:absolute; top:8px; right:8px; z-index:2; pointer-events:none;
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 6px;
  font-family:var(--ui); font-size:.66rem; letter-spacing:.02em; line-height:1;
  color:var(--ink-2); background:rgba(var(--card-rgb), .92);
  border:1px solid var(--rule); border-radius:99px; box-shadow:var(--shadow);
  opacity:.9; transition:opacity .18s var(--ease), color .18s var(--ease);
}
/* Hard-cap the hint's own icon so the broad `.fig-frame svg` sizing rules below
 * can NEVER balloon this 13px magnifier to fill the frame (the reported full-
 * bleed occluder). The diagram SVG is targeted by `.fig-frame > svg` only. */
body[data-mode="serious"] .fig-zoom-hint svg{
  display:block; color:var(--accent);
  width:13px !important; height:13px !important; min-height:0 !important;
}
/* dim the chip only SLIGHTLY on hover so the diagram is never obscured */
body[data-mode="serious"] .concept-fig:hover .fig-zoom-hint,
body[data-mode="serious"] .concept-fig:focus-within .fig-zoom-hint{ opacity:.55; color:var(--accent); }
@media (max-width:640px){
  /* on phones keep the badge but drop the label to the icon only to save room */
  body[data-mode="serious"] .fig-zoom-hint .fzh-txt{ display:none; }
  body[data-mode="serious"] .fig-zoom-hint{ padding:5px; opacity:.9; }
}
@media (prefers-reduced-motion: reduce){
  body[data-mode="serious"] .fig-zoom-hint{ transition:none; }
}
/* give schematic SVGs room so labels aren't cramped/illegible at render size.
 * DIRECT CHILD ONLY — the diagram sits directly in .fig-frame (injected via
 * innerHTML); nested icon SVGs (.fig-zoom-hint) must be left alone. */
body[data-mode="serious"] .fig-frame > svg{ width:100%; height:auto; min-height:190px; }
body[data-mode="serious"] .concept-fig figcaption{ font-family:var(--ui); font-size:.8rem; color:var(--ink-3); line-height:1.5; padding:12px var(--s4); border-top:1px solid var(--rule); }

/* FLAGSHIP animated flow diagrams render FULL-WIDTH above the prose/aside grid
 * (not squeezed into the ~310px aside where labels shrank to ~5px). The wide
 * viewBox (e.g. 560×300) now scales to the full article measure, so in-node
 * labels read at a legible size WITHOUT enlarging. It reads as the primary
 * teaching object; the prose + key terms follow beneath it. */
body[data-mode="serious"] .concept-fig-lead{
  margin:var(--s6) 0 var(--s8);
}
body[data-mode="serious"] .concept-fig-lead .fig-frame{
  padding:clamp(20px, 4vw, 40px);
}
/* Cap the diagram to a comfortable reading width and center it so its labels
 * render large on wide screens instead of stretching edge-to-edge. */
body[data-mode="serious"] .concept-fig-lead .fig-frame > svg{
  width:100%; max-width:760px; height:auto; min-height:0; margin-inline:auto;
}
body[data-mode="serious"] .concept-fig-lead figcaption{
  text-align:center; font-size:.86rem; padding:14px var(--s6);
}
body[data-mode="serious"] .key-facts{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); padding:var(--s6); box-shadow:var(--shadow); }
body[data-mode="serious"] .kf-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:var(--s4); }
body[data-mode="serious"] .kf-list{ margin:0; }
body[data-mode="serious"] .kf-list dt{ font-family:var(--ui); font-size:.9rem; font-weight:600; color:var(--ink); margin-top:var(--s4); }
body[data-mode="serious"] .kf-list dt:first-child{ margin-top:0; }
body[data-mode="serious"] .kf-list dd{ margin:3px 0 0; font-family:var(--ui); font-size:.85rem; line-height:1.5; color:var(--ink-2); }

/* ==================== RECALL CHECK ==================== */
body[data-mode="serious"] .check-mode{ max-width:820px; }
body[data-mode="serious"] .check-head{ text-align:center; margin-bottom:var(--s8); }
body[data-mode="serious"] .check-kicker{ font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--rust); }
body[data-mode="serious"] .check-title{ font-family:var(--display); font-size:clamp(1.6rem,1.2rem+1.6vw,2.1rem); font-weight:560; margin:var(--s3) 0 var(--s3); }
body[data-mode="serious"] .check-lede{ font-size:1.05rem; color:var(--ink-2); max-width:52ch; margin:0 auto; }

/* flashcard (flip) */
body[data-mode="serious"] .flashcard{ perspective:1400px; cursor:pointer; margin-bottom:var(--s8); outline:none; }
body[data-mode="serious"] .flashcard:focus-visible .fc-inner{ box-shadow:0 0 0 3px var(--accent-tint); border-radius:var(--radius); }
body[data-mode="serious"] .fc-inner{ display:grid; transform-style:preserve-3d; transition:transform .5s var(--ease); min-height:230px; }
body[data-mode="serious"] .flashcard.flipped .fc-inner{ transform:rotateY(180deg); }
body[data-mode="serious"] .fc-face{
  grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3); text-align:center;
  border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s8); box-shadow:var(--shadow);
}
body[data-mode="serious"] .fc-front{ background:var(--card); }
body[data-mode="serious"] .fc-back{ background:var(--accent); color:#fff; transform:rotateY(180deg); border-color:transparent; }
body[data-mode="serious"] .fc-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .fc-back .fc-label{ color:rgba(255,255,255,.75); }
body[data-mode="serious"] .fc-prompt{ font-family:var(--display); font-size:1.4rem; font-weight:520; color:var(--ink); margin:0; line-height:1.25; max-width:34ch; }
body[data-mode="serious"] .fc-hint{ font-family:var(--ui); font-size:.82rem; color:var(--ink-3); }
body[data-mode="serious"] .fc-answer{ font-family:var(--font); font-size:1.15rem; line-height:1.5; margin:0; max-width:44ch; }
body[data-mode="serious"] .fc-answer strong{ font-weight:600; }
body[data-mode="serious"] .fc-facts{ list-style:none; margin:var(--s3) 0 0; padding:0; text-align:left; max-width:44ch; display:flex; flex-direction:column; gap:5px; }
body[data-mode="serious"] .fc-facts li{ font-family:var(--ui); font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.92); }
body[data-mode="serious"] .fc-facts b{ font-weight:600; color:#fff; }

/* inline MCQ + checkpoint questions share option chrome */
body[data-mode="serious"] .mcq{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow); }
body[data-mode="serious"] .mcq-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s3); }
body[data-mode="serious"] .mcq-kicker{ font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
body[data-mode="serious"] .mcq-hint{ font-family:var(--mono); font-size:.66rem; color:var(--ink-3); }
body[data-mode="serious"] .mcq-stem, body[data-mode="serious"] .cpq-stem{ font-size:1.08rem; line-height:1.55; color:var(--ink); margin:0 0 var(--s4); }
body[data-mode="serious"] .mcq-opts{ display:flex; flex-direction:column; gap:8px; }
body[data-mode="serious"] .mcq-opt{
  display:flex; align-items:flex-start; gap:12px; text-align:left; width:100%;
  font-family:var(--ui); font-size:1rem; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:8px; padding:13px 16px; cursor:pointer; transition:.14s var(--ease);
}
body[data-mode="serious"] .mcq-opt:hover:not(.locked){ border-color:var(--ink-3); background:var(--paper); }
body[data-mode="serious"] .mcq-opt.sel{ border-color:var(--accent); background:var(--accent-tint); }
body[data-mode="serious"] .mcq-mark{ width:19px; height:19px; border-radius:50%; border:2px solid var(--ink-3); flex-shrink:0; margin-top:2px; transition:.14s var(--ease); position:relative; }
body[data-mode="serious"] .mcq-opt.sel .mcq-mark{ border-color:var(--accent); background:var(--accent); }
body[data-mode="serious"] .mcq-opt.sel .mcq-mark::after{ content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%; background:#fff; }
body[data-mode="serious"] .mcq-opt.locked{ cursor:default; }
body[data-mode="serious"] .mcq-opt.correct{ border-color:var(--ok); background:var(--ok-tint); }
body[data-mode="serious"] .mcq-opt.correct .mcq-mark{ border-color:var(--ok); background:var(--ok); }
body[data-mode="serious"] .mcq-opt.correct .mcq-mark::after{ content:""; position:absolute; inset:0; margin:auto; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-1px); }
body[data-mode="serious"] .mcq-opt.wrong{ border-color:var(--err); background:var(--err-tint); }
body[data-mode="serious"] .mcq-opt.wrong .mcq-mark{ border-color:var(--err); background:var(--err); }
body[data-mode="serious"] .mcq-opt.wrong .mcq-mark::after{ content:""; position:absolute; inset:0; margin:auto; width:9px; height:2px; background:#fff; }
body[data-mode="serious"] .mcq-opt-text{ line-height:1.5; }

body[data-mode="serious"] .mcq-feedback{ margin-top:var(--s4); padding:var(--s4); border-radius:var(--radius-sm); border-left:3px solid var(--rule); background:var(--paper); }
body[data-mode="serious"] .mcq-feedback.ok{ border-left-color:var(--ok); background:var(--ok-tint); }
body[data-mode="serious"] .mcq-feedback.err{ border-left-color:var(--err); background:var(--err-tint); }
body[data-mode="serious"] .fb-badge{ font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:2px 8px; border-radius:99px; }
body[data-mode="serious"] .fb-badge.ok{ background:var(--ok); color:#fff; }
body[data-mode="serious"] .fb-badge.err{ background:var(--err); color:#fff; }
body[data-mode="serious"] .fb-exp{ font-family:var(--ui); font-size:.9rem; line-height:1.55; color:var(--ink-2); margin:8px 0 0; }

/* ==================== DOMAIN CHECKPOINT ==================== */
body[data-mode="serious"] .checkpoint-mode{ max-width:860px; }
body[data-mode="serious"] .cp-head{ text-align:center; margin-bottom:var(--s8); }
body[data-mode="serious"] .cp-flag{ color:var(--rust); display:inline-flex; }
body[data-mode="serious"] .cp-title{ font-family:var(--display); font-size:clamp(1.7rem,1.3rem+1.8vw,2.3rem); font-weight:560; margin:var(--s3) 0 var(--s3); }
body[data-mode="serious"] .cp-lede{ font-size:1.05rem; color:var(--ink-2); max-width:56ch; margin:0 auto; }

body[data-mode="serious"] .cp-gate{ text-align:center; border:1px dashed var(--rule); border-radius:var(--radius); padding:var(--s12) var(--s6); background:var(--card); }
body[data-mode="serious"] .cp-gate-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); }
body[data-mode="serious"] .cp-gate-label.ok{ color:var(--ok); }
body[data-mode="serious"] .cp-gate p{ font-family:var(--ui); font-size:1rem; color:var(--ink-2); max-width:48ch; margin:var(--s3) auto var(--s6); line-height:1.6; }
body[data-mode="serious"] .cp-gate-cta{ display:flex; justify-content:center; }
/* locked-exam blueprint preview */
body[data-mode="serious"] .cp-blueprint{ margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--rule); text-align:left; max-width:52ch; margin-left:auto; margin-right:auto; }
body[data-mode="serious"] .cp-bp-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px; }
body[data-mode="serious"] .cp-bp-meta{ font-family:var(--ui); font-size:.92rem; color:var(--ink-2); line-height:1.55; margin:0 0 var(--s4); max-width:none; }
body[data-mode="serious"] .cp-bp-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
body[data-mode="serious"] .cp-bp-item{ display:flex; align-items:flex-start; gap:9px; font-family:var(--ui); font-size:.9rem; color:var(--ink-2); line-height:1.45; }
body[data-mode="serious"] .cp-bp-item.read{ color:var(--ink); }
body[data-mode="serious"] .cp-bp-tick{ flex:0 0 16px; height:16px; display:grid; place-items:center; border-radius:99px; border:1.5px solid var(--rule); color:#fff; margin-top:2px; }
body[data-mode="serious"] .cp-bp-item.read .cp-bp-tick{ background:var(--ok); border-color:var(--ok); }

body[data-mode="serious"] .cp-quiz{ display:flex; flex-direction:column; gap:var(--s6); }
body[data-mode="serious"] .cpq{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow); }
body[data-mode="serious"] .cpq-head{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s3); }
body[data-mode="serious"] .cpq-num{ font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--accent); }
body[data-mode="serious"] .cpq-domain{ font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
body[data-mode="serious"] .cpq-exp{ margin-top:var(--s4); padding:var(--s4); border-radius:var(--radius-sm); background:var(--paper); border-left:3px solid var(--accent); }
body[data-mode="serious"] .cpq-exp-label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px; }
body[data-mode="serious"] .cpq-exp p{ font-family:var(--ui); font-size:.9rem; line-height:1.55; color:var(--ink-2); margin:0; }

body[data-mode="serious"] .cp-submit-row{ display:flex; justify-content:center; margin-top:var(--s8); }
body[data-mode="serious"] .cp-result{ margin-top:var(--s8); text-align:center; border-radius:var(--radius); padding:var(--s8) var(--s6); border:1px solid var(--rule); }
body[data-mode="serious"] .cp-result.ok{ background:var(--ok-tint); border-color:transparent; }
body[data-mode="serious"] .cp-result.err{ background:var(--err-tint); border-color:transparent; }
body[data-mode="serious"] .cpr-badge{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:3px 10px; border-radius:99px; }
body[data-mode="serious"] .cpr-badge.ok{ background:var(--ok); color:#fff; }
body[data-mode="serious"] .cpr-badge.err{ background:var(--err); color:#fff; }
body[data-mode="serious"] .cpr-score{ font-family:var(--display); font-size:1.5rem; font-weight:560; color:var(--ink); margin:var(--s4) 0 6px; }
body[data-mode="serious"] .cpr-note{ font-family:var(--ui); font-size:.95rem; color:var(--ink-2); max-width:48ch; margin:0 auto var(--s6); }
body[data-mode="serious"] .cpr-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ==============================================================
   ENRICHED CONCEPT CONTENT (optional schema fields)
   deepDive · worked example · inline demo · pitfall · quick-check
   All scoped to serious mode; absent fields render nothing.
   ============================================================== */
body[data-mode="serious"] .deep-dive{ margin:0 0 var(--s8); padding:var(--s6) var(--s6) var(--s2); border-top:1px solid var(--rule); }
body[data-mode="serious"] .dd-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:var(--s4); }

body[data-mode="serious"] .worked-example{ background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s6); margin:0 0 var(--s8); }
body[data-mode="serious"] .we-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:var(--s4); }
body[data-mode="serious"] .we-part{ margin-bottom:var(--s4); }
body[data-mode="serious"] .we-part:last-child{ margin-bottom:0; }
body[data-mode="serious"] .we-part-tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:4px; }
body[data-mode="serious"] .we-part p{ margin:0; font-size:1rem; line-height:1.65; color:var(--ink); }
body[data-mode="serious"] .we-walk{ padding-left:var(--s4); border-left:3px solid var(--rust); }

body[data-mode="serious"] .concept-demo{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:var(--s6); margin:0 0 var(--s8); }
body[data-mode="serious"] .cd-head{ display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s4); }
body[data-mode="serious"] .cd-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); padding:3px 8px; border-radius:99px; }
body[data-mode="serious"] .cd-title{ font-family:var(--display); font-size:1.1rem; font-weight:560; color:var(--ink); }
body[data-mode="serious"] .cd-steps{ margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:var(--s4); }
body[data-mode="serious"] .cd-step-instruction{ font-size:1rem; line-height:1.55; color:var(--ink); }
body[data-mode="serious"] .cd-step-detail{ margin:4px 0 0; font-family:var(--ui); font-size:.9rem; line-height:1.5; color:var(--ink-2); }
body[data-mode="serious"] .cd-cmd{ margin:8px 0 0; background:var(--ink); border-radius:var(--radius-sm); padding:10px 12px; overflow-x:auto; }
body[data-mode="serious"] .cd-cmd-label{ font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:4px; }
/* wrap long CLI commands so no flag is silently clipped (was white-space:pre) */
body[data-mode="serious"] .cd-cmd code{ font-family:var(--mono); font-size:.85rem; color:var(--paper); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }

/* inline "Try it hands-on in Labs →" deep-link from a concept to its lab */
body[data-mode="serious"] .lab-link{ display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--s8); padding:11px 16px; border:1px solid var(--accent); border-radius:99px; background:var(--accent-tint); color:var(--accent-strong); font-family:var(--ui); font-weight:600; font-size:.92rem; text-decoration:none; transition:background .15s var(--ease), transform .15s var(--ease); }
body[data-mode="serious"] .lab-link:hover{ background:var(--accent); color:#fff; transform:translateX(2px); }
body[data-mode="serious"] .lab-link .ll-ico{ font-size:1.05em; }
body[data-mode="serious"] [data-theme="dark"] .lab-link{ color:var(--accent); }
body[data-mode="serious"] .lab-item.lab-flash{ animation:labFlash 1.6s var(--ease); }
@keyframes labFlash{ 0%,100%{ box-shadow:none; } 15%,55%{ box-shadow:0 0 0 3px var(--accent-tint), 0 0 0 4px var(--accent); } }
body[data-mode="serious"] .cd-takeaway{ margin-top:var(--s4); padding:var(--s4); border-radius:var(--radius-sm); background:var(--accent-tint); }
body[data-mode="serious"] .cd-takeaway-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); display:block; margin-bottom:4px; }
body[data-mode="serious"] [data-theme="dark"] .cd-takeaway-label{ color:var(--accent); }
body[data-mode="serious"] .cd-takeaway p{ margin:0; font-family:var(--ui); font-size:.95rem; line-height:1.55; color:var(--accent-ink); }
body[data-mode="serious"] [data-theme="dark"] .cd-takeaway p{ color:var(--ink); }

/* code example (schema: concept.code[] = {lang, caption, src}) — a formatted,
   scrollable snippet of the exact code the reader must implement (e.g. the
   CCA agentic loop). Dark editor slab; horizontal scroll never overflows page. */
body[data-mode="serious"] .code-example{ margin:0 0 var(--s8); border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
body[data-mode="serious"] .code-example + .code-example{ margin-top:calc(var(--s8) * -0.5); }
/* S1: min-width:0 + flex-wrap so a long lang chip + caption can never push the
 * header past its box (was 365>356 on serious-concept-d3 mobile). */
body[data-mode="serious"] .ce-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-width:0; padding:9px var(--s4); background:var(--paper-2); border-bottom:1px solid var(--rule); }
body[data-mode="serious"] .ce-lang{ flex:0 0 auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--accent); padding:3px 9px; border-radius:99px; }
body[data-mode="serious"] .ce-caption{ flex:1 1 0; min-width:0; overflow-wrap:anywhere; font-family:var(--ui); font-size:.84rem; color:var(--ink-2); line-height:1.4; }
body[data-mode="serious"] .ce-body{ margin:0; padding:var(--s4) var(--s5); background:var(--ink); overflow-x:auto; }
body[data-mode="serious"] [data-theme="dark"] .ce-body{ background:#10151b; }
body[data-mode="serious"] .ce-body code{ font-family:var(--mono); font-size:.82rem; line-height:1.6; color:var(--paper); white-space:pre; display:block; tab-size:2; }

body[data-mode="serious"] .pitfall-callout{ background:var(--err-tint); border-left:3px solid var(--err); border-radius:var(--radius); padding:var(--s6); margin:0 0 var(--s8); }
body[data-mode="serious"] .pitfall-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--err); display:block; margin-bottom:8px; }
body[data-mode="serious"] .pitfall-callout p{ margin:0; font-family:var(--ui); font-size:.98rem; line-height:1.6; color:var(--ink); }

/* interstitial quick-check — reuses .mcq option styling, distinct frame */
body[data-mode="serious"] .concept-check{ background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--rust); border-radius:var(--radius); padding:clamp(18px,3vw,26px); box-shadow:var(--shadow); margin-top:var(--s6); }
body[data-mode="serious"] .cc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s3); }
body[data-mode="serious"] .cc-kicker{ font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--rust); }
body[data-mode="serious"] .cc-hint{ font-family:var(--mono); font-size:.66rem; color:var(--ink-3); }
body[data-mode="serious"] .cc-stem{ font-size:1.08rem; line-height:1.55; color:var(--ink); margin:0 0 var(--s4); }

/* per-domain FINAL EXAM — a slightly weightier checkpoint frame */
body[data-mode="serious"] .checkpoint.is-final .cp-flag{ color:var(--rust); }

/* ==============================================================
   UX-POLISH (definitive-guide pass, 2026-07-07) — serious mode
   S2 tiny-text floor · S3 contrast · S4 44px tap targets · S5/S6
   rhythm+measure. Scoped to body[data-mode="serious"]; overrides
   sit at EOF so they win the cascade without touching source rules.
   ============================================================== */

/* S2 — eyebrow/label FLOOR. All uppercase micro-labels were 9.3–10.9px
   (scout tinyText). Floor them to 11px mobile / 12px desktop and lean on
   weight+letter-spacing+color for hierarchy instead of sub-11px size. */
body[data-mode="serious"] .concept-tag,
body[data-mode="serious"] .callout-label,
body[data-mode="serious"] .dd-label,
body[data-mode="serious"] .we-label,
body[data-mode="serious"] .we-part-tag,
body[data-mode="serious"] .pitfall-label,
body[data-mode="serious"] .kf-label,
body[data-mode="serious"] .fc-label,
body[data-mode="serious"] .check-kicker,
body[data-mode="serious"] .cc-kicker,
body[data-mode="serious"] .cc-hint,
body[data-mode="serious"] .mcq-kicker,
body[data-mode="serious"] .mcq-hint,
body[data-mode="serious"] .cp-gate-label,
body[data-mode="serious"] .cp-bp-label,
body[data-mode="serious"] .cd-label,
body[data-mode="serious"] .cd-cmd-label,
body[data-mode="serious"] .cd-takeaway-label,
body[data-mode="serious"] .ce-lang,
body[data-mode="serious"] .cv-reveal-meta,
body[data-mode="serious"] .hero-index-label,
body[data-mode="serious"] .spine-dot,
body[data-mode="serious"] .status-pill,
body[data-mode="serious"] .cert-beta,
body[data-mode="serious"] .fzh-txt,
body[data-mode="serious"] .ls-step-label,
body[data-mode="serious"] .ls-domainmark,
body[data-mode="serious"] .hi-code{
  /* S2 (2026-07-07 postfix): raised 11px -> 12px so NO structural wayfinding
     label ('Scenario', 'Walkthrough', 'Common trap', 'Going deeper', lang chips)
     sits below 12px on mobile — the gr3 review flagged 10-12 sub-12px offenders,
     mostly these letter-spaced uppercase eyebrows, hardest to read on 390px. */
  font-size:12px; letter-spacing:.06em;
}
@media (min-width:641px){
  body[data-mode="serious"] .concept-tag,
  body[data-mode="serious"] .callout-label,
  body[data-mode="serious"] .dd-label,
  body[data-mode="serious"] .we-label,
  body[data-mode="serious"] .we-part-tag,
  body[data-mode="serious"] .pitfall-label,
  body[data-mode="serious"] .kf-label,
  body[data-mode="serious"] .fc-label,
  body[data-mode="serious"] .check-kicker,
  body[data-mode="serious"] .cc-kicker,
  body[data-mode="serious"] .cc-hint,
  body[data-mode="serious"] .mcq-kicker,
  body[data-mode="serious"] .mcq-hint,
  body[data-mode="serious"] .cp-gate-label,
  body[data-mode="serious"] .cp-bp-label,
  body[data-mode="serious"] .cd-label,
  body[data-mode="serious"] .cd-cmd-label,
  body[data-mode="serious"] .cd-takeaway-label,
  body[data-mode="serious"] .ce-lang,
  body[data-mode="serious"] .cv-reveal-meta,
  body[data-mode="serious"] .hero-index-label,
  body[data-mode="serious"] .status-pill,
  body[data-mode="serious"] .cert-beta,
  body[data-mode="serious"] .ls-step-label,
  body[data-mode="serious"] .ls-domainmark{
    font-size:12px;
  }
}
/* higher-specificity floors for labels shadowed by descendant selectors or
   JS-injected <style> (code-view.js) that would otherwise win the cascade. */
body[data-mode="serious"] .exam-callout .callout-label{ font-size:12px; }
body[data-mode="serious"] .cv-wrap .cv-reveal-meta,
body[data-mode="serious"] .code-view .cv-reveal-meta{ font-size:12px; }
/* keep the spine-dot numeral crisp but never sub-12 */
body[data-mode="serious"] .spine-dot{ font-size:12px; }
body[data-mode="serious"] .spine-node.read .spine-dot{ font-size:0; }
/* mode-switch segment labels + brand mark + figure-zoom hint were 10-11.5px */
body[data-mode="serious"] .ms-txt,
body[data-mode="serious"] .topbar-brand .mark,
body[data-mode="serious"] .fzh-txt{ font-size:12px; }

/* S3 — contrast: bump the two remaining faint UI texts to a token that clears
   4.5:1 on paper (ink-2 = 6.96:1). bc-current already reads on paper but make
   it unambiguous ink. */
body[data-mode="serious"] .bc-link{ color:var(--ink-2); }
body[data-mode="serious"] .bc-current{ color:var(--ink); font-weight:600; }
body[data-mode="serious"] .ls-pct{ color:var(--ink-2); }
body[data-mode="serious"] .fig-zoom-hint{ color:var(--ink-2); }

/* S4 — 44px tap targets. Expand hit area without changing the visible glyph,
   using padding + an invisible ::before expander where padding would disturb
   layout. Breadcrumb links, back-ico, footer arrows, lab-link icons. */
body[data-mode="serious"] .bc-link{
  min-height:44px; display:inline-flex; align-items:center; padding:0 6px; margin:0 -2px;
}
body[data-mode="serious"] .ls-breadcrumb{ align-items:center; }
/* footer prev/next arrows already live inside .btn (44px). The bare arrow spans
   flagged (.arrow/.arrow-l 13x20) are decorative glyphs INSIDE a .btn — the btn
   is the real target; ensure btns hit 44px. */
body[data-mode="serious"] .btn{ min-height:44px; }
/* lab-link is already 44px via padding; ensure its icon row is centered */
body[data-mode="serious"] .lab-link{ min-height:44px; }
/* figure-zoom reveal control: give the reveal chip a real 44px tap zone */
body[data-mode="serious"] .cv-reveal{
  min-height:44px; display:inline-flex; align-items:center; flex-wrap:wrap; row-gap:2px;
}
body[data-mode="serious"] .cv-reveal-txt{ white-space:nowrap; }
/* crumb-back icon: the whole .crumb-back is already 44px on mobile; make the
   inner ico non-shrinking so the row keeps its height */
body[data-mode="serious"] .crumb-back-ico{ display:inline-flex; align-items:center; }

/* S5/S6 — rhythm + measure. Cap concept prose measure and keep code scrolling
   inside its own slab (never the page). */
body[data-mode="serious"] .code-example,
body[data-mode="serious"] .ce-body{ max-width:100%; }
body[data-mode="serious"] .ce-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ==============================================================
   PRINT — cheat sheets as a clean document
   ============================================================== */
@media print{
  body[data-mode="serious"] .topbar, body[data-mode="serious"] .tool-head .cert-switch, body[data-mode="serious"] .tool-actions, body[data-mode="serious"] .toast{ display:none !important; }
  body[data-mode="serious"]{ background:#fff; background-image:none; color:#000; }
  body[data-mode="serious"] .view{ padding:0; max-width:none; }
  body[data-mode="serious"] .tool-head{ margin-bottom:16px; }
  body[data-mode="serious"] .cheat-doc{ border:0; box-shadow:none; padding:0; }
  body[data-mode="serious"] .cheat-section{ break-inside:avoid; }
  body[data-mode="serious"] .cheat-table th{ color:#000; }
  body[data-mode="serious"] .num-tile, body[data-mode="serious"] .cheat-card, body[data-mode="serious"] .dec-row{ break-inside:avoid; }
  body[data-mode="serious"] a{ color:#000; }
}

/* ==========================================================================
   GAMIFY — badges, trophy case, unlock toast & share overlay
   Appended block (owned by the Gamify workstream). Namespaced .gc-ach / .gc-toast
   / .gc-share so it never collides with layout rules. Serious-scoped views live
   under body[data-mode="serious"]; the toast + share overlay are shared shells
   whose skin is themed per body[data-mode].
   ========================================================================== */

/* ---------- SERIOUS trophy case (#/achievements) ------------------------- */
body[data-mode="serious"] .gc-ach-head{ margin-bottom:var(--s6, 24px); }
body[data-mode="serious"] .gc-ach-legend{
  margin:14px 0 0; padding:10px 14px; max-width:620px;
  font-size:.82rem; line-height:1.5; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:10px;
}
body[data-mode="serious"] .gc-ach-legend strong{ color:var(--ink); }
body[data-mode="serious"] .gc-ach-progress{
  margin-top:14px; height:8px; border-radius:999px; background:var(--paper-2);
  overflow:hidden; max-width:420px;
}
body[data-mode="serious"] .gc-ach-progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), #f2c14e);
  transition:width .5s var(--ease);
}
body[data-mode="serious"] .gc-ach-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px; margin-top:8px;
}
body[data-mode="serious"] .gc-ach-card{
  position:relative; display:flex; gap:14px; align-items:center;
  padding:16px; border:1px solid var(--line, rgba(31,27,22,.1));
  border-radius:12px; background:var(--card);
  box-shadow:var(--shadow-2); transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
body[data-mode="serious"] .gc-ach-card.is-got:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(31,27,22,.14); }
body[data-mode="serious"] .gc-ach-card.is-locked{ opacity:.82; }
body[data-mode="serious"] .gc-ach-card.tier-gold{ border-color:rgba(242,193,78,.5); }
body[data-mode="serious"] .gc-ach-card.tier-platinum{ border-color:rgba(150,205,255,.55); }
body[data-mode="serious"] .gc-ach-medal{ position:relative; flex:0 0 auto; width:64px; height:64px; border-radius:50%; }
body[data-mode="serious"] .gc-ach-img{ width:64px; height:64px; object-fit:contain; display:block; border-radius:50%; }
/* Locked medals keep a DESATURATED-BUT-HUED tier ring so gold/platinum still
   beckon above bronze (trophy-case rhythm), rather than reading flat grey. */
/* Locked medals: lightly desaturate but stay BRIGHT enough that each badge's own
   glyph/silhouette stays readable (so the case reads as aspirational, not leaden).
   Was grayscale .82 / brightness .74 — too dark, made every coin near-identical. */
body[data-mode="serious"] .gc-ach-card.is-locked .gc-ach-img{ filter:grayscale(.55) brightness(.95) contrast(1.02); }
body[data-mode="serious"] .gc-ach-card.is-locked .gc-ach-medal{
  box-shadow:0 0 0 2px rgba(150,150,150,.35);
}
body[data-mode="serious"] .gc-ach-card.is-locked.tier-bronze  .gc-ach-medal{ box-shadow:0 0 0 2px rgba(184,115,51,.5); }
body[data-mode="serious"] .gc-ach-card.is-locked.tier-silver  .gc-ach-medal{ box-shadow:0 0 0 2px rgba(170,183,199,.6); }
body[data-mode="serious"] .gc-ach-card.is-locked.tier-gold    .gc-ach-medal{ box-shadow:0 0 0 2px rgba(242,193,78,.62), 0 0 10px rgba(242,193,78,.28); }
body[data-mode="serious"] .gc-ach-card.is-locked.tier-platinum .gc-ach-medal{ box-shadow:0 0 0 2px rgba(150,205,255,.7), 0 0 12px rgba(150,205,255,.34); }
body[data-mode="serious"] .gc-ach-lock{
  position:absolute; right:-4px; bottom:-4px; font-size:18px;
  background:var(--card); border-radius:50%; padding:1px 3px; line-height:1;
}
body[data-mode="serious"] .gc-ach-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
/* Tier label as a small COLORED CHIP so tier (Bronze/Silver/Gold/Platinum) is
   unmistakable at a glance and each label clears contrast on the light card
   (was a low-contrast tan --ink-3 word). */
body[data-mode="serious"] .gc-ach-tier{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:2px 7px; border-radius:999px; line-height:1.3;
  color:#4a3a12; background:#e7d6a8; border:1px solid #c9b06a;   /* bronze default */
}
body[data-mode="serious"] .gc-ach-card.tier-bronze  .gc-ach-tier{ color:#5a3a1c; background:#ead9c2; border-color:#c79b6e; }
body[data-mode="serious"] .gc-ach-card.tier-silver  .gc-ach-tier{ color:#3f4753; background:#e2e6ec; border-color:#aab4c2; }
body[data-mode="serious"] .gc-ach-card.tier-gold    .gc-ach-tier{ color:#6b4e0e; background:#f6e6b4; border-color:#d8b34e; }
body[data-mode="serious"] .gc-ach-card.tier-platinum .gc-ach-tier{ color:#1f3f57; background:#d6ebfb; border-color:#8ec2ea; }
body[data-mode="serious"] .gc-ach-name{ font-family:var(--display); font-weight:560; font-size:1.02rem; color:var(--ink); }
body[data-mode="serious"] .gc-ach-desc{ font-size:.82rem; color:var(--ink-2); line-height:1.4; }
body[data-mode="serious"] .gc-ach-share{
  position:absolute; top:12px; right:12px; font-family:var(--ui); font-size:.72rem;
  padding:4px 10px; min-height:32px; border-radius:999px; cursor:pointer;
  border:1px solid var(--accent); color:var(--accent); background:transparent;
  transition:background .15s var(--ease), color .15s var(--ease);
}
body[data-mode="serious"] .gc-ach-share:hover{ background:var(--accent); color:#fff; }
body[data-mode="serious"] .gc-ach-share:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- SHARED unlock toast (skinned per mode) ----------------------- */
.gc-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
  z-index:9000; display:flex; align-items:center; gap:12px;
  padding:12px 14px; min-width:280px; max-width:min(94vw, 420px);
  opacity:0; pointer-events:auto; transition:opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
}
.gc-toast.is-in{ opacity:1; transform:translate(-50%, 0); }
.gc-toast.is-out{ opacity:0; transform:translate(-50%, 20px); }
.gc-toast--rm{ transition:opacity .2s linear; transform:translate(-50%, 0); }
.gc-toast-art{ flex:0 0 auto; width:46px; height:46px; }
.gc-toast-badge{ width:46px; height:46px; object-fit:contain; display:block; border-radius:50%; }
.gc-toast-body{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.gc-toast-kicker{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.gc-toast-name{ font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-toast-xp{ font-size:.72rem; font-weight:600; color:#f2c14e; display:flex; align-items:center; gap:6px; }
.gc-toast-tier{ font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:1px 6px; border-radius:999px; color:#1a1206; }
.gc-toast-tier--bronze{ background:linear-gradient(180deg,#d08a4e,#a5652f); }
.gc-toast-tier--silver{ background:linear-gradient(180deg,#dfe6ef,#a3adbd); }
.gc-toast-tier--gold{ background:linear-gradient(180deg,#f2c14e,#c8912b); }
.gc-toast-tier--platinum{ background:linear-gradient(180deg,#d6efff,#8fbcdf); }
.gc-toast-share{
  flex:0 0 auto; font-size:.74rem; padding:5px 12px; min-height:32px; border-radius:999px;
  cursor:pointer; border:0; font-weight:600;
}
.gc-toast-close{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  font-size:.8rem; line-height:1; background:transparent; opacity:.7;
}
.gc-toast-close:hover{ opacity:1; }
body[data-mode="serious"] .gc-toast{
  background:var(--card); color:var(--ink);
  border:1px solid var(--line, rgba(31,27,22,.12)); border-radius:14px;
  box-shadow:0 12px 40px rgba(31,27,22,.22);
}
body[data-mode="serious"] .gc-toast-share{ background:var(--accent); color:#fff; }
body[data-mode="serious"] .gc-toast-share:hover{ background:var(--accent-strong); }
body[data-mode="serious"] .gc-toast-close{ color:var(--ink-2); }
.gc-toast-share:focus-visible, .gc-toast-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- SHARED share overlay (skinned per mode) ---------------------- */
.gc-share-overlay{
  position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,20,30,.62); backdrop-filter:blur(3px);
}
.gc-share-panel{
  position:relative; width:min(560px, 100%); max-height:92vh; overflow:auto;
  padding:26px; border-radius:16px;
}
.gc-share-pop{ animation:gcSharePop .28s var(--ease, ease); }
@keyframes gcSharePop{ from{ transform:scale(.96); opacity:0; } to{ transform:scale(1); opacity:1; } }
.gc-share-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:0; cursor:pointer; font-size:1rem; line-height:1;
}
.gc-share-title{ margin:0 0 4px; font-size:1.3rem; }
.gc-share-sub{ margin:0 0 16px; font-size:.85rem; opacity:.8; }
.gc-share-preview{ margin-bottom:16px; border-radius:12px; overflow:hidden; }
.gc-share-canvas{ width:100%; height:auto; display:block; border-radius:12px; }
.gc-share-caplabel{ display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-bottom:6px; }
.gc-share-caption{
  width:100%; box-sizing:border-box; resize:vertical; font:inherit; font-size:.84rem;
  padding:10px 12px; border-radius:10px; margin-bottom:16px; line-height:1.45;
}
.gc-share-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.gc-share-btn{
  flex:1 1 auto; min-height:44px; padding:10px 16px; border-radius:10px; cursor:pointer;
  font:inherit; font-size:.85rem; font-weight:600; text-align:center; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; border:1px solid transparent;
}
.gc-share-btn--li{ background:#0a66c2; color:#fff; }
.gc-share-btn--li:hover{ background:#08508f; }
.gc-share-btn--li .gc-li-ico{ flex:0 0 auto; display:block; border-radius:3px; }
.gc-share-caption{ min-height:132px; }
.gc-share-note{ margin:14px 0 0; font-size:.72rem; opacity:.65; line-height:1.4; }
.gc-share-minitoast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); z-index:9600;
  background:#1f1b16; color:#fff; padding:10px 18px; border-radius:8px; font-size:.85rem;
  opacity:0; transition:opacity .2s, transform .2s;
}
.gc-share-minitoast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
body[data-mode="serious"] .gc-share-panel{ background:var(--card); color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.4); }
body[data-mode="serious"] .gc-share-close{ background:var(--paper-2); color:var(--ink); }
body[data-mode="serious"] .gc-share-caption{ background:var(--paper-2); color:var(--ink); border:1px solid var(--line, rgba(31,27,22,.12)); }
body[data-mode="serious"] .gc-share-btn{ background:var(--paper-2); color:var(--ink); border-color:var(--line, rgba(31,27,22,.12)); }
body[data-mode="serious"] .gc-share-btn:hover{ background:var(--paper); }
body[data-mode="serious"] .gc-share-btn--li{ background:#0a66c2; color:#fff; border-color:#0a66c2; }
.gc-share-btn:focus-visible, .gc-share-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .gc-share-pop{ animation:none; }
  .gc-toast{ transition:opacity .2s linear; }
}
/* END GAMIFY */