/* levelmax: "The Level Select" world. Tokens and components shared by every page.
   prototype/styles.css is the visual reference; keep the two in step. */
:root {
  --void: #0B0D12;         /* the cabinet: page ground */
  --panel: #141821;        /* cards, bars */
  --panel-2: #1C212C;      /* hover, inline code */
  --code: #10131A;         /* editor and code panes */
  --crt: #05070A;          /* save-slot screen only */
  --rule: #2A3140;         /* hairlines, decorative only */
  --rule-2: #3A4354;       /* control borders */
  --text: #EEF1F6;         /* 17:1 on void */
  --text-2: #B4BCCB;       /* 10:1 */
  --text-3: #8C95A6;       /* 6.6:1, lightest text allowed */
  --mute: #5A6475;         /* graphics only, never text */

  --max: #B87CFF;          /* neon violet: the signature. Text on it is void */
  --max-hi: #D6B4FF;
  --max-edge: #6A2FB8;     /* key-cap bottom edge */
  --max-ground: #1E1430;
  --max-dim: #A585E0;      /* secondary text on the CRT */

  --pass: #5EE08A;  --pass-ground: #0F2117;
  --fail: #FF6B6B;  --fail-ground: #2A1214;
  --hazard: #FFD23F; --hazard-ground: #1A170C; --hazard-edge: #6B5A1A; /* traps only, never body text */
  --focus: #6FD3FF;

  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r: 3px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--text); font: 400 1.0625rem/1.6 var(--font); }
::selection { background: var(--max); color: var(--void); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
a { color: var(--max); }
a:hover { color: var(--max-hi); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
code, pre, textarea { font-variant-ligatures: none; }
code { font-family: var(--mono); }
:not(pre) > code { font-size: .9em; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--r); padding: 1px 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }

/* ---- Top bar ---- */
.topbar { border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 700 1.3rem var(--display); letter-spacing: -0.01em; }
.brand:hover { color: var(--text); }
.brand svg { width: 24px; height: 24px; }
.brand .tld { color: var(--max); }
.nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .94rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a.key, .nav a.key:hover { color: var(--void); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--max); padding-bottom: 2px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r); background: var(--max); color: var(--void) !important; font: 700 1rem var(--display); text-decoration: none; }
@media (max-width: 720px) { .nav .nl { display: none; } }

/* ---- Buttons: key caps ---- */
.key, .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r); font: 700 1rem/1 var(--display); text-decoration: none; cursor: pointer; }
.key { background: var(--max); color: var(--void); border: 0; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 5px 0 var(--max-edge); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.key:hover { color: var(--void); transform: translateY(2px); box-shadow: 0 3px 0 var(--max-edge); }
.key:active { transform: translateY(5px); box-shadow: 0 0 0 var(--max-edge); }
.key svg { width: 14px; height: 14px; }
.btn-quiet { background: transparent; color: var(--text); border: 2px solid var(--rule-2); font-weight: 600; }
.btn-quiet:hover { color: var(--text); background: var(--panel-2); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .94rem; }
.btn-link { background: none; border: 0; color: var(--text-2); font: 600 .94rem var(--display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; padding: 0 10px; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .key { transition: none; } .key:hover, .key:active { transform: none; } }

/* ---- Chips and plates (the only place caps live) ---- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 600 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule-2); border-radius: var(--r); padding: 5px 8px 4px; color: var(--text-2); white-space: nowrap; }
.chip.max { border-color: var(--max); color: var(--max); }
.chip.pass { border-color: rgba(94,224,138,.45); color: var(--pass); }
.chip.fail { border-color: rgba(255,107,107,.45); color: var(--fail); }
.plate { display: inline-block; font: 600 .72rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; border-radius: 2px; padding: 4px 7px 3px; background: var(--mute); color: var(--text); white-space: nowrap; }
.plate.max { background: var(--max); color: var(--void); }
.plate.world { color: var(--void); }

/* ---- Section heads ---- */
.band { padding-top: 112px; }
.sec-h { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; }
.sec-lede { margin: 14px 0 0; font-size: 1.15rem; color: var(--text-2); max-width: 56ch; }

/* ---- Panels ---- */
.panel { border: 1px solid var(--rule); background: var(--panel); border-radius: 6px; }

/* ---- Trap ahead (the gotcha callout) ---- */
.trap { border: 1px solid var(--hazard-edge); background: var(--hazard-ground); border-radius: 4px; overflow: hidden; max-width: 68ch; }
.trap::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, var(--void) 10px 20px); }
.trap .body { padding: 14px 16px 16px; }
.trap .head { display: flex; gap: 8px; align-items: center; font: 700 1rem var(--display); color: var(--hazard); }
.trap .head svg { width: 18px; height: 18px; }
.trap p { margin: 6px 0 0; font-size: .94rem; }

/* ---- Pixel icons (8x8 grid) ---- */
.px { width: 14px; height: 14px; flex: none; }

/* ---- Footer ---- */
.foot { margin-top: 96px; border-top: 1px solid var(--rule); background: var(--code); }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; font-size: .88rem; color: var(--text-3); }

/* ==== Lesson page (prototype/lesson.html geometry) ==== */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.lbar .left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }.lbar .brand { font-size: 1.05rem; }.lbar .brand svg { width: 20px; height: 20px; }.lbar .wname { font: 600 .94rem var(--display); color: var(--text-2); }.strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }.strip a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 2px; text-decoration: none; font: 600 .72rem var(--mono); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--rule-2); }.strip a.done { background: #FFB13D; color: var(--void); box-shadow: none; }.strip a.here { background: var(--max); color: var(--void); box-shadow: none; }.lbar .avatar { width: 32px; height: 32px; }
.panes { display: grid; grid-template-columns: var(--split, 44%) 10px minmax(380px, 1fr); min-height: 0; }.pane { min-height: 0; }.read { overflow: auto; padding: 32px 36px 48px; }.read h1 { font-size: clamp(1.9rem, 2.8vw, 2.4rem); line-height: 1.08; letter-spacing: -0.03em; margin: 14px 0 16px; }.read h2 { font-size: 1.25rem; margin: 36px 0 12px; }.read .prose { max-width: 68ch; }.read .prose p { margin: 0 0 14px; }.read .prose .trap { margin: 24px 0; }.read .prose .trap .body > p { margin: 6px 0 0; }.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; container-type: inline-size; }.cpane { margin: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; min-width: 0; }.cpane.after { border-color: var(--max); }.cpane figcaption { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--rule); font: 400 .8rem var(--mono); color: var(--text-2); }.cpane pre { margin: 0; padding: 12px 14px; background: var(--code); font: .8rem/1.65 var(--mono); overflow-x: auto; tab-size: 4; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 24px; max-width: 68ch; }.quiz legend { padding: 0; margin-bottom: 12px; }.quiz .opts { display: flex; flex-direction: column; gap: 8px; }.quiz label { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--panel); font: .86rem var(--mono); cursor: pointer; }.quiz label:hover { background: var(--panel-2); }.quiz input { accent-color: var(--max); width: 16px; height: 16px; }.quiz label.right { border-color: var(--pass); box-shadow: inset 0 0 0 1px var(--pass); background: var(--pass-ground); }.quiz label.wrong { border-color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail); background: var(--fail-ground); }.quiz .verdict { margin-left: auto; font: 600 .88rem var(--font); display: flex; gap: 6px; align-items: center; }.quiz label.right .verdict { color: var(--pass); }.quiz label.wrong .verdict { color: var(--fail); }.quiz .actions { margin-top: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }.quiz .why { margin: 12px 0 0; font-size: .92rem; color: var(--text-2); }
.split { background: var(--panel); display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; }.split::after { content: ""; width: 2px; height: 36px; background: var(--rule-2); border-radius: 2px; }.split:hover::after, .split:focus-visible::after { background: var(--max); }
.code { display: flex; flex-direction: column; background: var(--code); border-left: 1px solid var(--rule); }.brief { padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--panel); }.brief .k { font: 600 .72rem var(--mono); letter-spacing: .08em; color: #FFB13D; }.brief p { margin: 2px 0 0; font-size: .94rem; }.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--panel); overflow-x: auto; }.tabs button { font: 400 .8rem var(--mono); background: transparent; color: var(--text-2); border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; cursor: pointer; white-space: nowrap; display: flex; gap: 6px; align-items: center; }.tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--max); }.tabs .ro { font-size: .66rem; letter-spacing: .06em; color: var(--text-3); border: 1px solid var(--rule-2); border-radius: 2px; padding: 1px 4px; }.tabpanel { flex: 1; min-height: 0; display: flex; }.tabpanel[hidden] { display: none; }
.runbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--panel); flex-wrap: wrap; }.runbar .l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }.runbar .key { min-height: 44px; }.hints { padding: 0 18px; font-size: .9rem; color: var(--text-2); }.hints ol { margin: 10px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }.out { border-top: 1px solid var(--rule); height: 240px; overflow: auto; padding: 14px 18px 16px; font-size: .88rem; }.out .empty { color: var(--text-3); margin: 0; }.out .blk + .blk { border-top: 1px solid var(--panel-2); padding-top: 12px; margin-top: 12px; }.out .bh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }.out .bh strong { font: 700 .95rem var(--display); }.out ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font: .78rem/1.5 var(--mono); }.out li { display: flex; gap: 8px; align-items: baseline; color: var(--text-2); }.out li.fail { color: var(--text); }.out li .px { position: relative; top: 2px; }.out li.pass .px { color: var(--pass); }.out li.fail .px { color: var(--fail); }.out .why { color: var(--text-3); display: block; }.out .err { margin: 0; font: .78rem/1.55 var(--mono); color: var(--text); }.out .err b { color: var(--fail); font-weight: 600; margin-right: 8px; }.out .ok { color: var(--pass); font: 600 .8rem var(--mono); }.busy { display: flex; gap: 10px; align-items: center; color: var(--text-2); font: .82rem var(--mono); }.busy i { width: 60px; height: 8px; background: linear-gradient(90deg, var(--max) 0 33%, var(--panel-2) 33%); background-size: 300% 100%; }.clear { border: 2px solid var(--max); background: var(--max-ground); border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }.clear strong { font: 700 1.3rem var(--display); color: var(--max); letter-spacing: .04em; }.clear span { display: block; font-size: .88rem; color: var(--text-2); }
.sbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 20px; border-top: 1px solid var(--rule); background: var(--panel); flex-wrap: wrap; }.sbar a { display: flex; gap: 8px; align-items: center; color: var(--text-2); text-decoration: none; font-size: .9rem; min-height: 44px; }.sbar a.next { color: var(--text); font-weight: 600; }.sbar .pos { font: 600 .72rem var(--mono); letter-spacing: .08em; color: var(--text-3); }.mswitch { display: none; }
@media (prefers-reduced-motion: no-preference) { .busy i { animation: load 1s steps(3) infinite; } @keyframes load { to { background-position: -300% 0; } } }
@media (max-width: 1023px) { .panes { grid-template-columns: 1fr; }.split { display: none; }.panes[data-show="read"] .code, .panes[data-show="code"] .read { display: none; }.code { border-left: 0; }.mswitch { display: flex; gap: 4px; }.mswitch button { min-height: 40px; padding: 0 14px; border: 2px solid var(--rule-2); background: transparent; color: var(--text-2); font: 600 .9rem var(--display); border-radius: var(--r); cursor: pointer; }.mswitch button[aria-pressed="true"] { border-color: var(--max); color: var(--text); }.sbar .pos { display: none; }.read { padding: 24px 16px 40px; } }
@container (max-width: 560px) { .pair { grid-template-columns: 1fr; } }

/* ==== Level select (prototype/learn.html) ==== */
.dash { padding-top: 48px; padding-bottom: 96px; }.greet { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 28px; }.top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.save { background: var(--crt); border: 2px solid var(--rule); border-radius: 8px; padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }.save .meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 600 .75rem var(--mono); letter-spacing: .1em; color: var(--max-dim); }.save .where { font: 400 .88rem var(--mono); letter-spacing: .06em; color: var(--max-dim); text-transform: uppercase; }.save .title { margin-top: 6px; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--display); color: var(--max); }.save .chip { border-color: rgba(184,124,255,.4); color: var(--max); }
.hud { display: flex; flex-direction: column; gap: 12px; }.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.stat { padding: 16px 18px; }.stat .k, .ach .k { font: 600 .72rem var(--mono); letter-spacing: .08em; color: var(--text-3); }.stat .v { font: 700 2.2rem/1.1 var(--display); font-variant-numeric: tabular-nums; }.stat .v small { font-size: 1.2rem; color: var(--text-3); }.ach { padding: 16px 18px; flex-grow: 1; }.ach ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }.ach li { display: flex; gap: 12px; align-items: center; }.ach .badge { width: 30px; height: 30px; flex: none; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: var(--void); }.ach strong { font: 700 1rem var(--display); }.ach small { display: block; font-size: .88rem; color: var(--text-2); }
.sel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 72px 0 24px; border-bottom: 2px solid var(--text); padding-bottom: 12px; }.sel-head h2 { font-size: 1.6rem; }.sel-head span { font-size: .88rem; color: var(--text-3); }.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; }.card { overflow: hidden; scroll-margin-top: 24px; }.card .stripe { height: 6px; }.card .hd { padding: 16px 18px 10px; }.card .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }.card .status { font: 600 .75rem var(--mono); color: var(--text-3); }.card .status.cleared { color: var(--pass); }.card h3 { margin: 10px 0 12px; font-size: 1.25rem; }.card .segs { display: flex; gap: 3px; }.card .segs span { flex: 1; height: 8px; border-radius: 1px; background: var(--rule); }.card ol { list-style: none; padding: 4px 8px 12px; margin: 0; }.card li a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--r); text-decoration: none; color: var(--text); min-height: 36px; }.card li a:hover { background: var(--panel-2); color: var(--text); }.card li.done a { color: var(--text-2); }.card .ic { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; }.card li.done .ic { color: var(--pass); }.card .hollow { width: 10px; height: 10px; border: 2px solid var(--mute); display: block; }.card .num { font: 600 .75rem var(--mono); color: var(--text-3); width: 30px; flex: none; }.card .t { font-size: .9rem; flex: 1; }.card .tag { font: 600 .66rem var(--mono); letter-spacing: .08em; border-radius: 2px; padding: 2px 5px; }.card .tag.p1 { background: var(--max); color: var(--void); }
@media (prefers-reduced-motion: no-preference) { .save .cursor::after { content: "_"; animation: blink 1s steps(2, jump-none) infinite; } @keyframes blink { 50% { opacity: 0; } } }
@media (max-width: 860px) { .top { grid-template-columns: 1fr; } }

/* ==== Ported app pieces (templ + htmx + CodeMirror) ==== */
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--max); color: var(--void); padding: 10px 14px; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 8px; color: var(--void); }
.app { height: 100vh; height: 100dvh; }

/* Syntax: chroma classes, same palette as the CodeMirror theme in web/editor */
.hl { color: #D5DAE3; }
.hl .k, .hl .kc, .hl .kd, .hl .kn, .hl .kp, .hl .kr, .hl .cp, .hl .ow { color: #FF9AC1; font-weight: 600; }
.hl .kt, .hl .nc, .hl .nn, .hl .nb, .hl .bp { color: #6FD3FF; }
.hl .s, .hl .s1, .hl .s2, .hl .sb, .hl .sc, .hl .se, .hl .sh, .hl .si, .hl .sx, .hl .dl { color: #9BE58A; }
.hl .nv, .hl .vc, .hl .vg, .hl .vi { color: #FFB86B; }
.hl .m, .hl .mf, .hl .mh, .hl .mi, .hl .mo, .hl .il { color: #F2C66D; }
.hl .c, .hl .c1, .hl .cm, .hl .cs, .hl .ch, .hl .sd { color: var(--text-3); font-style: italic; }
.hl .nf, .hl .fm { color: var(--text); font-weight: 600; }
.read pre.hl.snippet, .read .prose pre { margin: 0 0 16px; padding: 12px 14px; background: var(--code); border: 1px solid var(--rule); border-radius: 6px; font: .8rem/1.65 var(--mono); overflow-x: auto; tab-size: 4; max-width: 68ch; }

/* Callouts. .trap lives above; tips and framework corners share .aside */
.read .prose .aside, .read .prose .recap { margin: 24px 0; max-width: 68ch; border-radius: 4px; }
.aside { border: 1px solid var(--rule-2); border-left: 4px solid var(--max); background: var(--panel); }
.aside .body, .recap .body { padding: 14px 16px 16px; }
.aside .head, .recap .head { display: flex; gap: 8px; align-items: center; font: 700 1rem var(--display); color: var(--max); }
.aside p, .recap p, .recap li { font-size: .94rem; }
.aside p, .recap p { margin: 6px 0 0; }
.recap { border: 2px solid var(--max); background: var(--max-ground); }
.read .prose .trap .body > :first-child + * { margin-top: 6px; }
.meme { margin: 24px 0; max-width: 68ch; background: var(--crt); border: 2px solid var(--rule); border-radius: 8px; padding: 16px 18px; }
.meme table { border-collapse: collapse; width: 100%; font: .86rem/1.5 var(--mono); }
.meme th { text-align: left; color: var(--max); font-weight: 600; padding: 4px 16px 4px 0; white-space: nowrap; vertical-align: top; }
.meme td { color: var(--text-2); padding: 4px 0; }
.meme figcaption { margin-top: 10px; font-size: .88rem; color: var(--text-3); }
.diagram { margin: 24px 0; overflow-x: auto; background: var(--code); border: 1px solid var(--rule); border-radius: 6px; padding: 12px; max-width: 68ch; }
.read .prose table:not(.meme table) { border-collapse: collapse; margin: 0 0 16px; font-size: .92rem; }
.read .prose th, .read .prose td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; }

/* Prose-only levels: one centred column, no code pane */
.panes.solo { grid-template-columns: minmax(0, 1fr); }
.panes.solo .read { width: 100%; max-width: 820px; margin: 0 auto; }
.read .next-up, .read .read-done .clear { margin-top: 32px; }
.read .next-up { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.read-done [hidden] { display: none; }

/* Quiz feedback (server-rendered by htmx) */
.quiz .why { display: flex; gap: 8px; align-items: baseline; }
.quiz .why.ok .px { color: var(--pass); }
.quiz .why.no .px { color: var(--fail); }
.quiz .score { font: 600 .9rem var(--display); }
.quiz .score:focus { outline: none; }

/* Challenge brief and file tabs */
.brief .task p { margin: 4px 0 0; font-size: .94rem; }
.brief details { margin-top: 8px; font-size: .9rem; color: var(--text-2); }
.brief summary { cursor: pointer; font: 600 .8rem var(--mono); letter-spacing: .06em; color: var(--text-2); }
.editor { flex: 1; min-width: 0; min-height: 0; display: flex; }
.editor .cm-editor { flex: 1; min-width: 0; }
.editor textarea { flex: 1; margin: 0; padding: 14px 16px; border: 0; resize: none; background: var(--code); color: var(--text); font: .82rem/1.7 var(--mono); tab-size: 4; white-space: pre; }
.readonly { flex: 1; overflow: auto; margin: 0; padding: 14px 16px; font: .82rem/1.7 var(--mono); tab-size: 4; }
.hints li[hidden] { display: none; }
.hints p { margin: 0; }

/* Runner output */
.busy.htmx-indicator { display: none; }
.htmx-request .busy.htmx-indicator, .busy.htmx-indicator.htmx-request { display: flex; }
.out .blk + .blk { border-top: 1px solid var(--panel-2); padding-top: 12px; margin-top: 12px; }
.out pre.output { margin: 8px 0 0; padding: 10px 12px; background: var(--void); border: 1px solid var(--rule); border-radius: 4px; font: .76rem/1.55 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.out .note { margin: 6px 0 0; color: var(--text-2); }
.out .err { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.out .err .loc { color: var(--fail); font-weight: 600; white-space: nowrap; }
.out .err .id { color: var(--text-3); }
.out button.err:hover .loc { text-decoration: underline; }
.out .meta { margin-top: 12px; }
.out .sol { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--text-2); }

/* Dashboard bits rendered on the server */
.card { --world: var(--max); }
.card .segs span.on { background: var(--world); }
.courses { list-style: none; padding: 0; display: grid; gap: 16px; }
.courses a { display: block; padding: 18px 20px; text-decoration: none; color: var(--text); }
.courses a:hover { background: var(--panel-2); color: var(--text); }
.courses h2 { font-size: 1.3rem; }
.courses p { margin: 6px 0 0; color: var(--text-2); }
/* The lesson app is exactly one viewport: panes scroll, the page never does. */
.lesson-page { overflow: hidden; }
.pane { position: relative; } /* keeps .sr-only live regions inside their scrolling pane */
.code { overflow-y: auto; }
.code > .tabpanel { min-height: 180px; }
@media (max-width: 1023px) { .code > .tabpanel { flex: none; height: 55vh; min-height: 280px; } }
.out { height: clamp(140px, 32vh, 280px); font-variant-ligatures: none; }
.out .why { white-space: pre-wrap; overflow-wrap: anywhere; }
.code > .brief, .code > .tabs, .code > .hints, .code > .runbar, .code > .out { flex-shrink: 0; }
.editor .cm-scroller { font-variant-ligatures: none; }