/* RouterX console. Dark only.
 *
 * Every colour below comes from a token in :root; markup app.js generates
 * uses classes, never hex colours. The Token v1 state names still used
 * (--ok, --okbg, --warnbg, --danger, --dangerbg) are aliases of the state
 * tokens, at the end of :root.
 *
 * Layout rule: every piece of page text sits on one indented line. Content
 * lives in cards with the same inner padding (--pad), and the page header is
 * inset by that same amount, so titles, leads, card text and table cells all
 * start at the same x. Tables and lists inside a card bleed to the card's
 * edges (.bleed) and pad their first and last cells by --pad, so row rules
 * run edge to edge while the text stays on the line.
 *
 * Fonts are self-hosted in frontend/fonts/ (the CSP allows fonts from
 * 'self' only, and the console must work air-gapped); sources, versions and
 * licences are in frontend/fonts/LICENSES.md.
 */

@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
    /* Motion (H4): three durations and one easing. Small state changes take
       --dur-1, things that appear (menus, tooltips, drawers) --dur-2, and
       dialogs --dur-3. prefers-reduced-motion turns them off (block below). */
    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 240ms;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: var(--font-sans);
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* A QR code stays dark on light: scanners expect it. */
    --qr-dark: #000000;
    --qr-light: #FFFFFF;

    --pad: 20px;          /* card inner padding = the page's text indent */
    --gap: 16px;          /* between cards */
    --radius: 10px;
    --sidebar-w: 232px;

    /* One surface: page, sidebar, cards and fields share the ground; thin
       rules separate them. --surface is the only fill, for wells inside a card. */
    --bg: #0F1013;
    --side: #0F1013;
    --surface: #17181C;
    --raised: #0F1013;
    --field: #0F1013;
    --text: #ECECEF;
    --muted: #A3A3B0;
    --rule: #23242A;
    --rule2: #34353D;
    --btn-bg: #ECECEF;
    --btn-fg: #16161B;
    --nav-on-bg: #272830;   /* the open page in the sidebar, a step above --hover */
    --hover: #1E1F25;       /* a row or item under the pointer, clearly lighter than a card */
    /* Chart palette (spend by model): the doughnut and its legend. */
    --chart-1: #5FC8A8;
    --chart-2: #8CB2FF;
    --chart-3: #F0BE6A;
    --chart-4: #C9A7F5;
    --chart-5: #FF8A6F;
    --chart-6: #6FD3E0;
    --chart-7: #A3A3B0;
    --chart-8: #E9E9EC;
    --chart-9: #7C8BA1;
    --chart-10: #D4A373;
    /* The brand band (the sign-in screen). */
    --band: #0F3D34;
    --band-fg: #FFFFFF;
    --band-muted: #9CCBBE;
    --band-rule: rgba(255, 255, 255, .14);
    /* Field, switch and checkbox borders get their own token at 3:1 on the
       field (WCAG 1.4.11); --rule2 stays for decorative lines. */
    --field-line: #686974;
    --link: #8DB4FF;
    --underline: #7A7B87;   /* a text link's underline: 4:1 on --surface, clearly seen */
    --focus: #8DB4FF;            /* focus ring, 2 px */
    /* States: each foreground meets 4.5:1 on its own background and on
       cards. Colour is never the only signal (a word or shape goes with it). */
    --pass: #62D29B;
    --pass-bg: #13301F;
    --warn: #F0BE66;
    --warn-bg: #33270F;
    --deny: #FF8A7A;
    --deny-bg: #3A1714;
    --sim: #C9A7F5;
    --sim-bg: #2A1D3D;
    /* Evergreen marks RouterX's own moments: a request served at a checkpoint
       (the Checkpoint rail's cache hit). Skipped checkpoints use --skip. */
    --ever-mark: #3FA586;
    --ever-ring: #1D4A3F;
    --ever-soft: #12302A;
    --ever-text: #7FD1B4;
    --skip: #5E5F68;
    --code-bg: #0A0B0D;
    --code-fg: #E9E9EC;
    --code-muted: #8A8A96;
    --code-rule: #23242A;
    --code-key: #8CB2FF;
    --code-str: #A7E08C;
    --code-num: #F3C58B;
    --code-kw: #8FD3BF;
    --code-lit: #C9A7F5;
    --code-meta: #FF9E80;
    --on-danger: #16161B;
    --logo-ground: #FFFFFF;      /* behind a brand logo drawn in black */
    --scrim: rgba(0, 0, 0, .6);
    --shadow: none;
    --shadow-pop: 0 18px 48px rgba(0, 0, 0, .5);

    /* Token v1 names, kept as aliases of the state tokens above. */
    --ok: var(--pass);
    --okbg: var(--pass-bg);
    --warnbg: var(--warn-bg);
    --danger: var(--deny);
    --dangerbg: var(--deny-bg);

    /* Provenance: how a number was arrived at. Estimated (the registry's
       prices) is dotted, measured (counted from recorded requests) solid,
       simulated (replayed through the mock provider) dashed. */
    --prov-estimated: var(--muted);   /* neutral: an estimate is not a warning (review item 39) */
    --prov-estimated-line: dotted;
    --prov-measured: var(--text);
    --prov-measured-line: solid;
    --prov-simulated: var(--sim);
    --prov-simulated-line: dashed;

    /* Type scale in rem, so the browser's text-size setting applies (not
       only page zoom). 1rem = 16px at the default setting. */
    --fs-page: 1.75rem;          /* page title, 28 */
    --fs-figure: 1.75rem;        /* figures, 28 */
    --fs-dialog: 1.375rem;       /* dialog title, 22 */
    --fs-section: 1rem;          /* section title, 16 */
    --fs-body: .875rem;          /* body, 14 */
    --fs-small: .8125rem;        /* small text and hints, 13 */
    --fs-label: .6875rem;        /* mono caps labels, 11 */
    --fs-code: .8125rem;         /* identifiers and code, 13 */

    color-scheme: dark;
}

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

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

/* The hidden attribute always wins. Component rules below set display:
   flex / inline-flex, which would otherwise override it and show form
   fields and buttons app.js has hidden. */
[hidden] { display: none !important; }

/* Role-aware UI (app.js applyRoleUi): body.role-limited for developers and
   viewers, body.role-viewer for viewers. Controls a role can't use are
   hidden rather than left to fail with 403; the server enforces the same
   rules regardless. */
.role-limited [data-admin-only], .role-viewer [data-dev-only] { display: none !important; }
[data-limited-only] { display: none !important; }
.role-limited [data-limited-only] { display: block !important; }
.role-limited .overview-grid > [data-limited-only] { display: flex !important; }
.role-limited .kpi-card .kpi-row { grid-template-columns: minmax(0, 1fr); }
.readonly-note { margin: 10px 0 0; font-size: .8125rem; color: var(--muted); }   /* a fact about access, not a warning */
.page-note { margin: 0; padding: 0 var(--pad); }

html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Something brought into view by the keyboard is not left under the sticky
   phone navigation (app.js sets --sticky-top to its height). */
html { scroll-padding-top: var(--sticky-top, 0px); }

/* "Skip to content": the first Tab stop, shown only while focused. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 3000;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 500;
    text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--btn-fg); }
#main:focus { outline: none; }
/* Headings take focus when a step or dialog opens, to be announced. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .modal-title[tabindex="-1"]:focus { outline: none; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

/* Every text link is underlined where it can be seen (review item 37);
   hover thickens the line. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--text); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

code, pre, .mono { font-family: var(--font-mono); }
code { font-size: .92em; }

svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Thin, quiet scrollbars wherever a region scrolls on its own. */
* { scrollbar-width: thin; scrollbar-color: var(--rule2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.label {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h1, h2, h3, .band-title, .modal-title { text-wrap: balance; }
p, .lead, .hint { text-wrap: pretty; }
.h2 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.h3 { margin: 0 0 12px; font-size: .875rem; font-weight: 600; }
.rel-holds { margin-top: 20px; }
.lead { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted); max-width: 68ch; }
.body { margin: 0; font-size: .9375rem; line-height: 1.6; }
.muted { color: var(--muted); }
.strong { font-weight: 600; }
.fine { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.danger-text { color: var(--danger); }
.pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: .75rem; }
/* An answer shown as plain text when the markdown renderer could not load. */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.center { text-align: center; }
.spacer { flex-grow: 1; }
.stack-xs { display: flex; flex-direction: column; gap: 8px; }
.stack-md { display: flex; flex-direction: column; gap: 12px; }
.stack-xl { display: flex; flex-direction: column; gap: 28px; }
.flush { margin: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* ----------------------------------------------------------------- shell */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 12px 16px;
    background: var(--side);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.brand { display: flex; align-items: baseline; gap: 10px; padding: 0 12px; }
/* The sidebar logo links to the Overview (home). */
a.brand { align-self: flex-start; color: var(--text); text-decoration: none; border-radius: 8px; }
a.brand:hover .brand-mark { opacity: .75; }
.brand-bare { padding: 0; }
.brand-mark { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { padding: 14px 12px 4px; font-size: .6875rem; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.3;
}
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link.active { background: var(--nav-on-bg); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--text); }
.nav-link.active svg { color: var(--text); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; position: relative; }
.account {
    border: 0;
    border-top: 1px solid var(--rule);
    padding: 14px 8px 2px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
}
.account:hover .account-email { text-decoration: underline; text-underline-offset: 3px; }
.avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: .8125rem; font-weight: 600; }
.account-chevron { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Console Phase 1: the shell. */
.sidebar-head { display: flex; flex-direction: column; gap: 14px; }
.gateway-ident { display: flex; flex-direction: column; gap: 1px; padding: 0 12px; min-width: 0; }
.gateway-org { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gateway-host { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-title, .sidebar .phone-menu-btn { display: none; }
.side-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.side-badges:not(:has(> :not([hidden]))) { display: none; }
.env-label { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--field-line); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.side-paused { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--deny-bg); color: var(--deny); font-size: .75rem; font-weight: 600; }
.side-paused .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--deny); }
body.org-paused::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--deny); z-index: 900; }
.nav-sheet { display: contents; }
.nav-scrim { display: none; }
.cmdk-trigger { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--raised); color: var(--muted); font: inherit; font-size: .875rem; cursor: pointer; text-align: left; }
.cmdk-trigger:hover { color: var(--text); border-color: var(--field-line); }
.cmdk-trigger svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cmdk-trigger span { flex: 1; }
.account-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-pop); }
.account-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; min-width: 0; }
.account-menu-email { font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.account-menu-version { padding: 8px 10px 4px; border-top: 1px solid var(--rule); margin-top: 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: .875rem; text-align: left; text-decoration: none; cursor: pointer; }
.menu-item span:first-of-type { flex: 1; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); }
.menu-item.active { font-weight: 600; }
.menu-item svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Row menus (console Phase 2, E1): one inline action, the rest behind "⋯". */
.row-menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding-left: 8px; padding-right: 8px; }
.row-menu-btn svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.row-menu { position: fixed; z-index: 1200; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-pop); }
.row-menu .menu-item { min-height: 40px; }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--rule); }
.menu-item.menu-danger { color: var(--danger); }

/* Segmented control (Phase 2, F7): native radios, so arrow keys move and
   Space chooses; the chosen segment is filled, the focused one outlined. */
.segmented-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmented-field legend { padding: 0; margin-bottom: 8px; font-size: .875rem; font-weight: 500; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--rule2); border-radius: 999px; background: var(--field); }
.segmented label { position: relative; display: inline-flex; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: .875rem; color: var(--muted); }
.segmented input:checked + span { background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmented input:disabled + span { opacity: .55; cursor: not-allowed; }
details.advanced { margin-top: 10px; }
details.advanced summary { cursor: pointer; font-size: .8125rem; color: var(--muted); }
details.advanced[open] summary { margin-bottom: 8px; }

/* Switch (Phase 2, F2): a button with role="switch". It stages a change; the
   review bar saves it. Space or Enter toggles; the knob's side is the state,
   so it reads without colour too. */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .875rem; cursor: pointer; }
.switch-track { position: relative; width: 40px; height: 24px; flex: none; border: 1px solid var(--rule2); border-radius: 999px; background: var(--field); transition: background-color var(--dur-1) var(--ease); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: left var(--dur-1) var(--ease); }
.switch[aria-checked="true"] .switch-track { background: var(--btn-bg); border-color: var(--btn-bg); }
.switch[aria-checked="true"] .switch-thumb { left: 18px; background: var(--btn-fg); }
.switch[aria-checked="false"] .switch-text { color: var(--muted); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.switch:disabled { cursor: not-allowed; opacity: .55; }
.org-control-row.staged { outline: 1px dashed var(--warn); outline-offset: 4px; border-radius: var(--radius); }
.staged-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: .75rem; font-weight: 600; vertical-align: middle; }
/* The review bar sticks to the bottom of the screen while changes are staged. */
.review-bar { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-pop); }
.review-count { font-weight: 600; font-size: .875rem; }
.review-actions { display: inline-flex; gap: 8px; }
/* Guardrails > Controls: break-glass in its own danger area (item 30). */
.danger-zone { border-color: var(--danger); }
.cmdk-modal { padding-top: min(12vh, 96px); }
/* .modal-card.cmdk-card: .modal-card comes later in this file, and at equal
   weight its 600px width, padding and gap used to win, so the menu had a
   dialog's padding around its own and too much empty space. */
.modal-card.cmdk-card { width: 520px; max-width: 100%; padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
.cmdk-search { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--rule); }
.cmdk-search svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.cmdk-input { flex: 1; min-width: 0; min-height: 58px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.0625rem; outline: none; }
.cmdk-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px 8px 8px; }
.cmdk-group { padding: 10px 10px 4px; }
.cmdk-option { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer; }
.cmdk-option[aria-selected="true"] { background: var(--hover); }
/* A key or provider Ctrl+K found, marked a moment on its page. */
.data-table tr.row-found td { background: var(--nav-on-bg); transition: background-color var(--dur-3) var(--ease); }
/* The shortcuts dialog (?). */
.shortcut-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0; font-size: .875rem; align-items: center; }
.shortcut-list dt { white-space: nowrap; }
.shortcut-list dd { margin: 0; color: var(--muted); }
kbd { display: inline-block; min-width: 24px; padding: 1px 6px; border: 1px solid var(--rule2); border-bottom-width: 2px; border-radius: 6px; font: .75rem var(--font-mono); color: var(--text); text-align: center; }
.cmdk-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: .875rem; }
.account-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-email { font-size: .8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--rule2);
    background: transparent;
    color: var(--text);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { border-color: var(--text); }

.main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 32px 40px 64px;
}
.main-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.view-container { display: flex; flex-direction: column; gap: var(--gap); width: 100%; min-width: 0; }
/* Flex and grid children default to min-width: auto, which lets a wide
   table or code block push its section past the viewport; wide content
   scrolls inside its own .table-wrap / code block instead. */
.view-container > *, .stack-lg > *, .split-1-1 > *, .card-pair > * { min-width: 0; }

/* The header is inset by --pad so its text lines up with the text inside
   the cards below it. */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
    flex-wrap: wrap;
    padding: 0 var(--pad) 4px;
}
.page-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 420px; }
.page-title h1 { margin: 0; font-size: var(--fs-page); overflow-wrap: anywhere; }
.page-actions > .status-msg:empty { display: none; }
.page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 1 auto; justify-content: flex-end; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; }

/* Overview: a 2 x 2 grid whose rows stretch, so the cards side by side
   always end on the same line. */
.overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.overview-grid > * { min-width: 0; }
.overview-grid > .card { display: flex; flex-direction: column; }
.overview-grid > .card > .card-foot { margin-top: auto; padding-top: 14px; }
.overview-grid .check-item { min-height: 48px; }
.overview-grid .band-row { min-height: 40px; }
.split-1-1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.card-pair { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: stretch; }
.card-pair > .card { flex: 1 1 420px; }
.split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.split-divider { border-left: 1px solid var(--rule); padding-left: 24px; }

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

.btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font: 500 .875rem/1.2 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.btn-primary svg, .btn-secondary svg, .btn-danger svg { width: 16px; height: 16px; stroke-width: 1.8; flex-shrink: 0; }
.btn-primary { border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { opacity: .88; color: var(--btn-fg); }
.btn-secondary { border: 1px solid var(--rule2); background: transparent; color: var(--text); }
.btn-secondary:hover { border-color: var(--text); color: var(--text); }
.btn-danger { border: 1px solid var(--danger); background: transparent; color: var(--danger); }
.btn-danger:hover { background: var(--dangerbg); color: var(--danger); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled,
.btn-secondary[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-sm { min-height: 30px; padding: 0 12px; font-size: .8125rem; }
.btn-sm svg { width: 14px; height: 14px; }

.btn-ghost {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text);
    font: .875rem var(--font-sans);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--underline);
    cursor: pointer;
}
.btn-ghost:hover { text-decoration-color: var(--text); text-decoration-thickness: 2px; }

.textlink {
    color: var(--text);
    font-size: .875rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--underline);
    white-space: nowrap;
}
.textlink:hover { text-decoration-color: var(--text); text-decoration-thickness: 2px; color: var(--text); }


/* ----------------------------------------------------------------- forms */

.form-input {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    background: var(--field);
    color: var(--text);
    font: .875rem var(--font-sans);
}
/* Placeholders at the full muted colour (4.5:1); they hold examples only,
   never information the field needs. */
.form-input::placeholder { color: var(--muted); opacity: 1; }
.form-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.form-input:disabled { opacity: .55; cursor: not-allowed; }
textarea.form-input { resize: vertical; line-height: 1.5; }
.form-input.mono, textarea.mono { font-family: var(--font-mono); font-size: .8125rem; }
select.form-input { cursor: pointer; }

.form-group { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.form-group label, .legend { font-size: .875rem; font-weight: 500; }
fieldset.form-group { gap: 10px; }
.legend { padding: 0; margin-bottom: 4px; }
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .choice-row { grid-template-columns: minmax(0, 1fr); } }
.field-group { display: flex; flex-direction: column; gap: 4px; }
.form-group--full { grid-column: 1 / -1; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.hint { font-size: .8125rem; color: var(--muted); line-height: 1.45; margin: 0; font-weight: 400; }
.hint-inline { font-size: .75rem; color: var(--muted); font-weight: 400; }

input[type="range"] { width: 100%; accent-color: var(--text); margin: 6px 0; }

.check { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); flex-shrink: 0; }
.check-stack { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
/* API key dialog: the models a key may use, grouped by provider. */
.model-checklist { display: flex; flex-direction: column; gap: 14px; max-height: 240px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; }
.model-group { display: flex; flex-direction: column; gap: 8px; }
.model-group-name { margin: 0; font-size: .75rem; color: var(--muted); }
.model-checklist .check { overflow-wrap: anywhere; }

.choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
}
.choice:hover { border-color: var(--muted); }
.choice input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--text); flex-shrink: 0; }
.choice > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.choice strong { font-weight: 500; font-size: .9375rem; }
.choice:has(input:checked) { border-color: var(--text); }

.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-prefix .form-input { padding-left: 28px; }
.input-suffix { position: relative; }
.input-suffix > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-suffix .form-input { padding-right: 30px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.rt-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rt-row .rule-model { flex: 1 1 220px; min-width: 0; }
.rt-row .rule-weight { flex: 0 0 76px; width: 76px; }
.rt-row .rule-ftt { flex: 1 0 132px; width: 132px; }
.rt-row .icon-btn { flex: 0 0 auto; }

.status-msg { font-size: .8125rem; color: var(--muted); margin-top: 12px; min-height: 0; }
.status-msg:empty { margin: 0; }
.status-msg.inline { margin: 0; }
.status-msg.success { color: var(--ok); }
.status-msg.error { color: var(--danger); }
.status-msg.warning { color: var(--warn); }

/* Errors at the field and the error summary (console Phase 2, F6). */
.field-error { margin: 6px 0 0; font-size: .8125rem; font-weight: 500; color: var(--danger); }
.field-error::before { content: "! "; font-weight: 700; }
.form-input[aria-invalid="true"], [aria-invalid="true"] .form-input { border-color: var(--danger); }
[role="group"][aria-invalid="true"] { outline: 1px solid var(--danger); outline-offset: 4px; border-radius: var(--radius); }
.error-summary {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: var(--deny-bg);
    color: var(--text);
    font-size: .875rem;
}
.error-summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary a { color: var(--text); text-decoration: underline; }

/* Failures (app.js describeFailure / failureHtml): a sentence, the next
   step, details behind a disclosure, and Retry for a section that didn't
   load. */
.failure { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 0; }
.failure-title { margin: 0; font-weight: 500; color: var(--deny); }
.failure-next { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 68ch; }
.failure-details summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); }
.failure-details p { margin: 6px 0 0; font: var(--fs-code) var(--font-mono); overflow-wrap: anywhere; }
.response-content .failure { padding: 0; }
.gateway-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 0 auto 24px;
    padding: 10px var(--pad);
    border-radius: var(--radius);
    background: var(--deny-bg);
    color: var(--deny);
    border: 1px solid var(--deny);
    font-size: var(--fs-small);
}
.gateway-bar--notice { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }

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

.card {
    background: var(--raised);
    border: 1px solid var(--rule2);   /* a card's edge reads against the page (review item 38) */
    border-radius: var(--radius);
    padding: var(--pad);
    min-width: 0;
    box-shadow: var(--shadow);
}
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px 24px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.card-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.card-head > .label, .card-head > .fine, .card-head > .textlink { padding-top: 2px; }
.card-head-meta { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 2px; }
.card-head-meta--actions { align-items: center; gap: 10px; }
/* Data residency: the region boxes beside Apply. */
.org-region-choices { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; margin: 0; padding: 0; min-width: 0; }
.org-region-choices .check { margin: 0; }
.sso-lead { margin-bottom: 16px; }
.sso-redirect { margin-top: 20px; }
.modal-intro { margin-bottom: 20px; overflow-wrap: anywhere; }
.btn-ghost.fine-btn { font-size: .8125rem; }
.btn-ghost.danger-text { color: var(--danger); text-decoration-color: currentColor; }
.btn-ghost.danger-text:hover { text-decoration-color: var(--danger); }
.card-title { margin: 0; font-size: var(--fs-section); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-lead { margin: 4px 0 0; font-size: .8125rem; color: var(--muted); line-height: 1.5; max-width: 72ch; }
.card-foot { margin: 14px 0 0; max-width: 90ch; }
/* Load more under a paged table (Requests: Full log, Refused). */
.page-more { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
/* Overview: this month at each checkpoint. */
.checkpoint-counts { list-style: none; margin: 0; padding: 0; }
.checkpoint-counts li { display: grid; grid-template-columns: 2.5ch minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px var(--pad); border-top: 1px solid var(--rule); }
.checkpoint-n { font-family: var(--font-mono); color: var(--muted); font-size: .8125rem; }
.checkpoint-count { text-align: right; font-variant-numeric: tabular-nums; }

/* A card whose body should fill the card's height (so two cards side by
   side end on the same line). */
.card-column { display: flex; flex-direction: column; }
.card-column > .card-column-body { flex: 1 1 auto; }

/* Lists and tables that run to the card's edges; the cells carry the
   indent instead (see .data-table / .row-list). */
.bleed { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }

/* Overview > Enforcement: a card with an evergreen edge and label. */
.band-card {
    background: var(--raised);
    color: var(--text);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ever-mark);
    border-radius: var(--radius);
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.band-label { color: var(--ever-text); }
.band-title { margin: 4px 0 10px; font-size: var(--fs-section); }
.band-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 40px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.band-row span:first-child { color: var(--muted); }
.band-row span:last-child { text-align: right; }
.band-link { margin-top: 12px; color: var(--text); font-size: .8125rem; text-underline-offset: 4px; text-decoration-color: var(--band-muted); align-self: flex-start; }
.band-link:hover { color: var(--text); text-decoration-color: var(--text); text-decoration-thickness: 2px; }

.code-card, .code-inline {
    margin: 0;
    background: var(--code-bg);
    color: var(--code-fg);
    border: 1px solid var(--code-rule);
    border-radius: var(--radius);
    padding: 16px 18px;
    font: .8125rem/1.7 var(--font-mono);
    white-space: pre;
    overflow-x: auto;
    min-width: 0;
}
.code-inline { padding: 14px 16px; border-radius: 10px; white-space: pre-wrap; margin-top: 8px; }
.code-card .c { color: var(--code-muted); }
.code-card .k { color: var(--code-kw); }
.code-card .s { color: var(--code-num); }

/* API keys > Connect an application: base URL, language tabs, example. */
.connect-base { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.connect-base code { flex: 1 1 240px; min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
.code-tabs { display: flex; gap: 4px; background: var(--code-bg); border: 1px solid var(--code-rule); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding: 8px 8px 0; }
.code-tab { border: 0; background: transparent; color: var(--code-muted); font: 500 .8125rem var(--font-sans); padding: 8px 14px; border-radius: 8px 8px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
.code-tab:hover { color: var(--code-fg); }
.code-tab[aria-selected="true"] { color: var(--code-fg); border-bottom-color: var(--code-fg); }
.code-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.code-card--tabbed { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: var(--code-rule); }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip, .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--surface);
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-sans);
    vertical-align: middle;
}
.chip.mono { font-family: var(--font-mono); }
.chip.ok { background: var(--okbg); color: var(--ok); }
.chip.warn { background: var(--warnbg); color: var(--warn); }
.chip.danger { background: var(--dangerbg); color: var(--danger); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag { height: 20px; padding: 0 8px; font-size: .6875rem; }

/* ------------------------------------------------------------------- KPIs */

/* In a card, KPIs are separated by vertical rules; each keeps the card's
   indent on its left. */
.kpi-card { padding: 0; }
.kpi-card .kpi-row { gap: 0; }
.kpi-card .kpi { border-top: 0; border-left: 1px solid var(--rule); padding: 16px var(--pad); }
.kpi-card .kpi:first-child { border-left: 0; }
/* A breakdown strip under a KPI card's figures keeps the card's text indent. */
.kpi-card .savings-breakdowns { padding: 0 var(--pad) var(--pad); }

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kpi-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-row--compact { gap: 20px; }
.kpi { border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi .label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-value { margin: 0; font-size: var(--fs-figure); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-row--compact .kpi-value { font-size: 1.25rem; }
/* A rate beside its figure (the policy simulation's savings), quieter so the pair fits one line. */
.kpi-rate { font-size: .8125rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.kpi-sub { margin: 0; font-size: .8125rem; color: var(--muted); }
.waste-figure { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
/* Provider reliability: the failure count with its reasons under it. */
.rel-answered { display: flex; align-items: center; gap: 12px; min-width: 170px; }
.rel-answered .bar-track { flex: 1; max-width: 120px; }
.rel-answered > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A headline figure on the right of a card's head. */
.card-figure { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.card-figure strong { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
/* A strip of figures over a table (provider reliability). */
.figure-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.figure-strip > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--raised); }
.figure-strip strong { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.figure-strip span { font-size: .75rem; color: var(--muted); }
.figure-strip .warn strong { color: var(--warn); }
.figure-strip .danger strong { color: var(--danger); }
/* Costliest prompts: two-line prompts, the model pair, a bar per amount. */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.model-pair { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; white-space: nowrap; }
.mini-bar { height: 4px; margin-top: 6px; width: 80px; margin-left: auto; }
/* Provider dependency: the share on the top provider as one figure. */
.impact-figure { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.impact-figure strong { font-size: 1.75rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.impact-figure > span { font-size: .8125rem; color: var(--muted); }
/* Tick-to-choose chips (the outage simulator's providers). */
.resilience-choices { border: 0; padding: 0; margin: 0; }
.field-legend { font-size: .875rem; font-weight: 500; margin-bottom: 10px; padding: 0; }
.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chip { display: inline-flex; align-items: center; cursor: pointer; }
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip span { font: .8125rem var(--font-mono); padding: 6px 12px; border: 1px solid var(--rule2); border-radius: 6px; }
.choice-chip input:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.choice-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.kpi-cap { display: flex; flex-direction: column; gap: 8px; }
/* Usage & costs: a label over each group of cards. */
/* Spend breakdowns: a share bar under each row. */
.spend-row { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; }
.spend-row + .spend-row { margin-top: 12px; }
.spend-row-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); }
.spend-row-head > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.spend-row-head strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.meter { height: 4px; background: var(--rule); border-radius: 4px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--text); border-radius: 4px; min-width: 2px; }
.meter-fill.warn { background: var(--warn); }
.meter-fill.danger { background: var(--danger); }
.stat-inline { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; margin-bottom: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat-value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- checklist, rows */

.checklist { display: flex; flex-direction: column; }
.check-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.check-item .meta { font-size: .8125rem; color: var(--muted); text-align: right; }
.check-item .textlink { font-size: .8125rem; }
/* Overview > Needs attention (Phase 3): one row per item, a warning mark,
   what is wrong and what to do about it. */
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px var(--pad); border-top: 1px solid var(--rule); }
.attention-mark { width: 10px; height: 10px; border-radius: 2px; background: var(--warn); }
.attention-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attention-item .textlink { font-size: .8125rem; white-space: nowrap; }
@media (max-width: 560px) { .attention-item { grid-template-columns: 10px minmax(0, 1fr); } .attention-item .textlink { grid-column: 2; } }
.check-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rule2); display: grid; place-items: center; }
.check-dot.done { background: var(--text); border-color: var(--text); color: var(--bg); }
.check-dot svg { width: 12px; height: 12px; stroke-width: 3; }

.rule-list { display: flex; flex-direction: column; }
.rule-row { display: grid; grid-template-columns: minmax(28px, max-content) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.rule-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.rule-row--plain > .rule-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rule-row--plain > .rule-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-row--plain > .chip { overflow: visible; }
.empty-row { padding: 14px 0; font-size: .875rem; color: var(--muted); border-top: 1px solid var(--rule); }
.bleed > .empty-row { padding-left: var(--pad); padding-right: var(--pad); }
.empty-row.center { border-top: 0; padding: 48px var(--pad); }

/* Empty states (E3, E4): one flat fill with no border of its own inside
   the card, and the next step as a button or a link. A table holding one
   labels nothing, so its header row goes. */
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); }
.empty-state strong { font-weight: 500; font-size: .875rem; color: var(--text); }
.empty-state p { margin: 0; font-size: .8125rem; color: var(--muted); max-width: 60ch; }
.empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.bleed > .empty-state { margin: 0 var(--pad); }
.data-table:has(> tbody > tr.empty-row-tr) > thead { display: none; }
.data-table td.empty-cell:has(> .empty-state) { padding-top: 12px; padding-bottom: 12px; }

/* Table toolkit (E2 L6): search, filters and their chips above a table,
   sort buttons in its header cells, the pager below it. */
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.table-tools .table-search { flex: 1 1 14rem; max-width: 22rem; }
.table-tools .table-filter { flex: 0 1 auto; width: auto; }
/* Playground options and earlier turns (console item 22). */
.pg-options { margin-top: 12px; }
.pg-options > summary { cursor: pointer; font-size: .875rem; color: var(--muted); }
.pg-options-body { display: grid; gap: 12px; margin-top: 12px; }
.pg-options .pg-stream { align-self: end; padding-bottom: 10px; }
.pg-thread { list-style: none; margin: 0 0 16px; padding: 0 0 16px; display: grid; gap: 10px; border-bottom: 1px solid var(--rule); }
.pg-thread .pg-turn-role { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pg-thread .pg-turn-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* From/to days (console item 21): Spend's header and the Full log. */
.date-range { display: flex; align-items: center; gap: 6px; }
.date-range .form-input { width: auto; }
.date-range label { font-size: .8125rem; color: var(--muted); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.filter-chips:empty { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 10px; border-radius: 999px; background: var(--surface); font-size: .8125rem; }
.filter-chip button { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.filter-chip button:hover { color: var(--text); background: var(--raised); }
.sort-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sort-btn:hover { color: var(--text); }
.sort-mark::after { content: "\2195"; opacity: 0; font-size: .85em; }
.sort-btn:hover .sort-mark::after, .sort-btn:focus-visible .sort-mark::after { opacity: .45; }
th[aria-sort="ascending"] .sort-mark::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .sort-mark::after { content: "\2193"; opacity: 1; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 14px; }

.kv-rows { display: flex; flex-direction: column; margin-bottom: 8px; }
.kv-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.kv-row:last-child { border-bottom: 1px solid var(--rule); }
.kv-row > span:first-child { flex-shrink: 0; }
.kv-row > span:last-child { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.kv-list { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-family: var(--font-mono); margin-top: 10px; }
.kv-list .kv { display: flex; justify-content: space-between; gap: 12px; }
.kv-list .kv span:first-child { min-width: 0; overflow-wrap: anywhere; }
.kv-list .kv span:last-child { font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---------------------------------------------------------------- tables */

.table-wrap { max-width: none; overflow-x: auto; position: relative; }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th {
    text-align: left;
    font: .75rem var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 400;
    padding: 9px 16px 9px 0;
    border-top: 1px solid var(--rule);
    white-space: nowrap;
}
.data-table td { padding: 10px 16px 10px 0; border-top: 1px solid var(--rule); vertical-align: middle; font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.data-table th:first-child, .data-table td:first-child { padding-left: var(--pad); }
.data-table th:last-child, .data-table td:last-child { padding-right: var(--pad); }
.table-wrap:not(.bleed) .data-table th:first-child, .table-wrap:not(.bleed) .data-table td:first-child { padding-left: 0; }
.table-wrap:not(.bleed) .data-table th:last-child, .table-wrap:not(.bleed) .data-table td:last-child { padding-right: 0; }
.data-table tbody tr:hover td { background: var(--hover); }
.data-table .num-col { text-align: right; }
.data-table .actions-col { text-align: right; white-space: nowrap; width: 1%; }
.button-row { display: inline-flex; align-items: center; gap: 8px; }

/* MCP setup: warnings that a server is not usable from chats yet, and the
   result of Test connection (in the dialog and under a server's row). */
.setup-notes { display: flex; flex-direction: column; gap: 10px; }
.setup-note { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 12px var(--pad); border-radius: var(--radius); background: var(--warnbg); color: var(--warn); font-size: .875rem; line-height: 1.5; }
.setup-note .textlink { color: var(--warn); text-decoration-color: currentColor; font-size: .875rem; }
.mcp-test-result { display: flex; flex-direction: column; gap: 10px; font-size: .875rem; line-height: 1.5; }
.mcp-test-result .test-head { font-weight: 500; }
.mcp-test-result .test-head.ok { color: var(--ok); }
.mcp-test-result .test-head.err { color: var(--danger); }
.mcp-test-result .test-error { margin: 0; color: var(--muted); font: .8125rem var(--font-mono); overflow-wrap: anywhere; }
.mcp-tool-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-tool-list code { font: .75rem var(--font-mono); padding: 3px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule); }
.data-table tr.mcp-test-row td { padding-top: 4px; }
/* "Tools to offer" in the MCP server dialog: a checklist of the tools Test
   connection found, with each one's approximate size. */
.form-note { display: block; margin: -8px 0 18px; }
/* Providers dialog: the models a provider uses, each with its price. */
.model-load-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.model-slot { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); }
.model-slot.ok { border-color: var(--ok); }
.model-slot.bad { border-color: var(--danger); }
.model-slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.model-slot-label { font-size: .875rem; font-weight: 500; }
.model-slot-model { font: .875rem var(--font-mono); overflow-wrap: anywhere; }
.model-slot-why { font-size: .8125rem; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.model-slot-why:empty { display: none; }
.model-slot.bad .model-slot-why { color: var(--danger); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.rt-rows + .link-btn { align-self: flex-start; }
.model-board { display: flex; flex-direction: column; gap: 10px; }
.model-board-title { margin: 0; font-size: .875rem; font-weight: 500; }
.model-board-table { max-height: 320px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.model-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.model-table th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 500; color: var(--muted); padding: 8px 10px; }
.model-table td { padding: 7px 10px; border-top: 1px solid var(--rule); vertical-align: middle; }
.model-table td.mono { font: .75rem var(--font-mono); overflow-wrap: anywhere; }
.model-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-table .model-actions { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-family: var(--font-sans); }
.model-table .model-actions .link-btn { font-size: .75rem; color: var(--muted); }
.model-table .model-actions .link-btn:hover { color: var(--text); }
.model-table .cell-ok { color: var(--ok); font-weight: 600; }
.model-table .cell-warn { color: var(--warn); font-weight: 600; }
.model-table .cell-fail { color: var(--danger); }
.model-table .cell-none { color: var(--muted); }
.model-typed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.model-choice { display: flex; flex-direction: column; gap: 6px; }
.model-choice > label { font-size: .875rem; font-weight: 500; }
.price-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.price-row .check { font-size: .8125rem; }
.model-slot .model-vision { font-size: .8125rem; margin-top: 4px; }
.provider-test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.provider-test-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: .8125rem; line-height: 1.45; }
.provider-test-list .mark { font-weight: 600; }
.provider-test-list .ok .mark { color: var(--ok); }
.provider-test-list .warn .mark { color: var(--warn); }
.provider-test-list .fail .mark { color: var(--danger); }
.provider-test-list code { font: .75rem var(--font-mono); overflow-wrap: anywhere; }
.provider-test-list .detail { display: block; color: var(--muted); overflow-wrap: anywhere; }
.tools-picker { display: flex; flex-direction: column; gap: 10px; }
.tools-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.tools-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.tool-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 14px; border-top: 1px solid var(--rule); font-size: .8125rem; line-height: 1.45; cursor: pointer; }
.tool-option:first-child { border-top: 0; }
.tool-option:hover { background: var(--hover); }
.tool-option input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--text); }
.tool-option code { font: .75rem var(--font-mono); overflow-wrap: anywhere; }
.tool-option .tag { margin-left: 6px; }
.tool-option .tool-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); margin-top: 2px; }
.tool-option .tool-size { color: var(--muted); font: .75rem var(--font-mono); white-space: nowrap; }
.modal-foot .foot-start { margin-right: auto; }
/* Add provider in three steps (Phase 3, F1): the step list, the tile grid,
   and a footer that stays in view while the dialog scrolls. */
.wizard-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: step; }
.wizard-steps li { flex: 1; counter-increment: step; }
.wizard-step-btn { width: 100%; min-height: 44px; border: 0; border-top: 3px solid var(--rule); background: transparent; color: var(--muted); font: 500 .8125rem var(--font-sans); text-align: left; padding: 8px 0 0; cursor: pointer; }
.wizard-step-btn::before { content: counter(step) ". "; }
.wizard-step-btn.is-done { border-top-color: var(--muted); color: var(--text); }
.wizard-step-btn[aria-current="step"] { border-top-color: var(--text); color: var(--text); font-weight: 600; }
.wizard-step-btn:disabled { cursor: default; opacity: .6; }
.wizard-step-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--rule2); border-radius: var(--radius); cursor: pointer; }
.tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tile-name { font-size: .875rem; font-weight: 500; }
.tile-sub { font-size: .75rem; color: var(--muted); }
.tile:hover { background: var(--hover); }
.tile:has(input:checked) { border: 2px solid var(--text); padding: 11px 13px; }
.tile:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Guardrails for developers and viewers (Phase 3, E7): the rules in force. */
.summary-list { margin: 0; }
.summary-list > div { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--rule); }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 500; text-align: right; }
/* Guardrails > Policy (Phase 3, F3): Form and YAML tabs over one draft. */
.policy-panel { display: flex; flex-direction: column; gap: 4px; }
.modal-foot--sticky { position: sticky; bottom: 0; z-index: 1; margin: 10px calc(-1 * var(--modal-px)) calc(-1 * var(--modal-py)); padding: 14px var(--modal-px) var(--modal-py); background: var(--raised); border-radius: 0 0 var(--modal-radius) var(--modal-radius); }
/* MCP tool-definition pinning: the flag on a server row and the review dialog. */
button.pins-flag { border: 0; cursor: pointer; margin-top: 6px; }
button.pins-flag:hover { filter: brightness(.95); }
.pins-list { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
.pin-item { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pin-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-head code { font: .8125rem var(--font-mono); overflow-wrap: anywhere; }
.pin-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pin-diff > div { min-width: 0; }
.pin-diff--single { grid-template-columns: minmax(0, 1fr); }
.pin-text { margin: 4px 0 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; font: .75rem/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto; }
.pin-item details summary { cursor: pointer; font-size: .8125rem; color: var(--muted); }
@media (max-width: 640px) { .pin-diff { grid-template-columns: minmax(0, 1fr); } }
.data-table .prio-col { width: 1%; white-space: nowrap; }
.data-table .empty-cell { color: var(--muted); padding-top: 22px; padding-bottom: 22px; }
.data-table tbody tr:hover td.empty-cell { background: transparent; }
.data-table .sub { display: block; font-size: .8125rem; color: var(--muted); margin-top: 3px; }
.data-table .sub.sub-err { color: var(--danger); overflow-wrap: anywhere; }
.data-table tr.revoked td { color: var(--muted); }
.data-table tr.revoked .key-name { text-decoration: line-through; }
.data-table .mono-cell { font: .8125rem var(--font-mono); }
.key-name { font-weight: 500; }
/* A table row that opens a dialog. */
.data-table tr.row-open { cursor: pointer; }
.data-table tr.row-open:hover td, .data-table tr.row-open:focus-visible td { background: var(--hover); }
.data-table tr.row-open:focus-visible { outline: none; }
/* Costliest prompts: one prompt in full. */
.waste-when { margin: 0; font-size: .8125rem; }
.waste-task { display: flex; align-items: center; gap: 10px; font-size: .8125rem; margin-bottom: 12px; }
.waste-prompt { margin: 0 0 20px; padding: 16px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.waste-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.waste-side { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); }
.waste-side .muted { font-size: .8125rem; }
.waste-model { font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.waste-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: .8125rem; }
.waste-facts dt { color: var(--muted); }
.waste-facts dd { margin: 0; }
.waste-saving { margin: 16px 0 0; font-size: .9375rem; font-weight: 500; }
@media (max-width: 640px) { .waste-compare { grid-template-columns: minmax(0, 1fr); } }
.allow-host { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.learning-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: .8125rem; }
.learning-facts dt { color: var(--muted); }
.learning-facts dd { margin: 0; }
.learning-rule { display: block; margin-top: 2px; }
.row-actions { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
/* Members: a role change is staged beside its select until Save or Undo. */
.role-edit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* A card whose table is its last element ends on the card's padding, not
   on a second rule. */
.card > .table-wrap:last-child .data-table tbody tr:last-child td { border-bottom: 0; }
.card > .table-wrap:last-child { margin-bottom: calc(-1 * var(--pad) + 8px); }

/* ------------------------------------------------------------ playground */

.command-section { display: flex; flex-direction: column; gap: 14px; }

/* #prompt and .mention-backdrop must share font, size, line height,
   letter spacing, padding, border width, white-space and wrapping, or the
   highlighted @mentions drift out of line with the typed text. */
.command-input, .mention-backdrop {
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1.6;
    letter-spacing: normal;
    padding: 16px 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.command-input {
    width: 100%;
    display: block;
    border-color: var(--field-line);
    color: var(--text);
    resize: vertical;
    min-height: 120px;
}
.command-input::placeholder { color: var(--muted); opacity: 1; }
.command-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.prompt-with-backdrop, .prompt-wrap { position: relative; }
.mention-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    color: transparent;
    background-color: var(--field);
    border-color: transparent;
}
#prompt { position: relative; z-index: 1; background: transparent; }
.mention-token { background-color: var(--surface); border-radius: 4px; box-shadow: 0 0 0 1px var(--rule2); }
.mcp-chip-row:empty { display: none; }

/* The whole prompt card takes dropped files (Phase 3, D5). */
.command-section.drag-over { outline: 2px dashed var(--link); outline-offset: -8px; background: var(--surface); }
.attach-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 2px 0 12px;
    margin: 0 8px 4px 0;
    border: 1px solid var(--rule2);
    border-radius: 999px;
    font-size: .8125rem;
    color: var(--text);
    max-width: 100%;
}
.file-pill button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--danger); cursor: pointer; font-size: 1rem; line-height: 1; }
.file-pill button:hover { background: var(--dangerbg); }

.composer-foot { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--rule); }
/* One toolbar (D5): Attach, provider, tier and cache, then Send. */
.composer-select { width: auto; min-width: 200px; max-width: 280px; flex: 0 1 240px; }

.response-section { display: flex; flex-direction: column; gap: 14px; }
.response-section > .card-head { margin-bottom: 6px; }
.response-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-json { transform: scaleX(-1); }

.response-content {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px 18px;
    min-height: 96px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.response-content .response-empty { margin: 0; color: var(--muted); font-size: .875rem; }
.response-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .875rem; }
.spinner { width: 16px; height: 16px; flex: none; border: 2px solid var(--rule2); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.response-content p { margin: 0 0 14px; }
.response-content p:last-child { margin-bottom: 0; }
.response-content :not(pre) > code { background: var(--raised); padding: 1px 6px; border-radius: 6px; }
.response-content pre {
    margin: 0;
    padding: 16px;
    background: var(--code-bg) !important;
    color: var(--code-fg);
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.6;
}
.response-content table { border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; }
.response-content th, .response-content td { border: 1px solid var(--rule); padding: 6px 10px; }

.response-json {
    margin: 0;
    background: var(--code-bg);
    color: var(--code-fg);
    border: 1px solid var(--code-rule);
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: .8125rem;
    overflow-x: auto;
    min-height: 110px;
}

/* Playground: one line per tool call, opening to readable JSON. */
.tool-log { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.tool-log-head { font: 500 .75rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.tool-step + .tool-step { border-top: 1px solid var(--rule); }
.tool-step > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: .8125rem; min-width: 0; }
.tool-step > summary::-webkit-details-marker { display: none; }
.tool-step > summary:hover { background: var(--hover); }
.tool-step-mark { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .6875rem; background: var(--ok); color: var(--raised); flex-shrink: 0; }
.tool-step--failed .tool-step-mark { background: var(--danger); }
.tool-step-n { color: var(--muted); white-space: nowrap; }
.tool-step-server { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.tool-step-name { font-weight: 500; }
.tool-step-summary { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tool-step--failed .tool-step-summary { color: var(--danger); }
.tool-step-more { font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.tool-step[open] .tool-step-more { visibility: hidden; }
.tool-step-body { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px 44px; }
.json-block { margin: 0 0 6px; padding: 12px 14px; max-height: 260px; overflow: auto; background: var(--code-bg); color: var(--code-fg);
    border: 1px solid var(--code-rule); border-radius: 10px; font: .75rem/1.55 var(--font-mono); white-space: pre; }
.json-block .j-key { color: var(--code-key); }
.json-block .j-str { color: var(--code-str); }
.json-block .j-num, .json-block .j-bool, .json-block .j-null { color: var(--code-num); }

.connect-headers { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.connect-headers dl { margin: 8px 0 0; }
.connect-headers dt { flex: 0 0 auto; min-width: 120px; }
.connect-headers dd { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.switch-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-label .mono { overflow-wrap: anywhere; }
.switch-value { white-space: nowrap; }
/* The setting's name and note take the squeeze on a phone and wrap; its
   short value keeps its width (these beat .kv-row > span:first-child and
   :last-child, which would do the opposite and widen the page). */
.kv-row > span.switch-label { flex-shrink: 1; }
.kv-row > span.switch-value { flex-shrink: 0; }
.routing-why { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; font-size: .8125rem; color: var(--muted); }

.code-block-wrapper { margin: 16px 0; border: 1px solid var(--code-rule); border-radius: var(--radius); overflow: hidden; background: var(--code-bg); }
.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--code-rule);
    font: .75rem var(--font-sans);
    color: var(--code-muted);
}
.code-block-lang { text-transform: lowercase; font-family: var(--font-mono); }
.code-block-copy { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--code-muted); cursor: pointer; font-size: .75rem; padding: 4px; }
.code-block-copy:hover { color: var(--code-fg); }
.code-block-copy svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.copy-success { color: var(--pass) !important; }

/* highlight.js tokens, on the always-dark code background */
.hljs { background: transparent; color: var(--code-fg); }
.hljs-comment, .hljs-quote { color: var(--code-muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color: var(--code-kw); }
.hljs-string, .hljs-attr, .hljs-template-tag { color: var(--code-num); }
.hljs-number, .hljs-literal, .hljs-symbol { color: var(--code-lit); }
.hljs-title, .hljs-function .hljs-title, .hljs-section { color: var(--code-key); }
.hljs-variable, .hljs-params { color: var(--code-fg); }
.hljs-meta, .hljs-doctag { color: var(--code-meta); }

/* MCP @-mention dropdown and chips */
.mcp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 260px;
    max-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--raised);
    border: 1px solid var(--rule2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    z-index: 20;
    padding: 6px;
}
.mcp-dropdown-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: .875rem; }
.mcp-dropdown-item:hover, .mcp-dropdown-item.active { background: var(--surface); }
.mcp-item-name { font-family: var(--font-mono); }
.mcp-item-status { font-size: .75rem; color: var(--muted); }
.mcp-dropdown-empty { padding: 10px 12px; font-size: .8125rem; color: var(--muted); }
.mcp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mcp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface);
    font: .8125rem var(--font-mono);
    color: var(--text);
}
.mcp-chip-remove { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; }
.mcp-chip-remove:hover { color: var(--danger); }
.mcp-chip-add { background: transparent; border: 1px dashed var(--rule2); color: var(--muted); cursor: pointer; font-family: var(--font-sans); }
.mcp-chip-add:hover { border-color: var(--text); color: var(--text); }

/* ------------------------------------------------------ providers & MCP */

.provider-name { font-size: .9375rem; font-weight: 500; }
.provider-status { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--ok); }
.provider-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.provider-status.unhealthy { color: var(--danger); }
.provider-status.off { color: var(--muted); }
.provider-status.untested { color: var(--muted); }
.provider-status.untested::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.provider-cmd { font: .8125rem var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.priority-input { width: 64px; min-height: 36px; padding: 4px 8px; text-align: center; font-size: .875rem; }
/* Routing v2's Preference (Normal / Backup only) in the same column. */
.preference-input { width: 150px; min-height: 36px; padding: 4px 28px 4px 10px; font-size: .875rem; }
tr.disabled td:not(.actions-col):not(.prio-col) { opacity: .55; }
.toggle-enabled-btn:not(.menu-item) { min-height: 34px; padding: 0 14px; font-size: .8125rem; }

/* OAuth (MCP servers page) */
.oauth-provider-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.oauth-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.oauth-row:last-child { border-bottom: 1px solid var(--rule); }
.oauth-badge {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--surface);
    font-weight: 600;
    flex-shrink: 0;
}
.oauth-badge[data-provider="notion"] { background: var(--logo-ground); }
.oauth-row-body { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oauth-row-title { font-weight: 500; text-transform: capitalize; }
.oauth-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .75rem; color: var(--muted); }
.oauth-row-meta code { font-size: .75rem; }
.oauth-row-actions { display: flex; gap: 8px; margin-left: auto; }
.oauth-list > .oauth-row { flex-wrap: nowrap; }
.oauth-list > .oauth-row .oauth-row-body { flex: 1 1 auto; }
.oauth-btn {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--rule2);
    background: transparent;
    color: var(--text);
    font: 500 .8125rem var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
}
.oauth-btn:hover { border-color: var(--text); }
.oauth-btn--primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.oauth-btn--primary:hover { opacity: .88; }
.oauth-btn--danger { color: var(--danger); border-color: var(--danger); }
.oauth-btn--danger:hover { background: var(--dangerbg); }
/* MCP is parked unless GET /auth/me says mcp_enabled (app.js mcpOn()):
   everything marked data-mcp stays hidden, from first paint. */
body:not(.mcp-on) [data-mcp] { display: none !important; }

.oauth-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font: 500 .75rem var(--font-sans);
    background: var(--surface);
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.oauth-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.oauth-pill--ok { background: var(--okbg); color: var(--ok); }
.oauth-pill--warn { background: var(--warnbg); color: var(--warn); }
.oauth-pill--muted { background: var(--surface); color: var(--muted); }
.org-pill--danger { background: var(--dangerbg); color: var(--danger); }

/* ------------------------------------------------------------ org controls */

.org-controls-card > .card-head { margin-bottom: 8px; }
.org-controls-note { margin: 0 0 12px; font-size: .8125rem; color: var(--muted); }
.org-control-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 40px; padding: 16px 0; border-top: 1px solid var(--rule); }
.org-control-row:last-of-type { padding-bottom: 4px; }
.org-control-text { flex: 1 1 auto; max-width: 780px; min-width: 0; }
.org-control-label { font-size: .9375rem; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
/* Quiet status: muted text and a coloured dot, no fill. Paused keeps its red text. */
.org-control-label .oauth-pill { height: auto; padding: 0; background: none; font-weight: 400; font-size: .8125rem; color: var(--muted); }
.org-control-label .oauth-pill--ok::before { background: var(--ok); }
.org-control-label .oauth-pill--warn::before { background: var(--warn); }
.org-control-label .org-pill--danger { color: var(--danger); }
.org-control-help { margin: 0 0 6px; font-size: .875rem; color: var(--muted); line-height: 1.55; }
.org-control-help:last-child { margin-bottom: 0; }
.org-control-help code { overflow-wrap: anywhere; }
.org-control-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.org-control-actions .form-input { width: 150px; }
.org-control-actions .form-input.org-tables-input { width: 280px; max-width: 100%; }

.org-paused-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 12px var(--pad);
    border-radius: var(--radius);
    background: var(--dangerbg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.yaml-textarea { min-height: 320px; height: 100%; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6; background: var(--surface); }
.card-column-body.form-group { margin-bottom: 16px; }

/* ------------------------------------------------------- usage & costs */

/* Capped width so the doughnut and its legend sit together instead of at
   opposite ends of a wide card. */
.chart-card .chart-container { position: relative; height: 200px; width: 200px; flex-shrink: 0; }
.spend-donut { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.chart-center strong { font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.chart-center span { font-size: .75rem; color: var(--muted); }
/* One grid for the whole legend (each row a subgrid), so the amounts line up
   right after the longest name rather than at the far edge of the card. */
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 10px minmax(0, max-content) auto 40px; gap: 10px 14px; align-items: center; flex: 0 1 auto; min-width: 200px; }
.chart-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: .8125rem; }
.chart-swatch { width: 10px; height: 10px; border-radius: 3px; }
.chart-swatch[data-swatch="0"] { background: var(--chart-1); }
.chart-swatch[data-swatch="1"] { background: var(--chart-2); }
.chart-swatch[data-swatch="2"] { background: var(--chart-3); }
.chart-swatch[data-swatch="3"] { background: var(--chart-4); }
.chart-swatch[data-swatch="4"] { background: var(--chart-5); }
.chart-swatch[data-swatch="5"] { background: var(--chart-6); }
.chart-swatch[data-swatch="6"] { background: var(--chart-7); }
.chart-swatch[data-swatch="7"] { background: var(--chart-8); }
.chart-swatch[data-swatch="8"] { background: var(--chart-9); }
.chart-swatch[data-swatch="9"] { background: var(--chart-10); }
.chart-legend-name { font-family: var(--font-mono); overflow-wrap: anywhere; }
.chart-legend-value { font-weight: 500; font-variant-numeric: tabular-nums; }
.chart-legend-pct { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
/* Usage & costs: the doughnut beside the three 30-day breakdowns. */
/* The doughnut and its legend across the top, the three breakdowns side by
   side under it (one column on phones): beside a tall stack of breakdowns,
   the doughnut left empty space under it. */
.spend-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.spend-chart, .spend-cell { border-top: 1px solid var(--rule); padding-top: 14px; min-width: 0; }
.spend-chart > .label { margin-bottom: 14px; }
.spend-chart > .fine { margin: 0; }
.spend-breakdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; min-width: 0; }
.spend-cell .kv-list { margin-top: 12px; gap: 8px; }
.waste-box { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.waste-box .label { display: flex; align-items: center; gap: 8px; }
.rec-list { display: flex; flex-direction: column; gap: 14px; }
.rec-list > .empty-row { border-top: 1px solid var(--rule); }
.rec { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rec-title { margin: 0; font-size: 1rem; font-weight: 500; }
.rec-why { margin: 0; font-size: .875rem; color: var(--muted); line-height: 1.5; }
.rec-saving { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); }
.rec-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--rule2); font-size: .8125rem; }
.bar-row { margin-bottom: 12px; }
.bar-row .bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; margin-bottom: 6px; }
.bar-track { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--ok); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.danger { background: var(--danger); }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: .8125rem; }
/* A "more detail" fold at the foot of a card. */
.card-more { margin-top: 14px; }
.card-more > summary { cursor: pointer; font-size: .8125rem; color: var(--muted); width: max-content; }
.card-more > summary:hover { color: var(--text); }
.card-more > p { margin: 10px 0 0; line-height: 1.7; }
.ok-text { color: var(--ok); }

/* ------------------------------------------------------------------ logs */

.logs-pane {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    height: clamp(460px, calc(100vh - 280px), 760px);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--raised);
}
.logs-list-col { display: flex; flex-direction: column; border-right: 1px solid var(--rule); min-height: 0; min-width: 0; }
/* Search on its own line; the source and outcome menus share the next. */
.logs-search { padding: 14px var(--pad); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px; }
.logs-search input { flex: 1 1 100%; min-width: 0; }
.logs-search select { flex: 1 1 0; min-width: 0; width: auto; }
.logs-search [role="status"]:empty { display: none; }
.logs-search-hint { flex: 1 1 100%; }
.logs-list { flex-grow: 1; overflow-y: auto; }
.livestream-item { padding: 12px var(--pad); border-bottom: 1px solid var(--rule); cursor: pointer; }
.livestream-item:hover { background: var(--hover); }
.livestream-item.active { background: var(--nav-on-bg); }
.livestream-item .li-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.livestream-item .li-model { font: 500 .8125rem var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.livestream-item .li-time { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.livestream-item .li-prompt { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The API key a request came through (Playground requests have no tag). */
.livestream-item .li-source { display: inline-block; max-width: 100%; margin-top: 6px; padding: 1px 8px; border: 1px solid var(--rule2); border-radius: 999px; font-size: .6875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livestream-item .li-tier { display: inline-block; margin: 6px 6px 0 0; padding: 1px 8px; border: 1px solid var(--rule2); border-radius: 999px; font-size: .6875rem; color: var(--text); }
.logs-detail { padding: 20px var(--pad); overflow-y: auto; min-width: 0; }
.ld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
/* Agent-run traces: the Agent tasks tab of Requests, and its dialog. */
#trace-card { margin-top: 0; }

/* Tabs (Phase 2): a row of page sections; the selected one is underlined. */
/* The rule under the row is an inset shadow, so the selected tab's 2px
   border covers it without spilling out of the row (a -1px margin did, and
   the row then scrolled by one pixel). */
.tabs { display: flex; gap: 2px; margin-bottom: var(--gap); box-shadow: inset 0 -1px 0 var(--rule); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 500 .875rem var(--font-sans); min-height: 40px; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Side drawer (Phase 2): on a narrow screen the request detail slides over
   the page from the right; on a wide one it sits beside the list and its
   close bar is hidden. */
.drawer-bar { display: none; }
.drawer-scrim { display: none; }
.trace-id { overflow-wrap: anywhere; }
/* Agent tasks: the task ID search beside the range menu. */
.trace-search { width: 11rem; max-width: 100%; }
/* Agent tasks: search and period side by side, same size. */
.trace-controls { flex-wrap: nowrap; }
.trace-controls .trace-search, .trace-controls .trace-range { width: 11rem; flex: 0 0 11rem; }
/* Agent tasks, empty: how to tag a request (inside the empty state's fill,
   so no border of its own). */
.trace-hint-code { display: flex; flex-direction: column; gap: 6px; max-width: 46rem; padding: 12px 14px; border-radius: 10px; background: var(--raised); }
@media (max-width: 640px) { .trace-controls { flex-wrap: wrap; } .trace-controls .trace-search, .trace-controls .trace-range { flex: 1 1 100%; width: auto; } }
.trace-hint-code code { font: .8125rem var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.trace-title { margin: 0; font: 500 1rem var(--font-mono); overflow-wrap: anywhere; }
.modal-card--trace { width: 820px; }
.trace-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.trace-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.trace-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--raised); }
.trace-summary strong { font-size: 1.0625rem; font-weight: 500; }
.trace-summary span { font-size: .75rem; color: var(--muted); }
.trace-fact-label { font-size: .75rem; color: var(--muted); }
/* Steps as a timeline: a numbered dot per request, a line down to the next. */
.trace-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.trace-step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 14px; padding-bottom: 22px; min-width: 0; }
.trace-step::before { content: ''; position: absolute; left: 12px; top: 30px; bottom: 4px; width: 2px; background: var(--rule2); }
.trace-step:last-child { padding-bottom: 0; }
.trace-step:last-child::before { display: none; }
.trace-step-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 2px; }
.trace-tool { margin-left: 40px; }
.trace-tool--orphan { margin-left: 0; }
.trace-tool-dot { width: 10px; height: 10px; margin: 7px 0 0 8px; border-radius: 50%; border: 2px solid var(--rule2); background: var(--raised); }
.trace-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.trace-step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nav-on-bg); font-size: .75rem; font-weight: 500; position: relative; }
.trace-step-name { font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.trace-step-figures { margin-left: auto; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.trace-meta { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.trace-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.trace-code { font: .6875rem var(--font-mono); color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 9px; }
.trace-fact { overflow-wrap: anywhere; }
.trace-fact .trace-fact-label { margin-right: 4px; }
.trace-reason { margin: 0; font-size: .8125rem; overflow-wrap: anywhere; }
.trace-prompt { margin: 0; font-size: .8125rem; color: var(--text); background: var(--surface); border-left: 2px solid var(--rule2); border-radius: 0 10px 10px 0; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow-y: auto; }
.ld-title { margin: 0; font: 500 1rem var(--font-mono); overflow-wrap: anywhere; }
.ld-stats { font-size: .8125rem; display: flex; gap: 12px; align-items: center; }
.ld-remove { width: 30px; height: 30px; color: var(--muted); }
.ld-remove svg { width: 15px; height: 15px; fill: currentColor; }
.ld-remove:hover { color: var(--danger); border-color: var(--danger); }
.ld-block { margin-bottom: 20px; }
.ld-block h3 { margin: 0 0 10px; font-size: .8125rem; font-weight: 600; }
.ld-pre { margin: 0; padding: 14px 16px; background: var(--surface); border-radius: var(--radius); white-space: pre-wrap; font: .8125rem/1.55 var(--font-mono); overflow-wrap: anywhere; }
.ld-raw { display: none; margin-top: 10px; position: relative; }
.ld-raw.is-open { display: block; }
.ld-when { margin: 6px 0 0; }
/* Copy icon in the raw JSON box's top-right corner, on the code colours. */
.ld-raw-copy { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; color: var(--code-fg); border-color: transparent; background: var(--code-bg); }
.ld-raw-copy svg { width: 15px; height: 15px; fill: currentColor; }
.ld-raw-copy:hover { border-color: var(--code-fg); }
.ld-raw pre { margin: 0; padding: 14px 16px; background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius); font: .75rem/1.5 var(--font-mono); overflow-x: auto; }
#live-response-box { min-height: 0; padding: 16px 18px; }

/* ---------------------------------------------------------------- modals */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--scrim);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: min(10vh, 90px) 16px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal:not([hidden]) { animation: fade-in var(--dur-2) var(--ease); }
.modal:not([hidden]) .modal-card { animation: rise-in var(--dur-3) var(--ease); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
.modal-card {
    width: 600px;
    max-width: 100%;
    background: var(--raised);
    border: 1px solid var(--rule2);
    border-radius: var(--modal-radius);
    padding: var(--modal-py) var(--modal-px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow-pop);
    --modal-px: 28px;
    --modal-py: 24px;
    --modal-radius: 14px;
}
.modal-card--wide { width: 720px; }
.modal-card--narrow { width: 480px; }
/* Stacking: openModal() puts each newly opened dialog above the last. */
.confirm-body { display: flex; flex-direction: column; gap: 10px; }
.confirm-body p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.confirm-body p:first-child { color: var(--text); }
.modal-card form { display: flex; flex-direction: column; gap: 4px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.modal-title { margin: 0; font-size: var(--fs-dialog); overflow-wrap: anywhere; }
/* A long name in a title (an email address) wraps instead of running under the close button. */
.modal-head > :first-child { min-width: 0; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px 12px; border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 8px; flex-wrap: wrap; }
.ok-badge { width: 40px; height: 40px; border-radius: 50%; background: var(--okbg); color: var(--ok); display: grid; place-items: center; }
.ok-badge svg { width: 18px; height: 18px; stroke-width: 2.4; }
.secret-box { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 12px 12px 12px 18px; flex-wrap: wrap; }
.secret-box code { flex: 1 1 240px; font-size: .875rem; word-break: break-all; line-height: 1.5; }
.secret-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Print a secret shown once (app.js wireSecretFile): only its dialog, on plain paper. */
@media print {
    body[data-print-secret] > :not([data-print-target]) { display: none !important; }
    [data-print-target] { position: static !important; background: none !important; display: block !important; }
    [data-print-target] .modal-card, [data-print-target] .signin-card { box-shadow: none !important; border: 0 !important; max-height: none !important; }
    [data-print-target] button, [data-print-target] .check, [data-print-target] .signin-band { display: none !important; }
}
/* Printing a page (made for Overview and Spend, review item 40): black on
   white, the page alone without the sidebar, bars, controls or tooltips, and
   cards kept whole across pages. */
@media print {
    :root {
        --bg: #FFFFFF; --side: #FFFFFF; --surface: #FFFFFF; --raised: #FFFFFF; --field: #FFFFFF;
        --hover: #FFFFFF; --nav-on-bg: #FFFFFF;
        --text: #000000; --muted: #45454F; --rule: #C8C8CF; --rule2: #9E9EA8;
        --link: #000000; --underline: #45454F;
    }
    @page { margin: 14mm; }
    .sidebar, .skip-link, .gateway-bar, .page-actions, .tabs, .toast-stack, .tooltip,
    .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .icon-btn, .row-menu { display: none !important; }
    .main { padding: 0; }
    .main-inner { max-width: none; }
    .card, .kpi { break-inside: avoid; }
    .bar-fill, .chip, .dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* API key created: badge beside the title, the key with its name, then the
   key's settings as a compact grid. */
.reveal-head { display: flex; align-items: center; gap: 16px; }
.reveal-head .ok-badge { flex: none; }
.reveal-head .body { margin: 4px 0 0; }
.secret-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.secret-main code { flex: none; }
.secret-name { font-size: .75rem; color: var(--muted); }
.key-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.key-fact { min-width: 0; }
.key-fact dt { font-size: .75rem; color: var(--muted); margin-bottom: 4px; }
.key-fact dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Two-step verification: the recovery codes, two columns of short lines. */
.recovery-codes { flex: 1 1 240px; margin: 0; font-size: .875rem; line-height: 1.9; white-space: pre; columns: 2; column-gap: 24px; }
@media (max-width: 420px) { .recovery-codes { columns: 1; } }
.mfa-key { margin-bottom: 18px; }
.mfa-qr { width: 184px; max-width: 100%; margin-bottom: 6px; }
/* No stroke: the console strokes every svg (icons), which would smear the modules together. */
.mfa-qr svg { display: block; width: 100%; height: auto; border-radius: 8px; stroke: none; }
.mfa-qr .qr-light { fill: var(--qr-light); }
.mfa-qr .qr-dark { fill: var(--qr-dark); }
body.modal-open { overflow: hidden; }
/* While the sign-in screen covers the console, the console behind it must
   not scroll (its scrollbar showed beside the sign-in screen). */
body:has(> .signin-overlay:not([hidden])) { overflow: hidden; }

/* Toasts stack at the bottom, newest last (console Phase 2, H3). */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
}
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: .875rem;
    font-weight: 500;
    box-shadow: var(--shadow-pop);
}
.toast.error { background: var(--danger); color: var(--on-danger); }
.toast-btn {
    min-height: 28px;
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.toast-btn.toast-close { border-color: transparent; padding: 2px 6px; font-size: 1.1rem; line-height: 1; }
.toast-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Skeleton rows while a list loads (Phase 2, H2): the list keeps its shape. */
.skeleton-row td, div.skeleton-row { padding-top: 12px; padding-bottom: 12px; }
div.skeleton-row { padding-left: var(--pad); padding-right: var(--pad); }
.skeleton-bar {
    display: block;
    height: 10px;
    width: 70%;
    border-radius: 999px;
    background: var(--rule);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-row:nth-child(2) .skeleton-bar { width: 55%; }
.skeleton-row:nth-child(3) .skeleton-bar { width: 40%; }
@keyframes skeleton-pulse { 50% { opacity: .45; } }
@media (forced-colors: active) { .skeleton-bar { background: GrayText; } }

/* --------------------------------------------------------------- sign-in */

.signin-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    background: var(--bg);
    overflow-y: auto;
}
.signin-band {
    background: var(--band);
    color: var(--band-fg);
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}
.signin-band .label { color: var(--band-muted); }
.signin-band h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; }
.signin-band p { margin: 0; max-width: 520px; font-size: 1.125rem; line-height: 1.5; color: var(--band-muted); }
.signin-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.signin-pillars > div { border-top: 1px solid var(--band-rule); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; }
.signin-pillars .label { font-size: .6875rem; }
.signin-side { display: flex; align-items: center; justify-content: center; padding: 56px; }
/* A fresh install's first step (K11). */
.signin-setup { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); }
.signin-setup p { margin: 0; }
.signin-setup pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .8125rem; }
/* Account password fields (app.js enhancePasswords): a show toggle and a Caps Lock notice. */
.pw-field { position: relative; }
.pw-field .form-input { padding-right: 48px; }
.pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border-color: transparent; background: transparent; }
.pw-toggle[aria-pressed="true"] { color: var(--text); }
.pw-caps { align-self: flex-start; margin-top: 6px; padding: 3px 9px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: .78rem; font-weight: 500; }
/* The sign-in screen keeps its own scale: pill buttons, 15px text, roomy
   fields, a light-weight heading. */
.signin-overlay { font-size: .9375rem; }
.signin-overlay .display { font-weight: 400; }
.signin-overlay .brand-mark { font-size: 1.625rem; font-weight: 500; letter-spacing: normal; }
.signin-overlay .lead { font-size: 1rem; }
.signin-overlay .btn-primary, .signin-overlay .btn-secondary { border-radius: 999px; padding: 0 20px; }
.signin-overlay .form-group { gap: 8px; }
.signin-overlay .form-input { padding: 10px 14px; border-radius: 10px; font-size: .9375rem; }
.signin-overlay .icon-btn { width: 34px; height: 34px; border-radius: 999px; }
.signin-card { width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.signin-card h2 { margin: 0; font-size: 2.5rem; }
.signin-card .btn-primary { width: 100%; min-height: 48px; font-size: .9375rem; }
.signin-card .form-group { margin: 0; }
.signin-card .form-input { min-height: 48px; }
.signin-foot { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 18px; }
/* Single sign-on buttons above the email form, then an "or" rule. */
.signin-sso { display: flex; flex-direction: column; gap: 10px; }
.signin-sso .signin-sso-btn { width: 100%; min-height: 48px; font-size: .9375rem; white-space: normal; text-align: center; gap: 12px; }
.signin-sso .sso-mark { width: 18px; height: 18px; flex-shrink: 0; }
.signin-or { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: .8125rem; color: var(--muted); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ responsive */
/* Breakpoints are in CSS pixels, so browser zoom lands on them too: 125%
   zoom on a 1536 px screen is ~1229 px wide, 150% is ~1024, 200% is ~768,
   400% is ~384. */

@media (max-width: 1280px) {
    .main { padding: 36px 32px 64px; }
    .spend-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .spend-breakdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    :root { --sidebar-w: 224px; --gap: 20px; }
    .kpi-row, .kpi-row--4, .kpi-row--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-card .kpi:nth-child(odd) { border-left: 0; }
    .kpi-card .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
    .kpi-card .kpi-row--3 .kpi { border-top: 0; border-left: 1px solid var(--rule); }
    .kpi-card .kpi-row--3 .kpi:first-child { border-left: 0; }
    .split-1-1, .overview-grid { grid-template-columns: minmax(0, 1fr); }
    .split-3 { grid-template-columns: minmax(0, 1fr); }
    .split-divider { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
    .org-control-row { flex-wrap: wrap; }
}

/* Short windows (a laptop at 125-150% zoom): tighten the sidebar so it
   fits without scrolling. */
@media (max-height: 760px) and (min-width: 861px) {
    .sidebar { padding-top: 18px; padding-bottom: 14px; gap: 12px; }
    .nav-group { padding-top: 10px; padding-bottom: 4px; }
    .nav-link { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
    .account { padding-top: 12px; }
}

@media (max-width: 860px) {
    :root { --pad: 16px; --gap: 12px; }
    .app-shell { flex-direction: column; }
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        height: auto;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 16px 0;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }
    .sidebar { padding-bottom: 10px; }
    /* Brand and page title share a baseline; the menu button centres. */
    .sidebar-head { flex-direction: row; align-items: baseline; gap: 12px; width: 100%; }
    .brand { padding: 0; }
    .gateway-ident { display: none; }
    .phone-title { display: block; flex: 1; min-width: 0; font-size: .9375rem; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar .phone-menu-btn { display: grid; width: 44px; height: 44px; align-self: center; }
    .side-badges { padding: 0; width: 100%; }
    .nav-sheet { display: none; }
    .sidebar.menu-open .nav-sheet {
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: fixed;
        inset: auto 0 0 0;
        max-height: 88vh;
        overflow-y: auto;
        z-index: 70;
        padding: 16px 16px 22px;
        background: var(--raised);
        border-radius: 14px 14px 0 0;
        box-shadow: var(--shadow-pop);
    }
    .nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: var(--scrim); }
    .nav-link { min-height: 44px; }
    .account-menu { bottom: calc(100% + 6px); }
    .main { padding: 20px 16px 56px; }
    .page-header { padding: 0 var(--pad) 4px; }
    .page-actions { justify-content: flex-start; }
    /* KPIs two to a row, ruled between. */
    .kpi-row, .kpi-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .kpi-card .kpi, .kpi-card .kpi-row--3 .kpi { border-left: 1px solid var(--rule); border-top: 0; padding: 14px var(--pad); }
    .kpi-card .kpi:nth-child(odd), .kpi-card .kpi-row--3 .kpi:nth-child(odd) { border-left: 0; }
    .kpi-card .kpi:nth-child(n + 3), .kpi-card .kpi-row--3 .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
    .form-row, .oauth-provider-form-grid { grid-template-columns: minmax(0, 1fr); }
    .org-control-row { flex-direction: column; align-items: stretch; }
    .org-control-actions { justify-content: flex-start; flex-wrap: wrap; }
    .logs-pane { grid-template-columns: minmax(0, 1fr); height: auto; }
    .logs-list-col { border-right: 0; max-height: none; }
    .logs-detail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(100%, 520px); padding-top: 8px; background: var(--raised); box-shadow: var(--shadow-pop); transform: translateX(100%); visibility: hidden; transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
    /* Visible at once on open, so focus can land in it; hidden only after it slides away. */
    .logs-detail.is-open { transform: none; visibility: visible; transition: transform var(--dur-2) var(--ease), visibility 0s; }
    .logs-detail .drawer-bar { display: flex; justify-content: flex-end; margin: 0 -8px 8px 0; }
    .drawer-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 69; background: var(--scrim); }
    .signin-overlay { grid-template-columns: minmax(0, 1fr); }
    /* A compact header on phones, so the form starts near the top (K4). */
    .signin-band { padding: 16px 20px; gap: 6px; }
    .signin-band h1 { display: none; }
    .signin-pillars { display: none; }
    .mfa-open { order: -1; font-size: 1rem; }
    .signin-side { padding: 32px 16px; }
    .modal { padding: 16px 12px; }
    .modal-card { --modal-px: 18px; --modal-py: 20px; --modal-radius: 12px; }
    .tab { padding: 0 10px; }
    .waste-box { align-items: flex-start; text-align: left; }
}

/* Touch screens and phones: every control is at least 44 px to tap (review
   item 41); icon buttons were 32, small buttons 30, chip and file-pill
   close buttons 28 and filter-chip close buttons 24. */
@media (max-width: 640px), (pointer: coarse) {
    .btn-primary, .btn-secondary, .btn-danger, .btn-sm, .tab, .code-tab, .nav-link, .menu-item, .form-input { min-height: 44px; }
    .btn-ghost, .prov-info { display: inline-flex; align-items: center; min-height: 44px; }
    .icon-btn { width: 44px; height: 44px; }
    .row-menu-btn, .table-stack td > .row-menu-btn { min-width: 44px; }
    .file-pill { height: auto; min-height: 44px; }
    .file-pill button, .mcp-chip-remove { width: 44px; height: 44px; }
    .filter-chip button, .toast-btn { min-width: 44px; min-height: 44px; }
    .sort-btn { min-height: 44px; }
}

/* Phones (and 300-400% zoom): tables turn into stacked rows, one label and
   value per line, instead of scrolling sideways. */
@media (max-width: 640px) {
    .page-title { flex-basis: 100%; }
    .page-actions > * { flex: 1 1 auto; }
    .spend-breakdowns { grid-template-columns: minmax(0, 1fr); }
    .card-head > .btn-secondary, .card-head > .btn-primary { flex: 0 0 auto; }
    .composer-select { flex: 1 1 100%; max-width: none; }
    .composer-foot .btn-primary { flex: 1 1 100%; }

    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack td { display: block; width: 100%; }
    .table-stack tr { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding: 10px 0; }
    .table-stack tbody tr:last-child { border-bottom: 1px solid var(--rule); }
    .card > .table-wrap:last-child .table-stack tbody tr:last-child { border-bottom: 0; }
    .data-table.table-stack td,
    .data-table.table-stack td:first-child,
    .data-table.table-stack td:last-child {
        border: 0;
        padding: 5px var(--pad);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        text-align: right;
    }
    .table-stack td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font: .75rem var(--font-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
    }
    .table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { content: none; }
    .data-table.table-stack tr td.primary-cell { order: -1; display: block; text-align: left; font-size: .9375rem; padding-bottom: 8px; }
    .data-table.table-stack tr td.actions-col { width: 100%; justify-content: flex-start; padding-top: 10px; }
    .data-table.table-stack tr.mcp-test-row td { display: block; width: 100%; text-align: left; }
    .data-table.table-stack tr td:empty { display: none; }
    /* The desktop "last row gets a bottom rule" applies per cell; stacked,
       that drew a line under every field of the last row. */
    .data-table.table-stack tbody tr:last-child td { border-bottom: 0; }
    /* Long monospace values (an MCP server's command line) read better on
       their own line, left-aligned, than squeezed right of their label. */
    .data-table.table-stack tr td:has(.provider-cmd) { display: block; text-align: left; }
    .data-table.table-stack tr td:has(.provider-cmd)::before { display: block; margin-bottom: 4px; }
    .table-stack td > * { min-width: 0; }
    .table-stack .priority-input { flex: 0 0 64px; }
    .table-stack .preference-input { flex: 0 0 150px; }
    .table-stack td.prio-col { align-items: center; }
    .data-table.table-stack td.empty-cell { display: block; text-align: left; }
    .data-table.table-stack tbody tr:hover td { background: transparent; }
}

/* Reduced motion and forced colours, for the whole console (Phase 2, I8).
   Under forced colours backgrounds vanish, so the current page keeps an
   outline, and a field in error keeps its marker. */
@media (prefers-reduced-motion: reduce) {
    /* Animations have their own rules: the spinner slows, skeletons hold still. */
    *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
    .rail--fresh .rail-mark { animation: none; }
    .spinner { animation-duration: 2.4s; }
    .skeleton-bar { animation: none; }
    .modal:not([hidden]), .modal:not([hidden]) .modal-card { animation: none; }
}
@media (forced-colors: active) {
    .nav-link.active, .menu-item.active { outline: 2px solid CanvasText; outline-offset: -2px; }
    .form-input[aria-invalid="true"] { border: 2px solid Mark; }
    .error-summary { border: 2px solid CanvasText; }
    .toast { border: 1px solid CanvasText; }
    .tooltip { border: 1px solid CanvasText; }
    .rail-mark, .outcome-mark { forced-color-adjust: none; }
    .outcome { border: 1px solid CanvasText; }
    .tab[aria-selected="true"] { text-decoration: underline; text-underline-offset: 6px; }
    .logs-detail.is-open { border-left: 1px solid CanvasText; }
    .attention-mark { forced-color-adjust: none; background: Mark; }
    .tile:has(input:checked) { border: 2px solid Highlight; }
    .wizard-step-btn[aria-current="step"] { border-top-color: Highlight; }
    [data-prov], [data-prov-sample] { text-decoration-color: CanvasText; }
    .segmented input:checked + span { outline: 2px solid CanvasText; }
    .menu-sep { background: CanvasText; }
    .switch-track { border: 1px solid CanvasText; }
    .switch[aria-checked="true"] .switch-thumb { background: Highlight; }
    .org-control-row.staged { outline: 1px dashed CanvasText; }
}

/* Tooltip and provenance marks (console Phase 2, G4). A number's underline
   says where it comes from: dotted estimated, solid measured, dashed
   simulated; the legend's samples use the same marks. */
[data-prov], [data-prov-sample] { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
[data-prov] { cursor: help; }
[data-prov="estimated"], [data-prov-sample="estimated"] { text-decoration-style: var(--prov-estimated-line); text-decoration-color: var(--prov-estimated); }
[data-prov="measured"], [data-prov-sample="measured"] { text-decoration-style: var(--prov-measured-line); text-decoration-color: var(--prov-measured); }
[data-prov="simulated"], [data-prov-sample="simulated"] { text-decoration-style: var(--prov-simulated-line); text-decoration-color: var(--prov-simulated); }
.prov-legend { margin: 0; }
.prov-info { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .75rem; line-height: 1.6; cursor: help; }
.prov-info:hover { color: var(--text); }
.prov-info svg { width: 13px; height: 13px; flex: none; }
.prov-info [data-prov-sample] { text-decoration-thickness: 1.5px; }
.tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2500;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
    font-size: .8125rem;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.tooltip.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.model-table .cell-ok, .model-table .cell-warn, .model-table .cell-fail { white-space: nowrap; }

/* The Checkpoint rail, outcome marks and the routing receipt (console
   Phase 2, D1 C5). Each state has a shape as well as a colour: passed a
   filled dot, a cache hit a ringed evergreen dot, skipped a dashed ring,
   failed over a triangle, refused a square, not recorded a dotted ring. */
.rail { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.rail::before { content: ""; position: absolute; left: 5%; right: 5%; top: 9px; height: 2px; background: var(--rule); }
.rail-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-label { font-size: .6875rem; line-height: 1.2; color: var(--muted); text-align: center; }
/* On a phone ten labels collide: only the checkpoint that decided the request keeps
   its label; the list under the rail still names all ten. */
@media (max-width: 560px) { .rail-node:not([data-state="hit"]):not([data-state="deny"]):not([data-state="over"]) .rail-label { visibility: hidden; } }
.rail-mark { width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: var(--text); }
.rail-mark, .outcome-mark { flex: none; }
[data-state="hit"] > .rail-mark, .rail-mark[data-state="hit"] { background: var(--ever-mark); box-shadow: 0 0 0 4px var(--ever-ring); }
[data-state="skip"] > .rail-mark, .rail-mark[data-state="skip"] { background: var(--surface); border: 1.5px dashed var(--skip); }
[data-state="unknown"] > .rail-mark, .rail-mark[data-state="unknown"] { background: var(--surface); border: 2px dotted var(--skip); }
[data-state="over"] > .rail-mark, .rail-mark[data-state="over"] { border-radius: 0; background: var(--warn); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
[data-state="deny"] > .rail-mark, .rail-mark[data-state="deny"] { border-radius: 3px; background: var(--deny); }
.rail--mini { display: inline-flex; gap: 3px; align-items: center; }
.rail--mini::before { content: none; }
.rail--mini .rail-mark { width: 7px; height: 7px; }
.rail--mini .rail-mark[data-state="hit"] { width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--ever-ring); }
.rail--mini .rail-mark[data-state="skip"], .rail--mini .rail-mark[data-state="unknown"] { border-width: 1px; }
.rail--mini .rail-mark[data-state="over"], .rail--mini .rail-mark[data-state="deny"] { width: 9px; height: 9px; }
/* A new answer's marks fill left to right once (40 ms apart); never loops. */
@keyframes rail-in { from { opacity: 0; transform: scale(.4); } }
.rail--fresh .rail-mark { animation: rail-in var(--dur-2) var(--ease) both; }
.rail--fresh .rail-node:nth-child(2) .rail-mark { animation-delay: 40ms; }
.rail--fresh .rail-node:nth-child(3) .rail-mark { animation-delay: 80ms; }
.rail--fresh .rail-node:nth-child(4) .rail-mark { animation-delay: 120ms; }
.rail--fresh .rail-node:nth-child(5) .rail-mark { animation-delay: 160ms; }
.rail--fresh .rail-node:nth-child(6) .rail-mark { animation-delay: 200ms; }
.rail--fresh .rail-node:nth-child(7) .rail-mark { animation-delay: 240ms; }
.rail--fresh .rail-node:nth-child(8) .rail-mark { animation-delay: 280ms; }
.rail--fresh .rail-node:nth-child(9) .rail-mark { animation-delay: 320ms; }
.rail--fresh .rail-node:nth-child(10) .rail-mark { animation-delay: 360ms; }
.rail-details { margin-top: 12px; font-size: .8125rem; }
.rail-details summary { cursor: pointer; color: var(--muted); }
.rail-list { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 2px; }
.outcome { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px 0 7px; border-radius: 999px; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.outcome-mark { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: currentColor; }
.outcome[data-outcome="served"] { background: var(--pass-bg); color: var(--pass); }
.outcome[data-outcome="cache"] { background: var(--ever-soft); color: var(--ever-text); }
.outcome[data-outcome="cache"] .outcome-mark { background: none; border: 3px solid currentColor; }
.outcome[data-outcome="failover"] { background: var(--warn-bg); color: var(--warn); }
.outcome[data-outcome="failover"] .outcome-mark { border-radius: 0; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.outcome[data-outcome="refused"] { background: var(--deny-bg); color: var(--deny); }
.outcome[data-outcome="refused"] .outcome-mark { border-radius: 2px; }
.outcome-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.livestream-item .outcome-cell { margin-top: 6px; }
.receipt { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: var(--surface); }
.receipt-title { margin: 0 0 14px; font-size: .8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.receipt-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .875rem; }
.receipt-block { margin-top: 14px; }
.receipt-block h4 { margin: 0 0 6px; font-size: .8125rem; font-weight: 600; }
.receipt-tried { margin: 12px 0 0; font-size: .875rem; }
.receipt .prov-legend { margin-top: 12px; }