/* 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;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.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; }
.score .score-next { margin-top: 14px; }

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; }

/* Phones: wordmark, language and theme share the first row; the nav becomes one
   sideways-scrolling row under it, so the sticky header stays two rows tall. */
@media (max-width: 720px) {
  .site-head-inner { gap: 6px 10px; padding-block: 8px; }
  .site-head .wordmark { order: 1; }
  .site-head .lang-switch { order: 2; }
  .site-head .theme-toggle { order: 3; padding: 6px 10px; min-height: 32px; }
  .site-nav {
    order: 4;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 12px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; padding: 9px 10px; }
}

.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; }
/* A figure with no image yet is built empty and hidden (tools/render_md.py). */
.fig-planned[hidden] { display: none; }
.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"; }

/* ── quote band: one customer's words across the column ── */
.quote-band {
  margin: 56px 0 0;
  padding: 36px 32px 30px;
  background: var(--panel);
  border-block: 1px solid var(--rule);
}
.quote-band blockquote { margin: 0; }
.quote-band p {
  margin: 0;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.quote-band .rule-lime { margin: 26px 0 0; }
.quote-band figcaption {
  margin-top: 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.quote-band figcaption span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: .1em;
}
@media (max-width: 720px) {
  .quote-band { padding: 28px 20px 24px; }
}

/* ── 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);
}
/* The default ink for figure text. Scoped with :not([fill]) because a CSS rule always
   beats a presentation attribute: without the guard, every fill="var(--danger-red)" and
   every fill="#0D1B2A" marker numeral in assets/img/*.svg renders as --ink instead. */
.fig-svg svg text:not([fill]) { fill: var(--ink); }
.fig-svg svg .label, .fig-svg svg text.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, .fig-svg svg text.dim { fill: var(--ink-2); }
.fig-svg svg .muted-fill, .fig-svg svg text.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; }
/* A DBB mode icon beside the text that explains the mode. */
.mode-icon { width: 100%; max-width: 200px; height: auto; justify-self: center; border-radius: 22%; }

.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; }
/* A password field with its eye button (password-field.js). The label keeps only its
   words, so the group spaces them the way a label spaces its own field. */
.pw-group { display: grid; gap: 6px; }
.pw-field { position: relative; display: block; }
.interest-form .pw-field input { padding-right: 54px; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.pw-eye:hover, .pw-eye:focus-visible { color: var(--ink); border-color: var(--accent); outline: none; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }

/* ── main site: photo slots, model cards, split sections ── */
/* A real photograph fills the same box its placeholder did, so dropping one in never
   moves the layout. The ratio is the slot's, and the image is cropped to it rather than
   letterboxed, which lets one file serve the 16/10, 4/3 and 16/9 uses of the same shot. */
.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--panel);
}

.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; }
}

/* ── main site: the blog ──────────────────────────────── */
.post-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.post-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.post-chip:hover, .post-chip:focus-visible { border-color: var(--accent); color: var(--ink); outline: none; }
.post-chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  margin-top: 26px;
}
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  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);
}
.post-card[hidden] { display: none; }
.post-card:hover, .post-card:focus-visible { border-left-color: var(--accent); outline: none; }
.post-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 35%;
  background: var(--bg);
}
.post-card-text { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.post-kicker {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime-text);
}
.post-card-title { font-weight: 900; font-size: 1.2rem; line-height: 1.15; }
.post-card-summary { color: var(--ink-2); font-size: .95rem; }
.post-card-time {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.post-card.is-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.post-card.is-lead .post-card-img { aspect-ratio: 4 / 3; }
.post-card.is-lead .post-card-text { padding: 24px; justify-content: center; }
.post-card.is-lead .post-card-time { margin-top: 6px; }
.post-card.is-lead .post-card-title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
@media (max-width: 720px) {
  .post-card.is-lead { grid-template-columns: 1fr; }
  .post-card.is-lead .post-card-img { aspect-ratio: 3 / 2; }
}

.post .kicker a { color: inherit; text-decoration: none; }
.post .kicker a:hover { text-decoration: underline; }
.post-source { margin-top: 6px; font-size: .88rem; color: var(--ink-2); }
.post-photo { margin: 26px 0 0; }
.post-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  background: var(--panel);
  border-radius: var(--r-lg);
}
.post-photo figcaption { margin-top: 8px; font-size: .85rem; color: var(--ink-2); }
.post-body { font-size: 1.04rem; line-height: 1.65; }
.post-body h2 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; margin-top: 46px; }
.post-body blockquote {
  margin: 22px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 4px solid var(--brand-green);
  color: var(--ink-2);
}
.post-body blockquote p:first-child { margin-top: 0; }
.post-video {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
}
.post-video:hover, .post-video:focus-visible { border-color: var(--accent); outline: none; }
.post-video-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
}
.post-video-title { display: block; font-weight: 700; }
.post-video-label {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.post-update { margin-top: 22px; }
.post-update p { margin: 0; }
.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin-top: 22px;
}
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
}
.post-nav-link:hover, .post-nav-link:focus-visible { border-color: var(--accent); outline: none; }
.post-nav-newer { text-align: right; }
.post-nav-title { font-weight: 700; }
.post-newsletter p { margin: 0; }
.post-all { margin-top: 22px; }
@media print {
  .post-chips, .post-nav, .post-newsletter, .post-all { display: none; }
}

/* ── 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); }

/* ── follow-up list: Forget me, pop-ups, notices ──────────
   The Forget me button is a pinned bright violet in both themes with white text (6.0:1).
   Violet is already this site's color for "this removes something", and pinning it
   keeps the button the same object in light and dark, which the notice promises by
   calling it "the bright violet button". */
.btn.forget { background: #A100D6; border-color: #A100D6; color: #fff; }
.btn.forget:hover, .btn.forget:focus-visible { background: #8A00A8; border-color: #8A00A8; }
.btn.small { min-height: 32px; padding: 7px 12px; font-size: 11px; }

.interest-form label.age-check {
  display: flex; align-items: flex-start; gap: 10px;
  text-transform: none; letter-spacing: normal;
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
.interest-form label.age-check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--brand-blue); }
.interest-form select { width: 100%; text-transform: none; letter-spacing: normal; font-weight: 400; min-height: 46px; }

.consent-note, .fu-notice {
  font-size: .88rem; line-height: 1.55; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--rule);
  border-left: 3px solid #A100D6; border-radius: var(--r-md);
  padding: 12px 14px;
}
.consent-note p, .fu-notice p { margin: 0 0 .6em; }
.consent-note p:last-child, .fu-notice p:last-child { margin-bottom: 0; }
.fu-notice { max-height: 40vh; overflow-y: auto; margin: 1rem 0; }

.fu-dialog {
  width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  border: 1px solid var(--rule); border-top: 4px solid var(--brand-blue);
  border-radius: var(--r-lg); padding: 22px 24px;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 18px 50px rgba(13, 27, 42, .35);
}
.fu-dialog::backdrop { background: rgba(13, 27, 42, .62); }
.fu-dialog h2 { margin: 0 0 .6rem; padding: 0; border: 0; font-size: 1.3rem; }
.fu-dialog > p { color: var(--ink-2); line-height: 1.55; }
.fu-dialog .fu-form { margin: 1rem 0 0; padding: 0; background: none; border: 0; max-width: none; }
.fu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.1rem; }

.fu-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  max-width: min(26rem, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px;
  background: #0D1B2A; color: #fff; border-left: 4px solid var(--brand-green);
  border-radius: var(--r-lg); padding: 14px 14px 14px 16px;
  font-size: .95rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.fu-toast-x {
  background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 0 2px; min-width: 28px; min-height: 28px;
}

.followup-slot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.followup-slot[hidden] { display: none; }
/* The form and its labels set display, which beats the browser's own [hidden] rule, so
   a hidden form or fill-in would stay on screen without this. */
.interest-form[hidden], .interest-form [hidden] { display: none; }

/* ── DBB features guide: the ten product images, each with its detail ──
 * The page is also the waitlist confirmation: [data-joined] shows after a sign-up,
 * [data-join] hides. Both set display elsewhere, so hidden has to win here. */
[data-join][hidden], [data-joined][hidden] { display: none; }
.guide-toc {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 8px 24px;
}
.guide-toc a {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--accent); }
.guide-item {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
  scroll-margin-top: 80px;
}
.guide-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
}
.guide-item h2 { border: 0; margin: 10px 0 0; padding: 0; }
.guide-item p { color: var(--ink); max-width: 60ch; }
.guide-item ul { color: var(--ink-2); max-width: 60ch; }
@media (max-width: 760px) {
  .guide-item { grid-template-columns: 1fr; gap: 20px; }
}
[data-joined] + .kicker { margin-top: 36px; }

/* Text for screen readers only: the words behind a ✓ or — in a table. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── the DBB line compared ── */
/* The chart's sr-only labels are absolutely positioned. Without a positioned box to hold
   them they escape the sideways scroller, and a phone zooms the whole page out to 733px. */
.tbl.compare { position: relative; }
.compare table { min-width: 760px; }
.compare thead th { vertical-align: bottom; text-align: center; padding-top: 16px; }
.compare thead th:first-child { text-align: left; }
.compare .tier { display: block; font-family: var(--ui); font-size: 1.05rem; font-weight: 900;
  letter-spacing: .02em; color: var(--ink); }
.compare .tier a { color: var(--accent); }
.compare .tier-sub { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .08em; color: var(--ink-2); margin-top: 4px; }
.compare tbody th[scope="row"] { font-size: .92rem; letter-spacing: normal; text-transform: none;
  font-weight: 600; color: var(--ink); width: 34%; }
.compare tr.grp th { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  color: var(--lime-text); background: var(--panel-2); padding-top: 14px; }
.compare td { text-align: center; vertical-align: middle; }
.compare td.yes { color: var(--accent); font-weight: 900; font-size: 1.05rem; }
.compare td.no { color: var(--ink-3); }
.compare td.note { font-size: .8rem; color: var(--ink-2); }
.compare th:last-child, .compare td:last-child { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.compare:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── DBB Desktop: the dashboard on a monitor ── */
.monitor { margin: 34px auto 0; max-width: 1100px; }
.monitor-screen {
  background: #05090F;
  border: 14px solid #1B2735;
  border-bottom-width: 22px;
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--rule);
  line-height: 0;
}
.monitor-screen img { width: 100%; height: auto; display: block; }
.monitor-stand { width: 18%; height: 44px; margin: 0 auto; background: linear-gradient(#1B2735, #111A25);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.monitor-base { width: 34%; height: 10px; margin: 0 auto; background: #1B2735; border-radius: 6px 6px 3px 3px; }
.monitor figcaption { font-size: .85rem; color: var(--ink-2); margin-top: 14px; text-align: center; }
.desktop-hero { grid-template-columns: minmax(0, 1fr); }
.desktop-hero .lede { max-width: 68ch; }
.compare table { table-layout: fixed; }
.compare thead th:first-child, .compare tbody th[scope="row"] { width: 32%; }
/* Radios in the compare chart: one symbol each, on one line. */
.compare svg.radio { width: 18px; height: 18px; color: var(--accent); vertical-align: middle; }
.compare .radio-set { display: inline-flex; gap: 8px; align-items: center; }
.compare .radio-note { display: block; font-size: .72rem; color: var(--ink-2); margin-top: 3px; }
.radio-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.radio-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.radio-legend svg.radio { width: 16px; height: 16px; color: var(--accent); }

/* ── main site: proof beside the buttons, the wide home hero, the conversion story ── */
.proof { font-size: .9rem; color: var(--ink-2); margin-top: 14px; max-width: 60ch; }
.proof-quote { margin: 22px 0 0; padding: 14px 18px; border-left: 4px solid var(--accent);
  background: var(--panel); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: .95rem;
  color: var(--ink); max-width: 62ch; }
.proof-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: .82rem;
  color: var(--ink-2); }
.hero-wide { grid-template-columns: minmax(0, 1fr); }
.hero-wide .hero-shot { order: 2; }
.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 18px; margin-top: 22px; }
.story-step { position: relative; min-width: 0; }
.story-step .story-num { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: #0D1B2A; font-family: var(--mono);
  font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.story-step h3 { font-size: 1rem; margin: 12px 0 4px; }
.story-step p { font-size: .9rem; color: var(--ink-2); margin: 0; }

/* ── the course beta: marked tests, the account page, the grading page ──
   .btn sets display, which beats the browser's own [hidden] rule, so a button the
   scripts hide would stay on screen without this. The marks after a test say right or
   wrong in the zone colors, never which answer was right. */
.btn[hidden] { display: none; }
/* The same for the test's button row, which quiz.js hides during the password step. */
.actions[hidden] { display: none; }
.mark { font-weight: 700; margin-left: .45em; }
.mark.ok { color: var(--good); }
.mark.no { color: var(--warning); }
.q input:disabled + .key, .q select:disabled, .q textarea:disabled { opacity: .85; }
.opt:has(input:disabled) { cursor: default; }
.opt:has(input:disabled):hover { border-color: var(--rule); }
.opt.correct:has(input:disabled):hover { border-color: var(--good); }
.opt.wrong:has(input:disabled):hover { border-color: var(--warning); }
[data-acct-dates] { margin-top: 10px; }
[data-acct-module] td[data-col] { white-space: nowrap; }

/* ── the repair wiki (tools/build_wiki.py, assets/js/wiki.js) ── */
.wiki-filter { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
.wiki-filter input[type="search"] { width: 100%; }
@media (max-width: 720px) { .wiki-filter { grid-template-columns: 1fr; } }
.wiki-article h2 { margin-top: 32px; }
.wiki-article h3 { margin-top: 22px; }
.wiki-article .tbl td { vertical-align: top; }
.wiki-lang-note { margin-top: 10px; }
.chip.wiki-web { border-color: var(--lime-text); color: var(--lime-text); }
.chip.wiki-group { border-color: var(--nominal); color: var(--nominal); }
/* The reference articles: rows grouped by category, the modules index's shape. */
.wiki-refs { margin-top: 6px; }
.wiki-refs-group { margin-top: 22px; }
.wiki-refs-group h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.wiki-ref { display: grid; gap: 2px; padding: 12px 16px; margin-top: 8px; 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); }
.wiki-ref:hover, .wiki-ref:focus-visible { border-left-color: var(--accent); outline: none; }
.wiki-ref-title { font-weight: 700; }
.wiki-ref-summary { color: var(--ink-2); font-size: .9rem; }
.wiki-ref[hidden], .wiki-refs-group[hidden] { display: none; }
a.chip { text-decoration: none; }
.wiki-card-img { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: var(--r-md); margin-top: 10px; }
.wiki-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.wiki-photo { margin: 0; }
.wiki-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--panel); }
.wiki-photo figcaption { font-size: .85rem; color: var(--ink-2); margin-top: 6px; }
.wiki-photo .actions { margin-top: 8px; gap: 8px; }
.wiki-caption { gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
.wiki-caption label { font-size: .8rem; }
.wiki-mine-card .prompt a, .wiki-review-card .prompt { font-size: 1.05rem; }
.wiki-review-card .wiki-review-body h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.wiki-review-card .interest-form { margin-top: 16px; }
.wiki-triage ul { margin: 4px 0 8px 18px; }
.wiki-triage b { display: block; margin-top: 8px; }
/* Repair topics (assets/js/wiki.js): the board on the library page, a topic's page and
   its flip-through, and the team's topic tools. Wanted topics carry the brand green, the
   way the site marks what's open to you. */
.wiki-filter.with-show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wiki-filter.with-show > label:first-child { grid-column: 1 / -1; }
@media (max-width: 720px) { .wiki-filter.with-show { grid-template-columns: 1fr; } }
.wiki-topics-progress { margin-top: 4px; }
.wiki-topic { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.wiki-topic.wanted { border-left-color: var(--brand-green); }
.wiki-topic-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: .82rem; color: var(--ink-3); }
@media (max-width: 720px) { .wiki-topic { grid-template-columns: 1fr; } .wiki-topic-meta { justify-content: flex-start; } }
.chip.wiki-wanted { border-color: var(--lime-text); color: var(--lime-text); font-weight: 700; }
.chip.wiki-first { border-color: var(--lime-text); color: var(--lime-text); }
a.chip.wiki-topic-chip { border-color: var(--accent); color: var(--accent); }
.wiki-summary li { margin: 6px 0; }
/* Inside the summary its sections are a step below the page's own three parts. */
.wiki-summary h2 { border: 0; padding: 0; margin: 26px 0 0; font-size: 1.02rem; letter-spacing: .04em; color: var(--lime-text); }
.chip.wiki-src { margin-left: 4px; font-size: .75rem; vertical-align: middle; white-space: nowrap; }
button.chip.wiki-src { cursor: pointer; background: var(--panel-2); color: var(--accent); border-color: var(--accent); font-family: inherit; }
button.chip.wiki-src:hover, button.chip.wiki-src:focus-visible { background: var(--accent); color: var(--accent-ink); outline: none; }
.wiki-flip[hidden], .wiki-flip-filter[hidden], .wiki-flip-bar select[hidden] { display: none; }
.wiki-flip-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1px dashed var(--accent); border-radius: var(--r-md); color: var(--ink-2); }
.wiki-flip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.wiki-flip-count { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--ink-2); min-width: 8ch; text-align: center; }
.wiki-flip-bar select { width: auto; margin-left: auto; min-height: 44px; }
.wiki-flip-card { display: block; margin-top: 12px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--brand-green); border-radius: var(--r-lg); touch-action: pan-y; }
.wiki-flip-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-flip-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.wiki-flip-card .wiki-article h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.wiki-flip-card .actions { margin-top: 12px; }
@media (max-width: 720px) { .wiki-flip-card { padding: 14px; } .wiki-flip-bar select { margin-left: 0; flex: 1 0 100%; } }
.wiki-flip-list { margin-top: 14px; }
.wiki-flip-list summary { cursor: pointer; color: var(--ink-2); }
.wiki-flip-list ol { margin: 8px 0 0 22px; }
.wiki-flip-list li { margin: 2px 0; }
.wiki-flip-list button { background: none; border: 0; padding: 6px 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.wiki-flip-list li.current button { color: var(--ink); font-weight: 700; text-decoration: none; }
.btn.wiki-helpful[aria-pressed="true"] { background: var(--brand-green); border-color: var(--brand-green); color: #0D1B2A; }
[data-wiki-team-topic] { align-items: center; gap: 8px; }
.wiki-topic-admin { margin-top: 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.wiki-topic-admin > summary { cursor: pointer; font-weight: 700; }
.wiki-topic-admin > summary .muted { font-weight: 400; }
.wiki-topic-admin .interest-form { margin-top: 12px; }
.wiki-topic-admin .actions select { min-height: 44px; }
.wiki-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.interest-form label.wiki-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.interest-form label.wiki-check input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--brand-blue); }
/* Brands: a repair's brand chip, the brand chips over a topic that changes with the brand,
   and the summary's per-brand sections. */
.chip.wiki-brand { border-color: var(--nominal); color: var(--nominal); }
.wiki-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.wiki-variants[hidden] { display: none; }
.wiki-variants-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wiki-variant-chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.chip.wiki-variant { cursor: pointer; min-height: 36px; background: var(--panel); font-family: inherit; }
button.chip.wiki-variant:hover, button.chip.wiki-variant:focus-visible { border-color: var(--accent); outline: none; }
button.chip.wiki-variant[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wiki-brand-section { margin-top: 6px; padding: 2px 0 6px 14px; border-left: 3px solid var(--nominal); }
.wiki-brand-section h3 { margin-top: 16px; font-size: 1rem; }
.wiki-brand-section .tbl { margin-top: 8px; }
/* On a phone a code table becomes one block per code: the code, what it was, the fix,
   the repairs, top to bottom, with no sideways scrolling at the bench. */
@media (max-width: 720px) {
  .wiki-brand-section .tbl { overflow: visible; border: 0; background: none; }
  .wiki-brand-section table, .wiki-brand-section tbody, .wiki-brand-section tr, .wiki-brand-section td { display: block; width: auto; min-width: 0; }
  .wiki-brand-section thead { display: none; }
  .wiki-brand-section tr { margin-top: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); }
  .wiki-brand-section td { padding: 2px 0; border: 0; }
  .wiki-brand-section td:first-child { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
}
.wiki-hint { display: block; margin-top: 4px; font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wiki-brand-picker { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wiki-brand-picker input[hidden] { display: none; }
.wiki-brand-admin h3 { font-size: .95rem; margin-top: 18px; }
.wiki-adopt { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--rule); border-radius: var(--r-md); }

/* ── the group portal's band (assets/js/portal.js, tools/build_site.page) ──
   A strip under the header for someone in a shop, family or youth group: type chip,
   group name, role, and the leader's tabs. The accent follows the group type (owner's
   1 October 2026 placeholders: shop lime, family blue, group silver); the same accent
   colours the "Our notes" and "Full wiki" links the script puts in the top nav. */
html[data-portal-kind="shop"]   { --portal-accent: var(--lime-text); }
html[data-portal-kind="family"] { --portal-accent: var(--nominal); }
html[data-portal-kind="group"]  { --portal-accent: var(--brand-grey); }
.portal-band {
  margin-inline: -16px;
  padding-inline: 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel-2);
}
.portal-band[hidden] { display: none; }
.portal-band-inner {
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 8px;
}
.portal-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--portal-accent, var(--rule));
  color: var(--portal-accent, var(--ink-2));
  white-space: nowrap;
}
.portal-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-role { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.portal-tabs { display: flex; gap: 4px; margin-left: auto; }
.portal-tab {
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.portal-tab:hover, .portal-tab:focus-visible { color: var(--ink); border-color: var(--rule); outline: none; }
.portal-tab.active { color: var(--ink); border-color: var(--portal-accent, var(--accent)); }
.portal-tab b { color: var(--portal-accent, var(--ink)); margin-left: 6px; }
.nav-link.portal-link { color: var(--portal-accent, var(--ink-2)); }
.nav-link.portal-link.active { border-color: var(--portal-accent, var(--accent)); }
@media (max-width: 720px) {
  .portal-id { flex: 1 0 100%; }
  .portal-tabs { margin-left: 0; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  .portal-tabs::-webkit-scrollbar { display: none; }
}
.portal-scores td, .portal-scores th { white-space: nowrap; }

/* ── "Improve this page" (assets/js/report.js) and the team's list (team-reports.js) ──
 * The link sits at the foot of a module reading or test page, for signed-in learners
 * only. The dialog reuses .fu-dialog and .interest-form; these rules add its pieces. */
.report-foot {
  margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: flex-end;
}
.report-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.report-link:hover, .report-link:focus-visible { text-decoration-thickness: 2px; }
.report-dialog .report-form { gap: 14px; }
.report-where {
  display: grid; gap: 10px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.report-page { font-size: .85rem; color: var(--ink); overflow-wrap: anywhere; }
.report-where select {
  font-family: var(--ui); font-size: .95rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: 8px 10px;
  text-transform: none; letter-spacing: normal; font-weight: 400; width: 100%;
}
.report-quote-label, .report-photos-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}
.report-quote blockquote {
  margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent);
  font-style: italic; color: var(--ink); overflow-wrap: anywhere;
}
.report-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.report-choices legend {
  padding: 0; margin-bottom: 6px; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.report-options { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.interest-form label.report-choice {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: normal; font-size: .95rem; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.interest-form label.report-choice input {
  width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand-blue);
}
.report-photos { display: grid; gap: 8px; justify-items: start; }
.report-hint { margin: 0; font-size: .85rem; color: var(--ink-2); }
.report-thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.report-thumbs:empty { display: none; }
.report-thumbs li { display: grid; gap: 4px; justify-items: center; }
.report-thumbs img {
  width: 84px; height: 84px; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--r-md);
}
.report-msg { margin: 0; min-height: 1.2em; font-size: .92rem; color: var(--ink-2); }
.report-msg.bad { color: var(--danger-red); font-weight: 600; }
.report-thanks { font-size: 1.02rem; line-height: 1.5; }

/* The team's list (training/team/reports.html) */
.report-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
.report-filters .btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.report-card { display: grid; gap: 10px; }
.report-card .report-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--ink-2); }
.report-card .report-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.report-card .report-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.report-card .report-shots img {
  width: 120px; height: 90px; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--r-md);
}
.report-card textarea {
  width: 100%; min-height: 90px; font-family: var(--ui); font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 12px;
}
.report-card .report-answer { display: grid; gap: 8px; }
.report-card .report-answer-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.report-card select {
  font-family: var(--ui); font-size: .95rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: 8px 10px;
}
.report-card .report-saved { font-size: .9rem; color: var(--ink-2); }

/* ── main site: the newsletter bar (assets/js/newsletter.js) ─── */
/* A lime tab fixed to the left edge that slides out a window styled like the home page's
   motorcycle cards. Lime in both themes: it's the owner's call, and the theme accent turns
   blue in light mode. */
.nl-tab {
  position: fixed;
  left: 0;
  top: 38vh;
  z-index: 60;
  writing-mode: vertical-rl;
  padding: 16px 8px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: #BBEB19;
  color: #0D1B2A;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
.nl-tab:hover { padding-left: 11px; }
.nl-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.nl-panel {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 61;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-left: 4px solid #BBEB19;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  transform: translate(-105%, -50%);
  transition: transform .28s ease;
}
.nl-panel.open { transform: translate(0, -50%); }
.nl-panel[hidden] { display: none; }
.nl-shot { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.nl-body { padding: 16px 18px 18px; }
.nl-kicker {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nl-title { font-weight: 900; font-size: 1.35rem; line-height: 1.15; margin: 6px 0 4px; }
.nl-line { color: var(--ink-2); font-size: .95rem; margin: 0 0 4px; }
.nl-form { margin-top: 10px; gap: 10px; padding: 0; background: none; border: 0; max-width: none; }
.nl-small { font-size: .78rem; color: var(--ink-2); margin: 0; }
.nl-small a { color: inherit; }
.nl-status { min-height: 1.2em; font-size: .88rem; margin: 0; }
.nl-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 27, 42, .72);
  color: #FFFFFF;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.nl-close:focus-visible { outline: 3px solid #BBEB19; outline-offset: 2px; }
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
  .nl-tab { top: auto; bottom: 18vh; padding: 12px 6px; font-size: .64rem; }
  .nl-panel { top: auto; bottom: 16px; transform: translateX(-105%); }
  .nl-panel.open { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .nl-panel { transition: none; } }
@media print { .nl { display: none; } }

/* shop management system screenshots (for-shops) */
.sys-shot { margin: 24px 0; }
.sys-shot a { display: block; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.sys-shot img { display: block; width: 100%; height: auto; }
.sys-shot figcaption { margin-top: 8px; font-size: .85rem; color: var(--ink-3); }
.sys-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.sys-shots .sys-shot { margin: 0; }
@media (max-width: 720px) { .sys-shots { grid-template-columns: 1fr; } }