/* Site styles. Owned by the Visual Designer. Tokens live in tokens.css; see docs/style-guide.md. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 112.5%; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--fs-h1); margin: .25rem 0 1.1rem; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); margin: 2.75rem 0 .9rem; scroll-margin-top: 1rem; }
h3 { font-size: var(--fs-h3); margin: 1.9rem 0 .5rem; scroll-margin-top: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }
code, kbd, .mono { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { background: var(--surface-2); border-radius: 4px; padding: .05em .3em; }
img, svg, video { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* The inline sprites: keep them in the render tree (0x0) so markers and defs resolve in every browser. */
div[hidden]:has(> svg > symbol) { display: block !important; position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none;
  padding: .6rem 1rem; border-radius: var(--radius-sm);
}
.skip:focus { top: .6rem; }

/* ---------- Header ---------- */
.site-header {
  --focus: var(--header-focus);
  background: var(--header-bg); color: var(--header-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--header-accent) 30%, transparent);
}
.site-header .inner {
  max-width: var(--page-max); margin: 0 auto; padding: .6rem var(--gutter); min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-width: 0;
  color: var(--header-ink); text-decoration: none; font: 700 1.05rem/1.1 var(--font-head);
}
.brand-mark { width: 32px; height: 32px; flex: none; }
.site-nav { display: flex; align-items: center; gap: .35rem; }
.site-nav a {
  color: var(--header-ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  padding: .5rem .75rem; border-radius: var(--radius-pill);
}
.site-nav a:hover { color: var(--header-accent); background: color-mix(in srgb, var(--header-ink) 9%, transparent); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem .95rem;
  font: 600 var(--fs-sm)/1 var(--font); color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.site-header .btn { color: var(--header-ink); background: transparent; border-color: color-mix(in srgb, var(--header-ink) 40%, transparent); }
.site-header .btn:hover { color: var(--header-accent); border-color: var(--header-accent); }
#toggle-theme::before {
  content: ""; width: 1.05rem; height: 1.05rem; flex: none; border-radius: 50%;
  border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
@media (max-width: 479px) {
  #toggle-theme { font-size: 0; width: 40px; padding: 0; justify-content: center; }
  .site-nav a { padding: .5rem .6rem; }
}

/* ---------- Page layout ---------- */
.page {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--sp-8);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
main { min-width: 0; }
.lesson { max-width: var(--measure); }
@media (min-width: 1000px) {
  .page { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 3.5rem; }
}

/* Contents rail: a collapsible box above the text on narrow screens, a sticky rail on wide screens */
.toc { font-size: var(--fs-sm); margin-top: 1rem; }
.toc details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .7rem 1rem; min-height: 44px; cursor: pointer; list-style: none;
  font: 700 var(--fs-sm)/1.2 var(--font-head);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after, details.answer > summary::before, details.describe > summary::before {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.toc details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.toc ol { list-style: none; margin: 0; padding: 0 .5rem .6rem; }
.toc a {
  display: block; padding: .35rem .65rem; color: var(--muted); text-decoration: none;
  border-radius: var(--radius-sm); line-height: 1.35;
}
.toc a:hover { color: var(--ink); background: var(--surface-2); }
.toc a[aria-current] { color: var(--accent); background: var(--accent-bg); font-weight: 700; }
@media (min-width: 1000px) {
  .toc { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 1.75rem 0 1rem; margin: 0; }
  .toc details { background: none; border: 0; }
  .toc summary { padding: 0 0 .7rem; min-height: 0; color: var(--muted); pointer-events: none; }
  .toc summary::after { display: none; }
  .toc ol { padding: 0; border-left: 2px solid var(--line); }
  .toc a { margin-left: -2px; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-left: .9rem; }
  .toc a[aria-current] { border-left-color: var(--accent); }
}

/* ---------- Lesson header (part 1: syllabus reference) ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem;
  margin: 1.75rem 0 .6rem; font-size: var(--fs-sm); color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .8rem 1.5rem;
  margin: 0; padding: 1rem 1.15rem; font-size: var(--fs-sm); line-height: 1.45;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.meta-grid dt { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: .15rem; }
.meta-grid dd { margin: 0; }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .95rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Lesson body ---------- */
.lesson > ul, .lesson > ol { padding-left: 1.4rem; margin: 0 0 1.2em; }
.lesson > ul li + li, .lesson > ol li + li { margin-top: .35rem; }
.lesson > blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--line-strong); color: var(--muted); }

/* Learning objectives: h2#learning-objectives + list (or the template's .objectives box) */
.lesson h2#learning-objectives + :is(ol, ul), .objectives {
  list-style: none; margin: 0; padding: 1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius);
}
.lesson h2#learning-objectives + ol { counter-reset: lo; }
.lesson h2#learning-objectives + :is(ol, ul) > li { position: relative; padding-left: 2.4rem; margin: .45rem 0; }
.lesson h2#learning-objectives + ol > li { counter-increment: lo; }
.lesson h2#learning-objectives + :is(ol, ul) > li::before {
  position: absolute; left: 0; top: .1em; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-bg); color: var(--accent);
  font: 700 .8rem/1 var(--font-head); content: "";
}
.lesson h2#learning-objectives + ol > li::before { content: counter(lo); }
.lesson h2#learning-objectives + ul > li::before { box-shadow: inset 0 0 0 .45rem var(--accent-bg), inset 0 0 0 1.6rem var(--accent); }

/* The idea: one plain-language paragraph */
.lesson h2#the-idea + p, .idea {
  font-size: var(--fs-lg); line-height: 1.55; margin: 0;
  padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--sky);
}

/* ---------- Callouts ---------- */
.callout {
  --c: var(--real); --c-bg: var(--real-bg);
  margin: 1.6rem 0; padding: .85rem 1.15rem 1rem;
  background: var(--c-bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-left: 4px solid var(--c);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
}
.callout.rule { --c: var(--rule); --c-bg: var(--rule-bg); }
.callout.practice { --c: var(--practice); --c-bg: var(--practice-bg); }
.callout.aircraft { --c: var(--aircraft); --c-bg: var(--aircraft-bg); }
.callout.example { --c: var(--example); --c-bg: var(--example-bg); }
.callout.trap { --c: var(--trap); --c-bg: var(--trap-bg); }
.callout.realworld { --c: var(--real); --c-bg: var(--real-bg); }
.callout.explain-back { --c: var(--explain); --c-bg: var(--explain-bg); }
.callout.national { --c: var(--national); --c-bg: var(--national-bg); }
.callout > .label {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 0 0 .45rem;
  color: var(--c); font: 700 .95rem/1.3 var(--font-head);
}
.callout .icon, .callout > .label > svg { width: 20px; height: 20px; flex: none; }
.callout .ref {
  margin-left: auto; padding: .2rem .55rem; border-radius: var(--radius-sm);
  font: 600 var(--fs-xs)/1.25 var(--mono); color: var(--c); background: var(--surface);
  overflow-wrap: anywhere; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.callout p { margin: 0 0 .6em; }
.callout > :last-child { margin-bottom: 0; }
.callout :is(ul, ol) { margin: .4rem 0 .6rem; padding-left: 1.3rem; }
.callout :is(ul, ol) li + li { margin-top: .25rem; }
.callout a { color: inherit; text-decoration-color: var(--c); }
.callout .table-wrap, .callout figure.fig { margin: .8rem 0; }
/* Worked example: "Given / Find / Method / Working / Answer" as hanging labels */
.callout.example p[data-label] { padding-left: 6.5rem; }
.callout.example p[data-label] > strong:first-child { float: left; width: 6.5rem; margin-left: -6.5rem; color: var(--c); }
.callout.example p[data-label="answer"] {
  margin: .8rem -.8rem 0; padding: .55rem .8rem .55rem 7.3rem;
  background: var(--surface); border-radius: var(--radius-sm); font-weight: 600;
}
.callout.example dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: .4rem 0 0; }
.callout.example dt { font-weight: 700; color: var(--c); }
.callout.example dd { margin: 0; }
@media (max-width: 479px) {
  .callout { padding-left: .95rem; padding-right: .95rem; }
  .callout.example p[data-label] { padding-left: 0; }
  .callout.example p[data-label] > strong:first-child { float: none; display: block; width: auto; margin: 0; }
  .callout.example p[data-label="answer"] { padding-left: .8rem; }
  .callout.example dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .callout.example dd + dt { margin-top: .4rem; }
}

/* [VERIFY] badge (drafts only; production build fails on it) */
.verify {
  display: inline-block; padding: .1rem .45rem; border-radius: var(--radius-sm); vertical-align: .05em;
  font: 600 var(--fs-xs)/1.35 var(--mono); color: var(--verify); background: var(--verify-bg);
  border: 1px dashed var(--verify);
}
p.verify { display: block; padding: .6rem .85rem; }

/* ---------- Figures (Layer C) ---------- */
figure.fig {
  position: relative; margin: 2rem 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
figure.fig .art { background: var(--fig-sky); }
figure.fig .art > svg, figure.fig .art > img, figure.fig .art > picture img { display: block; width: 100%; height: auto; }
figure.fig.fig-photo .art { background: var(--surface-2); }
figure.fig .art svg text { font-family: var(--font-fig); }
figure.fig figcaption {
  padding: .85rem 1.15rem 1rem; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.5;
}
figure.fig figcaption .num { font: 700 var(--fs-sm) var(--font-head); margin-right: .15rem; }
figure.fig .credit { display: block; margin-top: .3rem; font-size: var(--fs-xs); color: var(--muted); }
figure.fig .credit a { color: inherit; }
details.describe { margin-top: .55rem; }
details.describe > summary, details.answer > summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; cursor: pointer; list-style: none;
  color: var(--accent); font-weight: 700; font-size: var(--fs-sm);
}
details.describe > summary::-webkit-details-marker, details.answer > summary::-webkit-details-marker { display: none; }
details.describe > summary::before, details.answer > summary::before { transform: rotate(-45deg); width: .45rem; height: .45rem; }
details[open].describe > summary::before, details[open].answer > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
details.describe > p { margin: .4rem 0 0; padding: .7rem .9rem; background: var(--surface-2); border-radius: var(--radius-sm); }

/* Interactive figures: static fallback first; the module adds .widget-ready */
figure.fig.widget-ready::before {
  content: "Interactive"; position: absolute; top: .6rem; right: .6rem; z-index: 1;
  padding: .15rem .6rem; border-radius: var(--radius-pill);
  font: 700 var(--fs-xs)/1.4 var(--font); color: var(--accent-ink); background: var(--accent);
}
.widget-shell { display: grid; gap: .85rem; padding: 1rem 1.15rem; background: var(--surface); border-top: 1px solid var(--line); }
.widget-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem 1rem; }
figure.fig label { display: grid; gap: .3rem; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
figure.fig :is(input, select, textarea, button) { font: inherit; font-size: var(--fs-sm); }
figure.fig :is(input:not([type=range], [type=radio], [type=checkbox]), select, textarea) {
  width: 100%; min-height: 40px; padding: .4rem .6rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
figure.fig :is(input, select, textarea):hover { border-color: var(--accent); }
figure.fig input[type=range] { width: 100%; min-height: 32px; margin: 0; accent-color: var(--accent); }
figure.fig :is(input[type=radio], input[type=checkbox]) { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
figure.fig output { font: 600 var(--fs-sm) var(--mono); color: var(--ink); }
figure.fig button {
  min-height: 40px; padding: .4rem 1rem; cursor: pointer; font-weight: 700;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill);
}
figure.fig button:is(.secondary, [aria-pressed="false"]) { color: var(--accent); background: var(--surface); }
.widget-out {
  padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: var(--fs-sm);
  background: var(--surface-2); border-left: 4px solid var(--line-strong);
}
.widget-out.is-ok { border-left-color: var(--practice); background: var(--practice-bg); }
.widget-out.is-warn { border-left-color: var(--trap); background: var(--trap-bg); }
.pictos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 1rem .5rem; padding: 1.1rem; }
.pictos figure { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.pictos svg { width: 64px; height: 64px; display: block; margin: 0 auto .35rem; }

/* Diagram classes: usable inside figure SVGs and the symbol library (see style guide).
   Lines first, then text, then fills, so a fill class always wins over .d-ln's fill:none. */
.d-ln, .d-sym { fill: none; stroke: var(--fig-stroke); stroke-linecap: round; stroke-linejoin: round; }
.d-ln { stroke-width: 2.5; }
.d-sym { stroke-width: var(--sym-sw, 2); }
.d-thin { stroke-width: 1.5; }
.d-heavy { stroke-width: 3.5; }
.d-sym .d-thin { stroke-width: calc(var(--sym-sw, 2) * .65); }
.d-dash { stroke-dasharray: 8 6; }
.d-dot { stroke-dasharray: 0 7; }
.d-ln-accent { stroke: var(--fig-accent); } .d-ln-accent-2 { stroke: var(--fig-accent-2); }
.d-ln-warn { stroke: var(--fig-warn); } .d-ln-ok { stroke: var(--fig-ok); } .d-ln-muted { stroke: var(--fig-muted); }
.d-ln-marking { stroke: var(--fig-marking); } .d-ln-grid { stroke: var(--fig-grid); } .d-ln-none { stroke: none; }
.d-lbl { font: 500 20px/1 var(--font-fig); fill: var(--fig-stroke); }
.d-lbl-sm { font-size: 18px; } .d-lbl-lg { font-size: 24px; font-weight: 700; }
.d-fill { fill: var(--fig-fill); } .d-sky { fill: var(--fig-sky); } .d-cloud { fill: var(--fig-cloud); }
.d-cloud-dark { fill: var(--fig-cloud-dark); } .d-ground { fill: var(--fig-ground); } .d-terrain { fill: var(--fig-terrain); }
.d-water { fill: var(--fig-water); } .d-paved { fill: var(--fig-paved); } .d-marking { fill: var(--fig-marking); }
.d-sun { fill: var(--fig-sun); } .d-moon { fill: var(--fig-moon); } .d-accent { fill: var(--fig-accent); }
.d-accent-2 { fill: var(--fig-accent-2); } .d-warn { fill: var(--fig-warn); } .d-ok { fill: var(--fig-ok); }
.d-ink { fill: var(--fig-stroke); } .d-muted { fill: var(--fig-muted); } .d-none { fill: none; }
.d-mid { text-anchor: middle; } .d-end { text-anchor: end; }
.d-halo { paint-order: stroke; stroke: var(--halo, var(--fig-sky)); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- Tables ---------- */
.table-wrap {
  margin: 1.75rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  /* scroll shadows: appear only when the table is wider than its box */
  background:
    linear-gradient(90deg, var(--surface) 40%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 40%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) left / .8rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent) right / .8rem 100% no-repeat scroll,
    var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
caption {
  caption-side: top; text-align: left; padding: .8rem 1rem;
  font: 700 var(--fs-sm)/1.35 var(--font-head); border-bottom: 1px solid var(--line);
}
th, td { padding: .6rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; }
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }
:is(td, th).num { text-align: right; white-space: nowrap; }
td.mono, td .mono { white-space: nowrap; }

/* ---------- Self-check quiz ---------- */
.quiz > ol { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.quiz li.q {
  counter-increment: q; margin: 0 0 1rem; padding: 1rem 1.15rem 1.05rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.quiz .stem { font-weight: 600; }
.quiz .stem::before {
  content: "Q" counter(q); display: inline-block; margin-right: .55rem; padding: .05rem .45rem; border-radius: var(--radius-sm);
  font: 700 var(--fs-xs)/1.5 var(--font-head); color: var(--accent-ink); background: var(--accent); vertical-align: .1em;
}
.quiz .stem p { display: inline; margin: 0; }
.quiz .tag { display: block; margin-top: .3rem; font-size: var(--fs-xs); color: var(--muted); }
.quiz .opts { display: grid; gap: .5rem; margin: .85rem 0 .5rem; }
.quiz .opt {
  display: flex; align-items: flex-start; gap: .7rem; min-height: 44px; padding: .55rem .8rem; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.quiz .opt:hover { border-color: var(--accent); }
.quiz .opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.quiz .opt input { flex: none; width: 1.1rem; height: 1.1rem; margin: .2em 0 0; accent-color: var(--accent); }
.quiz .opt input:focus-visible { outline: none; }
.quiz .opt > span { flex: 1; }
.quiz .opt.correct { border-color: var(--practice); background: var(--practice-bg); }
.quiz .opt.wrong { border-color: var(--trap); background: var(--trap-bg); }
.quiz .opt:is(.correct, .wrong)::after {
  flex: none; align-self: center; padding: .05rem .5rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; background: var(--surface);
}
.quiz .opt.correct::after { content: "Correct"; color: var(--practice); }
.quiz .opt.wrong::after { content: "Not correct"; color: var(--trap); }
details.answer { margin-top: .35rem; }
/* explanation: one continuous accent bar, however many paragraphs */
details.answer > :not(summary) { margin: 0; padding: .2rem 0 .2rem .9rem; border-left: 3px solid var(--accent); }
details.answer > summary + * { margin-top: .45rem; }

/* ---------- Key concepts (Layer B) ---------- */
.key-concepts {
  margin: 3rem 0 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.key-concepts > h2 { margin: 0; padding: 1.15rem 1.25rem .35rem; background: var(--accent-bg); }
.key-concepts > .note { margin: 0; padding: 0 1.25rem 1rem; font-size: var(--fs-xs); color: var(--muted); background: var(--accent-bg); }
.kc { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .1rem .9rem; padding: 1.05rem 1.25rem; border-top: 1px solid var(--line); }
.kc .n {
  grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 var(--fs-xs)/1 var(--font-head); color: var(--accent); background: var(--accent-bg);
}
.kc h3 { margin: .3rem 0 .25rem; font-size: 1.05rem; }
.kc .kc-body, .kc > p, .kc .line, .kc > :is(ol, ul) { grid-column: 2; }
.kc > :is(ol, ul) { margin: 0 0 .45rem; padding-left: 1.2rem; }
.kc .kc-body p, .kc > p { margin: 0 0 .45rem; }
.kc .kc-body > :last-child { margin-bottom: 0; }
.kc p[data-label], .kc .line { display: flex; align-items: baseline; gap: .6rem; margin-top: .55rem; font-size: var(--fs-sm); }
.kc p[data-label] > strong:first-child, .kc .line > b {
  --c: var(--muted); --c-bg: var(--surface-2);
  flex: none; padding: .1rem .55rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c); background: var(--c-bg);
}
.kc p[data-label="rule"] > strong:first-child { --c: var(--rule); --c-bg: var(--rule-bg); }
.kc p[data-label="do"] > strong:first-child { --c: var(--practice); --c-bg: var(--practice-bg); }
.kc p[data-label="do-not"] > strong:first-child { --c: var(--trap); --c-bg: var(--trap-bg); }

.kc li p[data-label], .kc li .line { display: block; margin-top: .3rem; }
.kc li p[data-label] > strong:first-child { display: inline-block; margin-right: .4rem; }
/* ---------- Sources, disclaimer, pager ---------- */
.sources { padding-left: 1.5rem; font-size: var(--fs-sm); }
.sources li { margin: .4rem 0; padding-left: .2rem; overflow-wrap: anywhere; }
.sources li::marker { color: var(--muted); font-weight: 700; }
.disclaimer {
  margin: 2.5rem 0 0; padding: .9rem 1.1rem; font-size: var(--fs-sm); color: var(--muted);
  background: var(--surface-2); border-radius: var(--radius);
}
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.pager a {
  display: block; padding: .85rem 1.1rem; font-weight: 700; font-size: var(--fs-sm); line-height: 1.35;
  color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.pager a > span { display: block; margin-bottom: .2rem; font: 400 var(--fs-xs) var(--mono); color: var(--muted); }
.pager a.next { grid-column: 2; text-align: right; }
.pager a[href]:hover { border-color: var(--accent); color: var(--accent); }
.pager a.planned { color: var(--muted); background: transparent; border-style: dashed; cursor: default; }
.pager a.planned::after { content: "Not written yet"; display: block; margin-top: .2rem; font-size: var(--fs-xs); font-weight: 400; }

@media (max-width: 599px) {
  /* Figures and tables use the full phone width: bigger diagram labels, more table room */
  .lesson > figure.fig, .lesson > .table-wrap { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  .lesson > figure.fig figcaption { padding-left: var(--gutter); padding-right: var(--gutter); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a.next { grid-column: auto; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); }
.site-footer .inner { max-width: var(--page-max); margin: 0 auto; padding: 1.5rem var(--gutter) 2.5rem; }
.site-footer p { margin: .3rem 0; max-width: 70ch; }
.site-footer a { color: var(--accent); }

/* ---------- Listing pages ---------- */
.listing { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter) var(--sp-8); }
.listing > .crumbs + h1 { margin-bottom: 1.5rem; }
.listing > h1:first-child { margin-top: 2rem; }
.listing h1 .mono, .subject-card .code { font-family: var(--font-head); font-size: 1em; color: var(--accent); }
.hero {
  /* original line drawing: runway, climb-out path, aeroplane, clouds; coloured by --sky through the mask */
  --hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 320'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M0 278H560' stroke-width='2.5'/%3E%3Cpath d='M36 278H206' stroke-width='8'/%3E%3Cpath d='M0 196H560M0 114H560' stroke-width='1.5' stroke-dasharray='2 10' opacity='.6'/%3E%3Cpath d='M206 277C300 275 372 236 448 190' stroke-width='3' stroke-dasharray='11 9'/%3E%3Cpath d='M12 46C5 46 4 37.5 10 35.5C9 28.5 16 24 22.5 27C24 19 33 15 39 20C43.5 15 53 17.5 52.5 25.5C58.5 26 61.5 33 58 37.5C62 40.5 60 46 54.5 46z' stroke-width='1.3' transform='translate(150 6) scale(2)'/%3E%3Cpath d='M12 46C5 46 4 37.5 10 35.5C9 28.5 16 24 22.5 27C24 19 33 15 39 20C43.5 15 53 17.5 52.5 25.5C58.5 26 61.5 33 58 37.5C62 40.5 60 46 54.5 46z' stroke-width='2' transform='translate(408 -8) scale(1.25)'/%3E%3C/g%3E%3Cg transform='translate(486 166) rotate(-27) scale(1.7) translate(-32 -31)'%3E%3Cpath d='M17.6 26.9L9.4 17.5H5.2L3.6 27.8zM3.6 27.8L24 26.4L31 23H43.2L48.6 28L57 29V34L52 36.6H30.4L4.2 30.2zM30.4 21C33.8 19 39 18.1 42.2 18.5C44.6 18.8 44.8 20.9 43 21.2zM2.4 28.9C6.4 27.7 11.6 27.4 15 28.1C15.8 28.5 15.6 29.4 14.8 29.6C10.4 30 6.4 29.9 2.4 28.9zM57 29C60 29.6 61.8 30.5 61.8 31.5C61.8 32.5 60 33.4 57 34z'/%3E%3Cpath d='M37.6 21.4L40.2 36.4M37.4 36.6L35.6 41.2M53 36.4V41.2M59.2 24V39' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='35.4' cy='41.6' r='2.4'/%3E%3Ccircle cx='53' cy='41.8' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; padding: 3rem 0 .5rem;
}
.hero::after {
  content: ""; display: block; width: 100%; max-width: 30rem; aspect-ratio: 560 / 320; margin-top: 1.75rem;
  background: var(--sky); -webkit-mask: var(--hero-art) center / contain no-repeat; mask: var(--hero-art) center / contain no-repeat;
}
@media (min-width: 1000px) {
  .hero { min-height: 19rem; }
  .hero::after { position: absolute; right: 0; top: 2.25rem; width: 44%; max-width: 32rem; margin: 0; }
  .hero > :is(h1, p) { max-width: 50%; }
}
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 3.7rem); line-height: 1.05; max-width: 14ch; margin: 0 0 1.1rem; letter-spacing: -.02em; }
.lede { max-width: 56ch; margin: 0; font-size: var(--fs-lg); line-height: 1.55; color: var(--muted); }
.progress-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: 1.6rem 0 1.4rem;
  font-size: var(--fs-sm); font-weight: 600;
}
.subject-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.subject-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "code name" "code count" "bar bar";
  align-items: start; gap: .15rem 1rem; height: 100%; padding: 1.1rem 1.2rem 1.15rem;
  color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.subject-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.subject-card:hover .name { color: var(--accent); }
.subject-card .code { grid-area: code; font-size: 1.7rem; line-height: 1; padding-top: .1rem; }
.subject-card .name { grid-area: name; font-weight: 700; line-height: 1.3; }
.subject-card .count { grid-area: count; font-size: var(--fs-xs); color: var(--muted); }
.subject-card .bar {
  grid-area: bar; height: 6px; margin-top: .85rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--surface-2) var(--p, 0%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 45%, transparent);
}
.topic-block { margin: 2.25rem 0 0; max-width: 52rem; }
.topic-block h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.topic-block h2 a { color: var(--ink); text-decoration: none; }
.topic-block h2 a:hover { color: var(--accent); text-decoration: underline; }
.page-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; border-top: 1px solid var(--line); }
.page-list li { position: relative; padding: .6rem 0 .6rem 6.6rem; border-bottom: 1px solid var(--line); line-height: 1.45; }
.page-list li > .mono:first-child { position: absolute; left: 0; top: .72rem; font-size: var(--fs-xs); color: var(--muted); }
.page-list li.written a { font-weight: 700; }
.page-list li.planned { color: var(--muted); }
.page-list .status {
  display: inline-block; margin-left: .35rem; padding: 0 .5rem; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: var(--fs-xs); line-height: 1.5; border: 1px dashed var(--line-strong); vertical-align: .1em;
}
.page-list .syl { margin: .2rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
table.coverage { min-width: 46rem; }
table.coverage td { padding-top: .45rem; padding-bottom: .45rem; }
table.coverage .small { font-size: var(--fs-xs); white-space: normal; min-width: 11rem; }
tr.planned td { color: var(--muted); }
tr.written td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.credits li { margin: .4rem 0; }

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #fff; }
  .site-header, .skip, .toc, .jump, .pager, .site-footer, .btn { display: none !important; }
  .page { display: block; padding: 0; }
  .lesson { max-width: none; }
  figure.fig, .callout, .kc, .quiz li.q, .table-wrap, tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .table-wrap { overflow: visible; }
  .key-concepts { box-shadow: none; }
  .lesson a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--muted); overflow-wrap: anywhere; }
}

/* Flashcards and printable revision files (agent briefs 0.4) */
.quiz .answer .refs { font-size: var(--fs-xs); color: var(--muted); margin-top: .5rem; }
.revise { margin-top: var(--sp-7); }
.revise .downloads { font-size: var(--fs-sm); margin: 0 0 .25rem; }
.revise .note { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--sp-4); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-3); align-items: start; }
.flashcard { height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.flashcard summary { cursor: pointer; padding: .85rem 1rem; font-weight: 650; line-height: var(--lh-tight); list-style: none; }
.flashcard summary::-webkit-details-marker { display: none; }
.flashcard summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.flashcard .serial { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); margin-bottom: .35rem; font-family: var(--mono); }
.flashcard p { margin: 0; padding: .75rem 1rem 1rem; border-top: 1px dashed var(--line); background: var(--accent-bg); border-radius: 0 0 var(--radius) var(--radius); }

/* Glossary: overlay dialog (all pages) and the full /glossary/ page */
.glossary-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: min(80vh, 48rem); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 1rem 3rem rgb(0 0 0 / .25); }
.glossary-dialog::backdrop { background: rgb(8 14 24 / .55); }
.glossary-dialog[open] { display: flex; flex-direction: column; }
.glossary-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .5rem; border-bottom: 1px solid var(--line); }
.glossary-dialog-head h2 { margin: 0; font-size: 1.25rem; }
.glossary-search { display: grid; gap: .3rem; padding: .75rem 1rem 0; font-size: .85rem; color: var(--muted); }
.glossary-search input { font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .55rem .7rem; }
.glossary-count { margin: .5rem 1rem 0; font-size: .8rem; color: var(--muted); }
.glossary-dialog .glossary-list { overflow-y: auto; margin: .25rem 0 0; padding: 0 1rem; flex: 1; }
.glossary-more { margin: 0; padding: .75rem 1rem 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.glossary-list { margin: 1rem 0; }
.glossary-entry { padding: .7rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.glossary-entry:first-child { border-top: 0; }
.glossary-entry dt { font-weight: 700; }
.glossary-entry dd { margin: .2rem 0 0; }
.glossary-entry dd a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: .9rem; }
.glossary-source { font-size: .8rem; color: var(--muted); font-family: var(--mono); }
.glossary-letters { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0; }
.glossary-letters a { min-width: 2.25rem; text-align: center; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; }
@media print { .glossary-dialog { display: none !important; } }