/* scinops-watcher. Brand tokens from scinops.com: night #0a1631, deep #1a2b4d, mid #1d51a5,
   primary #3c76d6, light #5591f7. Raleway for headings, Open Sans for UI, IBM Plex Mono for data.
   Light-first; dark is a designed variant on the brand night blue. Status colours are fixed. */
:root {
  color-scheme: light;
  --brand-night: #0a1631; --brand-deep: #1a2b4d; --brand-mid: #1d51a5; --brand-primary: #3c76d6; --brand-light: #5591f7;
  --bg: #f4f7fd; --surface: #ffffff; --surface-2: #f6f8fd; --surface-3: #eef2fa;
  --ink: #0a1631; --ink-2: #3d5480; --muted: #7186a8; --line: #dbe4f4; --line-strong: #c3d2ea;
  --accent: #1d51a5; --accent-hover: #3c76d6; --accent-ink: #ffffff; --accent-wash: rgba(60, 118, 214, 0.12);
  --hero: linear-gradient(135deg, #0a1631 0%, #1a2b4d 48%, #1d51a5 100%);
  --hero-ink: #ffffff; --hero-ink-2: rgba(233, 241, 255, 0.78); --hero-glass: rgba(255, 255, 255, 0.10); --hero-line: rgba(255, 255, 255, 0.22);
  --ok: #0ca30c; --warn: #fab219; --crit: #d03b3b; --unk: #7186a8;
  --ok-wash: rgba(12, 163, 12, 0.12); --warn-wash: rgba(250, 178, 25, 0.18); --crit-wash: rgba(208, 59, 59, 0.12); --unk-wash: rgba(113, 134, 168, 0.16);
  --shadow: 0 8px 24px rgba(10, 22, 49, 0.06), 0 1px 2px rgba(10, 22, 49, 0.05);
  --shadow-hero: 0 16px 40px rgba(10, 22, 49, 0.18);
  --radius: 14px; --radius-sm: 8px; --pill: 999px;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Raleway", "Open Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1631; --surface: #142346; --surface-2: #1a2c55; --surface-3: #213764;
    --ink: #eef3ff; --ink-2: #b7c6e6; --muted: #7f95c2; --line: #24386a; --line-strong: #32497f;
    --accent: #5591f7; --accent-hover: #7cabff; --accent-ink: #0a1631; --accent-wash: rgba(85, 145, 247, 0.18);
    --hero: linear-gradient(135deg, #0d1c3f 0%, #1a2b4d 45%, #1d51a5 100%);
    --hero-glass: rgba(255, 255, 255, 0.08); --hero-line: rgba(255, 255, 255, 0.18);
    --unk: #8ea3cc;
    --ok-wash: rgba(12, 163, 12, 0.2); --warn-wash: rgba(250, 178, 25, 0.16); --crit-wash: rgba(208, 59, 59, 0.22); --unk-wash: rgba(142, 163, 204, 0.2);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1631; --surface: #142346; --surface-2: #1a2c55; --surface-3: #213764;
  --ink: #eef3ff; --ink-2: #b7c6e6; --muted: #7f95c2; --line: #24386a; --line-strong: #32497f;
  --accent: #5591f7; --accent-hover: #7cabff; --accent-ink: #0a1631; --accent-wash: rgba(85, 145, 247, 0.18);
  --hero: linear-gradient(135deg, #0d1c3f 0%, #1a2b4d 45%, #1d51a5 100%);
  --hero-glass: rgba(255, 255, 255, 0.08); --hero-line: rgba(255, 255, 255, 0.18);
  --unk: #8ea3cc;
  --ok-wash: rgba(12, 163, 12, 0.2); --warn-wash: rgba(250, 178, 25, 0.16); --crit-wash: rgba(208, 59, 59, 0.22); --unk-wash: rgba(142, 163, 204, 0.2);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
/* a class that sets display would otherwise beat the browser's [hidden] rule */
[hidden] { display: none !important; }
html { font-size: 15px; }
@media (max-width: 640px) { html { font-size: 16px; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--pill); font-weight: 600; }
.skip-link:focus { top: 12px; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.small { font-size: 0.86rem; }
.m0 { margin: 0 0 10px; }
.mb4 { margin-bottom: 4px; }
ul.plain { margin: 0; padding-left: 16px; }
.eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- brand bar + header ---------- */
.brandbar { height: 4px; background: linear-gradient(90deg, var(--brand-night), var(--brand-mid) 50%, var(--brand-light)); }
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 60px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wordmark { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wordmark .slash { color: var(--brand-primary); font-weight: 600; margin: 0 1px; }
.wordmark .product { font-family: var(--sans); font-weight: 500; font-size: 0.95rem; color: var(--ink-2); padding-left: 10px; border-left: 1px solid var(--line-strong); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-wash); align-self: center; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--ink-2); padding: 7px 14px; border-radius: var(--pill); font-weight: 600; font-size: 0.93rem; transition: background 0.18s var(--ease), color 0.18s var(--ease); }
.nav a:hover { background: var(--accent-wash); text-decoration: none; color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
.nav .short { display: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 0.86rem; color: var(--ink-2); }
.tag-error { font-family: var(--mono); font-size: 0.76rem; color: var(--crit); border: 1px solid var(--crit); background: var(--crit-wash); padding: 4px 10px; border-radius: var(--pill); }
.tag-warn { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--warn-wash); padding: 0 6px; border-radius: var(--pill); vertical-align: middle; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 7px 14px; border-radius: var(--pill); font-size: 0.9rem; font-weight: 600; line-height: 1.2; transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease); }
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.small { padding: 5px 11px; font-size: 0.82rem; }
.btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line-strong)); }
.btn.danger:hover { background: var(--crit-wash); }
.btn[disabled] { opacity: 0.5; cursor: default; }
textarea.search { line-height: 1.5; border-radius: var(--radius-sm); }
#cfg-fields label { display: block; font-weight: 600; }
#cfg-fields > div { min-width: 0; }
.btn.icon { padding: 0; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
.btn svg { width: 15px; height: 15px; }

/* ---------- page ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 22px 24px 72px; }
/* A configuration page is a dense listing, not prose, and its two-column layout already spends
   the sidebar's width: give it more room so the tables fit instead of scrolling sideways. */
body[data-section] .wrap { max-width: 1440px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-family: var(--display); font-size: 1rem; font-weight: 700; }
h3 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }

/* hero band: the brand gradient carries the one sentence that matters */
.hero { position: relative; overflow: hidden; background: var(--hero); color: var(--hero-ink); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--shadow-hero); display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; }
.hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(85, 145, 247, 0.35), transparent 65%); pointer-events: none; }
.hero .eyebrow { color: var(--hero-ink-2); margin-bottom: 6px; }
.hero .title { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; line-height: 1.2; }
.hero .title .big-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14); }
.hero .sub { color: var(--hero-ink-2); font-size: 0.9rem; margin-top: 6px; }
.hero .counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.hero .count { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--pill); border: 1px solid var(--hero-line); background: var(--hero-glass); font-size: 0.82rem; color: var(--hero-ink-2); backdrop-filter: blur(6px); }
.hero .count b { color: var(--hero-ink); font-family: var(--mono); font-weight: 600; font-size: 0.86rem; }
.hero .side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; min-width: 0; }
.hero .fleet-url { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--hero-ink-2); max-width: 100%; }
.hero .fleet-url code { font-family: var(--mono); font-size: 0.8rem; color: var(--hero-ink); background: var(--hero-glass); border: 1px solid var(--hero-line); padding: 6px 10px; border-radius: var(--radius-sm); max-width: 380px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .btn.icon { background: var(--hero-glass); border-color: var(--hero-line); color: var(--hero-ink); }
.hero .btn.icon:hover { background: rgba(255, 255, 255, 0.2); }
.big-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--unk); }
.big-dot.ok { background: var(--ok); } .big-dot.warning { background: var(--warn); } .big-dot.critical { background: var(--crit); }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .hero .side { align-items: flex-start; } }

/* simple page heads (incidents, about) */
.statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 18px; }
.counts { display: flex; gap: 8px; flex-wrap: wrap; }
.count { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); font-size: 0.82rem; color: var(--ink-2); }
.count b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 0.86rem; }
.d { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--unk); }
.d.ok { background: var(--ok); } .d.warning { background: var(--warn); } .d.critical { background: var(--crit); } .d.unknown { background: var(--unk); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 18px; }
.chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); padding: 6px 13px; border-radius: var(--pill); font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--brand-primary); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed="true"] .muted { color: var(--accent-ink); opacity: 0.8; }
.filters .spacer { flex: 1; }
.search { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 7px 14px; border-radius: var(--pill); font: inherit; font-size: 0.9rem; width: 240px; min-height: 36px; }
.search:focus { border-color: var(--brand-primary); }
select.search { width: auto; }

/* ---------- groups & rows ---------- */
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); overflow: hidden; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.group-head h2 { display: flex; align-items: center; gap: 10px; }
.auto { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); border: 1px solid var(--accent-wash); background: var(--accent-wash); padding: 2px 8px; border-radius: var(--pill); }
.gcount { color: var(--muted); font-size: 0.82rem; font-family: var(--mono); }
.group-head .right { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-2); }
.group-head .right code { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 124px minmax(200px, 1.15fr) minmax(220px, 1.6fr) 64px 100px 76px; gap: 12px; align-items: center; min-height: 44px; padding: 6px 16px; border-top: 1px solid var(--line); transition: background 0.15s var(--ease); }
.row.compact { grid-template-columns: auto minmax(0, 1fr) auto; }
/* icon-only state in a compact list: the word is for assistive tech, the mark is what shows */
.row.compact .state { width: 22px; justify-content: center; }
.row.compact .state .d { width: 10px; height: 10px; }
.row.compact .state svg { width: 16px; height: 16px; color: var(--muted); }
.row.compact .name a { color: var(--ink); font-weight: 700; }
.row.compact .since { font-size: 0.78rem; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
.row.is-crit { box-shadow: inset 4px 0 0 var(--crit); }
.row.is-warn { box-shadow: inset 4px 0 0 var(--warn); }
.row.is-unk { box-shadow: inset 4px 0 0 var(--unk); }
.row .name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .name a { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .summary { color: var(--ink-2); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .since { color: var(--ink-2); font-family: var(--mono); font-size: 0.8rem; text-align: right; }
.row .actions { display: flex; gap: 6px; justify-content: flex-end; }
.row .actions .btn { opacity: 0.6; }
.row:hover .actions .btn, .row .actions .btn:focus-visible { opacity: 1; }
.kind { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface-2); padding: 1px 7px; border-radius: var(--pill); white-space: nowrap; flex: none; }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.state .d { width: 9px; height: 9px; }
.state.ok .d { background: var(--ok); } .state.warning .d { background: var(--warn); } .state.critical .d { background: var(--crit); } .state.unknown .d { background: var(--unk); }
.state.muted .d { background: transparent; border: 2px solid var(--unk); }
.state.critical { color: var(--ink); }
.state .pend { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.hist { display: flex; align-items: flex-end; gap: 1px; height: 18px; width: 100px; }
.hist i { flex: 1; height: 100%; border-radius: 1px; background: var(--ok); opacity: 0.4; min-width: 1px; }
.hist i.w { background: var(--warn); opacity: 0.95; } .hist i.c { background: var(--crit); opacity: 1; } .hist i.u { background: var(--unk); opacity: 0.9; }

/* ---------- panels ---------- */
/* minmax(0, …) everywhere a track holds text: a plain 1fr cannot shrink below its content, so one
   long URL would widen a column and starve the other */
.cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols > *, .stack > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.panel-head h2 { white-space: nowrap; }
.panel-head .right { margin-left: auto; text-align: right; min-width: 0; }
.panel-body { padding: 16px; }
.panel.narrow { max-width: 560px; }
.lockform { display: inline-flex; margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; font-size: 0.9rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.kv dd.mono { font-family: var(--mono); font-size: 0.84rem; }
.urlbox { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); padding: 6px 8px 6px 12px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 0.84rem; overflow: hidden; min-width: 0; }
.urlbox span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urlbox.grow { flex: 1; min-width: 240px; }
.badge-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.badge-preview { height: 20px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.target-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.target-head h1 { display: flex; align-items: center; gap: 10px; }
.head-actions { margin-left: auto; display: flex; gap: 8px; }
.crumb { font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; }
.crumb a { color: var(--ink-2); }
.samples { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.samples li { display: grid; grid-template-columns: 56px 100px 1fr 70px; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); align-items: center; }
.samples li:first-child { border-top: 0; }
.samples .t { font-family: var(--mono); color: var(--muted); }
.samples .lat { font-family: var(--mono); text-align: right; color: var(--ink-2); }
.chart { position: relative; }
.chart svg { width: 100%; height: 150px; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis-t { fill: var(--muted); font-size: 10px; font-family: var(--mono); }
.chart .bar { fill: var(--brand-primary); opacity: 0.85; }
.chart .bar.w { fill: var(--warn); } .chart .bar.c { fill: var(--crit); } .chart .bar.u { fill: var(--unk); }
.chart .bar.hot { opacity: 1; }
.chart .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -100%); display: none; }
.chart .tip.show { display: block; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 52px 14px 1fr; gap: 10px; padding: 6px 0; font-size: 0.9rem; }
.timeline .t { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.timeline .d { width: 9px; height: 9px; margin-top: 6px; background: var(--muted); }
.timeline .d.crit { background: var(--crit); } .timeline .d.ok { background: var(--ok); } .timeline .d.accent { background: var(--brand-primary); }
.timeline .d.warn { background: var(--warn); }
.timeline .e { color: var(--ink); }
.timeline .e small { display: block; color: var(--ink-2); font-size: 0.82rem; }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--crit); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.notice h3 { margin-bottom: 8px; }
.notice .msg { font-family: var(--mono); font-size: 0.84rem; white-space: pre-wrap; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); padding: 10px 12px; border-radius: var(--radius-sm); }
.notice .to { font-size: 0.86rem; color: var(--ink-2); margin-top: 8px; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* a table that is wider than its box: a fade at the right edge says there is more */
.tablewrap { background: linear-gradient(to right, var(--surface) 30%, transparent), linear-gradient(to left, var(--surface) 30%, transparent) 100% 0, linear-gradient(to right, rgba(10, 22, 49, 0.10), transparent), linear-gradient(to left, rgba(10, 22, 49, 0.10), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }

/* Stacked cards are chosen by the width of the panel, not of the window: inside the
   configuration layout a table has the sidebar's width less to work with, and a viewport
   breakpoint left it scrolling sideways with the row's actions past the right edge. */
.panel { container-type: inline-size; }
@container (max-width: 960px) {
  /* stacked cards: each cell is a line with its column name in front */
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards thead { display: none; }
  table.cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
  table.cards tr:last-child { border-bottom: 0; }
  table.cards td { padding: 2px 0; border: 0; display: flex; gap: 10px; align-items: baseline; }
  table.cards td[data-label]::before { content: attr(data-label); flex: 0 0 84px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  table.cards td.cell-lead { display: block; order: -1; padding-bottom: 6px; font-size: 1rem; }
  table.cards td.cell-actions { justify-content: flex-start; text-align: left; padding-top: 8px; gap: 6px; flex-wrap: wrap; }
  table.cards td.cell-check .clip { max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  table.cards td.empty { display: block; text-align: center; }
  .tablewrap:has(table.cards) { background: none; }
}
/* Browsers that do not support container queries (Safari < 16, Firefox < 110) keep the
   viewport breakpoint this replaced, so a narrow window still stacks rather than never
   stacking at all. Same rules as the block above; the two have to stay in step. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    /* stacked cards: each cell is a line with its column name in front */
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
    table.cards thead { display: none; }
    table.cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
    table.cards tr:last-child { border-bottom: 0; }
    table.cards td { padding: 2px 0; border: 0; display: flex; gap: 10px; align-items: baseline; }
    table.cards td[data-label]::before { content: attr(data-label); flex: 0 0 84px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    table.cards td.cell-lead { display: block; order: -1; padding-bottom: 6px; font-size: 1rem; }
    table.cards td.cell-actions { justify-content: flex-start; text-align: left; padding-top: 8px; gap: 6px; flex-wrap: wrap; }
    table.cards td.cell-check .clip { max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    table.cards td.empty { display: block; text-align: center; }
    .tablewrap:has(table.cards) { background: none; }
  }
}
/* A long URL or query has no break opportunity, so it would set the column's minimum width and
   push the actions off the side. Clipping it to one line keeps the table inside its box; the
   whole value is in the title and on the system's own page. */
td.cell-check .clip { display: block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th { text-align: left; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.mono { font-family: var(--mono); font-size: 0.84rem; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary .more { color: var(--accent); font-size: 0.82rem; margin-left: 8px; }
details[open] summary .more { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--brand-night); color: #fff; padding: 9px 16px; border-radius: var(--pill); font-size: 0.88rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease); z-index: 50; box-shadow: var(--shadow-hero); }
.toast.show { opacity: 1; }
.empty { padding: 32px; text-align: center; color: var(--muted); }
.foot { margin-top: 28px; font-size: 0.82rem; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.demo-tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border: 1px dashed var(--line-strong); padding: 3px 9px; border-radius: var(--pill); }
@media (prefers-reduced-motion: reduce) { .toast, .btn, .chip, .nav a, .row { transition: none; } }
@media (max-width: 900px) {
  .row { grid-template-columns: 110px minmax(0, 1fr) 60px 72px; }
  .row .summary, .row .hist { display: none; }
  .topbar-inner { gap: 12px; }
  .wordmark .product { display: none; }
}

/* ---------- the editor's form ----------
   Two columns, so the settings that belong together (interval and timeout, the two halves of a
   window) sit on one line; anything that needs room — a URL, a script, an expectation — spans. */
.fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.fieldgrid .field.wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .fieldgrid { grid-template-columns: 1fr; } }
.duration { display: flex; gap: 8px; }
.duration input { flex: 1 1 auto; min-width: 0; }
.duration select { flex: 0 0 auto; width: auto; }

/* ---------- what a server presented ----------
   Shown after a check failed on trust, so the certificate can be looked at before it is trusted. */
.trust { border: 1px solid var(--warn); background: var(--warn-wash); border-radius: var(--radius-sm); padding: 12px 14px; }
.trust h3 { margin: 0 0 6px; font-size: 0.95rem; }
.trust .chain { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.84rem; }
.trust .chain li { padding: 4px 0; border-top: 1px solid var(--line); }
.trust .chain li:first-child { border-top: 0; }
.trust .fp { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- what it returns right now ----------
   Expectations are written from the real response: the body is shown, and the parts of it that
   could mean healthy are offered as choices. */
.preview { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.preview-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.preview-head .btn { margin-left: auto; }
.preview-body {
  margin: 0; padding: 10px 12px; max-height: 220px; overflow: auto; background: var(--surface);
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.preview-body:empty { display: none; }
.preview .badge-row { padding: 8px 12px 0; }
.preview-choices { display: grid; gap: 6px; padding: 10px 12px; max-height: 260px; overflow-y: auto; overflow-x: hidden; }
.choice { display: flex; gap: 10px; align-items: baseline; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--ink); }
.choice:hover, .choice:focus-visible { border-color: var(--accent); background: var(--accent-wash); }
.choice .k { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice .v { font-family: var(--mono); font-size: 0.76rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.choice .n { color: var(--muted); font-size: 0.74rem; flex: 0 0 auto; }

/* ---------- credential references inside a value ----------
   A password belongs in the command but not in the configuration, so the text holds a reference
   and the editor makes it obvious which one, and whether it resolves. */
.creds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.creds .lead { color: var(--muted); font-size: 0.76rem; }
.cred-chip {
  font-family: var(--mono); font-size: 0.72rem; padding: 3px 8px; border-radius: var(--pill);
  border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--ink-2);
  cursor: pointer;
}
.cred-chip:hover, .cred-chip:focus-visible { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.uses { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 6px; font-size: 0.76rem; }
.uses .tag { font-family: var(--mono); font-size: 0.72rem; padding: 2px 8px; border-radius: var(--pill); border: 1px solid transparent; }
.uses .tag.found { background: var(--ok-wash); color: var(--ink); border-color: var(--ok); }
.uses .tag.missing { background: var(--crit-wash); color: var(--ink); border-color: var(--crit); }

/* =================== adding a system: four steps, a live result beside them =================== */
.add-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.add-head h1 { margin: 0; }
.add-cancel { margin-left: auto; }
.tested { display: inline-flex; gap: 6px; align-items: center; font-size: 0.78rem; padding: 3px 9px; border-radius: var(--pill); border: 1px solid var(--line-strong); color: var(--muted); }
.tested.yes { border-color: var(--ok); background: var(--ok-wash); color: var(--ink); }
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 720px) { .rail { grid-template-columns: 1fr 1fr; } }
.rail button { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--ink); cursor: pointer; font: inherit; }
.rail .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.76rem; border: 1px solid var(--line-strong); color: var(--muted); flex: none; }
.rail button[aria-current="step"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rail button[aria-current="step"] .n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rail button.done .n { background: var(--ok); color: #fff; border-color: var(--ok); }
.rail .t { font-weight: 600; font-size: 0.86rem; display: block; }
.rail .s { font-size: 0.76rem; color: var(--muted); display: block; }
.rail button[disabled] { opacity: 0.55; cursor: default; }
.add-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .add-cols { grid-template-columns: 1fr; } .live { position: static; } }
.add-main { overflow: visible; }
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .types { grid-template-columns: 1fr 1fr; } }
.type { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; color: var(--ink); cursor: pointer; font: inherit; }
.type:hover, .type:focus-visible { border-color: var(--accent); background: var(--accent-wash); }
.type .icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; color: var(--accent); }
.type .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.type b { font-family: var(--display); font-size: 0.95rem; }
.type span:not(.icon) { font-size: 0.8rem; color: var(--ink-2); }
.add-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.add-name { flex: 1 1 220px; min-width: 0; font-weight: 600; }
.add-purpose { padding: 10px 16px 0; margin: 0; }
.setchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.setchips .lead { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.setchip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--pill); padding: 4px 10px 4px 8px; font-size: 0.78rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.setchip svg { width: 14px; height: 14px; stroke: var(--ink-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.setchip .v { font-family: var(--mono); font-size: 0.74rem; }
.setchip:hover { border-color: var(--accent); }
.setchip.changed { border-color: var(--accent); background: var(--accent-wash); }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 250px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px; text-align: left; cursor: default; font-family: var(--sans); }
.pop label { display: block; font-size: 0.76rem; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }
.pop .row { display: flex; gap: 6px; align-items: center; }
.pop .row input { width: 70px; }
.pop .hint { font-size: 0.72rem; color: var(--muted); margin-top: 6px; }
.pop .hint.warn { color: var(--warn); }
.pop .duration { display: flex; gap: 6px; }
.pop .duration input { width: 80px; }
.pop-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mini { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--pill); padding: 2px 9px; font-size: 0.74rem; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.mini:hover { border-color: var(--accent); color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--pill); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 5px 11px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.field label .req { color: var(--crit); }
.field .hint { font-size: 0.76rem; color: var(--muted); margin-top: 4px; }
.field input.search, .field textarea.search, .field select.search { width: 100%; }
.field textarea.search { min-height: 60px; line-height: 1.5; font-size: 0.82rem; }
.field .duration { display: flex; gap: 8px; }
.field .duration input { flex: 1 1 auto; min-width: 0; }
.field .duration select { flex: 0 0 auto; width: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.more summary { cursor: pointer; padding: 4px 0; }
.pin { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.82rem; }
.pin.pinned { border-style: solid; border-color: var(--ok); background: var(--ok-wash); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--unk); }
.dot.ok { background: var(--ok); } .dot.warning { background: var(--warn); } .dot.critical { background: var(--crit); } .dot.unk { background: var(--unk); }
.cred { position: relative; }
.cred-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 300px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px; }
.cred-menu > input { width: 100%; margin-bottom: 6px; }
.cred-menu ul { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.cred-menu li button { width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink); cursor: pointer; }
.cred-menu li button:hover, .cred-menu li button:focus-visible { background: var(--accent-wash); }
.cred-menu li.none { font-size: 0.78rem; color: var(--muted); padding: 6px 9px; }
.cred-new { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.cred-new .link { width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 6px; font-size: 0.8rem; color: var(--accent); font-weight: 600; cursor: pointer; font-family: inherit; }
.cred-new form { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 2px; }
.uses { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 6px; font-size: 0.76rem; }
.uses .tag { font-family: var(--mono); font-size: 0.72rem; padding: 2px 8px; border-radius: var(--pill); border: 1px solid transparent; }
.uses .tag.found { background: var(--ok-wash); color: var(--ink); border-color: var(--ok); }
.uses .tag.missing { background: var(--crit-wash); color: var(--ink); border-color: var(--crit); }
.live { position: sticky; top: 70px; }
.live .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.live .right { margin-left: auto; display: flex; gap: 8px; }
.live-status { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.live-status b { font-family: var(--mono); font-weight: 500; overflow-wrap: anywhere; }
.live-hint { padding: 8px 16px 0; margin: 0; }
.live .preview-body { border-top: 1px solid var(--line); margin-top: 8px; }
.live .badge-row { padding: 8px 16px 0; }
.live .trust { margin: 12px 16px 16px; }
.rule { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.rule .dot { margin-top: 6px; }
.rule b { font-family: var(--display); }
.rule ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 0.88rem; }
.review { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 0.9rem; margin: 0; }
.review dt { color: var(--muted); } .review dd { margin: 0; overflow-wrap: anywhere; }
.review dd.mono { font-family: var(--mono); font-size: 0.84rem; }
.add-foot { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.add-foot .spacer { flex: 1; }
.add-issues { margin: 12px 16px 16px; }
tr.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { from { background: var(--accent-wash); } to { background: transparent; } }

/* ---------- secret boxes ---------- */
.secret { position: relative; display: inline-flex; width: 100%; }
.secret > input, .secret > textarea { width: 100%; padding-right: 38px; }
.secret > textarea { font-family: var(--mono); font-size: 0.8rem; line-height: 1.45; }
.secret > textarea.masked { -webkit-text-security: disc; }
.secret .eye { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.secret .eye:hover, .secret .eye[aria-pressed="true"] { color: var(--accent); background: var(--accent-wash); }
.filters .secret { width: auto; }
.filters .secret > input { width: 340px; }

/* ---------- checkbox rows ---------- */
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink); margin-right: 10px; }

/* ---------- phones ----------
   One column, the nav on its own scrolling line, rows as two-line cards, tables as stacked cards
   where the row is the unit (incidents, systems, channels) and a sideways scroll elsewhere. */
@media (max-width: 700px) {
  .topbar-inner { padding: 0 14px; min-height: 52px; gap: 0 10px; }
  .topbar-right { gap: 8px; }
  #ticker { display: none; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; padding: 0 0 8px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: 6px 12px; font-size: 0.9rem; }
  .nav .long { display: none; }
  .nav .short { display: inline; }
}
@media (max-width: 640px) {
  .wrap { padding: 14px 14px 72px; }
  .hero { padding: 16px 18px; margin-bottom: 14px; }
  .hero .title { font-size: 1.4rem; }
  .hero .side { width: 100%; }
  .hero .fleet-url { width: 100%; }
  .hero .fleet-url code { max-width: none; flex: 1; }
  .search { font-size: 1rem; }              /* under 16px, iOS zooms the page on focus */
  .filters .search, .filters select.search, .filters .secret, .filters .secret > input { width: 100%; max-width: none !important; } /* the inline caps are for wide screens */
  .filters .spacer { display: none; }
  .statusline { gap: 8px 14px; margin-bottom: 14px; }
  .head-actions { margin-left: 0; flex-wrap: wrap; }
  .target-head { gap: 8px 12px; }
  .target-head h1 { flex-wrap: wrap; font-size: 1.35rem; }
  h1 { font-size: 1.35rem; }
  .group-head { padding: 10px 14px; gap: 8px; }
  .group-head .right code { display: none; }
  /* a row becomes a card: state and name on the first line, summary and age on the second */
  .row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "state name since" "summary summary summary"; gap: 2px 10px; padding: 10px 14px; }
  .row .state { grid-area: state; }
  .row .name { grid-area: name; }
  .row .since { grid-area: since; }
  .row .summary { grid-area: summary; display: block; font-size: 0.84rem; padding-left: 0; }
  .row .summary:empty { display: none; }
  .row .hist, .row .actions { display: none; }
  .row.compact { grid-template-areas: "state name since"; }
  .panel-head { padding: 10px 14px; }
  .panel-head .right { flex-basis: 100%; margin-left: 0; text-align: left; }
  .live .panel-head .right, .panel-head .right:has(.btn) { flex-basis: auto; margin-left: auto; text-align: right; }
  .panel-body { padding: 14px; }
  .kv, .review { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dt, .review dt { margin-top: 10px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .kv dt:first-child, .review dt:first-child { margin-top: 0; }
  .samples li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t state lat" "sum sum sum"; gap: 2px 10px; }
  .samples li > :nth-child(1) { grid-area: t; }
  .samples li > :nth-child(2) { grid-area: state; }
  .samples li > :nth-child(3) { grid-area: sum; font-size: 0.84rem; }
  .samples li > :nth-child(4) { grid-area: lat; }
  .urlbox { padding-left: 10px; }
  .badge-row .urlbox.grow { min-width: 0; flex-basis: 100%; }
  th, td { padding: 9px 12px; }
  .foot { gap: 6px 16px; }
  .toast { left: 14px; right: 14px; transform: none; text-align: center; bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* the editor */
  .add-head { gap: 8px 12px; }
  .add-cancel { margin-left: auto; }
  .add-toolbar, .setchips, .add-purpose { padding-left: 14px; padding-right: 14px; }
  .add-foot { padding: 10px 14px; flex-wrap: wrap; }
  .add-foot .small { display: none; }
  .rail { gap: 6px; }
  .rail button { padding: 8px 10px; gap: 8px; }
  .rail .s { display: none; }
  .types { grid-template-columns: 1fr 1fr; gap: 8px; }
  .type { padding: 12px; }
  .pop { position: fixed; left: 14px; right: 14px; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); min-width: 0; z-index: 45; box-shadow: var(--shadow-hero); }
  .cred-menu { position: fixed; left: 14px; right: 14px; top: 8px; width: auto; z-index: 45; box-shadow: var(--shadow-hero); }
  .cred-menu ul { max-height: 40vh; }
  .preview-choices { max-height: 40vh; }
  .inline > input.search { width: auto; flex: 1 1 100px; }
}

/* ---------- the live panel as a bottom sheet ----------
   Under 900px the form fills the width and the live result would land below every field, so it
   becomes a sheet pinned to the bottom: its head is always visible, the body opens on a tap or
   as soon as a run has something to show. */
@media (max-width: 900px) {
  .add { padding-bottom: 72px; }
  .live { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 25; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; box-shadow: 0 -12px 32px rgba(10, 22, 49, 0.22); max-height: 65vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
  .live .panel-head { cursor: pointer; flex-wrap: nowrap; user-select: none; }
  .live .panel-head h2::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--muted); margin-right: 2px; transition: transform 0.18s var(--ease); }
  .live.open .panel-head h2::before { transform: rotate(180deg); }
  .live #live-body { display: none; overflow: auto; }
  .live.open #live-body { display: block; }
}

/* ---------- touch ---------- */
@media (pointer: coarse) {
  .btn.icon { width: 40px; height: 40px; }
  .btn, .chip { min-height: 40px; }
  .row .actions .btn { opacity: 1; }
  .nav a { padding-top: 9px; padding-bottom: 9px; }
  .rail button, .type, .choice, .setchip { min-height: 40px; }
}

/* ---------- team sections on the overview ---------- */
.teamhead { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; }
.teamhead h2 { font-family: var(--display); font-size: 1.05rem; }
.teamhead .line { flex: 1; height: 1px; background: var(--line-strong); }

/* ---------- who is signed in ---------- */
.userchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--pill); padding: 4px 6px 4px 4px; font-size: 0.82rem; margin: 0; }
.userchip .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-mid); color: #fff; font-family: var(--display); font-weight: 700; font-size: 0.72rem; display: grid; place-items: center; }
.userchip .who { font-weight: 600; color: var(--ink); }
.userchip .role { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.userchip .out { border: 0; background: transparent; color: var(--accent); font-weight: 600; font-size: 0.8rem; padding: 2px 6px; cursor: pointer; }
.userchip .out:hover { text-decoration: underline; }
#login .field { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-weight: 600; color: var(--ink-2); }
#login .field .search { width: 100%; }

/* ---------- team switcher in the top bar ---------- */
.team-switch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--pill); padding: 4px 12px; font-weight: 600; font-size: 0.84rem; color: var(--ink); }
.team-switch .lbl { color: var(--muted); font-weight: 500; }
.team-switch select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 2px 18px 2px 0; cursor: pointer; max-width: 200px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 5px center, right 0 center; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------- pills: team, role, scope ---------- */
.pill { display: inline-block; border-radius: var(--pill); padding: 1px 9px; font-size: 0.74rem; font-weight: 600; font-family: var(--mono); border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.pill.team { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--line)); color: var(--accent); background: var(--accent-wash); }
.pill.inst { border-style: dashed; }
.pill.scope { background: var(--surface-3); }
.pill.role { color: var(--ink); }
.pill.admin { background: var(--brand-night); color: #fff; border-color: var(--brand-night); }
.pill.off { opacity: 0.6; text-decoration: line-through; }
.dim { opacity: 0.55; }
.notice.info { border-left-color: var(--brand-primary); }
.notice.warn { border-left-color: var(--warn); }
.notice p:last-child { margin-bottom: 0; }
.panel.warn-edge { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
@media (max-width: 620px) { .two { grid-template-columns: minmax(0, 1fr); } }
select.search { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------- the configuration area: a real navigation on the left ---------- */
.cfg { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.cfg-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 8px; position: sticky; top: 74px; }
.cfg-nav .scope { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); margin-bottom: 10px; font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.cfg-nav .scope select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 0 22px 0 0; width: 100%; cursor: pointer; text-overflow: ellipsis; }
.cfg-nav .scope .caret { position: absolute; right: 10px; top: 10px; color: var(--muted); font-size: 0.7rem; pointer-events: none; }
.cfg-nav .scope small { display: block; font-weight: 400; color: var(--muted); font-size: 0.74rem; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-nav h3 { padding: 10px 10px 4px; }
.cfg-nav-list a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 600; font-size: 0.88rem; }
.cfg-nav-list a:hover { background: var(--accent-wash); color: var(--ink); text-decoration: none; }
.cfg-nav-list a .tnum { margin-left: auto; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.cfg-nav-list a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.cfg-nav-list a[aria-current="page"] .tnum { color: var(--accent-ink); opacity: 0.8; }
.cfg-nav-select { display: none; width: 100%; }
.cfg-main { min-width: 0; }
.cfg-main .statusline { margin-top: 0; }
.cfg-main .statusline .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cfg-main .panel + .panel, .cfg-main .panel + .notice, .cfg-main .notice + .panel { margin-top: 14px; }
@media (max-width: 820px) {
  .cfg { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cfg-nav { position: static; padding: 10px; }
  .cfg-nav .scope { margin-bottom: 8px; }
  .cfg-nav-list { display: none; }
  .cfg-nav-select { display: block; }
}
@media (max-width: 640px) { .cfg-main .statusline .right { margin-left: 0; flex-basis: 100%; } }

/* teams, one card each */
.tcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.tcard + .tcard { margin-top: 12px; }
.tcard .th { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tcard .th h2 { font-size: 1.02rem; }
.tcard .th .right { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tcard .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); font-family: var(--mono); }
.tcard .field input.search { max-width: 420px; }

/* the one time a token is shown */
.token-once { border: 1px solid color-mix(in srgb, var(--ok) 50%, var(--line)); background: var(--ok-wash); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.86rem; }
.token-once .tk { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.token-once code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.86rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-once .use { margin-top: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: 0.8rem; color: var(--ink-2); }
.token-once .use code { font-size: 0.78rem; padding: 4px 8px; }
@media (max-width: 640px) { .token-once .use { grid-template-columns: minmax(0, 1fr) auto; } .token-once .use > span { grid-column: 1 / -1; margin-top: 4px; } }
.radio { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; }
.radio label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.radio label small { color: var(--muted); }

/* members of a team */
.members { list-style: none; margin: 0; padding: 0; }
.members li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.members li:last-child { border-bottom: 0; }
.members .u { font-weight: 600; min-width: 0; }
.members .u small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.members .btn.ghost { visibility: hidden; }
@media (max-width: 640px) { .members li { grid-template-columns: minmax(0, 1fr) auto; } .members li .btn { grid-column: 2; } }

/* the audit trail */
table.audit td:first-child { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
table.audit td.detail { color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }

/* inline editing of a user row */
tr.editing td { background: var(--surface-2); }
.userform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.userform .search { width: 200px; }
.userform .secret { width: 220px; }
.userform .secret > input { width: 100%; }

/* ---------- acknowledged: known, being handled, not shouting ---------- */
:root { --ack: #5b6f9a; --ack-wash: rgba(91, 111, 154, 0.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ack: #93a7d3; --ack-wash: rgba(147, 167, 211, 0.18); } }
:root[data-theme="dark"] { --ack: #93a7d3; --ack-wash: rgba(147, 167, 211, 0.18); }
.d.acknowledged, .state.acknowledged .d { background: var(--ack); }
.state.acknowledged { color: var(--ack); }
.row.is-ack { border-color: color-mix(in srgb, var(--ack) 40%, var(--line)); }
.notice.ack { border-color: color-mix(in srgb, var(--ack) 50%, var(--line)); background: var(--ack-wash); }
.pill.ack { background: var(--ack-wash); color: var(--ack); border-color: color-mix(in srgb, var(--ack) 45%, var(--line)); }
dialog.ack { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-hero); padding: 0; width: min(520px, 92vw); }
dialog.ack::backdrop { background: rgba(10, 22, 49, 0.45); }
dialog.ack .panel-body { display: flex; flex-direction: column; gap: 12px; }
dialog.ack .radio { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.88rem; }
dialog.ack .radio label { display: inline-flex; gap: 5px; align-items: center; }
.timeline .d.ack { background: var(--ack); }

/* ---------- discovery kinds in the add wizard: section headings, toggles, the host checklist ---------- */
.fh { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); margin: 6px 0 -4px; }
.fh:first-child { margin-top: 0; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.toggles label, .field .toggles label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 0.86rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.hostlist-head { justify-content: space-between; margin-bottom: 6px; }
.linkish { border: 0; background: transparent; padding: 0; font: inherit; font-size: 0.8rem; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover, .linkish:focus-visible { color: var(--ink); }
.hostlist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; background: var(--surface-2); }
.hostrow, .field .hostrow { display: grid; grid-template-columns: auto minmax(12ch, max-content) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 4px 0; cursor: pointer; font-size: 0.86rem; font-weight: 500; color: var(--ink); }
.hostrow .ip { font-family: var(--mono); font-size: 0.84rem; }
.hostrow .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hostrow .rtt { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 620px) { .hostrow, .field .hostrow { grid-template-columns: auto minmax(0, 1fr) auto; } .hostrow .nm { grid-column: 2 / 4; margin-left: 24px; } }

/* ---------- what a look-up found, as a checklist: hosts of a sweep, repositories of an owner ---------- */
.ticklist-head { justify-content: space-between; margin-bottom: 6px; }
.ticklist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; background: var(--surface-2); }
.hostrow, .field .hostrow { display: grid; grid-template-columns: auto minmax(12ch, max-content) minmax(0, 1fr) max-content max-content; gap: 10px; align-items: center; margin: 0; padding: 4px 0; cursor: pointer; font-size: 0.86rem; font-weight: 500; color: var(--ink); }
.hostrow .how { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); white-space: nowrap; }
.repolrow, .field .repolrow { display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; padding: 4px 0; cursor: pointer; font-size: 0.86rem; font-weight: 500; color: var(--ink); }
.repolrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; }
.repolrow .det { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; font-weight: 400; }
.repolrow .mark { font-size: 0.7rem; padding: 1px 7px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 620px) {
  .hostrow, .field .hostrow { grid-template-columns: auto minmax(0, 1fr) max-content; }
  .hostrow .nm { grid-column: 2 / 4; margin-left: 24px; }
  .hostrow .how { grid-column: 2; margin-left: 24px; }
  .repolrow, .field .repolrow { grid-template-columns: auto minmax(0, 1fr); }
  .repolrow .det { grid-column: 2; }
}

/* ---- demo mode ------------------------------------------------------------------------
 * The banner sits under the brand bar on every page, and the sign-in page grows a card per
 * role. Both use the existing tokens, so dark mode and the light/dark toggle need nothing of
 * their own; the cards are a plain auto-fit grid, which is what makes them work down to a
 * phone without a media query. */
.demobar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 7px 16px; background: var(--warn-wash); color: var(--ink);
  border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.demobar strong { font-family: var(--display); letter-spacing: 0.02em; }
.demobar-link { color: var(--accent); }
.panel.demo { max-width: 1040px; }
.demo-intro { border-top: 1px solid var(--line); padding-top: 14px; }
.demo-intro h3, .demo-cards h4 { font-family: var(--display); }
.demo-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.demo-card { display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.demo-creds { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0;
  align-items: center; font-size: 0.86rem; }
.demo-creds dt { color: var(--muted); }
.demo-creds dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.demo-creds code { font-family: var(--mono); overflow-wrap: anywhere; }
.demo-signin { margin: 0 0 0 auto; width: 100%; }
.demo-signin .btn { width: 100%; }
.demo-tour { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.9rem; }
@media (max-width: 560px) {
  .demobar { font-size: 0.82rem; padding: 6px 12px; }
}