/* Base + shared primitives.  (owner: FND)  Module CSS must use its own class prefix and the tokens in tokens.css.
   Global element selectors (body, h1 ...) are defined ONLY here.  No hex/rgb colours: everything comes from tokens.css.
   Sections: 1 reset/typography  2 focus  3 buttons  4 forms  5 surfaces  6 progress  7 lesson blocks
             8 figures (.fig-*)  9 glossary popover  10 utilities  11 forced-colors  12 reduced motion */

/* ---------------------------------------------------------------- 1. reset / typography */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-3)); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.8;
  line-break: strict; overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 { line-height: 1.4; margin: 0 0 var(--space-3); letter-spacing: .01em; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } h4, h5, h6 { font-size: 1rem; }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-inline-start: 1.5em; }
li + li { margin-top: var(--space-1); }
dl { margin: 0 0 var(--space-3); }
dt { font-weight: 700; }
dd { margin: 0 0 var(--space-2); padding-inline-start: var(--space-4); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-strong); }
strong, b { font-weight: 700; }
small { font-size: .875em; }
sub, sup { line-height: 0; }
time, output { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, video { max-width: 100%; height: auto; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--surface-2); padding: .1em .4em; border-radius: 4px; overflow-wrap: anywhere; }
kbd { background: var(--surface-2); border: 1px solid var(--border-ui); border-bottom-width: 2px; padding: 0 .4em; border-radius: 4px; }
pre {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-m); overflow-x: auto; line-height: 1.6; tab-size: 2;
}
pre code { background: none; padding: 0; overflow-wrap: normal; }
::placeholder { color: var(--text-3); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-3); }                     /* --text-3 is only valid on --bg / --surface ... */
.panel .muted, .callout .muted, .formula .muted, .pill .muted, table.tbl th .muted { color: var(--text-2); }  /* ... so use --text-2 elsewhere */
.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.spacer { flex: 1; }
.icon { display: inline-block; flex: none; vertical-align: -.15em; }

/* ---------------------------------------------------------------- 2. focus (3px, --focus, never removed) */
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:where(input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible { outline-offset: 3px; }

/* ---------------------------------------------------------------- 3. buttons (every target >= 44px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-5); border-radius: var(--radius-m);
  border: 2px solid var(--border-ui); background: var(--surface); color: var(--text);
  font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.3;
  box-shadow: 0 3px 0 var(--border-ui); transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-ui); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); border-color: var(--primary-strong); color: var(--primary-ink); box-shadow: 0 3px 0 var(--primary-strong); }
.btn-primary:hover { background: var(--primary-strong); color: var(--primary-ink); }
.btn-primary:active { box-shadow: 0 1px 0 var(--primary-strong); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost:active { box-shadow: none; }
/* .btn-sm is visually smaller (type + padding) but its box is still >= 44px tall and wide (WCAG target size, AM-21) */
.btn-sm { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-3); font-size: .875rem; border-radius: var(--radius-s); box-shadow: 0 2px 0 var(--border-ui); }
.btn-sm:active { box-shadow: 0 1px 0 var(--border-ui); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--primary-ink); box-shadow: 0 3px 0 var(--border-ui); }
.btn-ok:hover { background: var(--ok); color: var(--primary-ink); filter: brightness(.92); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }       /* >= 8px between neighbouring targets */

/* ---------------------------------------------------------------- 4. forms (borders use --border-ui) */
input:where([type="text"], [type="number"], [type="search"], [type="email"], [type="url"], [type="password"], [type="tel"], :not([type])),
select, textarea {
  min-height: var(--tap); padding: var(--space-2) var(--space-3); max-width: 100%;
  background: var(--surface); color: var(--text); border: 2px solid var(--border-ui); border-radius: var(--radius-s);
  line-height: 1.5;
}
textarea { min-height: calc(var(--tap) * 2); resize: vertical; width: 100%; }
input:where([type="number"]) { font-variant-numeric: tabular-nums; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input:where([type="text"], [type="number"], [type="search"], textarea):read-only { background: var(--surface-2); }
input:user-invalid, textarea:user-invalid { border-color: var(--err); }
label { cursor: pointer; }
fieldset { min-width: 0; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-m); }
legend { padding: 0 var(--space-2); font-weight: 700; }

input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0 var(--space-2) 0 0; vertical-align: middle;
  width: 24px; height: 24px; border: 2px solid var(--border-ui); background: var(--surface); cursor: pointer; display: inline-grid; place-content: center;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before, input[type="radio"]::before { content: ""; display: block; transform: scale(0); transition: transform .1s ease; }
input[type="checkbox"]::before { width: 12px; height: 12px; background: var(--primary-ink); clip-path: polygon(14% 44%, 0 59%, 42% 100%, 100% 22%, 85% 7%, 42% 69%); }
input[type="radio"]::before { width: 10px; height: 10px; border-radius: 50%; background: var(--primary-ink); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primary); border-color: var(--primary-strong); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; min-height: var(--tap); margin: 0; padding: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-ui); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-ui); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--primary-strong); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--primary-strong); }
input[type="range"]:disabled { opacity: .55; cursor: not-allowed; }

details > summary { cursor: pointer; padding-block: var(--space-2); min-height: var(--tap); }
details > summary:hover { color: var(--primary-strong); }

/* ---------------------------------------------------------------- 5. surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-5); box-shadow: var(--shadow-1); }
.panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-4); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8125rem; font-weight: 700; color: var(--text-2); }
.pill-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill-err { background: var(--err-soft); color: var(--err); border-color: transparent; }
.field-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--field-color, var(--primary)); flex: none; }  /* decorative; the name is always next to it */
.flame { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }                                                      /* streak digits, always beside a number */

/* ---------------------------------------------------------------- 6. progress */
.bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--pct, 0%); background: var(--bar-color, var(--primary)); border-radius: inherit; transition: width .4s ease; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips > i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-ui); }  /* decorative: put aria-hidden on .pips and write the level as text */
.pips > i.on { background: var(--primary); border-color: var(--primary-strong); }

/* ---------------------------------------------------------------- 7. lesson blocks */
.callout { border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); background: var(--surface-2); margin: var(--space-4) 0; }
.callout > b:first-child { display: block; margin-bottom: 2px; }
.callout > :last-child { margin-bottom: 0; }
.callout-note { background: var(--surface-2); }
.callout-tip { background: var(--ok-soft); border-color: transparent; }
.callout-warn { background: var(--warn-soft); border-color: transparent; }
.callout-law { background: var(--primary-soft); border-color: transparent; }
.callout-example { background: var(--accent-soft); border-color: transparent; }
.formula { font-family: var(--font-mono); background: var(--surface-2); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; text-align: center; overflow-x: auto; white-space: pre; line-height: 1.9; }
.formula small { display: block; font-family: var(--font-ui); color: var(--text-2); white-space: normal; }
table.tbl { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; font-size: .95rem; }
table.tbl th, table.tbl td { border: 1px solid var(--border-ui); padding: 6px 10px; text-align: left; }
table.tbl th { background: var(--surface-2); }
table.tbl caption { caption-side: top; text-align: left; padding-bottom: var(--space-2); color: var(--text-2); font-size: .875rem; }
table.tbl tfoot td, table.tbl tfoot th { background: var(--surface-2); font-weight: 700; }
figure.quote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-inline-start: 4px solid var(--primary); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
figure.quote p { margin: 0; }
figure.quote figcaption { margin-top: var(--space-2); color: var(--text-2); font-size: .875rem; }

/* ---------------------------------------------------------------- 8. figures (.fig + .fig-* vocabulary, 10-lessons.md 4.3) */
.fig { margin: var(--space-4) 0; }
.fig svg { width: 100%; height: auto; display: block; }
.fig figcaption { color: var(--text-3); font-size: .875rem; text-align: center; }
.fig details { margin-top: var(--space-2); font-size: .9375rem; }
/* Vocabulary used by lesson SVGs. Colours are tokens only, so figures follow the theme.
   Text size is NEVER set here (.fig-label has no font-size): the font-size attribute on the <text> decides (16 / 22 in viewBox units). */
:where(.fig-stroke, .fig-axis, .fig-muted, .fig-accent, .fig-ok, .fig-err) { fill: none; }          /* zero specificity: combinable with fig-fill-N */
.fig-stroke { stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-fill { fill: var(--surface-3); stroke: var(--text-2); stroke-width: 1.5; }
.fig-fill-1 { fill: var(--field-1); stroke: var(--field-1-ink); }
.fig-fill-2 { fill: var(--field-2); stroke: var(--field-2-ink); }
.fig-fill-3 { fill: var(--field-3); stroke: var(--field-3-ink); }
.fig-fill-4 { fill: var(--field-4); stroke: var(--field-4-ink); }
.fig-fill-5 { fill: var(--field-5); stroke: var(--field-5-ink); }
.fig-fill-6 { fill: var(--field-6); stroke: var(--field-6-ink); }
.fig-fill-7 { fill: var(--field-7); stroke: var(--field-7-ink); }
.fig-fill-8 { fill: var(--field-8); stroke: var(--field-8-ink); }
:is(.fig-fill-1, .fig-fill-2, .fig-fill-3, .fig-fill-4, .fig-fill-5, .fig-fill-6, .fig-fill-7, .fig-fill-8) { fill-opacity: .32; stroke-width: 1.5; }
.fig-muted { stroke: var(--viz-axis); stroke-width: 1; }
.fig-axis { stroke: var(--viz-axis); stroke-width: 1.5; stroke-linecap: round; }
.fig-accent { stroke: var(--viz-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-ok { stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-err { stroke: var(--err); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-label { fill: var(--text); stroke: none; font-family: var(--font-ui); }
text:is(.fig-stroke, .fig-axis, .fig-fill) , tspan:is(.fig-stroke, .fig-axis, .fig-fill) { fill: var(--text); stroke: none; }
text.fig-muted, tspan.fig-muted { fill: var(--text-3); stroke: none; }
text.fig-accent, tspan.fig-accent { fill: var(--accent-ink); stroke: none; }
text.fig-ok, tspan.fig-ok { fill: var(--ok); stroke: none; }
text.fig-err, tspan.fig-err { fill: var(--err); stroke: none; }
/* internal / harness classes kept from the first foundation (not part of the lesson vocabulary) */
.fig-line { stroke: var(--text-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-thin { stroke: var(--viz-axis); fill: none; stroke-width: 1; }
.fig-a { fill: var(--viz-1); stroke: none; } .fig-b { fill: var(--viz-2); stroke: none; } .fig-c { fill: var(--viz-3); stroke: none; }
.fig-sa { stroke: var(--viz-1); fill: none; stroke-width: 3; stroke-linecap: round; }
.fig-sb { stroke: var(--viz-2); fill: none; stroke-width: 3; stroke-linecap: round; }
.fig-sc { stroke: var(--viz-3); fill: none; stroke-width: 3; stroke-linecap: round; }
.fig-text { fill: var(--text); font-family: var(--font-ui); font-size: 13px; }
.fig-text-2 { fill: var(--text-3); font-family: var(--font-ui); font-size: 12px; }

/* ---------------------------------------------------------------- 9. glossary popover (DOM contract: 10-lessons.md 5.3)
   <button type=button class="glossary-term" aria-expanded aria-controls=ID>term</button><span class="glossary-pop" id=ID role="note" hidden><strong>term</strong>definition</span>
   Opening / closing / Esc / outside-click is markup.js; this file only draws it. */
.glossary-term {
  position: relative; display: inline; margin: 0; padding: 0; border: 0; border-bottom: 2px dotted var(--primary); border-radius: 2px;
  background: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer;
}
.glossary-term::after { content: ""; position: absolute; inset: -9px -4px; }       /* bigger hit area; the text itself stays inline */
.glossary-term:hover { background: var(--primary-soft); }
.glossary-term[aria-expanded="true"] { background: var(--primary-soft); border-bottom-style: solid; }
.glossary-pop {
  display: inline-block; box-sizing: border-box; max-width: min(100%, 36ch); margin: var(--space-1) 0; padding: var(--space-2) var(--space-3);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: var(--radius-s);
  box-shadow: var(--shadow-1); font-size: .9375rem; line-height: 1.7; font-weight: 400; vertical-align: top; text-align: start;
}
.glossary-pop > strong { display: block; color: var(--text); }
.glossary-pop[hidden] { display: none; }                                         /* inline-block above would otherwise defeat [hidden] */

/* ---------------------------------------------------------------- 10. utilities */
.scroll-x { max-width: 100%; overflow-x: auto; }                                  /* wide tables / code: add tabindex="0" so the keyboard can scroll it */
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- 11. forced colors (Windows high contrast) */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .btn, .pill, .card, .panel, .callout, pre, fieldset, figure.quote, .glossary-pop { border: 2px solid CanvasText; }
  .btn { box-shadow: none; }
  .btn-primary, .btn-ok { background: ButtonFace; color: ButtonText; }
  .btn[disabled], .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; opacity: 1; }
  .btn-ghost { border-color: ButtonText; }
  input:where([type="text"], [type="number"], [type="search"], :not([type])), select, textarea { border-color: CanvasText; }
  input[type="checkbox"], input[type="radio"] { border-color: CanvasText; background: Field; }
  input[type="checkbox"]:checked, input[type="radio"]:checked { background: Highlight; border-color: Highlight; }
  input[type="checkbox"]::before, input[type="radio"]::before { background: HighlightText; }
  input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track { background: Canvas; border-color: CanvasText; }
  input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb { background: Highlight; border-color: Canvas; box-shadow: 0 0 0 2px CanvasText; }
  .bar { border: 1px solid CanvasText; background: Canvas; }
  .bar > i { background: Highlight; }
  .pips > i { border: 1px solid CanvasText; background: Canvas; }
  .pips > i.on { background: CanvasText; }
  .pill-ok, .pill-warn, .pill-err { border: 1px solid CanvasText; }
  .field-dot { border: 2px solid CanvasText; background: Canvas; }
  table.tbl th, table.tbl td { border-color: CanvasText; }
  .glossary-term { border-bottom-color: LinkText; }
  .glossary-term, .glossary-term:hover, .glossary-term[aria-expanded="true"] { background: transparent; color: ButtonText; }
  .glossary-term[aria-expanded="true"] { border-bottom-width: 4px; }
  /* SVG: system colours only, so shapes stay visible and nothing relies on a hue */
  .fig-stroke, .fig-axis, .fig-muted, .fig-accent, .fig-ok, .fig-err, .fig-line, .fig-thin, .fig-sa, .fig-sb, .fig-sc { stroke: CanvasText; }
  .fig-fill, .fig-fill-1, .fig-fill-2, .fig-fill-3, .fig-fill-4, .fig-fill-5, .fig-fill-6, .fig-fill-7, .fig-fill-8 { fill: Canvas; stroke: CanvasText; fill-opacity: 1; }
  .fig-accent, .fig-err { stroke-dasharray: 6 3; }
  .fig-a, .fig-b, .fig-c { fill: CanvasText; }
  .fig-label, text.fig-muted, text.fig-accent, text.fig-ok, text.fig-err, .fig-text, .fig-text-2,
  text:is(.fig-stroke, .fig-axis, .fig-fill), tspan:is(.fig-stroke, .fig-axis, .fig-fill), tspan.fig-muted, tspan.fig-accent, tspan.fig-ok, tspan.fig-err { fill: CanvasText; stroke: none; }
}

/* ---------------------------------------------------------------- 12. reduced motion
   Two entry points (00-overview.md 7 (9)): the OS media query (unless the user forced motion on) and <html data-motion="reduce">. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}