/* Argus design system (ADR-0016 "Fleet Ledger").
   Dark-first with a separately tuned light theme (not an inversion). Selection order:
   explicit choice (<html data-mode>, set by theme.js) > OS preference > dark.
   Roles: --acc interface accent · --pin changes only · ok/warn/crit/off health only.
   Text contrast targets WCAG AA (4.5:1) for body text on --bg and --panel in both themes. */
:root {
  color-scheme: dark;
  --bg: #0A0F17; --panel: #111824; --panel-2: #161F2E; --line: #222E42; --line-2: #1A2435;
  --ink: #E4EAF3; --ink-2: #B9C4D4; --mute: #8A99B0;
  --acc: #93A6FF; --acc-ink: #0A0F17; --acc-soft: #1C2442;
  --pin: #FF8F63; --pin-soft: rgba(255, 143, 99, .14);
  --ok: #3FC27F; --warn: #E8A640; --crit: #F45B61; --off: #6B7A90;
  --ok-soft: #12321F; --warn-soft: #382A0F; --crit-soft: #3F171B;
  --cell-ok: #173A27; --cell-nodata: #141C29;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  --fd: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* legacy names used by app.js / older templates */
  --fg: var(--ink); --muted: var(--mute); --card: var(--panel); --accent: var(--acc); --stale: var(--warn); --bad: var(--crit); --change: var(--pin);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    color-scheme: light;
    --bg: #F3F5F8; --panel: #FFFFFF; --panel-2: #F7F9FB; --line: #D9DFE8; --line-2: #E9EDF2;
    --ink: #121C2C; --ink-2: #2B3A50; --mute: #56657B;
    --acc: #3550C4; --acc-ink: #FFFFFF; --acc-soft: #E7EBFB;
    --pin: #C2410C; --pin-soft: #FDEDE4;
    --ok: #23804A; --warn: #A86400; --crit: #C8262E; --off: #7C8798;
    --ok-soft: #E4F3EA; --warn-soft: #FBF0DA; --crit-soft: #FCE7E7;
    --cell-ok: #CFE9D9; --cell-nodata: #EDF0F4;
    --shadow: 0 1px 2px rgba(18,28,44,.05);
  }
}
:root[data-mode="light"] {
  color-scheme: light;
  --bg: #F3F5F8; --panel: #FFFFFF; --panel-2: #F7F9FB; --line: #D9DFE8; --line-2: #E9EDF2;
  --ink: #121C2C; --ink-2: #2B3A50; --mute: #56657B;
  --acc: #3550C4; --acc-ink: #FFFFFF; --acc-soft: #E7EBFB;
  --pin: #C2410C; --pin-soft: #FDEDE4;
  --ok: #23804A; --warn: #A86400; --crit: #C8262E; --off: #7C8798;
  --ok-soft: #E4F3EA; --warn-soft: #FBF0DA; --crit-soft: #FCE7E7;
  --cell-ok: #CFE9D9; --cell-nodata: #EDF0F4;
  --shadow: 0 1px 2px rgba(18,28,44,.05);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f); -webkit-font-smoothing: antialiased; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
main { max-width: 1380px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: block; }
h1 { font: 600 30px/1.05 var(--fd); letter-spacing: .03em; text-transform: uppercase; margin: 6px 0 4px; text-wrap: balance; }
h2 { font: 600 14px/1.2 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
h3 { font: 600 15px/1.2 var(--fd); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.muted, .hint { color: var(--mute); }
.hint { font-size: 12.5px; }
.small { font-size: 12.5px; }
.mono { font-family: var(--fm); }
.num { font-variant-numeric: tabular-nums; }
.lbl { font: 600 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ---------- top bar ---------- */
.nav { display: flex; align-items: center; gap: 6px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); height: 48px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.brand { display: flex; align-items: center; gap: 9px; margin-right: 18px; color: var(--ink); font: 700 18px/1 var(--fd); letter-spacing: .16em; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.logo-mark circle { fill: var(--mute); }
.logo-mark circle.eye { fill: var(--pin); }
.tabs-main { display: flex; height: 100%; overflow-x: auto; }
.tabs-main a { display: flex; align-items: center; padding: 0 12px; color: var(--mute); font: 600 14px var(--fd); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs-main a:hover { color: var(--ink); text-decoration: none; }
.tabs-main a.on { color: var(--ink); border-bottom-color: var(--acc); }
.spacer { flex: 1; }
.user { color: var(--mute); font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant { padding: 2px 8px; border-radius: 10px; background: var(--bg); color: var(--mute); font-size: 12px; }
.theme-toggle { font-size: 12.5px; padding: 4px 10px; }
.lens { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--bg); border-bottom: 1px solid var(--line); font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.seg a, .seg button { padding: 4px 11px; color: var(--mute); background: var(--panel); border: 0; border-right: 1px solid var(--line); border-radius: 0; font: 500 12.5px var(--f); }
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg a:hover { text-decoration: none; color: var(--ink); }
.seg a[aria-current="true"], .seg button[aria-pressed="true"] { background: var(--acc-soft); color: var(--acc); }
.pillq { font: 500 12px var(--fm); background: var(--acc-soft); color: var(--acc); padding: 2px 8px; border-radius: 3px; }

/* ---------- controls ---------- */
button, .btn { font: 500 13px var(--f); padding: 6px 12px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--mute); text-decoration: none; }
button.pri, .btn.pri, .login button[type=submit] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
button.danger { color: var(--crit); }
button.link { border: 0; background: none; color: var(--acc); padding: 0; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: 0; border-color: var(--acc); }

/* ---------- surfaces ---------- */
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); }
.panel { padding: 0; }
.panel > .hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.panel > .bd { padding: 12px 16px; }
.empty { text-align: center; padding: 28px 16px; }
.empty pre { background: var(--bg); padding: 10px; border-radius: 6px; overflow: auto; text-align: left; }
.note { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--ink); border-radius: 6px; padding: 9px 12px; margin: 8px 0; }
.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.grid th, .grid td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.grid th { font: 600 12px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); background: var(--panel); }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--panel-2); }
.sev { font: 600 11px var(--fd); letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
.sev-high { background: var(--crit-soft); color: var(--crit); }
.sev-medium { background: var(--warn-soft); color: var(--warn); }
.sev-low { background: var(--panel-2); color: var(--mute); }
.finding.sev-high { box-shadow: inset 3px 0 0 var(--crit); background: var(--panel); padding: 0; }
.evidence { white-space: pre-wrap; word-break: break-all; background: var(--panel-2); padding: 8px; border-radius: 6px; max-height: 8em; overflow: auto; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; }
.steps li { padding: 3px 10px; border-radius: 12px; background: var(--panel-2); color: var(--mute); font-size: 13px; }
.steps li.on { background: var(--acc); color: #fff; }
.steps li.bad { background: var(--crit); }
.card.team, .small.team { border-left: 3px solid var(--acc); padding-left: 8px; }
.req { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.inline-form input { flex: 1 1 180px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .row2 { grid-template-columns: 1fr; } }
.svc { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.svc:last-child { border-bottom: 0; }
.svc-down { box-shadow: inset 3px 0 0 var(--crit); padding-left: 10px; }
.svc-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.finding .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.finding .actions form { margin: 0; }
.cap tr:has(+ .cap-why) td { border-bottom: 0; }
.cap .cap-why td { padding-top: 0; }
.cap .cap-over td:first-child, .cap .cap-growing td:first-child { box-shadow: inset 3px 0 0 var(--warn, #d9a441); }
.grid.compact td { padding: 6px 9px; font-size: 13px; }
.tablewrap { overflow-x: auto; }

/* ---------- status vocabulary ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--off); flex: none; }
.dot.ok { background: var(--ok); } .dot.stale, .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); }
.status, .sev { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.status::before, .sev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-online, .st-resolved, .st-active, .st-deploy-succeeded { color: var(--ok); }
.st-silent, .st-revoked, .st-open, .st-deploy-failed, .st-deploy-rolled_back { color: var(--crit); }
.st-stale, .st-acknowledged, .st-deploy-started, .st-pending { color: var(--warn); }
.sev-critical, .sev-high { color: var(--crit); } .sev-warning { color: var(--warn); } .sev-info { color: var(--mute); }
.lvl { font-variant-numeric: tabular-nums; font-family: var(--fm); font-size: 13px; }
.lvl-warn { color: var(--warn); font-weight: 600; } .lvl-hot { color: var(--crit); font-weight: 600; } .lvl-na { color: var(--mute); }
.ok { color: var(--ok); font-weight: 600; } .bad { color: var(--crit); font-weight: 600; }
.kind, .tag { font: 500 11.5px/1 var(--fm); padding: 3px 6px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.kind.chg, .tag.chg { background: var(--pin-soft); color: var(--pin); border-color: transparent; }
.badge { background: var(--pin); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.count { color: var(--mute); font-weight: 400; font-size: 16px; }

/* ---------- fleet ledger home ---------- */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ph .sub { color: var(--mute); font-size: 13.5px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 2px; color: var(--ink); box-shadow: var(--shadow); }
a.kpi:hover { border-color: var(--mute); text-decoration: none; }
.kpi b { font: 600 34px/1 var(--fd); font-variant-numeric: tabular-nums; }
.kpi span { font: 600 11.5px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.kpi.k-ok b { color: var(--ok); } .kpi.k-warn b { color: var(--warn); } .kpi.k-crit b { color: var(--crit); } .kpi.k-off b { color: var(--off); } .kpi.k-pin b { color: var(--pin); }
.home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.stack { display: grid; gap: 14px; align-content: start; }
.ledger-wrap { overflow-x: auto; padding: 10px 16px 12px; }
svg.lg { display: block; width: 100%; min-width: 760px; height: auto; }
svg.lg text { font-family: var(--fm); }
.lg-lab, .lg-name { font: 600 12px var(--fd); letter-spacing: .08em; text-transform: uppercase; fill: var(--mute); }
.lg-name { fill: var(--ink-2); }
.lg-count { fill: var(--mute); font-family: var(--fm); font-size: 10.5px; letter-spacing: 0; }
.lg-tick { font-size: 10.5px; fill: var(--mute); }
.lg-base { stroke: var(--line); stroke-dasharray: 3 3; }
.lg-stem { stroke: var(--pin); stroke-width: 1.6; }
.lg-box { fill: var(--panel); stroke: var(--line); }
.lg-pt { font-size: 10.5px; fill: var(--ink-2); }
.lg-pin.hot .lg-box { fill: var(--pin-soft); stroke: var(--pin); }
.lg-pin.hot .lg-pt { fill: var(--pin); font-weight: 600; }
.lg-pin:hover .lg-box { stroke: var(--pin); }
.lg-ok { fill: var(--cell-ok); } .lg-nodata { fill: var(--cell-nodata); } .lg-warn { fill: var(--warn); } .lg-crit { fill: var(--crit); } .lg-offline { fill: var(--off); }
a.lg-row:hover .lg-name { fill: var(--acc); }
a.lg-row:focus-visible { outline: none; }
a.lg-row:focus-visible .lg-name { fill: var(--acc); text-decoration: underline; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--mute); font-size: 12.5px; align-items: center; }
.legend i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend .l-ok { background: var(--cell-ok); } .legend .l-warn { background: var(--warn); } .legend .l-crit { background: var(--crit); } .legend .l-off { background: var(--off); } .legend .l-pin { background: var(--pin); width: 3px; }
.attn { display: grid; }
.attn a, .attn div.item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); align-items: center; }
.attn a:hover { background: var(--panel-2); text-decoration: none; }
.attn a:last-child { border-bottom: 0; }
.attn b { font-family: var(--fm); font-weight: 500; }
.attn .why { display: block; color: var(--mute); font-size: 12.5px; }
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 14px; }
.scard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; color: var(--ink); box-shadow: var(--shadow); }
.scard:hover { border-color: var(--mute); text-decoration: none; }
.scard.c-crit { border-color: var(--crit); } .scard.c-warn { border-color: var(--warn); } .scard.c-off { border-color: var(--off); }
.scard .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scard b { font-family: var(--fm); font-weight: 500; }
.m3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font: 12px var(--fm); color: var(--mute); }
.mt { margin-top: 22px; }
.meter { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--acc); }
.meter.m-warn i { background: var(--warn); } .meter.m-hot i { background: var(--crit); }
/* meter widths without inline styles: 5% steps */
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* ---------- older page components (restyled) ---------- */
.crumbs { margin: 0; color: var(--mute); }
.toolbar { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.toolbar form { display: inline; }
.range.active { background: var(--acc-soft); color: var(--acc); border-color: var(--acc); }
.legend .mark, .mark { display: inline-block; width: 2px; height: 14px; background: var(--pin); }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart { min-height: 180px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.logs { font: 12px/1.5 var(--fm); max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.logs .ln { padding: 2px 0; border-bottom: 1px solid var(--line-2); }
.logs .ln.chg { color: var(--pin); font-weight: 600; }
.logs .t { color: var(--mute); margin-right: 8px; }
.hyp { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.hyp .rank { color: var(--mute); font-weight: 700; margin-right: 4px; }
.hyp .score { float: right; font: 600 13px var(--fm); color: var(--pin); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 8px; }
.row { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: inherit; }
.tile .big { font: 600 30px var(--fd); }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 20px; }
.narrow { max-width: 460px; margin: 40px auto; }
pre.card { overflow-x: auto; white-space: pre; font: 12.5px/1.6 var(--fm); }
.error { color: var(--crit); margin: 0; }
.foot { text-align: center; color: var(--mute); font-size: 12px; padding: 24px 16px; }
.tip { position: absolute; z-index: 20; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; pointer-events: none; max-width: 360px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ---------- sign-in ---------- */
.note.error-note { background: var(--crit-soft); border-color: var(--crit); }
.note.ok-note { background: var(--ok-soft); border-color: var(--ok); }
svg.lg.auth-art { min-width: 0; max-width: 520px; }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth .side { background: var(--panel); border-left: 1px solid var(--line); display: grid; align-content: center; gap: 16px; padding: 48px; }
.auth .side h2 { font: 600 34px/1.02 var(--fd); color: var(--ink); letter-spacing: .02em; max-width: 16ch; }
.auth .side p { color: var(--ink-2); margin: 0; max-width: 46ch; }
.login { width: 100%; max-width: 380px; margin: auto; padding: 40px 16px; display: grid; gap: 14px; }
.login form { display: grid; gap: 12px; }
.login label { display: grid; gap: 5px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.login input { padding: 9px 10px; }
.login button[type=submit] { justify-content: center; padding: 10px; }
.login .brand { margin: 0 0 8px; }

@media (max-width: 1100px) { .home { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .split, .charts { grid-template-columns: 1fr; } .auth { grid-template-columns: 1fr; } .auth .side { display: none; } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .user { display: none; } .nav { gap: 2px; } .brand span { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- public website ---------- */
.site-nav { display: flex; align-items: center; gap: 10px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); max-width: 1180px; margin: 0 auto; }
.site-nav nav { display: flex; gap: 20px; margin-left: 8px; }
.site-nav nav a { color: var(--mute); font-size: 14px; }
.site-nav nav a:hover { color: var(--ink); text-decoration: none; }
.site { max-width: 1180px; }
.s-hero { display: grid; gap: 18px; padding: 40px 0 28px; }
.s-hero h1 { font-size: clamp(40px, 6.2vw, 78px); line-height: .96; max-width: 15ch; margin: 0; }
.s-hero h1 .pin, h1 .pin { color: var(--pin); }
.lede { font-size: 17.5px; color: var(--ink-2); max-width: 64ch; margin: 0; line-height: 1.55; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn.big { padding: 10px 18px; font-size: 15px; }
.hero-art { margin: 12px 0 0; }
.s-sec { padding: 52px 0 8px; display: grid; gap: 18px; border-top: 1px solid var(--line-2); margin-top: 40px; }
.s-sec h2 { font: 600 clamp(28px, 3.6vw, 42px)/1.02 var(--fd); color: var(--ink); letter-spacing: .01em; max-width: 24ch; margin: 0; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards3 .card { display: grid; gap: 8px; align-content: start; }
.cards3 h3 { font-size: 17px; }
.cards3 p { margin: 0; color: var(--ink-2); }
.soon { display: inline-block; font: 600 10.5px/1 var(--fm); letter-spacing: .05em; text-transform: uppercase; color: var(--acc); background: var(--acc-soft); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.roadmap { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--ink-2); max-width: 70ch; font-size: 15.5px; }
.s-cta { justify-items: start; padding-bottom: 20px; }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } .site-nav nav { display: none; } }

/* ---------- inventory & server page ---------- */
.filterbar { justify-content: flex-start; }
.filterbar input[type=search] { flex: 1; min-width: 200px; max-width: 360px; }
.grid.flat { border: 0; border-radius: 0; box-shadow: none; }
.cellm { min-width: 96px; }
.cellm .meter { max-width: 80px; }
h1.host-name { font: 600 26px/1.1 var(--fm); text-transform: none; letter-spacing: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
h1.host-name .status { font-family: var(--f); }
#host .panel { margin-bottom: 4px; }

/* ---------- incidents ---------- */
h1.inc-title { text-transform: none; font: 600 26px/1.15 var(--f); letter-spacing: -.01em; max-width: 40ch; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions form { display: flex; gap: 6px; align-items: center; }
.cause { border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; display: grid; gap: 6px; margin-bottom: 10px; background: var(--panel-2); }
.cause.best { border-color: var(--pin); background: var(--pin-soft); }
.cause-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cause .score { font: 600 15px var(--fm); color: var(--pin); float: none; }
.meter.m-pin i { background: var(--pin); }
.factor { font: 12px/1.5 var(--fm); color: var(--mute); }
.tline { list-style: none; margin: 0; padding: 8px 16px 12px; display: grid; }
.tline li { display: grid; grid-template-columns: 140px 14px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.tline li:last-child { border-bottom: 0; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); }
.tl-opened, .tl-alert, .tl-alert_fired { background: var(--crit); }
.tl-acknowledged, .tl-ack, .tl-snoozed { background: var(--warn); }
.tl-resolved, .tl-resolve { background: var(--ok); }
.tl-notified, .tl-repaged, .tl-notification { background: var(--acc); }
.cause:not(.best) .score { color: var(--ink-2); }
.cause:not(.best) .meter.m-pin i { background: var(--mute); }

/* ---------- forms on rules / admin / deploys ---------- */
main > h1 + .grid, main > h2 + .grid, main > .grid { margin-bottom: 18px; }
main > h2 { margin-top: 26px; }
form.stack { display: grid; gap: 12px; max-width: 640px; }
form.stack label, .card form label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 14px; display: grid; gap: 10px; margin: 0; }
legend { padding: 0 6px; font-weight: 600; }
legend label { display: inline-flex !important; gap: 6px; align-items: center; }
code { font: 12.5px var(--fm); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }
pre.card { background: var(--panel-2); }
select { padding: 6px 8px; }
.inline input[type=email] { min-width: 260px; }

/* ---------- add a server ---------- */
[hidden] { display: none !important; }
.steps-v { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 860px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: grid; gap: 12px; }
.step.on { border-color: var(--acc); }
.step.done { opacity: .75; }
.step-h { display: flex; align-items: center; gap: 10px; }
.step-h .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--fm); background: var(--acc-soft); color: var(--acc); }
.step.done .num { background: var(--ok-soft); color: var(--ok); }
.step-h .hint { margin-left: auto; font-family: var(--fm); }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.choice { display: flex !important; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; cursor: pointer; background: var(--panel-2); }
.choice span { display: grid; gap: 2px; }
.choice:has(input:checked) { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.choice.off { opacity: .55; cursor: not-allowed; }
.cmdbox { position: relative; }
.cmdbox pre { margin: 0; background: #070B11; color: #DCE6F2; border: 1px solid var(--line); border-radius: 7px; padding: 14px 16px; padding-right: 86px; white-space: pre-wrap; word-break: break-all; font-size: 12.5px; line-height: 1.6; }
.cmdbox button { position: absolute; top: 8px; right: 8px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.checks li > span:last-child { display: grid; gap: 2px; }
.checks .ck { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--acc); margin-top: 2px; animation: spin 1s linear infinite; }
.checks li.ok .ck { animation: none; border-color: var(--ok); background: var(--ok); }
@keyframes spin { to { transform: rotate(360deg); } }
details summary { cursor: pointer; color: var(--acc); font-size: 13px; }

/* ---------- explain this window ---------- */
svg.lg[data-from] { cursor: crosshair; touch-action: pan-y; }
.lg-brush { fill: var(--pin-soft); stroke: var(--pin); stroke-dasharray: 4 3; pointer-events: none; }
.explain-q { display: inline-flex; gap: 6px; }
.explain-q button { font-size: 12px; padding: 3px 9px; }
.xp { padding: 10px 0 4px; border-bottom: 1px solid var(--line-2); display: grid; gap: 8px; }
.xp:last-of-type { border-bottom: 0; }
.xp-h { font-size: 14px; }
#host .explain { margin-top: 10px; }

/* Log search */
.panel > .hd.logform { justify-content: flex-start; }
.logform input[type=search] { flex: 1 1 260px; max-width: none; }
.logform select { max-width: 190px; }
.logform .window { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.lvwrap { border-bottom: 1px solid var(--line-2); }
.lvsum { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
svg.lv { display: block; width: 100%; height: 60px; }
.lv-hit { fill: transparent; }
.lv-bar { fill: var(--acc); opacity: .75; }
.lv-bar.chg { fill: var(--pin); }
svg.lv a:hover .lv-bar { opacity: 1; }
svg.lv a:hover .lv-hit { fill: var(--acc-soft); }
.lvax { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 2px; }
.loglines { font-size: 12.5px; }
.loglines .ll { display: grid; grid-template-columns: 116px 150px 96px minmax(0, 1fr); gap: 10px; padding: 4px 16px; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.loglines .ll:hover { background: var(--panel-2); }
.loglines .ll.chg { box-shadow: inset 3px 0 0 var(--pin); }
.loglines .ll.chg .m { color: var(--pin); }
.loglines .t { color: var(--mute); white-space: nowrap; }
.loglines .h, .loglines .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loglines .s { color: var(--mute); }
.loglines .m { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.loglines mark { background: var(--acc-soft); color: var(--acc); border-radius: 2px; padding: 0 1px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
@media (max-width: 760px) {
  .loglines .ll { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; }
  .loglines .m { grid-column: 1 / -1; }
  .logform select, .logform input[type=search] { max-width: none; flex: 1 1 140px; }
}

/* Sign-up, account and onboarding */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login .sub { color: var(--ink-2); margin: -4px 0 4px; }
.login .fine { font-size: 12px; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 58px; }
.pw .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12.5px; }
.hint.ok { color: var(--ok); }
input[aria-invalid="true"] { border-color: var(--crit); outline-color: var(--crit); }
button.busy { opacity: .75; cursor: progress; }
.next-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: ns; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; }
.next-steps li::before { content: counter(ns); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--fm); background: var(--acc-soft); color: var(--acc); }
.next-steps b { color: var(--ink); font-size: 14px; }
.next-steps span { color: var(--mute); font-size: 13px; }
a.user { color: var(--ink-2); font-size: 13px; }
a.user.on, a.user:hover { color: var(--ink); }
.verifybar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 7px 16px; background: var(--warn-soft); border-bottom: 1px solid var(--warn); font-size: 13px; color: var(--ink); }
.verifybar form { margin: 0; }
.since { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--acc-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.onboard { margin-bottom: 14px; border-color: var(--acc); }
.onboard > .hd h3 .count { font: 500 12.5px var(--fm); color: var(--mute); margin-left: 6px; }
.ob-meter { flex: 1; max-width: 220px; }
.onboard > p.bd { margin: 0; color: var(--ink-2); }
.ob-steps { list-style: none; margin: 0; padding: 4px 16px 12px; display: grid; }
.ob { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.ob:last-child { border-bottom: 0; }
.ob .ck { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line); }
.ob.done .ck { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 3px var(--panel); }
.ob.wait .ck { border-color: var(--acc); border-top-color: transparent; animation: spin 1.2s linear infinite; }
.ob.done b { color: var(--mute); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--line); }
.ob p.hint { margin: 3px 0 0; max-width: 70ch; }
.ob .btn { white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
.welcome { display: grid; gap: 4px; background: var(--acc-soft); border: 1px solid var(--acc); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.welcome b { font-size: 15px; }
.welcome span { color: var(--ink-2); }
.welcome a { font-size: 13px; justify-self: start; }
main.narrow { max-width: 760px; }
main.narrow .panel { margin-bottom: 14px; }
label.check { display: grid !important; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
label.check input { margin-top: 3px; }
label.check b { color: var(--ink); }
label.check .hint { display: block; }
.funnel { display: grid; gap: 10px; }
.fstep { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 2fr) 120px; gap: 12px; align-items: center; }
.fstep .fl { display: grid; }
.fstep .fbar .meter { width: 100%; }
.fstep .fn { text-align: right; font-variant-numeric: tabular-nums; }
.kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
@media (max-width: 640px) {
  .ob { grid-template-columns: 22px minmax(0, 1fr); }
  .ob .btn { grid-column: 2; justify-self: start; }
  .fstep { grid-template-columns: 1fr 80px; }
  .fstep .fbar { grid-column: 1 / -1; grid-row: 2; }
  .kpis3 { grid-template-columns: 1fr; }
}
#platform .panel { margin-bottom: 14px; }

/* ---------- legal pages, support form, footer links, danger zone ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); line-height: 1.6; color: var(--ink-2); }
.legal h1 { font: 600 clamp(32px, 4.6vw, 48px)/1.02 var(--fd); color: var(--ink); margin: 8px 0 6px; }
.legal h2 { font: 600 22px/1.2 var(--fd); color: var(--ink); margin: 34px 0 8px; letter-spacing: .01em; }
.legal h3 { font-size: 15px; color: var(--ink); margin: 18px 0 4px; }
.legal p, .legal li { font-size: 15px; max-width: 70ch; }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal .summary { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 16px 0 8px; }
.legal .summary ul { margin: 6px 0 0; }
.legal .tablewrap { margin: 10px 0; }
.legal .grid td, .legal .grid th { font-size: 13.5px; vertical-align: top; }
.legal form.stack { max-width: 560px; }
.legal textarea { min-height: 160px; resize: vertical; width: 100%; }
.foot nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.foot nav a { color: var(--mute); }
.foot nav a:hover { color: var(--ink); }
.panel.danger { border-color: var(--crit); }
.panel.danger > .hd h3 { color: var(--crit); }
button.danger-solid { background: var(--crit); border-color: var(--crit); color: #fff; font-weight: 600; }
.login .consent { font-size: 12px; color: var(--mute); margin: 0; }
.policies { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.policy textarea { width: 100%; font: 12.5px var(--fm); }
.policy .hd-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.qform { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)) auto; gap: 6px; }
.qform input { width: 100%; font: 12.5px var(--fm); }
.procs { gap: 18px; }
.procs td.num { text-align: right; white-space: nowrap; }
.risk-list { list-style: none; margin: 0; padding: 8px 16px 12px; display: grid; gap: 6px; }
.conf { font: 600 11px/1 var(--fm); text-transform: uppercase; letter-spacing: .04em; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); }
.conf.c-high { color: var(--crit); border-color: var(--crit); }
.conf.c-medium { color: var(--warn); border-color: var(--warn); }
.conf.c-low { color: var(--mute); }
.fc { padding: 8px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 4px; }
.fc:last-child { border-bottom: 0; }
.psi { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; padding-bottom: 0; }
.psi-item { font: 12.5px var(--fm); }
.psi-item.bad { color: var(--crit); font-weight: 600; }
/* ---------- service detail page (architecture/service-integrations.md §8) ---------- */
.checks { list-style: none; margin: 0; padding: 0; }
.chk-row { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.chk-row:last-child { border-bottom: 0; }
.chk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--off); }
.chk-ok { background: var(--ok); } .chk-warn { background: var(--warn); } .chk-bad { background: var(--crit); }
.chk-off { background: transparent; box-shadow: inset 0 0 0 2px var(--off); }
h2.sec { margin: 20px 0 8px; font-size: 15px; }
.schart { min-height: 180px; }
.schart .lg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--mute); margin-top: 4px; }
.schart .lg i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; }
.split3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.svc-link { font-weight: 600; }
.caps { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cap { font: 500 11.5px/1 var(--f); padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--mute); }
.cap.on { color: var(--ok); border-color: var(--ok); } .cap.warn { color: var(--warn); border-color: var(--warn); }
@media (max-width: 900px) { .split3 { grid-template-columns: 1fr; } }