/*
 * SnapHop Job Robot management plane.
 *
 * Canonical source: the SnapHop Design System, as recorded in DESIGN.md. This file is the
 * production stylesheet and is hand authored: this repository serves plain CSS rather than a
 * generated bundle, so there is no build step between what is reviewed and what is served.
 *
 * Three layers, and no component rule below may reference the first one.
 *   1. RAMP    the absolute palette. --ink-1000 is the near-black in every theme.
 *   2. ROLES   what a colour is for. A theme redeclares this layer and nothing else.
 *   3. THEMES  :root (light) - [data-theme="dark"] - [data-theme="auto"] - forced colours.
 * A raw ramp reference inside a component rule is a colour that cannot be themed.
 */

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

:root {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    /* Layer 1 - ramp */
    --blue-100: #e2eaf6; --blue-400: #5f88c4; --blue-500: #2959aa; --blue-600: #204a90; --blue-700: #0f4b6e;
    --ink-1000: #1a1b26; --ink-750: #363c4d; --ink-700: #414868; --ink-650: #4a5272; --ink-600: #565a6e; --ink-500: #5f6275; --ink-450: #8a8d9e; --ink-400: #979db8;
    --line-strong: #c1c2c7; --line-600: #c7c9d3; --line-450: #d2d4dd; --line-400: #d6d8df; --line-250: #e0e2e8; --line-150: #e4e5eb; --line-100: #e6e7ed; --line-75: #eaebf0;
    --white: #fff; --grey-50: #f7f8fb; --grey-100: #f2f3f7; --grey-150: #eceef3; --grey-200: #e1e2e8; --grey-300: #d6d8df;
    --green-100: #e0ead2; --green-700: #385f0d;
    --amber-100: #f4e7cd; --amber-700: #8f5e15;
    --red-100: #f0dada; --red-200: #e3c9c9; --red-600: #942f2f;

    /* Layer 2 - roles (light) */
    --text-strong: var(--ink-1000); --text-body: var(--ink-750); --text-secondary: var(--ink-650); --text-detail: var(--ink-600);
    --text-muted: var(--ink-500); --text-faint: var(--ink-450); --text-separator: var(--line-600);
    --text-link: var(--blue-500); --text-link-hover: var(--blue-700); --text-on-accent: var(--white); --text-on-inverse: var(--white); --text-on-active: var(--blue-500);
    --surface-page: var(--grey-300); --surface-app: var(--line-100); --surface-card: var(--white); --surface-rail: var(--grey-100); --surface-subtle: var(--grey-50);
    --surface-hover: var(--grey-200); --surface-active: var(--blue-100); --surface-inverse: var(--ink-1000);
    --surface-control: var(--white); --surface-control-disabled: var(--grey-150); --surface-track: var(--grey-200);
    --border-card: var(--line-150); --border-frame: var(--line-400); --border-row: var(--line-75); --border-control: var(--line-250);
    --border-control-strong: var(--line-strong); --border-dashed: var(--line-450); --border-emphasis: var(--ink-1000); --border-danger: var(--red-200);
    --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-quiet: var(--blue-100); --accent-rule: var(--blue-400);
    --focus-ring: var(--blue-400); --focus-halo: var(--blue-100);
    --status-ok-bg: var(--green-100); --status-ok-fg: var(--green-700);
    --status-warn-bg: var(--amber-100); --status-warn-fg: var(--amber-700);
    --status-danger-bg: var(--red-100); --status-danger-fg: var(--red-600);
    --status-neutral-bg: var(--line-75); --status-neutral-fg: var(--ink-650);
    --chart-1: var(--ink-1000); --chart-2: var(--ink-600); --chart-3: var(--ink-400); --chart-4: var(--line-strong); --chart-track: var(--grey-200);
    --shadow-frame: 0 1px 3px rgba(18,18,26,.06), 0 12px 32px -18px rgba(18,18,26,.18);
    --shadow-popover: 0 2px 6px rgba(18,18,26,.06), 0 14px 34px -16px rgba(18,18,26,.22);
    --shadow-modal: 0 8px 20px rgba(18,18,26,.10), 0 40px 80px -32px rgba(18,18,26,.32);
    --scrim: rgba(18,18,26,.34);

    --radius-chip: 3px; --radius-badge: 4px; --radius-control: 6px; --radius-input: 7px; --radius-card: 9px; --radius-frame: 12px;
    --duration-fast: 120ms; --ease-standard: cubic-bezier(.2,0,.2,1);
    --transition-control: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

/* Layer 3 - dark. Only the role layer is redeclared, and it is wrapped in @media screen so a dark
   surface still prints as ink on paper. */
@media screen {
    [data-theme="dark"] {
        --text-strong: #c0caf5; --text-body: #a9b1d6; --text-secondary: #9ba3c6; --text-detail: #8e97bd;
        --text-muted: #878fb8; --text-faint: #6a7398; --text-separator: #414868;
        --text-link: #7aa2f7; --text-link-hover: #9ab8ff; --text-on-accent: #16161e; --text-on-inverse: #16161e; --text-on-active: #c0caf5;
        --surface-page: #16161e; --surface-app: #1a1b26; --surface-card: #1f2335; --surface-rail: #16161e; --surface-subtle: #24283b;
        --surface-hover: #292e42; --surface-active: #283457; --surface-inverse: #c0caf5;
        --surface-control: #1f2335; --surface-control-disabled: #22263a; --surface-track: #292e42;
        --border-card: #2b3049; --border-frame: #292e42; --border-row: #232739; --border-control: #343a54;
        --border-control-strong: #414868; --border-dashed: #3b4261; --border-emphasis: #c0caf5; --border-danger: #5c3140;
        --accent: #7aa2f7; --accent-hover: #9ab8ff; --accent-quiet: #283457; --accent-rule: #3d59a1;
        --focus-ring: #7aa2f7; --focus-halo: rgba(122,162,247,.28);
        --status-ok-bg: #22301f; --status-ok-fg: #9ece6a;
        --status-warn-bg: #322a1c; --status-warn-fg: #e0af68;
        --status-danger-bg: #331f26; --status-danger-fg: #f7768e;
        --status-neutral-bg: #292e42; --status-neutral-fg: #a9b1d6;
        --chart-1: #c0caf5; --chart-2: #8e97bd; --chart-3: #565f89; --chart-4: #3b4261; --chart-track: #292e42;
        --shadow-frame: 0 1px 3px rgba(0,0,0,.40), 0 12px 32px -18px rgba(0,0,0,.70);
        --shadow-popover: 0 2px 6px rgba(0,0,0,.40), 0 14px 34px -16px rgba(0,0,0,.75);
        --shadow-modal: 0 8px 20px rgba(0,0,0,.45), 0 40px 80px -32px rgba(0,0,0,.80);
        --scrim: rgba(0,0,0,.58);
    }

    /* "dark" is absolute; "auto" defers to the operating system. */
    [data-theme="auto"] { color-scheme: light dark; }
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] {
            --text-strong: #c0caf5; --text-body: #a9b1d6; --text-secondary: #9ba3c6; --text-detail: #8e97bd;
            --text-muted: #878fb8; --text-faint: #6a7398; --text-separator: #414868;
            --text-link: #7aa2f7; --text-link-hover: #9ab8ff; --text-on-accent: #16161e; --text-on-inverse: #16161e; --text-on-active: #c0caf5;
            --surface-page: #16161e; --surface-app: #1a1b26; --surface-card: #1f2335; --surface-rail: #16161e; --surface-subtle: #24283b;
            --surface-hover: #292e42; --surface-active: #283457; --surface-inverse: #c0caf5;
            --surface-control: #1f2335; --surface-control-disabled: #22263a; --surface-track: #292e42;
            --border-card: #2b3049; --border-frame: #292e42; --border-row: #232739; --border-control: #343a54;
            --border-control-strong: #414868; --border-dashed: #3b4261; --border-emphasis: #c0caf5; --border-danger: #5c3140;
            --accent: #7aa2f7; --accent-hover: #9ab8ff; --accent-quiet: #283457; --accent-rule: #3d59a1;
            --focus-ring: #7aa2f7; --focus-halo: rgba(122,162,247,.28);
            --status-ok-bg: #22301f; --status-ok-fg: #9ece6a;
            --status-warn-bg: #322a1c; --status-warn-fg: #e0af68;
            --status-danger-bg: #331f26; --status-danger-fg: #f7768e;
            --status-neutral-bg: #292e42; --status-neutral-fg: #a9b1d6;
            --chart-1: #c0caf5; --chart-2: #8e97bd; --chart-3: #565f89; --chart-4: #3b4261; --chart-track: #292e42;
            --shadow-frame: 0 1px 3px rgba(0,0,0,.40), 0 12px 32px -18px rgba(0,0,0,.70);
            --shadow-popover: 0 2px 6px rgba(0,0,0,.40), 0 14px 34px -16px rgba(0,0,0,.75);
            --shadow-modal: 0 8px 20px rgba(0,0,0,.45), 0 40px 80px -32px rgba(0,0,0,.80);
            --scrim: rgba(0,0,0,.58);
        }
    }
}

/* Layer 3 - forced colours. Every border role keeps an edge, because the 2px emphasis border is
   how an irreversible action is marked and a border that vanishes deletes that signal. */
@media (forced-colors: active) {
    :root, [data-theme="dark"], [data-theme="auto"] {
        forced-color-adjust: none;
        --text-strong: CanvasText; --text-body: CanvasText; --text-secondary: CanvasText; --text-detail: CanvasText;
        --text-muted: CanvasText; --text-faint: GrayText; --text-separator: CanvasText;
        --text-link: LinkText; --text-link-hover: LinkText; --text-on-accent: HighlightText; --text-on-inverse: Canvas; --text-on-active: HighlightText;
        --surface-page: Canvas; --surface-app: Canvas; --surface-card: Canvas; --surface-rail: Canvas; --surface-subtle: Canvas;
        --surface-hover: Canvas; --surface-active: Highlight; --surface-inverse: CanvasText;
        --surface-control: Field; --surface-control-disabled: Canvas; --surface-track: Canvas;
        --border-card: CanvasText; --border-frame: CanvasText; --border-row: CanvasText; --border-control: CanvasText;
        --border-control-strong: CanvasText; --border-dashed: GrayText; --border-emphasis: CanvasText; --border-danger: CanvasText;
        --accent: Highlight; --accent-hover: Highlight; --accent-quiet: Canvas; --accent-rule: CanvasText;
        --focus-ring: Highlight; --focus-halo: transparent;
        --status-ok-bg: Canvas; --status-ok-fg: CanvasText;
        --status-warn-bg: Canvas; --status-warn-fg: CanvasText;
        --status-danger-bg: Canvas; --status-danger-fg: CanvasText;
        --status-neutral-bg: Canvas; --status-neutral-fg: CanvasText;
        --chart-1: CanvasText; --chart-2: CanvasText; --chart-3: CanvasText; --chart-4: CanvasText; --chart-track: Canvas;
        --shadow-frame: none; --shadow-popover: none; --shadow-modal: none; --scrim: Canvas;
    }
    /* A badge and a selected row lose their tint here, so give them the edge that was doing the
       work. */
    [data-status] { border: 1px solid CanvasText; }
}

/* Base. This file is served directly, so it carries its own reset. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-app); }
body { margin: 0; color: var(--text-body); background: var(--surface-app); font-family: var(--font-sans); font-size: 11.5px; font-weight: 450; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; }
img, svg { max-width: 100%; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
::selection { background: var(--surface-active); color: var(--text-strong); }
[hidden], .hidden { display: none !important; }
h1, h2, h3, p, dl, dd, ul, ol { margin-top: 0; }
ul, ol { padding-left: 0; }
h1 { margin-bottom: 5px; color: var(--text-strong); font-size: 19px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
h2 { margin-bottom: 4px; color: var(--text-strong); font-size: 16px; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; }
h3 { margin-bottom: 8px; color: var(--text-strong); font-size: 12.5px; font-weight: 650; }
code, .mono { font: 10.5px/1.5 var(--font-mono); letter-spacing: .03em; }

/* Brand. The wordmark is lowercase, one word, JetBrains Mono 700, never capitalised or split
   elsewhere. The product name stays a separate Inter string behind a hairline rule. */
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); }
.brand-lockup:hover { color: var(--text-strong); }
.brand-mark { width: 22px; height: 22px; display: none; place-items: center; flex: none; border-radius: 22%; background: var(--surface-inverse); color: var(--text-on-inverse); font: 700 18px/1 var(--font-mono); }
.wordmark { color: var(--text-strong); font: 700 15px/1 var(--font-mono); letter-spacing: 0; white-space: nowrap; }
.wordmark-accent { color: var(--text-link); }
.brand-divider { width: 1px; height: 13px; background: var(--border-frame); }
.product-name { color: var(--text-secondary); font-size: 12.5px; font-weight: 450; letter-spacing: -.01em; white-space: nowrap; }

.eyebrow { margin-bottom: 5px; color: var(--text-muted); font: 650 9.5px/1.2 var(--font-mono); letter-spacing: .12em; }
.supporting-copy, .page-head p { margin-bottom: 0; color: var(--text-secondary); font-size: 11.5px; font-weight: 450; }
.text-link { display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 600; }
.supporting-copy .text-link { display: inline; margin-top: 0; font-size: inherit; }

/* Controls. At most one primary button per surface; danger is a white control with a red
   hairline, never a red fill. A disabled control stays visible and says why nearby. */
.button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 5px 11px; background: var(--surface-card); color: var(--text-body); font-size: 11px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; cursor: pointer; transition: var(--transition-control); }
.button:not(:disabled):hover { border-color: var(--text-separator); background: var(--surface-subtle); }
.button:disabled { border-color: var(--border-dashed); border-style: dashed; background: var(--surface-control-disabled); color: var(--text-faint); cursor: not-allowed; }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.button-primary:not(:disabled):hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.button-danger { border-color: var(--border-danger); color: var(--status-danger-fg); }
.button-compact { min-height: 29px; padding: 5px 9px; font-size: 10.5px; font-weight: 650; letter-spacing: 0; }
.button-block { width: 100%; }
select.button-compact { height: 29px; border-radius: var(--radius-control); padding: 0 7px; font-size: 10.5px; font-weight: 600; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.button-row-spaced { margin-top: 12px; }

.field { display: grid; align-content: start; gap: 5px; color: var(--text-body); font-size: 11.5px; font-weight: 600; }
.field-help, .form-hint { color: var(--text-muted); font-size: 10.5px; font-weight: 400; }
.form-hint { margin: 0; }
input, select, textarea { min-width: 0; border: 1px solid var(--border-control); border-radius: var(--radius-input); padding: 8px 11px; background: var(--surface-control); color: var(--text-strong); letter-spacing: -.01em; }
input, select { height: 36px; }
select[multiple] { height: auto; }
input[type="file"] { height: auto; padding: 6px 11px; }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; margin: 0; padding: 0; border: 0; border-radius: 0; accent-color: var(--accent); }
input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
fieldset.field { min-width: 0; margin: 0; border: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: 5px; }
.checkbox-option { display: inline-flex; align-items: center; gap: 7px; margin-right: 14px; font-weight: 500; cursor: pointer; }
textarea { min-height: 150px; font: 11px/1.6 var(--font-mono); resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--border-control-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--focus-halo); }
input:disabled, select:disabled, textarea:disabled { border-style: dashed; border-color: var(--border-dashed); background: var(--surface-control-disabled); color: var(--text-faint); }
.form-stack { display: grid; gap: 14px; margin-top: 18px; }
.form-stack-compact { gap: 10px; margin-top: 12px; }
/* A submit sits at the start of its stack; only .button-block spans the form. */
.form-stack > .button:not(.button-block) { justify-self: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.card > .form-grid:first-child { margin-top: 0; }
.form-status { min-height: 18px; margin: 8px 0 0; color: var(--text-secondary); font-size: 11.5px; overflow-wrap: anywhere; }
.form-status-inset { padding: 0 14px 10px; }
.form-status-inset:empty { display: none; }
.inline-form { display: flex; align-items: end; gap: 8px; margin: 14px 0; }
.inline-form-lead { margin-top: 0; }
.inline-form > input, .inline-form > select, .inline-form > .field { flex: 1; }
.inline-form .button { flex: none; min-height: 36px; }

/* Public and account pages stand alone: semantic forms, no application chrome. */
.public-page, .auth-page { min-height: 100vh; background: var(--surface-app); }
.public-header { height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-card); padding: 0 max(24px, calc((100vw - 1120px) / 2)); background: var(--surface-card); }
.public-layout { width: min(100% - 48px, 760px); min-height: calc(100vh - 56px); display: grid; align-content: center; margin: 0 auto; padding: 54px 0; }
.auth-layout { width: min(100% - 32px, 420px); min-height: 100vh; display: grid; align-content: center; gap: 16px; margin: 0 auto; padding: 40px 0; }
.auth-card { border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 26px; background: var(--surface-card); }
.auth-card h1 { font-size: 26px; letter-spacing: -.03em; }
.signup-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: start; }
.signup-column { min-width: 0; }
.signup-column h1 { margin-bottom: 4px; line-height: 1.25; font-weight: 650; }
/* The rule between the two columns is the only separation; it becomes a top border once they
   stack. */
.account-help { min-width: 0; border-inline-start: 1px solid var(--border-card); padding-inline-start: 32px; }
.auth-card .help-title { margin-bottom: 2px; font-size: 12.5px; line-height: inherit; letter-spacing: 0; font-weight: 650; }

/* An emphasis callout uses a 2px ink border rather than a coloured fill. */
.callout { margin: 14px 0 0; border: 2px solid var(--border-emphasis); border-radius: var(--radius-input); padding: 10px 12px; background: var(--surface-card); color: var(--text-body); }
.callout-danger { border-color: var(--border-emphasis); background: var(--status-danger-bg); color: var(--status-danger-fg); }
.callout-success { border-color: var(--border-emphasis); background: var(--status-ok-bg); color: var(--status-ok-fg); }
.callout:empty { display: none; }

/* Application shell: a 236px text-only rail, a 46px top bar, and a 16px 18px canvas inside a
   1440px frame. The frame is the only elevated container. */
.app-page { min-height: 100vh; padding: 18px; background: var(--surface-page); }
.app-frame { position: relative; width: min(100%, 1440px); min-height: calc(100vh - 36px); display: grid; grid-template-columns: 236px 1fr; margin: 0 auto; overflow: hidden; border: 1px solid var(--border-frame); border-radius: var(--radius-frame); background: var(--surface-app); box-shadow: var(--shadow-frame); }
.app-rail { min-height: 100%; display: flex; flex-direction: column; border-right: 1px solid var(--border-card); padding: 15px 12px 12px; background: var(--surface-rail); }
.rail-wordmark { padding: 0 8px 13px; }
.rail-workspaces { display: grid; gap: 8px; }
.workspace { min-width: 0; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border-card); border-radius: var(--radius-input); padding: 9px; background: var(--surface-card); }
.workspace-mark { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: var(--radius-control); background: var(--surface-inverse); color: var(--text-on-inverse); font-weight: 700; }
.workspace span:last-child { min-width: 0; display: grid; }
.workspace small { color: var(--text-muted); font: 600 8px var(--font-mono); letter-spacing: .08em; }
.workspace strong { overflow: hidden; color: var(--text-strong); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.workspace .workspace-notice { overflow: visible; font-weight: 500; line-height: 1.4; text-overflow: clip; white-space: normal; }
.workspace-switcher { height: auto; max-width: 100%; border: 0; border-radius: var(--radius-control); padding: 0 2px 0 0; background: transparent; color: var(--text-strong); font-size: 11.5px; font-weight: 650; cursor: pointer; }
.workspace-switcher:hover { border: 0; color: var(--text-link); }
.workspace-switcher:focus { border: 0; outline: 3px solid var(--focus-halo); }
.rail-nav { display: grid; gap: 3px; margin: 16px 0 0; padding: 0; list-style: none; }
.rail-nav a { display: block; border-radius: var(--radius-control); padding: 8px 10px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.rail-nav a:hover { background: var(--surface-hover); color: var(--text-strong); }
.rail-nav a[aria-current="page"] { background: var(--surface-active); color: var(--text-on-active); }
.rail-section { margin: 14px 0 5px; padding: 0 10px; color: var(--text-muted); font: 650 9.5px var(--font-mono); letter-spacing: .12em; }
.rail-footer { margin-top: auto; border-top: 1px solid var(--border-card); padding-top: 12px; }
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; overflow: hidden; border: 1px solid var(--border-control); border-radius: var(--radius-control); background: var(--surface-card); }
.theme-switch button { min-height: 29px; border: 0; padding: 5px 4px; background: var(--surface-card); color: var(--text-secondary); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: var(--transition-control); }
.theme-switch button + button { border-inline-start: 1px solid var(--border-control); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-active); color: var(--text-on-active); }

.app-main { min-width: 0; }
.topbar { height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-card); padding: 0 18px; background: var(--surface-card); }
.topbar p { margin: 0; font-size: 10.5px; }
.topbar span { color: var(--text-muted); }
.topbar b { padding: 0 7px; color: var(--text-separator); font-weight: 450; }
.topbar strong { color: var(--text-body); }
.topbar-actions { min-width: 0; display: flex; align-items: center; flex: 0 1 auto; gap: 8px; }
.canvas { padding: 16px 18px; }
.canvas-status { margin: 0 0 14px; }
.page-head { margin-bottom: 14px; }
.page-head h1 { margin-bottom: 3px; }

.badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--border-control); border-radius: var(--radius-badge); padding: 3px 6px; color: var(--text-secondary); font: 650 9.5px var(--font-mono); letter-spacing: .04em; }
.chip { display: inline-block; border-radius: var(--radius-chip); padding: 2px 5px; background: var(--surface-subtle); color: var(--text-secondary); font: 500 10.5px var(--font-mono); letter-spacing: .03em; }

/* A status is never carried by colour alone: every dot and badge has its state written beside
   it. */
.status-dot { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--border-control-strong); }
.status-dot-ok { background: var(--status-ok-fg); }
.status-dot-warn { background: var(--status-warn-fg); }
.status-dot-danger { background: var(--status-danger-fg); }
.state-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; border-radius: var(--radius-badge); padding: 3px 7px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font: 650 9.5px var(--font-mono); letter-spacing: .04em; }
.state-badge .status-dot { flex: none; margin-right: 0; background: currentColor; }
.state-badge-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.state-badge-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.state-badge-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }

/* Cards are flat: white, a 1px border, no shadow. A footnote is a full-sentence constraint strip
   at the bottom. */
.card { min-width: 0; overflow: hidden; border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 13px 14px; background: var(--surface-card); }
.card-wide { grid-column: 1 / -1; }
.card-head, .section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.card-section { margin-top: 14px; border-top: 1px solid var(--border-card); padding-top: 12px; }
.card-footnote { margin: 13px -14px -13px; border-top: 1px solid var(--border-card); padding: 9px 14px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 10.5px; }
.route-card { max-width: 1040px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
/* Cards in a row share a height, so a footnote stays at the bottom of its card whatever the
   neighbour holds. */
.dashboard-grid > .card { display: flex; flex-direction: column; }
.dashboard-grid > .card > :has(+ .card-footnote) { flex: 1 0 auto; }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.metric-value { margin: 0; color: var(--text-strong); font-size: 26px; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.metric-note { margin: 4px 0 0; color: var(--text-secondary); font-size: 10.5px; }

/* Dense rows put a strong primary line over smaller muted metadata. Identity is the flexible
   column; operational columns keep deliberate widths. */
.data-list { margin: 8px 0 0; padding: 0; list-style: none; }
.data-list > * + * { border-top: 1px solid var(--border-row); }
snaphop-list-item { display: block; padding: 11px 0; }
.scroll-list { max-height: 300px; overflow-y: auto; }
.definition-list { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 7px 12px; margin: 0; }
.definition-list dt { color: var(--text-muted); font: 650 9.5px var(--font-mono); letter-spacing: .08em; align-self: center; }
.definition-list dd { margin: 0; color: var(--text-body); overflow-wrap: anywhere; }
.definition-list dd.mono { color: var(--text-secondary); }
.definition-list + .supporting-copy { margin-top: 9px; }

/* The job and delivery grids are the genuinely tabular surfaces: fixed operational columns
   inside a horizontally scrollable card. */
.table-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface-card); }
.table-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 13px 14px; }
.table-head > div + div { display: flex; flex: none; align-items: end; gap: 8px; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--border-card); }
.grid-table { min-width: 840px; }
.grid-row { display: grid; align-items: center; gap: 10px; padding: 11px 14px; }
.grid-row + .grid-row { border-top: 1px solid var(--border-row); }
.grid-header-row { border-bottom: 1px solid var(--border-card); padding: 7px 14px; background: var(--surface-subtle); color: var(--text-secondary); font: 650 9.5px var(--font-mono); letter-spacing: .08em; }
.job-row { grid-template-columns: minmax(200px,1fr) 110px 96px minmax(0,170px) 132px 150px; }
.release-row { grid-template-columns: minmax(180px,1fr) 96px 150px minmax(0,160px) 110px; }
.feed-run-row { grid-template-columns: minmax(150px,1fr) 120px minmax(0,200px) 150px 140px; }
.application-row { grid-template-columns: minmax(200px,1fr) minmax(120px,160px) 110px 150px 190px; }
.form-row { grid-template-columns: minmax(150px,1fr) 70px 110px minmax(0,180px) 180px; }
.row-primary { margin: 0; overflow: hidden; color: var(--text-strong); font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.row-secondary { margin: 2px 0 0; color: var(--text-muted); font: 10.5px/1.4 var(--font-mono); letter-spacing: .03em; }
.row-machine { color: var(--text-secondary); font: 10.5px/1.4 var(--font-mono); letter-spacing: .03em; overflow-wrap: anywhere; }
.row-time { color: var(--text-muted); font: 10.5px/1.4 var(--font-mono); letter-spacing: .03em; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.table-note { margin: 0; border-top: 1px solid var(--border-card); padding: 9px 14px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 10.5px; }

/* Pagination lives in the data surface's grey footer strip. */
.pagination { display: grid; grid-template-columns: minmax(92px, auto) 1fr minmax(92px, auto); align-items: center; gap: 10px; border-top: 1px solid var(--border-card); padding: 9px 14px; background: var(--surface-subtle); }
.card > .pagination { margin: 13px -14px -13px; }
.pagination p { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font: 500 10.5px var(--font-mono); text-align: center; }
.page-numbers { display: flex; align-items: center; justify-content: center; gap: 3px; }
.page-numbers > span { min-width: 24px; color: var(--text-muted); text-align: center; }
.page-number { width: 28px; height: 28px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); font: 600 10.5px var(--font-mono); cursor: pointer; }
.page-number:hover { border-color: var(--border-control); background: var(--surface-card); color: var(--text-strong); }
.page-number[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }

/* An empty state says whether nothing exists or the filter found nothing, in words. */
.empty-state { margin: 10px 0 0; color: var(--text-secondary); font-size: 11.5px; }

.split-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 12px; align-items: start; }
.split-side { display: grid; gap: 12px; min-width: 0; }
.health-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.health-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.health-list .health-detail { grid-column: 1 / -1; color: var(--text-muted); font-size: 10.5px; }
.health-list li > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--text-body); }
.health-list .status-dot { flex: none; margin-right: 0; }
.health-value { color: var(--text-secondary); font: 10.5px var(--font-mono); letter-spacing: .03em; }

/* Dialogs state what will happen before offering the action. */
.dialog-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.dialog-scrim { position: absolute; inset: 0; background: var(--scrim); }
.dialog { position: relative; width: min(100%, 520px); max-height: calc(100vh - 80px); overflow-y: auto; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-modal); }
.dialog-body { padding: 16px 18px; }
.dialog-body h2 { margin-bottom: 8px; }
.dialog-body > p:not(.eyebrow) { margin-bottom: 9px; color: var(--text-body); font-size: 11.5px; text-wrap: pretty; }
.review-list { max-height: 280px; overflow-y: auto; margin: 0 0 9px; padding: 0; list-style: none; border: 1px solid var(--border-card); border-radius: var(--radius-input); }
.review-list:empty { display: none; }
.review-list li { display: grid; gap: 2px; min-width: 0; border-bottom: 1px solid var(--border-row); padding: 8px 11px; }
.review-list li:last-child { border-bottom: 0; }
.review-list .row-primary { white-space: normal; }
.review-paging { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 9px; }
.dialog-actions { display: flex; justify-content: end; gap: 8px; border-top: 1px solid var(--border-card); padding: 11px 18px; background: var(--surface-subtle); }

/* A toast title is a past-tense confirmation and stands until it is dismissed. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-route-view] h1[tabindex="-1"]:focus { outline: none; }
.toast { position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 70; width: min(100% - 36px, 360px); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 11px 13px; background: var(--surface-card); box-shadow: var(--shadow-popover); }
.toast p:first-child { margin: 0; color: var(--text-strong); font-size: 11.5px; font-weight: 650; }
.toast p + p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10.5px; }
.toast .button { margin-top: 9px; }

.preview-frame { width: 100%; height: 520px; margin-top: 12px; border: 1px solid var(--border-card); border-radius: var(--radius-input); background: var(--surface-card); }

@media (max-width: 1180px) { .split-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 880px) { .metric-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) {
    .signup-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
    .account-help { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--border-card); padding-top: 14px; }
}
@media (max-width: 900px) {
    .app-page { padding: 0; }
    /* The frame hides its overflow, so a column wider than the viewport is cut off rather than
       scrolled. A bare 1fr column grows to its widest child's content -- the rail's one-row
       navigation -- so the column is held to the viewport and the navigation scrolls inside it. */
    .app-frame { grid-template-columns: minmax(0, 1fr); min-height: 100vh; border: 0; border-radius: 0; }
    .app-rail { min-width: 0; min-height: auto; border-right: 0; border-bottom: 1px solid var(--border-card); }
    .app-main { min-width: 0; }
    .rail-wordmark, .rail-section { display: none; }
    /* The workspace and site blocks stay: the site selection decides which routes exist at all,
       so hiding it would leave a narrow viewport unable to reach most of the product. */
    .rail-workspaces { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .workspace-mark { display: none; }
    .rail-footer { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
    .rail-footer form { flex: none; }
    .theme-switch { margin-bottom: 0; }
    .rail-nav { grid-auto-flow: column; grid-auto-columns: max-content; margin: 0; overflow-x: auto; }
    .topbar p { display: none; }
    .dashboard-grid, .form-grid { grid-template-columns: 1fr; }
    .card-wide { grid-column: auto; }
}
@media (max-width: 560px) {
    .public-header { padding: 0 16px; }
    .public-layout { width: min(100% - 32px, 760px); padding: 36px 0; }
    .auth-card { padding: 20px; }
    .canvas { padding: 14px 10px; }
    .inline-form { align-items: stretch; flex-direction: column; }
    .button-row { display: grid; }
    .form-stack > .button:not(.button-block) { justify-self: stretch; }
    .definition-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .definition-list dd { margin-bottom: 7px; }
}
@media (max-width: 360px) {
    .public-header .brand-mark { display: grid; }
    .public-header .wordmark, .public-header .brand-divider, .public-header .product-name { display: none; }
}

/* Form editor (ADR 0018) */
.editor-start { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-bottom: 12px; }
.editor-start .field { min-width: 220px; }
.tab-bar { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--border-card); }
.tab { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 10px; background: none; color: var(--text-muted); font: 650 11px var(--font-body); cursor: pointer; }
.tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text-strong); }
.tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; }
.editor-wide { grid-column: 1 / -1; }
.editor-fields-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; }
.editor-fields-head h3 { margin: 0; font-size: 12px; }
.editor-fields { display: grid; gap: 8px; margin-top: 6px; }
.editor-field { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border-card); border-radius: var(--radius-control); padding: 10px; }
.editor-field-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.editor-field-actions .field-help { margin-right: auto; }
.editor-field .checkbox-field { display: flex; align-items: center; gap: 6px; align-self: end; min-height: 36px; }
.editor-field .checkbox-field input { width: auto; height: auto; }
.editor-fields:empty::after { content: "No fields yet. Add one, or start from a template."; color: var(--text-muted); font-size: 10.5px; }
.health-list .gate-next { margin-left: 6px; }
.health-list a { color: inherit; }