/*
 * Recruiting OS stylesheet.
 *
 * Hand-authored and served exactly as committed: the file that is reviewed is the
 * file that is served (ADR 0049). There is no build step, no Tailwind, no
 * preprocessor. It follows the SnapHop Design System as written (ADR 0050) at the
 * revision DESIGN.md records: every value below is that revision's tokens.json,
 * and every component rule renders what that revision's component renders.
 *
 * Order: fonts · tokens (ramp, roles, scalars) · dark and auto themes · forced
 * colours · motion · base · application shell · components · print · breakpoints.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable-Italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; 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: 400 700; 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; }

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Three theming layers, and every rule below this block references only the second.
     1. RAMP    absolute values; --ink-1000 is the near-black in every theme.
     2. ROLES   what a colour is for. A theme redeclares this layer and nothing else.
     3. THEMES  :root and [data-theme="light"] · [data-theme="dark"] ·
                [data-theme="auto"] · forced colours.
   A ramp name inside a component rule is a colour that cannot be themed.
   Values are the design system's tokens.json at the revision DESIGN.md records;
   StylesheetTest compares them with a verbatim copy of that file. */
:root, [data-theme="light"] {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    /* Layer 1 · ramp */
    --blue-50: #f1f5fb; --blue-100: #e2eaf6; --blue-200: #c6d6ec; --blue-300: #9cb7dd; --blue-400: #5f88c4; --blue-500: #2959aa;
    --blue-600: #204a90; --blue-700: #0f4b6e; --purple-100: #ece4f5; --purple-500: #65359d; --purple-600: #572d88; --cyan-100: #dcedf1;
    --cyan-500: #006c86; --cyan-600: #005a70; --ink-1000: #1a1b26; --ink-900: #24283b; --ink-800: #343b59; --ink-750: #363c4d;
    --ink-700: #414868; --ink-650: #4a5272; --ink-600: #565a6e; --ink-590: #575d79; --ink-580: #5a607b; --ink-570: #5e647e;
    --ink-550: #6c6f85; --ink-500: #7d7f8f; --ink-450: #8a8d9e; --ink-400: #979db8; --ink-350: #a1a6bd; --ink-300: #acb0bf;
    --ink-250: #b2b3b8; --line-strong: #c1c2c7; --line-600: #c7c9d3; --line-500: #cdcfd9; --line-450: #d2d4dd; --line-400: #d6d8df;
    --line-300: #dcdee3; --line-250: #e0e2e8; --line-200: #e1e2e8; --line-150: #e4e5eb; --line-100: #e6e7ed; --line-75: #eaebf0;
    --line-50: #eef0f4; --white: #ffffff; --grey-25: #fafbfd; --grey-50: #f7f8fb; --grey-100: #f2f3f7; --grey-150: #eceef3;
    --grey-200: #e1e2e8; --grey-300: #d6d8df; --green-50: #f2f6ec; --green-100: #e0ead2; --green-200: #cfdcbc; --green-300: #a8bf88;
    --green-500: #4f7c17; --green-600: #41680f; --green-700: #385f0d; --green-800: #33560c; --green-ink: #5a6f43; --amber-100: #f4e7cd;
    --amber-300: #d9b878; --amber-500: #a87016; --amber-600: #96631a; --amber-700: #8f5e15; --amber-750: #875812; --red-50: #faf1f1;
    --red-100: #f0dada; --red-200: #e3c9c9; --red-500: #a83838; --red-600: #942f2f; --red-700: #7d2828; --red-ink: #8c4351;
    --dark-950: #16161e; --dark-900: #1a1b26; --dark-850: #1f2335; --dark-800: #24283b; --dark-750: #292e42; --dark-700: #2f334d;
    --dark-650: #3b4261; --dark-600: #414868; --dark-500: #565f89; --dark-400: #737aa2; --dark-300: #a9b1d6; --dark-200: #c0caf5;

    /* Layer 2 · roles (light) */
    --text-strong: var(--ink-1000); --text-body: var(--ink-750); --text-secondary: var(--ink-650); --text-prose: var(--ink-700);
    --text-detail: var(--ink-600); --text-label: var(--ink-590); --text-muted: var(--ink-580); --text-faint: var(--ink-570);
    --text-hint: var(--ink-350); --text-quiet: var(--ink-250); --text-separator: var(--line-600); --text-link: var(--blue-500);
    --text-link-hover: var(--blue-700); --text-eyebrow: var(--ink-580); --text-on-accent: var(--white); --text-on-inverse: var(--white);
    --text-on-inverse-quiet: var(--ink-450); --text-on-active: var(--blue-500); --text-invalid: var(--amber-750); --surface-page: var(--grey-300);
    --surface-app: var(--line-100); --surface-card: var(--white); --surface-rail: var(--grey-100); --surface-subtle: var(--grey-50);
    --surface-panel: var(--line-75); --surface-scrolled: rgba(255,255,255,.92); --surface-muted: var(--grey-100); --surface-hover: var(--grey-200);
    --surface-active: var(--blue-100); --surface-inverse: var(--ink-1000); --surface-strong: var(--line-400); --surface-control: var(--white);
    --surface-control-disabled: var(--grey-150); --surface-track: var(--grey-200); --surface-skeleton: var(--line-75); --surface-skeleton-sheen: var(--grey-150);
    --surface-danger-subtle: var(--red-50); --border-card: var(--line-150); --border-frame: var(--line-400); --border-divider: var(--line-100);
    --border-divider-strong: var(--line-300); --border-row: var(--line-75); --border-rail: var(--line-200); --border-control: var(--line-250);
    --border-control-hover: var(--line-strong); --border-control-strong: var(--line-strong); --border-dashed: var(--line-450); --border-emphasis: var(--ink-1000);
    --border-danger: var(--red-200); --border-invalid: var(--amber-500); --accent: var(--blue-500); --accent-hover: var(--blue-600);
    --accent-quiet: var(--blue-100); --accent-rule: var(--blue-400); --focus-ring: var(--blue-400); --focus-halo: var(--blue-100);
    --status-ok-bg: var(--green-100); --status-ok-fg: var(--green-700); --status-warn-bg: var(--amber-100); --status-warn-fg: var(--amber-700);
    --status-danger-bg: var(--red-100); --status-danger-fg: var(--red-600); --status-neutral-bg: var(--line-75); --status-neutral-fg: var(--ink-650);
    --status-info-bg: var(--cyan-100); --status-info-fg: var(--cyan-600); --status-ok-mark: var(--green-600); --status-warn-mark: var(--amber-700);
    --status-danger-mark: var(--red-600); --status-danger-strong: var(--red-500); --dot-ok: var(--green-500); --dot-warn: var(--amber-500);
    --dot-danger: var(--red-500); --dot-idle: var(--line-strong); --dot-accent: var(--blue-500); --chart-1: var(--ink-1000);
    --chart-2: var(--ink-600); --chart-3: var(--ink-400); --chart-4: var(--line-strong); --chart-track: var(--grey-200);
    --chart-ok: var(--green-500); --chart-warn: var(--amber-500); --chart-danger: var(--red-500); --diff-add-bg: var(--green-50);
    --diff-add-border: var(--green-200); --diff-add-fg: var(--green-700); --diff-del-bg: var(--red-50); --diff-del-border: var(--red-200);
    --diff-del-fg: var(--red-ink); --scrim: rgba(18,18,26,.34);
    --shadow-card: 0 1px 2px rgba(18,18,26,.04);
    --shadow-frame: 0 1px 3px rgba(18,18,26,.06),0 12px 32px -18px rgba(18,18,26,.18);
    --shadow-popover: 0 2px 6px rgba(18,18,26,.06),0 14px 34px -16px rgba(18,18,26,.22);
    --shadow-modal: 0 8px 20px rgba(18,18,26,.10),0 40px 80px -32px rgba(18,18,26,.32);
    --shadow-knob: 0 1px 2px rgba(18,18,26,.2);
    --shadow-none: none;

    /* Scalars */
    /* spacing */
    --space-1: 3px; --space-2: 4px; --space-3: 5px; --space-4: 6px; --space-5: 7px; --space-6: 8px;
    --space-7: 9px; --space-8: 10px; --space-9: 11px; --space-10: 12px; --space-11: 13px; --space-12: 14px;
    --space-13: 16px; --space-14: 18px; --space-15: 22px; --space-16: 26px; --space-17: 32px; --space-18: 44px;
    --space-19: 52px; --gap-tight: 7px; --gap-inline: 9px; --gap-card: 12px; --gap-section: 14px;
    /* radius */
    --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 7px; --radius-xl: 9px; --radius-2xl: 12px;
    --radius-pill: 999px; --radius-round: 50%;
    /* type size */
    --text-2xs: 9.5px; --text-xs: 10.5px; --text-sm: 11px; --text-base: 11.5px; --text-md: 12px; --text-lg: 12.5px;
    --text-xl: 13px; --text-2xl: 14px; --text-3xl: 16px; --text-4xl: 17px; --text-5xl: 19px; --text-6xl: 26px;
    --text-7xl: 34px;
    /* weight */
    --weight-light: 300; --weight-regular: 450; --weight-medium: 500; --weight-book: 550; --weight-semibold: 600; --weight-strong: 650;
    --weight-bold: 700;
    /* leading */
    --leading-tight: 1; --leading-snug: 1.1; --leading-heading: 1.35; --leading-body: 1.55; --leading-relaxed: 1.65; --leading-code: 1.75;
    /* tracking */
    --tracking-display: -0.03em; --tracking-heading: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-mono: 0.03em; --tracking-label: 0.08em;
    --tracking-eyebrow: 0.12em;
    /* layout */
    --rail-width: 236px; --topbar-height: 46px; --aside-width: 340px; --aside-width-wide: 372px; --frame-width: 1440px; --reading-width: 820px;
    /* control heights: one per size, which every control of that size draws to (README "Control heights") */
    --control-height-sm: 28px; --control-height-md: 32px; --control-height-lg: 40px;
    /* breakpoints (a media condition cannot read these; the px are repeated below) */
    --bp-sm: 600px; --bp-md: 880px; --bp-lg: 1180px; --bp-xl: 1440px; --cols-metric-xl: 5; --cols-metric-lg: 5;
    --cols-metric-md: 3; --cols-metric-sm: 2;
    /* layers */
    --layer-base: 0; --layer-sticky: 20; --layer-rail: 30; --layer-scrim: 50; --layer-modal: 60; --layer-toast: 70;
    --layer-popover: 80; --layer-tooltip: 90;

    /* Composites and motion, from components/bundle.css. */
    --pad-card: 13px 14px; --pad-card-wide: 13px 15px; --pad-row: 11px 14px; --pad-row-wide: 11px 15px;
    --pad-header: 12px 14px; --pad-canvas: 16px 18px; --pad-control: 5px 10px; --pad-control-lg: 9px 11px;
    --radius-badge: var(--radius-sm); --radius-control: var(--radius-md); --radius-card: var(--radius-xl); --radius-frame: var(--radius-2xl);
    --border-hairline: 1px solid var(--border-card); --border-emphasis-2: 2px solid var(--border-emphasis);
    --ease-standard: cubic-bezier(.2,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1);
    --duration-instant: 90ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 240ms;
    --transition-control: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);
}

/* Layer 3 · dark. Inside @media screen, so a dark page prints as ink on paper: the
   result upstream's print.css reaches by setting the light roles back on paper.
   <html data-theme> is the reader's choice from the theme switch (light, dark or
   auto); "auto" follows the operating system. */
@media screen {
    [data-theme="dark"] {
        color-scheme: dark;
        --text-strong: #c0caf5; --text-body: #a9b1d6; --text-secondary: #9ba3c6; --text-prose: #a9b1d6;
        --text-detail: #99a1cb; --text-label: #949cc5; --text-muted: #8f98c1; --text-faint: #8c94bc;
        --text-hint: #565f89; --text-quiet: #4c5474; --text-separator: #414868; --text-link: #7aa2f7;
        --text-link-hover: #9ab8ff; --text-eyebrow: #8f98c1; --text-on-accent: #16161e; --text-on-inverse: #16161e;
        --text-on-inverse-quiet: #495074; --text-on-active: #c0caf5; --text-invalid: #e0af68; --surface-page: #16161e;
        --surface-app: #1a1b26; --surface-card: #1f2335; --surface-rail: #16161e; --surface-subtle: #24283b;
        --surface-panel: #24283b; --surface-scrolled: rgba(31,35,53,.92); --surface-muted: #1a1b26; --surface-hover: #292e42;
        --surface-active: #283457; --surface-inverse: #c0caf5; --surface-strong: #414868; --surface-control: #1f2335;
        --surface-control-disabled: #22263a; --surface-track: #292e42; --surface-skeleton: #24283b; --surface-skeleton-sheen: #2f334d;
        --surface-danger-subtle: #2b1f28; --border-card: #2b3049; --border-frame: #292e42; --border-divider: #24283b;
        --border-divider-strong: #2f334d; --border-row: #232739; --border-rail: #24283b; --border-control: #343a54;
        --border-control-hover: #414868; --border-control-strong: #414868; --border-dashed: #3b4261; --border-emphasis: #c0caf5;
        --border-danger: #5c3140; --border-invalid: #e0af68; --accent: #7aa2f7; --accent-hover: #9ab8ff;
        --accent-quiet: #283457; --accent-rule: #3d59a1; --focus-ring: #7aa2f7; --focus-halo: rgba(122,162,247,.28);
        --status-ok-bg: #22301f; --status-ok-fg: #9ece6a; --status-warn-bg: #322a1c; --status-warn-fg: #e0af68;
        --status-danger-bg: #331f26; --status-danger-fg: #f7768e; --status-neutral-bg: #292e42; --status-neutral-fg: #a9b1d6;
        --status-info-bg: #17303a; --status-info-fg: #7dcfff; --status-ok-mark: #9ece6a; --status-warn-mark: #e0af68;
        --status-danger-mark: #f7768e; --status-danger-strong: #f7768e; --dot-ok: #9ece6a; --dot-warn: #e0af68;
        --dot-danger: #f7768e; --dot-idle: #414868; --dot-accent: #7aa2f7; --chart-1: #c0caf5;
        --chart-2: #8e97bd; --chart-3: #565f89; --chart-4: #3b4261; --chart-track: #292e42;
        --chart-ok: #9ece6a; --chart-warn: #e0af68; --chart-danger: #f7768e; --diff-add-bg: #1e2a1e;
        --diff-add-border: #33482f; --diff-add-fg: #9ece6a; --diff-del-bg: #2b1f26; --diff-del-border: #4a2f3a;
        --diff-del-fg: #f7768e; --scrim: rgba(0,0,0,.58);
        --shadow-card: 0 1px 2px rgba(0,0,0,.30);
        --shadow-frame: 0 1px 3px rgba(0,0,0,.40),0 12px 32px -18px rgba(0,0,0,.70);
        --shadow-popover: 0 2px 6px rgba(0,0,0,.40),0 14px 34px -16px rgba(0,0,0,.75);
        --shadow-modal: 0 8px 20px rgba(0,0,0,.45),0 40px 80px -32px rgba(0,0,0,.80);
        --shadow-knob: 0 1px 2px rgba(0,0,0,.5);
    }
    [data-theme="auto"] { color-scheme: light dark; }
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] {
            --text-strong: #c0caf5; --text-body: #a9b1d6; --text-secondary: #9ba3c6; --text-prose: #a9b1d6;
            --text-detail: #99a1cb; --text-label: #949cc5; --text-muted: #8f98c1; --text-faint: #8c94bc;
            --text-hint: #565f89; --text-quiet: #4c5474; --text-separator: #414868; --text-link: #7aa2f7;
            --text-link-hover: #9ab8ff; --text-eyebrow: #8f98c1; --text-on-accent: #16161e; --text-on-inverse: #16161e;
            --text-on-inverse-quiet: #495074; --text-on-active: #c0caf5; --text-invalid: #e0af68; --surface-page: #16161e;
            --surface-app: #1a1b26; --surface-card: #1f2335; --surface-rail: #16161e; --surface-subtle: #24283b;
            --surface-panel: #24283b; --surface-scrolled: rgba(31,35,53,.92); --surface-muted: #1a1b26; --surface-hover: #292e42;
            --surface-active: #283457; --surface-inverse: #c0caf5; --surface-strong: #414868; --surface-control: #1f2335;
            --surface-control-disabled: #22263a; --surface-track: #292e42; --surface-skeleton: #24283b; --surface-skeleton-sheen: #2f334d;
            --surface-danger-subtle: #2b1f28; --border-card: #2b3049; --border-frame: #292e42; --border-divider: #24283b;
            --border-divider-strong: #2f334d; --border-row: #232739; --border-rail: #24283b; --border-control: #343a54;
            --border-control-hover: #414868; --border-control-strong: #414868; --border-dashed: #3b4261; --border-emphasis: #c0caf5;
            --border-danger: #5c3140; --border-invalid: #e0af68; --accent: #7aa2f7; --accent-hover: #9ab8ff;
            --accent-quiet: #283457; --accent-rule: #3d59a1; --focus-ring: #7aa2f7; --focus-halo: rgba(122,162,247,.28);
            --status-ok-bg: #22301f; --status-ok-fg: #9ece6a; --status-warn-bg: #322a1c; --status-warn-fg: #e0af68;
            --status-danger-bg: #331f26; --status-danger-fg: #f7768e; --status-neutral-bg: #292e42; --status-neutral-fg: #a9b1d6;
            --status-info-bg: #17303a; --status-info-fg: #7dcfff; --status-ok-mark: #9ece6a; --status-warn-mark: #e0af68;
            --status-danger-mark: #f7768e; --status-danger-strong: #f7768e; --dot-ok: #9ece6a; --dot-warn: #e0af68;
            --dot-danger: #f7768e; --dot-idle: #414868; --dot-accent: #7aa2f7; --chart-1: #c0caf5;
            --chart-2: #8e97bd; --chart-3: #565f89; --chart-4: #3b4261; --chart-track: #292e42;
            --chart-ok: #9ece6a; --chart-warn: #e0af68; --chart-danger: #f7768e; --diff-add-bg: #1e2a1e;
            --diff-add-border: #33482f; --diff-add-fg: #9ece6a; --diff-del-bg: #2b1f26; --diff-del-border: #4a2f3a;
            --diff-del-fg: #f7768e; --scrim: rgba(0,0,0,.58);
            --shadow-card: 0 1px 2px rgba(0,0,0,.30);
            --shadow-frame: 0 1px 3px rgba(0,0,0,.40),0 12px 32px -18px rgba(0,0,0,.70);
            --shadow-popover: 0 2px 6px rgba(0,0,0,.40),0 14px 34px -16px rgba(0,0,0,.75);
            --shadow-modal: 0 8px 20px rgba(0,0,0,.45),0 40px 80px -32px rgba(0,0,0,.80);
            --shadow-knob: 0 1px 2px rgba(0,0,0,.5);
        }
    }
}

/* Layer 3 · forced colours. The OS replaces colour wholesale. Every structural
   border maps to CanvasText, because the 2px emphasis border is how this
   application marks an external or irreversible effect. The disabled dashed edge
   is GrayText, the system colour for unavailable; the hover border and the focus
   ring, which mark an interaction rather than structure, are Highlight. A subtree
   marked data-theme="light" is listed too, or the light roles set on it above
   would undo this block there. */
@media (forced-colors: active) {
    :root, [data-theme="light"], [data-theme="dark"], [data-theme="auto"] {
        forced-color-adjust: none;
        --text-strong: CanvasText; --text-body: CanvasText; --text-secondary: CanvasText; --text-prose: CanvasText;
        --text-detail: CanvasText; --text-label: CanvasText; --text-muted: CanvasText; --text-faint: GrayText;
        --text-hint: GrayText; --text-quiet: GrayText; --text-separator: CanvasText; --text-link: LinkText;
        --text-link-hover: LinkText; --text-eyebrow: CanvasText; --text-on-accent: HighlightText; --text-on-inverse: Canvas;
        --text-on-inverse-quiet: Canvas; --text-on-active: HighlightText; --text-invalid: CanvasText;
        --surface-page: Canvas; --surface-app: Canvas; --surface-card: Canvas; --surface-rail: Canvas;
        --surface-subtle: Canvas; --surface-panel: Canvas; --surface-scrolled: Canvas; --surface-muted: Canvas;
        --surface-hover: Canvas; --surface-active: Highlight; --surface-inverse: CanvasText; --surface-strong: Canvas;
        --surface-control: Field; --surface-control-disabled: Canvas; --surface-track: Canvas; --surface-skeleton: Canvas;
        --surface-skeleton-sheen: Canvas; --surface-danger-subtle: Canvas;
        --border-card: CanvasText; --border-frame: CanvasText; --border-divider: CanvasText; --border-divider-strong: CanvasText;
        --border-row: CanvasText; --border-rail: CanvasText; --border-control: CanvasText; --border-control-hover: Highlight;
        --border-control-strong: CanvasText; --border-dashed: GrayText; --border-emphasis: CanvasText; --border-danger: CanvasText;
        --border-invalid: CanvasText;
        --accent: Highlight; --accent-hover: Highlight; --accent-quiet: Canvas; --accent-rule: CanvasText;
        --focus-ring: Highlight; --focus-halo: transparent;
        --status-ok-bg: Canvas; --status-ok-fg: CanvasText; --status-warn-bg: Canvas; --status-warn-fg: CanvasText;
        --status-danger-bg: Canvas; --status-danger-fg: CanvasText; --status-neutral-bg: Canvas; --status-neutral-fg: CanvasText;
        --status-info-bg: Canvas; --status-info-fg: CanvasText; --status-ok-mark: CanvasText; --status-warn-mark: CanvasText;
        --status-danger-mark: CanvasText; --status-danger-strong: CanvasText;
        --dot-ok: CanvasText; --dot-warn: CanvasText; --dot-danger: CanvasText; --dot-idle: GrayText; --dot-accent: Highlight;
        --chart-1: CanvasText; --chart-2: CanvasText; --chart-3: CanvasText; --chart-4: CanvasText;
        --chart-track: Canvas; --chart-ok: CanvasText; --chart-warn: CanvasText; --chart-danger: CanvasText;
        --diff-add-bg: Canvas; --diff-add-border: CanvasText; --diff-add-fg: CanvasText;
        --diff-del-bg: Canvas; --diff-del-border: CanvasText; --diff-del-fg: CanvasText;
        --shadow-card: none; --shadow-frame: none; --shadow-popover: none; --shadow-modal: none; --shadow-knob: none;
        --scrim: Canvas;
    }
    /* A status badge and a diff panel lose their tint here, so they keep the edge
       that was doing the work. Marked at the source with data-status and data-diff,
       and by class for the badges a template renders. */
    [data-status], [data-diff], .badge, .state-badge, .mono-chip { border: 1px solid CanvasText !important; }
    /* Anything whose whole signal was a fill keeps an outline against Canvas. */
    [data-fill], input[type="checkbox"]:checked { outline: 1px solid CanvasText; }
}

/* ── Motion ──────────────────────────────────────────────────────────────────
   Only surfaces that arrive animate (the Menu, a toast, a dialog and its scrim),
   and an action under way (a pending button's rule). Both keyframes move on the block axis or scale from
   the centre, so they read the same under dir="rtl". */
@keyframes snaphop-pending { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes snaphop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes snaphop-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Motion is never information, so removing it is a blanket kill on [data-motion].
   The pending rule is the one animation that repeats: cutting its duration would
   make it flicker, so it stops and stands still at full width instead. */
@media (prefers-reduced-motion: reduce) {
    [data-motion], .dialog-scrim, .dialog { animation-duration: 1ms !important; animation-delay: 0ms !important; }
    [data-motion="pending"], .button[aria-busy="true"]::after { animation: none !important; }
}

/* ── Base ────────────────────────────────────────────────────────────────────
   This file carries its own reset. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; background: var(--surface-page); font-family: var(--font-sans); line-height: 1.5; }
body { min-height: 100vh; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, menu { list-style: none; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
th { font-weight: inherit; text-align: start; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
/* Mono means "this string is exact", so it reads left to right and is isolated from the text around it in any direction. */
code, kbd, samp, pre, .mono, .mono-chip, .cell-mono, .meta-mono { direction: ltr; unicode-bidi: isolate; }
b, strong { font-weight: var(--weight-strong); }
small { font-size: 80%; }
em, i { font-style: italic; }
fieldset { min-width: 0; }
legend { display: block; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
svg, img { display: block; max-width: 100%; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }
button, input[type="button"], input[type="reset"], input[type="submit"] { appearance: button; cursor: pointer; }
textarea { resize: vertical; }
::placeholder { opacity: 1; color: var(--text-faint); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
::selection { background: var(--accent-quiet); color: var(--text-strong); }
/* In forced colours the selection above would be Canvas behind CanvasText: invisible. */
@media (forced-colors: active) { ::selection { background: Highlight; color: HighlightText; } }
[hidden] { display: none !important; }

/* A link is underlined, not only coloured: --text-link is about 1.6:1 against
   --text-body, below the 3:1 WCAG 1.4.1 asks for when colour alone marks a link.
   Navigation chrome that draws its own treatment -- the brand, rail rows, menu
   rows, tabs, the breadcrumb, a link styled as a button -- sets none. SnapHop
   Web's pages mark their links .text-link, which is the same link. */
a, .text-link { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--transition-control); }
a:hover, .text-link:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
.brand, .rail-nav a, .menu-item, .tab, .breadcrumb a, .button, .skip-link { text-decoration: none; }
/* Link quiet: muted until hovered, still underlined. Size lg is 12.5px. */
.link-quiet { color: var(--text-muted); }
.link-lg { font-size: var(--text-lg); }
.link-quiet[aria-current="page"] { color: var(--text-strong); }

h1 { color: var(--text-strong); font-size: var(--text-5xl); font-weight: var(--weight-bold); letter-spacing: -0.025em; }
h2 { color: var(--text-strong); font-size: var(--text-3xl); font-weight: var(--weight-strong); letter-spacing: var(--tracking-heading); }
h3 { color: var(--text-strong); font-size: var(--text-lg); font-weight: var(--weight-strong); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: var(--layer-tooltip); padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--text-on-inverse); font-weight: var(--weight-semibold); transform: translateY(-200%); }
.skip-link:focus { transform: none; color: var(--text-on-inverse); }

/* ── Application shell ──────────────────────────────────────────────────────
   The design system's app shell: the frame is the one elevated surface, on the
   card colour; a 236px rail; a 46px top bar; the canvas on --surface-app at
   16px 18px. */
.app-page { min-height: 100vh; padding: 18px; background: var(--surface-page); }
.app-frame { width: min(100%, var(--frame-width)); min-height: calc(100vh - 36px); display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); margin: 0 auto; overflow: hidden; border: 1px solid var(--border-frame); border-radius: var(--radius-frame); background: var(--surface-card); box-shadow: var(--shadow-frame); }
.app-rail { display: flex; flex-direction: column; min-width: 0; border-inline-end: 1px solid var(--border-rail); background: var(--surface-rail); }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.canvas { flex: 1; min-width: 0; padding: var(--pad-canvas); background: var(--surface-app); }

/* In-app lockup: wordmark, hairline, product name in Inter at regular weight. Never merged into one phrase.
   The wordmark's size is the logo's -- 15px in the rail, 20px on a standalone screen -- not a step of the type
   scale; every piece of text below names a size through the type tokens (README "Type in an application"). */
.brand { display: flex; flex: none; align-items: center; gap: 8px; padding: 14px 14px 12px; color: var(--text-strong); }
.brand:hover { color: var(--text-strong); }
.wordmark { color: var(--text-strong); font: 700 15px/1 var(--font-mono); white-space: nowrap; }
.wordmark-accent { color: var(--text-link); }
.brand-divider { width: 1px; height: 13px; flex: none; background: var(--surface-strong); }
.product-name { color: var(--text-detail); font-size: var(--text-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); white-space: nowrap; }

/* The workspace switcher, the design system's (ui_kits/console Shell.jsx): a Menu
   whose trigger names the active workspace, always visible (AGENTS.md 10.1, 2.5).
   A <details>, so it opens with no script; each row is a plain form post. */
.workspace-switcher { flex: none; padding: 0 10px 12px; }
.workspace-trigger { width: 216px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-frame); border-radius: var(--radius-lg); padding: 7px 9px; background: var(--surface-card); text-align: start; cursor: pointer; transition: var(--transition-control); }
.workspace-trigger:hover { border-color: var(--border-control-hover); }
.workspace-trigger-text { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.workspace-name { color: var(--text-strong); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.workspace-label { color: var(--text-faint); font-size: var(--text-2xs); }
.workspace-trigger > .chevron { margin-inline: auto 2px; }

/* Avatar: initials, never a picture. Square ink for a workspace, round neutral for a person;
   the neutral initials are --text-strong on --surface-strong, 12.0:1 light and 5.5:1 dark. The 8px
   initials are the Avatar's own metric at 20px, as the kit draws it, not a step of the type scale. */
.avatar { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-round); background: var(--surface-strong); color: var(--text-strong); font-family: var(--font-sans); font-size: 8px; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.avatar-workspace { width: 18px; height: 18px; border-radius: var(--radius-sm); background: var(--surface-inverse); color: var(--text-on-inverse); }

/* The rail's foot, pinned: the account link, who is signed in, the theme, and the way out. */
.rail-footer { display: grid; gap: 10px; margin-top: auto; border-top: 1px solid var(--border-divider); padding: 12px 10px; }
.rail-footer > * { padding-inline: 9px; }
.rail-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail-user-text { display: flex; min-width: 0; flex-direction: column; }
.rail-user-name { color: var(--text-body); font-size: var(--text-sm); font-weight: var(--weight-book); overflow-wrap: anywhere; }
.rail-user-sub { color: var(--text-faint); font-size: var(--text-2xs); overflow-wrap: anywhere; }
/* The theme switch: the sm ButtonGroup, "Light", "Dark" and "Auto" as three equal segments on one line
   across the rail, with no visible word naming it; "Theme" is its accessible name alone. */
.theme-switch { display: flex; }
.theme-switch > .button-group { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* SidebarNav: 12.5px rows, the current one --surface-active with --text-on-active at 650. */
.rail-nav ul { display: flex; flex-direction: column; gap: 1px; padding: 10px 10px 0; }
.rail-nav a { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); padding: 5.5px 9px; color: var(--text-secondary); font-size: var(--text-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-nav a:hover { background: var(--surface-hover); color: var(--text-secondary); }
.rail-nav a[aria-current="page"] { background: var(--surface-active); color: var(--text-on-active); font-weight: var(--weight-strong); }

/* The top bar: below 600px the Menu that replaces the rail, then the breadcrumb, then the page's own actions. */
.topbar { height: var(--topbar-height); flex: none; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--border-divider); padding: 0 18px; }
.breadcrumb { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: var(--text-base); white-space: nowrap; }
.breadcrumb > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb [aria-current="page"] { color: var(--text-strong); }
.breadcrumb-sep { flex: none; color: var(--text-separator); }
.topbar-actions { display: flex; flex: none; align-items: center; gap: 8px; margin-inline-start: auto; }

/* Below --bp-sm the rail is replaced by the top bar's Menu, its first control. Hidden above it. */
.topbar-menu { display: none; flex: none; }

/* ── Page structure ─────────────────────────────────────────────────────────*/
.page-head { margin-bottom: 14px; }
.page-lede { max-width: 900px; margin-top: 6px; color: var(--text-detail); font-size: var(--text-base); line-height: var(--leading-body); }
.back-link { margin-bottom: 10px; font-size: var(--text-xs); }
.page-footnote { margin-top: 22px; color: var(--text-faint); font-size: var(--text-xs); }

/* A titled region of a page. The title is the design system's Eyebrow, opening a section; never over a page
   title (the breadcrumb already says where the page is) and never as a kicker repeating a card's title. */
.section { margin-top: 18px; }
.section:first-child { margin-top: 0; }
.section-title, .eyebrow { display: block; margin-bottom: 7px; color: var(--text-eyebrow); font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
/* An error page's status code: a machine value, in mono and the muted text, with no eyebrow. */
.status-code { color: var(--text-muted); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 7px; }
.section-head .section-title { margin-bottom: 0; }
.subhead { margin-bottom: 4px; color: var(--text-strong); font-size: var(--text-lg); font-weight: var(--weight-strong); }

/* Layout helpers. Spacing is the design system's half-steps; content columns are
   1fr plus a fixed aside, never a symmetric grid. */
.stack { display: grid; gap: 12px; align-content: start; }
.stack > * { min-width: 0; }
.stack-tight { display: grid; gap: 7px; align-content: start; }
.flow > * + * { margin-top: 8px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cluster-between { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-width); gap: 12px; align-items: start; }
.prose { max-width: var(--reading-width); }

/* ── Text ───────────────────────────────────────────────────────────────────*/
.text-secondary { color: var(--text-secondary); }
.text-detail { color: var(--text-detail); }
.text-muted { color: var(--text-muted); }
.text-strong { color: var(--text-strong); font-weight: var(--weight-strong); }
.text-regular { font-weight: var(--weight-regular); }
.meta { color: var(--text-muted); font-size: var(--text-xs); }
/* Mono, size sm: 10.5px at the mono tracking. */
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); }
.meta-mono { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); }
/* A time: the reader's locale, never ISO, in the muted sans of a meta line (type-meta), never mono, wherever it
   sits -- a row's second line, a fact, an event. The server writes it in the request's locale; time.js rewrites
   it in the reader's own, from its datetime. */
.time { color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: 0; white-space: nowrap; }
.truncate { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pre-line { white-space: pre-line; }
.list-bullets { padding-inline-start: 18px; list-style: disc; }
.list-bullets > li + li { margin-top: 3px; }
.list-rows > li + li { margin-top: 5px; }
.code-block { overflow-x: auto; border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 10px 12px; background: var(--surface-panel); color: var(--text-strong); font: var(--text-sm)/var(--leading-code) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Card ───────────────────────────────────────────────────────────────────
   White on the canvas, a 1px hairline, 9px corners, no shadow. */
.card { min-width: 0; overflow: hidden; border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: var(--pad-card); background: var(--surface-card); }
.card-flush { padding: 0; }
.card-emphasis { border: var(--border-emphasis-2); }
/* The header strip: title, meta, action. */
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: -13px -14px 13px; border-bottom: 1px solid var(--border-divider); padding: 11px 14px; }
.card-flush > .card-head { margin: 0; }
.card-head h2, .card-head h3 { color: var(--text-strong); font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: 0; }
/* The footnote strip: a constraint in full sentences at the foot of a card. */
.card-footnote { margin: 13px -14px -13px; padding: 10px 14px; background: var(--surface-subtle); color: var(--text-detail); font-size: var(--text-sm); line-height: var(--leading-body); }
.card-flush > .card-footnote { margin: 0; }

/* Callout: anything external, irreversible or blocking. A 2px ink border on the
   card colour, with no coloured variant. */
.callout { border: var(--border-emphasis-2); border-radius: var(--radius-card); padding: 13px 15px; background: var(--surface-card); color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.callout > * { max-width: 900px; }
.callout > * + * { margin-top: 3px; }
.callout-title { color: var(--text-strong); font-size: var(--text-xl); font-weight: var(--weight-bold); }
/* An outcome stated on the page itself: an in-card panel, ErrorRow's metrics with
   the card's hairline. */
.notice { border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 11px 13px; background: var(--surface-card); color: var(--text-body); line-height: var(--leading-body); }
.notice > * + * { margin-top: 4px; }
/* An internal-only statement: the panel tint, no border weight. */
.notice-quiet { border-color: transparent; background: var(--surface-panel); }
/* A success: ErrorRow's 3px strip on the reading-start edge, in the ok mark. */
.notice-ok { border-inline-start: 3px solid var(--status-ok-mark); }
/* Annotation: a 2px accent rule on the reading-start edge, with quoted text. */
.annotation { max-width: var(--reading-width); border-inline-start: 2px solid var(--accent-rule); padding: 7px 11px; background: var(--surface-subtle); color: var(--text-body); }
.annotation > * + * { margin-top: 4px; }

/* EmptyState: a dashed panel that names the empty condition in words. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 1px dashed var(--border-dashed); border-radius: var(--radius-card); padding: 52px 22px; background: var(--surface-card); text-align: center; }
.empty-title { color: var(--text-strong); font-size: var(--text-2xl); font-weight: var(--weight-strong); letter-spacing: var(--tracking-heading); }
.empty-state > :not(.empty-title) { max-width: 420px; color: var(--text-detail); font-size: var(--text-base); line-height: var(--leading-body); text-wrap: pretty; }
.empty-state > .notice { color: var(--text-body); }
/* ErrorState: a refused or failed request. Red, a dashed danger edge, and a line
   saying whether retrying can help. */
.error-state { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 1px dashed var(--border-danger); border-radius: var(--radius-card); padding: 44px 22px; background: var(--surface-card); text-align: center; }
.error-state-title { color: var(--status-danger-fg); font-size: var(--text-2xl); font-weight: var(--weight-strong); letter-spacing: var(--tracking-heading); }
.error-state-body { max-width: 440px; color: var(--text-detail); font-size: var(--text-base); line-height: var(--leading-body); text-wrap: pretty; }
.error-state-retry { color: var(--text-muted); font-size: var(--text-xs); }
.error-state-reference { margin-top: 2px; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); }

/* ErrorSummary: a form that refused to submit. Focused when it appears, every
   entry a link to its field. Red, because the form refused; each field stays amber. */
.error-summary { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border-danger); border-radius: var(--radius-lg); padding: 12px 14px; background: var(--surface-danger-subtle); outline: none; }
.error-summary-title { color: var(--status-danger-fg); font-size: var(--text-md); font-weight: var(--weight-strong); letter-spacing: var(--tracking-heading); }
.error-summary-list { display: flex; flex-direction: column; gap: 5px; padding-inline-start: 18px; list-style: decimal; }
.error-summary-list > li { color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); text-wrap: pretty; }
.error-summary-list a { font-weight: var(--weight-semibold); }
.error-summary-list strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.error-summary-note { color: var(--text-detail); font-size: var(--text-xs); line-height: var(--leading-body); }

/* ErrorRow: one region of a working page failed and the rest is still usable, or a request a dialog made was
   refused. A 3px danger bar on the reading-start edge, then the sentence. The standalone screens draw it plainer
   (below). */
.error-row { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border-danger); border-radius: var(--radius-lg); padding: 11px 13px; background: var(--surface-danger-subtle); color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.error-row::before { content: ""; flex: none; align-self: stretch; width: 3px; border-radius: 2px; background: var(--status-danger-strong); }
.error-row > * { min-width: 0; flex: 1; overflow-wrap: anywhere; }
/* Why a row has no action, in place of the button: the row's own reason, never the reader's role. */
.row-note { color: var(--text-muted); font-size: var(--text-sm); }

/* ── Badge ──────────────────────────────────────────────────────────────────
   Status is never carried by colour alone: every badge spells its state out, in
   words a person reads and in sentence case ("Needs review", "Web"), as SnapHop
   Maps shows "Release 1 live" -- the neutral Badge in the sans, never the raw
   code (the @labels helper). A raw code stays mono only where it is an
   identifier a person would copy: .mono-chip for a tool id.
   .badge-external is the outline Badge; .state-badge takes a tone. */
.badge, .state-badge { display: inline-block; border: 1px solid transparent; border-radius: var(--radius-badge); padding: 2px 6px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; }
.badge-external { border-color: var(--border-control-strong); background: transparent; color: var(--text-strong); }
.state-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.state-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.state-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.state-info { background: var(--status-info-bg); color: var(--status-info-fg); }
/* A listed set of identifiers (the tools an agent asks for): the neutral mono Badge. */
.mono-chip { display: inline-block; border: 1px solid transparent; border-radius: var(--radius-badge); padding: 2px 6px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-mono); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }

/* MetricCard: a 10.5px label, a 26px value, a muted line under it. The strip
   holds --cols-metric-* to a row at each step: five at --bp-lg and wider, three
   from --bp-md, two below it (the breakpoints below). */
.metric-strip { display: grid; grid-template-columns: repeat(var(--cols-metric-xl), minmax(0, 1fr)); gap: 10px; }
.metric-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 12px 13px; background: var(--surface-card); }
.metric-label { color: var(--text-label); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
.metric-value { color: var(--text-strong); font-size: var(--text-6xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.metric-sub { color: var(--text-muted); font-size: var(--text-xs); }

/* ── KeyValue ───────────────────────────────────────────────────────────────
   Columns: the provenance grid, a 10.5px muted label over a 12px strong value.
   Inline: an 84px muted label beside a strong value. */
.kv { display: grid; grid-template-columns: repeat(var(--kv-columns, 2), minmax(0, 1fr)); gap: 12px 22px; }
.kv-1 { --kv-columns: 1; }
.kv-3 { --kv-columns: 3; }
.kv-4 { --kv-columns: 4; }
.kv > div { min-width: 0; }
.kv dt { color: var(--text-muted); font-size: var(--text-xs); }
.kv dd { margin-top: 2px; color: var(--text-strong); font-size: var(--text-md); overflow-wrap: anywhere; }
.kv-inline { display: flex; flex-direction: column; gap: 7px; font-size: var(--text-base); }
.kv-inline > div { display: flex; gap: 9px; }
.kv-inline dt { width: 84px; flex: none; color: var(--text-muted); overflow-wrap: anywhere; }
.kv-inline dd { min-width: 0; color: var(--text-strong); overflow-wrap: anywhere; }

/* ── DiffPair and DiffLines ─────────────────────────────────────────────────
   Two equal panels in desaturated tints, so a diff never reads as an error. The
   sign is drawn and hidden from assistive technology; the label says which side. */
.diff-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.diff-side { min-width: 0; border: 1px solid; border-radius: var(--radius-lg); padding: 10px 12px; }
.diff-side.diff-del { border-color: var(--diff-del-border); background: var(--diff-del-bg); }
.diff-side.diff-add { border-color: var(--diff-add-border); background: var(--diff-add-bg); }
.diff-label { display: block; font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.07em; text-transform: uppercase; }
.diff-del .diff-label { color: var(--diff-del-fg); }
.diff-add .diff-label { color: var(--diff-add-fg); }
.diff-del .diff-label::before { content: "\2212\00a0" / ""; }
.diff-add .diff-label::before { content: "+\00a0" / ""; }
.diff-value { margin-top: 5px; color: var(--text-strong); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-heading); overflow-wrap: anywhere; }
.diff-lines { display: block; padding-block: 10px; font-family: var(--font-mono); font-size: var(--text-base); line-height: var(--leading-code); }
.diff-line { display: block; padding: 0 14px 0 32px; color: var(--text-body); text-indent: -18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-line.diff-add { background: var(--diff-add-bg); color: var(--diff-add-fg); }
.diff-line.diff-del { background: var(--diff-del-bg); color: var(--diff-del-fg); }
.diff-sign { display: inline-block; width: 18px; text-indent: 0; opacity: .7; }

/* ── Button ─────────────────────────────────────────────────────────────────
   Secondary by default; at most one primary per decision; inverse for a
   commit-style confirmation whose effect is irreversible. Hover is one step, and
   a disabled or pending button does not react. Disabled is dashed and says why in
   its own label. Pending keeps its variant's colours and draws a 2px rule. Each
   size is one height every control of that size shares -- md 32px by default, sm
   28px, lg 40px -- so a button beside a field of its size lines up with it. */
.button { position: relative; overflow: hidden; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: var(--control-height-md); border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 0 12px; background: var(--surface-control); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1; text-align: center; white-space: nowrap; cursor: pointer; transition: var(--transition-control); }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.button-inverse { border-color: var(--border-emphasis); background: var(--surface-inverse); color: var(--text-on-inverse); }
.button-sm { height: var(--control-height-sm); padding: 0 10px; font-weight: var(--weight-book); }
.button-lg, .button-large { height: var(--control-height-lg); border-radius: var(--radius-lg); padding: 0 16px; font-size: var(--text-md); font-weight: var(--weight-strong); }
.button-block { display: flex; width: 100%; }
/* Danger: the action that removes access, in a confirming dialog. Its hover takes the tint only. */
.button-danger { border-color: var(--border-danger); color: var(--status-danger-fg); }
.button:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { border-color: var(--border-control-hover); background: var(--surface-subtle); color: var(--text-body); }
.button-primary:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--text-on-accent); }
.button-inverse:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { border-color: var(--border-emphasis); background: var(--surface-inverse); color: var(--text-on-inverse); }
.button-danger:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { border-color: var(--border-danger); background: var(--surface-subtle); color: var(--status-danger-fg); }
.button:disabled, .button[aria-disabled="true"] { border: 1px dashed var(--border-dashed); background: var(--surface-control-disabled); color: var(--text-faint); cursor: default; }
.button[aria-busy="true"] { cursor: progress; }
/* SnapHop Web's dom.js marks a pending button aria-busy and adds no element, so the rule is drawn on the button
   itself, unless a module has already added the rule as an element. */
.button[aria-busy="true"]:not(:has(> .button-pending-rule))::after, .button-pending-rule { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: currentColor; opacity: .55; transform-origin: center; animation: snaphop-pending 1.1s var(--ease-standard) infinite; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ButtonGroup at sm: a joined row of mutually exclusive choices on one line, 28px
   as every sm control is, the selected one in ink. Used for the theme switch. */
.button-group { display: inline-flex; height: var(--control-height-sm); overflow: hidden; border: 1px solid var(--border-control); border-radius: var(--radius-control); background: var(--surface-control); }
.button-group-option { min-width: 0; border: 0; border-inline-start: 1px solid var(--border-control); padding: 0 9px; background: transparent; color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-book); letter-spacing: var(--tracking-tight); line-height: 1; white-space: nowrap; cursor: pointer; transition: var(--transition-control); }
.button-group-option:first-child { border-inline-start: 0; }
.button-group-option:is([aria-pressed="true"], [aria-checked="true"]) { background: var(--surface-inverse); color: var(--text-on-inverse); font-weight: var(--weight-semibold); }

/* The dropdown chevron, after every select, switcher and menu trigger: a 7px
   square drawn by two 1.5px --text-muted borders rotated 45 degrees, 8px after the
   label. Never the glyph, which is too small to find. The borders are physical on
   purpose: rotated, they point down in either writing direction, and the chevron
   is symmetric, so it needs no mirroring. */
.chevron { display: inline-block; flex: none; width: 7px; height: 7px; margin-inline-start: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: translateY(-2px) rotate(45deg); }
.button > .chevron { margin-inline-start: 2px; }

/* Menu: the panel rises 6px over --duration-instant. A <details>, so it opens
   with no script; menu.js adds the keyboard map. It is never taller than the
   window below its trigger less 16px: past that it scrolls inside itself, its
   rows keeping their height, and menu.js scrolls the row the keys reach into
   view, so Sign out is always reachable. */
.menu { position: relative; display: inline-flex; }
.menu > summary { cursor: pointer; }
.menu-panel { position: absolute; inset-block-start: calc(100% + 5px); inset-inline-start: 0; z-index: var(--layer-popover); width: 210px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-frame); border-radius: var(--radius-lg); padding: 4px; background: var(--surface-card); box-shadow: var(--shadow-popover); animation: snaphop-rise var(--duration-instant) var(--ease-out); }
.menu-panel > li { flex: none; }
.menu-panel > li, .menu-panel form { display: block; }
/* The workspace switcher's panel opens about 110px down the page, under the rail's lockup and the trigger. */
.workspace-switcher .menu-panel { max-height: calc(100vh - 126px); max-height: calc(100dvh - 126px); }
/* The narrow screen's Menu is as wide as its longest row: at least 240px, never wider than the screen less 32px. It
   opens 42px down, under the 46px top bar's 28px trigger, so the window below the trigger less 16px leaves it 58px
   less than the window. */
.menu-panel-fit { width: max-content; min-width: 240px; max-width: calc(100vw - 32px); max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px); }
.menu-header { padding: 6px 8px 3px; color: var(--text-eyebrow); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.menu-separator { height: 1px; margin: 4px 0; background: var(--border-divider); }
.menu-item { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; border-radius: var(--radius-md); padding: 6px 8px; background: transparent; color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-base); letter-spacing: var(--tracking-tight); text-align: start; outline: none; cursor: pointer; }
.menu-item:not(:disabled):hover, .menu-item:not(:disabled):focus { background: var(--surface-hover); color: var(--text-body); }
/* A row that cannot be chosen: faint, no tint, and its meta says why ("active", "current"). */
.menu-item:disabled { color: var(--text-faint); cursor: default; }
/* The meta says a row's state in words, in the faint sans: it is not a machine value. */
.menu-meta { margin-inline-start: auto; padding-inline-start: 12px; color: var(--text-faint); font-size: var(--text-2xs); }
/* Who is signed in, as the rail's foot shows them: a line of the Menu that cannot be chosen. */
.menu-panel > .menu-person { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; }
/* The theme switch in the Menu is the rail's sm ButtonGroup across the menu between its separators, its
   segments the Menu's own radio rows. The segment the pointer or the keys are on takes the hover tint unless
   it is the chosen one; the keyboard's ring sits inside the group's clipped edge. */
.menu-theme { margin: 2px 0; }
.menu-theme .button-group { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-theme .button-group-option:is(:hover, :focus):not([aria-pressed="true"], [aria-checked="true"]) { background: var(--surface-hover); }
.menu-theme .button-group-option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* Toast: a past-tense confirmation, bottom-right, with a 3px tone bar instead of
   an icon; it rises 6px over --duration-normal and nothing animates on the way
   out. The stack is fixed to the viewport, because the frame here grows with the
   page rather than scrolling inside it. */
.toast-stack { position: fixed; inset-inline-end: 16px; inset-block-end: 16px; z-index: var(--layer-toast); display: flex; flex-direction: column; gap: 9px; max-width: calc(100vw - 32px); }
.toast { display: flex; width: 340px; max-width: 100%; align-items: flex-start; gap: 11px; border: 1px solid var(--border-frame); border-radius: var(--radius-card); padding: 11px 13px; background: var(--surface-card); box-shadow: var(--shadow-popover); animation: snaphop-rise var(--duration-normal) var(--ease-out); }
.toast-bar { flex: none; align-self: stretch; width: 3px; border-radius: 2px; background: var(--surface-inverse); }
.toast-bar-ok { background: var(--dot-ok); }
.toast-text { min-width: 0; flex: 1; }
.toast-title { color: var(--text-strong); font-size: var(--text-md); font-weight: var(--weight-semibold); }
/* One sentence under the title: what happened, in the design system's detail text. */
.toast-body { margin-top: 2px; color: var(--text-detail); font-size: var(--text-sm); line-height: var(--leading-body); }
/* The ×, drawn by toast.js only: with no script the toast stays until the next
   page, and a Dismiss that cannot work is worse than none. */
.toast-close { flex: none; border: 0; padding: 0; background: transparent; color: var(--text-faint); font-size: var(--text-lg); line-height: 1; cursor: pointer; }

/* Dialog: a confirmation or short form that must be answered first, and the session warning (SnapHop Web's
   session.js, which finds it by its ids). The layer and its scrim are fixed to the viewport, because the frame
   here grows with the page; the 520px panel sits 56px down and the layer scrolls when it is taller than the
   window. The scrim fades over --duration-fast and the panel rises 6px over --duration-normal. The head holds the
   title, any meta and the x; the actions sit on the subtle strip, a note pushed to the reading end. */
.dialog-layer { position: fixed; inset: 0; z-index: var(--layer-modal); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 56px 24px; }
.dialog-scrim { position: fixed; inset: 0; background: var(--scrim); animation: snaphop-fade var(--duration-fast) var(--ease-out); }
.dialog { position: relative; width: 520px; max-width: 100%; flex: none; overflow: hidden; outline: none; border: 1px solid var(--border-frame); border-radius: var(--radius-frame); background: var(--surface-card); box-shadow: var(--shadow-modal); animation: snaphop-rise var(--duration-normal) var(--ease-out); }
.dialog-head { display: flex; align-items: baseline; gap: 9px; border-bottom: 1px solid var(--border-divider); padding: 13px 16px; }
.dialog-head h2, .dialog-title { min-width: 0; color: var(--text-strong); font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.dialog-meta { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
.dialog-close { flex: none; margin-inline-start: auto; border: 0; padding: 0; background: transparent; color: var(--text-faint); font-size: var(--text-xl); line-height: 1; cursor: pointer; }
.dialog-body { padding: 15px 16px; color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.dialog-body > * + * { margin-top: 9px; }
.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--border-divider); padding: 12px 16px; background: var(--surface-subtle); }
.dialog-note { margin-inline-start: auto; color: var(--text-muted); font-size: var(--text-xs); }

/* ── Field, Input, Select, Textarea, Checkbox ───────────────────────────────
   A field's edge says its state, in this order: invalid (amber), focused (accent
   with the 3px halo), disabled (dashed), hovered (one border step), rest. */
.form-stack { display: grid; gap: 14px; max-width: var(--reading-width); }
.form-stack-narrow { display: grid; gap: 14px; max-width: 420px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label, .field > label { color: var(--text-label); font-size: var(--text-sm); font-weight: var(--weight-book); letter-spacing: var(--tracking-tight); }
/* A required field: a muted asterisk after its label and nothing else, kept on the label's last word by the
   no-break space it starts with. It is aria-hidden; the control's aria-required is what is announced. */
.field-required { color: var(--text-muted); font-weight: var(--weight-regular); white-space: nowrap; }
.field-help { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
.field-error { color: var(--text-invalid); font-size: var(--text-xs); line-height: var(--leading-body); }
/* Fields side by side share three rows -- label, control, hint -- through subgrid, so a label that wraps or a
   hint under one field never moves its neighbour's control, and an action in the row lines up with the
   controls rather than the labels. --field-row sets the columns, two equal ones by default. The design
   system's [data-field-row] rule as components/bundle.css writes it, with this product's .field in place of
   [data-field]. Under --bp-sm the row stacks (the breakpoints below). */
[data-field-row] { display: grid; grid-template-columns: var(--field-row, repeat(2, minmax(0, 1fr))); column-gap: var(--gap-card); row-gap: 0; align-items: start; }
[data-field-row] > .field, [data-field-row] > [data-field-action] { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 5px; min-width: 0; }
[data-field-row] > [data-field-action] > * { grid-row: 2; }
/* A control keeps its own height when its neighbour's is taller. */
[data-field-row] > .field > *, [data-field-row] > [data-field-action] > * { align-self: start; }
/* A filter's fields, then its buttons. */
.field-row-filter { --field-row: repeat(2, minmax(0, 1fr)) auto; }
/* Account help's rows: an email field and its md action, the actions sharing one 140px width. */
.field-row-help { --field-row: minmax(0, 1fr) 140px; }
fieldset.field > legend { margin-bottom: 5px; }

:is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
    width: 100%; min-width: 0; border: 1px solid var(--border-control); border-radius: var(--radius-lg); padding: 0 11px; background: var(--surface-control); color: var(--text-strong); font-family: var(--font-sans); font-size: var(--text-base); line-height: normal; letter-spacing: var(--tracking-tight); transition: var(--transition-control);
}
/* An input and a select are md, 32px, as an md button is; a textarea grows with its rows and is the one
   control without a fixed height. */
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select) { height: var(--control-height-md); }
textarea { padding: 9px 11px; line-height: var(--leading-body); }
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):hover { border-color: var(--border-control-hover); }
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):disabled { border-style: dashed; border-color: var(--border-dashed); background: var(--surface-control-disabled); color: var(--text-faint); cursor: default; }
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--focus-halo); }
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea)[aria-invalid="true"] { border-color: var(--border-invalid); }
.input-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
/* Select: no native arrow, and at its reading end the chevron, drawn by a wrapper
   because a select cannot draw generated content of its own. */
select { appearance: none; padding-inline-end: 32px; cursor: pointer; }
.select { position: relative; display: grid; min-width: 0; }
.select::after { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select:has(select:disabled)::after { border-color: var(--text-faint); }
.select-sm select { height: var(--control-height-sm); border-radius: var(--radius-control); padding-inline: 10px 30px; font-size: var(--text-sm); }
.select-sm::after { inset-inline-end: 11px; }
/* Checkbox: a 14px box, the accent fill and a ✓ when checked. The native input is
   the box, first in its row and in the tab order, so the 2px focus ring of
   :focus-visible is drawn on the box itself. Disabled is the dashed edge on the
   disabled fill, as on every control, with a checked mark in --text-faint and the
   label faint; never an opacity fade. */
input[type="checkbox"] { appearance: none; width: 14px; height: 14px; flex: none; display: inline-grid; place-content: center; margin-top: 1px; border: 1px solid var(--border-control-strong); border-radius: var(--radius-sm); background: var(--surface-control); color: var(--text-on-accent); font-size: var(--text-2xs); line-height: 1; cursor: pointer; transition: var(--transition-control); }
input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
input[type="checkbox"]:checked::before { content: "\2713" / ""; }
input[type="checkbox"]:disabled { border: 1px dashed var(--border-dashed); background: var(--surface-control-disabled); color: var(--text-faint); cursor: default; }
.choice { display: flex; align-items: flex-start; gap: 8px; color: var(--text-strong); font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.choice:has(> input:disabled) { color: var(--text-faint); }
.choice + .choice { margin-top: 9px; }

/* ── DataTable ──────────────────────────────────────────────────────────────
   A native <table> rendered as the design system's DataTable: a header strip of
   9.5px bold capitals on --surface-subtle, 11px 15px rows on hairlines, columns
   12px apart, --surface-subtle under the pointer. A wide table scrolls sideways
   and prints whole. */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; }
.data-table caption { caption-side: top; }
.data-table th, .data-table td { padding-inline: 6px; }
.data-table :is(th, td):first-child { padding-inline-start: 15px; }
.data-table :is(th, td):last-child { padding-inline-end: 15px; }
.data-table thead th { padding-block: 9px; border-bottom: 1px solid var(--border-divider); background: var(--surface-subtle); color: var(--text-muted); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; vertical-align: bottom; }
.data-table tbody :is(td, th) { padding-block: 11px; border-bottom: 1px solid var(--border-row); color: var(--text-body); font-size: var(--text-base); text-align: start; vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface-subtle); }
.data-table .cell-end { text-align: end; }
.cell-mono { color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); white-space: nowrap; }
.cell-wrap { white-space: normal; overflow-wrap: anywhere; }
/* A cell stacks a strong 12px primary line over a 10.5px muted secondary line. */
.row-primary { color: var(--text-strong); font-size: var(--text-md); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.row-secondary { display: block; color: var(--text-muted); font-size: var(--text-xs); }

/* ── Tabs ───────────────────────────────────────────────────────────────────
   Links that replace the view; the current one carries aria-current and the 2px
   accent underline. On paper the strip goes and the current tab's label prints
   as a plain bold line (.tab-print). */
.tabs { display: flex; gap: 18px; overflow-x: auto; margin-bottom: 12px; border-bottom: 1px solid var(--border-divider); }
.tab { flex: none; margin-bottom: -1px; border-bottom: 2px solid transparent; padding: 9px 0; color: var(--text-muted); font-size: var(--text-base); font-weight: var(--weight-regular); transition: var(--transition-control); }
.tab:hover { color: var(--text-muted); }
.tab[aria-current="page"] { border-bottom-color: var(--accent); color: var(--text-strong); font-weight: var(--weight-strong); }
.tab-print { padding: 7px 0; color: var(--text-strong); font-size: var(--text-base); font-weight: var(--weight-strong); }

/* ── EventList: rows on hairlines in a flush card ───────────────────────────*/
.card.event-list { padding: 0; }
.event-list > li { display: grid; gap: 2px; padding: 9px 14px; }
.event-list > li + li { border-top: 1px solid var(--border-row); }
.event-list > li > :first-child { color: var(--text-strong); font-size: var(--text-base); line-height: var(--leading-heading); }
.event-list .event-meta { line-height: var(--leading-heading); }

/* ── Standalone screens: SnapHop Web's ──────────────────────────────────────
   Sign-in, the code page, sign-up, Account help, the account-link screens and the
   error page are SnapHop Web's markup, drawn here to its stylesheet contract (its
   DESIGN.md section 4) on the design system's screens: no shell and no card, a
   340px column centred on the subtle surface, sign-up's two columns 745px. Each
   opens with the lockup on one line -- the wordmark at 20px with no cursor, an
   18px hairline, the product at 17px in Inter 450 -- then its title, type-title,
   28px below. */
.signin-page, .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; background: var(--surface-subtle); }
.signin-layout, .auth-layout { width: min(100%, 340px); }
.signup-layout { width: min(100%, 745px); }
.signin-lockup { display: flex; align-items: center; gap: 11px; color: var(--text-strong); }
.signin-lockup .wordmark { font-size: 20px; }
.signin-lockup-rule { width: 1px; height: 18px; flex: none; background: var(--surface-strong); }
.signin-product { color: var(--text-detail); font-size: var(--text-4xl); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.signin-title { margin-top: 28px; color: var(--text-strong); font-size: var(--text-5xl); font-weight: var(--weight-bold); letter-spacing: -0.025em; line-height: var(--leading-heading); }
/* The sentence under the title: type-body on the code and link pages, --text-secondary on an account link's. */
.supporting-copy { margin-top: 6px; color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); }
.signin-lede { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-body); }
.signin-layout .form-stack { margin-top: 18px; }
/* A refusal on these screens is the plain danger-tinted row: one sentence in the danger text, no bar. Red,
   because the system said no. .signin-error adds nothing to it. */
.signin-layout .error-row, .error-row.signin-error { display: block; margin-top: 16px; padding: 9px 11px; color: var(--status-danger-fg); }
.signin-layout .error-row::before { content: none; }
/* A notice -- signed out, a session ended, too many attempts -- is a plain line in the secondary text. */
.signin-layout > .form-status { margin-top: 16px; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-body); overflow-wrap: anywhere; }
/* A status row: what was sent or done, on the card's surface with its hairline. */
.signin-status, .signup-sent, .account-help .form-status { margin-top: 14px; border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 9px 11px; background: var(--surface-card); color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-body); overflow-wrap: anywhere; outline: none; }
.signup-sent { margin-top: 18px; }
/* A passkey, then each provider, a secondary lg block button under the form. */
.signin-passkey { margin-top: 10px; }
.signin-providers { display: grid; gap: 8px; margin-top: 10px; }
.signin-footnote { margin-top: 14px; color: var(--text-faint); font-size: var(--text-xs); line-height: var(--leading-body); }
/* The way to recover access and help only this product needs, under a hairline. */
.signin-help { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; border-top: 1px solid var(--border-divider-strong); padding-top: 14px; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-body); }
.signin-agents { color: var(--text-detail); font-size: var(--text-xs); }
.account-help-note { color: var(--text-faint); font-size: var(--text-sm); }
/* Sign-up: two 340px columns and a rule between them, 32px either side; one column under --bp-md. */
.signup-columns { display: grid; grid-template-columns: 340px 1px 340px; column-gap: 32px; align-items: start; }
.signup-column { min-width: 0; }
.signup-rule { align-self: stretch; margin-top: 28px; background: var(--border-divider-strong); }
/* Account help: each request is its field row, then its status row and error row. */
.account-help-form { margin-top: 18px; }
.account-help-form + .account-help-form { margin-top: 14px; }
.account-help .error-row { margin-top: 6px; }
/* The error page: the lockup, then the ErrorState with its status code in mono and the way back. */
.error-page-state { margin-top: 28px; }
.error-page-state > h1 { color: var(--status-danger-fg); font-size: var(--text-2xl); font-weight: var(--weight-strong); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.error-page-state > p:not(.error-code, .error-state-retry) { max-width: 440px; color: var(--text-detail); font-size: var(--text-base); line-height: var(--leading-body); text-wrap: pretty; }
.error-code { color: var(--text-muted); }

/* An empty live region stays in the accessibility tree, out of sight and out of the flow: a field's error, and a
   status line or row before its first sentence. A region added together with its text is often not announced.
   Absolutely positioned, it takes no row, gap or margin; never display: none. Last, so it wins over the rows
   above. */
:is(.field-error, .form-status, .signin-status, .signup-sent):empty { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; border: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }

/* ── Print ──────────────────────────────────────────────────────────────────
   Drop what cannot be actioned on paper, keep every piece of information. Chrome
   is marked at the source with data-print="hide"; a provenance line marked
   data-print="only" prints in place of the rail that carries that context. */
[data-print="only"] { display: none; }
@media print {
    [data-print="hide"], .skip-link, .app-rail, .topbar-menu, .menu, .toast-stack, .tabs, .topbar-actions, form .button-row, [role="tooltip"] { display: none !important; }
    /* A dialog open at print time is the thing being read: it prints in place, without the scrim. */
    .dialog-scrim { display: none !important; }
    .dialog-layer { position: static; display: block; padding: 0; }
    .dialog { width: 100% !important; max-width: 100% !important; border: 1px solid #000 !important; }
    [data-print="only"] { display: block !important; }
    html, body, .app-page, .app-frame, .canvas { background: #fff !important; }
    * { box-shadow: none !important; }
    .app-page { padding: 0; }
    .app-frame { display: block; border: 0; border-radius: 0; }
    .canvas { padding: 0; }
    .table-scroll { overflow: visible !important; }
    .data-table tbody tr:hover { background: none; }
    .card, .callout, .notice, .annotation, .diff-side, tr, .card-footnote, .error-summary, .event-list > li { break-inside: avoid !important; page-break-inside: avoid !important; }
    /* A pending action has no meaning on paper: it resolved before printing. */
    [aria-busy="true"] > [aria-hidden="true"], [aria-busy="true"]::after { display: none !important; }
    @page { margin: 14mm; }
}

/* ── Breakpoints ────────────────────────────────────────────────────────────
   --bp-sm 600, --bp-md 880, --bp-lg 1180, --bp-xl 1440, repeated as literal px
   because a media condition cannot read a custom property. Each step is a window
   width and holds from its width up, so a width exactly on a step takes that
   step's layout. The aside is 372px from 1440, 340px from 1180, and under the
   main column below 1180, where the metric strip goes three-up; below 880 the
   strip is two-up. Below 600 the rail is replaced by the top bar's Menu, so
   nothing becomes unreachable, and a field row stacks. */
@media (width >= 1440px) { .split { grid-template-columns: minmax(0, 1fr) var(--aside-width-wide); } }
@media (width < 1180px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .kv-4 { --kv-columns: 2; }
    .metric-strip { grid-template-columns: repeat(var(--cols-metric-md), minmax(0, 1fr)); }
}
@media (width < 880px) {
    .kv-3 { --kv-columns: 2; }
    .signup-layout { width: min(100%, 340px); }
    .signup-columns { grid-template-columns: minmax(0, 1fr); }
    .signup-rule { height: 1px; margin-top: 24px; }
    .metric-strip { grid-template-columns: repeat(var(--cols-metric-sm), minmax(0, 1fr)); }
}
@media (width < 600px) {
    .app-page { padding: 0; }
    .app-frame { grid-template-columns: minmax(0, 1fr); min-height: 100vh; border: 0; border-radius: 0; }
    .app-rail { display: none; }
    .topbar-menu { display: inline-flex; }
    .topbar { height: auto; min-height: var(--topbar-height); flex-wrap: wrap; padding: 9px 14px; }
    /* Stacked, a row has no neighbours to line up with, so each field keeps only the rows it has and an
       action sits directly under its field. */
    [data-field-row] { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
    [data-field-row] > .field, [data-field-row] > [data-field-action] { grid-row: auto; grid-template-rows: none; }
    [data-field-row] > [data-field-action] > * { grid-row: auto; }
    [data-field-row] > [data-field-action] { justify-items: start; }
    .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-inline-start: 0; }
    .kv, .kv-3, .kv-4 { --kv-columns: 1; }
    .diff-pair { grid-template-columns: minmax(0, 1fr); }
}