/* The Public Trust Model for Digital — design system
   Palette, type scale and rhythm are fixed by the design brief; do not
   substitute or add hues. See §5 of the build brief for the rationale
   behind every derived value here. */

:root {
  /* ground */
  --paper: #F3F3F4;
  --surface: #DFDFE3;

  /* ink */
  --ink: #222226;
  --ink-muted: #45454F;

  /* supplied accents — FILLS ONLY, always with --ink on top, never a standalone mark */
  --olive: #A3AA5A;
  --sand: #E7B46A;
  --apricot: #F1A17E;

  /* derived accents — for text, icons, rules, strokes, focus rings */
  --olive-text: #6E733B;
  --sand-text: #976318;
  --apricot-text: #C04915;

  /* gap-to-target ramp — single hue, monotonic lightness, never a rainbow */
  --gap-0: var(--paper);
  --gap-1: #F7CBB8;
  --gap-2: #F1A17E;
  --gap-3: #E8652B;

  /* system monospace stack — for the home page's technical/eyebrow labels
     and tabular figures. Zero-cost: no font file, no network request,
     unlike loading a second web font just for this. */
  --f-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* type scale (px), each line-height a multiple of the 28px baseline */
  --fs-caption: 14px; --lh-caption: 28px;
  --fs-body: 18px;    --lh-body: 28px;
  --fs-lead: 21px;    --lh-lead: 28px;
  --fs-h3: 24px;      --lh-h3: 28px;
  --fs-h2: 32px;      --lh-h2: 42px;
  --fs-h1: 44px;      --lh-h1: 56px;
  --fs-display: 60px; --lh-display: 70px;

  /* spacing scale (px) — nothing else is used for margin/padding */
  --sp-1: 7px; --sp-2: 14px; --sp-3: 28px; --sp-4: 42px; --sp-5: 56px; --sp-6: 84px; --sp-7: 112px;

  --measure: 68ch;
  --content-max: 1200px;
  --gutter: 28px;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { background: var(--paper); scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, ul, ol, dl, fieldset, table, figure { margin: 0; }

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
}

/* ---- flow: single vertical-rhythm utility, so spacing cannot drift ---- */
.flow > * + * { margin-block-start: var(--sp-3); }
.flow-tight > * + * { margin-block-start: var(--sp-2); }
.flow-loose > * + * { margin-block-start: var(--sp-5); }

/* ---- typography ---- */
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-muted); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-muted); }
.measure { max-width: var(--measure); }

a { color: var(--apricot-text); text-underline-offset: 0.15em; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.15em; cursor: help; }
a:hover { color: var(--ink); }

/* ---- focus: always visible, never removed, 3:1 minimum against ground ---- */
:focus-visible {
  outline: 3px solid var(--apricot-text);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--apricot-text);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-3);
  z-index: 100;
  transition: top 0.1s ease;
}
.skip-link:focus { top: var(--sp-2); }

/* ---- header / footer: never obscure focus (2.4.11) — not sticky ---- */
.site-header {
  border-bottom: 1px solid var(--surface);
  padding-block: var(--sp-3);
}
.site-header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.site-title { font-weight: 600; color: var(--ink); text-decoration: none; font-size: var(--fs-lead); }
.site-header nav { display: flex; gap: var(--sp-3); }
.site-header nav a { color: var(--ink-muted); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); text-decoration: underline; }

.site-footer {
  border-top: 1px solid var(--surface);
  padding-block: var(--sp-4);
  margin-block-start: var(--sp-6);
}
.site-footer nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.site-footer nav a { color: var(--ink-muted); }

main { padding-block: var(--sp-4); min-height: 50dvh; }

/* ---- 12-column grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 900px) {
  .grid > [class^="col-"] { grid-column: span 12; }
}

/* ---- buttons: 24x24 minimum target (2.5.8) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--apricot-text); border-color: var(--apricot-text); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--surface); color: var(--ink); }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-block-start: var(--sp-3); }
.btn-cta { font-size: var(--fs-lead); padding-block: var(--sp-2); }

/* ---- forms: native controls, fieldset/legend, no ARIA where HTML suffices ---- */
fieldset { border: none; padding: 0; }
legend {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  padding: 0;
  margin-block-end: var(--sp-3);
  max-width: var(--measure);
}
.options { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; padding: 0; }
.option {
  border: 1px solid var(--surface);
  border-radius: 2px;
  padding: var(--sp-2);
}
.option label {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  cursor: pointer;
  min-height: 24px;
}
.option input[type="radio"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 3px;
  accent-color: var(--ink);
}
.option.dont-know { border-style: dashed; color: var(--ink-muted); }
.option-plain { border: none; padding: var(--sp-1) 0; }
.capability-block { border-block-start: 1px solid var(--surface); padding-block-start: var(--sp-2); }

details { border: 1px solid var(--surface); border-radius: 2px; padding: var(--sp-2); }
details > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 24px;
  display: flex;
  align-items: center;
}
details[open] > summary { margin-block-end: var(--sp-2); }
@media print {
  /* A native <details> hides its content via the UA stylesheet based on the
     open attribute, which printing a page shouldn't have to respect — a
     collaborator printing this reference wants every item bank visible. */
  details:not([open]) > *:not(summary) { display: block !important; }
  details > summary::-webkit-details-marker { display: none; }
  /* The title attribute's tooltip is a hover interaction with nothing to
     hover on paper, so a printed page would otherwise show a bare
     acronym with no expansion in sight. */
  abbr[title]::after { content: " (" attr(title) ")"; }
}
.option:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: calc(var(--sp-2) - 1px); background: color-mix(in srgb, var(--surface) 40%, transparent); }

label.field-label { display: block; font-weight: 600; margin-block-end: var(--sp-1); }
input[type="text"], input[type="email"], textarea, select {
  font: inherit;
  font-size: var(--fs-body);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--ink-muted);
  border-radius: 2px;
  min-height: 44px;
  width: 100%;
  max-width: 40ch;
  background: white;
  color: var(--ink);
}

.progress-text { color: var(--ink-muted); font-size: var(--fs-caption); }
.progress-bar { height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; margin-block-start: var(--sp-1); }
.progress-bar > span { display: block; height: 100%; width: 0; background: var(--olive-text); }
@media (prefers-reduced-motion: no-preference) { .progress-bar > span { transition: width 0.2s ease; } }

/* ---- error summary (WCAG 3.3.1/3.3.3) ---- */
.error-summary {
  border: 2px solid var(--apricot-text);
  border-radius: 2px;
  padding: var(--sp-3);
  background: color-mix(in srgb, var(--apricot) 15%, var(--paper));
}
.error-summary h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--apricot-text); }
.error-summary ul { margin-block-start: var(--sp-2); padding-inline-start: var(--sp-3); }
.error-summary a { color: var(--ink); font-weight: 600; }
.field-error { color: var(--apricot-text); font-size: var(--fs-caption); margin-block-start: var(--sp-1); font-weight: 600; }
.field-error::before { content: "Error: "; }
.option.has-error, fieldset.has-error .options { border-color: var(--apricot-text); }

/* ---- heat map: colour is always redundant to a numeral and a label (1.4.1) ---- */
.heatmap-table {
  border-collapse: collapse;
  width: 100%;
}
.heatmap-table caption { text-align: left; font-weight: 600; margin-block-end: var(--sp-2); }
.heatmap-table th, .heatmap-table td {
  border: 1px solid var(--surface);
  padding: var(--sp-2);
  text-align: left;
  vertical-align: top;
}
.heatmap-table th[scope="row"] { font-weight: 600; }
.gap-cell { font-weight: 600; }
.gap-cell .gap-number { font-size: var(--fs-lead); display: block; }
/* Inherit the cell's own text colour rather than forcing --ink-muted: on
   .gap-3's dark orange fill, --ink-muted drops below the 4.5:1 minimum
   (axe-core caught this — it had never been exercised by real data before). */
.gap-cell .gap-label { font-size: var(--fs-caption); display: block; }
.gap-0 { background: var(--gap-0); border: 1px solid var(--surface); }
.gap-0 .gap-number::after { content: " \2713"; color: var(--olive-text); }
.gap-1 { background: var(--gap-1); color: var(--ink); }
.gap-2 { background: var(--gap-2); color: var(--ink); }
.gap-3 { background: var(--gap-3); color: var(--ink); }
.floored-flag { border: 2px solid var(--ink); position: relative; }
.floored-flag::before { content: "\2691"; position: absolute; top: 2px; right: 4px; font-size: 12px; }

@media (forced-colors: active) {
  .gap-0, .gap-1, .gap-2, .gap-3 { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .option:has(input:checked) { forced-color-adjust: none; border: 2px solid CanvasText; }
}

/* ---- callouts ---- */
.callout {
  border-inline-start: 4px solid var(--sand-text);
  background: color-mix(in srgb, var(--sand) 18%, var(--paper));
  padding: var(--sp-3);
  border-radius: 2px;
}
.callout.severe { border-inline-start-color: var(--apricot-text); background: color-mix(in srgb, var(--apricot) 18%, var(--paper)); }
.callout.positive { border-inline-start-color: var(--olive-text); background: color-mix(in srgb, var(--olive) 18%, var(--paper)); }
/* Explicit --paper background, not inherited: this badge appears inside
   tinted .callout blocks too, and --sand-text only clears 4.5:1 against
   plain paper, not against a sand-tinted container (axe-core caught this). */
.indicative-tag { display: inline-block; font-size: var(--fs-caption); color: var(--sand-text); background: var(--paper); border: 1px solid var(--sand-text); border-radius: 2px; padding: 0 var(--sp-1); }

hr { border: none; border-top: 1px solid var(--surface); margin-block: var(--sp-4); }

/* ---- print (§9 export) ---- */
@media print {
  .site-header, .site-footer, .skip-link, .no-print { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: none; }
  .gap-0, .gap-1, .gap-2, .gap-3 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- debug overlay: ?debug=grid draws the 28px baseline + 12 columns ---- */
body.debug-grid {
  background-image: repeating-linear-gradient(to bottom, rgba(192, 73, 21, 0.25) 0, rgba(192, 73, 21, 0.25) 1px, transparent 1px, transparent 28px);
}
.debug-grid .wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  background-image: repeating-linear-gradient(to right, rgba(20, 90, 160, 0.12) 0, rgba(20, 90, 160, 0.12) calc((100% - 11 * var(--gutter)) / 12), transparent calc((100% - 11 * var(--gutter)) / 12), transparent calc((100% - 11 * var(--gutter)) / 12 + var(--gutter)));
  pointer-events: none;
  z-index: 1000;
}

/* ---- home page: masthead, eyebrow labels, findings cards, editions ---- */
/* Small, general-purpose utilities — used instead of inline style="" attributes,
   which CSP's style-src blocks for attributes even with a nonce (nonces only
   cover <style> elements, never the style="" attribute itself). */
.scroll-x { overflow-x: auto; }
.form-inline { display: inline; }
.break-all { word-break: break-all; }

.masthead { padding-block: var(--sp-5) var(--sp-2); }
.masthead figure { margin: 0; }
.section-closing { padding-block: var(--sp-5) var(--sp-6); border-block-start: 1px solid var(--surface); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: var(--sp-3);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.masthead-rule { height: 3px; background: var(--ink); border: none; margin-block: var(--sp-2) 0; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 5fr 7fr; gap: var(--sp-5); align-items: start; }
}

.signals-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 820px) {
  .signals-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
.signal-card { border-block-start: 3px solid var(--ink); padding-block-start: var(--sp-2); }

.editions-list { display: grid; gap: 0; }
.edition-row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-1);
  padding-block: var(--sp-3); border-block-end: 1px solid var(--surface);
}
.edition-row:first-child { border-block-start: 1px solid var(--surface); }
@media (min-width: 820px) {
  .edition-row { grid-template-columns: 4fr 8fr; gap: var(--sp-5); align-items: start; }
}

.scenario-card { border: 1px solid var(--surface); border-radius: 2px; padding: var(--sp-3); }
.scenario-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.scenario-card dt { color: var(--ink-muted); font-size: var(--fs-caption); }
.scenario-card dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); }

.priority-list { list-style: none; margin: 0; padding: 0; counter-reset: priority; }
.priority-list li {
  counter-increment: priority;
  display: grid; grid-template-columns: 2.5ch 1fr auto; gap: var(--sp-2);
  align-items: baseline; padding-block: var(--sp-2); border-block-end: 1px solid var(--surface);
}
.priority-list li::before {
  content: counter(priority);
  font-family: var(--f-mono); font-size: var(--fs-caption); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.priority-list .cap-id { font-family: var(--f-mono); font-size: var(--fs-caption); color: var(--ink-muted); margin-inline-end: var(--sp-1); }
.priority-list .weight { font-family: var(--f-mono); font-size: var(--fs-caption); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ladder-table tr.is-target td, .ladder-table tr.is-target th { background: var(--surface); }
/* No colour override here: --olive-text clears 4.5:1 against --paper but
   drops below it against the darker --surface fill this row uses — the row
   is already distinguished by background plus bold "target" text. */
.level-num { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; }