/* Shandoka web design system
 * Tokens lifted from SHANDOKA_STYLE_SHEET.html (brand) and DBB_STYLE_SHEET.html
 * (zone colors, type scale, shape rules). Light is the default; dark follows the
 * OS unless [data-theme] overrides it.
 */

:root {
  /* brand — identical in every mode */
  --brand-blue: #1E21B0;
  --brand-green: #BBEB19;
  --brand-grey: #969696;
  --nominal: #1565C0;

  /* surfaces + text — light */
  --bg: #FFFFFF;
  --panel: #EDF2F7;
  --panel-2: #F8FAFC;
  --rule: #C8D4E0;
  --ink: #0D1B2A;
  --ink-2: #3D5269;
  --ink-3: #7A8FA6;
  --accent: #1E21B0;
  --accent-ink: #FFFFFF;
  --lime-text: #5A7700;
  --code-bg: #0D1B2A;
  --code-ink: #DCEBFA;

  /* zone colors — state, never decoration */
  --good: #00873E;
  --advisory: #C28800;
  --warning: #C25500;
  --critical: #8A00A8;
  --zone-tint: 12%;

  --ui: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1B2A;
    --panel: #14253A;
    --panel-2: #10202F;
    --rule: #243447;
    --ink: #E8F4FF;
    --ink-2: #7AA3C4;
    --ink-3: #4F6B85;
    --accent: #BBEB19;
    --accent-ink: #0D1B2A;
    --lime-text: #BBEB19;
    --code-bg: #0A1623;
    --good: #00E676;
    --advisory: #FFD600;
    --warning: #FF6D00;
    --critical: #D500F9;
    --zone-tint: 14%;
  }
}

:root[data-theme="dark"] {
  --bg: #0D1B2A;
  --panel: #14253A;
  --panel-2: #10202F;
  --rule: #243447;
  --ink: #E8F4FF;
  --ink-2: #7AA3C4;
  --ink-3: #4F6B85;
  --accent: #BBEB19;
  --accent-ink: #0D1B2A;
  --lime-text: #BBEB19;
  --code-bg: #0A1623;
  --good: #00E676;
  --advisory: #FFD600;
  --warning: #FF6D00;
  --critical: #D500F9;
  --zone-tint: 14%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.65;
  padding-inline: 16px;
}

.wrap { max-width: 760px; margin-inline: auto; padding-block: 32px 96px; }
.wrap.wide { max-width: 1080px; }

/* ── masthead ─────────────────────────────────────────── */
.wordmark {
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .95rem;
}
.wordmark-text span { color: var(--accent); }
.crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.theme-toggle {
  font: 700 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  cursor: pointer;
  min-height: 36px;
}
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); color: var(--ink); outline: none; }

/* ── lesson header ────────────────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime-text);
}
h1 {
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 10px 0 0;
  text-wrap: balance;
}
.meta-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 14px;
  letter-spacing: .04em;
}
.rule-lime { height: 4px; width: 96px; background: var(--brand-green); border-radius: var(--r-sm); margin: 22px 0 0; }

h2 {
  font-weight: 900;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 56px 0 0;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
  text-wrap: balance;
}
h3 { font-weight: 700; font-size: 1.22rem; margin: 34px 0 0; text-wrap: balance; }
h4 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 30px 0 0;
}
p { margin: 14px 0 0; }
strong { font-weight: 700; }
ul { margin: 14px 0 0; padding-left: 1.2em; }
li { margin: 6px 0; }
a { color: var(--accent); }

/* ── callouts ─────────────────────────────────────────── */
.callout {
  margin: 26px 0 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
}
.callout > .head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.callout .icon { font-size: 1rem; line-height: 1; }
.callout p:first-of-type { margin-top: 8px; }
.callout p { margin-top: 10px; }
.callout-key { border-left-color: var(--brand-green); }
.callout-key > .head { color: var(--lime-text); }
.callout-insight { border-left-color: var(--nominal); }
.callout-insight > .head { color: var(--nominal); }
.callout-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) var(--zone-tint), var(--panel)); }
.callout-warning > .head { color: var(--warning); }
.callout-danger { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) var(--zone-tint), var(--panel)); }
.callout-danger > .head { color: var(--critical); }
.callout-check { border-left-color: var(--good); }
.callout-check > .head { color: var(--good); }

/* ── term cards ───────────────────────────────────────── */
.term {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.term .name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.term p { margin-top: 8px; color: var(--ink-2); }

/* ── flow strip ───────────────────────────────────────── */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 26px 0 0;
}
.flow .step {
  flex: 1 1 140px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
.flow .step .k {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.flow .step .v {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
.flow .arrow {
  align-self: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ── card grids ───────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin: 26px 0 0;
}
.cards .card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 16px;
}
.cards .card .title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 700;
  font-size: 1rem;
}
.cards .card .subtitle {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
.cards .card p, .cards .card ul { margin-top: 10px; font-size: .95rem; color: var(--ink-2); }
.cards .card li { margin: 4px 0; }

/* ── tables ───────────────────────────────────────────── */
.tbl { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel); margin: 26px 0 0; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .92rem; }
th {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
td { padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* ── quiz ─────────────────────────────────────────────── */
.quiz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  color: var(--ink-2);
}
.q {
  margin: 28px 0 0;
  padding: 18px;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.q .num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.q .prompt { font-weight: 600; margin-top: 6px; }
.opts { display: grid; gap: 8px; margin-top: 14px; }
.opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  cursor: pointer;
}
.opt:hover { border-color: var(--accent); }
.opt input { margin-top: .25em; accent-color: var(--accent); }
.opt .key { font-family: var(--mono); font-weight: 700; color: var(--ink-2); }
.opt.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) var(--zone-tint), var(--bg)); }
.opt.wrong { border-color: var(--warning); background: color-mix(in srgb, var(--warning) var(--zone-tint), var(--bg)); }
.match-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; margin-top: 10px; }
.match-row .term-name { font-family: var(--mono); font-size: .85rem; font-weight: 700; }
select, textarea {
  font-family: var(--ui);
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
select.correct, .match-row.correct select { border-color: var(--good); }
select.wrong, .match-row.wrong select { border-color: var(--warning); }
.rubric {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: .9rem;
  color: var(--ink-2);
}
.rubric b { color: var(--ink); display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.feedback { margin-top: 12px; font-size: .9rem; display: none; }
.feedback.show { display: block; }
.feedback .verdict { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.feedback.ok .verdict { color: var(--good); }
.feedback.no .verdict { color: var(--warning); }
.feedback .why { color: var(--ink-2); margin-top: 4px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  font: 700 13px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--r-lg);
  border: 2px solid var(--brand-blue);
  background: transparent;
  color: var(--ink);
  min-height: 44px;
  cursor: pointer;
}
.btn.commit { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.btn.lime { background: var(--brand-green); border-color: var(--brand-green); color: #0D1B2A; }
.btn:disabled { border-color: var(--rule); background: var(--panel); color: var(--brand-grey); cursor: not-allowed; }

.score {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--panel);
  display: none;
}
.score.show { display: block; }
.score .big { font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.score .label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.score .note { color: var(--ink-2); font-size: .92rem; margin-top: 8px; }

footer {
  margin-top: 72px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
footer a { color: var(--ink-2); }

.nav-next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

@media print {
  body { background: #fff; color: #000; }
  .theme-toggle, .actions, .nav-next { display: none; }
}

/* ── site chrome ──────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  margin-inline: -16px;
  padding-inline: 16px;
}
.site-head-inner {
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  padding-block: 12px;
}
.site-head .wordmark {
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-emblem { height: 26px; width: auto; display: block; }
.wordmark-text { line-height: 1; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav-link {
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); border-color: var(--rule); outline: none; }
.nav-link.active { color: var(--ink); border-color: var(--accent); }
.crumbs { margin-bottom: 20px; }

.site-foot {
  border-top: 1px solid var(--rule);
  margin-inline: -16px;
  padding-inline: 16px;
  background: var(--panel-2);
}
.site-foot-inner {
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding-block: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.site-foot-inner a { color: var(--ink-2); }

/* ── home ─────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding-block: 28px 8px;
}
.hero h1 { text-transform: uppercase; font-size: clamp(2rem, 5.5vw, 3.4rem); }
.hero h1 span { color: var(--accent); }
.hero .lede { max-width: 56ch; color: var(--ink-2); font-size: 1.05rem; margin-top: 18px; }
.hero-mark {
  background: var(--brand-green);
  border-radius: var(--r-xl);
  overflow: hidden;
  line-height: 0;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.hero-mark img { width: 100%; height: auto; display: block; }
.lede { max-width: 68ch; color: var(--ink-2); margin-top: 16px; }

.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 40px;
}
.stat { background: var(--panel); padding: 20px 18px; }
.stat-value { font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1; }
.stat-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 8px;
}

/* ── module list ──────────────────────────────────────── */
.module-list { display: grid; gap: 10px; margin-top: 26px; }
.module-card {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
}
.module-card:hover, .module-card:focus-visible { border-left-color: var(--accent); outline: none; }
.module-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink-3);
  min-width: 2.2ch;
}
.module-title { font-weight: 700; font-size: 1.1rem; }
.module-meta { color: var(--ink-2); font-size: .9rem; margin-top: 4px; }
.module-test {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ── module page layout ───────────────────────────────── */
.module-head { margin-bottom: 8px; }
.module-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; margin-top: 36px; }
.module-body { min-width: 0; }
.module-body h2:first-of-type { margin-top: 0; }
.toc { position: sticky; top: 76px; align-self: start; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow-y: auto; }
.toc-head {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.toc-link {
  font-size: .85rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 0 5px 10px;
  border-left: 2px solid var(--rule);
}
.toc-link:hover, .toc-link:focus-visible { color: var(--ink); border-left-color: var(--accent); outline: none; }
.toc-link.lvl3 { padding-left: 20px; font-size: .8rem; color: var(--ink-3); }

/* ── figures ──────────────────────────────────────────── */
.fig { margin: 30px 0 0; }
.fig img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: var(--r-lg); }
.fig figcaption { font-size: .85rem; color: var(--ink-2); margin-top: 10px; }
.fig-planned .fig-slot {
  border: 1px dashed var(--ink-3);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(135deg, transparent, transparent 10px,
              color-mix(in srgb, var(--ink-3) 8%, transparent) 10px,
              color-mix(in srgb, var(--ink-3) 8%, transparent) 20px);
  padding: 22px;
}
.fig-id {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.fig-title { font-weight: 700; margin-top: 6px; }
.fig-brief { color: var(--ink-2); font-size: .9rem; margin-top: 8px; max-width: 70ch; }
.muted { color: var(--ink-3); font-size: .85rem; }
.chip.prio-critical { border-color: var(--critical); color: var(--critical); }
.chip.prio-high { border-color: var(--warning); color: var(--warning); }
.chip.prio-medium { border-color: var(--advisory); color: var(--advisory); }
.chip.prio-low { border-color: var(--rule); }
td.mono, .mono { font-family: var(--mono); font-size: .82rem; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-mark { max-width: 320px; }
  .module-layout { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; max-height: none; }
}

.pace-note { color: var(--ink-2); font-size: .92rem; margin-top: 14px; max-width: 62ch; }
.module-head .quiz-meta { margin-top: 18px; }

/* ── fire hazard: red, by decision ────────────────────────
 * The DBB instrument rule is that critical is violet and never red, because on a
 * moving vehicle's screen red competes with brand and warning states. Battery fire
 * content on the web is a different surface with a different job, so danger callouts
 * on the battery-fire module render red. Pages opt in with data-hazard="fire".
 */
:root { --danger-red: #C0392B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --danger-red: #FF5252; }
}
:root[data-theme="dark"] { --danger-red: #FF5252; }

[data-hazard="fire"] .callout-danger {
  border-left-color: var(--danger-red);
  background: color-mix(in srgb, var(--danger-red) var(--zone-tint), var(--panel));
}
[data-hazard="fire"] .callout-danger > .head { color: var(--danger-red); }

/* ── pricing ──────────────────────────────────────────── */
.price-accent { color: var(--accent); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin-top: 30px;
}
.price-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-card.featured { border-color: var(--accent); border-width: 2px; }
.price-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.price-value { font-family: var(--mono); font-weight: 700; font-size: 2.2rem; line-height: 1.1; }
.price-card.featured .price-value { color: var(--accent); }
.price-note { font-size: .85rem; color: var(--ink-2); }
.price-card .lst { margin: 14px 0 18px; flex: 1; }
.price-card .btn { align-self: flex-start; }
.price-card .muted { margin-top: 8px; }

/* ── progress badges ──────────────────────────────────── */
.module-card { position: relative; }
.module-badge {
  margin-left: auto;
  align-self: center;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: nowrap;
}
.module-badge.pass { border-color: var(--good); color: var(--good); }
.module-badge.started { border-color: var(--advisory); color: var(--advisory); }

/* ── error code search ────────────────────────────────── */
.code-search {
  width: 100%;
  margin-top: 26px;
  padding: 14px 16px;
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  min-height: 48px;
}
.code-search:focus { outline: none; border-color: var(--accent); }
.code-block h2 { font-size: 1.15rem; margin-top: 40px; }

/* ── print ────────────────────────────────────────────── */
@media print {
  :root {
    --bg: #fff; --panel: #fff; --panel-2: #fff; --ink: #000; --ink-2: #333;
    --ink-3: #555; --rule: #999; --accent: #000;
  }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .site-head, .site-foot, .theme-toggle, .site-nav, .actions, .nav-next,
  .toc, .crumbs, .code-search, .fig-planned { display: none !important; }
  .wrap, .wrap.wide { max-width: 100%; padding: 0; }
  .module-layout { display: block; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .callout, .term, .cards .card, .price-card, .tbl {
    border: 1px solid #999;
    break-inside: avoid;
    background: #fff;
  }
  h1, h2, h3 { break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  .fig img { max-width: 100%; }
}

/* ── testimonial ──────────────────────────────────────── */
.testimonial {
  margin: 44px 0 0;
  padding: 26px 28px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--r-lg);
}
.testimonial blockquote { margin: 0; }
.testimonial p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.testimonial mark {
  background: var(--brand-green);
  color: #0D1B2A;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.testimonial figcaption {
  margin-top: 18px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.testimonial figcaption span {
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: .1em;
}
.testimonial figcaption span::before { content: "\00b7\00a0"; }

/* ── self-check questions ─────────────────────────────── */
.check {
  margin: 24px 0 0;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--nominal);
  border-radius: var(--r-md);
  background: var(--panel-2);
}
.check summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 44px;
}
.check summary::-webkit-details-marker { display: none; }
.check summary::before {
  content: "?";
  font-family: var(--mono);
  font-weight: 700;
  color: var(--nominal);
  flex: 0 0 auto;
}
.check summary::after {
  content: "Show answer";
  margin-left: auto;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.check[open] summary::after { content: "Hide"; }
.check summary:hover, .check summary:focus-visible { color: var(--accent); outline: none; }
.check-body { padding: 0 18px 16px; border-top: 1px solid var(--rule); }
.check-body p:first-child { margin-top: 14px; }
@media print {
  .check { border-left-color: #999; }
  .check summary::after { content: ""; }
  .check-body { display: block !important; }
}

/* TRAINING tag beside the wordmark: brand blue against the lime DOKA, which is the
   brand's own pairing. Filled rather than tinted so it holds up on both themes. */
.wordmark-tag {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--brand-blue);
  color: #FFFFFF;
  padding: 4px 7px;
  border-radius: var(--r-sm);
  line-height: 1;
  white-space: nowrap;
}
:root[data-theme="dark"] .wordmark-tag,
:root:not([data-theme="light"]) .wordmark-tag { background: #2A2ED6; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .wordmark-tag { background: var(--brand-blue); }
}

/* ── inline SVG figures ───────────────────────────────────
 * Figures are inlined so they inherit these tokens and follow the theme.
 * Series colours are the DBB graph series, kept away from the zone palette.
 */
:root {
  --s1: #1E6FD9;
  --s2: #D4581F;
  --s3: #3F6FD0;
  --s4: #2E9E4D;
  --s5: #8A4FCC;
  --plot: #EEF2F7;
  --grid: #D5DEE8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s1: #4D9EFF; --s2: #FF8B5C; --s3: #82B1FF; --s4: #7BD389; --s5: #B68EE0;
    --plot: #0A1623; --grid: #1A2A40;
  }
}
:root[data-theme="dark"] {
  --s1: #4D9EFF; --s2: #FF8B5C; --s3: #82B1FF; --s4: #7BD389; --s5: #B68EE0;
  --plot: #0A1623; --grid: #1A2A40;
}

.fig-svg svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  font-family: var(--ui);
}
.fig-svg svg text { fill: var(--ink); }
.fig-svg svg .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.fig-svg svg .mono { font-family: var(--mono); }
.fig-svg svg .dim { fill: var(--ink-2); }
.fig-svg svg .muted-fill { fill: var(--panel); }
.fig-svg svg .rule-stroke { stroke: var(--rule); }

.preview-item { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); }
.preview-item h2 { border: 0; margin: 6px 0 0; padding: 0; font-size: 1.15rem; text-transform: none; }

/* A 2x2 source block stays a square: two columns, full width, matching the callouts
   above and below it — until the viewport is too narrow, when each card goes full width. */
.cards[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .cards[data-columns="2"] { grid-template-columns: 1fr; }
}

/* ── product pages: device screens and the interest form ── */
.screen-shot { margin: 30px 0 0; }
.screen-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: #0D1B2A;
}
.screen-shot figcaption { font-size: .85rem; color: var(--ink-2); margin-top: 10px; }

.interest-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin-top: 26px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.interest-form label {
  display: grid;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.interest-form input,
.interest-form textarea {
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  min-height: 46px;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.interest-form input:focus,
.interest-form textarea:focus { outline: none; border-color: var(--accent); }
.interest-form .btn { justify-self: start; }

/* ── main site: photo slots, model cards, split sections ── */
.photo-slot { margin: 0; }
.photo-slot-inner {
  aspect-ratio: var(--ratio, 16 / 9);
  border: 1px dashed var(--ink-3);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(135deg, transparent, transparent 12px,
              color-mix(in srgb, var(--ink-3) 7%, transparent) 12px,
              color-mix(in srgb, var(--ink-3) 7%, transparent) 24px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.photo-id {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.photo-note { margin: 0; font-size: .88rem; color: var(--ink-2); max-width: 46ch; }

.hero-lead { align-items: start; }
.hero-shot { width: 100%; }

.model-list { display: grid; gap: 18px; margin-top: 26px; }
.model-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: center;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
}
.model-card:hover, .model-card:focus-visible { border-left-color: var(--accent); outline: none; }
.model-shot { min-width: 0; }
.model-system {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.model-name { font-weight: 900; font-size: 1.5rem; line-height: 1.1; margin-top: 6px; }
.model-card p { color: var(--ink-2); font-size: .95rem; }
.model-more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
  align-items: center;
  margin-top: 26px;
}

@media (max-width: 760px) {
  .model-card { grid-template-columns: 1fr; }
}

/* ── looping screen demos: cross-fades of the device's own screens ──
 * The frames are the real exported drawings; the overlay adds the incident highlight at
 * the coordinates of that drawing. First frame sits in flow so the box takes its height.
 */
.loop-frame { min-width: 0; }
.loop-shell {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: #0D1B2A;
  padding: 10px;
}
.loop { position: relative; line-height: 0; }
.loop-img, .loop-overlay {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
}
.loop-img:not(.first), .loop-overlay { position: absolute; inset: 0; }
.loop-img, .loop-overlay { opacity: 0; animation: loopFade var(--loop-duration, 20s) linear infinite; }

.loop[data-frames="5"] .f1 { animation-delay: 0s }
.loop[data-frames="5"] .f2 { animation-delay: calc(var(--loop-duration) * 0.2) }
.loop[data-frames="5"] .f3 { animation-delay: calc(var(--loop-duration) * 0.4) }
.loop[data-frames="5"] .f4 { animation-delay: calc(var(--loop-duration) * 0.6) }
.loop[data-frames="5"] .f5 { animation-delay: calc(var(--loop-duration) * 0.8) }
.loop[data-frames="5"] .loop-img, .loop[data-frames="5"] .loop-overlay {
  animation-name: loopFade5;
}
.loop[data-frames="3"] .f1 { animation-delay: 0s }
.loop[data-frames="3"] .f2 { animation-delay: calc(var(--loop-duration) / 3) }
.loop[data-frames="3"] .f3 { animation-delay: calc(var(--loop-duration) / 3 * 2) }
.loop[data-frames="3"] .loop-img, .loop[data-frames="3"] .loop-overlay {
  animation-name: loopFade3;
}

@keyframes loopFade5 {
  0% { opacity: 0 } 2% { opacity: 1 } 18% { opacity: 1 } 20% { opacity: 0 } 100% { opacity: 0 }
}
@keyframes loopFade3 {
  0% { opacity: 0 } 3% { opacity: 1 } 30% { opacity: 1 } 33.3% { opacity: 0 } 100% { opacity: 0 }
}

/* Reduced motion: hold the first screen rather than cycling. */
@media (prefers-reduced-motion: reduce) {
  .loop-img, .loop-overlay { animation: none }
  .loop .f1 { opacity: 1 }
}

.loop-caption { font-size: .88rem; color: var(--ink-2); margin-top: 12px; line-height: 1.6; }
.loop-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 8px;
}
.interest-form select {
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  min-height: 46px;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* ── symptom guide ────────────────────────────────────── */
.symptom {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.symptom h2 {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  font-size: 1.2rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.symptom p { margin-top: 0; color: var(--ink-2); }
.symptom-link { margin-top: 12px; }
.symptom-link a {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── applicant sheet ──────────────────────────────────────
   A one-page handout. It has to survive a black-and-white photocopy and a phone
   camera, so the QR keeps a white quiet zone in both themes and nothing here depends
   on colour to be readable. */
.sheet {
  border: 2px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  background: var(--panel-2);
}
.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; border-bottom: 2px solid var(--brand-green); padding-bottom: 1rem;
}
.sheet-head h1 { margin: .25rem 0 0; font-size: 1.6rem; }
.sheet-mark { width: 150px; height: auto; flex: none; }
.sheet-id { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.25rem 0; }
.field { flex: 1 1 14rem; display: flex; align-items: baseline; gap: .6rem; }
.field-label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); flex: none;
}
.field-value { font-weight: 700; font-size: 1.05rem; }
.field-blank { flex: 1; border-bottom: 1.5px solid var(--ink-3); height: 1.4rem; }
.sheet-lede { font-size: .98rem; line-height: 1.55; }
.sheet-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.75rem; margin-top: 1.25rem; }
.sheet-cols h2 { font-size: .95rem; margin: 0 0 .6rem; }
.sheet-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sheet-table th {
  text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule); padding: .3rem .4rem;
}
.sheet-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--rule); }
.sheet-scan { text-align: center; }
.sheet-scan .qr { width: 100%; max-width: 190px; height: auto; border-radius: 4px; }
.sheet-url { font-size: .78rem; word-break: normal; overflow-wrap: anywhere; margin: .5rem 0 .4rem; }
.sheet-note { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }
.sheet-ask { margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.sheet-ask h2 { font-size: .95rem; margin: 0 0 .5rem; }
.sheet-ask ol { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .86rem; line-height: 1.5; }
.sheet-ask li { margin-bottom: .3rem; }
.sheet-foot {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem;
  padding-top: .75rem; border-top: 1px solid var(--rule);
  font-size: .75rem; color: var(--ink-3);
}

@media (max-width: 640px) {
  .sheet-cols { grid-template-columns: 1fr; }
  .sheet-head { flex-direction: column-reverse; }
  .sheet-mark { width: 120px; }
}

@media print {
  /* One page, no chrome, and the sheet loses its frame so the paper is the frame. */
  .no-print, .site-header, .site-footer, .crumbs { display: none !important; }
  .sheet {
    border: none; padding: 0; background: #fff; color: #000;
    page-break-inside: avoid;
  }
  .sheet-head { border-bottom: 2px solid #000; }
  .sheet-table th, .sheet-table td, .sheet-ask, .sheet-foot { border-color: #999; }
  .field-blank { border-bottom: 1.5px solid #000; }
  .sheet-note, .field-label, .sheet-foot { color: #333; }
  .sheet-scan .qr { max-width: 170px; }
  @page { margin: 14mm; }
}

/* ── language ─────────────────────────────────────────────
   The switcher sits beside the theme toggle and only ever offers a language that has
   the page you are on. The coverage note is load-bearing, not decoration: it tells a
   reader which parts of the course exist in their language before they pay. */
.lang-switch {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
.lang-link {
  display: inline-flex; align-items: center;
  padding: .3rem .55rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.lang-link + .lang-link { border-left: 1px solid var(--rule); }
.lang-link:hover { background: var(--panel); color: var(--ink); }
.lang-link.is-current { background: var(--accent); color: var(--accent-ink); }
.coverage-note {
  background: var(--panel);
  border-left: 3px solid var(--brand-green);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: .7rem 1rem;
  margin: 0 0 1.5rem;
  font-size: .9rem; line-height: 1.5; color: var(--ink-2);
}
.coverage-note strong { color: var(--ink); }

/* ── reviewer demo ────────────────────────────────────────
   A reviewer needs to see, at a glance, which modules they have already formed an
   opinion about. Progress comes from the same localStorage the course already writes. */
.demo-pass { margin-top: 2rem; }
.demo-grid { display: grid; gap: .5rem; margin: 1rem 0; }
.demo-mod {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: var(--r-md); padding: .6rem .9rem; background: var(--panel-2);
}
.demo-mod.started { border-left-color: var(--advisory); }
.demo-mod.done { border-left-color: var(--brand-green); }
.demo-num { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); flex: none; }
.demo-text { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; flex: 1; }
.demo-text a { font-weight: 600; text-decoration: none; }
.demo-text a:hover { text-decoration: underline; }
.demo-state {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-3); margin-left: auto;
}
.demo-mod.done .demo-state { color: var(--lime-text); }