/*
 * EvapMargin — vertico.css
 * Design tokens and the shared base styles every page uses.
 *
 * The :root block below is copied verbatim from
 * References/vertico-report-reference.html (CSS §1). It is the only place a
 * raw hex, px size or weight may appear. Everything after it resolves to a
 * var() from that block. Light scheme only.
 */

/* === 1. Design Tokens (:root — primitives then semantics) === */
:root {
  /* ---- (a) PRIMITIVES — value-named, intent-free. The ONLY raw hex literals in the file.
        OKLCH recorded per hue (DTCG-ready, CSS §10 manifest mirrors it). ---- */
  /* Neutral / slate ramp */
  --grey-0:    #ffffff;   /* oklch(100% 0 0) */
  --grey-50:   #f7f7f7;   /* oklch(97.6% 0 0) */
  --grey-100:  #eeeeec;   /* oklch(94.9% 0.003 107) */
  --grey-150:  #e5e4e2;   /* oklch(91.9% 0.003 85) */
  --grey-400:  #8f8f8f;   /* oklch(65.0% 0 0) */
  --slate-50:  #eef0f3;   /* oklch(95.4% 0.005 258) */
  --slate-200: #d6dae1;   /* oklch(88.7% 0.011 262) */
  --slate-600: #5b6472;   /* oklch(50.1% 0.025 259) */
  --slate-700: #4a505c;   /* oklch(43.0% 0.021 264) */
  --slate-900: #333641;   /* oklch(33.4% 0.020 273) — Steel Blue */
  /* Blue (Brand) */
  --blue-50:   #e7f2ff;   /* oklch(95.7% 0.021 253) */
  --blue-200:  #bfe0ff;   /* oklch(89.3% 0.055 247) */
  --blue-500:  #1b97ff;   /* oklch(66.7% 0.183 251) — Brand Blue */
  --blue-700:  #1666bf;   /* oklch(51.5% 0.158 255) */
  /* Green */
  --green-50:  #e9f6ef;   /* oklch(96.1% 0.022 162) */
  --green-200: #b7e0c8;   /* oklch(86.6% 0.061 159) */
  --green-700: #17764c;   /* oklch(50.2% 0.108 159) */
  /* Amber */
  --amber-50:  #f7efdd;   /* oklch(95.3% 0.030 87) */
  --amber-200: #e6d3a3;   /* oklch(86.6% 0.069 89) */
  --amber-700: #8a5a00;   /* oklch(50.8% 0.108 73) */
  /* Red */
  --red-50:    #fbe9e4;   /* oklch(94.4% 0.018 36) */
  --red-200:   #eab8a7;   /* oklch(82.3% 0.058 40) */
  --red-700:   #b22f17;   /* oklch(50.7% 0.171 33) */
  /* Teal */
  --teal-50:   #e3f4ef;   /* oklch(95.4% 0.024 176) */
  --teal-200:  #bfe6db;   /* oklch(88.8% 0.045 176) */
  --teal-700:  #0a6b59;   /* oklch(47.3% 0.086 175) */
  /* Plum */
  --plum-50:   #f3e9f5;   /* oklch(94.5% 0.022 321) */
  --plum-200:  #ddc3e3;   /* oklch(84.5% 0.057 320) */
  --plum-700:  #70357b;   /* oklch(43.6% 0.127 321) */

  /* ---- (b) SEMANTICS — intent-named, var() references ONLY (no literal). ---- */
  /* Neutral & brand singletons (--color-{role}) */
  --color-bg:          var(--grey-0);
  --color-surface:     var(--grey-50);
  --color-surface-2:   var(--grey-100);
  --color-ink:         var(--slate-900); /* Steel Blue, primary text — 12.04:1 on white */
  --color-ink-soft:    var(--slate-600); /* secondary text — 5.98:1 on white */
  --color-line:        var(--grey-150);  /* DECORATIVE hairline — 1.27:1, exempt (SC 1.4.11) */
  --color-line-strong: var(--grey-400);  /* sole boundary on bg/surface only — 3.23/3.02:1 */
  --color-accent:      var(--blue-500);  /* Brand Blue — fills; non-text edge on white only */
  --color-accent-text: var(--blue-700);  /* text-safe blue (links, numerals) — 5.70:1 on white */
  --focus-ring:        var(--blue-700);  /* :focus-visible indicator — >=4.82:1 worst case */

  /* Status triads (--{family}-{key}-{slot}) — encode state */
  --status-positive-text: var(--green-700); --status-positive-bg: var(--green-50); --status-positive-border: var(--green-200);
  --status-warning-text:  var(--amber-700); --status-warning-bg:  var(--amber-50); --status-warning-border:  var(--amber-200);
  --status-info-text:     var(--blue-700);  --status-info-bg:     var(--blue-50);  --status-info-border:     var(--blue-200);
  --status-neutral-text:  var(--slate-700); --status-neutral-bg:  var(--slate-50); --status-neutral-border:  var(--slate-200);
  --status-negative-text: var(--red-700);   --status-negative-bg: var(--red-50);   --status-negative-border: var(--red-200);

  /* Categorical triads — qualitative (unordered) set. info/cat-1 and warning/cat-3 ALIAS the
     same primitive as their status twin (one retone updates both). */
  --cat-1-text: var(--blue-700); --cat-1-bg: var(--blue-50); --cat-1-border: var(--blue-200); /* = info */
  --cat-2-text: var(--teal-700); --cat-2-bg: var(--teal-50); --cat-2-border: var(--teal-200);
  --cat-3-text: var(--amber-700);--cat-3-bg: var(--amber-50);--cat-3-border: var(--amber-200);/* = warning */
  --cat-4-text: var(--plum-700); --cat-4-bg: var(--plum-50); --cat-4-border: var(--plum-200);
  /* --cat-5 / --cat-6 are reserved and unvalued in step 1: a 5th series switches to shape/pattern. */

  /* Typography */
  --font-sans: 'Manrope', 'Manrope fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* system mono, no vendored brand mono */
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-black: 800;
  --lh-display: 1.1;  --lh-heading: 1.2;  --lh-body: 1.6;  --lh-lead: 1.5;
  --text-kicker: 0.75rem;     /* 12px — utility, NOT a heading */
  --text-body:   1.0625rem;   /* 17px */
  --text-lead:   1.1875rem;   /* 19px */
  --text-h4:     1.375rem;    /* 22px */
  --text-h3:     1.625rem;    /* 26px */
  --text-h2:     clamp(2rem, 1vw + 1.6rem, 2.25rem);     /* 32 -> 36px */
  --text-h1:     clamp(2.5rem, 2.5vw + 1.5rem, 3.5rem);  /* 40 -> 56px */

  /* Space (4..96, 3xs..3xl), radius, measure, borders */
  --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px;
  --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --rail: 3.25rem;  /* 52px — the section/heading number gutter (anchored structured index) */
  --measure: 66ch;            /* single source of truth for line length; px is derived, not authored */
  --border-width: 1px;
  --bar-height: 3.5rem;       /* sticky mobile-bar offset (used by scroll-padding, SC 2.4.11) */

  /* Motion */
  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  scroll-padding-top: calc(var(--bar-height) + var(--space-sm)); /* SC 2.4.11 — anchor jumps clear chrome */
}

/* Metric-matched fallback face, local sources only (no webfont request). */
@font-face {
  font-family: 'Manrope fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  font-display: swap;
  size-adjust: 100.06%;
  ascent-override: 99.94%;
  descent-override: 27.42%;
  line-gap-override: 0%;
}

/* === 2. Base & Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
:where(a) { color: var(--color-accent-text); }

/* Visible-on-focus skip link — first focusable element (SC 2.4.1). */
.skip {
  position: absolute; left: var(--space-sm); top: calc(-1 * var(--space-3xl));
  z-index: 1100; padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface); color: var(--color-accent-text);
  border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold); text-decoration: none;
  transition: top var(--motion-fast) var(--ease-standard);
}
.skip:focus-visible { top: var(--space-sm); }

/* Visible focus indicator on every control (SC 2.4.7 / 1.4.11). */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* === 3. Layout shell (text pages) === */
main { min-width: 0; }
.wrap {
  max-width: calc(var(--measure) + 2 * var(--space-2xl));
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
}
.wrap > * { max-width: var(--measure); }
.wrap > .tablecard, .wrap > .figdata, .wrap > figure { max-width: none; }
section { margin-block-start: var(--space-3xl); }
section:first-of-type { margin-block-start: var(--space-xl); }
:is(h2, h3, h4)[id] { scroll-margin-top: var(--space-sm); }

/* Page navigation between the three pages — a quiet row of inline links. */
.pagenav {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: 0 0 var(--space-md); padding: 0; list-style: none;
  font-size: 0.9375rem;
}
.pagenav a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.pagenav a[aria-current="page"] { color: var(--color-ink); text-decoration: none; font-weight: var(--fw-semibold); }

/* === 6. Typography & content === */
h1, h2, h3, h4 { color: var(--color-ink); margin-block: var(--space-xl) var(--space-md); text-wrap: balance; }
h1 { font-size: var(--text-h1); font-weight: var(--fw-black); line-height: var(--lh-display); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-black); line-height: var(--lh-display); }
h3 { font-size: var(--text-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin-block: var(--space-lg) var(--space-2xs); }
p { margin-block: 0 var(--space-md); }

/* lead — body-emphasis at 19px / 500, distinguished by weight not colour */
.lead { font-size: var(--text-lead); font-weight: var(--fw-medium); line-height: var(--lh-lead); color: var(--color-ink); }

/* Kicker / label utility — the 12px uppercase look. A utility, never a heading. */
.kicker, .label {
  font-size: var(--text-kicker); font-weight: var(--fw-semibold); line-height: var(--lh-heading);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-soft);
}

/* inline-link */
a.inline, .prose a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 2px; }
a.inline:hover, .prose a:hover { text-decoration-thickness: 2px; }

/* var — inline mono variable */
.var { font-family: var(--font-mono); font-size: 0.95em; color: var(--color-accent-text); }

/* list-clean — ringed-bullet divided list */
ul.clean { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
ul.clean > li { position: relative; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-block-end: var(--border-width) solid var(--color-line); }
ul.clean > li:last-child { border-block-end: 0; }
ul.clean > li::before { content: ""; position: absolute; left: 2px; top: 1.05em;
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-accent-text); }

/* list-dash */
ul.dash { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
ul.dash > li { position: relative; padding: var(--space-3xs) 0 var(--space-3xs) var(--space-md); }
ul.dash > li::before { content: "\2014"; position: absolute; left: 0; color: var(--color-ink-soft); }

/* section-header + the structured-index number rail. */
.sechead, h3:has(> .h3n), h4:has(> .h4n) {
  display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--space-sm); align-items: baseline;
  margin-inline-start: calc(-1 * (var(--rail) + var(--space-sm)));
}
.sechead { margin-block: 0 var(--space-md); border-block-end: var(--border-width) solid var(--color-line); padding-block-end: var(--space-md); }
.sechead h2 { margin: 0; }
.sechead .n, .h3n, .h4n { justify-self: end; margin: 0; font-family: var(--font-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.sechead .n { font-weight: var(--fw-bold); color: var(--color-accent-text); }
.h3n, .h4n { font-weight: var(--fw-semibold); color: var(--color-ink-soft); }

/* === 7. Components === */
/* callout */
.callout {
  position: relative;
  margin-block: var(--space-md); margin-inline-start: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-surface); border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
  --cue: var(--color-line-strong);
}
.callout::before {
  content: ""; position: absolute; inset-block: var(--space-3xs);
  inset-inline-start: calc(-1 * var(--space-xs)); width: 3px;
  border-radius: var(--radius-sm); background: var(--cue, var(--color-accent));
}
.callout > :first-child { margin-block-start: 0; }
.callout > :last-child { margin-block-end: 0; }
.callout .label { display: block; margin-block-end: var(--space-2xs); }

/* formula */
.formula {
  font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.7; color: var(--color-ink);
  background: var(--color-bg); border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); overflow-x: auto;
  margin-block: 0 var(--space-md);
}
.formula b { color: var(--color-accent-text); font-weight: var(--fw-bold); }

/* tablecard — comparison table rendered as a card; repeat-ready <thead> */
.tablecard {
  margin-block: var(--space-md); background: var(--color-surface);
  border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-md); overflow: hidden;
}
.tablecard .tscroll { overflow-x: auto; }
.tablecard table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tablecard caption { text-align: start; padding: var(--space-sm) var(--space-md); color: var(--color-ink-soft);
  font-size: var(--text-kicker); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.tablecard th, .tablecard td { padding: var(--space-2xs) var(--space-md); text-align: start; vertical-align: top;
  border-block-start: var(--border-width) solid var(--color-line); }
.tablecard thead th { background: var(--color-surface-2); color: var(--color-ink); font-weight: var(--fw-bold);
  border-block-start: 0; position: sticky; top: 0; }
.tablecard th.c, .tablecard td.c { text-align: center; white-space: nowrap; }
.tablecard tbody tr:nth-child(even) { background: var(--color-bg); }

/* state-badge — colour PLUS a text label (colour never the sole signal) */
.state {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  min-height: 24px; padding: 2px var(--space-2xs); border-radius: var(--radius-sm);
  font-size: 0.8125rem; font-weight: var(--fw-semibold); border: var(--border-width) solid;
}
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.state.is-positive { color: var(--status-positive-text); background: var(--status-positive-bg); border-color: var(--status-positive-border); }
.state.is-warning  { color: var(--status-warning-text);  background: var(--status-warning-bg);  border-color: var(--status-warning-border); }
.state.is-info     { color: var(--status-info-text);     background: var(--status-info-bg);     border-color: var(--status-info-border); }
.state.is-neutral  { color: var(--status-neutral-text);  background: var(--status-neutral-bg);  border-color: var(--status-neutral-border); }
.state.is-negative { color: var(--status-negative-text); background: var(--status-negative-bg); border-color: var(--status-negative-border); }

/* === 9. Figures === */
/* figure card: one card border clips a white art .frame above a light-grey caption box. */
figure { margin: var(--space-lg) 0; background: var(--color-surface);
  border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-md); overflow: hidden; }
figure .frame {
  background: var(--color-bg); border-block-end: var(--border-width) solid var(--color-line);
  padding: var(--space-md); overflow-x: auto;
}
figure svg { display: block; width: 100%; height: auto; }
figcaption { padding: var(--space-sm) var(--space-md); font-size: 0.9375rem; line-height: var(--lh-body); color: var(--color-ink-soft); }
figcaption em { color: var(--color-ink); font-style: italic; }

/* data table that accompanies a chart (SC 1.1.1 chart data equivalence) */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-block-start: var(--space-sm); }
.data-table caption { text-align: start; color: var(--color-ink-soft); font-size: var(--text-kicker);
  text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-semibold); padding-block-end: var(--space-2xs); }
.data-table th, .data-table td { border: var(--border-width) solid var(--color-line); padding: var(--space-3xs) var(--space-2xs); text-align: end; }
.data-table th[scope="row"], .data-table thead th:first-child { text-align: start; }
.data-table thead th { background: var(--color-surface-2); color: var(--color-ink); }

/* figure-datatable: the table is a <details> disclosure, open in source. */
.figdata { margin-block-start: var(--space-md); border-block-start: var(--border-width) solid var(--color-line); }
.figdata > summary {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 24px; padding-block: var(--space-2xs); width: max-content; cursor: pointer;
  font-size: var(--text-kicker); font-weight: var(--fw-semibold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-ink-soft); list-style: none;
}
.figdata > summary::-webkit-details-marker { display: none; }
.figdata > summary::after {
  content: ""; width: 6px; height: 6px;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--motion-fast) var(--ease-standard);
}
.figdata[open] > summary::after { transform: rotate(45deg); }
.figdata > summary:hover { color: var(--color-ink); }
.figdata .dt-hide { display: none; }
.figdata[open] .dt-show { display: none; }
.figdata[open] .dt-hide { display: inline; }
.figdata > .data-table { margin-block-start: var(--space-sm); }

/* footer */
.doc-footer {
  margin-block-start: var(--space-3xl); padding-block-start: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-line-strong);
  color: var(--color-ink-soft); font-size: 0.9375rem;
}
.doc-footer p { margin-block-end: var(--space-2xs); }

/* === 11. Print === */
@media print {
  .skip, .pagenav { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  @page { margin: 18mm; }
  .tablecard, figure, .figdata, .callout { break-inside: avoid; }
  .figdata > summary { display: none; }
  .figdata > .data-table { display: table; }
  .callout::before, .state {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* === 12. Responsive === */
@media (max-width: 62em) {
  .wrap { padding-inline: clamp(20px, 5vw, 72px); padding-block: var(--space-xl) var(--space-3xl); }
  .sechead, h3:has(> .h3n), h4:has(> .h4n) { display: block; margin-inline-start: 0; }
  .sechead { display: flex; align-items: baseline; column-gap: var(--space-2xs); }
  .sechead .n, .h3n, .h4n { justify-self: auto; }
  .h3n, .h4n { margin-inline-end: var(--space-2xs); }
}
@media (max-width: 30em) { .wrap { padding-block-start: var(--space-md); } }

/* Reduced motion — every duration collapses to 0ms (tokens redefined at :root). */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}

/* Forced colours — meaning survives without author colour. */
@media (forced-colors: active) {
  .state { border: 1px solid CanvasText; }
  .callout::before { background: CanvasText; }
}