/* ==========================================================================
   Vantedge Recruiter Launchpad · stylesheet
   0. Fonts   1. Design tokens (every colour lives here)   2. Foundation
   3. Layout   4. Components   5. Learning templates   6. Interactive work
   7. Instructional scenes   8. Motion   9. Responsive   10. Day themes
   ========================================================================== */

/* ── 0. Fonts: locally bundled @fontsource files (Latin subset), copied into dist by the build ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/manrope-latin-800-normal.woff2") format("woff2"); }

/* ── 1. Design tokens ──────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* Core colours */
  --navy-950: #081426;
  --navy-900: #10233f;
  --navy-800: #17365d;
  --ink: #17243a;
  --muted: #5b677a;
  --canvas: #f7f8fb;
  --surface: #ffffff;
  --cream: #fffaf0;
  --teal: #138a84;
  --teal-dark: #08635f;
  --violet: #7956d8;
  --amber: #d89116;
  --cyan: #1787ad;
  --blue: #3e68c5;
  --coral: #cf6752;
  --green: #3f875c;
  --gold: #b78816;
  --success: #18794e;
  --warning: #9a6700;
  --danger: #b42318;
  --focus: #2457d6;
  --border: rgba(16, 35, 63, 0.12);
  --white: #ffffff;
  /* Derived neutrals and states */
  --fill: #eef1f6;
  --fill-2: #e4e9f1;
  --border-soft: rgba(16, 35, 63, 0.07);
  --border-strong: rgba(16, 35, 63, 0.24);
  --success-soft: #e4f3eb;
  --success-ink: #0f4f33;
  --warning-soft: #fdf3df;
  --warning-ink: #5a3c00;
  --warning-line: #e9c98b;
  --danger-soft: #fdecea;
  --mark: #ffe7a8;
  --tag-claim-bg: #ebe5fb;
  --tag-claim-ink: #4b37a8;
  --scrim: rgba(8, 20, 38, 0.55);
  --topbar-bg: rgba(8, 20, 38, 0.96);
  /* On-dark text and lines (navy panels) */
  --on-dark: #e8edf6;
  --on-dark-muted: #b9c4d8;
  --on-dark-accent: #8feadc;
  --on-dark-fill: rgba(255, 255, 255, 0.07);
  --on-dark-fill-strong: rgba(255, 255, 255, 0.13);
  --on-dark-line: rgba(255, 255, 255, 0.14);
  --on-dark-line-strong: rgba(255, 255, 255, 0.32);
  --on-dark-good: #8fe9c4;
  --on-dark-good-line: #5fd3a8;
  --on-dark-warn: #f4c67e;
  --on-dark-bad: #f2aeab;
  --on-dark-bad-line: #e68c88;
  --scene-dot: rgba(16, 35, 63, 0.07);
  --scene-tile: #18284f;
  --scene-tile-line: #2a3b66;
  --scene-tile-live: #4a4434;
  /* Day accents: accent for lines and fills, accent-ink for text (AA on white), soft for tints */
  --d1-accent: #138a84; --d1-ink: #08635f; --d1-soft: #e1f3f0;
  --d2-accent: #7956d8; --d2-ink: #5b3fc0; --d2-soft: #efeafc;
  --d3-accent: #d89116; --d3-ink: #7f540b; --d3-soft: #fcf0d8;
  --d4-accent: #1787ad; --d4-ink: #106584; --d4-soft: #e1f2f8;
  --d5-accent: #3e68c5; --d5-ink: #2f55a8; --d5-soft: #e7eefb;
  --d6-accent: #cf6752; --d6-ink: #a3402c; --d6-soft: #fbe7e2;
  --d7-accent: #3f875c; --d7-ink: #2b6845; --d7-soft: #e4f2e9;
  --d8-accent: #b78816; --d8-ink: #775709; --d8-soft: #f8eed3;
  /* Day canvas backgrounds: a quiet light page with a faint day tint at the very top */
  --page-bg: #f5f7fa;
  --day-0-bg: linear-gradient(180deg, var(--fill) 0px, var(--page-bg) 260px);
  --day-1-bg: linear-gradient(180deg, var(--d1-soft) 0px, var(--page-bg) 260px);
  --day-2-bg: linear-gradient(180deg, var(--d2-soft) 0px, var(--page-bg) 260px);
  --day-3-bg: linear-gradient(180deg, var(--d3-soft) 0px, var(--page-bg) 260px);
  --day-4-bg: linear-gradient(180deg, var(--d4-soft) 0px, var(--page-bg) 260px);
  --day-5-bg: linear-gradient(180deg, var(--d5-soft) 0px, var(--page-bg) 260px);
  --day-6-bg: linear-gradient(180deg, var(--d6-soft) 0px, var(--page-bg) 260px);
  --day-7-bg: linear-gradient(180deg, var(--d7-soft) 0px, var(--page-bg) 260px);
  --day-8-bg: linear-gradient(180deg, var(--d8-soft) 0px, var(--page-bg) 260px);
  /* Hero shapes (two blurred gradients) */
  --hero-shape-a: radial-gradient(circle, rgba(23, 135, 173, 0.9), rgba(23, 135, 173, 0) 70%);
  --hero-shape-b: radial-gradient(circle, rgba(19, 138, 132, 0.9), rgba(19, 138, 132, 0) 70%);
  /* Default accent */
  --accent: var(--d1-accent); --accent-ink: var(--d1-ink); --accent-soft: var(--d1-soft);
  /* Glass, cards and shadows */
  --glass-bg: var(--surface);
  --glass-border: 1px solid rgba(255, 255, 255, 0.82);
  --glass-shadow: none;
  --card-radius: 18px;
  --card-pad: 24px;
  --card-shadow: none;
  --card-shadow-hover: none;
  --sh1: none;
  --sh2: none;
  --sh3: 0 28px 70px -26px rgba(16, 35, 63, 0.45);
  --paper-shadow: 0 1px 0 rgba(16, 35, 63, 0.07), 0 8px 18px -12px rgba(16, 35, 63, 0.25);
  /* Typography */
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --title-desktop: 44px; --title-tablet: 34px; --title-mobile: 28px;
  --section-desktop: 30px; --section-tablet: 26px; --section-mobile: 23px;
  --card-title: 19px; --body: 17px; --supporting: 14.5px;
  --title: var(--title-desktop); --section: var(--section-desktop);
  --reading: 72ch;
  /* Spacing, radii, layout */
  --section-gap: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 24px; --pill: 999px;
  --wide: 1240px; --column: 760px;
  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 180ms; --t-mid: 320ms; --t-slow: 620ms;
  /* Legacy aliases used by scene and component rules */
  --navy: var(--navy-900); --ivory: var(--fill); --ivory-2: var(--fill-2); --line: var(--border); --line-2: var(--border-soft);
  --teal-ink: var(--teal-dark); --good: var(--success); --good-soft: var(--success-soft); --review: var(--warning); --review-soft: var(--warning-soft); --bad: var(--danger);
}

/* ── 2. Foundation ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; font: 400 var(--body)/1.6 var(--font); color: var(--ink); background: var(--day-0-bg) no-repeat, var(--page-bg); }
html[data-day="d1"] body { background: var(--day-1-bg) no-repeat, var(--page-bg); }
html[data-day="d2"] body { background: var(--day-2-bg) no-repeat, var(--page-bg); }
html[data-day="d3"] body { background: var(--day-3-bg) no-repeat, var(--page-bg); }
html[data-day="d4"] body { background: var(--day-4-bg) no-repeat, var(--page-bg); }
html[data-day="d5"] body { background: var(--day-5-bg) no-repeat, var(--page-bg); }
html[data-day="d6"] body { background: var(--day-6-bg) no-repeat, var(--page-bg); }
html[data-day="d7"] body { background: var(--day-7-bg) no-repeat, var(--page-bg); }
html[data-day="d8"] body { background: var(--day-8-bg) no-repeat, var(--page-bg); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--navy-900); line-height: 1.2; margin: 0 0 var(--s3); letter-spacing: -.01em; }
h1 { font-size: var(--title); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
h2 { font-size: var(--section); font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: var(--card-title); font-weight: 700; }
h5 { font-size: var(--supporting); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-top: var(--s5); }
h6 { font-size: var(--body); font-weight: 700; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--fill); padding: 1px 6px; border-radius: var(--r1); }
mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 3px; }
ul, ol { padding-left: 1.25em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r1); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--supporting); }
.label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--s1); }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--s2); }
.eyebrow.on-dark { color: var(--on-dark-accent); }
.lead { font-size: 18px; color: var(--ink); max-width: var(--reading); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon.filled { fill: currentColor; }
.icon.ext { display: inline-block; width: .85em; height: .85em; margin-left: 4px; vertical-align: -1px; }
.skip-link { position: absolute; left: var(--s4); top: -60px; z-index: 100; background: var(--navy-900); color: var(--white); padding: var(--s2) var(--s4); border-radius: var(--r2); }
.skip-link:focus { top: var(--s2); }
.noscript { max-width: 640px; margin: 64px auto; padding: var(--s5); background: var(--surface); }
.glass { background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 24px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface); } }

/* ── 3. Layout ─────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--topbar-bg); border-bottom: 1px solid var(--on-dark-line); }
.topbar-inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s5); min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--white); text-decoration: none; min-height: 44px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, var(--teal), var(--cyan)); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-text { display: grid; line-height: 1.15; white-space: nowrap; }
.brand-text strong { font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.brand-text small { color: var(--on-dark-muted); font-size: 12.5px; }
.topnav { display: flex; gap: 2px; }
.topnav a, .topnav button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r2); background: transparent; color: var(--on-dark); font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer; box-shadow: none; transition: background var(--t-fast), color var(--t-fast); }
.topnav a:hover, .topnav button:hover:not(:disabled) { background: var(--on-dark-fill-strong); color: var(--white); transform: none; box-shadow: none; }
.topnav a[aria-current="page"] { background: var(--on-dark-fill-strong); color: var(--white); box-shadow: inset 0 -3px 0 var(--on-dark-accent); }
.topnav .icon { width: 17px; height: 17px; }
#app { outline: none; }
.page, .day { max-width: var(--wide); margin: 0 auto; padding: var(--s6) var(--s5) var(--s9); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6); margin: var(--s8) 0 var(--s5); }
.section-head h2 { margin: 0; }
.section-head > p { max-width: 46ch; margin: 0; }
.page-head { max-width: 860px; margin-bottom: var(--s6); }
.page-head h1 { margin-bottom: var(--s3); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin-top: var(--s5); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s4) 0; }

/* ── 4. Components ─────────────────────────────────────────────────────── */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: var(--r2); background: var(--surface); color: var(--navy-900); font: 600 15px/1.25 var(--font); text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
button:hover:not(:disabled), .button:hover { transform: translateY(-1px); box-shadow: var(--sh2); border-color: var(--navy-800); }
button:active:not(:disabled), .button:active { transform: translateY(0); box-shadow: var(--sh1); }
button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.primary, button.primary, .button.primary { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.primary:hover:not(:disabled), .button.primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
button.secondary { background: transparent; }
.text-btn { min-height: 44px; padding: 6px 4px; border: 0; background: none; box-shadow: none; color: var(--accent-ink); }
.text-btn:hover:not(:disabled) { transform: none; box-shadow: none; text-decoration: underline; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px; }
.upload { position: relative; overflow: hidden; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
label { font-weight: 600; font-size: var(--supporting); color: var(--navy-900); }
input, select, textarea { display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r2); background: var(--surface); color: var(--ink); font: 400 var(--body)/1.4 var(--font); transition: border-color var(--t-fast); }
textarea { resize: vertical; line-height: 1.55; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-grid .wide { grid-column: 1 / -1; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--fill); border-radius: var(--r2); margin: var(--s3) 0; }
.segmented button { min-height: 44px; box-shadow: none; border-color: transparent; background: transparent; font-size: 14px; padding: 8px 14px; }
.segmented button[aria-checked="true"], .segmented button[aria-pressed="true"] { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--sh1); color: var(--accent-ink); }
.segmented button[aria-checked="true"]::before { content: "✓"; font-weight: 800; margin-right: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-btn { min-height: 44px; padding: 6px 14px; border-radius: var(--pill); font-size: 14px; }
.chip-btn.is-right { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.chip-btn.is-wrong { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.chip-btn[aria-checked="true"]::before { content: "✓ "; font-weight: 800; }
.choice-set { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.choice-set legend { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--navy-900); margin-bottom: var(--s3); padding: 0; line-height: 1.4; }
.choices { display: grid; gap: var(--s2); }
.choice { justify-content: flex-start; text-align: left; font-weight: 500; line-height: 1.45; padding: 11px 14px; box-shadow: none; width: 100%; }
.choice:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--sh1); }
.choice[aria-pressed="true"] { border-width: 2px; padding: 10px 13px; }
.choice.is-picked { border-color: var(--navy-900); background: var(--fill); }
.choice.is-right { border-color: var(--success); background: var(--success-soft); }
.choice.is-wrong { border-color: var(--warning); background: var(--warning-soft); }
.choice:disabled { opacity: 1; cursor: default; }
.choice-key { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); font: 700 12px/1 var(--font); color: var(--muted); }
.choice.is-right .choice-key { background: var(--success); border-color: var(--success); color: var(--white); }
.choice.is-wrong .choice-key { background: var(--warning); border-color: var(--warning); color: var(--white); }
.choice-mark { margin-left: auto; display: inline-flex; color: currentColor; }
.feedback { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s3) 0; padding: 12px 14px; border-radius: var(--r2); font-size: 15px; line-height: 1.55; border-left: 4px solid; }
.feedback .icon { margin-top: 3px; }
.feedback.good { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.feedback.review { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.callout { display: flex; gap: var(--s2); align-items: flex-start; padding: 12px 14px; border-radius: var(--r2); max-width: var(--reading); }
.callout .icon { margin-top: 4px; }
.callout.warn { background: var(--warning-soft); color: var(--warning-ink); }
.callout.tip { background: var(--accent-soft); color: var(--navy-900); }
details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-weight: 650; color: var(--navy-900); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease); flex: none; }
details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.table-wrap { max-width: 100%; overflow-x: auto; margin: var(--s5) 0; border-radius: var(--r3); border: 1px solid var(--border); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
thead th { background: var(--navy-900); color: var(--white); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
tbody th { color: var(--navy-900); font-weight: 650; }
tbody tr:last-child > * { border-bottom: 0; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fill); }
.mini-bar { display: inline-block; width: 120px; height: 6px; border-radius: var(--pill); background: var(--fill-2); overflow: hidden; vertical-align: middle; }
.mini-bar i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--accent); border-radius: inherit; transition: width 500ms var(--ease); }
.bar { height: 8px; border-radius: var(--pill); background: var(--fill-2); overflow: hidden; }
.bar span { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: linear-gradient(90deg, var(--accent), var(--teal)); border-radius: inherit; transition: width 500ms var(--ease); }
.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--pill); font-size: 13px; font-weight: 650; background: var(--fill); color: var(--muted); }
.status-pill.ok { background: var(--success-soft); color: var(--success); }
.status-pill.warn { background: var(--warning-soft); color: var(--warning); }
.empty { padding: var(--s6); text-align: center; background: var(--surface); border-radius: var(--card-radius); border: 1px dashed var(--border-strong); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: var(--r2); background: var(--navy-900); color: var(--white); box-shadow: var(--sh3); font-weight: 600; }
.dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); border: 0; border-radius: var(--r4); padding: var(--s6); color: var(--ink); background: var(--surface); box-shadow: var(--sh3); }
.dialog::backdrop { background: var(--scrim); }
.dialog h2 { font-size: 24px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.search-dialog { width: min(720px, calc(100vw - 32px)); }
.search-results { margin-top: var(--s4); max-height: 55vh; overflow-y: auto; }
.search-results h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: var(--s4) 0 var(--s2); }
.search-results ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.search-results a { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border-radius: var(--r2); text-decoration: none; color: var(--navy-900); border: 1px solid transparent; }
.search-results a:hover { background: var(--fill); border-color: var(--border); }
.search-results small { color: var(--muted); font-size: 13px; }
.term { display: inline; min-height: 0; padding: 0 1px; border: 0; border-bottom: 1.5px dotted var(--accent-ink); border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: help; }
.term:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--accent-soft); }
.term[aria-expanded="true"] { background: var(--accent-soft); }
.term-def { display: inline; margin: 0 2px; padding: 1px 6px; border-radius: var(--r1); background: var(--accent-soft); color: var(--navy-900); font-size: .92em; }
.term-def[hidden] { display: none; }
.term-def::before { content: "= "; font-weight: 700; color: var(--accent-ink); }
.vee { display: inline-block; flex: none; }
.vee-body { display: block; }
.vee-body img { display: block; }
.vee img { width: 100%; height: auto; }
.vee-dashboard { width: clamp(112px, 15vw, 168px); }
.vee-briefing { width: clamp(140px, 18vw, 210px); align-self: end; }
.vee-moment { width: 92px; }
.vee-hint { width: 72px; }

/* ── 5. Learning templates ─────────────────────────────────────────────── */
/* Dashboard */
.hero { position: relative; overflow: hidden; border-radius: var(--r4); background: var(--navy-950); color: var(--on-dark); box-shadow: var(--sh3); isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; filter: blur(60px); opacity: .32; pointer-events: none; }
.hero::before { right: -120px; top: -160px; background: var(--hero-shape-a); }
.hero::after { left: -140px; bottom: -200px; background: var(--hero-shape-b); }
.hero h1, .hero h2 { color: var(--white); }
.hero-dashboard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr); gap: var(--s6); padding: var(--s8) var(--s7); }
.hero h1 em { font-style: normal; color: var(--on-dark-accent); }
.hero-lead { font-size: 18px; color: var(--on-dark-muted); max-width: 56ch; }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); list-style: none; padding: 0; margin: var(--s5) 0 0; color: var(--on-dark); font-size: 15px; }
.hero-facts li { display: flex; align-items: center; gap: var(--s2); }
.hero-facts .icon { color: var(--on-dark-accent); }
.continue { align-self: center; display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: end; padding: var(--s5); border-radius: var(--card-radius); background: var(--on-dark-fill); border: 1px solid var(--on-dark-line); }
.continue h2 { font-size: 22px; margin-bottom: var(--s2); }
.continue .eyebrow { color: var(--on-dark-accent); }
.continue-next, .continue-last { color: var(--on-dark-muted); font-size: 15px; }
.continue-next strong { color: var(--white); }
.continue-last a { color: var(--on-dark-accent); }
.continue .primary { width: 100%; background: var(--white); border-color: var(--white); color: var(--navy-900); }
.continue .primary:hover:not(:disabled) { background: var(--fill); }
.time-plan { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); align-items: center; margin-top: var(--s6); padding: var(--s5) var(--s6); }
.time-plan h2 { font-size: 24px; }
.time-plan p:last-child { margin: 0; }
.time-totals, .brief-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.time-totals div, .brief-time div { padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--surface); border: 1px solid var(--border); }
.time-totals dt, .brief-time dt { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.time-totals dd, .brief-time dd { margin: 2px 0 0; font: 800 22px/1.2 var(--font-display); color: var(--navy-900); }
.progress-path { --done: 0; position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.progress-path::before, .progress-path::after { content: ""; position: absolute; left: 6.25%; right: 6.25%; top: 27px; height: 3px; border-radius: 3px; background: var(--border); }
.progress-path::after { right: auto; width: calc(87.5% * var(--done)); background: linear-gradient(90deg, var(--teal), var(--cyan)); }
.path-stop button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; width: 100%; min-height: 0; padding: 4px 2px 8px; background: none; border: 0; box-shadow: none; color: var(--navy-900); font-size: 13px; font-weight: 600; text-align: center; }
.path-stop button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: none; }
.stop-dot { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); font: 800 17px/1 var(--font-display); color: var(--muted); box-shadow: var(--sh1); transition: background var(--t-mid), border-color var(--t-mid); }
.path-stop.is-current .stop-dot { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px var(--accent-soft); }
.path-stop.is-done .stop-dot { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--white); }
.stop-label { line-height: 1.25; }
.stop-meter { width: 70%; height: 4px; background: var(--fill-2); border-radius: 4px; overflow: hidden; }
.stop-meter i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--accent); }
.day-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.day-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 56px; gap: var(--s4); align-items: center; padding: var(--s5) var(--s3) var(--s5) 0; border-bottom: 1px solid var(--border); transition: background var(--t-mid); }
.day-row::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--accent); opacity: 0; transition: opacity var(--t-mid); }
.day-row:hover { background: var(--glass-bg); }
.day-row:hover::before { opacity: 1; }
.day-num { font: 800 40px/1 var(--font-display); color: var(--accent-ink); letter-spacing: -.04em; text-align: center; }
.day-row h3 { margin-bottom: 4px; font-size: 20px; }
.day-row-main > p:not(.day-row-meta) { color: var(--muted); max-width: var(--reading); margin-bottom: var(--s2); }
.day-row-meta { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: .02em; }
.day-row.is-done .status-text { color: var(--success); }
.day-row-status, .day-status { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.day-row-status li { padding: 3px 10px; border-radius: var(--pill); background: var(--fill); font-size: 13px; font-weight: 600; color: var(--muted); }
.day-row-status li.ok { background: var(--success-soft); color: var(--success); }
.day-row-status li.warn { background: var(--warning-soft); color: var(--warning); }
.day-open { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.bookmarks { margin-top: var(--s7); }
.bookmarks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.bookmarks a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--border); text-decoration: none; font-weight: 600; }
.pathway-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.pathway-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 200px; gap: var(--s3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.pathway-num { font: 600 13px/1 var(--font-mono); color: var(--muted); }
.pathway-list label { font-weight: 500; font-size: 15px; }
.pathway-list select { margin: 0; }

/* Day shell: the day hero is a glass panel on the day canvas */
.day { padding-top: var(--s5); }
.day-head { position: relative; padding: var(--s5) var(--s6) var(--s4); overflow: hidden; isolation: isolate; }
.day-head::before, .day-head::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; border-radius: 50%; filter: blur(50px); opacity: .28; pointer-events: none; background: radial-gradient(circle, var(--accent), transparent 70%); }
.day-head::before { right: -80px; top: -140px; }
.day-head::after { left: 30%; bottom: -230px; background: radial-gradient(circle, var(--cyan), transparent 70%); opacity: .16; }
.day-motif { position: absolute; z-index: -1; right: 24px; top: 18px; width: 300px; height: 190px; color: var(--accent); opacity: .35; pointer-events: none; }
.day-motif * { vector-effect: non-scaling-stroke; }
.day-head-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.day-kicker { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.day-kicker a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.day-head h1 { margin: var(--s2) 0; max-width: 24ch; }
.bookmark-btn { font-size: 14px; }
.bookmark-btn[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.day-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--muted); font-size: var(--supporting); margin-bottom: var(--s4); }
.day-meta span { display: inline-flex; align-items: center; gap: 6px; }
.day-meta strong { color: var(--accent-ink); }
.stepper ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 4px; }
.stepper a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border-radius: var(--r2); text-decoration: none; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: background var(--t-fast); }
.stepper a:hover { background: var(--fill); }
.step-dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--muted); }
.step-dot .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.stepper .is-done .step-dot { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--white); }
.stepper .is-current a { background: var(--accent-soft); color: var(--accent-ink); }
.stepper .is-current .step-dot { border-color: var(--accent-ink); color: var(--accent-ink); border-width: 2px; }
.stepper .is-done.is-current .step-dot { color: var(--white); }
.stepper-bar { height: 4px; margin-top: 6px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.stepper-bar span { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--accent); transition: width 500ms var(--ease); }
.day-status { margin-top: var(--s3); gap: var(--s1) var(--s5); align-items: center; }
.day-status li { display: flex; gap: 6px; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); }
.day-status li strong { color: var(--ink); font-weight: 650; }
.day-status li.ok strong { color: var(--success); }
.day-status li.warn strong { color: var(--warning); }
.day-status li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 650; }
.skip-banner { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s4) 0 0; padding: 12px 16px; border-radius: var(--r2); background: var(--warning-soft); color: var(--warning-ink); border: 1px solid var(--warning-line); }
.skip-banner p { margin: 0; }
.skip-banner .icon { margin-top: 3px; }
.day-body { margin-top: var(--s6); }
.notes { max-width: var(--column); margin: var(--s7) 0 0; padding: var(--s2) var(--s4); background: var(--surface); border-radius: var(--card-radius); border: 1px solid var(--border); }
.notes textarea { margin-bottom: var(--s2); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); }
.pager-link { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--card-radius); text-decoration: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.pager-link:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.pager-link span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.pager-link strong { color: var(--navy-900); }
.pager-link.next { text-align: right; justify-items: end; }

/* Day Briefing */
.day-brief { padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.day-brief h2 { margin-bottom: var(--s2); }
.brief-purpose { font-size: 18px; color: var(--ink); max-width: var(--reading); }
.brief-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); margin: var(--s5) 0; }
.brief-grid h3, .brief-agenda h3 { font-size: var(--card-title); }
.brief-end { padding: var(--s3) var(--s4); border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r2) var(--r2) 0; max-width: var(--reading); }
.agenda { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); position: relative; }
.agenda li { display: grid; gap: var(--s2); align-content: start; font-size: var(--supporting); }
.agenda li > span:last-child { display: grid; gap: 2px; color: var(--ink); }
.agenda strong { color: var(--accent-ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.agenda-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-900); color: var(--white); font: 800 15px/1 var(--font-display); }
.agenda.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s3); }
.briefing { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); margin-top: var(--s5); padding: var(--s6) var(--s6) 0; overflow: hidden; }
.briefing h2 { font-size: 26px; }
.briefing-copy { padding-bottom: var(--s6); }
.briefing-speech { font-size: 18px; color: var(--ink); max-width: 58ch; }
.briefing-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.briefing-outcomes div { padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); }
.briefing-outcomes dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-ink); margin-bottom: 4px; }
.briefing-outcomes dd { margin: 0; color: var(--ink); font-size: 15px; }
.briefing-time { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.briefing-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lesson-section { max-width: var(--column); margin: var(--s7) 0 0; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.checklist li { display: flex; gap: var(--s2); align-items: flex-start; }
.checklist .icon { color: var(--accent-ink); margin-top: 4px; }
.case-note { margin-top: var(--s5); padding: var(--s4) var(--s5); border-left: 4px solid var(--accent); background: var(--cream); border-radius: 0 var(--r2) var(--r2) 0; }
.stage-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); padding: var(--s4) 0 0; border-top: 1px solid var(--border); }
.stage-action p { margin: 0; color: var(--muted); max-width: 56ch; }

/* Concept Lesson and Applied Scenario */
.lesson-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.chapter-index { position: sticky; top: 88px; padding: var(--s3) var(--s2) var(--s3) var(--s3); border-radius: var(--card-radius); }
.chapter-index > p { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.chapter-index ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.chapter-index button { display: block; width: 100%; min-height: 44px; margin-left: -2px; padding: 8px 12px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; text-align: left; font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.chapter-index button:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--navy-900); }
.chapter-index button[aria-current="true"] { border-left-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.lesson-main { min-width: 0; max-width: var(--column); }
.lesson-main > .lesson-section:first-child { margin-top: 0; }
.simple-layer { margin-top: 0; }
.in-simple { margin: var(--s4) 0 var(--s5); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--accent); box-shadow: var(--card-shadow); }
.simple-text { font-size: 19px; line-height: 1.6; color: var(--navy-900); font-weight: 500; max-width: var(--reading); }
.why { margin: 0; color: var(--ink); }
.reading { background: var(--surface); border-radius: var(--card-radius); padding: var(--s4) var(--card-pad); border: 1px solid var(--border-soft); }
.reading p { max-width: var(--reading); }
.reading-list { max-width: var(--reading); }
.chapter { position: relative; margin-top: var(--s7); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border-soft); }
.chapter-head { display: flex; align-items: baseline; gap: var(--s3); }
.chapter-num { font: 800 26px/1 var(--font-display); color: var(--accent-ink); letter-spacing: -.03em; }
.chapter h3 { font-size: 24px; margin: 0 0 var(--s3); }
.chapter-simple { font-size: 18px; color: var(--navy-900); font-weight: 500; max-width: var(--reading); }
.chapter-detail { color: var(--ink); max-width: var(--reading); }
.example { margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--cream); border-radius: var(--r3); border-left: 4px solid var(--accent); }
.example figcaption { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--s2); }
.example > p { margin-bottom: 0; }
.at-work { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r2) var(--r2) 0; }
.at-work p { margin: 0; font-size: 17px; font-style: italic; color: var(--navy-900); }
.evidence-mistake { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin: var(--s5) 0; }
.evidence-mistake > div + div { padding-left: var(--s5); border-left: 1px solid var(--border); }
.evidence-mistake h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.evidence-mistake h4 .icon { color: var(--accent-ink); }
.evidence-mistake > div + div h4 .icon { color: var(--warning); }
.evidence-mistake p { font-size: 15px; color: var(--ink); margin: 0; }
.confuse { margin: var(--s4) 0; padding: var(--s3) var(--s4); border: 1px dashed var(--accent); border-radius: var(--r2); }
.confuse .label { color: var(--warning); }
.confuse p:last-child { margin: 0; }
.topic-flow { margin: var(--s4) 0; }
.try { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
.try > p { margin: 0; }
.try > p .label { display: inline; margin-right: 8px; }
.try summary { font-weight: 600; font-size: 15px; }
.try details p { margin-top: var(--s2); }
.callout-block { max-width: var(--column); margin-top: var(--s6); padding: var(--s4) var(--card-pad); border-radius: var(--card-radius); }
.callout-block h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--card-title); margin-bottom: var(--s2); }
.callout-block p { margin: 0; max-width: var(--reading); }
.why-block { background: var(--accent-soft); border: 1px solid var(--accent); }
.why-block h3 .icon { color: var(--accent-ink); }
.mistake-block { background: var(--warning-soft); border: 1px solid var(--warning-line); }
.mistake-block h3 .icon { color: var(--warning); }
.key-terms { max-width: var(--column); margin-top: var(--s5); padding: var(--s2) var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.key-terms .count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.key-terms dl { margin: 0 0 var(--s3); display: grid; gap: var(--s3); }
.key-term { padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
.key-term dt { font: 700 var(--card-title)/1.3 var(--font-display); color: var(--navy-900); }
.key-term dd { margin: var(--s2) 0 0; display: grid; gap: var(--s2); font-size: 15px; }
.key-term dd p { margin: 0; }
.key-term .label { display: inline; margin-right: 6px; font-size: 11.5px; }
.scenario-brief { padding: var(--card-pad); }
.scenario-brief h2 { margin-bottom: var(--s2); }
.scenario-brief .lead { margin: 0; }
.evidence-panel { margin-top: var(--s4); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.evidence-panel h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--card-title); }
.evidence-panel ul { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s2); }
.evidence-panel li { padding: 10px 14px; border-radius: var(--r2); background: var(--cream); border-left: 3px solid var(--accent); font-size: 15px; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0; list-style: none; padding: 0; margin: var(--s5) 0; }
.flow li { position: relative; padding: var(--s3) var(--s3) var(--s3) 0; }
.flow li::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--accent); }
.flow li span { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-ink); color: var(--white); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.flow li strong { display: block; font-size: 14.5px; color: var(--navy-900); line-height: 1.3; padding-right: var(--s2); }
/* Connected process diagram: horizontal on desktop, vertical on phones */
.process { --n: 5; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s3); list-style: none; padding: 0; margin: var(--s4) 0; }
.process::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 21px; height: 3px; border-radius: 3px; background: var(--accent); transform-origin: left; }
.process-node { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s2); text-align: center; }
.process-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); color: var(--accent-ink); font: 800 16px/1 var(--font-display); }
.process-label { font-weight: 700; color: var(--navy-900); font-size: 15px; line-height: 1.3; }
.process-text { font-size: var(--supporting); color: var(--muted); line-height: 1.45; }
.resources { margin-top: var(--s6); padding: var(--s2) var(--s4); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.resources .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.resources ul { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; gap: 2px; }
.resources li { display: flex; align-items: center; gap: var(--s3); min-height: 44px; border-top: 1px solid var(--border-soft); }
.resources li a { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-weight: 600; }
.res-icon { color: var(--accent-ink); }
.check-block { max-width: var(--column); margin-top: var(--s7); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); border: 1px solid var(--border); border-top: 4px solid var(--accent); }
.check-block > h3 { font-size: 24px; }
.check-q { padding-top: var(--s4); border-top: 1px solid var(--border-soft); }
.q-count { display: block; font: 700 12.5px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }

/* Practice Workbench */
.practice-head { padding: var(--card-pad); }
.practice-head h2 { margin-bottom: var(--s2); }
.practice-progress { display: grid; gap: var(--s2); margin-top: var(--s4); }
.practice-progress > p { margin: 0; }
.part-list { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.part-list li { display: flex; gap: var(--s2); align-items: flex-start; padding: 10px 12px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 14.5px; }
.part-list li small { display: block; font-weight: 500; color: var(--muted); }
.part-list li .icon { margin-top: 3px; color: var(--warning); }
.part-list li.ok .icon { color: var(--success); }
.hint-box { margin-top: var(--s4); }
.vee-hint-toggle { display: flex; align-items: center; gap: var(--s3); min-width: 280px; max-width: 420px; padding: 10px 16px; text-align: left; line-height: 1.4; white-space: normal; overflow-wrap: normal; word-break: normal; background: var(--surface); border-color: var(--accent); color: var(--accent-ink); }
.vee-hint-toggle .icon { flex: none; width: 22px; height: 22px; }
.vee-hint-toggle span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vee-hint-body { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--accent-soft); max-width: var(--column); }
.vee-hint-body[hidden] { display: none; }
.vee-hint-body p { margin: 0; }
.packet { max-width: var(--column); margin-top: var(--s5); padding: var(--s2) var(--s4); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.packet-part h4 { margin-top: var(--s3); font-size: 16px; }
.practice-task { max-width: var(--column); margin-top: var(--s6); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); border: 1px solid var(--border); }
.task-top { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.task-count { margin: 0; font-weight: 800; color: var(--accent-ink); font-family: var(--font-display); }
.task-dots { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.task-dots button { width: 44px; min-height: 44px; padding: 0; box-shadow: none; position: relative; }
.task-dots .is-current { border: 2px solid var(--navy-900); }
.task-dots .is-right { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.task-dots .is-wrong { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.task-dots .is-right::after { content: "✓"; position: absolute; right: 3px; top: 0; font-size: 11px; }
.task-dots .is-wrong::after { content: "!"; position: absolute; right: 5px; top: 0; font-size: 11px; font-weight: 800; }
.task-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-top: var(--s4); }
.task-nav .primary { order: 2; }
.decision legend { display: block; font-size: 18px; }
.model { margin-top: var(--s4); }
.practice-actions { max-width: var(--column); margin-top: var(--s6); }
.moment-card { display: flex; gap: var(--s5); align-items: flex-start; padding: var(--card-pad); border-left: 5px solid var(--success); }
.moment-card h3 { margin-bottom: 4px; }
.moment-card h4 { margin-top: var(--s4); font-size: 16px; }
.completion-summary { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: 6px; font-size: 14.5px; }
.completion-summary li { display: flex; gap: var(--s2); align-items: flex-start; }
.completion-summary .icon { margin-top: 3px; color: var(--warning); }
.completion-summary li.ok .icon { color: var(--success); }
.completion-summary strong { margin-right: 4px; }

/* MCQ assessment */
.assess-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.assess-meta span { padding: 4px 12px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--muted); }
.quiz-start, .quiz, .quiz-result, .quiz-review { max-width: var(--column); margin-top: var(--s5); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); border: 1px solid var(--border); }
.quiz-start { display: grid; gap: var(--s5); }
.quiz-start .primary { justify-self: start; }
.quiz-top { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.quiz-count { margin: 0; font-weight: 800; color: var(--accent-ink); white-space: nowrap; font-family: var(--font-display); }
.quiz-progress { flex: 1; height: 8px; border-radius: 8px; background: var(--fill-2); overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width 500ms var(--ease); }
.quiz-stage { min-height: 460px; }
.quiz-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-q:disabled .quiz-option { cursor: default; }
.quiz-prompt { font-size: 21px; line-height: 1.4; font-weight: 700; margin-bottom: var(--s4); }
.quiz-options { display: grid; gap: var(--s2); }
.quiz-option { position: relative; display: flex; gap: var(--s3); align-items: flex-start; width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--border-strong); border-radius: var(--r2); background: var(--surface); font-weight: 500; font-size: 16px; line-height: 1.45; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.quiz-option:hover { border-color: var(--accent); }
.quiz-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.radio-dot { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--muted); transition: border-color var(--t-fast); }
.opt-key { flex: none; font-weight: 800; color: var(--muted); width: 1.2em; }
.quiz-option:has(input:checked) { border-color: var(--navy-900); background: var(--fill); }
.quiz-option input:checked + .radio-dot { border-color: var(--navy-900); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 10px var(--navy-900); }
.quiz-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.quiz-option.is-right { border-color: var(--success); background: var(--success-soft); }
.quiz-option.is-wrong { border-color: var(--warning); background: var(--warning-soft); }
.quiz-feedback:empty { display: none; }
.quiz-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s2); margin-top: var(--s4); }
.quiz-map ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--s5) 0 0; }
.quiz-map button { position: relative; width: 44px; min-height: 44px; padding: 0; box-shadow: none; font-size: 14px; }
.quiz-map .is-answered { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.quiz-map .is-current { border: 2px solid var(--navy-900); }
.quiz-map .is-answered::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); }
.quiz-foot { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--border-soft); color: var(--muted); font-weight: 600; }
.result-hero { position: relative; display: flex; gap: var(--s5); align-items: center; padding: var(--s4) 150px var(--s4) var(--s4); }
.result-hero h3 { font-size: var(--section); margin-bottom: var(--s2); }
.score-ring { position: absolute; right: var(--s4); top: 50%; width: 112px; height: 112px; margin-top: -56px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--v) * 360deg), var(--fill-2) 0); display: grid; place-items: center; }
.score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.score-ring span { position: relative; font: 800 24px/1 var(--font-display); color: var(--navy-900); }
.is-review .score-ring { background: conic-gradient(var(--warning) calc(var(--v) * 360deg), var(--fill-2) 0); }
.category-scores { list-style: none; padding: 0; margin: var(--s5) 0 var(--s2); display: grid; gap: var(--s2); }
.category-scores li { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 2px var(--s3); align-items: center; font-size: 14.5px; }
.category-scores li i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--success) calc(var(--v) * 100%), var(--fill-2) 0); }
.category-scores li.warn i { background: linear-gradient(90deg, var(--warning) calc(var(--v) * 100%), var(--fill-2) 0); }
.category-scores strong { text-align: right; }
.score-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.score-facts div { padding: var(--s2) 0; border-top: 2px solid var(--border-soft); }
.score-facts dt { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.score-facts dd { margin: 4px 0 0; font-weight: 650; color: var(--navy-900); }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-soft); }
.result-actions .spacer { flex: 1; }
.history { margin-top: var(--s4); }
.review-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); }
.review-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); }
.review-list > li { padding: var(--s4) 0 0; border-top: 1px solid var(--border-soft); font-size: 15px; }
.review-list .label { display: inline; margin-right: 6px; color: var(--muted); }
.review-q { display: flex; gap: var(--s2); align-items: flex-start; font-size: 16px; color: var(--navy-900); }
.review-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--white); }
.review-list .good .review-mark { background: var(--success); }
.review-list .review .review-mark { background: var(--warning); }
.review-mark .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.review-why { padding: 10px 12px; border-radius: var(--r2); background: var(--fill); }

/* Day Recap */
.concept-map { position: relative; height: 420px; margin: var(--s5) 0; border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.concept-map figcaption { position: absolute; left: var(--s4); top: var(--s3); font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.map-stage { position: absolute; inset: 48px 16px 16px; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines line { stroke: var(--accent); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.map-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 150px; padding: var(--s3); border-radius: var(--card-radius); background: var(--navy-900); color: var(--white); text-align: center; margin: 0; font-size: 14px; }
.map-center strong { font-family: var(--font-display); font-size: 18px; }
.map-nodes { list-style: none; padding: 0; margin: 0; }
.map-nodes li { position: absolute; width: 180px; padding: 8px 12px; border-radius: var(--r3); background: var(--surface); border: 2px solid var(--accent); font-size: 13.5px; line-height: 1.35; color: var(--navy-900); transform: translate(-50%, -50%); box-shadow: var(--sh1); }
.map-nodes li .label { margin: 0 0 2px; font-size: 11px; }
.map-nodes li:nth-child(1) { left: 50%; top: 14%; }
.map-nodes li:nth-child(2) { left: 84%; top: 39%; }
.map-nodes li:nth-child(3) { left: 72%; top: 82%; }
.map-nodes li:nth-child(4) { left: 28%; top: 82%; }
.map-nodes li:nth-child(5) { left: 16%; top: 39%; }
.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin: var(--s5) 0; }
.recap-grid h3, .completed-activities h3 { font-size: var(--card-title); }
.rules { list-style: none; padding: 0; margin: 0; counter-reset: r; display: grid; gap: var(--s3); }
.rules li { position: relative; padding-left: 44px; counter-increment: r; }
.rules li::before { content: counter(r); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-ink); color: var(--white); font-weight: 700; }
.mistakes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.mistakes li { display: flex; gap: var(--s2); }
.mistakes .icon { color: var(--danger); margin-top: 4px; }
.completed-activities ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s4); }
.completed-activities li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 15px; }
.completed-activities .icon { margin-top: 4px; color: var(--muted); }
.completed-activities li.ok .icon { color: var(--success); }
.next-preview { max-width: var(--column); margin-top: var(--s6); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--navy-950); color: var(--on-dark); }
.next-preview h3 { color: var(--white); }
.next-preview .eyebrow, .next-preview .agenda strong { color: var(--on-dark-accent); }
.next-preview .agenda li > span:last-child { color: var(--on-dark); }
.next-preview .agenda-num { background: var(--on-dark-fill-strong); }
.next-preview .button { background: var(--white); color: var(--navy-900); }
.day-complete { position: relative; display: flex; gap: var(--s5); align-items: center; max-width: var(--column); margin-top: var(--s6); padding: var(--s5) 140px var(--s5) var(--s5); }
.complete-ring { position: absolute; right: var(--s5); top: 50%; width: 88px; height: 88px; margin-top: -44px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.complete-ring circle { stroke-dasharray: 126; stroke-dashoffset: 0; }
.complete-ring path { stroke: var(--success); stroke-dasharray: 30; stroke-dashoffset: 0; }
.hero-complete { display: flex; gap: var(--s6); align-items: center; padding: var(--s7); }
.result-table { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.result-table li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.todo-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--border-soft); }
.todo-list span { grid-column: 1; color: var(--muted); font-size: 14px; }
.todo-list .button { grid-row: 1 / span 2; grid-column: 2; }

/* Reference layout: curriculum, vault, settings, studio */
.curriculum-progress { display: flex; align-items: center; gap: var(--s3); }
.curriculum-progress p { margin: 0; font-weight: 600; color: var(--muted); }
.filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); margin-bottom: var(--s5); }
.vault-page .filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.curriculum-page .filters { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.filter-actions [hidden] { display: none; }
.empty .vee { margin: 0 auto var(--s3); }
.taught-in { margin-bottom: var(--s6); padding: var(--s5); border-radius: var(--card-radius); background: var(--navy-950); color: var(--on-dark); }
.taught-in h2 { color: var(--white); font-size: 22px; }
.hit-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s2); }
.hit-list a { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border-radius: var(--r2); background: var(--on-dark-fill); color: var(--white); text-decoration: none; border: 1px solid var(--on-dark-line); transition: background var(--t-fast); }
.hit-list a:hover { background: var(--on-dark-fill-strong); }
.hit-where { font-size: 12.5px; color: var(--on-dark-accent); font-weight: 600; }
.result-count { color: var(--muted); font-weight: 600; font-size: 14px; }
.source-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.source-row { padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.source-row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.row-no { font: 600 12.5px/1 var(--font-mono); color: var(--muted); }
.source-original { font-size: 14px; color: var(--muted); }
.source-original .label { display: inline; margin-right: 6px; }
.subtopics { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 0; }
.subtopics li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 15px; }
.subtopics li.is-match { background: linear-gradient(90deg, var(--mark), transparent); padding-left: 8px; border-radius: var(--r1); }
.subtopics a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.subtopics small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.resources.small { margin-top: var(--s3); }
.vault-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 var(--s5); }
.vault-entry { padding: var(--s3) 0; border-top: 1px solid var(--border); min-width: 0; }
.vault-entry h2 { font-size: 17px; margin: 2px 0 4px; }
.vault-entry p { font-size: 14.5px; color: var(--ink); margin: 0 0 4px; overflow-wrap: anywhere; }
.vault-entry .vault-more { font-size: 14px; color: var(--muted); }
.vault-entry .vault-more strong { color: var(--navy-900); }
.vault-cat { font-size: 12px; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .06em; }
.host { font-family: var(--font-mono); font-size: 13px; }
#vaultMore { margin-top: var(--s5); }
.settings-block { max-width: var(--column); margin-bottom: var(--s5); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.settings-block h2 { font-size: 22px; }
.authoring > summary h2 { margin: 0; font-size: 18px; color: var(--muted); }
.toggle { display: flex; gap: var(--s3); align-items: center; min-height: 44px; font-size: 16px; }
.toggle input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--navy-900); }
.studio-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s5); margin-top: var(--s4); }
.studio-list { display: grid; gap: 4px; align-content: start; }
.studio-list button { justify-content: flex-start; text-align: left; box-shadow: none; font-weight: 500; }
.studio-list button[aria-current="true"] { border-color: var(--accent-ink); background: var(--accent-soft); }
.studio-editor textarea, .studio-structure textarea { min-height: 360px; font-family: var(--font-mono); font-size: 13px; }
.studio-structure { margin-top: var(--s5); }

/* ── 6. Interactive work ───────────────────────────────────────────────── */
.interactive, .tool, .visual, .workbench, .day-panel { margin-top: var(--s7); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); border: 1px solid var(--border); }
.interactive > h3, .tool > h3, .day-panel > h3 { font-size: 24px; }
.interactive > p, .tool > p, .day-panel > p { max-width: var(--reading); }
.day-panel h4 { margin-top: var(--s5); font-size: 17px; }
.tool { max-width: var(--column); }
/* Four dimensions, role decoder, market matrix */
.four-d-profile { padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--fill); }
.four-d-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.dim-label { font-size: 13px; font-weight: 700; color: var(--navy-900); margin-bottom: var(--s2); }
.dim-track { position: relative; display: grid; gap: 4px; }
.dim-marker { position: absolute; left: 0; right: 0; top: 0; height: calc((100% - 8px) / 3); border-radius: var(--r2); background: var(--accent-ink); transform: translateY(calc(var(--pick) * (100% + 4px))); transition: transform var(--t-slow) var(--ease); }
.dim-opt { position: relative; z-index: 1; display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: var(--r2); font-size: 14px; font-weight: 600; color: var(--muted); border: 1px solid var(--border-soft); transition: color var(--t-mid); }
.dim-opt.is-on { color: var(--white); border-color: transparent; }
.dim-why { font-size: 14px; color: var(--muted); margin-top: var(--s2); }
.axis-map { --gutter: 64px; position: relative; height: 340px; margin: var(--s5) 0; border-radius: var(--r3); background: linear-gradient(transparent 76%, var(--border) 76% calc(76% + 1px), var(--surface) calc(76% + 1px)), var(--fill); border: 1px solid var(--border); overflow: hidden; }
.axis-map::before { content: ""; position: absolute; left: var(--gutter); right: 0; top: 0; height: 76%; background: linear-gradient(90deg, transparent 33.2%, var(--border-soft) 33.2% 33.5%, transparent 33.5% 66.5%, var(--border-soft) 66.5% 66.8%, transparent 66.8%), linear-gradient(transparent 32%, var(--border-soft) 32% 32.6%, transparent 32.6% 64%, var(--border-soft) 64% 64.6%, transparent 64.6%); }
.axis-label { position: absolute; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ax-x { top: calc(76% - 20px); left: calc(var(--gutter) + (100% - var(--gutter)) * var(--fx)); transform: translateX(-50%); }
.ax-y { left: 10px; top: var(--y); transform: translateY(-50%); }
.axis-tray { position: absolute; left: 10px; top: calc(76% + 6px); font-size: 11px; font-weight: 700; color: var(--muted); }
.axis-dot { position: absolute; left: calc(var(--gutter) + (100% - var(--gutter)) * var(--fx)); top: var(--y); display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--surface); border: 2px dashed var(--border-strong); font-size: 13px; font-weight: 700; color: var(--muted); transition: left var(--t-slow) var(--ease), top var(--t-slow) var(--ease), background var(--t-mid); }
.axis-dot.is-placed { background: var(--accent-ink); border: 2px solid var(--white); color: var(--white); box-shadow: var(--sh2); transform: translate(calc((var(--n) - 2.5) * 7px), calc((var(--n) - 2.5) * 5px)); }
.axis-dot.is-unclear { background: var(--muted); }
.decoder-cases, .matrix-cases { display: grid; gap: var(--s4); }
.decoder-case, .matrix-case { padding: var(--s4) 0 0; border-top: 1px solid var(--border-soft); }
.decoder-case header { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.decoder-case h4 { margin: 0; }
.decoder-case header p { margin: 0; color: var(--muted); font-size: 14px; }
.matrix-grid { --cols: 5; --rows: 5; position: relative; display: grid; grid-template-columns: 130px repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: 44px repeat(var(--rows), 46px) 46px; margin: var(--s5) 0; border-radius: var(--r3); background: var(--fill); border: 1px solid var(--border); overflow: hidden; }
.mx-col { grid-row: 1; grid-column: calc(var(--c) + 2); display: grid; place-items: center; padding: 4px; font-size: 12px; font-weight: 700; text-align: center; color: var(--navy-900); line-height: 1.15; border-left: 1px solid var(--border-soft); }
.mx-row { grid-column: 1; grid-row: calc(var(--r) + 2); display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--navy-900); border-top: 1px solid var(--border-soft); line-height: 1.15; }
.mx-cells { position: absolute; left: 130px; right: 0; top: 44px; bottom: 0; }
.mx-dot { position: absolute; left: calc((var(--c) + .5) / var(--cols) * 100%); top: calc((var(--r) + .5) * 46px); width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 2px dashed var(--border-strong); font-size: 13px; font-weight: 700; color: var(--muted); transition: left var(--t-slow) var(--ease), top var(--t-slow) var(--ease), background var(--t-mid); }
.mx-dot.is-placed { background: var(--accent-ink); color: var(--white); border: 2px solid var(--white); box-shadow: var(--sh2); transform: translate(calc((var(--k) - 2.5) * 5px), 0); }
.matrix-case h4 { display: flex; gap: var(--s2); align-items: baseline; font-size: 16px; font-weight: 600; }
.case-num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.lens-case { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0 0; border-top: 1px solid var(--border-soft); margin-top: var(--s4); }
.lens-case .feedback { grid-column: 2; }
.lens-name { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; font-family: var(--font); }
.command-centre { background: var(--navy-950); color: var(--on-dark); border: 0; position: relative; overflow: hidden; isolation: isolate; }
.command-centre::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, var(--on-dark-fill-strong) 1px, transparent 0); background-size: 20px 20px; }
.command-centre h3 { color: var(--white); }
.centre-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); list-style: none; padding: 0; margin: var(--s5) 0; }
.centre-grid li { display: grid; gap: 4px; padding: var(--s4); border-radius: var(--r3); background: var(--on-dark-fill); border: 1px solid var(--on-dark-line); }
.centre-grid li.is-live { background: var(--on-dark-fill-strong); border-color: var(--gold); }
.centre-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--on-dark-line-strong); font-size: 12px; font-weight: 700; }
.centre-grid li.is-live .centre-num { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.centre-grid strong { color: var(--white); }
.centre-grid small { color: var(--on-dark-muted); font-size: 13px; }
.command-centre .button.primary { background: var(--white); color: var(--navy-900); border-color: var(--white); }
/* Classification exercises */
.def-pair, .def-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.def-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.def-pair div, .def-grid div { padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--accent-soft); }
.def-pair dt, .def-grid dt { font: 800 16px/1.3 var(--font-display); color: var(--accent-ink); }
.def-pair dd, .def-grid dd { margin: 4px 0 0; font-size: 14.5px; }
.sector-grid, .profile-cards { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.profile-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sector-card, .profile-card, .board-card, .compare-card, .reveal-card { padding: var(--s4); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast), border-color var(--t-fast); }
.sector-card:hover, .profile-card:hover, .board-card:hover, .compare-card:hover, .reveal-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.sector-card.is-right, .profile-card.is-right { border-color: var(--success); }
.sector-card.is-wrong, .profile-card.is-wrong { border-color: var(--warning); }
.sector-label { font: 800 18px/1.3 var(--font-display); color: var(--navy-900); margin: 0; }
.profile-card h4 { margin-bottom: var(--s2); }
.profile-card ul { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; gap: 6px; font-size: 14.5px; }
.tag { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: var(--r1); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; vertical-align: 1px; }
.tag.resp { background: var(--fill-2); color: var(--muted); }
.tag.ach { background: var(--tag-claim-bg); color: var(--tag-claim-ink); }
/* Shared candidates (Days 3, 5, 8) */
.chip-legend { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); }
.chip-legend .chip { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r2); background: var(--fill); font-size: 13.5px; border-left: 4px solid var(--chip); }
.chip-legend .chip strong { color: var(--navy-900); }
.chip-fact { --chip: var(--success); } .chip-claim { --chip: var(--violet); } .chip-missing-date { --chip: var(--amber); } .chip-skill-evidence { --chip: var(--teal); } .chip-skill-no-evidence { --chip: var(--coral); }
.shared-person, .compare-card, .board-card { margin-top: var(--s4); }
.shared-person header, .compare-card header, .board-card header { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.shared-person header h4, .compare-card header h4, .board-card header h4 { margin: 0; }
.shared-person header p, .compare-card header p, .board-card header p { margin: 0; color: var(--muted); font-size: 14px; }
.sort-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.sort-list > li { padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
.sort-text { font-weight: 600; color: var(--navy-900); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row .chip-btn { border-left-width: 4px; border-left-color: var(--chip, var(--border-strong)); }
.compare-matrix { display: grid; gap: var(--s4); }
.compare-rows { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s3); }
.compare-rows .crit { margin: 0; font-weight: 700; color: var(--navy-900); }
.compare-card select { margin-bottom: var(--s2); }
.board { display: grid; gap: var(--s4); }
.prior { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); margin: 0 0 var(--s3); font-size: 14px; }
.prior dt { font-weight: 700; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.prior dd { margin: 2px 0 0; }
.readonly-summary { margin-top: var(--s5); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--cream); border: 1px solid var(--border); }
.readonly-summary h4 { display: flex; gap: var(--s2); align-items: center; }
.readonly-summary dl { margin: 0; display: grid; gap: var(--s3); }
.readonly-summary dt { font-weight: 800; color: var(--navy-900); }
.readonly-summary dd { margin: 2px 0 0; font-size: 15px; }
.readonly-summary ul { margin: 0; padding-left: 1.1em; }
/* Résumé lab */
.lab-task { position: sticky; top: 76px; z-index: 2; margin: var(--s4) 0; padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lab-task .task-count { font-size: 14px; }
.lab-prompt { margin: 4px 0; }
.lab-task .button-row { margin: var(--s2) 0 0; }
.lab-resume { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.resume { display: grid; gap: var(--s3); }
.resume-page { padding: var(--s5); border-radius: var(--r1); background: var(--cream); border: 1px solid var(--border); box-shadow: var(--paper-shadow); font-size: 14.5px; }
.resume-page-no { font: 600 12px/1 var(--font-mono); color: var(--muted); text-align: right; }
.resume-summary { font-style: italic; }
.resume-role { padding: var(--s2) 0; border-top: 1px solid var(--border-soft); }
.resume-role-head span { float: right; font-size: 13px; color: var(--muted); }
.reading-prompt { display: flex; gap: 6px; margin-top: var(--s3); padding: 10px 12px; border-radius: var(--r2); background: var(--accent-soft); color: var(--navy-900); font-size: 14px; }
.lab-header h4 { margin-bottom: 2px; }
.lab-role { padding: var(--s2) 0; border-top: 1px solid var(--border-soft); }
.lab-role p { margin: 4px 0; }
.lab-dates { color: var(--muted); font-size: 13px; }
.lab-gap { margin: var(--s2) 0; }
.hotspot { display: inline; min-height: 0; padding: 1px 4px; margin: -1px 0; border: 0; border-bottom: 2px dashed var(--accent); border-radius: 4px; background: transparent; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hotspot:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--accent-soft); }
.hotspot.is-found { background: var(--success-soft); border-bottom: 2px solid var(--success); }
.lab-role-head { display: inline; }
.lab-annotations { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: 6px; font-size: 14.5px; }
.lab-annotations li { display: flex; gap: var(--s2); align-items: flex-start; }
.lab-annotations .icon { color: var(--success); margin-top: 3px; }
/* Day 7 prompt-engineering chapter */
.prompt-chapter { max-width: var(--column); margin-top: var(--s7); }
.chapter-hero { padding: var(--card-pad); }
.chapter-hero h2 { margin: 0; }
.pc-section { margin-top: var(--s6); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.pc-section h3 { display: flex; align-items: center; gap: var(--s3); font-size: 22px; }
.pc-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-900); color: var(--white); font: 800 15px/1 var(--font-display); flex: none; }
.pc-definition { font-size: 18px; color: var(--navy-900); max-width: var(--reading); }
.reveal-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.reveal-card { display: grid; gap: var(--s3); }
.reveal-card h4 { margin: 0; }
.rc-face { padding: var(--s3) var(--s4); border-radius: var(--r3); }
.rc-weak { background: var(--warning-soft); }
.rc-improved { background: var(--success-soft); }
.rc-improved.is-hidden { visibility: hidden; }
.rc-text { margin: 0; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.55; color: var(--navy-900); }
.reveal-card button { justify-self: start; }
.framework { margin: 0 0 var(--s3); padding: var(--s4); border-radius: var(--r3); background: var(--fill); color: var(--navy-900); font: 14.5px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Workbench */
.workbench-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); }
.workbench-head > div { max-width: 640px; }
.workbench-head h3 { font-size: 24px; }
.wb-progress { display: grid; gap: 6px; align-content: start; margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--fill); font-size: 14px; }
.wb-progress strong { font-size: 20px; color: var(--accent-ink); }
.people-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px var(--s3); margin: var(--s3) 0; scroll-snap-type: x proximity; }
.person { flex: none; display: grid; justify-items: center; gap: 4px; width: 116px; min-height: 112px; padding: 8px 6px; scroll-snap-align: start; box-shadow: none; font-size: 14.5px; font-weight: 650; text-align: center; line-height: 1.25; }
.person .avatar { width: 40px; height: 40px; }
.person small { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); font-weight: 600; }
.person.is-focus { border-color: var(--accent); }
.person.is-decided small { color: var(--success); }
.person[aria-pressed="true"] { border: 2px solid var(--accent-ink); background: var(--accent-soft); }
.wb-tabs { display: none; gap: 4px; padding: 4px; background: var(--fill); border-radius: var(--r2); margin-bottom: var(--s3); }
.wb-tabs button { flex: 1; min-height: 44px; box-shadow: none; border-color: transparent; background: transparent; }
.wb-tabs button[aria-selected="true"] { background: var(--surface); border-color: var(--border-strong); color: var(--accent-ink); box-shadow: var(--sh1); }
.wb-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.wb-jd { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding: var(--s4); border-radius: var(--r3); background: var(--navy-950); color: var(--on-dark); font-size: 14.5px; }
.wb-jd h4 { color: var(--white); }
.wb-jd h5, .wb-jd .eyebrow { color: var(--on-dark-accent); }
.wb-jd summary { color: var(--white); font-size: 14px; }
.wb-jd ul { padding-left: 1.1em; }
.jd-criteria { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: c; }
.jd-criteria li { display: grid; grid-template-columns: 22px 1fr; gap: 4px 8px; padding: 8px 10px; border-radius: var(--r2); background: var(--on-dark-fill); border: 1px solid var(--on-dark-line); counter-increment: c; }
.jd-criteria li::before { content: counter(c); font-weight: 700; color: var(--on-dark-accent); }
.jd-criteria em { grid-column: 2; font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.jd-criteria .lvl-strong { border-color: var(--on-dark-good-line); } .jd-criteria .lvl-strong em { color: var(--on-dark-good); }
.jd-criteria .lvl-possible { border-color: var(--amber); } .jd-criteria .lvl-possible em { color: var(--on-dark-warn); }
.jd-criteria .lvl-none { border-color: var(--on-dark-bad-line); } .jd-criteria .lvl-none em { color: var(--on-dark-bad); }
.record-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--s3); }
.record-tabs button { min-height: 44px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); border-bottom: 3px solid transparent; padding: 8px 12px; }
.record-tabs button:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--navy-900); }
.record-tabs button[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.record { font-size: 15px; }
.record-head { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.record-head .avatar { width: 64px; height: 64px; }
.record-head h4 { margin: 0; font-size: 20px; }
.record-head p { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--border-soft); }
.tl-when { display: grid; gap: 2px; font-size: 13px; color: var(--muted); align-content: start; }
.tl-when strong { color: var(--navy-900); font-size: 13px; }
.tl-when i { display: block; height: 4px; width: calc(var(--len) * 100%); min-width: 8px; border-radius: 4px; background: var(--accent); margin-top: 4px; }
.tl-what h6 { margin-bottom: 4px; }
.tl-what p { margin-bottom: 6px; }
.record-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pills li { padding: 3px 10px; border-radius: var(--pill); background: var(--fill); border: 1px solid var(--border-soft); font-size: 13px; }
.not-stated { padding-left: 1.1em; color: var(--muted); }
.decision-panel h4 { font-size: 18px; }
.evidence-rows { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s3); }
.level-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.level-set legend { font-size: 14.5px; font-weight: 650; color: var(--navy-900); margin-bottom: 6px; padding: 0; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; }
.level { min-height: 44px; padding: 6px 8px; font-size: 13.5px; box-shadow: none; }
.level[aria-checked="true"] { color: var(--white); border-color: transparent; }
.level[aria-checked="true"]::before { content: "✓"; margin-right: 4px; }
.level-strong[aria-checked="true"], .disp-include[aria-checked="true"] { background: var(--success); }
.level-possible[aria-checked="true"], .disp-hold[aria-checked="true"] { background: var(--warning); }
.level-none[aria-checked="true"], .disp-exclude[aria-checked="true"] { background: var(--danger); }
.level-verified[aria-checked="true"], .dup-set .level[aria-checked="true"] { background: var(--navy-800); }
.dup-set { margin: var(--s4) 0 var(--s2); padding: var(--s3); border: 1px dashed var(--border-strong); border-radius: var(--r2); }
.dup-set .levels { grid-template-columns: 1fr; }
.evidence-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.disp-now { margin: 0 0 6px; font-size: 14.5px; }
.carried { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 var(--s3); padding: 8px 12px; border-radius: var(--r2); background: var(--accent-soft); color: var(--navy-900); font-size: 14px; }
.carried .icon { margin-top: 3px; flex: none; }
.record-history { margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); }
.record-history summary { display: flex; gap: 6px; align-items: center; font-weight: 700; min-height: 44px; cursor: pointer; }
.record-history h5 { margin: var(--s3) 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stage-list { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 6px; }
.stage-list li { display: grid; gap: 2px; padding: 8px 10px 8px 14px; border-left: 3px solid var(--border-strong); background: var(--fill); border-radius: 0 var(--r2) var(--r2) 0; font-size: 14px; }
.stage-list li.has-entry { border-left-color: var(--accent); }
.stage-list li.is-current { box-shadow: inset 0 0 0 1px var(--accent); }
.stage-list small { color: var(--muted); font-size: 13px; }
.change-list { margin: 0; padding-left: 1.1em; font-size: 14px; }
.reconcile { border: 2px solid var(--warning-line); background: var(--warning-soft); }
.reconcile-list { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s3); }
.reconcile-list p { margin: 0 0 6px; }
.syn-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.syn-counts div { padding: 10px 12px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); }
.syn-counts dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.syn-counts dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: var(--navy-900); }
.readonly-summary .count { font-weight: 600; color: var(--muted); }
.evidence-note { display: flex; gap: 6px; margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.evidence-note.good { color: var(--success); }
.evidence-note.review { color: var(--warning); }
.evidence-note .icon { margin-top: 2px; }
.disposition { margin: var(--s4) 0 var(--s2); }
.compare { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--border); }
.compare select { margin-bottom: var(--s3); }
.compare-table { margin: var(--s3) 0; font-size: 14px; }
.compare-table td { min-width: 140px; }
.analysis { margin-top: var(--s4); padding: var(--s2) 0 var(--s2) var(--s4); border-left: 4px solid var(--accent); }
.analysis h5 { margin-top: 0; color: var(--accent-ink); }
.analysis dl { margin: 0; display: grid; gap: var(--s2); }
.analysis dt { font-weight: 700; font-size: 13px; color: var(--navy-900); }
.analysis dd { margin: 0; font-size: 14.5px; }
/* Tools */
.tool-output, .query-output { display: block; min-height: 52px; margin-top: var(--s3); padding: 12px 14px; border-radius: var(--r2); background: var(--fill); font-size: 15px; }
.query-output { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
.q-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.q-token { padding: 4px 8px; border-radius: var(--r1); background: var(--surface); border: 1px solid var(--border-strong); }
.q-title { border-color: var(--violet); }
.q-work { border-color: var(--teal); }
.q-op { border: 0; background: var(--navy-900); color: var(--white); }
.q-not { border-color: var(--coral); color: var(--danger); }
.bool-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.bool-results h4 { font-size: 15px; }
.bool-results ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.bool-results li { display: grid; padding: 8px 10px; border-radius: var(--r2); font-weight: 600; font-size: 14px; }
.bool-results small { font-weight: 400; color: var(--muted); }
.bool-hit { background: var(--success-soft); }
.bool-miss { background: var(--fill); }
.bool-irrelevant .bool-miss { background: var(--warning-soft); }
.bool-results h5 { font-size: 15px; margin: 0 0 6px; }
.bool-outputs { display: grid; gap: var(--s5); margin-top: var(--s4); }
.bool-output { padding: var(--card-pad); border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); }
.bool-output h4 { margin-top: 0; font-size: 19px; }
.chip-group { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
.chip-group legend { font-weight: 650; font-size: 14.5px; color: var(--navy-900); padding: 0; margin-bottom: 6px; }
.chip-btn.is-on { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.chip-btn.is-on::before { content: "✓ "; font-weight: 800; }
.bool-revisions { margin-top: var(--s3); }
.bool-revisions summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.bool-revisions ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; }
.bool-revisions small { display: block; color: var(--muted); }
.bool-revisions code, .query-output code { overflow-wrap: anywhere; white-space: normal; }
.time-direction { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--fill); margin: var(--s4) 0; }
.segmented-set { border: 0; padding: 0; margin: var(--s3) 0; }
.segmented-set legend { font-weight: 600; font-size: 14px; color: var(--navy-900); padding: 0; }
.time-result { margin: var(--s4) 0; }
.time-answer { font-size: 20px; font-weight: 650; color: var(--navy-900); }
.time-crossing { position: relative; margin-top: var(--s4); padding: var(--s4) var(--s4) var(--s3); border-radius: var(--r3); background: var(--navy-950); color: var(--on-dark); }
.tc-row { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; height: 40px; }
.tc-row b { font-size: 13px; color: var(--on-dark-accent); }
.tc-line { position: relative; height: 2px; background: var(--on-dark-line-strong); }
.tc-day { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-style: normal; font-size: 12px; color: var(--on-dark-muted); }
.tc-pin { position: absolute; top: 50%; padding: 3px 8px; border-radius: var(--pill); background: var(--on-dark-accent); color: var(--navy-950); font-size: 12px; font-weight: 700; transform: translate(-50%, -50%); }
.tc-source .tc-pin { left: calc(52px + (100% - 52px) * var(--srcf)); }
.tc-result .tc-pin { left: calc(52px + (100% - 52px) * var(--resf)); }
.tc-boundaries { position: relative; height: 18px; margin-left: 52px; }
.tc-boundaries span { position: absolute; left: var(--b); transform: translateX(-50%); font-size: 11px; color: var(--on-dark-muted); border-left: 1px dashed var(--on-dark-line-strong); padding-left: 4px; height: 100%; }
.tc-caption { margin: var(--s2) 0 0; font-size: 13px; text-transform: capitalize; color: var(--on-dark-accent); }
.message-preview { min-height: 88px; margin-top: var(--s4); padding: var(--s4); border-radius: var(--r3); background: var(--fill); font-size: 17px; line-height: 1.6; color: var(--navy-900); }
.msg-part { display: inline; padding: 1px 2px; border-radius: 4px; }
/* Instructional visual frame */
.visual-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s3); }
.visual-head h3 { margin: 0; font-size: 21px; }
.visual-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.visual-controls button { padding: 6px 12px; font-size: 14px; }
.visual-controls button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.visual-story { margin-top: var(--s4); }
.story-stack { display: grid; }
.story-item { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity var(--t-mid) var(--ease); }
.story-item.is-current { visibility: visible; opacity: 1; }
.story-step { margin-bottom: 4px; font-size: 18px; color: var(--navy-900); }
.story-count { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; vertical-align: 2px; }
.story-detail { color: var(--ink); margin-bottom: var(--s2); max-width: var(--reading); }
.story-progress { height: 3px; background: var(--fill-2); border-radius: 3px; overflow: hidden; }
.story-progress i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--accent); transition: width 500ms var(--ease); }
.story-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--s4) 0 0; }
.story-steps button { padding: 6px 12px 6px 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); box-shadow: none; }
.story-steps button span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2); font-size: 11.5px; }
.story-steps .is-done button { color: var(--navy-900); }
.story-steps .is-done button span { background: var(--accent-soft); color: var(--accent-ink); }
.story-steps .is-current button { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.story-steps .is-current button span { background: var(--accent-ink); color: var(--white); }
.transcript { margin-top: var(--s3); font-size: 15px; }
.predict { margin-top: var(--s3); }
.predict p { margin-bottom: var(--s2); }
/* Day panels */
.eco-map { position: relative; display: grid; gap: var(--s3); margin-top: var(--s3); }
.eco-center { justify-self: center; display: grid; justify-items: center; padding: var(--s3) var(--s5); border-radius: var(--pill); background: var(--navy-900); color: var(--white); margin: 0; }
.eco-center span { font-size: 13px; color: var(--on-dark-muted); }
.eco-roles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.eco-roles li { display: grid; gap: 2px; padding: var(--s3); border-radius: var(--r3); background: var(--accent-soft); border-top: 3px solid var(--accent); font-size: 14px; }
.eco-roles strong { color: var(--navy-900); }
.class-cards { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.flip-card button { display: grid; align-content: start; justify-items: start; gap: var(--s2); width: 100%; height: 100%; min-height: 150px; padding: var(--s4); text-align: left; border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.flip-card.is-revealed button { background: var(--accent-soft); border-color: var(--accent); }
.fc-term { font: 800 19px/1.2 var(--font-display); color: var(--navy-900); }
.fc-def { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.5; }
.fc-def small { display: block; margin-top: 6px; font-weight: 700; color: var(--accent-ink); }
.fc-def.is-hidden { visibility: hidden; }
.fc-hint { font-size: 13px; color: var(--accent-ink); }
.landscape { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.land-tile { display: grid; gap: 4px; padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--accent-soft); border-left: 4px solid var(--accent); font-size: 14px; }
.land-tile strong { color: var(--navy-900); }
.context-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.context-panels article { padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--cream); border: 1px solid var(--border-soft); }
.context-panels h5 { margin-top: 0; color: var(--accent-ink); }
.anatomy p { padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--cream); font-size: 17px; line-height: 1.7; }
.anat { padding: 2px 4px; border-radius: 4px; }
.anat-1, .key-1 { background: var(--success-soft); }
.anat-2, .key-2 { background: var(--accent-soft); }
.anat-3, .key-3 { background: var(--warning-soft); }
.anatomy ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 14px; }
.anatomy li { display: flex; align-items: center; gap: 6px; }
.anatomy .key { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.decision-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.decision-flow li { display: grid; gap: 2px; padding: var(--s3); border-radius: var(--r3); border: 1px solid var(--border); font-size: 14px; }
.decision-flow strong { color: var(--accent-ink); }
.ladder { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 6px; counter-reset: rung; }
.ladder li { position: relative; display: grid; gap: 2px; padding: var(--s3) var(--s4) var(--s3) 56px; border-radius: var(--r3); background: var(--accent-soft); counter-increment: rung; font-size: 14px; margin-right: calc(var(--i) * 6%); }
.ladder li::before { content: counter(rung); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-ink); color: var(--white); font-weight: 800; }
.ladder strong { color: var(--navy-900); }
.pipeline { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.pipeline li { display: grid; justify-items: center; gap: 2px; padding: var(--s3); border-radius: var(--r3); background: var(--accent-soft); clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%); text-align: center; font-weight: 600; }
.pipe-num { font: 800 28px/1 var(--font-display); color: var(--accent-ink); }
.milestone { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r3); border: 2px dashed var(--accent); }
.milestone p { margin: 0; display: grid; }
.milestone.is-done { border-style: solid; background: var(--success-soft); border-color: var(--success); }
.milestone .icon { width: 28px; height: 28px; color: var(--accent-ink); }

/* ── 7. Instructional scenes ──────────────────────────────────────────── */
.scene { --sc-h: 300px; position: relative; height: var(--sc-h); margin-top: var(--s2); border-radius: var(--r3); overflow: hidden; background: radial-gradient(circle at 1px 1px, var(--scene-dot) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(180deg, var(--surface), var(--fill)); border: 1px solid var(--border-soft); font-size: 13px; line-height: 1.25; }
.scene > [style*="--x"], .scene .sc-token, .scene .sc-node, .scene .sc-card, .scene .sc-chip, .scene .sc-box, .scene .sc-tile, .scene .sc-bin, .scene .sc-layer, .scene .sc-lens, .scene .sc-hub, .scene .sc-col-label, .scene .sc-focus, .scene .sc-now, .scene .sc-highlight, .scene .sc-tag, .scene .sc-pointer, .scene .sc-marker-dot, .scene .sc-beam {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  transition: left var(--t-slow) var(--ease), top var(--t-slow) var(--ease), opacity var(--t-mid), background var(--t-mid), border-color var(--t-mid), color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid) var(--ease);
}
.sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-seg-base { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 5; }
.sc-seg { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 650ms var(--ease); }
.sc-seg.is-on { stroke-dashoffset: 0; }
.sc-col-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sc-card, .sc-chip, .sc-box { max-width: 42%; padding: 7px 10px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--sh1); color: var(--navy-900); font-weight: 600; text-align: center; }
.is-on.sc-card, .is-on.sc-chip, .is-on.sc-box { border-color: var(--accent); }
.is-current.sc-card, .is-current.sc-chip, .is-current.sc-box { background: var(--accent-ink); color: var(--white); border-color: var(--accent-ink); box-shadow: var(--sh2); }
.sc-lanes { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); }
.sc-lane { display: flex; align-items: center; padding-left: 12px; border-bottom: 1px dashed var(--border-soft); transition: background var(--t-mid); }
.sc-lane span { width: 21%; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sc-lane.is-active { background: var(--accent-soft); }
.sc-lane.is-active span { color: var(--accent-ink); }
.sc-node { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); font-size: 12px; font-weight: 700; color: var(--muted); }
.sc-node.is-on { border-color: var(--accent); color: var(--accent-ink); }
.sc-token { z-index: 2; margin-top: -26px; padding: 5px 10px; border-radius: var(--pill); background: var(--navy-900); color: var(--white); font-weight: 700; font-size: 12px; box-shadow: var(--sh2); }
.sc-workflow .sc-token::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: var(--navy-900); transform: translateX(-50%) rotate(45deg); }
.sc-planner { position: absolute; left: 52%; right: 3%; top: 12%; bottom: 4%; display: grid; grid-template-rows: repeat(4, 1fr); border-left: 2px solid var(--border); }
.sc-planner span { position: relative; padding-left: 8px; font: 600 11px/1 var(--font-mono); color: var(--muted); border-top: 1px dashed var(--border-soft); padding-top: 4px; }
.sc-cal-card { width: 40%; max-width: none; font-size: 12.5px; }
.sc-now { width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--d6-soft); }
.sc-lifecycle { --sc-h: 250px; padding: 22px 18px 0; }
.sc-track { position: relative; display: grid; grid-template-columns: 92px 1fr; align-items: center; column-gap: 12px; margin-bottom: 38px; opacity: .55; transition: opacity var(--t-mid); }
.sc-track.selected { opacity: 1; }
.sc-track b { font-size: 13px; color: var(--navy-900); }
.sc-rail { position: relative; height: 6px; border-radius: 6px; background: var(--fill-2); }
.sc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--t-slow) var(--ease); }
.sc-rail i { position: absolute; left: var(--x); top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); transition: background var(--t-mid), border-color var(--t-mid); }
.sc-rail i.is-on { background: var(--accent); border-color: var(--accent); }
.sc-marker { position: absolute; left: calc(var(--p, 0) * 100%); top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--navy-900); border: 3px solid var(--white); box-shadow: var(--sh2); transition: left var(--t-slow) var(--ease); }
.sc-track-note { grid-column: 2; margin-top: 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-height: 1.3em; }
.sc-track.selected .sc-track-note { color: var(--accent-ink); }
.sc-branch-note { position: absolute; left: 18px; right: 18px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: var(--r2); background: var(--accent-soft); color: var(--navy-900); font-size: 13px; }
.sc-commercial { --sc-h: 320px; }
.sc-hub { padding: 8px 14px; border-radius: var(--pill); background: var(--navy-900); color: var(--white); font-weight: 700; white-space: nowrap; }
.sc-fork-card { opacity: 0; width: 40%; max-width: none; font-size: 12.5px; }
.sc-fork-card.is-on { opacity: 1; }
.sc-merge { opacity: 0; width: 70%; max-width: none; }
.sc-merge.is-on { opacity: 1; background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.sc-focus { width: 92%; height: 15%; border-radius: var(--r2); border: 2px solid var(--accent); background: var(--accent-soft); opacity: .6; }
.sc-decompose { --sc-h: 330px; }
.sc-phrase { max-width: 40%; font-size: 12px; font-weight: 600; background: var(--cream); border-color: var(--warning-line); }
.sc-phrase.is-on { max-width: 18%; background: var(--surface); font-size: 11px; }
.sc-phrase.is-current { background: var(--accent-ink); color: var(--white); }
.sc-bin { width: 18%; height: 54px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; border-radius: 0 0 var(--r2) var(--r2); border: 2px dashed var(--border-strong); border-top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sc-bin.is-on { border-color: var(--accent); color: var(--accent-ink); }
.sc-evidence { --sc-h: 300px; }
.sc-jd-card { position: absolute; left: 4%; top: 36%; width: 32%; padding: 12px; border-radius: var(--r2); background: var(--navy-900); color: var(--white); transition: box-shadow var(--t-mid), transform var(--t-mid) var(--ease); }
.sc-jd-card small { display: block; color: var(--on-dark-accent); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.sc-jd-card.is-current { box-shadow: 0 0 0 4px var(--accent); transform: scale(1.04); }
.sc-resume { position: absolute; left: 42%; right: 4%; top: 0; bottom: 0; border-top: 0 !important; border-bottom: 0 !important; border-radius: var(--r1); background: var(--cream); border: 1px solid var(--border); box-shadow: var(--sh1); }
.sc-resume-line { position: absolute; left: 12px; right: 12px; top: var(--y); transform: translateY(-50%); font-size: 12.5px; color: var(--muted); transition: color var(--t-mid); }
.sc-resume-line.is-on { color: var(--navy-900); }
.sc-resume-line.is-criterion { font-style: italic; }
.sc-highlight { z-index: 0; width: 52%; height: 34px; border-radius: var(--r1); background: var(--mark); mix-blend-mode: multiply; }
.sc-tag { z-index: 2; padding: 4px 9px; border-radius: var(--pill); background: var(--accent-ink); color: var(--white); font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: var(--sh2); }
.sc-ladder { position: absolute; left: 4%; top: 64%; width: 32%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sc-ladder i { height: 8px; border-radius: 4px; background: var(--border); transition: background var(--t-mid); }
.sc-ladder i.is-on { background: var(--accent); }
.sc-layer { width: 62%; padding: 12px; border-radius: var(--r2); text-align: center; font-weight: 700; color: var(--navy-900); background: var(--surface); border: 1px solid var(--border-strong); opacity: 0; }
.sc-layer.is-on { opacity: 1; background: var(--accent-soft); border-color: var(--accent); }
.sc-layer.is-current { background: var(--accent-ink); color: var(--white); }
.sc-lens { width: 76%; padding: 8px 12px; border-radius: var(--pill); border: 2px dashed var(--accent); font-weight: 700; text-align: center; color: var(--accent-ink); opacity: 0; background: var(--surface); }
.sc-lens.is-on { opacity: 1; }
.sc-bracket { position: absolute; right: 6%; top: 14%; bottom: 8%; width: 10px; border-radius: 6px; background: var(--fill-2); }
.sc-bracket span { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--navy-900); transition: height var(--t-slow) var(--ease); }
.sc-bracket small { position: absolute; top: -18px; right: -6px; white-space: nowrap; font-size: 10.5px; color: var(--muted); font-weight: 700; }
.sc-pointer { width: 0; height: 0; border-style: solid; border-width: 9px 14px 9px 0; border-color: transparent var(--coral) transparent transparent; }
.sc-rpa { --sc-h: 260px; }
.sc-box { font-size: 12px; min-width: 64px; }
.sc-human { border-style: dashed; }
.sc-exception { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 4; transition: stroke var(--t-mid); }
.sc-exception.is-on { stroke: var(--coral); stroke-dasharray: none; stroke-width: 3; }
.sc-doc { background: var(--amber); color: var(--navy-900); margin-top: 0; }
.sc-search { --sc-h: 340px; }
.sc-query { position: absolute; left: 4%; right: 4%; top: 6%; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: var(--r2); background: var(--navy-950); font-family: var(--font-mono); font-size: 12px; }
.sc-query > * { opacity: .25; color: var(--white); padding: 3px 8px; border-radius: var(--r1); transition: opacity var(--t-mid), transform var(--t-mid) var(--ease); transform: translateY(4px); }
.sc-query span { background: var(--on-dark-fill-strong); }
.sc-query .is-on { opacity: 1; transform: none; }
.sc-added { background: var(--accent-ink) !important; }
.sc-result { width: 40%; font-size: 12px; }
.sc-result[data-state="waiting"] { opacity: .35; }
.sc-result[data-state="matched"] { border-color: var(--success); }
.sc-result[data-state="flagged"] { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }
.sc-result[data-state="missed"] { border-style: dashed; border-color: var(--amber); background: var(--cream); }
.scene .sc-focusbox { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 42px; transform: translate(-50%, -50%); border: 2px solid var(--amber); border-radius: var(--r2); box-shadow: 0 0 0 4px var(--d3-soft); pointer-events: none; z-index: 3; transition: left var(--t-slow) var(--ease), top var(--t-slow) var(--ease), width var(--t-slow) var(--ease); }
.sc-count { position: absolute; right: 5%; bottom: 4%; font-weight: 700; color: var(--accent-ink); }
.sc-results { --sc-h: 220px; }
.sc-map-col { padding-bottom: 6px; border-bottom: 2px solid var(--border); width: 30%; text-align: center; }
.sc-mapcard { width: 26%; font-size: 12.5px; }
.sc-mapcard[data-col="0"] { border-color: var(--success); }
.sc-mapcard[data-col="1"] { border-color: var(--amber); }
.sc-mapcard[data-col="2"] { border-color: var(--danger); color: var(--danger); }
.sc-mapcard.is-hidden { opacity: 0; }
.sc-branch { --sc-h: 360px; }
.sc-side { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.sc-alt { opacity: .45; border-style: dashed; font-weight: 500; }
.sc-box.is-option { opacity: 1; border-color: var(--coral); color: var(--danger); }
.sc-marker-dot { z-index: 2; width: 16px; height: 16px; margin-left: -60px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--d6-soft); }
.sc-repair { --sc-h: 330px; }
.sc-weak { position: absolute; left: 6%; right: 6%; top: 6%; margin: 0; font-size: 14px; color: var(--muted); }
.sc-weak span { background-image: linear-gradient(var(--danger), var(--danger)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 55%; transition: background-size var(--t-slow) var(--ease); }
.sc-weak.is-on span { background-size: 100% 2px; }
.sc-compose { position: absolute; left: 6%; right: 6%; top: 46%; bottom: 4%; border-radius: var(--r2); border: 2px dashed var(--border-strong); background: var(--surface); }
.sc-compose small { position: absolute; left: 10px; top: -10px; padding: 0 6px; background: var(--surface); font-weight: 700; color: var(--muted); font-size: 11px; }
.sc-part { width: 28%; font-size: 11.5px; font-weight: 600; background: var(--cream); }
.sc-part.is-on { width: 84%; background: var(--surface); text-align: left; font-size: 13.5px; font-weight: 500; }
.sc-part.is-current { background: var(--accent-soft); color: var(--navy-900); }
.sc-source { --sc-h: 330px; }
.sc-funnel { position: absolute; left: 14%; width: 62%; top: 4%; bottom: 4%; clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%); background: linear-gradient(180deg, var(--accent-soft), var(--fill-2)); }
.sc-funnel i { display: none; }
.sc-reject { color: var(--danger); }
.scene .sc-source { width: 22%; font-size: 12px; }
.sc-source.is-out { opacity: .55; text-decoration: line-through; border-color: var(--danger); }
.sc-source.is-verified { border-color: var(--success); background: var(--success-soft); }
.sc-level { position: absolute; left: 4%; bottom: 4%; padding: 4px 10px; border-radius: var(--pill); background: var(--navy-900); color: var(--white); font-weight: 700; font-size: 12px; }
.sc-frame { position: absolute; left: 44%; right: 4%; top: 6%; bottom: 4%; border-radius: var(--r2); background: var(--navy-950); }
.sc-frame small { position: absolute; left: 12px; top: 6px; color: var(--on-dark-accent); font-weight: 700; font-size: 11px; text-transform: uppercase; }
.sc-frame i { position: absolute; left: 6%; right: 6%; top: calc(10% + var(--i) * 20.6%); height: 15%; border: 1px dashed var(--on-dark-line-strong); border-radius: var(--r1); }
.sc-block { z-index: 1; width: 36%; font-size: 12px; }
.sc-block.is-on { width: 44%; }
.sc-journey { --sc-h: 300px; background: var(--navy-950); border-color: var(--navy-950); }
.sc-journey .sc-seg-base { stroke: var(--on-dark-line-strong); }
.sc-journey .sc-seg { stroke: var(--gold); }
.sc-tile { width: 21%; min-height: 64px; display: grid; align-content: center; gap: 2px; padding: 8px; border-radius: var(--r2); background: var(--scene-tile); border: 1px solid var(--scene-tile-line); color: var(--on-dark-muted); font-size: 11.5px; font-weight: 600; text-align: center; }
.sc-tile b { font-family: var(--font-mono); color: var(--on-dark-accent); }
.sc-tile.is-on { background: var(--scene-tile-live); border-color: var(--gold); color: var(--white); }
.sc-tile.is-current { box-shadow: 0 0 0 3px var(--gold); }
.sc-beam { z-index: 2; width: 14px; height: 14px; margin-top: -40px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--on-dark-fill-strong); }
.sc-doc-page { position: absolute; left: 44%; right: 6%; top: 4%; bottom: 4%; border-radius: var(--r1); background: var(--cream); border: 1px solid var(--border); box-shadow: var(--sh1); }
.sc-doc-page small { position: absolute; left: 12px; top: 8px; font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.sc-doc-page i { position: absolute; left: 8%; right: 8%; top: calc(22% + var(--i) * 17.4%); height: 2px; background: var(--border-soft); }
.sc-section { width: 34%; font-size: 12px; }
.sc-section.is-on { width: 44%; }
.sc-fallback { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.sc-fallback span.is-on { background: var(--accent-soft); }

/* ── 8. Motion ────────────────────────────────────────────────────────── */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slide-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes ring-in { from { transform: scale(.6) rotate(-60deg); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: var(--len, 130); } }
@keyframes draw-line { from { stroke-dashoffset: 1; } }
@keyframes line-x { from { transform: scaleX(0); } }
@keyframes line-y { from { transform: scaleY(0); } }
@keyframes node-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes card-reveal { from { opacity: 0; transform: rotate(-4deg) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pin-travel { from { left: calc(52px + (100% - 52px) * var(--srcf)); } }
@keyframes token-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
/* Page entry */
/* Section reveal: content is visible by default; JavaScript only adds the entrance once it is in view */
html[data-motion="on"] .reveal[data-revealed="true"] > :nth-child(2) { animation-delay: 70ms; }
html[data-motion="on"] .reveal[data-revealed="true"] > :nth-child(3) { animation-delay: 140ms; }
html[data-motion="on"] .reveal[data-revealed="true"] > :nth-child(4) { animation-delay: 210ms; }
html[data-motion="on"] .reveal[data-revealed="true"] > :nth-child(5) { animation-delay: 280ms; }
html[data-motion="on"] .reveal[data-revealed="true"] > :nth-child(n+6) { animation-delay: 350ms; }
/* Process diagrams: the line draws over 650 ms, then nodes appear 100 ms apart */
html[data-motion="on"] .process[data-revealed="true"]::before { animation: line-x 650ms var(--ease) both; }
html[data-motion="on"] .process[data-revealed="true"] .process-node { animation: node-in 320ms var(--ease) both; animation-delay: calc(var(--i) * 100ms); }
html[data-motion="on"] .flow[data-revealed="true"] li::before { animation: line-x 650ms var(--ease) both; animation-delay: calc(var(--i) * 100ms); transform-origin: left; }
html[data-motion="on"] .concept-map[data-revealed="true"] .map-lines line { animation: draw-line 650ms var(--ease) both; animation-delay: calc(var(--i) * 100ms); }
html[data-motion="on"] .concept-map[data-revealed="true"] .map-nodes li { animation: fade-in 320ms var(--ease) both; animation-delay: calc(200ms + var(--i) * 100ms); }
/* Vee: one entrance and one short wave; no continuous floating */
/* Reveal cards: up to 4 degrees, text never mirrored */
html[data-motion="on"] .reveal-card.is-revealed .rc-improved, html[data-motion="on"] .flip-card.is-revealed .fc-def { animation: card-reveal 320ms var(--ease) both; }
/* Progress: bars animate width (transitions above); the completion check draws once */
html[data-motion="on"] .day-complete .complete-ring circle { animation: draw .9s var(--ease) both; --len: 126; }
html[data-motion="on"] .day-complete .complete-ring path { animation: draw .5s var(--ease) .7s both; --len: 30; }
html[data-motion="on"] .score-ring { animation: ring-in .9s var(--ease) both; }
/* Hero backgrounds: two blurred shapes drift slowly inside hero sections only */
html[data-tab-hidden="true"] .hero::before, html[data-tab-hidden="true"] .hero::after, html[data-tab-hidden="true"] .day-head::before, html[data-tab-hidden="true"] .day-head::after { animation-play-state: paused; }
/* Feedback and tools */
html[data-motion="on"] .feedback, html[data-motion="on"] .evidence-note, html[data-motion="on"] .analysis { animation: fade-up .32s var(--ease) both; }
html[data-motion="on"] .quiz-stage.enter-next { animation: slide-next .32s var(--ease) both; }
html[data-motion="on"] .quiz-stage.enter-prev { animation: slide-prev .32s var(--ease) both; }
html[data-motion="on"] details[open] > *:not(summary) { animation: fade-up .26s var(--ease) both; }
html[data-motion="on"] .q-token, html[data-motion="on"] .bool-results li, html[data-motion="on"] .msg-part { animation: token-in .42s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
html[data-motion="on"] .msg-part { animation-delay: calc(var(--i) * 420ms); }
html[data-motion="on"] .tc-moving { animation: pin-travel 1.4s var(--ease) .2s both; }
html[data-motion="on"] .centre-grid li.is-live { animation: fade-up .5s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
/* Interactive cards lift slightly on hover */
.reveal-card:hover, .flip-card button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
/* Reduced motion (system setting or learner setting): no transforms, movement, flipping or line drawing;
   only a brief opacity change, and every final state stays visible. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: opacity 80ms linear !important; scroll-behavior: auto !important; }
html[data-motion="off"] .reveal-card:hover, html[data-motion="off"] .flip-card button:hover, html[data-motion="off"] button:hover, html[data-motion="off"] .pager-link:hover, html[data-motion="off"] .sector-card:hover, html[data-motion="off"] .profile-card:hover, html[data-motion="off"] .board-card:hover, html[data-motion="off"] .compare-card:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: opacity 80ms linear !important; scroll-behavior: auto !important; }
  button:hover, .button:hover, .pager-link:hover, .reveal-card:hover, .flip-card button:hover, .sector-card:hover, .profile-card:hover, .board-card:hover, .compare-card:hover { transform: none !important; }
}

/* ── 9. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .stepper .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper a { justify-content: center; padding: 6px 0; }
  .wb-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .wb-decide { grid-column: 2; }
  .lesson-layout { grid-template-columns: 190px minmax(0, 1fr); gap: var(--s5); }
  .def-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  :root { --title: var(--title-tablet); --section: var(--section-tablet); }
  .topnav .nav-long { display: none; }
  .topnav a, .topnav button { padding: 0 10px; }
  .hero-dashboard { grid-template-columns: 1fr; padding: var(--s7) var(--s6); }
  .time-plan { grid-template-columns: 1fr; }
  .lesson-layout { display: block; }
  .chapter-index { position: static; margin-bottom: var(--s5); padding: var(--s2) var(--s3); }
  .chapter-index ol { display: flex; gap: 6px; overflow-x: auto; border: 0; padding-bottom: 4px; }
  .chapter-index li { flex: none; }
  .chapter-index button { width: auto; margin: 0; border: 1px solid var(--border-strong); border-radius: var(--pill); padding: 6px 14px; white-space: nowrap; background: var(--surface); }
  .chapter-index button[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .lesson-main { max-width: none; }
  .day-motif { opacity: .2; right: -60px; }
  .four-d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pathway-list { grid-template-columns: 1fr; }
  .filters, .curriculum-page .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters .grow { grid-column: 1 / -1; }
  .briefing-outcomes { grid-template-columns: 1fr; }
  .brief-grid { grid-template-columns: 1fr; }
  .agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .score-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .centre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-tabs { display: flex; }
  .wb-grid { display: block; }
  .wb-grid > * { display: none; }
  .wb-grid.show-jd .wb-jd, .wb-grid.show-record .wb-record, .wb-grid.show-decide .wb-decide { display: block; }
  .wb-jd { position: static; max-height: none; }
  .studio-layout { grid-template-columns: 1fr; }
  .lab-resume { grid-template-columns: 1fr; }
  .sector-grid, .class-cards, .eco-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --title: var(--title-mobile); --section: var(--section-mobile); --card-pad: 18px; }
  html { scroll-padding-top: 16px; }
  .topbar-inner { flex-direction: column; align-items: stretch; gap: 0; padding: 6px var(--s4) 0; min-height: 0; }
  .brand { min-height: 40px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand-mark svg { width: 18px; height: 18px; }
  .topnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 -8px; }
  .topnav a, .topnav button { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 2px; font-size: 11.5px; border-radius: var(--r1); }
  .topnav .nav-long { display: none; }
  .topbar { position: static; }
  .page, .day { padding: var(--s5) var(--s4) var(--s8); }
  .hero-dashboard, .hero-complete { padding: var(--s6) var(--s5); }
  .hero-complete { flex-direction: column; align-items: flex-start; }
  .continue { grid-template-columns: 1fr; }
  .continue .vee { width: 96px; }
  .time-totals, .brief-time { grid-template-columns: 1fr 1fr; }
  .progress-path { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s4); }
  .progress-path::before, .progress-path::after { display: none; }
  .day-row { grid-template-columns: 44px minmax(0, 1fr); }
  .day-num { font-size: 28px; }
  .day-open { grid-column: 2; justify-self: start; width: auto; padding: 0 16px; border-radius: var(--r2); }
  .day-head { padding: var(--s4); }
  .day-meta { gap: 4px var(--s3); font-size: 13.5px; }
  .split, .evidence-mistake, .recap-grid, .record-split, .bool-results, .def-pair, .def-grid, .profile-cards, .context-panels, .decision-flow, .part-list, .completed-activities ul, .prior { grid-template-columns: 1fr; }
  .sector-grid, .class-cards, .eco-roles { grid-template-columns: 1fr 1fr; }
  .evidence-mistake > div + div { padding-left: 0; border-left: 0; padding-top: var(--s4); border-top: 1px solid var(--border); }
  .field-grid, .field-grid.three, .field-grid.four { grid-template-columns: 1fr; }
  .agenda, .agenda.compact { grid-template-columns: 1fr; }
  .agenda li { grid-template-columns: 34px minmax(0, 1fr); align-items: center; }
  .briefing { grid-template-columns: 1fr; padding: var(--s5) var(--s5) 0; }
  .briefing .vee { justify-self: end; width: 110px; margin-top: calc(-1 * var(--s5)); }
  .briefing-copy { padding-bottom: 0; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.next { text-align: left; justify-items: start; }
  .result-hero { flex-direction: column; align-items: flex-start; padding: var(--s3); }
  .score-ring { position: relative; right: auto; top: auto; margin: 0; }
  .day-complete { flex-direction: column; align-items: flex-start; padding-right: var(--s5); }
  .complete-ring { position: static; margin: 0; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .filters, .curriculum-page .filters { grid-template-columns: 1fr 1fr; }
  .subtopics li { grid-template-columns: 1fr; }
  .subtopics a { white-space: normal; }
  .vee-hint-toggle { width: 100%; min-width: 0; max-width: none; }
  .process { grid-template-columns: 1fr; gap: var(--s3); padding-left: 0; }
  .process::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; transform-origin: top; }
  html[data-motion="on"] .process[data-revealed="true"]::before { animation-name: line-y; }
  .process-node { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; column-gap: var(--s3); }
  .process-text { grid-column: 2; }
  .concept-map { height: auto; padding: var(--s6) var(--s4) var(--s4); }
  .map-stage { position: static; }
  .map-lines { display: none; }
  .map-center { position: static; transform: none; width: auto; margin: var(--s2) 0 var(--s3); }
  .map-nodes { display: grid; gap: var(--s2); }
  .map-nodes li { position: static; width: auto; transform: none; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .lab-task { top: 8px; }
  .scene { --sc-h: 320px !important; font-size: 11.5px; }
  .sc-lane span { width: 22%; font-size: 9.5px; letter-spacing: 0; text-transform: none; padding-right: 2px; }
  .sc-decompose.is-compact .sc-bin { width: 44%; height: 56px; border: 2px dashed var(--border-strong); border-radius: var(--r2); align-items: flex-start; padding: 2px 0 0; font-size: 9.5px; }
  .sc-decompose.is-compact .sc-phrase { max-width: 46%; width: 46%; font-size: 10.5px; }
  .sc-decompose.is-compact .sc-phrase.is-on { max-width: 40%; width: 40%; padding: 3px 6px; font-size: 10px; }
  .sc-decompose.is-compact > .sc-col-label { display: none; }
  .sc-card, .sc-chip, .sc-box { padding: 5px 7px; font-size: 11px; }
  .sc-cal-card, .sc-fork-card, .sc-result { font-size: 11px; }
  .sc-tile { font-size: 10px; min-height: 58px; }
  /* Tables stay inside their labelled scroll container; rows become stacked comparison cards */
  .table-wrap { border: 0; background: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr { margin-bottom: var(--s3); padding: var(--s3); border-radius: var(--r2); background: var(--surface); border: 1px solid var(--border); }
  .table-wrap th, .table-wrap td { padding: 4px 0; border: 0; }
  .table-wrap td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .boundary-table tr { display: grid; gap: var(--s2); }
  .boundary-table td { padding: var(--s2) var(--s3); border-radius: var(--r2); }
  .boundary-table td:nth-child(1) { background: var(--success-soft); }
  .boundary-table td:nth-child(2) { background: var(--accent-soft); }
  .boundary-table td:nth-child(3) { background: var(--warning-soft); }
  .matrix-grid { grid-template-columns: 84px repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: 92px repeat(var(--rows), 44px) 44px; }
  .mx-cells { left: 84px; top: 92px; }
  .mx-dot { top: calc((var(--r) + .5) * 44px); width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 11px; }
  .mx-col { writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 2px; font-size: 10.5px; border-left: 0; border-right: 1px solid var(--border-soft); }
  .mx-row { font-size: 10.5px; padding: 0 6px; }
  .pathway-list li { grid-template-columns: 28px minmax(0, 1fr); }
  .pathway-list select { grid-column: 2; }
  .result-actions .spacer { display: none; }
  .quiz-nav .primary { flex: 1 1 100%; }
  .task-nav { flex-direction: column; align-items: stretch; }
  .task-nav .primary { order: -1; }
  .centre-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .topnav a, .topnav button { font-size: 10.5px; }
  .topnav .icon { width: 16px; height: 16px; }
  .hero h1 { font-size: 30px; }
  .progress-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stop-dot { width: 44px; height: 44px; font-size: 15px; }
  .levels { grid-template-columns: 1fr; }
  .four-d-grid { grid-template-columns: 1fr; }
  .score-facts { grid-template-columns: 1fr; }
  .filters, .curriculum-page .filters { grid-template-columns: 1fr; }
  .sector-grid, .class-cards, .eco-roles, .pipeline, .time-totals, .brief-time { grid-template-columns: 1fr; }
  .dialog { padding: var(--s5); }
}
@media (max-width: 389px) {
  .vee-hint-toggle { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .stepper ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .task-dots button, .quiz-map button { width: 44px; }
}

/* ── 10. Day themes: accents only; colours come from the tokens above ── */
.theme-d1 { --accent: var(--d1-accent); --accent-ink: var(--d1-ink); --accent-soft: var(--d1-soft); }
.theme-d2 { --accent: var(--d2-accent); --accent-ink: var(--d2-ink); --accent-soft: var(--d2-soft); }
.theme-d3 { --accent: var(--d3-accent); --accent-ink: var(--d3-ink); --accent-soft: var(--d3-soft); }
.theme-d4 { --accent: var(--d4-accent); --accent-ink: var(--d4-ink); --accent-soft: var(--d4-soft); }
.theme-d5 { --accent: var(--d5-accent); --accent-ink: var(--d5-ink); --accent-soft: var(--d5-soft); }
.theme-d6 { --accent: var(--d6-accent); --accent-ink: var(--d6-ink); --accent-soft: var(--d6-soft); }
.theme-d7 { --accent: var(--d7-accent); --accent-ink: var(--d7-ink); --accent-soft: var(--d7-soft); }
.theme-d8 { --accent: var(--d8-accent); --accent-ink: var(--d8-ink); --accent-soft: var(--d8-soft); }

/* ───────── V9 corrections: lesson extras, record terms, resources, pathway ───────── */
.record-terms { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r2); background: var(--fill); border: 1px solid var(--border-soft); }
.record-terms summary { display: flex; gap: 6px; align-items: center; min-height: 44px; font-weight: 650; cursor: pointer; }
.record-terms dl { margin: var(--s2) 0 0; display: grid; gap: var(--s2); }
.record-terms dt { font-weight: 750; color: var(--navy-900); }
.record-terms dd { margin: 0; font-size: 14.5px; }
.record-terms dd span { display: block; margin-top: 2px; }
.extra { margin-top: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r3); background: var(--surface); border: 1px solid var(--border); }
.extra > h4 { margin: 0 0 var(--s2); font-size: 19px; }
.walk-steps { margin: var(--s3) 0; padding-left: 1.4em; display: grid; gap: 6px; }
.sim-result { margin: var(--s4) 0; padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--cream); border-left: 4px solid var(--accent); }
.sim-result figcaption { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--s2); }
.sim-result dl, .doc-lines { margin: 0; display: grid; gap: var(--s2); }
.sim-result dt, .doc-lines dt { font-weight: 700; color: var(--navy-900); }
.sim-result dd, .doc-lines dd { margin: 0; }
.checklist-block { margin: var(--s3) 0; }
.handoff { display: flex; gap: 8px; align-items: flex-start; margin: var(--s3) 0 0; padding: 10px 12px; border-radius: var(--r2); background: var(--fill); font-size: 14.5px; }
.handoff .icon { flex: none; margin-top: 3px; color: var(--accent-ink); }
.profile-lines { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.profile-lines blockquote { margin: 0; padding: 10px 14px; border-left: 4px solid var(--border-strong); background: var(--fill); border-radius: 0 var(--r2) var(--r2) 0; }
.profile-lines blockquote p { margin: 0; }
.interpretation { margin: var(--s3) 0; }
.interpretation summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.extra-check { margin-top: var(--s3); }
.doc { margin: var(--s3) 0; padding: var(--s4); border-radius: var(--r2); background: var(--white); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-soft); }
.doc header { padding-bottom: var(--s2); margin-bottom: var(--s3); border-bottom: 1px solid var(--border); }
.doc h5 { margin: 0; font-size: 17px; }
.doc-lines > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px dashed var(--border-soft); }
.doc-lines dd p { margin: 0; }
.doc-note { display: flex; gap: 6px; margin-top: 4px !important; font-size: 13.5px; color: var(--accent-ink); }
.doc-note .icon { flex: none; margin-top: 2px; }
.classify { margin-top: var(--s4); }
.turns { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.turns li { padding: 10px 14px; border-radius: var(--r2); background: var(--fill); max-width: 680px; }
.turns li.is-recruiter { background: var(--accent-soft); margin-left: auto; }
.turns p { margin: 0; }
.turn-note { display: flex; gap: 6px; margin-top: 4px !important; font-size: 13.5px; color: var(--muted); }
.turn-note .icon { flex: none; margin-top: 2px; }
.assembly-parts { margin: var(--s3) 0; padding-left: 1.4em; display: grid; gap: var(--s3); }
.handoff-card { border: 2px dashed var(--border-strong); background: var(--canvas); }
.handoff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.handoff-grid ul { margin: 0; padding-left: 1.1em; }
.resource-list { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.resource-list a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 650; }
.resource-meta { margin: 0; font-size: 13.5px; color: var(--muted); }
.resource-note { margin: 2px 0 0; font-size: 13.5px; color: var(--warning-ink); }
.resources li > div { flex: 1; padding: 4px 0; }
.resources li > div a { min-height: 44px; }
.unlinked { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r2); background: var(--fill); }
.unlinked ul { margin: 0; padding-left: 1.1em; font-size: 14.5px; }
.see-also { margin: var(--s4) 0; }
.list-heading { font-size: 20px; margin: var(--s5) 0 var(--s2); }
.pathway-text { display: grid; gap: 2px; min-width: 0; }
.pathway-detail summary { min-height: 44px; display: flex; align-items: center; font-size: 13.5px; color: var(--accent-ink); cursor: pointer; }
.pathway-detail p { margin: 2px 0; font-size: 13.5px; }
.time-totals .is-total { grid-column: 1 / -1; background: var(--accent-soft); }
@media (max-width: 767px) {
  .extra { padding: var(--s3); }
  .doc-lines > div { grid-template-columns: 1fr; gap: 2px; }
  .turns li.is-recruiter { margin-left: var(--s4); }
  .bool-output { padding: var(--s3); }
}

/* ───────── V10 visual system: quiet page, white reading surfaces, tints only for evidence, decisions and feedback ───────── */
.hero::before, .hero::after, .day-head::before, .day-head::after { display: none; }
.hero { box-shadow: none; }
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--border-soft); }
button:hover:not(:disabled), .button:hover { transform: none; box-shadow: none; }
/* Reading measure and rhythm */
.chapter p, .lesson-section p, .scenario-brief p, .evidence-panel li, .day-brief p, .topic-note p, .example p, .extra > p, .reading p, .practice-head p { max-width: var(--reading); }
.lesson-main > * + *, .day-body > * + *, .page > * + *, .lesson-part > * + * { margin-top: var(--section-gap); }
.chapter, .check-block, .lesson-section, .practice-task, .evidence-panel { margin-top: var(--section-gap); }
.chapter-head h3 { font-size: 23px; }
/* White reading surfaces without decorative shadows */
.chapter, .lesson-section, .day-brief, .practice-task, .practice-actions, .workbench, .time-plan, .next-step, .scenario-brief, .practice-head, .day-head, .in-simple, .lesson-part { background: var(--surface); box-shadow: none; }
.lesson-section, .scenario-brief, .next-step, .practice-actions, .lesson-part { border: 1px solid var(--border-soft); border-radius: var(--card-radius); padding: var(--card-pad); }
.in-simple { border: 0; border-left: 4px solid var(--accent); border-radius: 0; padding: var(--s2) 0 var(--s2) var(--s4); }
.example { background: transparent; border-left: 4px solid var(--accent); border-radius: 0; padding: var(--s1) 0 var(--s1) var(--s4); }
.example figcaption { margin-bottom: var(--s1); }
.annotation { margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--border); }
.annotation .label { display: block; }
.topic-note { margin: var(--s5) 0 0; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--r2); }
.topic-note p { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s2); font-size: 16px; }
.topic-note p:last-child { margin-bottom: 0; }
.topic-note .icon { flex: none; margin-top: 4px; color: var(--accent-ink); }
.callout.tip, .callout.warn { background: transparent; border: 1px solid var(--border); }
.sim-result, .handoff, .carried, .record-terms, .unlinked, .case-note { background: transparent; border: 1px solid var(--border); }
/* Tinted cards: scenario evidence, learner decisions and feedback only */
.evidence-panel { background: var(--accent-soft); border: 0; box-shadow: none; }
.check-block, .decision-panel, .extra-check, .assembly-parts, .classify, .self-review, .bool-compare { background: var(--fill); }
.write-task textarea { background: var(--surface); }
.check-block { border: 0; border-top: 4px solid var(--accent); box-shadow: none; }
.extra-check, .classify, .self-review { padding: var(--s3) var(--s4); border-radius: var(--r2); border: 0; }
.assembly-parts { padding: var(--s3) var(--s4) var(--s3) var(--s7); border-radius: var(--r2); }
/* No nested cards: activities inside a topic, and outputs inside a tool, are separated by a rule */
.extra, .bool-output, .record-history { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: var(--s5) 0 0; }
.chapter .extra { margin-top: var(--section-gap); }
.reflect { margin-top: var(--section-gap); padding: var(--s3) var(--s4); border: 1px dashed var(--border-strong); border-radius: var(--r2); }
.reflect > .label { margin-bottom: var(--s1); }
/* Homepage */
.hero-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s6); padding: var(--s7) var(--s7) var(--s6); }
.hero-scope { color: var(--on-dark-muted); font-weight: 600; }
.hero-actions { margin-top: var(--s5); }
.big { min-height: 52px; padding: 12px 26px; font-size: 18px; }
.hero .big { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }
.hero .big:hover:not(:disabled) { background: var(--navy-800); border-color: var(--on-dark-line-strong); }
.next-step h2 { font-size: 24px; }
.next-step .progress-path { margin-top: var(--s5); }
.days-section h2 { font-size: 24px; }
/* Day header progress line and briefing */
.day-progress-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s3); font-size: 15.5px; }
.day-progress-line a { font-weight: 650; }
.day-brief { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: start; }
.brief-main h3 { margin-top: var(--s5); font-size: 18px; }
.brief-deliverable { font-weight: 600; color: var(--navy-900); }
.brief-estimate { display: flex; gap: var(--s2); align-items: flex-start; }
.brief-estimate .icon { flex: none; margin-top: 5px; }
.briefing-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
/* Day 4 parts */
.lesson-part > h2 { font-size: 26px; }
.lesson-part .evidence-panel { margin-top: var(--s4); }
.lesson-part .evidence-panel h3 { display: flex; gap: var(--s2); align-items: center; font-size: 18px; }
.lesson-part .lesson-section { border: 0; padding: 0; }
/* Writing tasks */
.write-task textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r2); padding: var(--s3); font: inherit; min-height: 96px; }
.check-row { display: flex; gap: var(--s2); align-items: flex-start; min-height: 44px; padding: 6px 0; }
.check-row input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.self-review legend { font-weight: 700; color: var(--navy-900); padding: 0; }
/* Boolean comparison */
.bool-compare { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r2); }
.bool-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }
.bool-compare ul { margin: 0; padding-left: 1.1em; font-size: 15px; }
.term-hit { background: var(--mark); font-weight: 650; }
.cmp-lost .label { color: var(--danger); }
.cmp-noise .label { color: var(--warning-ink); }
/* Curriculum touchpoints */
.touchpoint { display: block; margin-top: 2px; }
.tp-supervised a::before { content: "◆ "; }
/* Visual text equivalent */
.visual-text { margin-top: var(--s3); }
.visual-text summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.visual-text ol { margin: 0; padding-left: 1.3em; }
/* Workbench: list, flexible record viewer, fixed decision panel; one page scroll only */
.wb-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: var(--s5); align-items: start; margin-top: var(--s4); }
.wb-tabs { display: none; }
.wb-list-title { font-weight: 700; color: var(--navy-900); margin-bottom: var(--s2); }
.wb-list .people-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow: visible; }
.wb-list .person { width: 100%; min-height: 52px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--s2); padding: 6px 8px; text-align: left; }
.wb-list .person .avatar { width: 32px; height: 32px; }
.person-text { display: grid; min-width: 0; }
.person-name { font-weight: 650; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.wb-list .person small { justify-content: flex-start; }
.wb-main { display: grid; gap: var(--s4); min-width: 0; }
.wb-brief { border: 1px solid var(--border); border-radius: var(--r3); padding: var(--s3) var(--s4); background: var(--surface); }
.wb-brief-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.wb-brief-head h4 { margin: 0; font-size: 17px; }
.wb-brief:not(.is-open) .wb-brief-body { display: none; }
.wb-brief-body { margin-top: var(--s3); font-size: 15.5px; }
.wb-brief-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.wb-brief h5 { margin-top: var(--s2); }
.wb-decide { min-width: 0; }
.wb-decide .decision-panel { padding: var(--s4); border-radius: var(--r3); }
.wb-next { display: flex; justify-content: flex-end; margin-top: var(--s4); }
@media (max-width: 1279px) { .wb-layout { grid-template-columns: 190px minmax(0, 1fr) 320px; } }
@media (max-width: 1023px) { .wb-layout { grid-template-columns: 180px minmax(0, 1fr); } .wb-decide { grid-column: 2; } .wb-brief-cols { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .wb-tabs { display: flex; margin: var(--s3) 0; }
  .wb-layout { display: block; }
  .wb-list .people-strip { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .wb-list .person { flex: none; width: 150px; }
  .show-jd .wb-record, .show-jd .wb-decide, .show-record .wb-brief, .show-record .wb-decide, .show-decide .wb-main { display: none; }
  .show-jd .wb-brief .wb-brief-body { display: block; }
  .show-jd .wb-brief-toggle { display: none; }
  .wb-next { justify-content: stretch; }
  .wb-next button { width: 100%; }
  .hero-dashboard { grid-template-columns: 1fr; padding: var(--s6) var(--s5); }
  .day-brief { grid-template-columns: 1fr; }
  .day-brief .vee { display: none; }
}
.wb-decide .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evidence-panel li { background: transparent; border: 0; box-shadow: none; padding: var(--s1) 0; }
.evidence-panel ul { padding-left: 1.2em; list-style: disc; }
/* The brief now sits on a white surface: criteria use light-surface colours */
.wb-brief .jd-criteria li { background: var(--fill); border: 1px solid var(--border-soft); }
.wb-brief .jd-criteria li::before { color: var(--accent-ink); }
.wb-brief .jd-criteria .lvl-strong { border-color: var(--success); } .wb-brief .jd-criteria .lvl-strong em { color: var(--success-ink); }
.wb-brief .jd-criteria .lvl-possible { border-color: var(--warning); } .wb-brief .jd-criteria .lvl-possible em { color: var(--warning-ink); }
.wb-brief .jd-criteria .lvl-none { border-color: var(--danger); } .wb-brief .jd-criteria .lvl-none em { color: var(--danger); }
.wb-brief .jd-criteria .lvl-verified em { color: var(--navy-900); }
.submit-panel { border-top: 0; padding-top: 0; margin-top: 0; }
/* Tinted fieldsets: keep the legend inside the tint instead of on the top edge. */
.extra-check > legend, .self-review > legend, .classify > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s2); }
.extra-check > legend + *, .self-review > legend + *, .classify > legend + * { clear: both; }
.tool-output:empty { display: none; }

/* ── Accounts: sign-in, request access, status screens, admin, import ── */
.topnav[hidden], .topnav [hidden], .callout[hidden], .field-error[hidden], .feedback[hidden] { display: none !important; }
.account-page { max-width: 600px; margin: 0 auto; padding: var(--s6) 0 var(--s7); }
.account-page.is-wide { max-width: var(--wide); }
.account-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); padding: var(--card-pad); }
.account-card h1 { font-size: var(--section); margin-bottom: var(--s3); }
.account-card > p { max-width: var(--reading); }
.account-actions { margin-top: var(--s5); }
.account-switch { margin: var(--s4) 0 0; font-size: var(--supporting); }
.account-message { font-size: 18px; font-weight: 600; color: var(--navy-900); }
.account-notice { margin: 0 0 var(--s4); }
.account-form { display: grid; gap: var(--s4); margin-top: var(--s4); }
.account-form .button-row { margin: 0; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-hint { margin: 4px 0 0; color: var(--muted); font-size: var(--supporting); }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: var(--supporting); font-weight: 600; }
.form-error { margin: 0; }
.status-line { min-height: 1.5em; color: var(--muted); }
.loading-card h1 { font-size: var(--section); }
.feedback.checking { background: var(--fill); border-color: var(--border-strong); color: var(--muted); }
.choice.is-checking, .chip-btn.is-checking { border-color: var(--border-strong); background: var(--fill); }
.evidence-note.checking { color: var(--muted); }
.admin-status { min-height: 1.5em; font-weight: 600; color: var(--navy-900); }
.admin-status:empty { min-height: 0; }
.admin-section { margin-bottom: var(--s6); }
.admin-section h2 .count { color: var(--muted); font-weight: 600; }
.admin-table table { min-width: 0; }
.admin-table td, .admin-table th { vertical-align: top; }
.admin-table .status-pill { font-weight: 700; }
.admin-table .status-pill.warn { color: var(--warning-ink); }
.admin-table .status-pill.ok { color: var(--success-ink); }
.button-row.tight { margin: 0; gap: 6px; }
.button-row.tight button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.audit-list { padding-left: var(--s5); }
.audit-list li { margin-bottom: 6px; }
.audit-list li > span { color: var(--muted); font-size: var(--supporting); }
.temp-password code { display: block; padding: var(--s3); border: 1px dashed var(--border-strong); border-radius: var(--r2); background: var(--fill); font: 700 22px/1.3 var(--font-mono); letter-spacing: .04em; word-break: break-all; color: var(--navy-900); }
.conflict-dialog { width: min(680px, calc(100vw - 32px)); overflow: auto; }
.conflict-item { border: 1px solid var(--border); border-radius: var(--r2); padding: var(--s3); margin: 0 0 var(--s3); }
.conflict-item legend { font-weight: 700; padding: 0 4px; }
.check-row { display: flex; gap: var(--s2); align-items: flex-start; min-height: 44px; padding: 6px 0; font-weight: 500; }
.check-row input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--navy-900); }
.import-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.import-compare h3 { font-size: 17px; }
.import-counts { padding-left: var(--s4); }
@media (max-width: 767px) {
  .account-page { padding-top: var(--s4); }
  .import-compare { grid-template-columns: 1fr; }
  .admin-table table, .admin-table thead, .admin-table tbody, .admin-table tr, .admin-table th, .admin-table td { display: block; width: 100%; }
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .admin-table tr { border: 1px solid var(--border); border-radius: var(--r2); padding: var(--s3); margin-bottom: var(--s3); background: var(--surface); }
  .admin-table td, .admin-table th { border: 0; padding: 4px 0; }
  .admin-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted); }
}
/* Administrators see one more navigation item: the phone bar sizes its columns to the visible items, and the tablet
   bar drops its icons so six labels fit beside the brand. */
@media (max-width: 767px) {
  .topnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .topnav.has-admin a, .topnav.has-admin button { padding: 0 8px; }
  .topnav.has-admin .icon { display: none; }
}