/* Cura Core · tokens.css
   Design tokens and base element styles. Loaded first.

   Direction: "Bound Manual" (October 2026 redesign).
   The product is dressed as a well-produced bound manual: a dark ink "cover"
   (sidebar, sign-in panel, dashboard hero, staff hero, website hero and CTA
   band, footer, toasts) wrapped around warm paper pages with pure white cards.
   Newsreader (serif) carries titles, big figures and the policy text; IBM Plex
   Sans carries everything you click; IBM Plex Mono carries policy numbers.
   Hairline rules replace boxes and shadows. Colour is spent only where it
   means something: brand blue for the one primary action and links, teal for
   "signed", gold strictly for Premium, amber for "needs attention", red for
   danger. Every class, id, route and behaviour stays where it is.

   FONTS. Replace the Plus Jakarta Sans <link> in index.html (line 13) with
   this single line. Keep media="print" and data-font: app.js flips media to
   "all" once the page runs; offline, the metric-matched fallbacks below keep
   the layout from reflowing. The ital tuple order (0,... then 1,...) matters:
   Google returns 400 if the italic range comes first. Verified 2026-10-10:
   HTTP 200, 35 @font-face rules.

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@500&display=swap" media="print" data-font>

   One-token swap if Newsreader looks frail at text size on a 100-125% Windows
   laptop: add &family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..600
   to the same URL and set --font-paper to 'Source Serif 4', 'Newsreader Fallback', Georgia, serif.
   Nothing else changes (verified: that URL also returns 200).

   Also in index.html: <meta name="theme-color" content="#16222C"> (was #0A2135),
   so phone browser chrome matches the cover.

   Brand: Cura Blue #175B87, Deep Blue #134B70, Core Teal #1E9C8A, Ink #1C1A17.
   The logo mark (public/assets/logo.svg and the LOGO constant in core.js) is
   NOT recoloured: its #5FA3D1 / #2E7BB0 / #1E9C8A read on the cover at
   5.9 / 3.5 / 4.8:1.

   Every token name the other eight stylesheets reference is kept with a new
   value. New tokens are added alongside. Contrast ratios in the comments were
   measured (WCAG 2.x relative luminance) on 2026-10-10; "AA" means >= 4.5:1 for
   text and >= 3:1 for large text, controls and graphics. */

/* ---------------- fallback faces (offline) ----------------
   Georgia and Arial exist on Windows and macOS. The descriptors give them the
   web fonts' width and vertical metrics so the sidebar wordmark, the nav items
   ("Packages and prices"), buttons and the long policy titles ("Client Rights,
   Responsibilities, and Complaint Process") wrap the same way whether or not
   the web fonts loaded. Check once with fonts.googleapis.com blocked at 1440
   and 390 and trim size-adjust by a percent if a line wraps differently. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 93%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Plex Sans Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* ---- paper and ink (warm stone, not grey) ---- */
  --bg: #F4F1EA;             /* the page: warm paper. Fallback if a projector says "beige": #F6F4EF (one line) */
  --surface: #FFFFFF;        /* cards, the policy paper, inputs, the sidebar's white tiles */
  --surface-2: #F8F6F1;      /* wells, hover rows, quoted messages, the find-bar input, the editor panel */
  --surface-3: #EEEAE1;      /* tracks (ring, bar, hbar, tabs rail, segmented), chip fills, skeleton base, empty-state icon */
  --line: #E3DDD1;           /* hairline: every card edge, row divider, section rule (1.35:1 on white, 1.2:1 on paper) */
  --line-2: #CBC3B4;         /* stronger hairline on light surfaces: dividers that must read, chip and secondary-button borders, the chart baseline, the .note left rule */
  --rule: #1C1A17;           /* the heavy editorial rule (2px): under the paper masthead */
  --rule-2: #4A463F;         /* the medium rule: 2px over stat tiles, 1.5px under table headers (9.4:1 on white) */
  --field: #8A8477;          /* CONTROL BOUNDARY ONLY: input border, switch off-track, radio/checkbox ring, empty state-ico ring, hover border. 3.7:1 on white, 3.3:1 on paper, 3.4:1 on surface-2 (WCAG 1.4.11). Never text, never a placeholder */
  --ink: #1C1A17;            /* warm near-black: 17.4:1 on white, 15.4:1 on paper */
  --ink-2: #4A463F;          /* 9.4:1 white, 8.3:1 paper, 7.8:1 surface-3 */
  --ink-3: #625C55;          /* 6.6:1 white, 5.9:1 paper, 6.1:1 surface-2, 5.5:1 surface-3, 5.6:1 blue-soft and teal-soft, 5.9:1 gold-soft, 5.8:1 amber-soft, 5.2:1 on the tab-count bubble: AA text on every light surface at 12px+ */

  /* ---- the dark "cover": sidebar, sign-in panel, hero bands, staff hero, CTA, footer, toasts, tooltips ---- */
  --navy: #16222C;           /* kept name: .badge-navy, .mode-super, .toast, .compare th.us, .step .n, .mock-phone, inline site.js aside all read it */
  --navy-2: #1D2B37;         /* hover rows and nested wells on the cover */
  --navy-3: #243543;         /* pressed / raised surface on the cover (white on it 12.6:1) */
  --navy-ink: #D9D2C3;       /* cream body text on the cover: 10.7:1 (9.3:1 on a hover row) */
  --cover: var(--navy);
  --cover-2: var(--navy-2);
  --cover-3: var(--navy-3);
  --cover-ink: var(--navy-ink);
  --cover-ink-2: #A49E92;    /* secondary text on the cover: 6.1:1 (5.4:1 on --cover-2) */
  --cover-label: #9A9488;    /* small-caps labels on the cover: 5.4:1 at 11px/600. Labels sit on the flat cover only, never inside hover or active rows */
  --cover-line: rgba(255, 255, 255, .10);   /* hairlines on the cover */
  --cover-line-2: rgba(255, 255, 255, .22); /* outline-tag borders on the cover (2.2:1 vs cover, decorative beside 11:1 text) */
  --cover-hover: rgba(255, 255, 255, .05);
  --cover-active: rgba(255, 255, 255, .07);
  --cover-cream: #F4F1EA;    /* headings on the cover: 14.3:1 */

  /* ---- brand blue ---- */
  --blue: #175B87;           /* links and link buttons: 7.3:1 white, 6.5:1 paper, 6.2:1 blue-soft, 6.2:1 teal-soft */
  --blue-hover: #124A6E;     /* link hover: 9.4:1 */
  --blue-deep: #134B70;      /* THE primary button: white on it 9.3:1; cover-cream on it 8.2:1 */
  --blue-deep-hover: #0F3F60;/* 11.1:1 */
  --blue-bright: #2470A8;    /* focus ring on paper (4.7:1 on paper, 5.3:1 white, 4.9 surface-2, 4.5 teal-soft), chart c1, the agency mode chip (white icon 5.3:1) */
  --blue-soft: #E7EEF4;      /* warm-shifted tint: badge-blue, notice-blue, menu .on, pkg-opt.on */
  --blue-line: #C9D8E4;
  --blue-ink: #134C71;       /* text on --blue-soft 7.8:1, on white 9.1:1 */

  /* ---- brand teal: marks and "signed" ---- */
  --teal: #1E9C8A;           /* MARKS AND ICONS ONLY: ring/bar/line fills, feed dot, logo. 3.4:1 on white (passes as a graphic inside a white card), 3.0:1 on paper (so charts never sit directly on --bg). Never text, never a fill under white text */
  --teal-bright: #2BB39F;    /* on the cover only (6.2:1) */
  --teal-ink: #0B6B5E;       /* teal text and teal fills: 6.4:1 white, 5.7:1 paper, 5.5:1 on --teal-soft; white on it 6.4:1 (.btn-teal, switch on, .state-ico.done, the staff mode chip) */
  --teal-hover: #095A4F;     /* white on it 8.1:1 */
  --teal-soft: #E2F0EB;
  --teal-line: #B9DED4;
  --mint: #7FD6C7;           /* ON THE COVER ONLY: 9.5:1. The active nav rule, "Core" in the wordmark on dark, icons on dark, the count pill fill (cover text on it 9.5:1), the hero rhombus stack at 14%, focus rings on the cover. Never on anything lighter than --cover-3 */

  /* ---- gold: Premium, and only Premium ---- */
  --gold: #9A6610;           /* .btn-gold fill (white on it 4.9:1), Premium icons on white (4.9:1), the upsell's left rule */
  --gold-hover: #7F540C;     /* 6.6:1 */
  --gold-ink: #6E4708;       /* Premium text on --gold-soft 7.3:1, on white 8.2:1 */
  --gold-soft: #FAF1DD;
  --gold-line: #E6CF9C;
  --gold-lock: #D9B36A;      /* lock icons and the Premium outline tag on the cover (8.2:1); #F3D395 for the tag text (11.2:1) */
  --gold-cover-text: #F3D395;

  /* ---- semantic ---- */
  --red: #B42318;            /* 6.6:1 white, 5.6:1 on --red-soft; white on it 6.6:1 */
  --red-hover: #8F1C13;      /* 9.0:1 */
  --red-soft: #FBEAE6;
  --red-line: #F1C7C0;
  --red-deep: #7A1A12;       /* .toast-error (white 10.6:1, #FFC9C2 icon 7.3:1) */
  --amber: #B8730F;          /* MARKS: .input.missing border, .fm dashed border, .state-ico.again ring, the "must re-sign" strip segment. 3.8:1 white, 3.7:1 on --amber-wash, 3.4:1 on --amber-soft (the draft #D9B36A was 1.98:1 and failed) */
  --amber-ink: #8A4B00;      /* text on --amber-soft 6.0:1, on --amber-mark 6.1:1, on --amber-wash 6.6:1 */
  --amber-soft: #FBF0DA;
  --amber-line: #EDD39A;
  --amber-wash: #FFFBF2;     /* background of a missing input */
  --amber-mark: #FFF1D6;     /* background of a missing-detail marker in the paper */
  --mark: #FFF1C2;           /* website search hit; ink on it 15.4:1 */
  --hit: #FFE9A8;            /* find-bar hit; ink on it 14.5:1 */
  --hit-line: #F3D27A;
  --hit-on: #F7C04A;         /* current hit; ink on it 10.4:1 */
  --hit-on-line: #E0A21C;

  /* ---- mode accent: blue-deep in the agency portal, website, sign-in and staff pages; re-pointed for the console and the phone stage below ---- */
  --accent: #134B70;
  --accent-hover: #0F3F60;
  --accent-ink: #134C71;
  --accent-soft: #E7EEF4;
  --accent-line: #C9D8E4;
  --accent-ring: 0 0 0 3px rgba(19, 75, 112, .14);

  /* ---- chart series, in this order (colour-blind safe: hue AND luminance differ; every series is also named in legend, tooltip and table) ---- */
  --c1: #2470A8;             /* blue: team completion, signatures, Policy Pack revenue, "still reading" (5.3:1 on white) */
  --c2: #A8701B;             /* ochre: Premium revenue ONLY, so gold keeps its Premium meaning (4.2:1) */
  --c3: #1E9C8A;             /* teal: signed / done (3.4:1 on white; charts always sit inside a white card) */
  --c4: #D3CCBE;             /* EMPTY: "not started" and remainder segments, drawn as the empty track, not a data colour (teal vs c4 2.1:1, blue vs c4 3.3:1, amber vs c4 2.4:1 by luminance) */
  --chart-neutral: var(--c4);
  --grid: #EAE5DB;
  --axis: #CBC3B4;
  --tip-bg: var(--cover);

  /* ---- shape ---- */
  --radius: 8px;             /* cards, the paper's list cards, dl-card, notices (6px allowed) */
  --radius-sm: 6px;          /* buttons, inputs, menu items, chips' parent, person-pick, pager, inshort */
  --radius-xs: 4px;          /* tags, bars, stat tiles, the paper, swatches, QR image */
  --radius-lg: 12px;         /* dialogs, cover bands (CTA 12px, dashboard hero 8px), locked page icon */
  --radius-pill: 999px;      /* the only pills: .status, .delta, .switch-btn, .pill-live, the sidebar count .pill. Tags (.badge, .chip, .ref) are 4px */
  --shadow-sm: 0 1px 0 rgba(28, 26, 23, .04);                                  /* a whisper under every resting card: the second edge cue when hairlines fade on a projector */
  --shadow: 0 2px 6px rgba(28, 26, 23, .06), 0 12px 32px rgba(28, 26, 23, .08); /* things that float over content: menus, sticky find bar, chart tip, raised hover */
  --shadow-lg: 0 24px 60px rgba(22, 34, 44, .22);                              /* dialogs, toasts, the phone bezel, the drawer */
  --focus: #2470A8;          /* paper surfaces; re-pointed to --mint on the cover below */
  --focus-ring: 0 0 0 3px rgba(36, 112, 168, .28);  /* input focus halo (with the --blue-bright border) */
  --scrim: rgba(22, 34, 44, .5);

  /* ---- type ---- */
  --font-sans: 'IBM Plex Sans', 'Plex Sans Fallback', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --font-serif: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-paper: var(--font-serif);   /* the policy text; the one-token Source Serif 4 swap lives here */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --font: var(--font-sans);          /* kept: charts.js and .chart text read var(--font) */
  --fs-display: 62px; --fs-h1: 34px; --fs-reader: 38px; --fs-h2: 20px; --fs-h3: 18px;
  --fs-body: 15px; --fs-small: 13px; --fs-caption: 12.5px; --fs-label: 11.5px;
  --fs-stat: 40px; --fs-paper: 17px; --fs-paper-h: 22px;
  --lh-body: 1.55; --lh-tight: 1.15; --lh-paper: 1.7;
  --measure: 68ch;           /* reading measure for the paper, page subtitles, notices, FAQ answers, the sign-in paragraph */
  --track-label: .09em;      /* uppercase labels (nav-label and footer .12em) */
  --track-display: -.015em;

  /* ---- layout and spacing ---- */
  --side-w: 264px;
  --top-h: 60px;
  --content-w: 1220px; --content-narrow: 860px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px;
  --tap: 44px;               /* minimum tap target on touch screens */

  /* ---- motion ---- */
  --dur-1: 120ms; --dur-2: 160ms; --dur-3: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Bento plates (October 2026, signed-in portal): the website's raised-plate look, same palette ----
     Cards are white plates with layered soft shadows instead of a flat hairline box. A plate that is a
     link or a choice lifts straight up 6px with a very slight scale and catches a soft top-down light on
     hover and keyboard focus; it never tilts. --plate is a resting plate, --plate-hi a lifted one. The
     faint 1px ring keeps the edge readable on a washed-out projector. Values match site.css (--lift). */
  --r-plate-xl: 28px;        /* the hero band, sign-in cover, dialogs */
  --r-plate: 22px;           /* every card */
  --r-plate-md: 16px;        /* notices, wells, the "In short" box, pager, person picks */
  --r-plate-sm: 12px;        /* inputs, menu items, nav items */
  --plate: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(22, 34, 44, .05), 0 2px 4px rgba(22, 34, 44, .05), 0 12px 24px -10px rgba(22, 34, 44, .13), 0 26px 44px -26px rgba(22, 34, 44, .18);
  --plate-hi: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(22, 34, 44, .06), 0 4px 8px rgba(22, 34, 44, .08), 0 22px 40px -12px rgba(22, 34, 44, .24), 0 44px 70px -30px rgba(22, 34, 44, .32);
  --plate-flat: 0 0 0 1px rgba(22, 34, 44, .06), 0 1px 2px rgba(22, 34, 44, .05);
  --plate-navy: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 34px 64px -30px rgba(22, 34, 44, .7);
  --ease-plate: cubic-bezier(.2, .8, .2, 1);
  /* the navy plate's light: teal from the top right, blue from the bottom left (the website's hero) */
  --navy-plate: radial-gradient(70% 90% at 100% 0%, rgba(30, 156, 138, .38), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(23, 91, 135, .45), transparent 60%), var(--navy);
  /* raised primary button: gradient top and bottom, the darker edge under it, its glow. Re-pointed per mode below. */
  --btn-top: #1E6EA2; --btn-bot: #134B70; --btn-edge: #0E3A57; --btn-glow: rgba(19, 75, 112, .5);
}

/* ---------------- mode accents ----------------
   .shell-admin and .shell-customer are set by app.js (drawFrame); .stage-shell
   wraps the "staff member's view" page. The agency portal, website, sign-in
   and the staff phone pages keep --blue-deep. Cura's own console is "set in
   ink": its primary buttons, selected radio cards, active-nav tint on light
   and user avatar go cover-ink, so the owner (and a prospect) can tell whose
   screen is up. The phone stage goes teal-ink, the staff colour. The mode
   chips (.mode-super/.mode-agency/.mode-staff) stay fixed colours regardless.
   Dialogs and toasts live on <body>, outside these scopes, and stay blue. */
.shell-admin {
  --accent: #16222C; --accent-hover: #243543; --accent-ink: #16222C; --accent-soft: #ECE9E2; --accent-line: #CBC3B4; --accent-ring: 0 0 0 3px rgba(22, 34, 44, .14);
  --btn-top: #34495A; --btn-bot: #16222C; --btn-edge: #070C10; --btn-glow: rgba(22, 34, 44, .5);
}
.stage-shell {
  --accent: #0B6B5E; --accent-hover: #095A4F; --accent-ink: #0B6B5E; --accent-soft: #E2F0EB; --accent-line: #B9DED4; --accent-ring: 0 0 0 3px rgba(11, 107, 94, .14);
  --btn-top: #0E7F70; --btn-bot: #0B6B5E; --btn-edge: #08554B; --btn-glow: rgba(11, 107, 94, .45);
}

/* ---------------- cover scopes ----------------
   Everything inside a dark cover surface reads cream, and its focus ring is
   mint. Custom properties inherit, so one declaration per surface is enough. */
.side, .signin-art, .hero, .staff-hero, .s-hero, .cta-band, .site-foot, .spot-visual.dark, .phone, .toast, .chart-tip, .compare th.us {
  --focus: var(--mint);
  color-scheme: dark;
}

/* ---------------- base ---------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }

/* Headings are the manual's voice: Newsreader 500, optical size left to the font.
   Cards, dialogs and the website override sizes; the family and weight stay. */
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }
h1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.01em; }
h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.25; letter-spacing: 0; }
h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: 0; }
h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-small); line-height: 1.4; }
p { margin: 0 0 .75em; text-wrap: pretty; }
a { color: var(--blue); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-1) var(--ease); }
a:hover { text-decoration: underline; color: var(--blue-hover); }
/* Links that sit in running text carry a 1px underline at rest: --blue is only
   1.29:1 against the --ink-2 copy around it (2.38:1 against --ink), so colour
   alone cannot mark them (WCAG 1.4.1 / G183). This covers the sign-in .help,
   links inside notices ("Set the price", "What changed"), the admin feed's
   agency names, paragraphs, list items, table cells, small print and leads.
   The underline is the brand blue at 55% so it reads as a cue rather than a
   rule, and goes solid on hover. Standalone links are identified by position
   and stay bare: nav, site-nav and footer columns are direct children (no li),
   .pol-row / .read-card / .lib-row / .tile / .btn / .icon-btn set their own
   text-decoration: none at class specificity, and :where() keeps this rule at
   (0,0,1) so none of them need to change. The :not() list is belt and braces
   for the few link-shaped classes that do not set text-decoration themselves. */
:where(p, li, td, .help, .notice, .feed, .small, .lead) a:where(:not(.btn, .icon-btn, .link-btn, .badge, .chip, .tile, .stat-link, .pol-row, .read-card, .lib-row, .more, .brand)) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(23, 91, 135, .55);
}
:where(p, li, td, .help, .notice, .feed, .small, .lead) a:where(:not(.btn, .icon-btn, .link-btn, .badge, .chip, .tile, .stat-link, .pol-row, .read-card, .lib-row, .more, .brand)):hover {
  text-decoration-thickness: 1px; text-decoration-color: currentColor; color: var(--blue-hover);
}
strong, b { font-weight: 600; }
em, i { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::placeholder { color: var(--ink-3); opacity: 1; }
::selection { background: var(--blue-soft); color: var(--ink); }
img, svg { vertical-align: middle; }
.i { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus rings are 2px, solid, follow the element's own radius (the forced 6px
   radius is gone), blue on paper and mint on the cover, and never animate. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none; }

/* ---------------- utilities ---------------- */

.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); line-height: 1.45; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
.serif { font-family: var(--font-serif); font-weight: 500; }
.label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* ---------------- shared keyframes ----------------
   page-in runs on each fresh #view (app.js clones the element per route);
   menu-in runs each time a .menu loses [hidden]; scrim-in when the drawer
   opens. All are cancelled under reduced motion below. */
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes scrim-in { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  /* a progress indicator must still indicate, just slower */
  .btn.busy::after, .spinner-inline { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
  .sk { animation: none !important; background: #E9E4DA; }
  .s-hero .dotlive { animation: none !important; }
  .tile:hover, .stat-link:hover, .pager a:hover, .prod:hover, .person-pick:hover { transform: none; }
  /* Bento plates and raised buttons keep their light and shadow but do not move */
  :is(.shell, .solo, .signin, .stage-shell, .paused, .modal-wrap) :is(a.card, .lift, .pkg-opt, .person-pick, .pager a, .btn, .switch-btn),
  :is(.shell, .solo, .signin, .stage-shell, .paused, .modal-wrap) :is(a.card, .lift, .pkg-opt, .person-pick, .pager a, .btn, .switch-btn):is(:hover, :active, :focus-visible, :focus-within) { transform: none !important; }
  html { scroll-behavior: auto; }
}