/* CDS Command Centre v2 — Lavish command-centre visual runtime.
   The product deliberately uses the approved CDS navy / electric-blue interface shown in
   the ENG-716 Lavish presentation. EngineAI Paper / gold tokens do not belong in this app.
   Webfonts load from <link> tags in the page: a CSS @import is blocked by the shipped CSP. */

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(2rem, 3.8vw, 3.25rem);
  --fs-h2: clamp(1.65rem, 2.7vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-h3-lg: 1.6rem;
  --fs-body-lg: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.775rem;
  --fs-label: 0.7rem;
  --fs-label-mono: 0.625rem;
  --fw-light: 600;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-hero: 1.04;
  --lh-h2: 1.1;
  --lh-tight: 1.15;
  --lh-body: 1.7;
  --lh-body-snug: 1.6;
  --lh-body-card: 1.55;
  --tr-tightest: -0.05em;
  --tr-tight: -0.04em;
  --tr-snug: -0.02em;
  --tr-wide: 0.15em;
  --tr-wider: 0.2em;
  --tr-widest: 0.3em;
  --tr-mono: 0.22em;
  --radius-pill: 9999px;
  --radius-card-lg: 1rem;
  --radius-card: 0.9rem;
  --radius-panel: 0.75rem;
  --radius-input: 0.65rem;
  --radius-md: 0.625rem;
  --radius-sm: 0.45rem;
  --radius-xs: 0.375rem;
  --z-sticky: 80;
  /* The sticky global nav's two tiers (global-nav.css): 62px + 46px, and 56px + 40px at 900px and below.
     Sticky surfaces and jump targets sit below it. */
  --global-nav-height: 108px;
  --mobile-nav-height: calc(48px + 0.7rem + 1px + env(safe-area-inset-bottom, 0px));
  --z-modal: 100;

  /* App spacing scale: a 4px grid expressed once, then consumed semantically. */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-page-y: clamp(var(--space-4), 2vw, var(--space-8));
  --space-page-x: clamp(var(--space-4), 2.6vw, var(--space-10));
  --space-panel: clamp(var(--space-4), 1.6vw, var(--space-5));
  --measure-challenge-min: 17.5rem;
  --measure-challenge-max: 22.5rem;
  --measure-transcript-max: 24rem;

  /* Approved Lavish palette: navy chrome, electric-blue action, cool working canvas. */
  --v3-bg-canvas: #edf1f6;
  --v3-bg-chrome: #0c1729;
  --v3-bg-surface: #f7f9fc;
  --v3-bg-raised: #ffffff;
  --bg-primary: var(--v3-bg-canvas);
  --bg-elevated: var(--v3-bg-surface);
  --bg-surface: var(--v3-bg-raised);
  --bg-overlay: var(--v3-bg-raised);
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-opaque: #ffffff;
  --border-subtle: rgba(17, 32, 58, 0.1);
  --border-visible: rgba(17, 32, 58, 0.18);
  --border-strong: rgba(17, 32, 58, 0.3);
  --text-primary: #111827;
  --text-body: #344055;
  --text-secondary: #536178;
  --text-muted: #69758a;
  --accent: #2c5fe3;
  --accent-hover: #1f4fc8;
  --accent-muted: rgba(44, 95, 227, 0.14);
  --accent-text: #ffffff;
  --gold-24: rgba(44, 95, 227, 0.22);
  --gold-10: rgba(44, 95, 227, 0.08);
  --success: #177c72;
  --warning: #ad6c11;
  --error: #b4403d;
  --info: #2c5fe3;
  --success-24: rgba(58, 140, 87, 0.24);
  --success-10: rgba(58, 140, 87, 0.1);
  --warning-24: rgba(138, 87, 22, 0.24);
  --warning-10: rgba(138, 87, 22, 0.1);
  --error-24: rgba(184, 58, 58, 0.22);
  --error-10: rgba(184, 58, 58, 0.1);
  --info-24: rgba(47, 95, 184, 0.22);
  --info-10: rgba(47, 95, 184, 0.1);
  --stage-proposal: #2c5fe3;
  --stage-won: #177c72;
  --shadow-card: 0 12px 32px rgba(12, 23, 41, 0.09);
  --glass-bg: #ffffff;
  --glass-border: 1px solid rgba(17, 32, 58, 0.1);
  --glass-shadow: var(--shadow-card);
  --glass-bg-gold: linear-gradient(135deg, #101f37 0%, #172d50 68%, #254da6 100%);
  --glass-border-gold: 1px solid rgba(76, 126, 255, 0.35);
  --glass-shadow-gold: 0 14px 32px rgba(12, 23, 41, 0.2);
  --x-panel-bg: var(--v3-bg-raised);
  --x-panel-border: rgba(17, 32, 58, 0.08);
  --x-panel-shadow: 0 1px 2px rgba(12, 23, 41, 0.05), 0 14px 32px -24px rgba(12, 23, 41, 0.3);
  --x-hairline: rgba(17, 32, 58, 0.08);
  --x-hairline-strong: rgba(17, 32, 58, 0.16);
  --x-brass: var(--accent);
  --x-brass-hi: var(--accent-hover);
  --x-brass-ink: var(--accent-text);
  --x-brass-tint: rgba(44, 95, 227, 0.07);
  --x-lamp-ok: var(--success);
  --x-lamp-warn: var(--warning);
  --x-lamp-err: var(--error);
  --x-lamp-info: var(--info);

  /* ENG-1225: semantic surface tokens so no stylesheet hand-picks a colour.
     Chrome = the navy sidebar/banner family; ink = text colour on a tinted status chip. */
  --chrome-bg: var(--v3-bg-chrome);
  --chrome-gradient: linear-gradient(180deg, #0c1729 0%, #101c31 100%);
  --chrome-hover: rgba(255, 255, 255, 0.06);
  --chrome-border: rgba(174, 187, 208, 0.2);
  --chrome-border-strong: rgba(76, 126, 255, 0.35);
  --chrome-raised: #13233e;
  --chrome-accent-text: #8fb2ff;
  --chrome-muted-text: #8ea0bd;
  --chrome-text: #f6f8fc;
  --chrome-selected-pill: rgba(255, 255, 255, 0.22);
  --hero-gradient: linear-gradient(135deg, #0c1729 0%, #13233e 55%, #254da6 130%);
  --hero-glow: radial-gradient(circle, rgba(76, 126, 255, 0.32), transparent 70%);
  --hero-metric-bg: rgba(255, 255, 255, 0.07);
  --hero-metric-border: rgba(255, 255, 255, 0.14);
  --hero-metric-text: #bfd0f5;
  --ink-info: #1e46b3;
  --ink-warning: #7a4a0a;
  --ink-error: #8f2b28;
  --ink-success: #0f5f58;
  --chip-info-bg: var(--info-10);
  --chip-info-border: var(--info-24);
  --chip-warning-bg: var(--warning-10);
  --chip-warning-border: var(--warning-24);
  --chip-error-bg: var(--error-10);
  --chip-error-border: var(--error-24);
  --chip-success-bg: var(--success-10);
  --chip-success-border: var(--success-24);
  --chip-neutral-bg: var(--v3-bg-surface);
  /* ENG-1249 redesign pass: names that existed only inside `var(… , fallback)` chains in
     approved-structure.css, defined at the value they already resolved to. */
  --radius-control: var(--radius-panel);
  --bg-selected: var(--bg-elevated);

  /* ENG-1405 lift: the last 30 hand-picked colours, moved out of `redesign.css` and
     `full-model-ledger.css` at their **exact current values**. Nothing renders differently —
     this is the structural half of ENG-1405, and it is deliberately not the design half.

     Several of these are near-misses of a token that already exists, noted inline. Adopting
     the neighbour would shift the colour by a hair, which is a design call with a visible
     result and is not made here. What this does is make that call a five-minute decision
     instead of an archaeology project: the whole palette is now in one file, and the gate in
     `eng-1249-stylesheet-tokens.test.mjs` is at zero, so the next hand-picked colour fails
     CI instead of joining a debt list. */

  /* The navy spotlight, readiness track, quote health and pulse summary all paint on
     `--chrome-gradient`, and each picked its own text ramp. */
  --on-navy-body: #eef3ff;
  --on-navy-emphasis: #ffffff;
  --on-navy-secondary: #c9d5e8;        /* near-miss of --hero-metric-text #bfd0f5 */
  --on-navy-fill: rgba(255, 255, 255, 0.08);       /* near-miss of --hero-metric-bg 0.07 */
  --on-navy-fill-raised: rgba(255, 255, 255, 0.1);
  --on-navy-fill-track: rgba(255, 255, 255, 0.16);
  --on-navy-border: rgba(255, 255, 255, 0.12);
  --on-navy-border-strong: rgba(255, 255, 255, 0.24);  /* near-miss of --chrome-selected-pill 0.22 */
  /* The darkest navy, which until now existed only inside --chrome-gradient's stops. */
  --navy-solid: #0c1729;

  /* Handover zone: the one dashed-border surface in the product. */
  --handover-bg: #f7f9fc;
  --handover-border: #7d96c7;

  /* Mobile top bar. Its background is --bg-card-opaque, which already held #ffffff. */
  --bar-border: rgba(15, 23, 42, 0.1);   /* near-miss of --border-subtle rgba(17,32,58,0.1) */
  --bar-muted-text: #64748b;             /* near-miss of --text-muted #69758a */

  /* Full-model ledger summary, on --v3-bg-chrome. */
  --ledger-text: #f4f7fb;                /* near-miss of --chrome-text #f6f8fc */
  --ledger-secondary: rgba(244, 247, 251, 0.72);
  --ledger-muted: rgba(244, 247, 251, 0.62);

  --chip-neutral-border: var(--border-visible);
  --accent-ring: rgba(44, 95, 227, 0.22);
  --accent-shadow: 0 8px 18px rgba(44, 95, 227, 0.22);
  --focus-ring: 0 0 0 3px var(--accent-ring);
  --fs-figure: 1.75rem;
  --fs-figure-sm: 1.35rem;
  --fs-price: clamp(1.6rem, 2.4vw, 2.1rem);

  /* Compatibility aliases for the mounted experience. */
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --brand-primary: #13233e;
  --brand-primary-dark: #0c1729;
  --brand-accent: var(--accent);
  --brand-accent-dark: var(--accent-hover);
  --brand-accent-subtle: var(--gold-10);
  --brand-mint-subtle: var(--x-brass-tint);
  --brand-glow: var(--gold-24);
  --bg-page: var(--bg-primary);
  --bg-page-accent: radial-gradient(900px 360px at 82% -10%, rgba(44, 95, 227, 0.1), transparent 55%), var(--bg-primary);
  --bg-sidebar: var(--v3-bg-chrome);
  --bg-sidebar-elevated: var(--v3-bg-surface);
  --text-caption: var(--text-secondary);
  --text-on-dark: #f6f8fc;
  --text-on-dark-muted: #aebbd0;
  --border: var(--border-subtle);
  --success-bg: var(--success-10);
  --warning-bg: var(--warning-10);
  --error-bg: var(--error-10);
  --info-bg: var(--info-10);
  --stage: var(--stage-proposal);
  --stage-bg: var(--info-10);
  --status-danger: var(--x-lamp-err);
  --status-ok: var(--x-lamp-ok);
  --status-warn: var(--x-lamp-warn);
  --radius: var(--radius-panel);
  --shadow: var(--x-panel-shadow);
  --shadow-lg: var(--shadow-card);
  --touch: 44px;
  --space: 4px;

  /* Motion: short ease-out enters only. A working screen never bounces. */
  --motion-fast: 120ms;
  --motion-base: 150ms;
  --motion-slow: 180ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* Elevation ladder: flush surface, raised card, floating panel. */
  --elevation-1: 0 1px 2px rgba(12, 23, 41, 0.06);
  --elevation-2: var(--x-panel-shadow);
  --elevation-3: 0 2px 4px rgba(12, 23, 41, 0.06), 0 24px 56px -28px rgba(12, 23, 41, 0.45);

  --density-pad: 1.1rem;
  --density-gap: 1rem;
  --density-row: 0.9rem;

  /* ENG-1507: design language v2 (DESIGN-LANGUAGE.md, approved 24 Sep 2026). Only the `dl-`
     components in design-language.css read these, so no current page changes.
     Where a canvas colour failed WCAG AA under its text, the token is the nearest shade that
     passes and the canvas value is noted. eng-1507-design-language.test.mjs holds the pairs. */
  --panel-shadow: 0 1px 2px rgba(12, 23, 41, 0.05), 0 16px 40px rgba(12, 23, 41, 0.08);
  --card-shadow: 0 1px 2px rgba(12, 23, 41, 0.06), 0 6px 14px rgba(12, 23, 41, 0.06);
  --raised-shadow: 0 2px 6px rgba(12, 23, 41, 0.14), 0 1px 1px rgba(12, 23, 41, 0.06);
  --tray-bg: #dde3ec;
  --tray-shadow: inset 0 1px 2px rgba(12, 23, 41, 0.08);
  --frost: rgba(255, 255, 255, 0.6);
  --frost-strong: rgba(255, 255, 255, 0.7);
  --accent-soft: #e3ebff;
  --accent-ink: #1f3f99;
  --accent-lift: 0 6px 14px rgba(44, 95, 227, 0.28);
  --accent-glow: 0 10px 24px rgba(44, 95, 227, 0.45);
  --text-slate: #475569;
  --neutral-soft: #f1f4f9;
  --on-solid: #ffffff;

  --page-hero-start: #0b1528;
  --page-hero-mid: #10213f;
  --page-hero-end: #173572;
  --page-hero-glow: rgba(64, 110, 230, 0.55);
  --page-hero-glow-fade: rgba(64, 110, 230, 0);
  --page-hero-bg: radial-gradient(900px 420px at 88% 110%, var(--page-hero-glow), var(--page-hero-glow-fade) 70%), linear-gradient(135deg, var(--page-hero-start) 0%, var(--page-hero-mid) 55%, var(--page-hero-end) 100%);
  --page-hero-shadow: 0 24px 48px rgba(12, 23, 41, 0.22);
  --on-navy-gold: #ffb547;
  --on-navy-gold-text: #ffcf85;
  --on-navy-gold-soft: #ffdca6;
  --on-navy-gold-border: rgba(255, 196, 110, 0.45);
  --on-navy-gold-fill: rgba(255, 181, 71, 0.12);
  --on-navy-gold-halo: rgba(255, 181, 71, 0.2);
  --on-gold-ink: #1f1405;

  --stage-draft: #475569;
  --stage-draft-tint: #f1f4f8;
  --stage-draft-bright: #94a3b8;
  --stage-in-review: #6d4ad8;
  --stage-in-review-tint: #f1edfd;
  --stage-in-review-bright: #9b7bf0;
  --stage-approved: #a4670f;            /* canvas #c27a12: white text 3.45:1 */
  --stage-approved-tint: #fdf3e2;
  --stage-approved-bright: #f0a93b;
  --stage-issued: var(--accent);
  --stage-issued-tint: #eaf0ff;
  --stage-issued-bright: #5b8cff;
  --stage-outcome: #14857a;
  --stage-outcome-tint: #e6f5f1;
  --stage-outcome-bright: #34b3a0;
  --project-awaiting-setup: var(--status-won);
  --project-awaiting-setup-tint: #e7f6ef;
  --project-awaiting-setup-bright: #5fd3a0;

  --status-won: #1a855b;                /* canvas #1f9d6b: white text 3.45:1 */
  --status-won-soft: #dcf3e8;
  --status-won-ink: #0f6b4a;
  --status-lost: #c2413d;
  --status-lost-soft: #fbe4e3;
  --status-lost-ink: #9b2f2c;
  --status-lost-tint: #fdf0ef;
  --status-lost-bright: #e2716d;
  --status-expired: #64748b;
  --status-expired-soft: #eef1f6;
  --status-expired-ink: var(--text-slate);
  --status-expired-tint: #eef1f5;
  --status-expired-bright: #7d8ca3;

  --attention-text: var(--ink-warning);
  --attention-chip: #fdefd6;
  --attention-strong: #a8650d;          /* canvas #b86f0e: white text 3.95:1 */
  --attention-row: #fff8ec;
  --attention-outline: #f0b54f;
  --attention-lift: 0 8px 18px rgba(173, 108, 17, 0.18);
  --attention-band: linear-gradient(90deg, var(--attention-chip) 0%, var(--attention-row) 45%, #ffffff 85%);
  --attention-band-border: rgba(173, 108, 17, 0.16);
  --success-soft: #dff3ef;
  --coming: var(--stage-in-review);
  --coming-soft: #efeafd;
  --coming-ink: #4b2fa8;
  --coming-band: linear-gradient(90deg, #ece5fd 0%, #f7f4ff 45%, #ffffff 85%);
  --coming-band-border: rgba(109, 74, 216, 0.14);

  /* Every `dl-tone-*` class below sets these; an untoned component reads neutral. */
  --tone-solid: var(--text-slate);
  --tone-tint: var(--stage-draft-tint);
  --tone-bright: var(--stage-draft-bright);
  --tone-soft: var(--neutral-soft);
  --tone-ink: var(--text-secondary);
  --tone-band: none;
  --tone-band-border: transparent;

  --fs-display: clamp(2.5rem, 4.4vw, 3.75rem);
  --fs-headline: 2.75rem;
  --fs-stat: 2.125rem;
  --fs-panel-title: 1.375rem;
  --fs-lede: 1.125rem;
  --fs-meta: 0.8125rem;
  --fw-heavy: 800;
  --lh-display: 1.02;
  --tr-display: -0.03em;
  --radius-section: 1.375rem;
  --radius-tile: 1.125rem;
  --radius-badge: 0.8125rem;
  --radius-icon: 0.5625rem;
  --radius-chip: 0.5rem;
}

:root[data-density="compact"] {
  --density-pad: 0.8rem;
  --density-gap: 0.65rem;
  --density-row: 0.6rem;
}

/* ENG-1507 tone registry: each domain state picks its palette once, keyed by the ids the
   renderers take (`in_review` is `.dl-tone-in-review`). A selector list means "same colour
   by design": a project in setup is violet because a quote in review is. */
.dl-tone-draft, .dl-tone-closed { --tone-solid: var(--stage-draft); --tone-tint: var(--stage-draft-tint); --tone-bright: var(--stage-draft-bright); --tone-soft: var(--status-expired-soft); --tone-ink: var(--text-slate); }
.dl-tone-in-review, .dl-tone-project-setup { --tone-solid: var(--stage-in-review); --tone-tint: var(--stage-in-review-tint); --tone-bright: var(--stage-in-review-bright); --tone-soft: var(--coming-soft); --tone-ink: var(--coming-ink); }
.dl-tone-approved-for-issue { --tone-solid: var(--stage-approved); --tone-tint: var(--stage-approved-tint); --tone-bright: var(--stage-approved-bright); --tone-soft: var(--attention-chip); --tone-ink: var(--attention-text); }
.dl-tone-issued, .dl-tone-active-delivery, .dl-tone-live { --tone-solid: var(--stage-issued); --tone-tint: var(--stage-issued-tint); --tone-bright: var(--stage-issued-bright); --tone-soft: var(--accent-soft); --tone-ink: var(--accent-ink); }
.dl-tone-outcome { --tone-solid: var(--stage-outcome); --tone-tint: var(--stage-outcome-tint); --tone-bright: var(--stage-outcome-bright); --tone-soft: var(--success-soft); --tone-ink: var(--ink-success); }
.dl-tone-awaiting-setup, .dl-tone-won { --tone-solid: var(--project-awaiting-setup); --tone-tint: var(--project-awaiting-setup-tint); --tone-bright: var(--project-awaiting-setup-bright); --tone-soft: var(--status-won-soft); --tone-ink: var(--status-won-ink); }
.dl-tone-lost { --tone-solid: var(--status-lost); --tone-tint: var(--status-lost-tint); --tone-bright: var(--status-lost-bright); --tone-soft: var(--status-lost-soft); --tone-ink: var(--status-lost-ink); }
.dl-tone-expired { --tone-solid: var(--status-expired); --tone-tint: var(--status-expired-tint); --tone-bright: var(--status-expired-bright); --tone-soft: var(--status-expired-soft); --tone-ink: var(--status-expired-ink); }
.dl-tone-attention { --tone-solid: var(--attention-strong); --tone-tint: var(--attention-row); --tone-bright: var(--attention-outline); --tone-soft: var(--attention-chip); --tone-ink: var(--attention-text); --tone-band: var(--attention-band); --tone-band-border: var(--attention-band-border); }
.dl-tone-coming { --tone-solid: var(--coming); --tone-tint: var(--coming-soft); --tone-bright: var(--stage-in-review-bright); --tone-soft: var(--coming-soft); --tone-ink: var(--coming-ink); --tone-band: var(--coming-band); --tone-band-border: var(--coming-band-border); }
.dl-tone-healthy { --tone-solid: var(--success); --tone-tint: var(--success-soft); --tone-bright: var(--stage-outcome-bright); --tone-soft: var(--success-soft); --tone-ink: var(--ink-success); }
.dl-tone-neutral { --tone-solid: var(--text-secondary); --tone-tint: var(--neutral-soft); --tone-bright: var(--stage-draft-bright); --tone-soft: var(--neutral-soft); --tone-ink: var(--text-secondary); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg-primary);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body-snug);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}
a { color: var(--accent-hover); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: var(--z-modal); padding: 0.5rem 1rem; background: var(--accent); color: var(--accent-text); }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
@keyframes cds-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cds-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
[aria-busy="true"] { cursor: progress; }
.skeleton-line {
  display: block;
  height: 0.75rem;
  margin: 0.4rem 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(17, 32, 58, 0.09) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: cds-shimmer 1.4s linear infinite;
}
.skeleton-line-a { width: 60%; }
.skeleton-line-b { width: 35%; }
.skeleton-line-c { width: 80%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 900px) {
  :root { --global-nav-height: 96px; }
}

/* A jump lands below the sticky global nav, never under it. */
html { scroll-padding-top: calc(var(--global-nav-height) + var(--space-2)); }