/* ============================================================================
   VISUAL LEARNING ENGINE — presentation layer.

   Every colour here resolves through the notebook's existing custom properties
   (--panel, --ink, --c2 …). That is not a style preference: the notebook ships
   seven themes, and a component that hard-codes a hex value renders dark text
   on a dark ground the moment somebody switches to Sepia. The engine never
   names a colour; it names a role.

   Local aliases give those roles engine-specific names so a future theme can
   retune the course without touching component rules.
   ========================================================================== */

.ve {
  --ve-accent:     var(--c2);            /* technical / structural  — teal-cyan  */
  --ve-learn:      var(--c4);            /* learning state          — violet     */
  --ve-challenge:  var(--c6);            /* practice & challenge    — amber      */
  --ve-ok:         var(--c5);
  --ve-bad:        var(--c1);
  --ve-surface:    var(--panel);
  --ve-surface-2:  var(--panel2);
  --ve-line:       var(--line);
  --ve-ink:        var(--ink);
  --ve-mut:        var(--mut);
  --ve-radius:     14px;
  --ve-gap:        clamp(10px, 1.6vw, 18px);
  --ve-mono:       "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  margin: 1.8em 0;
  container-type: inline-size;
}

/* Engine blocks are <section> elements so the lesson has a correct document
   outline, but the notebook styles a bare `section` as a whole chapter — 54px of
   vertical padding and a dividing rule. Nested inside a chapter, every block
   then rendered as a false chapter break. The chapter chrome is reset here; the
   engine's own margin does the spacing. */
section.ve { padding: 0; border-bottom: 0; }

/* Screen-reader-only text alternatives for diagrams. Visually removed, never
   display:none — a hidden node is not announced. */
.ve-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.ve-kicker {
  font-family: var(--ve-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ve-accent);
  margin: 0 0 .35em;
}
.ve-title {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  margin: 0 0 .7em;
  color: var(--ve-ink);
  text-wrap: balance;
}
.ve-caption {
  font-size: 13.5px;
  color: var(--ve-mut);
  margin: .8em 0 0;
  max-width: 60ch;
}

/* "Conceptual model — simplified for learning." Deliberately conspicuous: a
   learner who mistakes a teaching diagram for the runtime will repeat it in an
   interview, so the disclaimer is part of the diagram, not a footnote. */
.ve-model-note {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--ve-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ve-learn);
  background: color-mix(in srgb, var(--ve-learn) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ve-learn) 45%, transparent);
  border-radius: 999px;
  padding: .35em .9em;
  margin: 1em 0 0;
}
.ve-model-note::before { content: "▲"; font-size: 9px; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.ve-hero {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--ve-accent) 9%, transparent),
      color-mix(in srgb, var(--ve-learn) 7%, transparent)),
    var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: clamp(18px, 3vw, 30px);
}
.ve-hero-title {
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  line-height: 1.12;
  margin: 0 0 .45em;
  color: var(--ve-ink);
  text-wrap: balance;
}
.ve-hero-promise {
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  color: var(--ve-ink);
  margin: 0;
  max-width: 62ch;
}
.ve-hero-promise strong { color: var(--ve-accent); }

.ve-hero-meta {
  display: flex; flex-wrap: wrap; gap: .5em 1.4em;
  list-style: none; padding: 0; margin: 1.1em 0 0;
}
.ve-hero-meta-item { display: flex; gap: .5em; align-items: baseline; }
.ve-hero-meta-k {
  font-family: var(--ve-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ve-mut);
}
.ve-hero-meta-v { font-size: 13.5px; font-weight: 700; color: var(--ve-ink); }

/* Roadmap: an ordered route, so it renders as a numbered sequence that wraps
   rather than a row that overflows. */
.ve-roadmap { margin-top: 1.4em; }
.ve-roadmap-list {
  display: flex; flex-wrap: wrap; gap: .5em;
  list-style: none; padding: 0; margin: 0;
}
.ve-roadmap-step {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--ve-surface-2);
  border: 1px solid var(--ve-line);
  border-radius: 999px;
  padding: .4em .9em .4em .45em;
  font-size: 12.5px; font-weight: 700; color: var(--ve-ink);
}
.ve-roadmap-n {
  display: grid; place-items: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: color-mix(in srgb, var(--ve-accent) 20%, transparent);
  color: var(--ve-accent);
  font-family: var(--ve-mono); font-size: 10px; font-weight: 800;
}
.ve-roadmap-step + .ve-roadmap-step::before {
  content: "→"; color: var(--ve-mut); margin-right: .2em; font-size: 12px;
}

/* ── flow diagram ────────────────────────────────────────────────────────────
   HTML grid rather than a fixed-coordinate SVG, so a six-stage pipeline reflows
   into a vertical column on a phone instead of shrinking to unreadable 6px
   type. This is the single biggest reason the engine does not emit SVG for
   flows. */

.ve-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.ve-flow-cell { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }

.ve-node {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column; gap: .25em;
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: .95em 1.05em;
  transition: border-color .18s, transform .18s;
}
.ve-node-idx {
  font-family: var(--ve-mono); font-size: 9.5px; letter-spacing: .16em;
  color: var(--ve-mut); font-weight: 800;
}
.ve-node-label { font-weight: 800; font-size: 14px; color: var(--ve-ink); line-height: 1.3; }
.ve-node-sub { font-size: 12px; color: var(--ve-mut); line-height: 1.4; }

/* Emphasis carries a border, a tint AND a text label — never colour alone. */
.ve-node.is-marked {
  border-color: var(--ve-accent);
  background: color-mix(in srgb, var(--ve-accent) 10%, var(--ve-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ve-accent) 35%, transparent);
}
.ve-node-mark {
  align-self: flex-start;
  font-family: var(--ve-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 800;
  color: var(--ve-accent);
  background: color-mix(in srgb, var(--ve-accent) 16%, transparent);
  border-radius: 999px; padding: .25em .7em; margin-top: .3em;
}
.ve-node-io   { border-style: dashed; }
.ve-node-tool { background: var(--ve-surface-2); }

.ve-arrow {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px;
  padding: 0 .55em; flex: 0 0 auto;
}
.ve-arrow-line {
  width: 26px; height: 2px; background: var(--ve-line); position: relative;
}
.ve-arrow-line::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--ve-line);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.ve-arrow-label {
  font-family: var(--ve-mono); font-size: 9.5px; color: var(--ve-mut);
  white-space: nowrap;
}

/* Reflow to a vertical stack while there is still room to read the labels.
   Container queries so the breakpoint follows the column the diagram sits in,
   not the viewport — the same diagram is correct in a narrow rail and a wide
   page. */
@container (max-width: 720px) {
  .ve-flow { flex-direction: column; }
  .ve-flow-cell { flex-direction: column; width: 100%; }
  .ve-node { width: 100%; }
  .ve-arrow { padding: .45em 0; flex-direction: row; gap: .5em; }
  .ve-arrow-line { width: 2px; height: 22px; }
  .ve-arrow-line::after {
    right: -3px; top: auto; bottom: -1px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 7px solid var(--ve-line); border-bottom: none;
  }
}
/* Fallback for engines without container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 780px) {
    .ve-flow { flex-direction: column; }
    .ve-flow-cell { flex-direction: column; width: 100%; }
    .ve-arrow { padding: .45em 0; }
    .ve-arrow-line { width: 2px; height: 22px; }
  }
}

/* ── code anatomy ────────────────────────────────────────────────────────── */

.ve-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ve-gap);
  align-items: start;
}
@container (max-width: 780px) { .ve-anatomy { grid-template-columns: minmax(0, 1fr); } }
@supports not (container-type: inline-size) {
  @media (max-width: 840px) { .ve-anatomy { grid-template-columns: minmax(0, 1fr); } }
}

.ve-anatomy-code {
  background: var(--codebg, #0c1120);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  overflow: hidden;
  position: sticky; top: 12px;
}
.ve-anatomy-file {
  font-family: var(--ve-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ve-mut); padding: .6em 1em;
  border-bottom: 1px solid var(--ve-line);
  background: color-mix(in srgb, var(--ve-surface) 55%, transparent);
}
.ve-anatomy-pre {
  margin: 0; padding: 1.1em 1em; overflow-x: auto;
  font-family: var(--ve-mono); font-size: 14px; line-height: 1.9;
  color: var(--codeink, #e6ebff);
}

/* Tokens are buttons so they are focusable and operable by keyboard; the button
   chrome is stripped but the semantics are kept. */
.ve-tok {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 1px 2px; margin: 0;
  border-radius: 4px; cursor: pointer;
  border-bottom: 2px dotted color-mix(in srgb, var(--ve-accent) 55%, transparent);
  transition: background .15s, color .15s;
}
.ve-tok-inert { white-space: pre; }
.ve-tok:hover, .ve-tok.is-active, .ve-tok.is-pinned {
  background: color-mix(in srgb, var(--ve-accent) 26%, transparent);
  color: #fff;
  border-bottom-color: var(--ve-accent);
}
.ve-tok-kw  { color: var(--kw, #ff79c6); }
.ve-tok-cls { color: var(--cls, #66d9ef); }
.ve-tok-fn  { color: var(--fn, #c792ea); }
.ve-tok-str { color: var(--str, #a6e22e); }
.ve-tok-pun { color: var(--ve-mut); }

.ve-anatomy-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: .55em; }
.ve-anatomy-note {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: .75em .95em;
  transition: border-color .18s, background .18s;
}
.ve-anatomy-note.is-active, .ve-anatomy-note.is-pinned {
  border-left-color: var(--ve-accent);
  background: color-mix(in srgb, var(--ve-accent) 8%, var(--ve-surface));
}
.ve-note-btn {
  display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap;
  width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.ve-note-tok {
  font-family: var(--ve-mono); font-size: 13px; font-weight: 800;
  color: var(--ve-accent);
}
.ve-note-role {
  font-family: var(--ve-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ve-mut);
}
.ve-note-what { margin: .35em 0 0; font-size: 14px; color: var(--ve-ink); line-height: 1.55; }

/* ── before → execution → after ──────────────────────────────────────────── */

.ve-ba {
  display: grid; gap: var(--ve-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; padding: 0; margin: 0;
}
@container (max-width: 700px) { .ve-ba { grid-template-columns: minmax(0, 1fr); } }
@supports not (container-type: inline-size) {
  @media (max-width: 760px) { .ve-ba { grid-template-columns: minmax(0, 1fr); } }
}

.ve-ba-stage {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-top: 3px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: 1em 1.1em;
}
.ve-ba-before { border-top-color: var(--ve-mut); }
.ve-ba-during { border-top-color: var(--ve-challenge); }
.ve-ba-after  { border-top-color: var(--ve-ok); }
.ve-ba-label {
  font-family: var(--ve-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 800; color: var(--ve-mut);
  margin: 0 0 .7em;
}
.ve-ba-during .ve-ba-label { color: var(--ve-challenge); }
.ve-ba-after  .ve-ba-label { color: var(--ve-ok); }
.ve-ba-body { display: grid; gap: .4em; }
.ve-ba-row {
  display: flex; align-items: center; gap: .55em; flex-wrap: wrap;
  background: var(--ve-surface-2);
  border: 1px solid var(--ve-line);
  border-radius: 8px; padding: .5em .7em;
}
.ve-ba-name  { font-family: var(--ve-mono); font-size: 13px; color: var(--ve-ink); font-weight: 700; }
.ve-ba-arrow { color: var(--ve-mut); }
.ve-ba-value { font-family: var(--ve-mono); font-size: 13px; color: var(--ve-accent); font-weight: 800; }
.ve-ba-note  { margin: .7em 0 0; font-size: 12.5px; color: var(--ve-mut); line-height: 1.5; }

/* ── console comparison ──────────────────────────────────────────────────── */

.ve-compare {
  display: grid; gap: var(--ve-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.ve-compare-col {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: 1em;
  display: flex; flex-direction: column; gap: .6em;
}
.ve-compare-h {
  margin: 0; font-family: var(--ve-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ve-accent);
}
.ve-compare-code, .ve-mistake-code, .ve-predict-code pre {
  margin: 0; padding: .85em 1em; border-radius: 10px; overflow-x: auto;
  background: var(--codebg, #0c1120); color: var(--codeink, #e6ebff);
  font-family: var(--ve-mono); font-size: 13px; line-height: 1.7;
  border: 1px solid var(--ve-line);
}
.ve-compare-arrow {
  margin: 0; text-align: center; font-family: var(--ve-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ve-mut);
}
.ve-compare-note { margin: 0; font-size: 13px; color: var(--ve-mut); line-height: 1.5; }

.ve-console {
  border: 1px solid var(--ve-line); border-radius: 10px; overflow: hidden;
  background: #0a0e18;
}
.ve-console-bar {
  display: flex; align-items: center; gap: .5em;
  padding: .45em .8em; background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--ve-line);
}
.ve-console-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ve-ok);
}
.ve-console-title {
  font-family: var(--ve-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #94a3c4;
}
.ve-console-body {
  padding: .8em 1em; min-height: 4.2em; overflow-x: auto;
  font-family: var(--ve-mono); font-size: 13.5px; line-height: 1.75; color: #d8e2ff;
}
.ve-console-line { display: flex; align-items: center; min-height: 1.75em; }
.ve-console-text { white-space: pre; }

/* The cursor is the teaching element: it shows WHERE the next character lands,
   which is the actual difference between print and println. */
.ve-cursor {
  display: inline-block; width: 9px; height: 1.15em;
  background: var(--ve-challenge); margin-left: 1px;
  animation: ve-blink 1.05s steps(2, start) infinite;
}
@keyframes ve-blink { to { visibility: hidden; } }

/* ── predict before run ──────────────────────────────────────────────────── */

.ve-b-predict {
  background: color-mix(in srgb, var(--ve-learn) 7%, var(--ve-surface));
  border: 1px solid color-mix(in srgb, var(--ve-learn) 35%, var(--ve-line));
  border-radius: var(--ve-radius);
  padding: clamp(14px, 2.4vw, 22px);
}
.ve-b-predict .ve-title { color: var(--ve-learn); }
.ve-predict-q { margin: 0 0 .8em; font-weight: 700; color: var(--ve-ink); }
.ve-predict-code { margin-bottom: 1em; }
.ve-predict-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: .5em; }

.ve-opt {
  display: flex; align-items: center; gap: .8em; width: 100%; text-align: left;
  background: var(--ve-surface); color: var(--ve-ink);
  border: 1px solid var(--ve-line); border-radius: 10px;
  padding: .75em .9em; cursor: pointer; font: inherit;
  transition: border-color .16s, background .16s;
}
.ve-opt:hover:not(:disabled) { border-color: var(--ve-learn); }
.ve-opt:disabled { cursor: default; }
.ve-opt-key {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 1.9em; height: 1.9em; border-radius: 7px;
  background: var(--ve-surface-2); color: var(--ve-mut);
  font-family: var(--ve-mono); font-size: 11px; font-weight: 800;
}
.ve-opt-text { flex: 1 1 auto; font-family: var(--ve-mono); font-size: 13.5px; }
.ve-opt-mark { font-weight: 900; font-size: 15px; flex: 0 0 auto; }

/* Correctness is signalled by glyph + border + background together. Colour
   alone would fail WCAG 1.4.1 and be invisible to a colour-blind learner. */
.ve-opt.is-correct {
  border-color: var(--ve-ok);
  background: color-mix(in srgb, var(--ve-ok) 14%, var(--ve-surface));
}
.ve-opt.is-correct .ve-opt-mark { color: var(--ve-ok); }
.ve-opt.is-wrong {
  border-color: var(--ve-bad);
  background: color-mix(in srgb, var(--ve-bad) 12%, var(--ve-surface));
}
.ve-opt.is-wrong .ve-opt-mark { color: var(--ve-bad); }

.ve-predict-result:empty { display: none; }
.ve-predict-result { margin-top: 1em; }
.ve-predict-verdict {
  margin: 0 0 .5em; font-family: var(--ve-mono); font-size: 13px;
  font-weight: 800; letter-spacing: .06em;
}
.ve-predict-verdict.is-right { color: var(--ve-ok); }
.ve-predict-verdict.is-wrong { color: var(--ve-bad); }
.ve-predict-why { margin: 0 0 .5em; font-size: 14px; line-height: 1.6; color: var(--ve-ink); }
.ve-predict-nudge {
  margin: .8em 0 0; font-family: var(--ve-mono); font-size: 11.5px;
  letter-spacing: .06em; color: var(--ve-challenge);
}

/* ── common mistakes ─────────────────────────────────────────────────────── */

.ve-mistakes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ve-gap); }
.ve-mistake {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: 1em 1.1em;
  display: grid; gap: .6em;
}
.ve-mistake-head { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.ve-badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--ve-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 800;
  border-radius: 999px; padding: .3em .8em;
}
.ve-badge-bad { color: var(--ve-bad); background: color-mix(in srgb, var(--ve-bad) 14%, transparent); }
.ve-badge-ok  { color: var(--ve-ok);  background: color-mix(in srgb, var(--ve-ok) 14%, transparent); }
.ve-glyph { font-size: 11px; }
.ve-mistake-cat {
  font-size: 11.5px; color: var(--ve-mut); font-family: var(--ve-mono);
  letter-spacing: .04em;
}
.ve-mistake-code.is-bad { border-left: 3px solid var(--ve-bad); }
.ve-mistake-code.is-ok  { border-left: 3px solid var(--ve-ok); }
.ve-mistake-why { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ve-ink); }

/* ── depth tabs ──────────────────────────────────────────────────────────── */

.ve-tablist { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: -1px; }
.ve-tab {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  background: var(--ve-surface-2); color: var(--ve-mut);
  border: 1px solid var(--ve-line); border-bottom-color: transparent;
  border-radius: 10px 10px 0 0;
  padding: .6em 1em; cursor: pointer; font: inherit;
  transition: color .16s, background .16s;
}
.ve-tab-label {
  font-family: var(--ve-mono); font-size: 12px; font-weight: 800; letter-spacing: .06em;
}
.ve-tab-hint { font-size: 10px; color: var(--ve-mut); }
.ve-tab[aria-selected="true"] {
  background: var(--ve-surface); color: var(--ve-learn);
  border-color: var(--ve-line); border-bottom-color: var(--ve-surface);
}
/* A selected tab is also underlined, so selection is not colour-only. */
.ve-tab[aria-selected="true"]::after {
  content: ""; display: block; width: 100%; height: 2px;
  background: var(--ve-learn); margin-top: .35em; border-radius: 2px;
}
.ve-panel {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: 0 var(--ve-radius) var(--ve-radius) var(--ve-radius);
  padding: clamp(14px, 2.4vw, 22px);
}
.ve-panel > :first-child { margin-top: 0; }
.ve-panel > :last-child  { margin-bottom: 0; }

/* ── why care / interview / recap / sources ──────────────────────────────── */

.ve-why { list-style: none; padding: 0; margin: 0; display: grid; gap: .5em; }
.ve-why-item {
  display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: .3em 1em;
  background: var(--ve-surface); border: 1px solid var(--ve-line);
  border-left: 3px solid var(--ve-challenge);
  border-radius: 10px; padding: .75em .95em;
}
@container (max-width: 620px) { .ve-why-item { grid-template-columns: minmax(0, 1fr); } }
.ve-why-k {
  font-family: var(--ve-mono); font-size: 12px; font-weight: 800;
  color: var(--ve-challenge); letter-spacing: .04em;
}
.ve-why-v { font-size: 14px; line-height: 1.55; color: var(--ve-ink); }

.ve-iv {
  background: var(--ve-surface);
  border: 1px solid var(--ve-line);
  border-radius: var(--ve-radius);
  padding: 1.1em 1.2em;
  display: grid; gap: .4em;
}
.ve-iv-label {
  font-family: var(--ve-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 800; color: var(--ve-mut);
  margin: .5em 0 0;
}
.ve-iv-label:first-child { margin-top: 0; }
.ve-iv-q { margin: 0; font-size: 15px; font-weight: 700; color: var(--ve-ink); }
.ve-iv-a {
  margin: 0; padding: .8em 1em;
  background: color-mix(in srgb, var(--ve-accent) 8%, var(--ve-surface-2));
  border-left: 3px solid var(--ve-accent);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px; line-height: 1.65; color: var(--ve-ink);
}
.ve-iv-fu { margin: .2em 0 0; padding-left: 1.2em; font-size: 13.5px; color: var(--ve-mut); }
.ve-iv-fu li { margin: .2em 0; }
.ve-iv-tip { margin: .6em 0 0; font-size: 13px; color: var(--ve-mut); font-style: italic; }

.ve-recap-flow {
  list-style: none; padding: 0; margin: 0 0 1.2em;
  display: flex; flex-wrap: wrap; gap: .45em;
}
.ve-recap-step {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--ve-surface-2); border: 1px solid var(--ve-line);
  border-radius: 8px; padding: .45em .8em; font-size: 13px; color: var(--ve-ink);
}
.ve-recap-n {
  font-family: var(--ve-mono); font-size: 9.5px; font-weight: 800;
  color: var(--ve-accent);
}
.ve-recap-step + .ve-recap-step::before { content: "→"; color: var(--ve-mut); margin-right: .15em; }

.ve-remember {
  background: color-mix(in srgb, var(--ve-ok) 8%, var(--ve-surface));
  border: 1px solid color-mix(in srgb, var(--ve-ok) 32%, var(--ve-line));
  border-radius: var(--ve-radius);
  padding: 1em 1.2em;
}
.ve-remember .ve-kicker { color: var(--ve-ok); }
.ve-remember-list { margin: .3em 0 0; padding-left: 1.2em; display: grid; gap: .35em; }
.ve-remember-list li { font-size: 14.5px; line-height: 1.6; color: var(--ve-ink); }

.ve-refs { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; }
.ve-ref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em .8em;
  background: var(--ve-surface); border: 1px solid var(--ve-line);
  border-radius: 10px; padding: .65em .9em;
}
.ve-ref-link { color: var(--ve-accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.ve-ref-link:hover { text-decoration: underline; }
.ve-ref-note { font-size: 13px; color: var(--ve-mut); flex: 1 1 12rem; }
.ve-ref-kind {
  font-family: var(--ve-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ve-mut);
  border: 1px solid var(--ve-line); border-radius: 999px; padding: .2em .6em;
}

/* ── overflow containment ────────────────────────────────────────────────────
   Grid and flex items default to `min-width: auto`, so a long line of code
   inside one expands its track rather than scrolling within it. On a narrow
   screen that pushes lesson content past the viewport — and because the
   notebook's `main` sets `overflow: hidden`, the excess would be CLIPPED rather
   than scrollable, making the text unreachable. Every engine track is allowed
   to shrink, and the scrolling happens inside the code block where it belongs. */
section.ve,
.ve-mistake > *, .ve-mistakes > *,
.ve-compare > *, .ve-compare-col > *,
.ve-anatomy > *, .ve-ba > *, .ve-ba-stage > *,
.ve-flow-cell > *, .ve-why-item > *,
.ve-predict-opts > *, .ve-iv > *, .ve-refs > * { min-width: 0; }

/* Code is the one thing allowed its own horizontal scrollbar. */
.ve pre { overflow-x: auto; max-width: 100%; }

/* A long unbroken token (a URL, a package name) wraps rather than widening the
   card it sits in. */
.ve-ref-link, .ve-note-what, .ve-mistake-why, .ve-compare-note { overflow-wrap: anywhere; }

/* ── mount point ─────────────────────────────────────────────────────────────
   Shown only until the engine module loads. The host carries aria-busy +
   aria-live, so a screen reader announces the lesson when it arrives rather
   than reading an empty region. */
.ve-mount { min-height: 3rem; }
.ve-loading {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); padding: 1.4em 0;
}

/* ── focus & motion ──────────────────────────────────────────────────────────
   A visible focus ring on every interactive element (WCAG 2.4.7). The engine
   sets it explicitly rather than relying on the UA default, because several of
   these controls have their button chrome stripped. */

.ve :focus-visible {
  outline: 3px solid var(--ve-learn);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ve *, .ve *::before, .ve *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* The cursor still needs to be locatable when it is not blinking. */
  .ve-cursor { animation: none; visibility: visible; }
}