/* ops.css — the operator surfaces, one design system.
   Dark by default because these screens are read at 03:00 beside a terminal. Numbers are the
   subject of every page here, so they get tabular figures and never reflow when they change. */
:root{
  --bg:#0b0d10; --panel:#12151a; --panel-2:#171b21; --line:#232932; --line-2:#2f3742;
  --ink:#e8ecf2; --ink-2:#a4b0c0; --ink-3:#6b7887;
  --up:#3ddc97; --down:#ff6b6b; --warn:#ffc857; --info:#5aa9e6; --accent:#7c9cff;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:10px; --sp:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* header / status strip */
.hdr{position:sticky;top:0;z-index:20;background:rgba(11,13,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:10px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hdr h1{font-size:15px;font-weight:600;margin:0;letter-spacing:.2px}
.hdr .sub{color:var(--ink-3);font-size:12px}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:5px 11px;border-radius:7px;color:var(--ink-2);font-size:13px}
.nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.nav a.on{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}

/* status pills */
.strip{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--ink-2)}
.pill b{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.dot.ok{background:var(--up)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--down)}

main{padding:20px;max-width:1500px;margin:0 auto}
.grid{display:grid;gap:var(--sp);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* min-width:0 IS THE WHOLE BUG, AND IT IS ONE PROPERTY. A grid item defaults to min-width:auto,
   which means it REFUSES TO SHRINK BELOW ITS CONTENT. In a repeat(auto-fit,minmax(320px,1fr)) grid
   a card holding a nowrap status badge therefore grows wider than its track, the name column
   collapses into slivers to make room, and the badge is pushed off the right edge and clipped.
   OPERATOR FINDING 2026-08-29: the macro brain's RED state was the badge being cut off. On a
   protection panel that is a visibility defect and not cosmetics -- a status you cannot see is a
   status you do not have. This one property fixes the class for every card, present and future. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0}

/* ONE MONITOR PER ROW: name left, detail inline beneath it, status right, NEVER CLIPPED.
   The name flexes and may wrap; the status does not shrink and does not wrap. min-width:0 on the
   name is what lets it give way instead of shouldering the badge out of the card. */
/* flex-wrap is the difference between "fits today" and "never clipped". min-width:0 lets the CARD
   shrink to its track, but a nowrap status badge that is still wider than what remains has to go
   somewhere, and without wrap that somewhere is past the right edge. With wrap it drops to its own
   line, right-aligned, whole and readable. A status that moves is fine; a status that disappears
   is the defect. */
.rowline{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:8px 10px;border-bottom:1px solid var(--line)}
.rowline:last-child{border-bottom:none}
.rowline .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.rowline .st{flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap}
.card>h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-3);
  margin:0 0 12px}
.card.wide{grid-column:1/-1}
.big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;letter-spacing:-.5px}
.sub2{color:var(--ink-3);font-size:12px;margin-top:3px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--ink-3);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;padding:6px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-family:var(--mono);
  border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.tag.ok{color:var(--up);border-color:rgba(61,220,151,.35)}
.tag.bad{color:var(--down);border-color:rgba(255,107,107,.35)}
.tag.warn{color:var(--warn);border-color:rgba(255,200,87,.35)}
.tag.info{color:var(--info);border-color:rgba(90,169,230,.35)}
.tag.mute{color:var(--ink-3)}

.note{color:var(--ink-3);font-size:12px;line-height:1.55}
.empty{color:var(--ink-3);font-size:13px;padding:18px;text-align:center;border:1px dashed var(--line-2);border-radius:8px}
.err{color:var(--down);font-family:var(--mono);font-size:12px;white-space:pre-wrap;
  background:rgba(255,107,107,.07);border:1px solid rgba(255,107,107,.3);border-radius:8px;padding:10px 12px}
/* A SUCCESS BANNER, because a surface that can only render failure teaches its reader that every
   message is bad news. Green, stated, and never the same shape as .err. */
.ok-banner{color:var(--up);font-family:var(--mono);font-size:12px;white-space:pre-wrap;
  background:rgba(61,220,151,.07);border:1px solid rgba(61,220,151,.3);border-radius:8px;
  padding:10px 12px;margin:0 0 12px}
svg{display:block;max-width:100%}
@media (max-width:640px){ main{padding:14px} .hdr{padding:10px 14px} .strip{padding:10px 14px} }