/* Deployer — Astrium "Zion" theme, translated for a working tool. See DESIGN.md. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #f8f9fc;
  --bg-2: #f0f2f7;
  --surface: #ffffff;
  --out-bg: #f3f5f9;
  --line: #dde3ec;
  --line-strong: #c6d0dd;
  --ink: #1a2332;
  --text: #4a5568;
  --muted: #5f6e84;
  --tag: #5b6a82;
  --slate: #8a9bb5;
  --slate-2: #6e7f99;

  --ok: #13773a;   --ok-bg: #e7f4ec;
  --bad: #b42318;  --bad-bg: #fcebea;
  --warn: #8f5500; --warn-bg: #fbf1dc;
  --busy: #3f6aa6; --busy-bg: #e3eaf5;

  --primary-bg: #1a2332;
  --primary-fg: #ffffff;
  --shadow: 0 6px 18px rgba(26, 35, 50, 0.14);
  --bar-bg: rgba(248, 249, 252, 0.84);

  --font-display: "Orbitron", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bar-h: 3.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* Dark grounds: the brand gives two (#0f1219 page, #161b26 panels); the tool needs three levels (page, rail, raised
   surface for the selected row, commands and panels), so the rail (--bg-2) sits between them at #131823 and the
   selection reads as raised. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1219; --bg-2: #131823; --surface: #161b26; --out-bg: #0b0e14;
    --line: #252d3b; --line-strong: #34405a;
    --ink: #e8ecf2; --text: #b0b8c8; --muted: #8e99ac; --tag: #93a0b6; --slate: #8a9bb5; --slate-2: #7b8faa;
    --ok: #5ccf8f; --ok-bg: #12291d; --bad: #f08a80; --bad-bg: #331b1a; --warn: #e6b65c; --warn-bg: #2f2512; --busy: #93b4e6; --busy-bg: #172338;
    --primary-bg: #e8ecf2; --primary-fg: #0f1219; --shadow: 0 6px 18px rgba(0, 0, 0, 0.4); --bar-bg: rgba(15, 18, 25, 0.84);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1219; --bg-2: #131823; --surface: #161b26; --out-bg: #0b0e14;
  --line: #252d3b; --line-strong: #34405a;
  --ink: #e8ecf2; --text: #b0b8c8; --muted: #8e99ac; --tag: #93a0b6; --slate: #8a9bb5; --slate-2: #7b8faa;
  --ok: #5ccf8f; --ok-bg: #12291d; --bad: #f08a80; --bad-bg: #331b1a; --warn: #e6b65c; --warn-bg: #2f2512; --busy: #93b4e6; --busy-bg: #172338;
  --primary-bg: #e8ecf2; --primary-fg: #0f1219; --shadow: 0 6px 18px rgba(0, 0, 0, 0.4); --bar-bg: rgba(15, 18, 25, 0.84);
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body { margin: 0; font: 400 15px/1.5 var(--font-ui); color: var(--text); background: var(--bg); font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--slate); }
a:hover { text-decoration-color: currentColor; }
code { font-family: var(--font-mono); font-size: 0.86em; font-variant-ligatures: none; color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }
::selection { background: color-mix(in srgb, var(--slate) 35%, transparent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 50; padding: 0.5rem 0.9rem; background: var(--primary-bg); color: var(--primary-fg); border-radius: 4px; }
.skip:focus { top: 0.5rem; }
.icon { flex: none; vertical-align: -0.2em; }

.tone-ok { color: var(--ok); }
.tone-bad { color: var(--bad); }
.tone-warn { color: var(--warn); }
.tone-busy { color: var(--busy); }
.tone-quiet { color: var(--muted); }

/* Display type: the wordmark, page titles, the verdict. Nothing else. */
.title { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: 0.04em; color: var(--ink); }

/* Section tags, as on astrium.co.za: // LABEL */
.tag { display: flex; align-items: center; gap: 0.5rem; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tag); }
.tag::before { content: "//"; color: var(--slate); letter-spacing: 0; }
.tag__count { font-size: 0.66rem; letter-spacing: 0.05em; padding: 0.15rem 0.4rem; border-radius: 3px; background: color-mix(in srgb, var(--slate) 16%, transparent); color: var(--tag); }

/* ── App bar ────────────────────────────────────────────────────────────── */
.app-bar { position: sticky; top: 0; z-index: 20; background: var(--bar-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.app-bar__inner { display: flex; align-items: center; gap: 2rem; min-height: var(--bar-h); padding: 0 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; }
.brand .mark { width: 24px; height: 24px; }
.brand__word { font: 700 0.92rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.brand__product { font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding-left: 0.65rem; margin-left: 0.15rem; border-left: 1px solid var(--line-strong); }
.app-nav { display: flex; align-items: stretch; align-self: stretch; gap: 0.25rem; flex: 1; }
.app-nav a { display: inline-flex; align-items: center; padding: 0 0.75rem; font: 500 0.7rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color 0.15s, box-shadow 0.15s; }
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.app-nav--phone { display: none; }
.app-bar__end { display: flex; align-items: center; gap: 0.9rem; }
.app-user { font-size: 0.82rem; color: var(--muted); }
.icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn .when-dark { display: none; }
:root[data-theme="dark"] .icon-btn .when-dark { display: block; }
:root[data-theme="dark"] .icon-btn .when-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .when-dark { display: block; }
  :root:not([data-theme="light"]) .icon-btn .when-light { display: none; }
}

.app-main { min-height: calc(100vh - var(--bar-h)); }
.page-pad { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 6rem; display: grid; gap: 1.25rem; align-content: start; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.4rem; padding: 0 1rem;
  font: 600 0.72rem/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  color: var(--ink); background: transparent; border: 1px solid color-mix(in srgb, var(--slate) 55%, transparent); border-radius: 4px; cursor: pointer;
  transition: box-shadow 0.2s var(--ease-out), border-color 0.15s, background-color 0.15s; }
.btn:hover { border-color: var(--ink); }
.btn--primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
.btn--primary:hover { box-shadow: var(--shadow); border-color: var(--primary-bg); }
.btn--danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn--danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn--small { min-height: 2rem; padding: 0 0.7rem; font-size: 0.66rem; }

/* ── Notices, badges, flags ─────────────────────────────────────────────── */
.notice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 6px; border: 1px solid transparent; }
.notice > .icon { margin-top: 0.2rem; }
.notice > div { display: grid; gap: 0.2rem; flex: 1; }
.notice > p { flex: 1; }
.notice--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--text); }
.notice--warn > .icon { color: var(--warn); }
.notice--bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 25%, transparent); align-items: center; }
.notice--bad > .icon { color: var(--bad); margin: 0; }
.notice--bad:has(> div) { align-items: flex-start; }
.notice--bad:has(> div) > .icon { margin-top: 0.2rem; }

.badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.55rem; border-radius: 4px; font: 600 0.7rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
.badge.tone-ok { background: var(--ok-bg); }
.badge.tone-bad { background: var(--bad-bg); }
.badge.tone-warn { background: var(--warn-bg); }
.badge.tone-busy { background: var(--busy-bg); }
.badge.tone-quiet { background: color-mix(in srgb, var(--slate) 16%, transparent); }

.flag { display: inline-flex; align-items: center; padding: 0.12rem 0.4rem; border-radius: 3px; font: 500 0.7rem/1.3 var(--font-ui); color: var(--tag); background: color-mix(in srgb, var(--slate) 16%, transparent); }
.flag--bad { color: var(--bad); background: var(--bad-bg); }
.flag--warn { color: var(--warn); background: var(--warn-bg); }

.pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

.hdot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.hdot--up { background: var(--ok); }
.hdot--down { background: var(--bad); }
.hdot--none { border: 1.5px solid var(--line-strong); }

/* Corner brackets (astrium.co.za's screenshot frames): mark the selection, frame the output. */
.row.is-selected::before, .row.is-selected::after, .output-frame::before, .output-frame::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; }
.row.is-selected::before, .output-frame::before { top: 0; left: 0; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.row.is-selected::after, .output-frame::after { bottom: 0; right: 0; border-bottom: 1.5px solid var(--slate-2); border-right: 1.5px solid var(--slate-2); }
.row.is-selected::before { top: 5px; left: 5px; }
.row.is-selected::after { bottom: 5px; right: 5px; }

/* ── Watch station ──────────────────────────────────────────────────────── */
.station { display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); align-items: start; }

.rail { position: sticky; top: var(--bar-h); height: calc(100dvh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2); border-right: 1px solid var(--line); padding: 1.4rem 0 5rem; scrollbar-width: thin; }
.rail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0 1.25rem 1.1rem; }
.rail__verdict { font: 700 1.55rem/1.15 var(--font-display); letter-spacing: 0.03em; color: var(--ink); }
.rail__count { margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.rail__foot { padding: 1.25rem 1.25rem 0; font-size: 0.8rem; }
.rail__foot a { color: var(--muted); }

.rail-group { padding-top: 0.6rem; }
.rail-group + .rail-group { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.rail-group .tag { padding: 0 1.25rem 0.55rem; }

.row { position: relative; display: grid; gap: 0.18rem; padding: 0.7rem 1.25rem 0.8rem; color: var(--text); text-decoration: none; transition: background-color 0.15s; }
.row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.row.is-selected { background: var(--surface); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.row:focus-visible { outline-offset: -2px; }
.row.is-retired .row__name { color: var(--muted); font-weight: 500; }
.row__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.row__name { font-weight: 600; font-size: 0.95rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__path { font: 400 0.72rem/1.4 var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; margin-top: 0.15rem; font-size: 0.8rem; }
.row__state > span:first-child { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; }
.row__when { color: var(--muted); }
.row__flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.row__meter { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.3rem; height: 2px; border-radius: 2px; background: var(--busy-bg); overflow: hidden; }

.meter > span, .row__meter > span { display: block; height: 100%; background: var(--busy); border-radius: inherit; transform-origin: left; transform: scaleX(var(--pct, 0)); transition: transform 0.6s var(--ease-out); }
.is-indeterminate > span { width: 30%; transform: translateX(-100%); animation: sweep 1.6s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(340%); } }

.pane { min-width: 0; padding: 1.75rem 2.25rem 6rem; }
.pane > div { max-width: 62rem; display: grid; gap: 1.75rem; }
.pane[aria-busy="true"] > div { opacity: 0.55; transition: opacity 0.15s 0.1s; }
.back { display: none; }

.pane__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; }
.pane__id { display: grid; gap: 0.35rem; min-width: 0; }
.pane__title { font: 700 1.65rem/1.15 var(--font-display); letter-spacing: 0.03em; color: var(--ink); overflow-wrap: anywhere; }
.pane__path { font: 400 0.82rem/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.pane__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin-top: 0.4rem; font-size: 0.84rem; }
.facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.facts .icon { color: var(--slate-2); }
.facts__link { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.25rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }

.run { display: grid; gap: 0.9rem; }
.run__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.run__open { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.run__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.run__cmd { font: 500 0.85rem/1 var(--font-mono); color: var(--ink); }
.run__meta { font-size: 0.84rem; color: var(--muted); }
.run__none { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--muted); }
.run__none p:first-child { color: var(--ink); font-weight: 600; }
.run__after { font-size: 0.86rem; color: var(--muted); }

.progress { display: grid; gap: 0.45rem; }
.meter { position: relative; height: 6px; border-radius: 3px; background: var(--busy-bg); overflow: hidden; }
.progress__label { font-size: 0.86rem; color: var(--text); }
.progress__label strong { color: var(--busy); margin-right: 0.3rem; }

.output-frame { position: relative; padding: 4px; }
.output { max-height: 25rem; overflow: auto; padding: 0.7rem 0; background: var(--out-bg); border: 1px solid var(--line); border-radius: 3px;
  font: 400 0.76rem/1.65 var(--font-mono); font-variant-ligatures: none; color: var(--ink); scrollbar-width: thin; overscroll-behavior: contain; }
.ln { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); padding: 0 1rem; }
.ln time { color: var(--muted); user-select: none; }
.ln span { white-space: pre-wrap; overflow-wrap: anywhere; }
/* stderr reads as a caution while a run is healthy; only a failed run turns it red. */
.ln.is-new { animation: line-in 0.9s var(--ease-out); }
@keyframes line-in { from { background-color: color-mix(in srgb, var(--slate) 22%, transparent); } }
.output__empty, .output__missing { padding: 0.2rem 1rem; color: var(--muted); font: 400 0.8rem/1.5 var(--font-ui); }
.output-frame > .output__missing { padding: 1rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: 3px; }
.follow { position: absolute; right: 1.1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem;
  font: 600 0.68rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-fg); background: var(--primary-bg);
  border: 0; border-radius: 4px; box-shadow: var(--shadow); cursor: pointer; }
.follow[hidden] { display: none; }

.commands ul { display: grid; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); margin-top: 0.8rem; }
.cmd { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; grid-template-areas: "name line action" "name meta action"; gap: 0.3rem 1.25rem; align-items: center; padding: 0.8rem 1rem; }
.cmd + .cmd { border-top: 1px solid var(--line); }
.cmd__name { grid-area: name; display: flex; align-items: center; gap: 0.45rem; align-self: start; padding-top: 0.1rem; }
.cmd__name strong { font: 500 0.84rem/1.3 var(--font-mono); }
.cmd__line { grid-area: line; font-size: 0.78rem; overflow-wrap: anywhere; }
.cmd__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; font-size: 0.76rem; color: var(--muted); }
.cmd__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cmd > .btn { grid-area: action; }
.instructions p { max-width: 68ch; margin-top: 0.7rem; font-size: 0.92rem; }

.verdict { display: grid; gap: 0.6rem; max-width: 40rem; padding-top: 3.5rem; }
.verdict__line { font: 800 2.4rem/1.1 var(--font-display); letter-spacing: 0.02em; color: var(--ink); }
.verdict__detail { font-size: 0.98rem; }
.verdict__hint { margin-top: 0.75rem; font-size: 0.86rem; color: var(--muted); }
.pane__message { display: grid; gap: 0.75rem; justify-items: start; padding-top: 2rem; }

/* ── Run confirmation ───────────────────────────────────────────────── */
.confirm { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; display: grid; gap: 1.15rem; align-content: start; }
.back--always { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; min-height: 2.5rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.back--always:hover { color: var(--ink); }
.confirm__title { font: 700 1.6rem/1.2 var(--font-display); letter-spacing: 0.03em; color: var(--ink); overflow-wrap: anywhere; }
.confirm__lede { max-width: 60ch; }
.cmdline { display: grid; gap: 0.35rem; padding: 1rem 1.15rem; background: var(--out-bg); border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-mono); font-variant-ligatures: none; }
.cmdline__prompt { font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }
.cmdline__text { font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
/* Command-line arguments wrap as whole units; only one longer than the line breaks inside. */
.arg { display: inline-block; max-width: 100%; word-break: break-all; }
.confirm__facts { margin-top: 0; }
.confirm__last { font-size: 0.9rem; }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.35rem; }
.btn--large { min-height: 2.9rem; padding: 0 1.4rem; font-size: 0.76rem; }
.btn:disabled { opacity: 0.6; cursor: progress; box-shadow: none; }
.confirm__switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.confirm__others { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.notice--busy { background: var(--busy-bg); border-color: color-mix(in srgb, var(--busy) 25%, transparent); align-items: center; }
.notice--busy > .pulse { color: var(--busy); }
.notice--quiet { background: color-mix(in srgb, var(--slate) 12%, transparent); border-color: var(--line); align-items: center; }
.notice--quiet > .icon { color: var(--muted); margin: 0; }
.notice > .btn { flex: none; }

/* ── Run page ──────────────────────────────────────────────────────────── */
.run-page { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; display: grid; gap: 1.25rem; align-content: start; }
.run-page__head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.run-page__id { display: grid; gap: 0.3rem; min-width: 0; }
.run-page__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; font: 700 1.65rem/1.15 var(--font-display); letter-spacing: 0.03em; color: var(--ink); overflow-wrap: anywhere; }
.run-page__cmd { font: 500 1.05rem/1 var(--font-mono); letter-spacing: 0; color: var(--slate-2); }
.run-page__ref { font: 400 0.76rem/1.4 var(--font-mono); color: var(--muted); }

.outcome { display: grid; gap: 0.6rem; padding: 1rem 1.15rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.outcome__line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.outcome__line .icon { width: 20px; height: 20px; }
.outcome__line:has(> span:only-of-type) { flex-wrap: nowrap; align-items: flex-start; }
.outcome__line:has(> span:only-of-type) .icon { margin-top: 0.2rem; }
.outcome__time { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.outcome__when { font-size: 0.84rem; color: var(--muted); }
.outcome--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.outcome--ok .outcome__line .icon { color: var(--ok); }
.outcome--bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.outcome--bad .outcome__line .icon { color: var(--bad); }
.outcome--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.outcome--warn .outcome__line .icon { color: var(--warn); }
.outcome--busy .outcome__line { color: var(--busy); }

.run-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.5rem; margin: 0; padding: 0 0.15rem; }
.run-facts div { display: grid; gap: 0.2rem; min-width: 0; }
.run-facts dt { font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tag); }
.run-facts dd { margin: 0; font-size: 0.9rem; color: var(--ink); }
.run-facts__wide { grid-column: 1 / -1; }
.run-facts__folder { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.run-output { display: grid; gap: 0.7rem; }
.run-output__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.run-page .output { max-height: max(22rem, calc(100dvh - 16rem)); }

.cancel-panel { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: 6px; background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.cancel-panel[hidden] { display: none; }
.cancel-panel > .icon { color: var(--bad); margin-top: 0.2rem; }
.cancel-panel > div { display: grid; gap: 0.8rem; }
.cancel-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn--danger-solid { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.btn--danger-solid:hover { box-shadow: var(--shadow); border-color: var(--bad); }

.connection { position: absolute; left: 1.1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; border-radius: 4px;
  font-size: 0.78rem; color: var(--warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.connection[hidden] { display: none; }

/* ── Sign-off ────────────────────────────────────────────────────────── */
.signoff { max-width: 58rem; }
.review { display: grid; gap: 1.4rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.review__row { display: grid; gap: 0.6rem; }
.review__row + .review__row { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.review__row .tag .flag { letter-spacing: 0.02em; text-transform: none; font-family: var(--font-ui); }
.review__value { font-size: 0.88rem; }
.review__prose { max-width: 68ch; }
.review__commands { display: grid; gap: 0.8rem; }
.review__unchanged { font-size: 0.85rem; color: var(--muted); }
.review__same summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.review__same ul { display: grid; gap: 0.4rem; margin-top: 0.6rem; }
.change { display: grid; gap: 0.45rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.change--added { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.change--removed { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.change--changed { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.change__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.change__head .flag .icon { width: 13px; height: 13px; margin-right: 0.25rem; }
.change__name { font: 500 0.88rem/1.3 var(--font-mono); }
.change__line { font-size: 0.82rem; }
.change__line.is-removed { text-decoration: line-through; color: var(--muted); }
.change__meta { font-size: 0.78rem; color: var(--muted); }
.flag--ok { color: var(--ok); background: var(--ok-bg); }

.cmd-diff, .prose-diff { display: grid; gap: 2px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.cmd-diff code, .prose-diff p { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); padding: 0.5rem 0.7rem 0.5rem 0; font-size: 0.82rem; line-height: 1.6; }
.prose-diff p { display: block; padding: 0.55rem 0.8rem; font-size: 0.9rem; }
.cmd-diff__mark { text-align: center; user-select: none; color: var(--muted); }
.cmd-diff__old, .prose-diff__old { background: color-mix(in srgb, var(--bad-bg) 60%, var(--surface)); }
.cmd-diff__new, .prose-diff__new { background: color-mix(in srgb, var(--ok-bg) 60%, var(--surface)); }
.cmd-diff__text { min-width: 0; }
del { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--bad); background: var(--bad-bg); border-radius: 2px; padding: 0 2px; }
ins { text-decoration: none; color: var(--ok); background: var(--ok-bg); border-radius: 2px; padding: 0 2px; font-weight: 600; }

.signoff__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.reject-panel label { display: block; }
.reject-panel textarea { width: 100%; padding: 0.6rem 0.7rem; font: 400 0.92rem/1.5 var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 4px; resize: vertical; }
.reject-panel textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.reject-panel textarea[aria-invalid="true"] { border-color: var(--bad); }
.field-error { font-size: 0.84rem; color: var(--bad); }

/* Navigation: how many projects wait for the owner. */
.nav-count { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-left: 0.4rem; padding: 0 0.3rem; border-radius: 999px;
  font: 600 0.62rem/1 var(--font-ui); letter-spacing: 0; color: var(--warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }

/* ── Run history ─────────────────────────────────────────────────────── */
.history { display: grid; gap: 0.8rem; }
.history__list { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.history__row { display: grid; grid-template-columns: 7.5rem 6rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--text); text-decoration: none; }
.history__list li + li .history__row { border-top: 1px solid var(--line); }
.history__row:hover { background: var(--bg); }
.history__state { font-weight: 600; }
.history__who { text-align: right; }

.runs-page { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.25rem 6rem; display: grid; gap: 1.25rem; align-content: start; }
.runs-page__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.title--page { font-size: 1.55rem; }
.runs-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.segmented a { padding: 0.35rem 0.7rem; border-radius: 4px; font: 500 0.82rem/1.2 var(--font-ui); color: var(--muted); text-decoration: none; }
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="true"] { color: var(--primary-fg); background: var(--primary-bg); }
.select select { min-height: 2.3rem; padding: 0 2rem 0 0.7rem; font: 400 0.88rem/1 var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 4px; }
.runs-page__more { display: flex; justify-content: center; gap: 0.5rem; font-size: 0.88rem; }

.runlist { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.runlist li + li .runrow { border-top: 1px solid var(--line); }
.runrow { display: grid; grid-template-columns: 9rem minmax(0, 1.4fr) minmax(0, 1fr) 8rem minmax(0, 1fr); gap: 0.4rem 1.25rem; align-items: center;
  padding: 0.75rem 1.1rem; font-size: 0.88rem; color: var(--text); text-decoration: none; }
.runrow:hover { background: var(--bg); }
.runrow__state { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.runrow__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runrow__what strong { font-weight: 600; margin-right: 0.35rem; }
.runrow__who { text-align: right; overflow-wrap: anywhere; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.pform-page { max-width: 58rem; }
.pform-wrap { display: grid; gap: 1.25rem; }
.pform { display: grid; gap: 1.4rem; margin: 0; padding: 1.25rem; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.pform[disabled] { background: var(--bg); }
.pform__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.pform__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.field { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.field > label, .field-label { font: 600 0.82rem/1.3 var(--font-ui); color: var(--ink); }
.field-hint { font-size: 0.8rem; color: var(--muted); }
.field input:not([type=checkbox]):not([type=radio]), .field textarea {
  width: 100%; min-height: 2.5rem; padding: 0.5rem 0.7rem; font: 400 0.92rem/1.4 var(--font-ui); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input.mono, .field textarea.mono { font-family: var(--font-mono); font-size: 0.84rem; font-variant-ligatures: none; }
/* A command line is one line that wraps to show all of it. */
.field textarea[data-oneline] { field-sizing: content; min-height: 2.5rem; resize: none; overflow-wrap: anywhere; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field input.input-validation-error, .field textarea.input-validation-error { border-color: var(--bad); }
.field input:disabled, .field textarea:disabled { color: var(--text); background: transparent; }
.field-error:empty, .field-validation-valid { display: none; }
.field--narrow { max-width: 9rem; }
.check { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; font-size: 0.86rem; color: var(--ink); cursor: pointer; }
.check input { width: 1rem; height: 1rem; accent-color: var(--primary-bg); }
.check--block { min-height: 2.5rem; }
.check .icon { color: var(--slate-2); }

.cmd-rows { display: grid; gap: 0.8rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.cmd-row { display: grid; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.cmd-row[hidden] { display: none; }
.cmd-row__main { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.75rem; }
.cmd-row__more { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1rem; }
.cmd-row__more > .field:first-child { flex: 1 1 14rem; }
[data-add-row] { justify-self: start; margin-top: 0.6rem; }

.danger { display: grid; gap: 0.6rem; justify-items: start; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.danger > p { max-width: 62ch; font-size: 0.9rem; }
.danger form { justify-self: stretch; }
.notice--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 25%, transparent); align-items: center; white-space: pre-line; }
.notice--ok > .icon { color: var(--ok); margin: 0; }

/* ── API keys ──────────────────────────────────────────────────────────── */
.keys-page { max-width: 58rem; }
.key-created { display: grid; gap: 1.1rem; padding: 1.25rem; border-radius: 8px; background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ok) 55%, transparent); }
.key-created:focus { outline: none; }
.key-created__head { display: grid; gap: 0.3rem; }
.key-created h2 { font: 700 1.1rem/1.25 var(--font-display); letter-spacing: 0.03em; color: var(--ink); }
.secret { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-radius: 4px; background: var(--out-bg); border: 1px solid var(--line); }
.secret code { flex: 1 1 18rem; font-size: 0.95rem; font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.setup { display: grid; gap: 0.45rem; }
.setup > p { font-size: 0.88rem; }
.snippet { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.8rem 0.7rem 1rem; border-radius: 4px; background: var(--out-bg); border: 1px solid var(--line); }
.snippet pre { flex: 1; margin: 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.snippet code { font-size: 0.8rem; line-height: 1.6; }
.key-created > .btn { justify-self: start; }
.key-new__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.key-new__row input { flex: 1 1 18rem; }
.key-new input { min-height: 2.5rem; padding: 0.5rem 0.7rem; font: 400 0.92rem/1.4 var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 4px; }
.key-new input[aria-invalid="true"] { border-color: var(--bad); }
.keys { display: grid; gap: 0.7rem; }
.keylist { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.keyrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; align-items: center; padding: 0.85rem 1rem; }
.keyrow + .keyrow { border-top: 1px solid var(--line); }
.keyrow.is-new { background: color-mix(in srgb, var(--ok-bg) 55%, var(--surface)); }
.keyrow__id { display: grid; gap: 0.15rem; min-width: 0; }
.keyrow__id strong { font-weight: 600; color: var(--ink); }
.keyrow__id code { font-size: 0.78rem; color: var(--muted); }
.keyrow__meta { display: grid; gap: 0.1rem; font-size: 0.84rem; color: var(--muted); }
.revoke { justify-self: end; }
.revoke summary { list-style: none; }
.revoke summary::-webkit-details-marker { display: none; }
.revoke[open] { grid-column: 1 / -1; justify-self: stretch; display: grid; gap: 0.6rem; }
.revoke[open] summary { justify-self: end; }
.keys--revoked .keyrow { opacity: 1; }
.keys--revoked .keyrow__id strong { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ── Sign-in ─────────────────────────────────────────────────────────── */
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1rem 7rem; }
.signin__card { width: 100%; max-width: 26rem; display: grid; gap: 1.25rem; padding: 2rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.signin__card::before, .signin__card::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.signin__card::before { top: -1px; left: -1px; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); border-top-left-radius: 8px; }
.signin__card::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--slate-2); border-right: 1.5px solid var(--slate-2); border-bottom-right-radius: 8px; }
.signin__brand { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.signin__brand .mark { width: 28px; height: 28px; }
.signin__title { font: 700 1.5rem/1.2 var(--font-display); letter-spacing: 0.03em; color: var(--ink); }
.signin__form { display: grid; gap: 1rem; }
.signin__form .field input { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; font: 400 0.95rem/1.4 var(--font-ui); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; }
.signin__form .field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.signin__code { font-family: var(--font-mono) !important; font-size: 1.15rem !important; letter-spacing: 0.25em; }
.signin__code--recovery { letter-spacing: 0.12em; text-transform: uppercase; }
.signin__form .btn { width: 100%; }
.signin__foot { max-width: 26rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
.icon.flip { transform: scaleX(-1); }
.app-signout { display: contents; }

/* ── People and account setup ──────────────────────────────────────── */
.person-new { display: grid; gap: 0.8rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); justify-items: start; }
.person-new__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; width: 100%; }
.person-new input, .signin__form input:not([type=checkbox]) { width: 100%; min-height: 2.5rem; padding: 0.5rem 0.7rem; font: 400 0.92rem/1.4 var(--font-ui);
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; }
.person-new input[aria-invalid="true"], .signin__form input[aria-invalid="true"] { border-color: var(--bad); }
.keyrow__email { font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.keyrow__id .flag { margin-left: 0.4rem; vertical-align: 0.1em; }
.person-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: start; gap: 0.5rem; }
.person-actions:has(details[open]) { grid-column: 1 / -1; }
.person-actions details[open] { flex: 1 1 100%; }

.signin__card--wide { max-width: 32rem; }
.signin__card > p { font-size: 0.92rem; }
.step { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: 0.4rem; border-radius: 50%;
  font: 600 0.72rem/1 var(--font-ui); color: var(--primary-fg); background: var(--primary-bg); vertical-align: 0.05em; }
.authenticator { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 0.3rem; }
.qr { width: 164px; height: 164px; padding: 6px; background: #ffffff; border: 1px solid var(--line); border-radius: 6px; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.authenticator__key { display: grid; gap: 0.35rem; min-width: 0; flex: 1 1 12rem; }
.authenticator__key code { font-size: 0.92rem; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
.recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; margin: 0; padding: 0.9rem 1rem; list-style: none;
  border-radius: 4px; background: var(--out-bg); border: 1px solid var(--line); counter-reset: code; }
.recovery li { counter-increment: code; }
.recovery li::before { content: counter(code) "."; display: inline-block; width: 1.6rem; color: var(--muted); font-size: 0.78rem; }
.recovery code { font-size: 0.95rem; letter-spacing: 0.04em; }
.recovery__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Notifications ───────────────────────────────────────────────────── */
.settings-block { display: grid; gap: 0.8rem; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.steps > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.steps > li > .field-hint { grid-column: 2; }
.steps .step { margin: 0.1rem 0 0; }
.steps .step .icon { width: 12px; height: 12px; }
.steps > li.is-later { opacity: 0.55; }
.steps > li.is-done .step { background: var(--ok); }
.token-form { display: grid; gap: 0.4rem; }
.token-form label { font: 600 0.84rem/1.3 var(--font-ui); color: var(--ink); }
.token-form input { flex: 1 1 18rem; min-height: 2.5rem; padding: 0.5rem 0.7rem; font: 400 0.86rem/1.4 var(--font-mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; }
.token-form input[aria-invalid="true"] { border-color: var(--bad); }
.start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.start > div:not(.qr) { display: grid; gap: 0.75rem; justify-items: start; flex: 1 1 18rem; }
.waiting { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--busy); }
.connected { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.connected > p { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.connected > p .icon { color: var(--ok); }
.connected__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.events { display: grid; gap: 0.9rem; justify-items: start; }
.events__list { display: grid; gap: 0.75rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.events__list li { display: grid; gap: 0.3rem; }
.events__list .check { min-height: 2rem; font-weight: 500; }
.bubble { justify-self: start; max-width: 40rem; margin-left: 1.45rem; padding: 0.45rem 0.75rem; border-radius: 10px 10px 10px 3px;
  font-size: 0.8rem; line-height: 1.45; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); overflow-wrap: anywhere; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty { display: grid; gap: 0.8rem; padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.empty h2 { font: 700 1.2rem/1.2 var(--font-display); letter-spacing: 0.03em; color: var(--ink); }
.empty > p { max-width: 62ch; }
.empty > .btn { justify-self: start; }
.empty__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 0.4rem; }
.empty__way { display: grid; gap: 0.55rem; align-content: start; justify-items: start; padding: 1.1rem 1.2rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.empty__way h3 { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tag); }
.prompt { justify-self: stretch; padding: 0.65rem 0.8rem; border-radius: 4px; background: var(--out-bg); border: 1px solid var(--line); font: 400 0.8rem/1.55 var(--font-mono); color: var(--ink); }

/* ── Narrower screens ───────────────────────────────────────────────────── */
@media (max-width: 70em) {
  .station { grid-template-columns: 19rem minmax(0, 1fr); }
  .pane { padding: 1.5rem 1.5rem 6rem; }
  .cmd { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name action" "line action" "meta action"; }
}

@media (max-width: 46em) {
  .app-bar__inner { gap: 1rem; padding: 0 1rem; }
  .app-bar__end { margin-left: auto; }
  .app-user { display: none; }
  .app-bar .app-nav { display: none; }
  .app-nav--phone { display: flex; overflow-x: auto; padding: 0 0.5rem; background: var(--bg); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .app-nav a { min-height: 2.75rem; white-space: nowrap; }

  .station { display: block; }
  .station[data-explicit="false"] .pane, .station[data-explicit="true"] .rail { display: none; }
  .rail { position: static; height: auto; overflow: visible; background: none; border: 0; padding: 1.25rem 0 6rem; }
  .rail__head, .rail-group .tag, .rail__foot { padding-left: 1rem; padding-right: 1rem; }
  .row { padding: 0.85rem 1rem 0.95rem; border-bottom: 1px solid var(--line); }
  .rail-group ul { border-top: 1px solid var(--line); }
  .row__meter { left: 1rem; right: 1rem; }
  .row.is-selected { background: none; box-shadow: none; }
  .row.is-selected::before, .row.is-selected::after { display: none; }

  .pane { padding: 0.75rem 1rem 6rem; }
  .pane > div { gap: 1.4rem; }
  .back { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; min-height: 2.75rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
  .pane__title { font-size: 1.4rem; }
  .pane__actions { width: 100%; }
  .pane__actions .btn { flex: 1 1 auto; min-height: 2.9rem; }
  .output { max-height: 60vh; font-size: 0.72rem; }
  .ln { grid-template-columns: 4.2rem minmax(0, 1fr); padding: 0 0.75rem; }
  .cmd { padding: 0.8rem; }
  .verdict { padding-top: 1.5rem; }
  .verdict__line { font-size: 1.9rem; }
  .page-pad { padding: 1.5rem 1rem 6rem; }
  .runs-page { padding: 1.25rem 1rem 6rem; }
  .runs-filter, .segmented { width: 100%; }
  .segmented { overflow-x: auto; }
  .select, .select select { width: 100%; }
  .runrow { grid-template-columns: minmax(0, 1fr) auto; padding: 0.75rem 1rem; }
  .runrow__what { grid-column: 1 / -1; grid-row: 1; }
  .runrow__state { grid-column: 1; }
  .runrow__took { grid-column: 2; text-align: right; }
  .runrow__when { grid-column: 1; font-size: 0.82rem; }
  .runrow__who { grid-column: 2; font-size: 0.82rem; }
  .history__row { grid-template-columns: auto minmax(0, 1fr); padding: 0.6rem 0.8rem; }
  .history__row > .muted:not(.history__who) { grid-column: 1 / -1; }
  .history__who { display: none; }
  .confirm { padding: 0.75rem 1rem 6rem; }
  .run-page { padding: 0.75rem 1rem 6rem; gap: 1rem; }
  .pform { padding: 0.9rem; }
  .keyrow { grid-template-columns: minmax(0, 1fr) auto; }
  .keyrow__meta { grid-column: 1; }
  .revoke { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
  .key-created { padding: 1rem; }
  .cmd-row__main { grid-template-columns: 1fr; }
  .pform__actions .btn { flex: 1 1 auto; }
  .run-page__title { font-size: 1.35rem; }
  .run-facts { grid-template-columns: 1fr 1fr; }
  .run-page .output { max-height: 65vh; }
  .cancel-panel__actions .btn { flex: 1 1 auto; min-height: 2.9rem; }
  .signoff__actions > *, .signoff__actions .btn { flex: 1 1 auto; }
  .review { padding: 0.9rem; }
  .confirm__title { font-size: 1.35rem; }
  .confirm__actions .btn { flex: 1 1 auto; }
  .notice { flex-wrap: wrap; }
  .empty { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}