/* Treatlly EWS — "Modernist".
   Ported from the Early Warning System design project. Three things carry the
   look: Archivo 800 for anything structural, 2px ink rules that divide the page
   into registers, and Martian Mono reserved for measured values so a number is
   always visibly a reading. Colour marks deviation only. */

:root{
  --bg:#f2f4f7; --surface:#ffffff; --sunken:#e8ecf2;
  --ink:#101419; --ink-2:#4a5361; --ink-3:#78828f;
  --rule:#101419; --hair:#d3d9e1;

  --teal:#0e5f52; --teal-600:#0b4c42; --teal-tint:#dcede9; --on-teal:#ffffff;
  --crit:#bc3826; --crit-ink:#94291c; --crit-tint:#f9e3df;
  --warn:#d9873e; --warn-ink:#b0730b; --warn-tint:#fbeadb; --on-warn:#201e1d;
  --ok:#16785a;   --ok-ink:#0f5a43;   --ok-tint:#dcefe8;
  --field-ink:#ffffff;

  --sans:"Public Sans",system-ui,-apple-system,sans-serif;
  --head:"Archivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
}
/* The system preference decides unless a person has explicitly chosen light;
   the masthead toggle stamps data-theme and wins over both. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0b0e13; --surface:#141920; --sunken:#1b212a;
  --ink:#e8ebf0; --ink-2:#a9b2bf; --ink-3:#78828f;
  --rule:#e8ebf0; --hair:#262e39;
  --teal:#4fb3a0; --teal-600:#6cc7b6; --teal-tint:#112924; --on-teal:#08120f;
  --crit:#e8705c; --crit-ink:#f0937f; --crit-tint:#2a1512;
  --warn:#dfa83f; --warn-ink:#dfa83f; --warn-tint:#2a1d10; --on-warn:#101419;
  --ok:#3fb98c;   --ok-ink:#7ed6b4;   --ok-tint:#0f251e;
  --field-ink:#ffffff;
}}
:root[data-theme="dark"]{
  --bg:#0b0e13; --surface:#141920; --sunken:#1b212a;
  --ink:#e8ebf0; --ink-2:#a9b2bf; --ink-3:#78828f;
  --rule:#e8ebf0; --hair:#262e39;
  --teal:#4fb3a0; --teal-600:#6cc7b6; --teal-tint:#112924; --on-teal:#08120f;
  --crit:#e8705c; --crit-ink:#f0937f; --crit-tint:#2a1512;
  --warn:#dfa83f; --warn-ink:#dfa83f; --warn-tint:#2a1d10; --on-warn:#101419;
  --ok:#3fb98c;   --ok-ink:#7ed6b4;   --ok-tint:#0f251e;
  --field-ink:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wrap{max-width:1400px;margin:0 auto;padding:0 40px 96px}
.dim{color:var(--ink-3)}
.nowrap{white-space:nowrap}
.link{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.bad{color:var(--crit);font-weight:600}

/* The one uppercase device in the system: the name of a register of the page,
   set in the heading face. Never a label on an individual field. */
.eyebrow{font:800 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em}

/* ---- masthead ---------------------------------------------------------- */
.mast{position:sticky;top:0;z-index:20;display:flex;align-items:stretch;gap:34px;
  padding:0 40px;min-height:84px;background:var(--bg);
  border-bottom:2px solid var(--rule)}
.brand{display:flex;align-items:center;gap:13px;flex:none;padding:14px 0}
.brand .mark{width:34px;height:34px;flex:none}
.brand-text{display:flex;flex-direction:column;gap:3px}
.brand-name{font:800 22px/1 var(--head);letter-spacing:-.02em}
.brand .sub{font-size:12.5px;line-height:1;color:var(--ink-3);white-space:nowrap}

.tabs{display:flex;align-items:flex-end;gap:6px;flex:none}
.tabs a{display:flex;align-items:center;padding:0 4px 14px;white-space:nowrap;
  font:600 15px/1 var(--sans);color:var(--ink-2);border-bottom:3px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal)}
.mast-spacer{flex:1}
.mast-end{display:flex;align-items:center;flex:none;gap:18px;padding:12px 0}
.lastcheck{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.lastcheck .v{font:400 12.5px/1.2 var(--mono);letter-spacing:-.04em;color:var(--ink-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;font:600 14px/1.2 var(--sans);white-space:nowrap;
  padding:10px 18px;border-radius:2px;border:1px solid transparent}
.btn-primary{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.btn-primary:hover{background:var(--teal-600);border-color:var(--teal-600)}
.btn-primary[disabled]{opacity:.55;cursor:progress}
.btn-quiet{background:transparent;border-color:var(--hair);color:var(--ink-2)}
.btn-quiet:hover{border-color:var(--teal);color:var(--teal)}
.btn-danger{background:transparent;border-color:var(--crit);color:var(--crit)}
.btn-danger:hover{background:var(--crit);color:var(--field-ink)}
.btn-sm{font-size:12.5px;padding:10px 13px}
.btn-icon{width:38px;height:38px;padding:0;flex:none;background:transparent;
  border:1px solid var(--hair);border-radius:2px;display:grid;place-items:center;
  cursor:pointer}
.btn-icon:hover{border-color:var(--teal)}
.glyph{width:18px;height:18px;display:block;background:var(--ink-2)}

/* ---- glyphs ------------------------------------------------------------- */
/* Lucide (ISC), inlined rather than pulled from a CDN: four small marks are
   not worth a third-party request on every page, and masking them means they
   take their colour from the token around them in both themes. */
.glyph-api{-webkit-mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-radio-tower%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4.9%2016.1C1%2012.2%201%205.8%204.9%201.9%22%20%2F%3E%20%3Cpath%20d%3D%22M7.8%204.7a6.14%206.14%200%200%200-.8%207.5%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M16.2%204.8c2%202%202.26%205.11.8%207.47%22%20%2F%3E%20%3Cpath%20d%3D%22M19.1%201.9a9.96%209.96%200%200%201%200%2014.1%22%20%2F%3E%20%3Cpath%20d%3D%22M9.5%2018h5%22%20%2F%3E%20%3Cpath%20d%3D%22m8%2022%204-11%204%2011%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-radio-tower%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4.9%2016.1C1%2012.2%201%205.8%204.9%201.9%22%20%2F%3E%20%3Cpath%20d%3D%22M7.8%204.7a6.14%206.14%200%200%200-.8%207.5%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M16.2%204.8c2%202%202.26%205.11.8%207.47%22%20%2F%3E%20%3Cpath%20d%3D%22M19.1%201.9a9.96%209.96%200%200%201%200%2014.1%22%20%2F%3E%20%3Cpath%20d%3D%22M9.5%2018h5%22%20%2F%3E%20%3Cpath%20d%3D%22m8%2022%204-11%204%2011%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat}
.glyph-hand{-webkit-mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-pencil-line%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M13%2021h8%22%20%2F%3E%20%3Cpath%20d%3D%22m15%205%204%204%22%20%2F%3E%20%3Cpath%20d%3D%22M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-pencil-line%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M13%2021h8%22%20%2F%3E%20%3Cpath%20d%3D%22m15%205%204%204%22%20%2F%3E%20%3Cpath%20d%3D%22M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat}
.glyph-none{-webkit-mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-unplug%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m19%205%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22m2%2022%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22M6.3%2020.3a2.4%202.4%200%200%200%203.4%200L12%2018l-6-6-2.3%202.3a2.4%202.4%200%200%200%200%203.4Z%22%20%2F%3E%20%3Cpath%20d%3D%22M7.5%2013.5%2010%2011%22%20%2F%3E%20%3Cpath%20d%3D%22M10.5%2016.5%2013%2014%22%20%2F%3E%20%3Cpath%20d%3D%22m12%206%206%206%202.3-2.3a2.4%202.4%200%200%200%200-3.4l-2.6-2.6a2.4%202.4%200%200%200-3.4%200Z%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-unplug%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m19%205%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22m2%2022%203-3%22%20%2F%3E%20%3Cpath%20d%3D%22M6.3%2020.3a2.4%202.4%200%200%200%203.4%200L12%2018l-6-6-2.3%202.3a2.4%202.4%200%200%200%200%203.4Z%22%20%2F%3E%20%3Cpath%20d%3D%22M7.5%2013.5%2010%2011%22%20%2F%3E%20%3Cpath%20d%3D%22M10.5%2016.5%2013%2014%22%20%2F%3E%20%3Cpath%20d%3D%22m12%206%206%206%202.3-2.3a2.4%202.4%200%200%200%200-3.4l-2.6-2.6a2.4%202.4%200%200%200-3.4%200Z%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat}
.glyph-sun{-webkit-mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-sun%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-sun%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat}
.glyph-moon{-webkit-mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-moon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3C%21--%20%40license%20lucide-static%20v1.40.0%20-%20ISC%20--%3E%20%3Csvg%20class%3D%22lucide%20lucide-moon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat}

/* ---- refresh strip ------------------------------------------------------ */
.runstrip{display:flex;align-items:center;gap:10px;padding:10px 40px;
  background:var(--teal-tint);border-bottom:1px solid var(--hair);
  font-size:13px;color:var(--ink-2)}
.runstrip[hidden]{display:none}
.runstrip-failed{background:var(--crit-tint);color:var(--crit-ink)}
.runstrip-age{margin-left:auto;font:400 12px/1 var(--mono);letter-spacing:-.04em;
  color:var(--ink-3)}
.pulse{width:9px;height:9px;background:var(--teal);flex:none;
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ---- page lede ---------------------------------------------------------- */
.lede{display:grid;grid-template-columns:minmax(420px,1.6fr) minmax(260px,.7fr);
  gap:48px;align-items:end;padding:44px 0 26px}
.lede h1{font:800 46px/1.04 var(--head);letter-spacing:-.025em;margin:16px 0 0;
  text-wrap:pretty}
.lede p{margin:14px 0 0;font-size:16px;color:var(--ink-2);max-width:56ch;
  text-wrap:pretty}
.tally{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;
  border-left:2px solid var(--rule);padding-left:20px}
.tally b{font:500 29px/1.1 var(--mono);letter-spacing:-.05em}
.tally span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.tally .pad{padding-bottom:14px}
.t-crit{color:var(--crit)} .t-warn{color:var(--warn)}
.t-ok{color:var(--ok)}     .t-none{color:var(--ink-3)}

/* ---- filters ------------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 18px;
  border-bottom:2px solid var(--rule)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border-radius:2px;border:1px solid var(--hair);background:transparent;
  color:var(--ink-2);font:400 13px/1 var(--sans)}
.chip:hover{border-color:var(--ink-3)}
.chip .dot{width:9px;height:9px;display:block;flex:none}
.chip .n{font:500 13px/1 var(--mono);letter-spacing:-.05em}
.chip[aria-current="true"]{background:var(--teal);border-color:var(--teal);
  color:var(--on-teal)}
.chip[aria-current="true"] .dot{background:var(--bg)}
.chip[data-zero="true"]{opacity:.5}
.d-critical{background:var(--crit)} .d-warn{background:var(--warn)}
.d-stale{background:var(--ink-3)}   .d-unconfigured{background:var(--hair)}
.d-ok{background:var(--ok)}         .d-all{background:var(--teal)}

/* ---- alert bar ---------------------------------------------------------- */
/* Solid red across the content column. These are alarms that fired, were never
   acknowledged, and whose vendor has since stopped reporting — the only ones a
   person still has to close by hand. */
.alertbar{margin-top:28px;background:var(--crit);color:var(--field-ink);
  padding:26px 28px 22px}
.alertbar-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.alertbar h2{margin:0;font:500 13px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--field-ink)}
.alertbar-head .n{font:500 13px/1 var(--mono);letter-spacing:-.04em;opacity:.7}
.alertbar ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:1px;background:rgba(255,255,255,.28)}
.alertbar li{display:grid;grid-template-columns:200px 1fr auto;gap:20px;
  align-items:center;background:var(--crit);padding:13px 0}
.alertbar .who{font:800 15px/1.2 var(--head)}
.alertbar .what{font-size:14px;line-height:1.45;text-wrap:pretty}
.alertbar button{cursor:pointer;justify-self:start;font:600 12.5px/1 var(--sans);
  padding:9px 12px;background:transparent;color:var(--field-ink);
  border:1px solid rgba(255,255,255,.55);border-radius:2px}
.alertbar button:hover{background:rgba(255,255,255,.16)}

/* ---- bands -------------------------------------------------------------- */
.band{margin-top:44px}
.band-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;
  border-bottom:2px solid var(--rule)}
.band-head h2{margin:0;font:800 15px/1 var(--head);letter-spacing:.14em;
  text-transform:uppercase}
.band-head .n{font:500 13px/1 var(--mono);letter-spacing:-.04em;color:var(--ink-3)}
.band-head .hint{font-size:13px;color:var(--ink-3);font-weight:400}
.band-urgent .band-head{border-bottom-color:var(--crit)}
.band-urgent .band-head h2{color:var(--crit)}
.band-ok .band-head{border-bottom-color:var(--ok)}
.band-ok .band-head h2{color:var(--ok-ink)}
.band-warn .band-head{border-bottom-color:var(--warn)}
.band-warn .band-head h2{color:var(--warn-ink)}
.rows{display:flex;flex-direction:column;gap:2px;margin-top:2px}

/* ---- vendor row --------------------------------------------------------- */
/* One shape for every vendor. Severity changes the weight of the number and the
   room the row is given, never the layout — so the eye tracks a single set of
   columns down the whole board. */
.vrow{display:grid;align-items:center;gap:18px;
  grid-template-columns:46px minmax(150px,1.4fr) minmax(104px,.9fr)
                        minmax(0,1.8fr) 104px 152px;
  background:var(--surface);border-left:4px solid var(--hair);padding:20px 24px}
.vrow:hover{background:var(--sunken)}
.vrow[data-state="critical"]{border-left-color:var(--crit);padding:26px 24px}
.vrow[data-state="warn"]{border-left-color:var(--warn);padding:26px 24px}
.vrow[data-state="stale"]{border-left-color:var(--ink-3)}
.vrow[data-state="ok"]{border-left-color:var(--ok)}

.tile{position:relative;width:46px;height:46px;flex:none;display:grid;
  place-items:center;background:var(--sunken);border:1px solid var(--hair)}
.tile .mono{font:500 12.5px/1 var(--mono);letter-spacing:-.04em;color:var(--ink-3)}
.tile img{position:absolute;inset:0;margin:auto;width:24px;height:24px}
.tile-lg{width:64px;height:64px}
.tile-lg .mono{font:800 17px/1 var(--head)}
.tile-lg img{width:34px;height:34px}
.tile-sm{width:40px;height:40px}
.tile-sm .mono{font:800 12px/1 var(--head)}
.tile-sm img{width:20px;height:20px}

.v-id{display:flex;flex-direction:column;gap:5px;min-width:0}
.v-name{font:800 16px/1.2 var(--head);letter-spacing:-.01em;text-wrap:pretty}
.v-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.v-read{display:flex;flex-direction:column;gap:4px;min-width:0}
.v-val{font:500 21px/1.2 var(--mono);letter-spacing:-.05em;overflow-wrap:anywhere}
.vrow[data-state="critical"] .v-val{font-size:28px;color:var(--crit)}
.vrow[data-state="warn"] .v-val{font-size:28px;color:var(--warn-ink)}
.vrow[data-state="stale"] .v-val{color:var(--ink-2)}
.vrow[data-state="unconfigured"] .v-val{color:var(--ink-3)}
.v-metric{font-size:12px;color:var(--ink-3)}
.v-note{font-size:13.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}

/* ---- status pill -------------------------------------------------------- */
.pill{display:inline-block;justify-self:start;white-space:nowrap;
  font:800 11px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border:1px solid}
.pill-critical{background:var(--crit);color:var(--field-ink);border-color:var(--crit)}
.pill-warn{background:var(--warn);color:var(--on-warn);border-color:var(--warn)}
.pill-ok{background:var(--ok-tint);color:var(--ok-ink);border-color:var(--ok)}
.pill-stale{background:transparent;color:var(--ink-2);border-color:var(--ink-3)}
.pill-unconfigured{background:transparent;color:var(--ink-3);border-color:var(--hair)}
.pill-sm{font-size:10.5px;padding:6px 8px}

/* ---- provenance --------------------------------------------------------- */
/* The board's one non-negotiable claim: this number came from here. Two thirds
   of the estate is typed in by a person, and a row that hid that would be worse
   than no row. A dashed edge means nothing is connected at all. */
.src{display:flex;align-items:center;gap:10px;min-width:0}
.src-mark{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid var(--hair)}
.src-mark .glyph{width:15px;height:15px}
.src[data-kind="api"] .src-mark .glyph{background:var(--teal)}
.src[data-kind="hand"] .src-mark .glyph{background:var(--ink-2)}
.src[data-kind="none"] .src-mark{border-style:dashed}
.src[data-kind="none"] .src-mark .glyph{background:var(--ink-3)}
.src-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.src-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap}
.src-seen{font:400 11.5px/1 var(--mono);letter-spacing:-.04em;color:var(--ink-3)}
/* Inline variant, for headers and table cells. */
.srcflag{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--hair);color:var(--ink-2)}
.srcflag .glyph{width:16px;height:16px}
.srcflag[data-kind="api"] .glyph{background:var(--teal)}
.srcflag[data-kind="hand"] .glyph{background:var(--ink-2)}
.srcflag[data-kind="none"]{border-style:dashed}
.srcflag[data-kind="none"] .glyph{background:var(--ink-3)}

/* ---- vendor detail ------------------------------------------------------ */
.back{display:inline-block;margin-top:28px;font-size:13px;letter-spacing:.04em;
  color:var(--ink-2)}
.back:hover{color:var(--teal)}
.vhead{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;
  padding:18px 0 20px;border-bottom:2px solid var(--rule)}
.vhead-id{display:flex;align-items:center;gap:20px}
.vhead h1{margin:0;font:800 42px/1.02 var(--head);letter-spacing:-.03em;
  text-wrap:pretty}
.vhead p{margin:8px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.vhead-end{display:flex;align-items:center;flex-wrap:wrap;gap:10px}

/* The strip answers the page's three questions across, in order: what is the
   number, what does it mean, and what would have to be true for it to alarm. */
.strip{display:grid;border-bottom:2px solid var(--rule);
  grid-template-columns:minmax(240px,.85fr) minmax(280px,1.3fr) minmax(230px,.85fr)}
.strip-cell{padding:32px 30px}
.strip-read{padding-left:22px;border-left:4px solid var(--hair)}
.strip[data-state="critical"] .strip-read{border-left-color:var(--crit)}
.strip[data-state="warn"] .strip-read{border-left-color:var(--warn)}
.strip[data-state="stale"] .strip-read{border-left-color:var(--ink-3)}
.strip[data-state="ok"] .strip-read{border-left-color:var(--ok)}
.strip-cell + .strip-cell{border-left:1px solid var(--hair)}
.strip .eyebrow{display:block;font-size:11px;margin-bottom:16px}
.strip-val{font:500 42px/1.15 var(--mono);letter-spacing:-.055em;
  overflow-wrap:anywhere}
.strip[data-state="critical"] .strip-val{color:var(--crit)}
.strip[data-state="warn"] .strip-val{color:var(--warn-ink)}
.strip[data-state="stale"] .strip-val{color:var(--ink-2)}
.strip[data-state="unconfigured"] .strip-val{color:var(--ink-3);font-size:26px}
.strip-metric{margin-top:12px;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.strip-note{margin:0;font-size:17px;line-height:1.45;color:var(--ink);
  text-wrap:pretty}
.strip-prov{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  text-wrap:pretty}
.strip-rule{margin:0;font-size:13.5px;line-height:1.5;text-wrap:pretty}
.strip-last{border-left:1px solid var(--hair);padding:32px 0 32px 30px;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;
  margin:0}
.facts dt{color:var(--ink-3)} .facts dd{margin:0}

.vgrid{display:grid;grid-template-columns:minmax(420px,1fr) minmax(290px,330px);
  gap:44px;padding-top:40px;align-items:start}
.vmain{display:flex;flex-direction:column;gap:40px;min-width:0}
.vside{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px;
  min-width:0}
.sec-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;
  border-bottom:2px solid var(--rule)}
.sec-head h2{margin:0;font:500 13px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase}
.sec-head .n{font:500 12.5px/1 var(--mono);letter-spacing:-.04em;color:var(--ink-3)}
.sec-head .hint{font-size:13px;color:var(--ink-3)}

.panel{background:var(--surface);border:1px solid var(--hair);
  border-top:2px solid var(--rule)}
.panel > .eyebrow{display:block;padding:16px 18px 0;font-size:11px}
.panel-body{padding:16px 18px 18px}
.panel-body > :last-child{margin-bottom:0}
.panel .note{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3);
  text-wrap:pretty}

/* ---- data tables -------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;background:var(--sunken);padding:10px 14px;
  white-space:nowrap}
tbody td{padding:15px 14px;background:var(--surface);
  border-bottom:1px solid var(--hair);vertical-align:top}
tbody td.mid{vertical-align:middle}
td.val{font:500 14px/1.3 var(--mono);letter-spacing:-.04em;overflow-wrap:anywhere}
td.tight{white-space:nowrap;font-size:12px;color:var(--ink-3)}
.m-name{display:block;font-weight:600;font-size:14px}
.m-msg{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3);
  line-height:1.4;text-wrap:pretty}
.lead{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.days{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:-.04em;
  padding:6px 8px;border:1px solid}
.days-crit{background:var(--crit);color:var(--field-ink);border-color:var(--crit)}
.days-warn{background:var(--warn);color:var(--on-warn);border-color:var(--warn)}
.days-ok{background:var(--ok-tint);color:var(--ok-ink);border-color:var(--ok)}
.empty-row{background:var(--surface);border:1px solid var(--hair);border-top:0;
  padding:20px 14px;font-size:13.5px;color:var(--ink-3)}

/* ---- forms -------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.field input{font:400 14px var(--sans);padding:10px;width:100%;min-width:0;
  background:var(--bg);color:var(--ink);border:1px solid var(--hair);
  border-radius:2px;letter-spacing:0;text-transform:none}
.field input:focus-visible{border-color:var(--teal);outline-offset:0}
.field-row{display:grid;grid-template-columns:1.4fr .8fr;gap:10px}
.stack{display:flex;flex-direction:column;gap:12px}
.actions{display:flex;gap:2px;margin-top:20px}
.actions .btn{flex:1}
.actions .btn-danger{flex:none}

/* ---- credentials -------------------------------------------------------- */
.credhead,.credrow{display:grid;gap:16px;
  grid-template-columns:40px minmax(180px,1.8fr) minmax(96px,.8fr) 92px 110px 104px}
.credhead{padding:10px 18px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--sunken)}
.credrow{align-items:center;background:var(--surface);padding:13px 18px;
  border-left:4px solid var(--hair)}
.credrow:hover{background:var(--sunken)}
.credrow[data-tone="ok"]{border-left-color:var(--ok)}
.credrow[data-tone="warn"]{border-left-color:var(--warn)}
.cred-manual .credhead,.cred-manual .credrow{
  grid-template-columns:40px minmax(180px,1.6fr) minmax(0,1.7fr) 128px}
.cred-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.cred-name b{font:800 15px/1.25 var(--head);text-wrap:pretty}
.cred-name span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.cred-adapter{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  overflow-wrap:anywhere}
.cred-why{font-size:13.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}

.credgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:2px;margin-top:34px}
.credcard{background:var(--surface);border:1px solid var(--hair)}
.credcard-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 20px;background:var(--sunken);
  border-bottom:1px solid var(--hair)}
.credcard-head h2{margin:0;font:800 13px/1 var(--head);letter-spacing:.12em;
  text-transform:uppercase}
.credcard-body{padding:20px}
.credfacts{display:grid;grid-template-columns:120px 1fr;gap:10px 20px;font-size:14px;
  margin:0}
.credfacts dt{color:var(--ink-3)} .credfacts dd{margin:0}
.hr{height:1px;background:var(--hair);margin:20px 0;border:0}
.prose{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:62ch;
  text-wrap:pretty}
.callout{margin-top:34px;background:var(--surface);border:1px solid var(--hair);
  border-left:4px solid var(--hair);padding:26px}
.callout h2{margin:0 0 10px;font:800 20px/1.2 var(--head)}

.flash{padding:13px 18px;font-size:14px;margin:22px 0 0;border:1px solid;
  border-left-width:4px}
.flash-ok{background:var(--ok-tint);color:var(--ok-ink);border-color:var(--ok)}
.flash-warn{background:var(--warn-tint);color:var(--warn-ink);border-color:var(--warn)}
.flash-error{background:var(--crit-tint);color:var(--crit-ink);border-color:var(--crit)}

.empty-board{border:1px dashed var(--hair);padding:56px 26px;text-align:center;
  color:var(--ink-2);margin-top:34px}
.empty-board p{margin:0 0 10px}
.empty-board code{font-family:var(--mono);font-size:13px;background:var(--sunken);
  padding:3px 8px;letter-spacing:-.03em}

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width:1100px){
  .vgrid{grid-template-columns:1fr}
  .vside{position:static}
  .strip{grid-template-columns:1fr}
  .strip-cell + .strip-cell{border-left:0;border-top:1px solid var(--hair)}
  .strip-last{border-left:0;border-top:1px solid var(--hair);padding:32px 30px}
  .vrow,.vrow[data-state="critical"],.vrow[data-state="warn"]{
    grid-template-columns:46px minmax(140px,1fr) minmax(100px,.8fr) 104px;
    row-gap:14px}
  .v-note,.src{grid-column:2/-1}
  .credhead{display:none}
  .credrow,.cred-manual .credrow{grid-template-columns:40px 1fr;row-gap:10px}
  .credrow > :nth-child(n+3){grid-column:2}
}
@media (max-width:760px){
  .wrap,.mast,.runstrip{padding-left:20px;padding-right:20px}
  .mast{flex-wrap:wrap;gap:0 20px;min-height:0;padding-top:12px}
  .mast-end{width:100%;padding-bottom:12px;flex-wrap:wrap;gap:12px}
  .mast-spacer{display:none}
  .lede{grid-template-columns:1fr;gap:28px;padding-top:32px}
  .lede h1{font-size:32px}
  .tally{border-left:0;border-top:2px solid var(--rule);padding:16px 0 0}
  .vrow,.vrow[data-state="critical"],.vrow[data-state="warn"]{
    grid-template-columns:46px 1fr;row-gap:12px;padding:18px 16px}
  .vrow > :nth-child(n+3){grid-column:2}
  .vrow[data-state="critical"] .v-val,.vrow[data-state="warn"] .v-val{font-size:23px}
  .vhead{grid-template-columns:1fr}
  .vhead h1{font-size:30px}
  .tile-lg{width:48px;height:48px}
  .tile-lg .mono{font-size:13px}
  .alertbar li{grid-template-columns:1fr;gap:8px}
  .strip-val{font-size:32px}
  .field-row{grid-template-columns:1fr}
  thead th,tbody td{padding:12px 10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .pulse{opacity:1}
}

/* ---- auth pages --------------------------------------------------------- */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:32px 20px}
.auth-card{width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--hair);border-top:2px solid var(--rule);padding:32px 30px}
.auth-head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.auth-head h1{margin:0;font:800 20px/1.2 var(--head);letter-spacing:.02em}
.auth-head p{margin:6px 0 0;font-size:13.5px;color:var(--ink-3)}
.auth-head .expand{margin:3px 0 0;font-size:15px;color:var(--ink-2);font-weight:500}
.auth-head .strap{margin:8px 0 0;font-size:13px;color:var(--ink-3)}
.mark-lg{width:56px;height:56px;margin-bottom:16px}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.auth-form input{font:400 15px var(--sans);padding:11px;background:var(--bg);
  color:var(--ink);border:1px solid var(--hair);border-radius:2px}
.auth-form input:focus-visible{border-color:var(--teal);outline-offset:0}
.auth-form button{cursor:pointer;font:600 14px/1.2 var(--sans);padding:12px 18px;
  background:var(--teal);color:var(--on-teal);border:1px solid var(--teal);
  border-radius:2px}
.auth-form button:hover{background:var(--teal-600)}
.auth-form button[disabled]{opacity:.55;cursor:progress}
.btn-block{display:block;width:100%;text-align:center}
.hint{font-weight:400;color:var(--ink-3);font-size:12px;letter-spacing:0;
  text-transform:none;line-height:1.45}
.auth-foot{margin-top:18px;font-size:13px;color:var(--ink-3);line-height:1.5}
.auth-msg{padding:11px 14px;font-size:13.5px;margin-bottom:18px;border:1px solid;
  border-left-width:4px}
.auth-msg.error{background:var(--crit-tint);color:var(--crit-ink);border-color:var(--crit)}
.auth-msg.warn{background:var(--warn-tint);color:var(--warn-ink);border-color:var(--warn)}
.auth-details{margin-top:20px;font-size:13.5px}
.auth-details summary{cursor:pointer;color:var(--ink-3)}
.auth-details .auth-form{margin-top:14px}
/* White plate under the QR in both themes — see qr_svg() for why. */
.qr{display:flex;justify-content:center;padding:14px;background:#fff;
  border:1px solid var(--hair);margin-bottom:12px}
.qr svg{width:190px;height:190px}
.secret{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:-.03em;
  background:var(--sunken);padding:10px 12px;word-break:break-all;margin-bottom:18px}
.codes{list-style:none;margin:0 0 20px;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:8px}
.codes li{font-family:var(--mono);font-size:13px;letter-spacing:-.04em;
  background:var(--sunken);padding:8px 10px;text-align:center}