/* Portal design tokens (plan.md 1.2): every custom property of the portal's one design system. Light on :root,
   dark on html[data-theme="dark"] (static/js/theme.js sets it before the first paint, templates/_portal_boot.html).
   Loaded on every page, AI Chat included (templates/_portal_head.html), always first.
   Custom properties only, plus color-scheme and the --page-gutter / --field-h / --ds-split-list media overrides.

   Rules: pages use these tokens, never literal colors, sizes, radii, shadows, z-indexes or durations
   (tests/gateway/test_design_tokens.py). Every existing --clr-*, --shadow-sm/md/lg, --radius-md/lg,
   --font-mono and --transition-speed keeps its name and value (AI Chat uses them); a token nothing uses is removed. Muted text meets WCAG AA
   (>= 4.5:1) on every surface in both themes, AI Chat's included.

   Breakpoints (literals: custom properties cannot be used in media queries):
     379  narrow phone (360 px Androids: the top bar tightens; portal-shell.css)
     600  phone (full-screen dialogs become sheets, gutter 16, cards instead of tables)
     768  inputs get 16px text (no iOS zoom)
     900  compact shell (phone top bar, bottom tab bar instead of the sidebar)
     1100 gutter 20
   plus the shell's own sidebar breakpoints (portal-shell.css). Container queries for dense panels. */

:root {
    color-scheme: light;
    --clr-bg: hsl(210, 40%, 98%);
    --clr-surface: hsl(0, 0%, 100%);
    --clr-surface-muted: hsl(210, 40%, 96%);
    --clr-primary: hsl(217, 91%, 60%);
    --clr-primary-hover: hsl(221, 83%, 53%);
    --clr-primary-light: hsl(221, 83%, 97%);
    --clr-danger: hsl(354, 70%, 54%);
    --clr-danger-hover: hsl(354, 70%, 44%);
    --clr-danger-soft: hsl(0, 86%, 94%);
    --clr-danger-ink: hsl(0, 63%, 31%);
    --clr-success: hsl(145, 63%, 42%);
    --clr-success-soft: hsl(142, 76%, 93%);
    --clr-success-ink: hsl(144, 61%, 20%);
    --clr-text-heading: hsl(220, 13%, 13%);
    --clr-text-body: hsl(215, 14%, 34%);
    --clr-text-muted: hsl(217, 10%, 43%);          /* AA: >= 4.66:1 on every text surface */
    --clr-text-muted-aa: hsl(217, 10%, 43%);       /* the same AA value, never pinned (the notification center's tints) */
    --clr-border: hsl(210, 20%, 90%);
    --clr-border-hover: hsl(210, 20%, 80%);
    --clr-focus-ring: hsl(204, 70%, 53%);
    --clr-warning: hsl(38, 92%, 50%);
    --clr-warning-hover: hsl(32, 95%, 44%);
    --clr-warning-soft: hsl(48, 96%, 89%);
    --clr-warning-ink: hsl(26, 83%, 24%);
    --clr-info: hsl(217, 91%, 60%);
    --clr-info-soft: hsl(221, 83%, 97%);
    --clr-table-stripe: hsl(210, 40%, 97%);
    --clr-row-hover: hsl(210, 40%, 94%);
    --clr-hover-tint: color-mix(in srgb, var(--clr-text-heading) 6%, transparent);   /* a hover wash that keeps a tinted surface's hue (the On site buttons); follows the theme through --clr-text-heading */
    --clr-press: color-mix(in srgb, var(--clr-text-heading) 11%, transparent);       /* the pressed wash on touch screens (.is-touch-pressed, static/js/portal-touch.js): darkens in light, lightens in dark, over any fill */
    --clr-secondary: hsl(200, 18%, 46%);
    --clr-purple: hsl(270, 55%, 48%);
    --clr-purple-soft: hsl(270, 80%, 96%);
    --clr-purple-ink: hsl(270, 55%, 32%);
    --clr-pink: hsl(330, 80%, 58%);
    --clr-pink-soft: hsl(330, 85%, 94%);
    --clr-pink-ink: hsl(330, 60%, 32%);
    --clr-pto: hsl(270, 60%, 55%);
    --clr-pto-light: hsl(270, 60%, 96%);
    --clr-on-accent: #fff;
    --clr-scrim: rgba(15, 23, 42, 0.45);
    --clr-scrim-strong: rgba(15, 23, 42, 0.7);
    --clr-code-bg: hsl(220, 13%, 18%);
    --clr-code-head: hsl(220, 13%, 22%);
    --clr-code-ink: hsl(210, 20%, 88%);
    --clr-code-meta: hsl(215, 15%, 70%);
    --clr-code-border: hsl(220, 13%, 32%);
    --clr-code-hover: hsl(220, 13%, 28%);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --transition-speed: 0.2s ease-in-out;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* -- Colors added (today's scheduling / shell values) -- */
    --clr-success-solid: #15803d;
    --clr-success-solid-hover: #166534;
    --clr-primary-ink: hsl(221, 83%, 53%);
    --clr-amber-ink: hsl(26, 83%, 28%);
    --clr-teal: hsl(174, 72%, 33%);
    --clr-teal-soft: hsl(170, 55%, 93%);
    --clr-teal-ink: hsl(176, 72%, 22%);
    /* Sky: what a person picked themselves (Scheduling's Self scheduling, --sch-self*): apart from teal, purple, indigo and pink. */
    --clr-sky: hsl(199, 89%, 36%);
    --clr-sky-soft: hsl(199, 85%, 94%);
    --clr-sky-ink: hsl(200, 85%, 24%);
    --clr-sky-line: hsl(199 89% 36% / 0.35);
    --clr-indigo: hsl(246, 58%, 60%);
    --clr-indigo-soft: hsl(246, 85%, 96.5%);
    --clr-indigo-ink: hsl(246, 45%, 38%);
    --clr-head-bg: hsl(214, 32%, 94.5%);
    --clr-head-ink: hsl(220, 20%, 24%);
    --clr-head-line: hsl(214, 22%, 82%);
    --clr-group-pending: hsl(45, 95%, 95.5%);
    --clr-group-review: hsl(270, 80%, 97.5%);
    --clr-group-neutral: hsl(214, 30%, 96.5%);
    --clr-skel: hsl(214, 25%, 91%);
    --clr-skel-hi: hsl(214, 30%, 96%);
    --clr-avatar-bg: var(--clr-primary-light);
    --clr-avatar-ink: var(--clr-primary-hover);
    --clr-current-bg: hsl(217, 91%, 95%);
    --clr-current-ink: hsl(221, 75%, 42%);
    --clr-role-admin: hsl(145, 63%, 30%);
    --clr-tip-bg: var(--clr-code-bg);
    --clr-tip-ink: var(--clr-code-ink);
    /* Syntax colors in a code block (.ds-hl-*): one value each, the same in both themes, since the code ground is
       dark in both (AA on --clr-code-bg in light and dark). */
    --clr-code-kw: hsl(286, 60%, 76%);
    --clr-code-str: hsl(95, 45%, 66%);
    --clr-code-com: hsl(215, 14%, 62%);
    --clr-code-num: hsl(30, 85%, 70%);
    --clr-primary-line: hsl(217 91% 60% / 0.3);
    --clr-success-line: hsl(145 63% 42% / 0.35);
    --clr-warning-line: hsl(38 92% 50% / 0.45);
    --clr-danger-line: hsl(354 70% 54% / 0.35);
    --clr-purple-line: hsl(270 55% 48% / 0.3);
    --clr-pink-line: hsl(330 80% 58% / 0.35);
    --clr-indigo-line: hsl(246 58% 60% / 0.3);
    --clr-teal-line: hsl(174 72% 33% / 0.3);
    --clr-paper: #ffffff;
    --clr-paper-ink: hsl(222, 47%, 11%);
    --clr-paper-line: hsl(214, 32%, 85%);
    /* Pens on the paper (note drawings): the same in both themes, like the paper. */
    --clr-paper-pen-1: hsl(217, 91%, 45%);
    --clr-paper-pen-2: hsl(354, 70%, 46%);
    --clr-paper-pen-3: hsl(145, 63%, 30%);
    --clr-paper-pen-4: hsl(32, 95%, 44%);
    --clr-paper-pen-5: hsl(270, 55%, 45%);
    /* Kit additions: Scheduling's per-component dark overrides, as tokens (see notes.md) */
    --clr-link: var(--clr-primary-ink);            /* AA: 5.2:1 on white (primary is 3.6:1) */
    --clr-logo-ink: var(--clr-primary);            /* the logo link's color (not text): the link color before the AA pin */
    --clr-pop-border: var(--clr-border);
    --clr-seg-track: var(--clr-surface-muted);
    --clr-seg-on: var(--clr-surface);
    --clr-success-tone-ink: var(--clr-success-ink);
    --clr-danger-tone-ink: var(--clr-danger-ink);
    --clr-filtered-line: hsl(217 91% 60% / 0.55);
    --clr-dialog-border: transparent;
    /* N0: status text and icons on a plain surface (not on a tint): the -ink in light, the solid in dark */
    --clr-warning-text: var(--clr-warning-ink);
    --clr-danger-text: var(--clr-danger-ink);
    --clr-success-text: var(--clr-success-ink);
    /* 2b kit round: solid fills under white text (.btn-primary, .btn-danger, counts). White on --clr-primary is
       3.6:1 and on --clr-danger 4.5:1 (3.0 / 4.0 in dark); these are AA (at least 4.5:1) in both themes. */
    --clr-primary-fill: hsl(221, 83%, 53%);
    --clr-primary-fill-hover: hsl(224, 76%, 48%);
    --clr-danger-fill: hsl(354, 70%, 50%);
    --clr-danger-fill-hover: hsl(354, 70%, 44%);

    /* Category palette (the scheduling --role-* values) */
    --cat-0: hsl(217, 82%, 54%); --cat-0-bg: hsl(217, 91%, 94%); --cat-0-ink: hsl(217, 70%, 34%);
    --cat-1: hsl(270, 55%, 55%); --cat-1-bg: hsl(270, 80%, 95%); --cat-1-ink: hsl(270, 55%, 36%);
    --cat-2: hsl(330, 65%, 52%); --cat-2-bg: hsl(330, 85%, 94%); --cat-2-ink: hsl(330, 60%, 34%);
    --cat-3: hsl(174, 72%, 33%); --cat-3-bg: hsl(174, 60%, 89%); --cat-3-ink: hsl(174, 75%, 22%);
    --cat-4: hsl(28, 85%, 48%); --cat-4-bg: hsl(30, 95%, 91%); --cat-4-ink: hsl(24, 80%, 30%);
    --cat-5: hsl(95, 50%, 38%); --cat-5-bg: hsl(90, 50%, 88%); --cat-5-ink: hsl(95, 60%, 24%);
    --cat-none: var(--clr-border-hover); --cat-none-bg: var(--clr-surface-muted); --cat-none-ink: var(--clr-text-muted);

    --scrollbar-thumb: var(--clr-border-hover);
    --scrollbar-track: transparent;
    --scroll-shadow: linear-gradient(to bottom, rgb(15 23 42 / 0.13), rgb(15 23 42 / 0));

    /* -- Type -- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-3xs: 9px;                                 /* initials in the smallest avatar (.ds-avatar.is-xs), never text */
    --fs-2xs: 11.5px;
    --fs-xs: 12px;
    --fs-label: 12.5px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-title: 15px;
    --fs-lg: 16px;
    --fs-xl: 17px;
    --fs-2xl: 22px;
    --fs-3xl: 24px;
    --fs-display: 32px;
    --fs-btn: 0.9rem;                              /* the .btn family (14.4px) */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.25;
    --lh-snug: 1.35;
    --lh-base: 1.5;
    --lh-relaxed: 1.55;
    --tracking-tight: -0.015em;
    --tracking-caps: 0.06em;

    /* -- Space (4px grid) and layout -- */
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --page-max: 1600px;
    --page-gutter: 24px;
    /* The top bar's whole height: 56 px plus the status bar's area when the page is drawn under it (the mobile app and
       installed web apps: viewport-fit=cover); 0 extra in a browser tab. The bar pads itself by the same inset
       (portal-shell.css), so every sticky offset that uses this stays right. */
    --topbar-h: calc(56px + env(safe-area-inset-top, 0px));
    /* Where a list's sticky headings stick while the list flows in the page (phones: portal-components.css "Page
       flow"): under the portal top bar on pages that have one (portal-shell.css sets it), else the window's top. */
    --ds-stick-top: 0px;
    --sidebar-w: 248px;
    --sidebar-rail: 64px;
    /* The split view (Portal.ui.split, components.md "Split view"): the list column's width, per window band (372 px
       from 1280 px, 340 from 1101, 300 from 901; below the compact line the split shows one pane at a time), and the
       record bar's height there (.ds-pane-bar, sticky under the top bar: what scrolls into view stops below it). */
    --ds-split-list: 372px;
    --ds-pane-bar-h: 52px;
    /* The Assistant button (static/helpdesk/widget.css): its size, its inset from the window's corner on desktop, and
       the room a control at the window's bottom right keeps clear of it (.ds-fab-clear). */
    --fab-size: 56px;
    --fab-inset: 20px;
    --fab-room: calc(var(--fab-inset) + var(--fab-size) + var(--space-2));

    /* -- Radii -- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-panel: 16px;          /* the navbar's panels: bell, on site, Calendar & Notepad */
    --radius-pill: 999px;

    /* -- Shadows and rings -- */
    --shadow-pop: 0 18px 40px -12px rgb(15 23 42 / 0.28), 0 4px 10px -4px rgb(15 23 42 / 0.10);
    --shadow-pop-lg: 0 22px 48px -14px rgb(15 23 42 / 0.30), 0 6px 14px -6px rgb(15 23 42 / 0.12);
    --shadow-head: 0 6px 8px -6px rgb(15 23 42 / 0.24);
    --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 0.22);
    /* The phone's bottom dock (the tab bar and a page's action row above it), and while an action row shows. */
    --shadow-dock: 0 -4px 16px rgb(15 23 42 / 0.06);
    --shadow-dock-raised: 0 -4px 16px rgb(15 23 42 / 0.08);
    --shadow-toast: var(--shadow-pop);
    --shadow-tip: 0 6px 16px -4px rgb(0 0 0 / 0.35), 0 2px 5px -2px rgb(0 0 0 / 0.25);
    --shadow-seg-on: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--clr-border);
    --ring: 0 0 0 3px hsl(204 70% 53% / 0.25);
    --ring-danger: 0 0 0 3px color-mix(in srgb, var(--clr-danger) 22%, transparent);

    /* -- Controls -- */
    --ctl-h-xs: 24px;
    --ctl-h-sm: 32px;
    --ctl-h-md: 36px;
    --ctl-h-lg: 40px;
    --ctl-h-touch: 44px;
    --field-h: var(--ctl-h-lg);

    /* -- Icons -- */
    --icon-xs: 13px;
    --icon-sm: 14px;
    --icon-md: 16px;
    --icon-lg: 18px;
    --icon-xl: 20px;
    --icon-2xl: 22px;
    --icon-stroke: 1.8;

    /* -- Z layers -- */
    --z-sticky: 20;
    --z-sidebar: 40;
    --z-header: 50;
    --z-topbar: 60;
    --z-tabbar: 850;
    --z-fab: 900;
    --z-scrim: 1000;
    --z-shell: 1010;
    --z-pop: 1100;
    --z-sheet: 1200;
    --z-modal: 3000;
    --z-toast: 4000;
    --z-tip: 5000;

    /* -- Motion -- */
    --dur-fast: 0.12s;
    --dur: 0.15s;
    --dur-slow: 0.2s;
    --ease: ease;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-crawl: 8s;                                 /* the navigation bar's slow creep while the next page loads (portal-touch.css) */

    /* -- Lane S (Scheduling normalization, 2026-09-24): named tints and shadows that Scheduling made on the spot.
       Washes: a lighter tint than -soft for day cells, highlighted boxes and holiday columns (the soft tint over
       the surface, so both themes follow). Mark: search matches. Switch: the off and mixed tracks at 3:1 against
       the surface (WCAG 1.4.11). Foot shadow: a sticky footer's "more below" cue, the mirror of --shadow-head. -- */
    --clr-primary-wash: color-mix(in srgb, var(--clr-primary-light) 60%, var(--clr-surface));
    --clr-success-wash: color-mix(in srgb, var(--clr-success-soft) 60%, var(--clr-surface));
    --clr-warning-wash: color-mix(in srgb, var(--clr-warning-soft) 60%, var(--clr-surface));
    --clr-danger-wash: color-mix(in srgb, var(--clr-danger-soft) 60%, var(--clr-surface));
    --clr-pink-wash: color-mix(in srgb, var(--clr-pink-soft) 60%, var(--clr-surface));
    --clr-mark: hsl(48, 96%, 80%);
    --clr-switch-off: hsl(215, 16%, 57%);
    --clr-switch-mixed: color-mix(in srgb, var(--clr-primary) 50%, var(--clr-switch-off));
    --shadow-foot: 0 -10px 14px -10px rgb(15 23 42 / 0.28);
    /* Category lines: a role's or category's border (tags, chips, event pills) */
    --cat-0-line: color-mix(in srgb, var(--cat-0) 30%, var(--clr-border));
    --cat-1-line: color-mix(in srgb, var(--cat-1) 30%, var(--clr-border));
    --cat-2-line: color-mix(in srgb, var(--cat-2) 30%, var(--clr-border));
    --cat-3-line: color-mix(in srgb, var(--cat-3) 30%, var(--clr-border));
    --cat-4-line: color-mix(in srgb, var(--cat-4) 30%, var(--clr-border));
    --cat-5-line: color-mix(in srgb, var(--cat-5) 30%, var(--clr-border));
    --cat-none-line: var(--clr-border);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --clr-bg: hsl(222, 28%, 8%);
    --clr-surface: hsl(222, 22%, 12%);
    --clr-surface-muted: hsl(222, 20%, 16%);
    --clr-primary: hsl(217, 91%, 65%);
    --clr-primary-hover: hsl(217, 91%, 72%);
    --clr-primary-light: hsl(217, 40%, 18%);
    --clr-danger: hsl(354, 70%, 58%);
    --clr-danger-hover: hsl(354, 70%, 50%);
    --clr-danger-soft: hsl(0, 40%, 18%);
    --clr-danger-ink: hsl(0, 86%, 86%);
    --clr-success: hsl(145, 55%, 48%);
    --clr-success-soft: hsl(144, 32%, 16%);
    --clr-success-ink: hsl(142, 70%, 80%);
    --clr-text-heading: hsl(210, 40%, 96%);
    --clr-text-body: hsl(214, 18%, 78%);
    --clr-text-muted: hsl(215, 12%, 62%);          /* AA: >= 4.99:1 on every text surface */
    --clr-text-muted-aa: hsl(215, 12%, 62%);       /* the same AA value, never pinned */
    --clr-border: hsl(217, 18%, 22%);
    --clr-border-hover: hsl(217, 18%, 30%);
    --clr-focus-ring: hsl(204, 80%, 62%);
    --clr-warning: hsl(38, 92%, 56%);
    --clr-warning-hover: hsl(38, 92%, 48%);
    --clr-warning-soft: hsl(32, 40%, 16%);
    --clr-warning-ink: hsl(48, 96%, 82%);
    --clr-info: hsl(217, 91%, 65%);
    --clr-info-soft: hsl(217, 40%, 18%);
    --clr-table-stripe: hsl(222, 20%, 14%);
    --clr-row-hover: hsl(222, 20%, 18%);
    --clr-secondary: hsl(210, 12%, 52%);
    --clr-purple: hsl(270, 60%, 72%);
    --clr-purple-soft: hsl(270, 30%, 18%);
    --clr-purple-ink: hsl(270, 70%, 86%);
    --clr-pink: hsl(330, 70%, 72%);
    --clr-pink-soft: hsl(330, 30%, 18%);
    --clr-pink-ink: hsl(330, 80%, 88%);
    --clr-pto: hsl(270, 60%, 72%);
    --clr-pto-light: hsl(270, 30%, 18%);
    --clr-scrim: rgba(0, 0, 0, 0.55);
    --clr-scrim-strong: rgba(0, 0, 0, 0.72);
    --clr-code-bg: hsl(222, 28%, 6%);
    --clr-code-head: hsl(222, 22%, 11%);
    --clr-code-ink: hsl(210, 25%, 90%);
    --clr-code-meta: hsl(215, 14%, 68%);
    --clr-code-border: hsl(217, 18%, 26%);
    --clr-code-hover: hsl(217, 18%, 22%);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.4);

    --clr-primary-ink: hsl(217, 91%, 82%);
    --clr-amber-ink: hsl(45, 90%, 75%);
    --clr-teal: hsl(170, 55%, 50%);
    --clr-teal-soft: hsl(174, 34%, 15%);
    --clr-teal-ink: hsl(168, 60%, 80%);
    --clr-sky: hsl(199, 85%, 62%);
    --clr-sky-soft: hsl(200, 45%, 17%);
    --clr-sky-ink: hsl(199, 90%, 82%);
    --clr-sky-line: hsl(199 85% 62% / 0.4);
    --clr-indigo: hsl(246, 80%, 76%);
    --clr-indigo-soft: hsl(246, 28%, 21%);
    --clr-indigo-ink: hsl(246, 90%, 88%);
    --clr-head-bg: hsl(222, 20%, 18%);
    --clr-head-ink: hsl(210, 30%, 88%);
    --clr-head-line: hsl(217, 18%, 32%);
    --clr-group-pending: hsl(36, 30%, 14%);
    --clr-group-review: hsl(270, 22%, 16%);
    --clr-group-neutral: hsl(222, 20%, 15%);
    --clr-skel: hsl(222, 18%, 18%);
    --clr-skel-hi: hsl(222, 18%, 23%);
    --clr-avatar-bg: hsl(217, 40%, 22%);
    --clr-avatar-ink: hsl(217, 91%, 80%);
    --clr-current-bg: var(--clr-primary-light);
    --clr-current-ink: hsl(217, 91%, 80%);
    --clr-role-admin: hsl(145, 55%, 62%);
    --clr-link: var(--clr-primary-hover);
    --clr-logo-ink: var(--clr-primary-hover);
    --clr-pop-border: var(--clr-border-hover);
    --clr-seg-track: var(--clr-bg);
    --clr-seg-on: var(--clr-surface-muted);
    --clr-success-tone-ink: hsl(142, 60%, 78%);
    --clr-danger-tone-ink: hsl(0, 86%, 84%);
    --clr-dialog-border: var(--clr-border-hover);
    --clr-warning-text: var(--clr-warning);
    --clr-danger-text: hsl(354, 70%, 68%);         /* AA: 5.9:1 on the surface, 4.9:1 on the head band (the solid is 4.3:1) */
    --clr-success-text: var(--clr-success);
    --clr-primary-fill: hsl(221, 83%, 55%);
    --clr-primary-fill-hover: hsl(221, 83%, 50%);
    --clr-danger-fill: hsl(354, 70%, 50%);
    --clr-danger-fill-hover: hsl(354, 70%, 44%);

    --cat-0: hsl(213, 90%, 66%); --cat-0-bg: hsl(217, 40%, 22%); --cat-0-ink: hsl(217, 90%, 84%);
    --cat-1: hsl(270, 70%, 74%); --cat-1-bg: hsl(270, 30%, 24%); --cat-1-ink: hsl(270, 80%, 86%);
    --cat-2: hsl(330, 70%, 70%); --cat-2-bg: hsl(330, 30%, 23%); --cat-2-ink: hsl(330, 80%, 85%);
    --cat-3: hsl(170, 55%, 50%); --cat-3-bg: hsl(174, 35%, 18%); --cat-3-ink: hsl(174, 60%, 76%);
    --cat-4: hsl(30, 85%, 60%); --cat-4-bg: hsl(28, 40%, 20%); --cat-4-ink: hsl(30, 90%, 78%);
    --cat-5: hsl(95, 45%, 55%); --cat-5-bg: hsl(95, 30%, 18%); --cat-5-ink: hsl(90, 55%, 76%);

    --scroll-shadow: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
    --shadow-pop: 0 18px 44px -10px rgb(0 0 0 / 0.65), 0 4px 10px -4px rgb(0 0 0 / 0.5);
    --shadow-pop-lg: 0 24px 52px -12px rgb(0 0 0 / 0.7), 0 6px 14px -6px rgb(0 0 0 / 0.5);
    --shadow-head: 0 6px 8px -6px rgb(0 0 0 / 0.7);
    --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 0.55);
    --shadow-dock: 0 -4px 16px rgb(15 23 42 / 0.06);
    --shadow-dock-raised: 0 -4px 16px rgb(15 23 42 / 0.08);
    --shadow-seg-on: 0 0 0 1px var(--clr-border-hover);
    --ring: 0 0 0 3px hsl(204 80% 62% / 0.3);
    --ring-danger: 0 0 0 3px hsl(354 70% 58% / 0.3);
    /* Lane S (see :root) */
    --clr-mark: hsl(45, 70%, 32%);
    --clr-switch-off: hsl(217, 14%, 46%);
    --shadow-foot: 0 -10px 14px -8px rgb(0 0 0 / 0.6);
}

@media (max-width: 1279px) {
    :root { --ds-split-list: 340px; }
}
@media (max-width: 1100px) {
    :root { --page-gutter: 20px; --ds-split-list: 300px; }
}
@media (max-width: 600px) {
    :root { --page-gutter: 16px; }
}
@media (pointer: coarse) {
    :root { --field-h: var(--ctl-h-touch); }
}