/*
 * LabRuns foundation: one --lm-* token system for the public site, the application and the user manual, cut from the
 * signed report sheet. Graphite neutrals with one ink-indigo accent; green, amber and red only for Met, Undecided and
 * Not met. Day is cool white paper, Dusk is mid-graphite. Piazzolla sets the headings, Archivo every other role.
 *
 * Every surface loads this file first after report/tokens.css (base.html, public/page.html, public/home.html and the
 * manual's astro.config.mjs) and builds on these names. Reports, plot exports and signed PDFs never load it: they
 * keep report/tokens.css, fonts.css and their own --r-* print tokens (apps/documents/styles/reading/02-tokens-base.css),
 * aligned to the same values, so saved documents render exactly as signed. Themed colours are light-dark(Day, Dusk);
 * with no data-theme the page follows the device.
 *
 * Token families
 *   Colour      --lm-color-bg-{canvas, surface, raised, sunken, hover, selected, mat, field-1..3, accent, accent-hover,
 *               accent-subtle, accent-wash, accent-deep, highlight, tooltip, lightbox}
 *               --lm-color-fg-{default, body, muted, subtle, disabled, accent, accent-hover, on-accent,
 *               on-accent-muted, on-highlight, tooltip, on-lightbox}
 *               --lm-color-border-{default, rule, strong, accent, field}, --lm-color-focus-ring,
 *               --lm-color-selection-{bg, fg}, --lm-color-scrim, --lm-track
 *               --lm-color-status-{ok, warn, fail, info}-{fg, bg}, --ui-fail-solid, --ui-on-fail-solid, --ui-dot-*
 *               (status names are fixed: other surfaces and agents read them)
 *   Field       --lm-field: the quiet indigo field behind whole windows and report sheets (a gradient of field-1..3)
 *   Type        --lm-font-family-{display, ui, prose, mono}
 *               --lm-font-size-{2xs 12, xs 13, sm 14, md 15, base 16, lg 18, xl 20, 2xl 24, 3xl 28, 4xl 32} px
 *               --lm-font-size-display-{1, 2}: public h1 (44 to 76 px) and home h2 (32 to 48 px)
 *               --lm-leading-{display-1, display-2, heading, body}, --lm-tracking-{display, heading, label}
 *               --lm-type-{display-1, display-2, h1, h2, h3, h4, body, small, label}: whole `font` shorthands
 *   Space       --lm-space-{1 4, 2 8, 3 12, 4 16, 5 24, 6 32, 7 48, 8 64, 9 96} px, --lm-space-section
 *   Radius      --lm-radius-control 3 px (buttons, fields, chips), --lm-radius-frame 6 px (windows, dialogs, sheets
 *               of controls), --lm-radius-field 12 px (the public indigo showcase field); older names --lm-radius-xs 2,
 *               -sm 3, -md 4 (cards), -lg 6 and -card stay as aliases
 *   Elevation   --lm-elevation-{near, far, popover, paper}; the shadow colours --lm-shadow-{near, far},
 *               --lm-paper-edge and the composed --lm-shadow-{popover, dialog} stay
 *   Motion      --lm-duration-{1 120, 2 180, 3 240, 4 320, 5 440} ms and exactly two curves, --ease-out
 *               (arrivals, presses, colour) and --ease-in-out (things moving on screen). The older
 *               --lm-motion-* names point at these.
 *   Buttons     one primary and one secondary for every surface: --lm-button-height (36 px in the app and manual,
 *               40 px on public pages), weight 600, accent to accent-hover over --lm-duration-1 --ease-out,
 *               :active scale(0.98), no shadow
 */

/* Archivo, vendored in vendor/fonts and served at /fonts by the application: its weight axis at
   normal width, split like fonts.css splits Lexend. The core file holds Latin, punctuation, sub/superscripts, arrows
   and the math operators the interface shows, so ordinary pages download only it (base.html preloads it); the rest
   file loads only for a character outside that. Greek letters and math symbols Archivo lacks fall through to the
   "Lexend" family in fonts.css, which already carries glyph-checked companions for them. */
@font-face {
  font-family: "Archivo UI";
  src: url("/fonts/archivo-roman-core.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0-24F, U+300-36F, U+394, U+3BC, U+2000-209F, U+20AC, U+2122, U+2190-2199, U+2200-22FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo UI";
  src: url("/fonts/archivo-roman-rest.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+259, U+272, U+2B9-2BA, U+2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+3A9, U+3C0, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D,
    U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5,
    U+20B9-20BA, U+20BC-20BD, U+2105, U+2113, U+2116-2117, U+2126, U+212E, U+21A8, U+2302, U+2310, U+2320-2321, U+25CA,
    U+27E8-27E9, U+E0FF, U+EFFD, U+F000, U+FB01-FB02;
}

@font-face {
  font-family: "Archivo UI";
  src: url("/fonts/archivo-italic-core.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0-24F, U+300-36F, U+394, U+3BC, U+2000-209F, U+20AC, U+2122, U+2190-2199, U+2200-22FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo UI";
  src: url("/fonts/archivo-italic-rest.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+259, U+272, U+2B9-2BA, U+2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+3A9, U+3C0, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D,
    U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5,
    U+20B9-20BA, U+20BC-20BD, U+2105, U+2113, U+2116-2117, U+2126, U+212E, U+21A8, U+2302, U+2310, U+2320-2321, U+25CA,
    U+27E8-27E9, U+E0FF, U+EFFD, U+F000, U+FB01-FB02;
}

/* Piazzolla keeps both variable axes in core/rest subsets; reports (reading/01-fonts.css) use the same two files and
   ranges, so headings load only the Latin core. */
@font-face {
  font-family: "Piazzolla Report";
  src: url("/fonts/piazzolla-roman-core.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0-24F, U+300-36F, U+394, U+3BC, U+2000-209F, U+20AC, U+2122, U+2190-2199, U+2200-22FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Piazzolla Report";
  src: url("/fonts/piazzolla-roman-rest.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+259, U+2B9-2BC, U+2BE-2BF, U+2C6-2CC, U+2D8-2DD, U+374-375, U+37A, U+37E, U+384-38A, U+38C, U+38E-393, U+395-3A1, U+3A3-3BB, U+3BD-3CF, U+3D7, U+400-45F, U+462-463, U+46A-46B, U+472-475, U+48A-513, U+51A-51D, U+524-529, U+52E-52F, U+58F, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+20BF, U+2100-2101, U+2105, U+2113, U+2116-2117, U+2120, U+2126, U+212E, U+2150-2156, U+2158-215E, U+2160, U+2164, U+2169, U+216C-2170, U+2174, U+2179, U+217C-217F, U+25A0-25A1, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA, U+25FC, U+26AB, U+2B1B, U+2B24, U+A78B-A78C, U+E700, U+FB01-FB02;
}

/* Georgia scaled to Piazzolla's heading widths (95.2%, measured over the home page's headings), so a heading keeps its
   line breaks while Piazzolla arrives and nothing below it moves when it does. */
@font-face {
  font-family: "Piazzolla Fallback";
  src: local("Georgia"), local("Georgia-Regular");
  font-weight: 100 599;
  size-adjust: 95.2%;
}

@font-face {
  font-family: "Piazzolla Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 600 900;
  size-adjust: 95.2%;
}

/* Arial scaled to Archivo's widths (98.4% regular, 95.0% bold, measured over a homepage paragraph) with Archivo's
   ascent and descent, so text keeps its line breaks while Archivo arrives on a slow connection and nothing below it
   moves when it does. It covers only the characters Archivo's core file does, so the rest still reach Lexend. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 100 549;
  size-adjust: 98.4%;
  ascent-override: 89.2%;
  descent-override: 21.3%;
  line-gap-override: 0%;
  unicode-range: U+0-24F, U+300-36F, U+394, U+3BC, U+2000-209F, U+20AC, U+2122, U+2190-2199, U+2200-22FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 550 900;
  size-adjust: 95%;
  ascent-override: 92.4%;
  descent-override: 22.1%;
  line-gap-override: 0%;
  unicode-range: U+0-24F, U+300-36F, U+394, U+3BC, U+2000-209F, U+20AC, U+2122, U+2190-2199, U+2200-22FF, U+FEFF, U+FFFD;
}

:root {
  /* ----- Colour ----- */

  /* Surfaces. One canvas for every page: the public site, the application and the manual share it. */
  --lm-color-bg-canvas: light-dark(#f5f6f8, #1c1e23);
  --lm-color-bg-surface: light-dark(#ffffff, #24272d);
  --lm-color-bg-raised: light-dark(#ffffff, #2b2e35);
  --lm-color-bg-sunken: light-dark(#eef0f3, #18191d);
  --lm-color-bg-hover: light-dark(#eceef3, #2d3138);
  --lm-color-bg-selected: light-dark(#e6e8f8, #2c2f45);
  --lm-color-bg-accent: light-dark(#3d47b8, #525dcc);
  --lm-color-bg-accent-hover: light-dark(#2f3896, #4650bd);
  --lm-color-bg-accent-subtle: light-dark(#eceefb, #2c2f45);
  /* A translucent indigo wash for marks that sit on any surface (ticks, the pricing saving). */
  --lm-color-bg-accent-wash: light-dark(rgb(61 71 184 / 9%), rgb(169 177 242 / 12%));
  /* The solid indigo band that carries the published evidence on public pages. */
  --lm-color-bg-accent-deep: light-dark(#303a9b, #303779);
  --lm-color-bg-highlight: light-dark(#ffe48a, #d9bf6a);
  --lm-color-bg-tooltip: light-dark(#16191f, #33363e);
  --lm-color-bg-mat: light-dark(#e6e8ec, #2d3138);
  --lm-color-bg-lightbox: #16191f;
  /* The quiet indigo field behind whole windows and report sheets, as three stops of one gradient. */
  --lm-color-bg-field-1: light-dark(#e9ebf8, #2a2f52);
  --lm-color-bg-field-2: light-dark(#dfe2f3, #23263a);
  --lm-color-bg-field-3: light-dark(#eceef3, #1f2127);
  --lm-field: linear-gradient(160deg, var(--lm-color-bg-field-1) 0%, var(--lm-color-bg-field-2) 45%, var(--lm-color-bg-field-3) 100%);
  --ui-sidebar-bg: light-dark(#f0f1f4, #1f2126);
  --ui-header-bg: light-dark(#ffffff, #24272d);
  /* Suggestions (collection totals, editorial rules) speak in the accent, never in a status colour. */
  --ui-guidance-bg: light-dark(#eceefb, #2c2f45);
  --ui-guidance-fg: light-dark(#3a44b0, #a9b1f2);
  --ui-guidance-edge: light-dark(#a9aee3, #5a62a8);

  /* Ink: cool near-black in Day, soft off-white in Dusk. */
  --lm-color-fg-default: light-dark(#16191f, #e7e9ed);
  --lm-color-fg-body: light-dark(#2e333c, #c9cdd4);
  --lm-color-fg-muted: light-dark(#555c68, #a0a6b0);
  --lm-color-fg-subtle: light-dark(#5d6470, #979daa);
  --lm-color-fg-disabled: light-dark(#a3a8b2, #5f646e);
  --lm-color-fg-accent: light-dark(#3a44b0, #a9b1f2);
  --lm-color-fg-accent-hover: light-dark(#2f3896, #c3c9f7);
  --lm-color-fg-on-accent: #ffffff;
  --lm-color-fg-on-accent-muted: #dce0ff;
  --lm-color-fg-on-highlight: light-dark(#16191f, #1c1e23);
  --lm-color-fg-tooltip: light-dark(#f5f6f8, #e7e9ed);
  --lm-color-fg-on-lightbox: #eef0f3;

  /* Rules: hairlines between surfaces; a heavier rule that opens a ruled table or section; strong for field and
     button outlines (3:1 against the surface). */
  --lm-color-border-default: light-dark(#dfe2e8, #3a3e46);
  --lm-color-border-rule: light-dark(#c9ced6, #4a4f58);
  --lm-color-border-strong: light-dark(#858b97, #7c838f);
  --lm-color-border-accent: light-dark(#3d47b8, #8a93e8);
  --lm-color-border-field: light-dark(rgb(61 71 184 / 12%), rgb(255 255 255 / 7%));
  --ui-border-field: var(--lm-color-border-strong);
  --ui-scroll-shadow: light-dark(rgb(22 25 31 / 30%), rgb(231 233 237 / 25%));
  --lm-track: light-dark(#e6e8ec, #2d3138);

  --lm-color-focus-ring: light-dark(#4f5bd5, #a9b1f2);
  --lm-color-selection-bg: light-dark(#d9dcf5, #3a3f66);
  --lm-color-selection-fg: light-dark(#16191f, #e7e9ed);

  /* Status: green, amber and red mean Met, Undecided and Not met; each is paired with an icon or word.
     Information is the app speaking, so it takes the accent. */
  --lm-color-status-ok-fg: light-dark(#0a6b5c, #8ee0cf);
  --lm-color-status-ok-bg: light-dark(#e2f4ef, #1e3531);
  --lm-color-status-warn-fg: light-dark(#7d4a00, #e6b25a);
  --lm-color-status-warn-bg: light-dark(#fcefd6, #3a301d);
  --lm-color-status-fail-fg: light-dark(#c0302a, #f2857a);
  --lm-color-status-fail-bg: light-dark(#fdeceb, #3f2527);
  --lm-color-status-info-fg: var(--lm-color-fg-accent);
  --lm-color-status-info-bg: var(--lm-color-bg-accent-subtle);
  /* Solid fill for the Not met banner: failure is the loudest thing on a screen. */
  --ui-fail-solid: light-dark(#c0302a, #9e2c25);
  --ui-on-fail-solid: #ffffff;
  --ui-dot-ok: light-dark(#0f9a80, #62cdb8);
  --ui-dot-warn: light-dark(#b87d00, #d39c40);
  --ui-dot-fail: light-dark(#d83a2a, #e86a5f);
  --ui-dot-info: light-dark(#3d47b8, #8a93e8);
  --ui-dot-neutral: light-dark(#a3a8b2, #7c838f);
  --lm-color-scrim: light-dark(rgb(22 25 31 / 38%), rgb(12 13 16 / 58%));

  /* ----- Type -----
     Piazzolla (the report's title face) for headings, Archivo for every other role; values use Archivo's tabular,
     lining figures. */
  --lm-font-family-prose: "Archivo UI", "Archivo Fallback", "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Piazzolla Report", "Piazzolla Fallback", Georgia, serif;
  --lm-font-family-ui: "Archivo UI", "Archivo Fallback", "Lexend", system-ui, sans-serif;
  --lm-font-family-mono: "Archivo UI", "Archivo Fallback", "Lexend", system-ui, sans-serif;
  --lm-ui-weight: 400;
  --lm-font-size-2xs: 0.75rem;
  --lm-font-size-xs: 0.8125rem;
  --lm-font-size-sm: 0.875rem;
  --lm-font-size-md: 0.9375rem;
  --lm-font-size-base: 1rem;
  --lm-font-size-lg: 1.125rem;
  --lm-font-size-xl: 1.25rem;
  --lm-font-size-2xl: 1.5rem;
  --lm-font-size-3xl: 1.75rem;
  --lm-font-size-4xl: 2rem;
  /* The display tier, for public headlines: 76 px at 1920 and 44 px on a phone; 48 px for a home section. */
  --lm-font-size-display-1: clamp(2.75rem, 1.4rem + 3.4vw, 4.75rem);
  --lm-font-size-display-2: clamp(2rem, 1.3rem + 1.7vw, 3rem);
  --lm-leading-display-1: 1.02;
  --lm-leading-display-2: 1.06;
  --lm-leading-heading: 1.15;
  --lm-leading-body: 1.6;
  /* Piazzolla's optical sizes want little negative tracking; labels are never tracked. */
  --lm-tracking-display: -0.012em;
  --lm-tracking-heading: -0.01em;
  --lm-tracking-label: 0;
  --lm-type-display-1: 500 var(--lm-font-size-display-1) / var(--lm-leading-display-1) var(--lm-font-family-display);
  --lm-type-display-2: 500 var(--lm-font-size-display-2) / var(--lm-leading-display-2) var(--lm-font-family-display);
  --lm-type-h1: 600 var(--lm-font-size-4xl) / 1.1 var(--lm-font-family-display);
  --lm-type-h2: 500 var(--lm-font-size-2xl) / var(--lm-leading-heading) var(--lm-font-family-display);
  --lm-type-h3: 500 var(--lm-font-size-lg) / 1.2 var(--lm-font-family-display);
  --lm-type-h4: 500 var(--lm-font-size-base) / 1.25 var(--lm-font-family-display);
  --lm-type-body: 400 var(--lm-font-size-base) / var(--lm-leading-body) var(--lm-font-family-prose);
  --lm-type-small: 400 var(--lm-font-size-sm) / 1.5 var(--lm-font-family-ui);
  /* Sentence-case labels: sidebar sections, family names, footer headings, manual groups. */
  --lm-type-label: 600 var(--lm-font-size-2xs) / 1.4 var(--lm-font-family-ui);

  /* ----- Space: a 4 px base ----- */
  --lm-space-1: 0.25rem;
  --lm-space-2: 0.5rem;
  --lm-space-3: 0.75rem;
  --lm-space-4: 1rem;
  --lm-space-5: 1.5rem;
  --lm-space-6: 2rem;
  --lm-space-7: 3rem;
  --lm-space-8: 4rem;
  --lm-space-9: 6rem;
  /* Between the bands of a public page. */
  --lm-space-section: clamp(var(--lm-space-8), 7vw, var(--lm-space-9));

  /* ----- Corners: tight and quiet ----- */
  --lm-radius-control: 3px;
  --lm-radius-frame: 6px;
  --lm-radius-field: 12px;
  --lm-radius-xs: 2px;
  --lm-radius-sm: var(--lm-radius-control);
  --lm-radius-md: 4px;
  --lm-radius-lg: var(--lm-radius-frame);
  --lm-radius-card: var(--lm-radius-md);

  /* ----- Elevation: borders separate surfaces; shadows lift menus, dialogs, windows and paper ----- */
  --lm-paper-edge: light-dark(rgb(22 25 31 / 9%), rgb(0 0 0 / 32%));
  --lm-shadow-near: light-dark(rgb(22 25 31 / 5%), rgb(0 0 0 / 24%));
  --lm-shadow-far: light-dark(rgb(22 25 31 / 14%), rgb(0 0 0 / 48%));
  --lm-shadow-card: none;
  --lm-shadow-card-hover: none;
  --lm-shadow-popover: 0 1px 2px var(--lm-shadow-near), 0 12px 28px -10px var(--lm-shadow-far), 0 0 0 1px var(--lm-paper-edge);
  --lm-shadow-dialog: 0 2px 6px var(--lm-shadow-near), 0 24px 56px -18px var(--lm-shadow-far), 0 0 0 1px var(--lm-paper-edge);
  --lm-shadow-action: none;
  /* Near: a control or header resting on the page. Far: a whole window lying on the field. Popover: menus.
     Paper: a white report sheet, on either canvas. */
  --lm-elevation-near: 0 1px 2px var(--lm-shadow-near), 0 0 0 1px var(--lm-paper-edge);
  --lm-elevation-far: 0 1px 2px light-dark(rgb(22 25 31 / 8%), rgb(0 0 0 / 30%)),
    0 24px 48px -24px light-dark(rgb(33 38 80 / 30%), rgb(0 0 0 / 70%));
  --lm-elevation-popover: var(--lm-shadow-popover);
  --lm-elevation-paper: 0 1px 2px light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 40%)),
    0 16px 32px -16px light-dark(rgb(22 25 31 / 35%), rgb(0 0 0 / 70%));

  /* ----- Motion: two curves and five durations ----- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lm-duration-1: 120ms;
  --lm-duration-2: 180ms;
  --lm-duration-3: 240ms;
  --lm-duration-4: 320ms;
  --lm-duration-5: 440ms;
  --lm-motion-duration-fast: var(--lm-duration-1);
  --lm-motion-duration-base: var(--lm-duration-2);
  --lm-motion-duration-slow: var(--lm-duration-3);
  --lm-motion-easing-standard: var(--ease-out);
  --lm-motion-easing-enter: var(--ease-out);
  --lm-motion-easing-exit: var(--ease-out);

  /* ----- Buttons: one primary and one secondary everywhere ----- */
  --lm-button-height: var(--lm-density-control-height);
  --lm-button-padding-x: 0.875rem;
  --lm-button-weight: 600;
  --lm-button-press: scale(0.98);

  /* ----- Layout ----- */
  --ui-sidebar-width: 16.5rem;
  --ui-content-max: 88rem;
  --ui-gutter: 1rem;
  --lm-layout-topbar: 3.25rem;

  /* Density: compact (default) */
  --lm-density-control-height: 2.25rem;
  --lm-density-control-padding-x: 0.875rem;
  --lm-density-row-height: 2.25rem;
  --lm-density-cell-padding-y: 0.5rem;
  --lm-density-cell-padding-x: 0.75rem;
  --lm-density-panel-padding: 1.25rem;
  --lm-density-card-padding: 1rem;
  --lm-density-stack-gap: 0.75rem;
  --lm-density-section-gap: 1.25rem;

  /* Plots: the report's series in both themes. Blue observations, vermilion estimates, gray limits; never a status colour. */
  --plot-observation: light-dark(#0072b2, #56a8e0);
  --plot-estimate: light-dark(#d55e00, #f08a4b);
  --plot-limit: light-dark(#6b7280, #9aa1ad);
}

/* Select the lockup in the page, so an external image's colour-scheme handling cannot hide the wordmark. */
.brand-lockup {
  display: block;
  flex: none;
  width: auto;
  height: 2rem;
}
.brand-lockup img { display: block; width: auto; height: 100%; }
.brand-lockup .brand-dusk { display: none; }
:root[data-theme="dusk"] .brand-lockup .brand-day { display: none; }
:root[data-theme="dusk"] .brand-lockup .brand-dusk { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) .brand-lockup .brand-day { display: none; }
  :root:not([data-theme="day"]) .brand-lockup .brand-dusk { display: block; }
}

@media (min-width: 48rem) {
  :root {
    --ui-gutter: 1.5rem;
  }
}

@media (min-width: 90rem) {
  :root {
    --ui-gutter: 2rem;
  }
}

:root[data-density="comfortable"] {
  --lm-density-control-height: 2.625rem;
  --lm-density-row-height: 2.625rem;
  --lm-density-control-padding-x: 1rem;
  --lm-density-cell-padding-x: 1rem;
  --lm-density-card-padding: 1.375rem;
  --lm-density-stack-gap: 1rem;
  --lm-density-cell-padding-y: 0.6875rem;
  --lm-density-panel-padding: 1.625rem;
  --lm-density-section-gap: 1.75rem;
}

/* Legibility mode: Atkinson Hyperlegible Next first; values keep Archivo's tabular figures. */
:root[data-legibility] {
  --lm-font-family-prose: "Atkinson Hyperlegible Next", "Archivo UI", "Archivo Fallback", "Lexend", system-ui, sans-serif;
  --lm-font-family-display: "Atkinson Hyperlegible Next", "Archivo UI", "Archivo Fallback", "Lexend", system-ui, sans-serif;
  --lm-font-family-ui: "Atkinson Hyperlegible Next", "Archivo UI", "Archivo Fallback", "Lexend", system-ui, sans-serif;
}