/* ============================================================================
   I-Metrics Asia-Pacific — Design System 2026
   "Instrument" — a precision design language for a measurement company.

   Blends Microsoft Fluent 2 (tokens, elevation ramp, motion curves, 4px
   spacing) with Apple's web language (typographic hierarchy, generosity of
   space, restrained chrome, one accent used with discipline).

   Single file, zero dependencies, no webfonts — the system UI stack gives
   authentic Segoe UI Variable on Windows and SF Pro on Apple platforms.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;
  /* --- Ink: type + iconography ------------------------------------------ */
  --ink-1: #0B1220;   /* headings, primary type   18.7:1 */
  --ink-2: #39424F;   /* body copy                10.2:1 */
  --ink-3: #5A6376;   /* secondary / meta          6.0:1 */
  --ink-4: #6B7488;   /* placeholder, captions     4.7:1 */

  /* --- Surfaces --------------------------------------------------------- */
  --surface-1: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #EFF2F6;
  --surface-4: #E6EAF0;
  --surface-inverse: #0B1220;
  --surface-inverse-2: #151C2C;
  --header-bg: rgba(255, 255, 255, .82);
  /* Text that sits on a white surface must stay dark in BOTH themes. */
  /* white on the lifted blue is 2.42:1 — the button uses the deep blue in dark
     mode so the label keeps AA */
  --on-accent: #FFFFFF;
  --on-light: #0B1220;

  /* --- Lines ------------------------------------------------------------ */
  --line-1: #E4E8EE;   /* decorative dividers only        */
  --line-2: #D3D9E2;   /* stronger separation (decorative) */

  /* --- Categorical accents ---------------------------------------------
     For labelling KINDS of thing — which period a token refers to, which
     group a control belongs to. Deliberately not the semantic colours:
     green and red mean up and down here, and red means a validation error,
     so a category wearing either would be read as a judgement. These are
     also not colour-alone signifiers — every use pairs them with a word. */
  --cat-current:  #1273CE;
  --cat-previous: #6D4AE0;
  --cat-lastyear: #0E7490;
  --cat-parts:    #5A6376;
  --line-control: #7C8698; /* interactive control borders — 3.67:1, meets SC 1.4.11 */
  --line-inverse: rgba(255, 255, 255, 0.14);

  /* --- Brand: blue. Validated for contrast in both themes --------
     Every value below is derived from this one ramp, and every pairing is
     checked against WCAG 2.2 AA in both light and dark. */
  --accent: #1273CE;          /* brand blue — graphics only (3.29:1) */
  --accent-text: #0B4F8A;     /* accessible blue for links/labels (5.37:1) */
  --accent-deep: #083C6B;     /* pressed / strongest (6.38:1) */
  --accent-soft: #EAF3FB;     /* wash */
  --accent-line: #C3DDF2;     /* blue-tinted hairline */
  --accent-on-dark: #62ABF5;  /* blue on ink bands (8.90:1) */

  /* Legacy brand slots resolve to the blue ramp so every existing
     component picks up the real brand colour. */
  --brand-900: #062E52;
  --brand-800: #083C6B;
  --brand-700: #0B4F8A;
  --brand-600: #0E63AC;
  --brand-500: #1273CE;
  --brand-200: #C3DDF2;
  --brand-100: #EAF3FB;
  --brand-050: #F5FAFE;

  /* --- Signal: blue is the measurement accent --------------------------- */
  --signal: #1273CE;
  --signal-text: #0B4F8A;
  --signal-soft: #EAF3FB;
  --up: #0B7A45;            /* expansion  (> 50.0) */
  --up-soft: #E6F4EC;
  --down: #B42318;          /* contraction (< 50.0) */
  --down-soft: #FCEDEB;
  --flat: #6B7488;          /* unchanged          */
  --flat-soft: #EEF0F4;
  --warn: #B54708;
  --warn-soft: #FDF3E7;


  /* --- Type ------------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
               "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Fluent-derived type ramp, tuned for editorial web use */
  --t-display: 600 4.25rem/1.04 var(--font-display);   /* 68px */
  --t-h1:      600 3.25rem/1.08 var(--font-display);   /* 52px */
  --t-h2:      600 2.25rem/1.16 var(--font-display);   /* 36px */
  --t-h3:      600 1.625rem/1.25 var(--font-display);  /* 26px */
  --t-h4:      600 1.1875rem/1.4 var(--font-ui);       /* 19px */
  --t-body-lg: 400 1.1875rem/1.6 var(--font-ui);       /* 19px */
  --t-body:    400 1rem/1.62 var(--font-ui);           /* 16px */
  --t-sm:      400 0.875rem/1.55 var(--font-ui);       /* 14px */
  --t-xs:      400 0.78125rem/1.45 var(--font-ui);     /* 12.5px */
  --t-label:   600 0.75rem/1.3 var(--font-ui);         /* 12px, tracked caps */

  --track-tight: -0.03em;
  --track-snug: -0.018em;
  --track-wide: 0.08em;

  /* --- Space: 4px base (Fluent ramp) ------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;

  /* --- Radius ----------------------------------------------------------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* --- Control metrics: ONE ramp for every interactive control -----------
     A button, an input and the enhanced custom select all size from here, so
     the dense console toolbar and the survey runner cannot drift apart.

     ── Why the small step is 44 and not 36 ────────────────────────────────

     It was 36px, described as "dense chrome", and that was measured as an
     accessibility failure rather than a house style: a UI/UX grading pass over the
     call-audio console counted **13 of 52 interactive controls on one screen under
     the 44px minimum**, and the offenders were the shared chrome — the console user
     menu at 36px and the top navigation tabs at 43px — not the feature's own
     controls. The rule in `docs/BRAIN.md` is that every interactive control is at
     least 44px; the token disagreed with the rule.

     A dense-toolbar exception is defensible for a mouse-only desktop admin, and
     this console is used on tablets by supervisors standing up, and its call floor
     is touch-first. So the ramp starts at 44. */
  --ctl-h-sm: 44px;    /* dense chrome — was 36px; see the note above */
  --ctl-h:    44px;    /* the standard control height                   */
  --ctl-h-lg: 52px;    /* hero / touch-first                            */
  --ctl-px:   16px;    /* control inline padding, standard              */
  --ctl-px-lg: 20px;   /* control inline padding, roomy                 */
  --chip-h:   24px;    /* accessible floor for a pill or badge          */

  /* --- Elevation: Fluent shadow ramp, dialled back for a corporate feel -- */
  --sh-2:  0 1px 2px rgba(11,18,32,.06), 0 0 2px rgba(11,18,32,.04);
  --sh-4:  0 2px 4px rgba(11,18,32,.06), 0 0 2px rgba(11,18,32,.04);
  --sh-8:  0 4px 8px rgba(11,18,32,.07), 0 0 2px rgba(11,18,32,.04);
  --sh-16: 0 8px 16px rgba(11,18,32,.08), 0 0 2px rgba(11,18,32,.04);
  --sh-28: 0 14px 28px rgba(11,18,32,.10), 0 0 8px rgba(11,18,32,.04);
  --sh-64: 0 32px 64px rgba(11,18,32,.14), 0 0 8px rgba(11,18,32,.04);

  /* --- Motion: Fluent duration + curve tokens --------------------------- */
  --d-1: 100ms; --d-2: 200ms; --d-3: 300ms; --d-4: 400ms; --d-5: 500ms;
  --ease-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-decel:    cubic-bezier(0.10, 0.90, 0.20, 1);
  --ease-accel:    cubic-bezier(0.70, 0.00, 1.00, 0.50);
  --ease-soft:     cubic-bezier(0.25, 0.10, 0.25, 1);

  /* --- Layout ----------------------------------------------------------- */
  --w-page: 1200px;
  --w-wide: 1400px;
  --w-prose: 68ch;
  --gutter: var(--s-6);
  --header-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:hover { --btn-bg: var(--accent-deep); --btn-fg: var(--on-accent); }
}
:root[data-theme="dark"] .btn:hover { --btn-bg: var(--accent-deep); --btn-fg: var(--on-accent); }

/* ── Dark theme ─────────────────────────────────────────────────────────
   Automatic from the OS, overridable by an explicit choice. ─────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
    --cat-current:  #62ABF5;
    --cat-previous: #A78BFA;
    --cat-lastyear: #2DD4BF;
    --cat-parts:    #9BA6B8;
    /* --- Surfaces --------------------------------------------------------- */
    --surface-1: #0D1117;
    --surface-2: #141A24;
    --surface-3: #1B2330;
    --surface-4: #222B3A;
    --surface-inverse: #05080D;      /* the tape and CTA band sit deeper */
    --surface-inverse-2: #0A0E15;
    --header-bg: rgba(13, 17, 23, .82);

    /* --- Ink -------------------------------------------------------------- */
    --ink-1: #F0F3F8;
    --ink-2: #C2CAD7;
    --ink-3: #9AA5B6;
    --ink-4: #7E8A9E;

    /* --- Lines ------------------------------------------------------------ */
    --line-1: #222B39;
    --line-2: #2F3A4A;
    --line-control: #5F6B7C;
    --line-inverse: rgba(255, 255, 255, 0.14);

    /* --- Brand: the blue lifts so it holds on a dark ground ---------------- */
    --accent: #62ABF5;
    --accent-text: #9CC9F8;
    --accent-deep: #8FBCF2;
    --accent-soft: rgba(98, 171, 245, .14);
    --accent-line: rgba(98, 171, 245, .32);
    --accent-on-dark: #62ABF5;
    --brand-900: #D6EAFB;
    --brand-800: #9CC9F8;
    --brand-700: #9CC9F8;
    --brand-600: #62ABF5;
    --brand-500: #62ABF5;
    --brand-200: rgba(98, 171, 245, .34);
    --brand-100: rgba(98, 171, 245, .14);
    --brand-050: rgba(98, 171, 245, .07);
    --signal: #62ABF5;
    --signal-text: #9CC9F8;
    --signal-soft: rgba(98, 171, 245, .14);

    /* --- Direction semantics ---------------------------------------------- */
    --up: #45C97D;
    --up-soft: rgba(69, 201, 125, .14);
    --down: #FF7A6B;
    --down-soft: rgba(255, 122, 107, .14);
    --flat: #9AA5B6;
    --flat-soft: rgba(154, 165, 182, .14);
    --warn: #E9A93F;
    --warn-soft: rgba(233, 169, 63, .14);

    /* --- Elevation: shadows read as depth only against a light ground ------ */
    --sh-2:  0 1px 2px rgba(0,0,0,.5);
    --sh-4:  0 2px 4px rgba(0,0,0,.5);
    --sh-8:  0 4px 10px rgba(0,0,0,.55);
    --sh-16: 0 8px 18px rgba(0,0,0,.6);
    --sh-28: 0 14px 30px rgba(0,0,0,.65);
    --sh-64: 0 32px 64px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  /* the categorical accents, lightened for a dark surface */
  --cat-current:  #62ABF5;
  --cat-previous: #A78BFA;
  --cat-lastyear: #2DD4BF;
  --cat-parts:    #9BA6B8;
  color-scheme: dark;
  /* --- Surfaces --------------------------------------------------------- */
  --surface-1: #0D1117;
  --surface-2: #141A24;
  --surface-3: #1B2330;
  --surface-4: #222B3A;
  --surface-inverse: #05080D;      /* the tape and CTA band sit deeper */
  --surface-inverse-2: #0A0E15;
  --header-bg: rgba(13, 17, 23, .82);
  /* white on the lifted blue is 2.42:1 — the button uses the deep blue in dark
     mode so the label keeps AA */
  --on-accent: #06243C;              /* white on blue in both themes */
  --on-light: #0B1220;

  /* --- Ink -------------------------------------------------------------- */
  --ink-1: #F0F3F8;
  --ink-2: #C2CAD7;
  --ink-3: #9AA5B6;
  --ink-4: #7E8A9E;

  /* --- Lines ------------------------------------------------------------ */
  --line-1: #222B39;
  --line-2: #2F3A4A;
  --line-control: #5F6B7C;
  --line-inverse: rgba(255, 255, 255, 0.14);

  /* --- Brand: the blue lifts so it holds on a dark ground ---------------- */
  --accent: #62ABF5;
  --accent-text: #9CC9F8;
  --accent-deep: #8FBCF2;
  --accent-soft: rgba(98, 171, 245, .14);
  --accent-line: rgba(98, 171, 245, .32);
  --accent-on-dark: #62ABF5;
  --brand-900: #D6EAFB;
  --brand-800: #9CC9F8;
  --brand-700: #9CC9F8;
  --brand-600: #62ABF5;
  --brand-500: #62ABF5;
  --brand-200: rgba(98, 171, 245, .34);
  --brand-100: rgba(98, 171, 245, .14);
  --brand-050: rgba(98, 171, 245, .07);
  --signal: #62ABF5;
  --signal-text: #9CC9F8;
  --signal-soft: rgba(98, 171, 245, .14);

  /* --- Direction semantics ---------------------------------------------- */
  --up: #45C97D;
  --up-soft: rgba(69, 201, 125, .14);
  --down: #FF7A6B;
  --down-soft: rgba(255, 122, 107, .14);
  --flat: #9AA5B6;
  --flat-soft: rgba(154, 165, 182, .14);
  --warn: #E9A93F;
  --warn-soft: rgba(233, 169, 63, .14);

  /* --- Elevation: shadows read as depth only against a light ground ------ */
  --sh-2:  0 1px 2px rgba(0,0,0,.5);
  --sh-4:  0 2px 4px rgba(0,0,0,.5);
  --sh-8:  0 4px 10px rgba(0,0,0,.55);
  --sh-16: 0 8px 18px rgba(0,0,0,.6);
  --sh-28: 0 14px 30px rgba(0,0,0,.65);
  --sh-64: 0 32px 64px rgba(0,0,0,.7);
}



/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

/* A class that sets `display` beats the user-agent's `[hidden]` rule, because
   author styles win over the UA stylesheet. Without this every element toggled
   with `hidden` whose class sets a display value stays visible: the builder's
   section rename and confirm panels all rendered at once, and the step-
   conditions rows showed even when the step was set to "always show".

   This lives here rather than in a page stylesheet because every page loads
   imetrics.css and not every page loads the others. */
[hidden] { display: none !important; }
* { margin:0; }

/*
 * ── Native `<dialog>` is centred BY A MARGIN, so the reset above breaks it ──
 *
 * The reset two lines up is global on purpose and stays. But a modal `<dialog>`
 * opened with `showModal()` sits in the browser's top layer and is centred by the
 * UA stylesheet's `margin: auto`. `* { margin:0 }` outranks the UA rule, so it won
 * the cascade and every dialog in the application rendered pinned to the top-left —
 * measured on the review screen's keyboard-shortcuts overlay on 2026-09-18, which
 * appeared over the page header instead of the centre of the screen.
 *
 * This is the same failure the comment above already describes for `[hidden]`: an
 * author rule beating a UA rule that a native element depends on. The fix is the
 * same shape — restate the UA value for the one element that needs it.
 *
 * `margin:auto` rather than explicit `inset` values, so the dialog stays centred by
 * the platform's own mechanism at every viewport size and needs no media queries.
 */
dialog { margin: auto; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-6));
}

body {
  font: var(--t-body);
  color: var(--ink-2);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding:0; }
a { color: inherit; text-decoration: none; }
ul, ol { padding:0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line-1); }

h1, h2, h3, h4, h5, h6 { color: var(--ink-1); font-family: var(--font-display); }
h1 { font: var(--t-h1); letter-spacing: var(--track-tight); }
h2 { font: var(--t-h2); letter-spacing: var(--track-snug); }
h3 { font: var(--t-h3); letter-spacing: var(--track-snug); }
h4 { font: var(--t-h4); }

::selection { background: var(--accent-soft); color: var(--brand-900); }

/* Focus indication. A accent ring would be 1.00:1 on a accent button, so the ring
   is ink by default (18.7:1 on white, 5.7:1 on accent) and white on dark bands. */
:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.section--ink :focus-visible,
.cta-band :focus-visible,
.pres-head :focus-visible,
.topbar :focus-visible,
.chart__tip :focus-visible {
  outline-color: #fff;
}

/* Numbers must align in columns — non-negotiable for a data company. */
.num, .tnum, time, .post__date, .delta, .catalog-count,
.index-tile__value, .track-card__value, .facts__v, .instrument__value,
.data-table td, .chart__axis, .chart__tip-val, .chart__tip-delta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--w-wide); }
.wrap--narrow { max-width: 880px; }

.section { padding-block: var(--s-12); }
.section--tight { padding-block: var(--s-10); }
.section--loose { padding-block: var(--s-13); }
.section--alt { background: var(--surface-2); }
.section--ink { background: var(--surface-inverse); color: rgba(255,255,255,.78); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--rule { border-top: 1px solid var(--line-1); }

.stack > * + * { margin-top: var(--s-5); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-10); }
.grid--sidebar-left { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-10); }

.row { display: flex; align-items: center; gap: var(--s-4); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------- eyebrow */

.eyebrow {
  font: var(--t-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow--brand { color: var(--accent-text); }
.eyebrow::before {
  content: "";
  width: 20px; height: 1.5px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--plain { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }

.lede { font: var(--t-body-lg); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.small { font: var(--t-sm); }
.tiny { font: var(--t-xs); color: var(--ink-3); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-9); }
.section-head__text { max-width: 640px; }
.section-head h2 { margin-top: var(--s-3); }
.section-head p { margin-top: var(--s-4); color: var(--ink-3); font: var(--t-body-lg); }

/* ------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--ctl-px-lg);
  height: var(--ctl-h);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font: 600 0.875rem/1 var(--font-ui);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--d-2) var(--ease-standard),
              box-shadow var(--d-2) var(--ease-standard),
              transform var(--d-2) var(--ease-standard),
              border-color var(--d-2) var(--ease-standard);
}
.btn:hover { --btn-bg: var(--accent-deep); box-shadow: var(--sh-4); }
.btn:active { transform: translateY(0.5px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--secondary { --btn-bg: var(--surface-1); --btn-fg: var(--ink-1); --btn-bd: var(--line-2); }
.btn--secondary:hover { --btn-bg: var(--surface-2); --btn-bd: var(--ink-4); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--accent-text); }
.btn--ghost:hover { --btn-bg: var(--accent-soft); box-shadow: none; }

.btn--ink { --btn-bg: var(--ink-1); --btn-fg: var(--surface-1); }
.btn--ink:hover { --btn-bg: var(--ink-2); }

.btn--on-ink { --btn-bg: #fff; --btn-fg: var(--on-light); }
.btn--on-ink:hover { --btn-bg: var(--surface-3); }

.btn--sm { height: var(--ctl-h-sm); padding: 0 var(--ctl-px); font-size: 0.875rem; }
.btn--lg { height: var(--ctl-h-lg); padding: 0 var(--s-7); font-size: 1rem; }
.btn--block { width: 100%; }

/* A text link with a quiet underline that reveals on hover — Apple-ish */
.link {
  color: var(--accent-text);
  font-weight: 500;
  display: inline-flex; align-items: center; gap:6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard);
}
.link:hover { border-bottom-color: currentColor; }
.link svg { width: 15px; height: 15px; transition: transform var(--d-2) var(--ease-decel); }
.link:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------- header */

.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--header-bg);
  /* No backdrop-filter on the header: it makes this element the containing
     block for position:fixed descendants, which pinned the mobile drawer to the
     header's 128px height instead of the viewport. Decorative only. */
  border-bottom: 1px solid var(--line-1);
}
.header__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }

.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__name { font: 600 1rem/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink-1); }
.brand__sub { display: block; font: 400 0.6875rem/1.3 var(--font-ui); color: var(--ink-3); letter-spacing: 0.02em; }

.nav { display: flex; align-items: center; gap:2px; margin-left: var(--s-5); flex-wrap: nowrap; }
.nav__item { position: relative; }
.nav__item:hover, .nav__item:focus-within { z-index: 61; }
.nav__link {
  display: flex; align-items: center; gap:6px;
  padding:8px 12px;
  border-radius: var(--r-sm);
  font: 500 0.875rem/1 var(--font-ui);
  color: var(--ink-2);
  white-space: nowrap;          /* labels wrapped to 2-3 lines and cramped the bar */
  transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard);
}
.nav__link > span { white-space: nowrap; }
.nav__link:hover { background: var(--surface-3); color: var(--ink-1); }
.nav__link[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.nav__caret { width: 11px; height: 11px; opacity: .5; flex: none; transition: transform var(--d-2) var(--ease-standard); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* Mega menu — Fluent "flyout" surface */
.mega {
  /* top:100% with a TRANSPARENT top border rather than a positional gap. The
     12px strip is part of the panel's hit area, so the pointer never crosses a
     dead zone on its way down — the previous calc(100% + 10px) gap closed the
     menu before it could be clicked. background-clip keeps the surface out of
     that strip so the visual spacing is unchanged. */
  position: absolute; top: 100%; left: 50%;
  /* Above the sibling nav items. A right-aligned panel extends left across its
     neighbours; without a stacking order their links paint over it and steal
     the hover, closing the menu mid-descent. */
  z-index: 60;
  transform: translateX(-50%) translateY(-6px);
  min-width: 520px;
  background: var(--surface-1);
  background-clip: padding-box;
  border: 1px solid var(--line-1);
  border-top: 12px solid transparent;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-28);
  padding: var(--s-7);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-2) var(--s-7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-2) var(--ease-decel),
              transform var(--d-2) var(--ease-decel),
              visibility var(--d-2);
}
/* Every panel is centred on its own item. Right-aligning the last items was
   unnecessary — a 520px panel centred under the rightmost link still sits well
   inside a 1440px viewport — and it forced the pointer to travel left across
   the neighbouring links, which stole the hover. */
.mega { max-width: calc(100vw - 48px); }
.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega__group-title {
  font: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink-3); padding: var(--s-2) var(--s-3) var(--s-1);
}
.mega a {
  display: block; padding: 9px var(--s-3); border-radius: var(--r-sm);
  font: 500 0.875rem/1.35 var(--font-ui); color: var(--ink-2);
  transition: background var(--d-1) var(--ease-standard), color var(--d-1) var(--ease-standard);
}
.mega a:hover { background: var(--accent-soft); color: var(--accent-text); }
.mega a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mega a span { display: block; font: var(--t-xs); color: var(--ink-3); font-weight: 400; margin-top:2px; }

.header__cta { margin-left: var(--s-5); display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* Mobile menu trigger — hidden until the primary nav collapses. */
.nav-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  border: 1px solid var(--line-1); background: var(--surface-1);
  margin-left: var(--s-2);
  transition: background var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard);
}
.nav-toggle:hover { background: var(--surface-2); border-color: var(--line-2); }
.nav-toggle__box { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__box span {
  position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: var(--r-xs);
  background: var(--ink-1);
  transition: transform var(--d-3) var(--ease-decel), opacity var(--d-2) var(--ease-standard);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 5px; }
.nav-toggle__box span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11, 18, 32, .42);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-3) var(--ease-standard), visibility var(--d-3);
}
.nav-scrim.is-on { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* Utility bar above the header */
.topbar {
  background: var(--surface-inverse); color: rgba(255,255,255,.74);
  font: var(--t-xs);
  padding-inline: var(--s-5);
}
.topbar__inner { display: flex; align-items: center; gap: var(--s-5); min-height: 40px; padding-block: 10px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.72); transition: color var(--d-2) var(--ease-standard); }
.topbar a:hover { color: #fff; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }

/* ---------------------------------------------------------------- hero */

.hero { padding: var(--s-13) 0 var(--s-12); border-bottom: 1px solid var(--line-1); }
.hero--tight { padding-block: var(--s-11) var(--s-10); }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--s-12); align-items: center; }
.hero h1 { font: var(--t-display); letter-spacing: var(--track-tight); }
.hero__lede { font: var(--t-body-lg); color: var(--ink-2); margin-top: var(--s-6); max-width: 54ch; }
.hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }

.hero--page { padding-block: var(--s-11) var(--s-10); background: var(--surface-2); border-bottom: 1px solid var(--line-1); }
.hero--page h1 { font: var(--t-h1); letter-spacing: var(--track-tight); margin-top: var(--s-4); max-width: 20ch; }
.hero--page .lede { margin-top: var(--s-5); }
.hero--page .eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; }

/* --------------------------------------------------- index tiles (signature) */

/* The signature component: a PMI/index reading. Value, movement, period. */
.index-tile {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard);
}
.index-tile:hover { border-color: var(--line-2); box-shadow: var(--sh-8); }
.index-tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.index-tile__name { font: 600 0.875rem/1.3 var(--font-ui); color: var(--ink-1); }
.index-tile__period { font: var(--t-xs); color: var(--ink-3); }
.index-tile__value {
  font: 600 2.75rem/1 var(--font-display);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-4);
  color: var(--ink-1);
}
.index-tile__value--sm { font-size: 2rem; }
.index-tile__unit { font-size: 0.9rem; color: var(--ink-3); font-weight: 500; margin-left:4px; letter-spacing: 0; }

.delta { display: inline-flex; align-items: center; gap:4px; font: 600 0.8125rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.delta svg { width: 13px; height: 13px; }
.delta--up { color: var(--up); }
.delta--down { color: var(--down); }
.delta--flat { color: var(--flat); }

/* The 50.0 line is the PMI expansion/contraction threshold — show it. */
.spark { margin-top: var(--s-4); }
.spark svg { width: 100%; height: 40px; overflow: visible; }
.spark__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__line--up { stroke: var(--up); }
.spark__line--down { stroke: var(--down); }
.spark__threshold { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 5 4; }
.spark__area { opacity: .10; }
.spark__area--up { fill: var(--up); }
.spark__area--down { fill: var(--down); }

/* status pill */
.pill {
  display: inline-flex; align-items: center; gap:6px;
  padding:2px 8px 2px 8px; border-radius: var(--r-full);
  font: 600 0.75rem/1.4 var(--font-ui);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill--up { background: var(--up-soft); color: var(--up); }
.pill--down { background: var(--down-soft); color: var(--down); }
.pill--flat { background: var(--flat-soft); color: var(--ink-3); }
.pill--brand { background: var(--brand-100); color: var(--brand-700); }
.pill--signal { background: var(--signal-soft); color: var(--signal-text); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }

/* --------------------------------------------------------------- cards */

.card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--d-2) var(--ease-standard),
              box-shadow var(--d-2) var(--ease-standard),
              transform var(--d-2) var(--ease-decel);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--sh-16); transform: translateY(-2px); }
.card__media { aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-5) var(--ease-decel); }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__title { font: var(--t-h4); color: var(--ink-1); letter-spacing: -0.012em; }
.card__text { font: var(--t-sm); color: var(--ink-3); }
.card__foot { margin-top:auto; padding-top: var(--s-4); border-top: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card__meta { display: flex; align-items: center; gap: var(--s-3); font: var(--t-xs); color: var(--ink-3); }

.card--flat { border-radius: var(--r-md); }
.card--flat:hover { transform: none; }
.card--row { flex-direction: row; align-items: stretch; }
.card--row .card__media { aspect-ratio: auto; width: 260px; flex: none; }

/* article list item — text-led, no image, editorial */
.post { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: var(--s-6); padding-block: var(--s-6); border-bottom: 1px solid var(--line-1); }
.post:first-child { border-top: 1px solid var(--line-1); }
.post__date { font: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top:2px; }
.post__title { font: var(--t-h4); color: var(--ink-1); letter-spacing: -0.012em; transition: color var(--d-2) var(--ease-standard); }
.post:hover .post__title { color: var(--brand-700); }
.post__excerpt { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); max-width: 68ch; }
.post__tags { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

/* -------------------------------------------------------------- prose */

.prose { max-width: var(--w-prose); font: var(--t-body-lg); color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font: var(--t-h3); margin-top: var(--s-9); color: var(--ink-1); }
.prose h3 { font: var(--t-h4); margin-top: var(--s-8); color: var(--ink-1); }
.prose h4 { font: 600 1.0625rem/1.4 var(--font-ui); margin-top: var(--s-7); color: var(--ink-1); }
.prose ul, .prose ol { padding-left: var(--s-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: var(--s-2); }
.prose li::marker { color: var(--ink-4); }
.prose a { color: var(--accent-text); border-bottom: 1px solid var(--accent-line); transition: border-color var(--d-2) var(--ease-standard); }
.prose a:hover { border-bottom-color: var(--accent-text); }
.prose blockquote {
  border-left: 3px solid var(--signal);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font: 500 1.25rem/1.55 var(--font-display);
  color: var(--ink-1); letter-spacing: -0.012em;
}
.prose figure { margin-block: var(--s-8); }
.prose figcaption { font: var(--t-xs); color: var(--ink-3); margin-top: var(--s-3); }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line-1); }
.prose code { font: 400 0.9em/1 var(--font-mono); background: var(--surface-3); padding:2px 6px; border-radius: var(--r-xs); }
.prose hr { margin-block: var(--s-8); }

/* Pull stat inside prose */
.callout {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: var(--s-7);
  margin-block: var(--s-8);
}
.callout__label { font: 600 0.875rem/1.4 var(--font-ui); color: var(--ink-1); }
.callout p { margin-top: var(--s-3); font: var(--t-body); color: var(--ink-2); }

/* data table */
.data-table { font: var(--t-sm); }
.data-table caption { text-align: left; font: 600 0.875rem/1.4 var(--font-ui); color: var(--ink-2); padding-bottom: var(--s-3); }
.data-table th, .data-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-1); text-align: left; }
.data-table th { font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-3); background: var(--surface-2); }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tbody tr:hover { background: var(--surface-2); }

/* -------------------------------------------------------- testimonials */

.quote-card {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.quote-card__text { font: 500 1.0625rem/1.6 var(--font-ui); color: var(--ink-1); }
.quote-card__who { display: flex; align-items: center; gap: var(--s-3); margin-top:auto; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); flex: none; display: grid; place-items: center; font: 600 0.8125rem/1 var(--font-ui); color: var(--ink-3); }
.quote-card__name { font: 600 0.875rem/1.3 var(--font-ui); color: var(--ink-1); }
.quote-card__role { font: var(--t-xs); color: var(--ink-3); }

/* --------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font: 600 0.875rem/1.3 var(--font-ui); color: var(--ink-1); }
.field__hint { font: var(--t-xs); color: var(--ink-3); }
.field__req { color: var(--down); }

.input, .select, .textarea {
  width: 100%;
  padding: 0 var(--ctl-px);
  height: var(--ctl-h);
  background: var(--surface-1);
  border: 1px solid var(--line-control);
  border-radius: var(--r-sm);
  color: var(--ink-1);
  font: var(--t-body);
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard);
}
.textarea { padding: var(--s-3) var(--s-4); height: auto; min-height: 132px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-text);          /* 5.37:1 — carries the state */
  box-shadow: 0 0 0 3px rgba(18, 115, 206,  .22);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236B7488' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-9);
}

/* Dense-console tier. The same control at --ctl-h-sm and --r-sm, so a toolbar
   select is exactly the height, radius and type size of the .btn--sm beside it
   instead of the 9px/13px one-off it used to be. */
.input--sm, .select--sm { height: var(--ctl-h-sm); font-size: 0.875rem; }
.input--sm  { padding: 0 var(--ctl-px); font-weight: 400; }
.select--sm { inline-size: auto; padding: 0 var(--s-7) 0 var(--ctl-px); font-weight: 500; }
.input--grow { flex: 1 1 auto; inline-size: auto; min-inline-size: 0; }
.input--year { inline-size: 5.5rem; flex: none; }
.check { display: flex; gap: var(--s-3); align-items: flex-start; }
.check input { width: 18px; height: 18px; margin-top:2px; accent-color: var(--brand-700); flex: none; }
.check label { font: var(--t-sm); color: var(--ink-2); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); }
.form-grid .span-2 { grid-column: 1 / -1; }

.form-card {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); padding: var(--s-8);
}

/* --------------------------------------------------------- breadcrumbs */

.crumbs { display: flex; align-items: center; gap: var(--s-2); font: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); transition: color var(--d-2) var(--ease-standard); }
.crumbs a:hover { color: var(--brand-700); }
.crumbs__sep { color: var(--ink-4); }
.crumbs [aria-current] { color: var(--ink-1); font-weight: 500; }

/* ------------------------------------------------------------- sidebar */

.side-nav { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.side-nav__title { font: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }
.side-nav a {
  display: block; padding: 9px var(--s-4);
  border-left: 2px solid var(--line-1);
  font: 500 0.875rem/1.4 var(--font-ui); color: var(--ink-3);
  transition: color var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard), background var(--d-2) var(--ease-standard);
}
.side-nav a:hover { color: var(--ink-1); background: var(--surface-2); }
.side-nav a[aria-current="page"] { color: var(--accent-text); border-left-color: var(--accent); font-weight: 600; background: var(--accent-soft); }

.side-card { background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-6); }
.side-card h3 { font: var(--t-h4); }
.side-card p { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); }

/* facts list (key/value) */
.facts { display: grid; gap:0; }
.facts__row { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: var(--s-4); padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line-1); }
.facts__row:first-child { border-top: 1px solid var(--line-1); }
.facts__k { font: 600 0.8125rem/1.5 var(--font-ui); color: var(--ink-3); }
.facts__v { font: var(--t-sm); color: var(--ink-1); }

/* --------------------------------------------------------------- tabs */

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line-1); overflow-x: auto; }
.tab {
  padding: var(--s-4) var(--s-4) calc(var(--s-4) - 1px);
  font: 500 0.875rem/1 var(--font-ui); color: var(--ink-3);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard);
}
.tab:hover { color: var(--ink-1); }
.tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

/* filter chips */
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  padding:6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line-control); background: var(--surface-1);
  font: 500 0.8125rem/1.4 var(--font-ui); color: var(--ink-2);
  transition: all var(--d-2) var(--ease-standard);
}
.chip:hover { border-color: var(--ink-4); color: var(--ink-1); }
.chip[aria-pressed="true"] { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-1); }

/* --------------------------------------------------------------- steps */

.steps { counter-reset: step; display: grid; gap: var(--s-7); }
.step { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--s-5); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font: 600 0.8125rem/32px var(--font-mono);
  color: var(--accent-text); background: var(--accent-soft);
  width: 32px; height: 32px; border-radius: 50%; text-align: center;
}
.step__title { font: var(--t-h4); }
.step__text { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); }

/* ---------------------------------------------------------------- CTA */

.cta-band {
  background: var(--surface-inverse);
  border-radius: var(--r-xl);
  padding: var(--s-11) var(--s-10);
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: var(--s-10); align-items: center;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 88% 12%, rgba(18, 115, 206, .26), transparent 58%);
  pointer-events: none;
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: rgba(255,255,255,.72); margin-top: var(--s-4); max-width: 52ch; font: var(--t-body-lg); }
.cta-band__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; position: relative; z-index: 1; }

/* -------------------------------------------------------------- footer */

.footer { background: var(--surface-2); border-top: 1px solid var(--line-1); padding-block: var(--s-11) var(--s-8); }
.footer__grid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap: var(--s-10); }
.footer__label { font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-1); margin-bottom: var(--s-4); }
.footer a { font: var(--t-sm); color: var(--ink-2); display: block; padding-block: 5px; transition: color var(--d-2) var(--ease-standard); }
.footer a:hover { color: var(--brand-700); }
.footer__bottom {
  margin-top: var(--s-10); padding-top: var(--s-6);
  border-top: 1px solid var(--line-1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  font: var(--t-xs); color: var(--ink-3);
}
.footer__legal { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.footer__social { display: flex; gap: var(--s-3); }
.footer__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line-1); background: var(--surface-1); padding:0; }
.footer__social a:hover { border-color: var(--ink-4); }
.footer__social svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------- pagination */

.pager { display: flex; align-items: center; gap: var(--s-2); justify-content: center; padding-top: var(--s-9); }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding-inline: 10px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--line-1); background: var(--surface-1);
  font: 500 0.875rem/1 var(--font-ui); color: var(--ink-2);
  transition: all var(--d-2) var(--ease-standard);
}
.pager a:hover { border-color: var(--ink-4); color: var(--ink-1); }
.pager [aria-current="page"] { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-1); font-weight: 600; }
.pager .is-disabled { opacity: .4; }

/* -------------------------------------------------------------- misc */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-1); color: var(--surface-1); padding:12px 16px; border-radius: 0 0 var(--r-sm) 0;
  font: 600 0.875rem/1 var(--font-ui);
}
.skip-link:focus { left: 0; }

.divider { height: 1px; background: var(--line-1); }
.kbd { font: 500 0.75rem/1 var(--font-mono); background: var(--surface-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-xs); padding:2px 6px; color: var(--ink-2); }

/* Scroll-reveal (progressive enhancement; content is visible without JS) */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-5) var(--ease-decel), transform var(--d-5) var(--ease-decel);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------ the instrument (homepage)
   These lived in index.html's inline <style> until WordPress needed them too.
   The design system is the shared source, so they belong here. */
.instrument {
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  padding: var(--s-7) var(--s-7) var(--s-6);
  box-shadow: var(--sh-8);
}
.instrument__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.instrument__title { font: var(--t-h3); letter-spacing: var(--track-snug); }
.instrument__stat { display: flex; align-items: center; gap: var(--s-4); }
.instrument__value {
  font: 600 2.5rem/1 var(--font-display); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.instrument__tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid var(--line-1);
}
.instrument__tiles .index-tile { border: 0; background: var(--surface-2); }

/* two-up intro used by the track-record section */
.track-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-10); align-items: start; }

@media (max-width: 1280px) {
  /* seven items plus icons do not fit; hide the icons before crowding the labels */
  .nav__link .nav__icon { display: none; }
  .nav__link { padding:8px 8px; }
}

@media (max-width: 1080px) {
  .instrument__tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .track-intro { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 760px) {
  .instrument { padding: var(--s-5); }
  .instrument__tiles { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- prose tables
   Report pages carry pricing and coverage tables imported from the archive. */
.prose table {
  width: 100%; border-collapse: collapse; margin: var(--s-6) 0;
  font-size: .875rem; border: 1px solid var(--line-1); border-radius: var(--r-md);
  overflow: hidden;
}
.prose thead th {
  background: var(--surface-2); color: var(--ink-1);
  font: 600 .8125rem/1.4 var(--font-ui); letter-spacing: .01em;
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-1);
}
.prose tbody td {
  padding: var(--s-3) var(--s-4); color: var(--ink-2);
  border-bottom: 1px solid var(--line-1); vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: var(--surface-2); }
.prose table th + th, .prose table td + td { border-left: 1px solid var(--line-1); }

/* a metadata line that the archive rendered as bare text */
.prose p:has(> strong:only-child) { margin-bottom: var(--s-2); }

/* ------------------------------------------------------ homepage pillars
   These lived in index.html's inline <style>. Anything the WordPress theme
   renders must be in the shared stylesheet, or it silently loses its layout. */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
           border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; gap:1px;
           background: var(--line-1); }
.pillar { display: block; padding: var(--s-7); background: var(--surface-1);
          text-decoration: none; transition: background var(--d-2); }
.pillar:hover { background: var(--surface-2); }
.pillar h3 { font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -.015em; color: var(--ink-1); margin: 0 0 var(--s-3); }
.pillar p { margin:0; font-size: .875rem; line-height: 1.6; color: var(--ink-3); }
.pillar__more { display: inline-block; margin-top: var(--s-5); font: 600 .8125rem var(--font-ui); color: var(--accent-text); }
@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }

.hero__intro { max-width: 760px; }
.hero-note { margin-top: var(--s-8); font-size: .875rem; color: var(--ink-3); max-width: 56ch; }

/* the header theme toggle */
.theme-toggle { display: grid; place-items: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); flex: none;
                border: 1px solid var(--line-1); border-radius: var(--r-sm);
                background: var(--surface-1); color: var(--ink-2); cursor: pointer;
                transition: background var(--d-2), color var(--d-2), border-color var(--d-2); }
.theme-toggle:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--line-control); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* the 404 recovery grid and the default WP search form */
.search-form { display: flex; gap: var(--s-3); }
.search-form .search-field { flex: 1; min-width: 0; padding: var(--s-3) var(--s-4); height: 44px;
  font: 400 .875rem var(--font-ui); color: var(--ink-1); background: var(--surface-2);
  border: 1px solid var(--line-control); border-radius: var(--r-sm); }
.search-form .search-submit { padding: 0 var(--s-6); height: 44px; font: 600 .875rem var(--font-ui);
  color: var(--on-accent); background: var(--accent-text); border: 0; border-radius: var(--r-sm); cursor: pointer; }

/* --------------------------------------------------------- mobile header
   At 390px the CTA row pushed the hamburger 57px past the viewport, so mobile
   navigation was unreachable. Wrap the row and shrink the buttons. */
@media (max-width: 900px) {
  .header__inner { flex-wrap: wrap; gap: var(--s-4); }
  .header__cta { margin-left:auto; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
  .header__cta .btn--hide-sm { display: none; }
  .header__cta .btn { padding-inline: var(--s-4); }
  .brand__descriptor { display: none; }
  .topbar .wrap { flex-wrap: wrap; gap: var(--s-3); }
  .nav { margin-left:0; }
}
@media (max-width: 480px) {
  .header__cta .btn { font-size: .8125rem; }
  .theme-toggle { width: 34px; height: 34px; }
}

/* nav items carry an icon; the label sits beside it */
.nav__icon { color: var(--ink-4); opacity: .8; transition: color var(--d-2) var(--ease-standard), opacity var(--d-2); }
.nav__link:hover .nav__icon, .nav__link[aria-current="page"] .nav__icon { color: var(--accent-text); }
.nav__link > span { display: inline; }

/* --------------------------------------------------- icons and logo grids
   The original site used circular icon badges and logo lockups. These are the
   modern equivalents: one 24px grid, one stroke weight, currentColor so they
   work in both themes. */
.icon { flex: none; display: block; }
.icon-badge {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
  transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard),
              transform .16s var(--ease-standard);
}
.icon-badge--ink { background: var(--surface-inverse); color: var(--on-ink, #fff); }
.icon-badge--sm { width: 34px; height: 34px; }
a:hover > .icon-badge, .card:hover .icon-badge { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* a run of legacy images becomes a grid rather than one full-width row each */
.logo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5); margin: var(--s-7) 0;
}
.logo-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); margin:0; padding: var(--s-5);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard),
              transform .16s var(--ease-standard);
}
.logo-cell:hover { border-color: var(--accent-line); box-shadow: var(--sh-8); transform: translateY(-2px); }
.logo-cell img { max-width: 100%; height: auto; max-height: 88px; object-fit: contain; }
.logo-cell figcaption {
  font: 500 .75rem/1.35 var(--font-ui); color: var(--ink-3); text-align: center;
}

/* partner lockups: name + description, as the original presented them */
.lockup {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--s-6); align-items: start;
  padding: var(--s-6) 0; border-bottom: 1px solid var(--line-1);
}
.lockup:last-of-type { border-bottom: 0; }
.lockup__name {
  font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -.015em;
  color: var(--ink-1); margin:0;
}
.lockup__text { margin:0; color: var(--ink-3); font-size: .875rem; line-height: 1.62; }
@media (max-width: 760px) { .lockup { grid-template-columns: 1fr; gap: var(--s-2); } }

/* section links with an icon, used on hub pages and in the footer */
.icon-link { display: inline-flex; align-items: center; gap: var(--s-3); }
.icon-link .icon { color: var(--accent-text); }

/* ------------------------------------------------- custom select (listbox)
   A native <select> popup is drawn by the OS and cannot be styled. Rather than
   ship the default blue list, every select is progressively enhanced into this
   listbox: the native control stays in the DOM as the accessible fallback and
   as the form value, and a styled panel is rendered beside it. */
.select { position: relative; display: block; }

.select-native {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: var(--s-3) calc(var(--s-8) + 6px) var(--s-3) var(--s-4);
  font: 400 .875rem/1.4 var(--font-ui); color: var(--ink-1);
  background: var(--surface-2); border: 1px solid var(--line-control);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard);
}
.select-native:hover { border-color: var(--ink-4); }
.select-native:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select--enhanced .select-native { position: absolute; opacity: 0; pointer-events: none; height: 0; padding:0; border: 0; }

.select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding: var(--s-3) var(--s-4);
  font: 400 .875rem/1.4 var(--font-ui); color: var(--ink-1); text-align: left;
  background: var(--surface-2); border: 1px solid var(--line-control);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard), background var(--d-2);
}
.select-trigger:hover { border-color: var(--ink-4); background: var(--surface-1); }
.select-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-trigger .icon { color: var(--ink-3); transition: transform var(--d-2) var(--ease-decel); flex: none; }
.select-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.select-trigger__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger--placeholder .select-trigger__label { color: var(--ink-4); }

.select-menu {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 288px; overflow-y: auto;
  padding: var(--s-2);
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md); box-shadow: var(--sh-28);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--d-2) var(--ease-decel), transform var(--d-2) var(--ease-decel), visibility var(--d-2);
}
.select-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.select-option {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-3) var(--s-3);
  font: 400 .875rem/1.4 var(--font-ui); color: var(--ink-2); text-align: left;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.select-option:hover, .select-option[data-active="true"] { background: var(--surface-2); color: var(--ink-1); }
.select-option[aria-selected="true"] { color: var(--accent-text); font-weight: 600; background: var(--accent-soft); }
.select-option__check { margin-left:auto; color: var(--accent-text); opacity: 0; flex: none; }
.select-option[aria-selected="true"] .select-option__check { opacity: 1; }
.select-option__meta { margin-left:auto; font: 500 .75rem var(--font-ui); color: var(--ink-4); }

/* person cards on the governance page */
.person .card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.avatar--lg { width: 56px; height: 56px; font-size: 1.0625rem; }
.person__name { font: 600 1.1875rem/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink-1); margin:0; }
.person__role { margin:0; font: 500 .875rem/1.4 var(--font-ui); color: var(--accent-text); }

/* ------------------------------------------------------- partner lockups
   Logo | name | description, as the original partners page presents them. */
.partner-list { display: flex; flex-direction: column; }
.partner {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-7); align-items: center;
  padding: var(--s-7) 0; border-bottom: 1px solid var(--line-1);
}
.partner:last-child { border-bottom: 0; }
.partner__logo {
  display: grid; place-items: center; min-height: 96px; padding: var(--s-4);
  background: #fff; border: 1px solid var(--line-1); border-radius: var(--r-lg);
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard);
}
.partner:hover .partner__logo { border-color: var(--accent-line); box-shadow: var(--sh-8); }
.partner__logo img { max-width: 100%; max-height: 72px; height: auto; object-fit: contain; }
.partner__monogram {
  font: 600 1.25rem var(--font-display); color: var(--ink-3); letter-spacing: .02em;
}
.partner__name {
  font: 600 1.1875rem/1.3 var(--font-display); letter-spacing: -.02em;
  color: var(--ink-1); margin: 0 0 var(--s-3);
}
.partner__text { margin:0; color: var(--ink-3); font-size: .875rem; line-height: 1.62; max-width: 62ch; }
@media (max-width: 760px) {
  .partner { grid-template-columns: 1fr; gap: var(--s-5); }
  .partner__logo { max-width: 200px; }
}

/* ------------------------------------------------------ icon tiles (hover)
   The original presents research methods as pale cards carrying a large faded
   icon behind the label. Modernised: the icon sits in the card, muted at rest,
   and three things happen on hover — the card lifts, the border takes the
   accent, and the icon scales and takes the accent colour. The label lifts too.
   All of it is one transition set so the card moves as a single object. */
.tile-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-5); margin: var(--s-5) 0 var(--s-8);
}
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s-4); overflow: hidden;
  min-height: 190px; padding: var(--s-7) var(--s-5);
  text-align: center; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  transition: transform var(--d-2) var(--ease-decel), border-color var(--d-2) var(--ease-standard),
              box-shadow .22s var(--ease-standard), background .22s var(--ease-standard);
}
.tile__icon {
  color: var(--ink-4); opacity: .38;
  transition: transform var(--d-3) var(--ease-decel), opacity var(--d-2) var(--ease-standard),
              color .22s var(--ease-standard);
}
.tile__title {
  font: 600 .875rem/1.3 var(--font-ui); letter-spacing: -.005em;
  color: var(--ink-2); margin:0;
  transition: color var(--d-2) var(--ease-standard);
}
.tile__text {
  margin:0; font-size: .8125rem; line-height: 1.55; color: var(--ink-3);
  max-width: 30ch;
  transition: color var(--d-2) var(--ease-standard);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--surface-1);
  box-shadow: var(--sh-16, 0 10px 24px rgba(11,18,32,.10));
}
.tile:hover .tile__icon, .tile:focus-visible .tile__icon {
  opacity: 1; color: var(--accent-text); transform: scale(1.12);
}
.tile:hover .tile__title, .tile:focus-visible .tile__title { color: var(--ink-1); }
.tile:hover .tile__text, .tile:focus-visible .tile__text { color: var(--ink-2); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the accent hairline that draws across the top on hover */
.tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-3) var(--ease-decel);
}
.tile:hover::before, .tile:focus-visible::before { transform: scaleX(1); }

@media (max-width: 1080px) { .tile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .tile-grid { grid-template-columns: 1fr; } .tile { min-height: 150px; } }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile__icon, .tile__title, .tile::before { transition: none; }
  .tile:hover { transform: none; }
}

/* ------------------------------------------------------------ brand mark */

/* The real I-Metrics logo: accent #1273CE on black, 180x130, transparent.
   It is a stacked lockup, so it needs more height than a typical wordmark. */
.brand__logo { height: 44px; width: auto; display: block; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}

.theme-toggle {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-1); background: var(--surface-1); color: var(--ink-2);
  transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard),
              border-color var(--d-2) var(--ease-standard);
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--line-2); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}
.brand--lg .brand__logo { height: 56px; }
.brand__rule { width: 1px; height: 30px; background: var(--line-2); flex: none; }
.brand__descriptor {
  font: 500 0.75rem/1.4 var(--font-ui);
  color: var(--ink-3); letter-spacing: 0.01em;
  max-width: 132px;
}

/* ------------------------------------------------------- interactive chart */

.chart {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-7) var(--s-6);
}
.chart__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.chart__ranges { display: inline-flex; gap:2px; background: var(--surface-3); padding:2px; border-radius: var(--r-sm); }
.chart__range {
  padding:6px 12px; border-radius: var(--r-xs);
  font: 600 0.8125rem/1 var(--font-ui); color: var(--ink-3);
  transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard);
}
.chart__range:hover { color: var(--ink-1); }
.chart__range[aria-pressed="true"] { background: var(--surface-1); color: var(--ink-1); box-shadow: var(--sh-2); }

.chart__legend { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.chart__key {
  display: inline-flex; align-items: center; gap:6px;
  font: 500 0.8125rem/1 var(--font-ui); color: var(--ink-3);
  padding:4px 8px; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: all var(--d-2) var(--ease-standard);
}
.chart__key:hover { color: var(--ink-1); background: var(--surface-2); }
.chart__key[aria-pressed="false"] { color: var(--ink-4); }
.chart__key[aria-pressed="false"] .chart__swatch { opacity: .3; }
.chart__key[aria-pressed="false"] span:not(.chart__swatch) { text-decoration: line-through; text-decoration-thickness: 1px; }
.chart__key[aria-pressed="true"] { border-color: var(--line-1); color: var(--ink-1); }
.chart__swatch { width: 9px; height: 9px; border-radius: var(--r-xs); flex: none; }

.chart__stage { position: relative; }
.chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart svg:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 3px; border-radius: var(--r-sm); }

.chart__grid { stroke: var(--line-1); stroke-width: 1; }
.chart__axis { font: 400 12px var(--font-ui); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart__threshold { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart__threshold-label { font: 600 12px var(--font-ui); fill: var(--ink-1); letter-spacing: 0; }
.chart__guide { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 3; }

.chart__tip {
  position: absolute; top: 6px; left: 0; z-index: 3;
  background: var(--surface-inverse); color: #fff;
  border-radius: var(--r-md); padding:8px 12px;
  box-shadow: var(--sh-16); pointer-events: none;
  opacity: 0; transition: opacity var(--d-2) var(--ease-standard);
  min-width: 168px;
}
.chart__tip.is-on { opacity: 1; }
.chart__tip-period { font: 600 0.6875rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom:6px; }
.chart__tip-row { display: flex; align-items: center; gap:8px; font: 400 0.8125rem/1.5 var(--font-ui); }
.chart__tip-name { color: rgba(255,255,255,.72); }
.chart__tip-val { margin-left:auto; font-variant-numeric: tabular-nums; color: #fff; }
.chart__tip-delta { font: 600 0.75rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.chart__tip-delta.is-up { color: #7BD8A0; }
.chart__tip-delta.is-down { color: #FF9B90; }
.chart__tip-delta.is-flat { color: rgba(255,255,255,.5); }
.chart__readout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --------------------------------------------------- catalogue filtering */

.catalog-toolbar {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-6); margin-bottom: var(--s-7);
  background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-lg);
}
.catalog-toolbar .field { flex: 1 1 220px; }
.catalog-toolbar .input, .catalog-toolbar .select { height: 40px; background: var(--surface-1); }
.catalog-count { font: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); }
[data-catalog-item][hidden] { display: none; }

.empty-state {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: var(--s-11) var(--s-7); text-align: center; background: var(--surface-2);
  grid-column: 1 / -1;
}
.empty-state__title { font: var(--t-h4); color: var(--ink-1); }
.empty-state__text { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); max-width: 46ch; margin-inline: auto; }
.empty-state .btn { margin-top: var(--s-5); }

/* --------------------------------------------------- sortable data table */

.data-table th[role="columnheader"] { padding:0; }
.th-sort {
  width: 100%; padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap:6px;
  font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-3); text-align: left;
  transition: color var(--d-2) var(--ease-standard), background var(--d-2) var(--ease-standard);
}
.data-table th.num .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--ink-1); background: var(--surface-3); }
.th-sort__mark { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; opacity: 0; transition: opacity var(--d-2) var(--ease-standard); }
.data-table th[aria-sort="ascending"] .th-sort__mark { border-bottom: 5px solid var(--accent); opacity: 1; }
.data-table th[aria-sort="descending"] .th-sort__mark { border-top: 5px solid var(--accent); opacity: 1; }
.data-table th[aria-sort="ascending"] .th-sort,
.data-table th[aria-sort="descending"] .th-sort { color: var(--ink-1); }

/* --------------------------------------------------------------- tabs */

[role="tabpanel"][hidden] { display: none; }

/* ------------------------------------------------------------- responsive */

/* Between 1080 and 1240 the nav labels need more room than they have. */
@media (max-width: 1240px) {
  .nav__link { font-size: 0.875rem; padding: 8px var(--s-2); }
  .header__cta .btn--hide-sm { display: none; }
}

@media (max-width: 1080px) {
  :root { --t-display: 600 3.25rem/1.06 var(--font-display); --t-h1: 600 2.5rem/1.1 var(--font-display); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--sidebar, .grid--sidebar-left { grid-template-columns: 1fr; gap: var(--s-8); }
  .side-nav { position: static; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-8); }
  .cta-band { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-9) var(--s-7); }
  /* The primary nav becomes a drawer instead of simply disappearing. */
  /* above the drawer (z-index 5 inside .header, but .header is z-index 100),
     so the close control stays clickable while the drawer is open */
  .nav-toggle { display: inline-flex; position: relative; z-index: 130; }
  body.nav-open .nav-toggle__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle__box span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mega { display: none; }

  .nav {
    display: flex;
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(380px, 88vw);
    margin-left:0;
    flex-direction: column; align-items: stretch; gap:0;
    padding: var(--s-5) var(--s-6) var(--s-10);
    padding-top: calc(var(--header-h) + var(--s-5));
    background: var(--surface-1);
    box-shadow: var(--sh-64);
    border-left: 1px solid var(--line-1);
    overflow-y: auto; overscroll-behavior: contain;
    z-index: 120;
    /* Clip-path reveal rather than an off-canvas transform, so the drawer never
       extends past the viewport and nothing needs to clip its ancestors. */
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--d-3) var(--ease-decel);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }

  .nav__item { border-bottom: 1px solid var(--line-1); }
  .nav__item:first-child { border-top: 1px solid var(--line-1); }
  .nav__link {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px;
    align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-2);
    font-size: 1.0625rem; font-weight: 500;
    text-align: left;
    border-radius: 0;
  }
  /* the label sits next to its icon; only the caret is pushed to the edge */
  .nav__link > span { text-align: left; }
  .nav__caret { justify-self: end; }
  .nav__link .nav__icon { justify-self: start; }
  .nav__link:hover { background: transparent; color: var(--accent-text); }
  .nav__item.is-expanded .nav__caret { transform: rotate(180deg); }

  .mega {
    display: none;
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; min-width: 0;
    border: 0; box-shadow: none; border-radius: 0;
    padding: var(--s-3) 0 var(--s-5) var(--s-5);
    background: transparent;
    grid-template-columns: 1fr; gap:0;
  }
  .nav__item.is-expanded .mega { display: grid; }
  .mega a { padding: 10px var(--s-2); }
  .mega__group-title { padding-left: var(--s-2); }
  .header__cta { margin-left:auto; }
}

@media (max-width: 760px) {
  :root {
    --t-display: 600 2.375rem/1.1 var(--font-display);
    --t-h1: 600 2rem/1.14 var(--font-display);
    --t-h2: 600 1.75rem/1.2 var(--font-display);
    --t-h3: 600 1.375rem/1.28 var(--font-display);
    --t-body-lg: 400 1.0625rem/1.6 var(--font-ui);
    --gutter: var(--s-5);
    --s-12: 64px; --s-13: 80px; --s-11: 56px; --s-10: 40px;
  }
  .cta-band { gap: var(--s-6); padding: var(--s-8) var(--s-6); }
  .hero--page h1 { max-width: none; }
  .topbar__inner > .row:last-child { display: none; }   /* keep only the release notice */
  .section-head { margin-bottom: var(--s-7); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-toolbar { flex-direction: column; align-items: stretch; }
  .chart__bar { flex-direction: column; align-items: flex-start; }
  .brand__logo { height: 38px; }
  .form-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .card--row { flex-direction: column; }
  .card--row .card__media { width: 100%; aspect-ratio: 16/9; }
  .post { grid-template-columns: 1fr; gap: var(--s-2); }
  .footer__grid { grid-template-columns: 1fr; }
  .facts__row { grid-template-columns: 1fr; gap:2px; }
  .header__cta .btn--hide-sm { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION IDENTITY
   A measurement company's interface should behave like an instrument: things
   settle, lines draw, readings update. Every animation here is tied to the
   data — nothing moves for decoration. All of it is suppressed under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. The sector rail. A real horizontal scroller — no auto-scroll, so the
      reader sets the pace and no content is hidden from them at rest. */
.tape {
  background: var(--surface-inverse);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: stretch;
  position: relative;
}
.tape__viewport {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tape__viewport::-webkit-scrollbar { display: none; }
.tape__viewport:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

.tape__track { display: flex; width: max-content; }
.tape__item {
  display: inline-flex; align-items: center; gap:8px;
  padding:12px 20px;
  font: 400 0.8125rem/1 var(--font-ui);
  border-right: 1px solid rgba(255,255,255,.09);
  white-space: nowrap;
}
.tape__name { color: rgba(255,255,255,.66); }
.tape__val { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.tape__chg { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.tape__chg.is-up { color: #6FD79B; }
.tape__chg.is-down { color: #FF9B90; }
.tape__chg.is-flat { color: rgba(255,255,255,.5); }
.tape__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--accent-on-dark); }

.tape__nav {
  flex: none; width: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.82);
  background: var(--surface-inverse);
  border: 0; border-right: 1px solid rgba(255,255,255,.08);
  transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard);
}
.tape__nav--next { border-right: 0; border-left: 1px solid rgba(255,255,255,.08); }
.tape__nav svg { width: 17px; height: 17px; }
.tape__nav:hover:not(:disabled) { background: #16202f; color: #fff; }
.tape__nav:disabled { opacity: .28; cursor: default; }
.tape:not(.is-scrollable) .tape__nav { display: none; }

/* ── 3. Draw-in. Rules and chart lines extend from the left as they enter. */
.draw-rule {
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d-5) var(--ease-decel);
}
.is-in .draw-rule, .draw-rule.is-in { transform: scaleX(1); }

/* ── 4. Staggered entrance for grouped cards. */
.stagger > * { opacity: 1; }
.js .stagger > * { opacity: 0; transform: translateY(16px); }
.js .stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--d-5) var(--ease-decel), transform var(--d-5) var(--ease-decel);
}
.js .stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: var(--d-2); }
.js .stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }

/* ── 6. Instrument needle sweep. A single pass of light across the hero
      instrument when it first enters — the device powering on. */
.instrument { position: relative; overflow: hidden; }
.instrument::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  left: -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(18, 115, 206, .10), transparent);
  opacity: 0;
}
.instrument.is-in::after { animation: sweep 1500ms var(--ease-decel) 260ms 1; }
@keyframes sweep {
  0%   { left: -40%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 118%; opacity: 0; }
}

/* ── 7. Threshold breathe. The 50.0 line is the reference the whole product
      is defined by, so it gets a slow, quiet breath — never a blink. */
.chart__threshold { animation: threshold-breathe 4200ms var(--ease-standard) infinite; }
@keyframes threshold-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ── 8. Reading flash. When a live figure updates it flashes accent once. */
@keyframes reading-update {
  0%   { background-color: rgba(18, 115, 206, .20); }
  100% { background-color: transparent; }
}
.reading-flash { animation: reading-update 900ms var(--ease-decel) 1; }

/* ── 9. Arrow nudge on the CTA — the only perpetual motion in the UI chrome. */
@keyframes nudge-x {
  0%, 62%, 100% { transform: translateX(0); }
  74%           { transform: translateX(3px); }
  86%           { transform: translateX(0); }
}
.btn--nudge svg { animation: nudge-x 3200ms var(--ease-standard) infinite; }

/* ── 10. Count-up figures start hidden to avoid a flash of the final value. */
.count { font-variant-numeric: tabular-nums; }
.js .count[data-count] { visibility: hidden; }
.js .count.is-counting, .js .count.is-done { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .tape__track { animation: none; }
    .instrument.is-in::after { animation: none; }
  .chart__threshold { animation: none; opacity: .85; }
  .btn--nudge svg { animation: none; }
  .js .stagger > * { opacity: 1; transform: none; }
  .draw-rule { transform: scaleX(1); }
  .js .count[data-count] { visibility: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE INDEX TIMELINE — the centrepiece.
   A tall scroll container with a sticky stage. Scrolling travels a playhead
   through fourteen years of the series; the line draws behind it and every
   reading on the stage updates from the same clock.
   ═══════════════════════════════════════════════════════════════════════ */

.tl { position: relative; height: 360vh; background: var(--surface-1); }
.tl__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-6);
  padding: var(--s-10) var(--gutter) var(--s-11);
  max-width: var(--w-wide); margin-inline: auto;
  overflow: hidden;
}
.tl__sticky--static { position: static; height: auto; }

/* ── heads-up display ─────────────────────────────────────────────────── */
.tl__hud {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
}
.tl__eyebrow {
  font: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--accent-text);
}
.tl__month {
  font: 600 clamp(1.75rem, 3.4vw, 3rem)/1.05 var(--font-display);
  letter-spacing: var(--track-tight); color: var(--ink-1); margin-top: var(--s-2);
}
.tl__read { text-align: right; }
.tl__value {
  font: 600 clamp(2.75rem, 7vw, 5.5rem)/1 var(--font-display);
  letter-spacing: -0.04em; color: var(--ink-1);
}
.tl__read.is-up .tl__value { color: var(--up); }
.tl__read.is-down .tl__value { color: var(--down); }
.tl__delta {
  font: 600 clamp(0.875rem, 1.4vw, 1.125rem)/1 var(--font-ui);
  font-variant-numeric: tabular-nums; margin-top: var(--s-3); min-height: 1.2em;
  transition: color var(--d-3) var(--ease-standard);
}
.tl__delta.is-up { color: var(--up); }
.tl__delta.is-down { color: var(--down); }
.tl__delta.is-flat { color: var(--ink-3); }

/* ── odometer ─────────────────────────────────────────────────────────── */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo__col { display: block; height: 1em; overflow: hidden; }
.odo__col--static { width: 0.34em; }
.odo__strip { display: flex; flex-direction: column; will-change: transform;
  transition: transform var(--d-5) cubic-bezier(.16,.84,.28,1); }
.odo__digit { display: block; height: 1em; line-height: 1; }

/* ── the chart stage ──────────────────────────────────────────────────── */
.tl__chart { position: relative; }
.tl__chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.tl__threshold { stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 7 5; opacity: .8; }
.tl__threshold-label {
  font: 600 13px var(--font-ui); fill: var(--ink-2); letter-spacing: 0;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round;
}
.tl__state {
  display: inline-block; margin-top: var(--s-3);
  font: 600 0.75rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  padding:4px 12px; border-radius: var(--r-full);
}
.tl__state.is-up { background: var(--up-soft); color: var(--up); }
.tl__state.is-down { background: var(--down-soft); color: var(--down); }
.tl__play { stroke: var(--ink-1); stroke-width: 1.5; opacity: .55; }
.tl__dot { fill: var(--surface-1); stroke: var(--ink-1); stroke-width: 2.5; }
.tl__tick { stroke: var(--line-2); stroke-width: 1; }

.tl__axis { position: relative; height: 20px; margin-top:6px; }
.tl__year {
  position: absolute; top: 0; transform: translateX(-50%);
  font: 600 0.6875rem/1 var(--font-ui); letter-spacing: .06em;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
  transition: color var(--d-3) var(--ease-standard);
}
.tl__year.is-on { color: var(--ink-1); }

/* ── sector readouts, driven by the same playhead ─────────────────────── */
.tl__strip {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-5); padding-top: var(--s-6);
  border-top: 1px solid var(--line-1);
}
.tl__cell { display: flex; flex-direction: column; gap:6px; }
.tl__cell-name { font: 600 0.8125rem/1.3 var(--font-ui); color: var(--ink-3); }
.tl__cell-val {
  font: 600 1.5rem/1 var(--font-display); letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; color: var(--ink-1);
  transition: color var(--d-3) var(--ease-standard);
}
.tl__cell.is-up .tl__cell-val { color: var(--up); }
.tl__cell.is-down .tl__cell-val { color: var(--down); }
.tl__cell-bar {
  height: 2px; border-radius: var(--r-xs); background: var(--line-1);
  position: relative; overflow: hidden;
}
.tl__cell-bar::after {
  content: ""; position: absolute; inset: 0;
  transform-origin: left center; transform: scaleX(0.5);
  transition: transform var(--d-5) cubic-bezier(.16,.84,.28,1);
}
.tl__cell.is-up .tl__cell-bar::after { background: var(--up); }
.tl__cell.is-down .tl__cell-bar::after { background: var(--down); }

/* hint that the section is scroll-driven */
.tl__hint {
  display: flex; align-items: center; gap: var(--s-3);
  font: var(--t-xs); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase;
}
.tl__hint svg { width: 14px; height: 14px; animation: hint-bob 2000ms var(--ease-standard) infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 760px) {
  .tl { height: 260vh; }
  .tl__strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); }
  .tl__hud { gap: var(--s-4); }
  .tl__read { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .tl { height: auto; }
  .tl__sticky { position: static; height: auto; }
  .tl__hint { display: none; }
  .odo__strip { transition: none; }
}

/* ------------------------------------------------------- chronology
   Dated milestones on a rule. No cards, no big numbers with grey captions:
   the record itself is the evidence. */
.track-intro > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
@media (max-width: 1080px) { .track-intro > :first-child { position: static; } }
.chrono { position: relative; padding-left: var(--s-7); }
.chrono::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--line-1);
}
.chrono__item { position: relative; padding-bottom: var(--s-7); }
.chrono__item:last-child { padding-bottom:0; }
.chrono__item::before {
  content: ""; position: absolute; left: calc(var(--s-7) * -1); top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface-1); box-shadow: 0 0 0 1.5px var(--line-2);
}
.chrono__item--major::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.chrono__year {
  font: 600 0.8125rem/1 var(--font-mono); letter-spacing: .02em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.chrono__text { font: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); max-width: 46ch; }
.chrono__text strong { color: var(--ink-1); font-weight: 600; }

/* ── partner rail: the real logos, still ─────────────────────────────────── */
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-9) var(--s-11); }
.partners__item { display: flex; align-items: center; gap: var(--s-4); }
.partners__logo { height: 52px; width: auto; max-width: 150px; object-fit: contain; }
.partners__logo--wordmark { height: 30px; max-width: 170px; }
.partners__meta { font: var(--t-xs); color: var(--ink-3); max-width: 22ch; line-height: 1.45; }

/* ------------------------------------------------------------ touch targets */
@media (hover: none) and (pointer: coarse) {
  .nav__link, .side-nav a, .mega a, .footer a { min-height: 44px; display: flex; align-items: center; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .pager a, .pager span { min-width: 44px; height: 44px; }
  .card:hover { transform: none; }          /* no hover lift on touch */
  .chart__range { padding:8px 12px; }
  .chart__key { padding:8px 12px; }
}

/* iOS zooms the page when a control under 16px receives focus. */
@media (max-width: 760px) {
  .input, .select, .textarea { font-size: 16px; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .header, .footer, .cta-band, .topbar { display: none; }
  body { color: #000; }
  a { text-decoration: underline; }
}


/* ── native checkboxes and radios ────────────────────────────────────────────
   The box renders at about 13px because that is what the platform draws, and it
   is not worth fighting — but a 13px box inside a 20px label is a 20px target,
   and people use this on a phone. The label is what we control, so the label is
   what grows: the whole row becomes the target, which is also what a finger
   expects. Scoped to labels that actually contain the control, so it never
   inflates a label that is only text. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  min-block-size: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* A browser that cannot match :has() still gets an adequately sized box. */
input[type="checkbox"],
input[type="radio"] {
  inline-size: 16px;
  block-size: 16px;
  accent-color: var(--accent);
}