/* ==========================================================================
   amthalstatus — theme.css
   The visual foundation. Owns: @font-face, every design token in CONTRACT §1,
   the reset, and the shared primitive classes. Nothing here knows about the
   status page's layout; app.css / admin.css own layout and consume these names.

   Token contract (do not rename — other modules read these):
     brand primitives · --st-{ok,degraded,partial,major,maint,unknown}[-soft|-border|-text]
     surfaces/text · type scale · --s-* · --r-* · --shadow-* · --ring · --e-* · --d-*

   Theme resolution follows the three-state rule:
     1. bare :root                                   -> DARK (the default look)
     2. @media (prefers-color-scheme: light) guarded  -> light for "system" users
        as :root:not([data-theme="dark"])
     3. :root[data-theme="light"] / [data-theme="dark"] -> the toggle wins, both ways
   Order matters: the explicit [data-theme] blocks come last so an explicit
   choice always beats the media query at equal specificity.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ---
   Self-hosted woff2 only (CSP font-src 'self'). Catamaran and JetBrains Mono
   are variable (fvar/HVAR present) so one file covers the whole weight axis;
   GE Dinar One ships four static weights. Latin is split from latin-ext so the
   ~16 KB extended subset is only fetched when a page actually uses it, and the
   Arabic face is pinned to the Arabic ranges — that is what makes [dir=rtl]
   text render in GE Dinar One while latin glyphs still come from Catamaran.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/catamaran-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/catamaran-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'GE Dinar One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/gedinarone-regular.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'GE Dinar One';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/gedinarone-medium.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'GE Dinar One';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/gedinarone-semibold.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'GE Dinar One';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/gedinarone-bold.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* ------------------------------------------------- invariant tokens ------
   Values that do not change between themes: brand primitives, type, space,
   radius, motion, and the inline icon/noise data URIs.
   -------------------------------------------------------------------------- */

:root {
  /* Brand primitives — immutable, lifted from amthalgroup.com production CSS. */
  --navy-950: #080f2b;
  --navy-900: #0b1436;
  --navy-800: #121e4c;   /* BRAND PRIMARY */
  --navy-700: #1b2b63;
  --navy-600: #26397d;
  --slate-500: #50607f;
  --slate-400: #7289b8;
  --sky-400: #67caff;
  --crimson-500: #e6335a; /* BRAND ACCENT */
  --paper-50: #f5faff;
  --ink-body: #55576d;    /* brand --bodyColor */

  /* Type */
  --font-display: 'Catamaran', system-ui, sans-serif;
  --font-ui: 'Catamaran', 'GE Dinar One', system-ui, sans-serif;
  --font-ar: 'GE Dinar One', 'Catamaran', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-hero: clamp(2.25rem, 5.5vw, 4rem);
  --fs-h1: clamp(1.6rem, 3.2vw, 2.35rem);
  --fs-h2: clamp(1.2rem, 1.9vw, 1.5rem);
  --fs-h3: 1.0625rem;
  --fs-body: .9375rem;
  --fs-sm: .8125rem;
  --fs-xs: .75rem;
  --fs-micro: .6875rem;

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --tracking-tight: -.02em;
  --tracking-wide: .08em;

  /* Space */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Motion */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 140ms;
  --d-med: 260ms;
  --d-slow: 420ms;
  --d-xslow: 720ms;

  /* Physical-motion distances. The reduced-motion block zeroes these, which is
     how presses/lifts/entrances lose their transforms without !important wars. */
  --lift: -1px;
  --press: .5px;
  --reveal-shift: 14px;

  /* Direction multiplier: +1 in LTR, -1 in RTL. Multiply any horizontal
     translate or icon scale by this instead of writing [dir=rtl] rules. */
  --flip: 1;

  --blur-glass: 16px;

  /* Fixed 3px sky focus ring — the one interaction affordance that never varies. */
  --ring: 0 0 0 3px color-mix(in oklab, var(--sky-400) 35%, transparent);

  /* Cheap fractal-noise tile. Inlined as a data: URI so it costs no request and
     no decode of a bitmap; 140px tile repeats invisibly. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Monochrome glyphs used as masks so they inherit theme colours. */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  --icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- DARK (default) --- */

:root {
  color-scheme: dark;

  /* Surfaces / text */
  --bg: #070d24;
  --bg-2: #0a1130;
  --surface: color-mix(in oklab, #fff 3%, transparent);
  --surface-2: color-mix(in oklab, #fff 5.5%, transparent);
  --surface-3: color-mix(in oklab, #fff 8.5%, transparent);
  --surface-hover: color-mix(in oklab, #fff 7%, transparent);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .17);
  --border-focus: var(--sky-400);
  --text: #eaf0ff;
  --text-2: #a8b6d9;
  --text-3: #6f80a8;
  --text-inverse: #080f2b;
  --overlay: color-mix(in oklab, #04081c 74%, transparent);
  --grain-opacity: .04;
  --link: var(--sky-400);
  --link-hover: color-mix(in oklab, var(--sky-400) 82%, #fff);

  /* Elevation — navy-tinted, never neutral black, so shadows sit in the palette. */
  --shadow-1: 0 1px 2px rgba(8, 15, 43, .55), 0 2px 4px rgba(8, 15, 43, .34);
  --shadow-2: 0 2px 6px rgba(8, 15, 43, .45), 0 12px 28px -8px rgba(8, 15, 43, .56);
  --shadow-3: 0 8px 18px rgba(8, 15, 43, .5), 0 32px 64px -16px rgba(8, 15, 43, .72);

  /* Status families. The mark is the source-of-truth hex; soft/border are
     color-mix tints of it so a rebrand only touches one value per family. */
  --st-ok: #0fb981;
  --st-ok-soft: color-mix(in oklab, #0fb981 15%, transparent);
  --st-ok-border: color-mix(in oklab, #0fb981 40%, transparent);
  --st-ok-text: #34d99b;

  --st-degraded: #f0a62a;
  --st-degraded-soft: color-mix(in oklab, #f0a62a 15%, transparent);
  --st-degraded-border: color-mix(in oklab, #f0a62a 40%, transparent);
  --st-degraded-text: #f7c164;

  --st-partial: #fb7a3c;
  --st-partial-soft: color-mix(in oklab, #fb7a3c 15%, transparent);
  --st-partial-border: color-mix(in oklab, #fb7a3c 40%, transparent);
  --st-partial-text: #ffa172;

  --st-major: #f2415f;
  --st-major-soft: color-mix(in oklab, #f2415f 16%, transparent);
  --st-major-border: color-mix(in oklab, #f2415f 44%, transparent);
  --st-major-text: #ff8698;

  --st-maint: #5bc0f8;
  --st-maint-soft: color-mix(in oklab, #5bc0f8 15%, transparent);
  --st-maint-border: color-mix(in oklab, #5bc0f8 40%, transparent);
  --st-maint-text: #92d8fb;

  --st-unknown: #7289b8;
  --st-unknown-soft: color-mix(in oklab, #7289b8 16%, transparent);
  --st-unknown-border: color-mix(in oklab, #7289b8 38%, transparent);
  --st-unknown-text: #a8b6d9;
}

/* --------------------------------- LIGHT for "system" users (no override) --- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #f5faff;
    --bg-2: #eaf1fb;
    --surface: #fff;
    --surface-2: #f7fafe;
    --surface-3: #edf3fc;
    --surface-hover: #f0f5fd;
    --border: rgba(18, 30, 76, .10);
    --border-strong: rgba(18, 30, 76, .22);
    --border-focus: color-mix(in oklab, var(--sky-400) 62%, var(--navy-800));
    --text: #121e4c;
    --text-2: #55576d;
    --text-3: #68738e; /* contract lists #7f8aa6 (3.45:1 on #fff); darkened to clear the 4.5:1 floor */
    --text-inverse: #f5faff;
    --overlay: color-mix(in oklab, var(--navy-950) 46%, transparent);
    --grain-opacity: .028;
    --link: #0b6fa8;
    --link-hover: #08527d;

    --shadow-1: 0 1px 2px rgba(18, 30, 76, .05), 0 1px 3px rgba(18, 30, 76, .06);
    --shadow-2: 0 4px 10px rgba(18, 30, 76, .06), 0 14px 30px -10px rgba(18, 30, 76, .12);
    --shadow-3: 0 10px 24px rgba(18, 30, 76, .09), 0 34px 66px -18px rgba(18, 30, 76, .18);

    --st-ok: #0d9d6e;
    --st-ok-soft: color-mix(in oklab, #0d9d6e 11%, transparent);
    --st-ok-border: color-mix(in oklab, #0d9d6e 34%, transparent);
    --st-ok-text: #077a53; /* contract lists #0a8f63 (4.10:1 on #fff); darkened to clear 4.5:1 on --surface and on --st-ok-soft */

    --st-degraded: #c47a0c;
    --st-degraded-soft: color-mix(in oklab, #c47a0c 12%, transparent);
    --st-degraded-border: color-mix(in oklab, #c47a0c 34%, transparent);
    --st-degraded-text: #96620a;

    --st-partial: #e05f22;
    --st-partial-soft: color-mix(in oklab, #e05f22 11%, transparent);
    --st-partial-border: color-mix(in oklab, #e05f22 32%, transparent);
    --st-partial-text: #c1440e;

    --st-major: #e6335a;
    --st-major-soft: color-mix(in oklab, #e6335a 11%, transparent);
    --st-major-border: color-mix(in oklab, #e6335a 34%, transparent);
    --st-major-text: #c8103a;

    --st-maint: #1f93d6;
    --st-maint-soft: color-mix(in oklab, #1f93d6 11%, transparent);
    --st-maint-border: color-mix(in oklab, #1f93d6 32%, transparent);
    --st-maint-text: #0b6fa8;

    --st-unknown: #66789c;
    --st-unknown-soft: color-mix(in oklab, #66789c 11%, transparent);
    --st-unknown-border: color-mix(in oklab, #66789c 30%, transparent);
    --st-unknown-text: #50607f;
  }
}

/* ------------------------------------------- LIGHT, explicitly chosen ------ */

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5faff;
  --bg-2: #eaf1fb;
  --surface: #fff;
  --surface-2: #f7fafe;
  --surface-3: #edf3fc;
  --surface-hover: #f0f5fd;
  --border: rgba(18, 30, 76, .10);
  --border-strong: rgba(18, 30, 76, .22);
  --border-focus: color-mix(in oklab, var(--sky-400) 62%, var(--navy-800));
  --text: #121e4c;
  --text-2: #55576d;
  --text-3: #68738e; /* contract lists #7f8aa6 (3.45:1 on #fff); darkened to clear the 4.5:1 floor */
  --text-inverse: #f5faff;
  --overlay: color-mix(in oklab, var(--navy-950) 46%, transparent);
  --grain-opacity: .028;
  --link: #0b6fa8;
  --link-hover: #08527d;

  --shadow-1: 0 1px 2px rgba(18, 30, 76, .05), 0 1px 3px rgba(18, 30, 76, .06);
  --shadow-2: 0 4px 10px rgba(18, 30, 76, .06), 0 14px 30px -10px rgba(18, 30, 76, .12);
  --shadow-3: 0 10px 24px rgba(18, 30, 76, .09), 0 34px 66px -18px rgba(18, 30, 76, .18);

  --st-ok: #0d9d6e;
  --st-ok-soft: color-mix(in oklab, #0d9d6e 11%, transparent);
  --st-ok-border: color-mix(in oklab, #0d9d6e 34%, transparent);
  --st-ok-text: #077a53; /* contract lists #0a8f63 (4.10:1 on #fff); darkened to clear 4.5:1 on --surface and on --st-ok-soft */

  --st-degraded: #c47a0c;
  --st-degraded-soft: color-mix(in oklab, #c47a0c 12%, transparent);
  --st-degraded-border: color-mix(in oklab, #c47a0c 34%, transparent);
  --st-degraded-text: #96620a;

  --st-partial: #e05f22;
  --st-partial-soft: color-mix(in oklab, #e05f22 11%, transparent);
  --st-partial-border: color-mix(in oklab, #e05f22 32%, transparent);
  --st-partial-text: #c1440e;

  --st-major: #e6335a;
  --st-major-soft: color-mix(in oklab, #e6335a 11%, transparent);
  --st-major-border: color-mix(in oklab, #e6335a 34%, transparent);
  --st-major-text: #c8103a;

  --st-maint: #1f93d6;
  --st-maint-soft: color-mix(in oklab, #1f93d6 11%, transparent);
  --st-maint-border: color-mix(in oklab, #1f93d6 32%, transparent);
  --st-maint-text: #0b6fa8;

  --st-unknown: #66789c;
  --st-unknown-soft: color-mix(in oklab, #66789c 11%, transparent);
  --st-unknown-border: color-mix(in oklab, #66789c 30%, transparent);
  --st-unknown-text: #50607f;
}

/* -------------------------------------------- DARK, explicitly chosen ------
   Must come after the light blocks: equal specificity, so source order is what
   lets the toggle win when the OS is set to light.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070d24;
  --bg-2: #0a1130;
  --surface: color-mix(in oklab, #fff 3%, transparent);
  --surface-2: color-mix(in oklab, #fff 5.5%, transparent);
  --surface-3: color-mix(in oklab, #fff 8.5%, transparent);
  --surface-hover: color-mix(in oklab, #fff 7%, transparent);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .17);
  --border-focus: var(--sky-400);
  --text: #eaf0ff;
  --text-2: #a8b6d9;
  --text-3: #6f80a8;
  --text-inverse: #080f2b;
  --overlay: color-mix(in oklab, #04081c 74%, transparent);
  --grain-opacity: .04;
  --link: var(--sky-400);
  --link-hover: color-mix(in oklab, var(--sky-400) 82%, #fff);

  --shadow-1: 0 1px 2px rgba(8, 15, 43, .55), 0 2px 4px rgba(8, 15, 43, .34);
  --shadow-2: 0 2px 6px rgba(8, 15, 43, .45), 0 12px 28px -8px rgba(8, 15, 43, .56);
  --shadow-3: 0 8px 18px rgba(8, 15, 43, .5), 0 32px 64px -16px rgba(8, 15, 43, .72);

  --st-ok: #0fb981;
  --st-ok-soft: color-mix(in oklab, #0fb981 15%, transparent);
  --st-ok-border: color-mix(in oklab, #0fb981 40%, transparent);
  --st-ok-text: #34d99b;

  --st-degraded: #f0a62a;
  --st-degraded-soft: color-mix(in oklab, #f0a62a 15%, transparent);
  --st-degraded-border: color-mix(in oklab, #f0a62a 40%, transparent);
  --st-degraded-text: #f7c164;

  --st-partial: #fb7a3c;
  --st-partial-soft: color-mix(in oklab, #fb7a3c 15%, transparent);
  --st-partial-border: color-mix(in oklab, #fb7a3c 40%, transparent);
  --st-partial-text: #ffa172;

  --st-major: #f2415f;
  --st-major-soft: color-mix(in oklab, #f2415f 16%, transparent);
  --st-major-border: color-mix(in oklab, #f2415f 44%, transparent);
  --st-major-text: #ff8698;

  --st-maint: #5bc0f8;
  --st-maint-soft: color-mix(in oklab, #5bc0f8 15%, transparent);
  --st-maint-border: color-mix(in oklab, #5bc0f8 40%, transparent);
  --st-maint-text: #92d8fb;

  --st-unknown: #7289b8;
  --st-unknown-soft: color-mix(in oklab, #7289b8 16%, transparent);
  --st-unknown-border: color-mix(in oklab, #7289b8 38%, transparent);
  --st-unknown-text: #a8b6d9;
}

/* ------------------------------------------------ status context alias ----
   Extra (not required by §1, additive): put data-overall="<page state>" or
   data-state="<monitor state>" on any element and its subtree gets --st-now*
   pointing at that family. Lets the halo, aurora and service cards tint
   themselves with one attribute instead of six class branches. Values are the
   exact §2 vocabularies.
   -------------------------------------------------------------------------- */

:root {
  --st-now: var(--st-unknown);
  --st-now-soft: var(--st-unknown-soft);
  --st-now-border: var(--st-unknown-border);
  --st-now-text: var(--st-unknown-text);
}
[data-overall="operational"], [data-state="up"] {
  --st-now: var(--st-ok); --st-now-soft: var(--st-ok-soft);
  --st-now-border: var(--st-ok-border); --st-now-text: var(--st-ok-text);
}
[data-overall="degraded"], [data-state="degraded"] {
  --st-now: var(--st-degraded); --st-now-soft: var(--st-degraded-soft);
  --st-now-border: var(--st-degraded-border); --st-now-text: var(--st-degraded-text);
}
[data-overall="partial_outage"] {
  --st-now: var(--st-partial); --st-now-soft: var(--st-partial-soft);
  --st-now-border: var(--st-partial-border); --st-now-text: var(--st-partial-text);
}
[data-overall="major_outage"], [data-state="down"] {
  --st-now: var(--st-major); --st-now-soft: var(--st-major-soft);
  --st-now-border: var(--st-major-border); --st-now-text: var(--st-major-text);
}
[data-overall="maintenance"] {
  --st-now: var(--st-maint); --st-now-soft: var(--st-maint-soft);
  --st-now-border: var(--st-maint-border); --st-now-text: var(--st-maint-text);
}
[data-state="paused"], [data-state="unknown"] {
  --st-now: var(--st-unknown); --st-now-soft: var(--st-unknown-soft);
  --st-now-border: var(--st-unknown-border); --st-now-text: var(--st-unknown-text);
}

/* =============================================================== reset === */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  scrollbar-color: color-mix(in oklab, var(--text-3) 55%, transparent) transparent;
  scrollbar-width: thin;
}

/* Smooth anchor scrolling is a motion effect: only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-inline-size: 100%;
}
img, video { block-size: auto; }

input, button, textarea, select, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

textarea { resize: vertical; }

p, h1, h2, h3, h4, h5, h6, dd, dt, figure, blockquote { overflow-wrap: break-word; }

ul[role="list"], ol[role="list"] { list-style: none; padding-inline: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
p { text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--d-fast) var(--e-out);
}
a:hover { color: var(--link-hover); }

hr { border: 0; block-size: 1px; background: var(--border); }

table { border-collapse: collapse; }
th { text-align: start; font-weight: 600; }

code, kbd, samp, pre, output, time, .num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
code, kbd, samp { font-size: .92em; }

kbd {
  padding-inline: .3em;
  padding-block: .1em;
  border: 1px solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

::selection {
  background: color-mix(in oklab, var(--sky-400) 34%, transparent);
  color: var(--text);
}

::placeholder { color: var(--text-3); opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text-3) 45%, transparent);
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--text-3) 75%, transparent); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Focus is always visible. Transparent outline keeps the ring in
   forced-colors / Windows high-contrast mode where box-shadow is dropped. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring);
}
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

/* ========================================================= primitives === */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 2.375rem;
  padding-inline: var(--s-4);
  padding-block: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in oklab, #fff 7%, transparent);
  transition:
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}
.btn:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2), inset 0 1px 0 color-mix(in oklab, #fff 9%, transparent);
  transform: translateY(var(--lift));
}
/* Presses are physical: the button sinks a sub-pixel and loses its shadow, so
   the finger feels a surface rather than a colour change. */
.btn:active {
  transform: translateY(var(--press)) scale(.988);
  box-shadow: inset 0 2px 4px color-mix(in oklab, var(--navy-950) 35%, transparent);
  transition-duration: 60ms;
}
.btn:focus-visible { box-shadow: var(--ring), var(--shadow-2); }

.btn-primary {
  border-color: color-mix(in oklab, var(--sky-400) 55%, transparent);
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--sky-400) 88%, #fff),
    color-mix(in oklab, var(--sky-400) 82%, var(--navy-700))
  );
  background-color: var(--sky-400);
  color: var(--navy-950);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 6px 18px -8px color-mix(in oklab, var(--sky-400) 70%, transparent),
    var(--shadow-1);
}
.btn-primary:hover {
  background-color: var(--sky-400);
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--sky-400) 74%, #fff),
    color-mix(in oklab, var(--sky-400) 92%, var(--navy-700))
  );
  border-color: color-mix(in oklab, var(--sky-400) 75%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 10px 26px -10px color-mix(in oklab, var(--sky-400) 80%, transparent),
    var(--shadow-2);
}
.btn-primary:active { box-shadow: inset 0 2px 5px color-mix(in oklab, var(--navy-900) 45%, transparent); }

.btn-danger {
  border-color: color-mix(in oklab, var(--st-major) 62%, transparent);
  /* Deeper than --st-major on purpose: the raw status hue only reaches 3.7:1
     against a white label, this mix clears 4.5:1 in both themes. */
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--st-major) 80%, var(--navy-900)),
    color-mix(in oklab, var(--st-major) 66%, var(--navy-900))
  );
  background-color: color-mix(in oklab, var(--st-major) 74%, var(--navy-900));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 18px -8px color-mix(in oklab, var(--st-major) 60%, transparent),
    var(--shadow-1);
}
.btn-danger:hover {
  border-color: color-mix(in oklab, var(--st-major) 82%, transparent);
  background-color: color-mix(in oklab, var(--st-major) 80%, var(--navy-900));
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--st-major) 86%, var(--navy-900)),
    color-mix(in oklab, var(--st-major) 72%, var(--navy-900))
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 10px 26px -10px color-mix(in oklab, var(--st-major) 72%, transparent),
    var(--shadow-2);
}
.btn-danger:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-major) 38%, transparent), var(--shadow-2);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  box-shadow: none;
}
.btn-ghost:hover {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
.btn-ghost:active { box-shadow: inset 0 1px 3px color-mix(in oklab, var(--navy-950) 22%, transparent); }

.btn-sm {
  min-block-size: 1.875rem;
  padding-inline: var(--s-3);
  padding-block: var(--s-1);
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
  gap: var(--s-1);
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  cursor: not-allowed;
  opacity: .45;
  filter: saturate(.55);
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover,
.btn.is-disabled:hover { transform: none; box-shadow: none; background-color: var(--surface-2); }
.btn.is-disabled { pointer-events: none; }

/* Loading keeps the label readable and grows a spinner as the first flex item,
   so the button never becomes an unlabelled blank while a request is in flight. */
.btn.is-loading {
  pointer-events: none;
  opacity: .85;
}
.btn.is-loading::before {
  content: '';
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  border-radius: var(--r-full);
  background: conic-gradient(from 0deg, transparent 0 22%, currentColor);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ams-spin 620ms linear infinite;
}

/* ---- pills ----
   Status is never hue alone: each family also changes the glyph's SHAPE, so the
   pill still reads in greyscale or with any colour-vision deficiency. */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-3);
  padding-block: .1875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.pill::before {
  content: '';
  flex: none;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: var(--r-full);
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent);
}
/* A pill that ships its own glyph (an <svg>/.ico child) already carries the
   non-colour signal, so the generated shape would be a second, redundant mark. */
.pill:has(> svg)::before,
.pill:has(> .ico)::before,
.pill:has(> .pill-dot)::before { display: none; }

.pill-ok { background: var(--st-ok-soft); border-color: var(--st-ok-border); color: var(--st-ok-text); }
.pill-ok::before { background: var(--st-ok); }

/* degraded — diamond */
.pill-degraded { background: var(--st-degraded-soft); border-color: var(--st-degraded-border); color: var(--st-degraded-text); }
.pill-degraded::before { background: var(--st-degraded); border-radius: 2px; rotate: 45deg; box-shadow: none; }

/* partial — triangle */
.pill-partial { background: var(--st-partial-soft); border-color: var(--st-partial-border); color: var(--st-partial-text); }
.pill-partial::before {
  background: var(--st-partial);
  border-radius: 1px;
  box-shadow: none;
  inline-size: .5625rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* major — square */
.pill-major { background: var(--st-major-soft); border-color: var(--st-major-border); color: var(--st-major-text); }
.pill-major::before { background: var(--st-major); border-radius: 2px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-major) 22%, transparent); }

/* maint — bar */
.pill-maint { background: var(--st-maint-soft); border-color: var(--st-maint-border); color: var(--st-maint-text); }
.pill-maint::before { background: var(--st-maint); inline-size: .6875rem; block-size: .1875rem; box-shadow: none; }

/* unknown — hollow ring */
.pill-unknown { background: var(--st-unknown-soft); border-color: var(--st-unknown-border); color: var(--st-unknown-text); }
.pill-unknown::before { background: transparent; border: 2px solid var(--st-unknown); box-shadow: none; }

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

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--d-med) var(--e-out),
    box-shadow var(--d-med) var(--e-out),
    border-color var(--d-med) var(--e-out),
    background-color var(--d-med) var(--e-out);
}
.card.is-interactive { cursor: pointer; }
.card.is-interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(var(--lift));
}
.card.is-interactive:active { transform: translateY(var(--press)); transition-duration: 80ms; }
.card.is-interactive:focus-visible { box-shadow: var(--ring), var(--shadow-2); }

/* Glass: real depth — a blurred backdrop, a top-light gradient, and a
   gradient hairline drawn with a mask so the 1px edge is luminous on the lit
   side and fades to nothing on the shadow side. */
.card-glass {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background-image: linear-gradient(
    170deg,
    color-mix(in oklab, var(--surface-2) 100%, transparent),
    color-mix(in oklab, var(--surface) 100%, transparent) 62%
  );
  background-color: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  box-shadow: var(--shadow-2), inset 0 1px 0 color-mix(in oklab, #fff 8%, transparent);
}
.card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    color-mix(in oklab, #fff 26%, transparent),
    transparent 38%,
    color-mix(in oklab, var(--sky-400) 14%, transparent)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* ---- form controls ---- */

.input, .select, .textarea {
  inline-size: 100%;
  min-block-size: 2.375rem;
  padding-inline: var(--s-3);
  padding-block: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  box-shadow: inset 0 1px 2px color-mix(in oklab, var(--navy-950) 12%, transparent);
  transition:
    border-color var(--d-fast) var(--e-out),
    box-shadow var(--d-med) var(--e-out),
    background-color var(--d-fast) var(--e-out);
}
.textarea { min-block-size: 6rem; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--border-focus);
  background-color: var(--surface-3);
  box-shadow: var(--ring);
}
.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly], .textarea[readonly] {
  opacity: .55;
  cursor: not-allowed;
  background-color: var(--surface);
  box-shadow: none;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"],
.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: color-mix(in oklab, var(--st-major) 70%, transparent);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus, .input.is-invalid:focus, .textarea.is-invalid:focus,
.select.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-major) 30%, transparent);
}

/* The caret is a masked glyph so it inherits --text-2 in both themes. The
   background-position side is genuinely physical, so RTL flips it below. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--s-8);
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-size: 1.125rem;
  background-position: right var(--s-3) center;
  cursor: pointer;
}
.select option { background: var(--bg-2); color: var(--text); }

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  inline-size: 2.5rem;
  block-size: 1.375rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color var(--d-med) var(--e-out), border-color var(--d-med) var(--e-out);
}
.switch::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 2px;
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: -.5rem;
  border-radius: var(--r-full);
  background: var(--text-3);
  box-shadow: var(--shadow-1);
  transition: translate var(--d-med) var(--e-spring), background-color var(--d-med) var(--e-out);
}
.switch:hover { border-color: var(--border-focus); }
.switch:checked {
  background: color-mix(in oklab, var(--st-ok) 30%, transparent);
  border-color: color-mix(in oklab, var(--st-ok) 60%, transparent);
}
/* --flip makes the knob travel toward the inline end in both directions. */
.switch:checked::after { translate: calc(var(--flip) * 1.125rem) 0; background: var(--st-ok); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.checkbox::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--navy-950);
  mask: var(--icon-check) center / 82% no-repeat;
  -webkit-mask: var(--icon-check) center / 82% no-repeat;
  opacity: 0;
  scale: .55;
  transition: opacity var(--d-fast) var(--e-out), scale var(--d-med) var(--e-spring);
}
.checkbox:hover { border-color: var(--border-focus); }
.checkbox:checked { background: var(--sky-400); border-color: var(--sky-400); }
.checkbox:checked::after { opacity: 1; scale: 1; }
.checkbox:indeterminate { background: var(--sky-400); border-color: var(--sky-400); }
.checkbox:indeterminate::after {
  opacity: 1;
  scale: 1;
  mask-image: var(--icon-dash);
  -webkit-mask-image: var(--icon-dash);
}
.checkbox:disabled { opacity: .5; cursor: not-allowed; }

.field {
  position: relative;
  display: grid;
  gap: var(--s-2);
}
.field > label,
.field .field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .005em;
}
.field-hint, .field .hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: var(--lh-snug);
}
.field-error, .field .error {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--st-major-text);
  line-height: var(--lh-snug);
}
.field-error::before, .field .error::before {
  content: '';
  flex: none;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 2px;
  background: var(--st-major);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea {
  border-color: color-mix(in oklab, var(--st-major) 70%, transparent);
}
/* Inline spinner parked over the control's trailing edge while a field
   validates or saves. Sits on the control row, not the label row. */
.field.is-loading::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--s-3);
  inset-block-start: calc(50% - .5em);
  inline-size: 1em;
  block-size: 1em;
  border-radius: var(--r-full);
  color: var(--text-3);
  background: conic-gradient(from 0deg, transparent 0 22%, currentColor);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ams-spin 620ms linear infinite;
  pointer-events: none;
}
.field-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ---- feedback / structure ---- */

.skel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--text) 9%, transparent);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  min-block-size: .75em;
}
.skel * { visibility: hidden; }
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--text) 11%, transparent) 45%,
    color-mix(in oklab, var(--text) 13%, transparent) 55%,
    transparent
  );
  translate: -100% 0;
  animation: ams-sweep 1.5s var(--e-in-out) infinite;
}
.skel-text { block-size: .8em; border-radius: var(--r-full); }
.skel-line + .skel-line { margin-block-start: var(--s-2); }

.spinner {
  display: inline-block;
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: var(--r-full);
  background: conic-gradient(from 0deg, transparent 0 22%, currentColor);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ams-spin 620ms linear infinite;
  color: var(--text-3);
}
.spinner-lg { inline-size: 2rem; block-size: 2rem; }

/* Tooltip shell. Position is set by JS via --tt-x/--tt-y (custom properties,
   never inline layout styles — the CSP forbids those). left/top are physical on
   purpose: the anchor is a viewport pixel, identical in LTR and RTL. */
.tt {
  position: fixed;
  z-index: 90;
  left: var(--tt-x, 50%);
  top: var(--tt-y, 0px);
  max-inline-size: 20rem;
  padding-inline: var(--s-3);
  padding-block: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  box-shadow: var(--shadow-3);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 6px)) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-med) var(--e-spring);
}
.tt.is-open, .tt[data-open] {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 12px)) scale(1);
}
.tt::after {
  content: '';
  position: absolute;
  inset-block-end: -4px;
  left: 50%;
  inline-size: 8px;
  block-size: 8px;
  margin-left: -4px;
  border-radius: 2px;
  background: inherit;
  border-inline-end: 1px solid var(--border-strong);
  border-block-end: 1px solid var(--border-strong);
  rotate: 45deg;
}
.tt-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-tight);
}
.tt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.tt-row > :last-child {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.divider {
  border: 0;
  block-size: 1px;
  inline-size: 100%;
  background: linear-gradient(to right, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.divider-v {
  border: 0;
  inline-size: 1px;
  block-size: auto;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

/* Neutral by default — colour is only spent when something is actually wrong. */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding-inline: .375rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.badge-count.is-alert {
  background: var(--st-major-soft);
  border-color: var(--st-major-border);
  color: var(--st-major-text);
}
.badge-count.is-warn {
  background: var(--st-degraded-soft);
  border-color: var(--st-degraded-border);
  color: var(--st-degraded-text);
}

/* Fixed noise wash. Fixed + no scroll-linked property means it never repaints
   while scrolling; it is a sibling overlay, not a body background, so pages can
   layer it over their aurora. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift)) scale(.994);
  transition:
    opacity var(--d-med) var(--e-out),
    transform var(--d-slow) var(--e-spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in, .reveal[data-in] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.focus-ring { box-shadow: var(--ring); }

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ---- small shared helpers ---- */

.num, .mono { font-variant-numeric: tabular-nums; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.icon-flip { scale: var(--flip) 1; }

/* ============================================================ keyframes === */

@keyframes ams-spin { to { rotate: 360deg; } }
@keyframes ams-sweep { to { translate: 100% 0; } }

/* ================================================== RTL corrections =====
   Everything above uses logical properties, so this list is deliberately tiny:
   only things whose axis is genuinely physical need a mirror.
   ------------------------------------------------------------------------ */

[dir="rtl"] { --flip: -1; }

/* Arabic UI text renders in GE Dinar One; latin glyphs inside it still fall
   through to Catamaran via the unicode-range split above. */
[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] .input,
[dir="rtl"] .select,
[dir="rtl"] .textarea {
  font-family: var(--font-ar);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-ar);
  letter-spacing: 0; /* tight tracking is a latin display trick; it hurts Arabic */
}

/* background-position has no logical form. */
[dir="rtl"] .select { background-position: left var(--s-3) center; }

/* Cosmetic: the shimmer should travel with the reading direction. */
[dir="rtl"] .skel::after { animation-direction: reverse; }

/* ============================================== reduced motion (global) ===
   One block, as the contract requires. Durations collapse to 1ms, every
   keyframe animation is off, and the motion-distance tokens go to zero so the
   press/lift/entrance transforms disappear without fighting other rules.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-med: 1ms;
    --d-slow: 1ms;
    --d-xslow: 1ms;
    --lift: 0px;
    --press: 0px;
    --reveal-shift: 0px;
  }

  *, *::before, *::after {
    animation-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-name: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto !important; }

  /* Targeted transform resets — a blanket transform:none would break legitimate
     layout transforms (centred overlays, chart geometry). */
  .btn:hover, .btn:active,
  .card.is-interactive:hover, .card.is-interactive:active { transform: none !important; }
  .reveal, .reveal.is-in, .reveal[data-in] { opacity: 1 !important; transform: none !important; }
  .tt, .tt.is-open, .tt[data-open] { transform: translate(-50%, calc(-100% - 12px)) !important; }
  .switch::after, .switch:checked::after { transition: none; }

  /* The animations above carried the "busy" signal; give the static shapes a
     legible resting state so nothing looks broken standing still. */
  .skel::after { display: none; }
  .skel { background: color-mix(in oklab, var(--text) 12%, transparent); }
  .spinner, .btn.is-loading::before, .field.is-loading::after {
    background: none;
    mask: none;
    -webkit-mask: none;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-inline-end-color: transparent;
  }
}

/* ==================================================== forced colors ====== */

@media (forced-colors: active) {
  .card, .card-glass, .input, .select, .textarea, .btn, .pill { border-color: CanvasText; }
  .card-glass::before { display: none; }
  .grain { display: none; }
  :focus-visible { outline: 2px solid Highlight; }
}