/* Edge Node NOC Command Center: the stylesheet, from the approved mock (docs/evidence/2026-10-15-noc-command-center-mock/).
   Layout concept: one sticky chrome (top bar + page tabs) over a dark tactical console that fills a 1080p wall; dense mono data, SVG topology in tiers, rack elevations
   with every port, status by colour. Dark-committed by design (a NOC display). Fonts: /static/fonts/geist.css (self-hosted Geist and Geist Mono, loaded by the shell).
   1rem is 13px, the mock's text size: every length is in rem, so Wall mode (`html` at 16.25px) scales type and layout x1.25. Hairlines (1-2px borders, outlines)
   stay in px, and so does text inside an SVG (the SVG scales with its box, and its text must scale with it, not with the root). */
html{font-size:13px}
html:has(body.wall){font-size:16.25px}
[hidden]{display:none!important}
:root{
  color-scheme: dark;
  --bg:#0a0a0a; --panel:#111114; --raised:#17171b; --inset:#0d0d10; --bezel:#131317;
  --line:#242428; --line-2:#333339;
  --fg:#fafafa; --muted:#a1a1a6; --dim:#6a6a72;
  --brand:#00c758; --brand-2:#05df72; --brand-dim:#0b3b22;
  --ok:#05df72; --warn:#fcbb00; --crit:#fb2c36; --info:#4aa3ff; --hold:#8a8a94; --off:#2b2b31;
  --ok-bg:#06281a; --warn-bg:#2a2203; --crit-bg:#2a0608; --info-bg:#0a1d30; --hold-bg:#1a1a1e;
  --sans:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:.6154rem; --r-sm:.3846rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:1rem;line-height:1.45;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100%}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--brand-2);text-decoration:none}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:.3077rem}

/* ---- chrome: top bar + tabs, one sticky block ---- */
.chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#0b0b0e;border-bottom:1px solid var(--line)}
.chrome::before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--brand) 0,var(--brand) 28%,transparent 70%)}
.topbar{display:flex;align-items:center;gap:1.0769rem;flex-wrap:wrap;padding-block:.6154rem;
  padding-left:max(1.2308rem,env(safe-area-inset-left,0px));padding-right:max(1.2308rem,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:.8462rem;color:var(--fg)}
.brand .logo{height:1.8462rem;width:auto;display:block}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand .pname{font-weight:600;letter-spacing:.2px;font-size:1.0769rem}
.brand .psub{font-family:var(--mono);font-size:.7692rem;color:var(--dim);margin-top:.2308rem;letter-spacing:.3px}
.spacer{flex:1 1 auto;min-width:.6154rem}
.prog-pill{display:inline-flex;align-items:center;gap:.5385rem;background:var(--brand-dim);color:var(--brand-2);border:1px solid #124a2d;border-radius:999px;padding:.2308rem .7692rem;font-size:.8462rem;font-weight:600;letter-spacing:.5px;font-family:var(--mono)}
.prog-pill .dot{width:.4615rem;height:.4615rem;border-radius:50%;background:var(--brand-2);box-shadow:0 0 .6154rem var(--brand-2)}
.grade-chip{display:inline-flex;align-items:center;gap:.5385rem;border-radius:var(--r-sm);padding:.3077rem .8462rem;font-size:.8846rem;font-weight:700;letter-spacing:.6px;border:1px solid;font-family:var(--mono)}
.grade-OK{background:var(--ok-bg);color:var(--ok);border-color:#0d4a30}
.grade-WARN{background:var(--warn-bg);color:var(--warn);border-color:#4a3b05}
.grade-CRIT{background:var(--crit-bg);color:var(--crit);border-color:#5a1013;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.clocks{display:flex;gap:.9231rem;align-items:center;font-size:.8462rem;color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums}
.clocks b{color:var(--fg);font-weight:600}
.rotctl{display:inline-flex;align-items:center;gap:.6154rem;background:var(--raised);border:1px solid var(--line-2);color:var(--muted);border-radius:999px;padding:.2308rem .8462rem;cursor:pointer;font-family:var(--mono);font-size:.8462rem}
.rotctl:hover{color:var(--fg);border-color:var(--brand)}
/* pause and play are drawn, not typed: U+23F8 is in no text font of a kiosk, and an empty box on the status line reads as a fault */
.rotctl .ri{position:relative;display:inline-block;flex:0 0 auto;width:.7692rem;height:.8462rem}
.rotctl .ri::before,.rotctl .ri::after{content:"";position:absolute;top:0;bottom:0;width:.2308rem;background:currentColor;border-radius:1px}
.rotctl .ri::before{left:.0769rem}
.rotctl .ri::after{right:.0769rem}
.rotctl.paused .ri::before{left:.1538rem;top:0;bottom:auto;width:0;height:0;background:none;border-style:solid;border-width:.4231rem 0 .4231rem .6923rem;border-color:transparent transparent transparent currentColor;border-radius:0}
.rotctl.paused .ri::after{display:none}
.rotctl .rt{min-width:12rem;text-align:left;font-variant-numeric:tabular-nums}
.rotctl .rotbar{width:3.6923rem;height:.2308rem;background:#2b2b31;border-radius:2px;overflow:hidden;flex:0 0 auto}
.rotctl .rotbar i{display:block;height:100%;width:0;background:var(--brand-2);transition:width .25s linear}
.rotctl.paused{color:var(--warn);border-color:#4a3b05;background:var(--warn-bg)}
.rotctl.paused .rotbar i{background:var(--warn);transition:none}
.user{display:flex;align-items:center;gap:.5385rem;color:var(--muted);font-size:.8462rem;border-left:1px solid var(--line);padding-left:.9231rem;font-family:var(--mono)}
.user .av{width:1.6923rem;height:1.6923rem;border-radius:50%;background:var(--brand-dim);color:var(--brand-2);display:grid;place-items:center;font-weight:700;font-size:.7692rem;border:1px solid #124a2d;font-family:var(--sans)}
.sample{font-size:.7308rem;letter-spacing:1px;text-transform:uppercase;color:var(--warn);border:1px dashed #4a3b05;border-radius:.3077rem;padding:2px .5385rem;background:var(--warn-bg)}

.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;border-top:1px solid var(--line);
  padding-left:max(.7692rem,env(safe-area-inset-left,0px));padding-right:max(.7692rem,env(safe-area-inset-right,0px))}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:.5385rem;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:.6154rem .9231rem;cursor:pointer;font-size:.9615rem;white-space:nowrap}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--brand)}
.tab .k{font-family:var(--mono);font-size:.7692rem;color:var(--dim);border:1px solid var(--line-2);border-radius:.2308rem;padding:0 .3077rem}
.tab[aria-selected="true"] .k{color:var(--brand-2);border-color:#124a2d}
.tab[disabled]{opacity:.38;cursor:not-allowed}
.tab .cnt{font-family:var(--mono);font-size:.7692rem;color:var(--dim)}
.tab .cnt.warn{color:var(--warn)} .tab .cnt.crit{color:var(--crit)} .tab .cnt.info{color:var(--info)}

/* ---- page frame ---- */
main{flex:1 1 auto;width:100%;max-width:147.6923rem;margin:0 auto;
  padding-block:1.0769rem 1.8462rem;padding-left:max(1.2308rem,env(safe-area-inset-left,0px));padding-right:max(1.2308rem,env(safe-area-inset-right,0px))}
.page[hidden]{display:none!important}
.page{animation:fadein .22s ease-out}
@keyframes fadein{from{opacity:.4}to{opacity:1}}
.grid{display:grid;gap:1.0769rem;align-content:start}
.sect-h{display:flex;align-items:center;gap:.7692rem;margin:2px 0 .7692rem}
.sect-h h2{font-size:.8462rem;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)}
.sect-h .rule{flex:1;height:1px;background:var(--line)}
.sect-h .meta{font-size:.8462rem;color:var(--dim);font-family:var(--mono)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.card>.hd{display:flex;align-items:center;gap:.6154rem;padding:.6154rem .9231rem;border-bottom:1px solid var(--line);background:var(--raised)}
.card>.hd h3{font-size:.8462rem;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:600}
.card>.hd .r{margin-left:auto;font-family:var(--mono);font-size:.8462rem;color:var(--dim)}
.card>.bd{padding:.9231rem}
.card>.bd.flush{padding:0}

/* ---- status atoms ---- */
.chip{display:inline-flex;align-items:center;gap:.3846rem;border-radius:999px;padding:1px .6154rem;font-size:.8077rem;font-weight:600;border:1px solid;font-family:var(--mono);white-space:nowrap}
.s-ok{color:var(--ok);background:var(--ok-bg);border-color:#0d4a30}
.s-warn{color:var(--warn);background:var(--warn-bg);border-color:#4a3b05}
.s-crit{color:var(--crit);background:var(--crit-bg);border-color:#5a1013}
.s-info{color:var(--info);background:var(--info-bg);border-color:#113a5c}
.s-hold{color:var(--hold);background:var(--hold-bg);border-color:#303036}
.dot{width:.5385rem;height:.5385rem;border-radius:50%;flex:0 0 auto;display:inline-block}
.d-ok{background:var(--ok);box-shadow:0 0 .4615rem #05df7266} .d-warn{background:var(--warn);box-shadow:0 0 .4615rem #fcbb0066}
.d-crit{background:var(--crit);box-shadow:0 0 .5385rem #fb2c3688} .d-info{background:var(--info)} .d-hold{background:var(--hold)} .d-off{background:var(--off)}

/* ---- kpis ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.0769rem,1fr));gap:.7692rem}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7692rem 1rem;min-width:0}
.kpi .l{font-size:.7692rem;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
.kpi .v{font-family:var(--mono);font-size:1.6923rem;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .v small{font-size:.9231rem;color:var(--muted);font-weight:500}
.kpi .d{font-size:.8077rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- fleet tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.7692rem}
@media (max-width:1380px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-sm);padding:.6923rem .8462rem;display:flex;flex-direction:column;gap:.4615rem;min-width:0}
.tile.ok{border-left-color:var(--ok)} .tile.warn{border-left-color:var(--warn)} .tile.crit{border-left-color:var(--crit)} .tile.info{border-left-color:var(--info)} .tile.hold{border-left-color:var(--hold)}
.tile .t1{display:flex;align-items:center;gap:.5385rem;min-width:0}
.tile .nm{font-weight:600;font-size:.9615rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .role{font-size:.7308rem;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-left:auto;flex:0 0 auto}
.tile .plat{font-size:.8077rem;color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .kv{display:grid;grid-template-columns:1fr 1fr;gap:2px .6154rem;font-family:var(--mono);font-size:.8077rem;color:var(--muted)}
.tile .kv b{color:var(--fg);font-weight:600}
.tile .note{font-size:.8077rem;color:var(--dim);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini{height:1.6923rem;width:100%;display:block}

/* ---- tables ---- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9231rem}
th,td{text-align:left;padding:.3846rem .7692rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.7692rem;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);font-weight:600;background:var(--raised)}
tbody tr:hover{background:#15151a}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td.m{font-family:var(--mono)}
tr.em td{background:#121217}
tr.stg td{color:var(--dim)}
.muted{color:var(--muted)} .dim{color:var(--dim)}

/* ---- events ---- */
.ev{display:flex;gap:.6923rem;align-items:flex-start;padding:.4615rem .9231rem;border-bottom:1px solid var(--line);font-size:.9231rem}
.ev:last-child{border-bottom:0}
.ev .dot{margin-top:.3846rem}
.ev .ts{font-family:var(--mono);color:var(--dim);font-size:.8077rem;flex:0 0 auto;padding-top:1px;min-width:4rem}
.ev .msg{min-width:0}
.ev .msg b{font-weight:600}
.ev .src{margin-left:auto;font-family:var(--mono);font-size:.7692rem;color:var(--dim);flex:0 0 auto}
.handfoot{display:flex;flex-wrap:wrap;gap:.4615rem 1.3846rem;padding:.6154rem .9231rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.8462rem;color:var(--muted)}
.handfoot b{color:var(--fg);font-weight:600}

/* ---- upstream / fabric kv ---- */
.kvlist{display:grid;grid-template-columns:max-content 1fr;gap:.3077rem 1.0769rem;font-size:.9231rem;align-items:center}
.kvlist .k{color:var(--dim);font-size:.8077rem;letter-spacing:.4px;text-transform:uppercase}
.kvlist .v{font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.6154rem;min-width:0}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:.9231rem 1.3846rem}
@media (max-width:1100px){.cols2{grid-template-columns:1fr}}

/* ---- topology ---- */
.topo-wrap{overflow-x:auto}
.topo{width:100%;height:auto;max-height:calc(100vh - 18.0769rem);min-height:29.2308rem;display:block}
.topo text{font-family:var(--mono)}
.topo .tier-lbl{font-size:10px;letter-spacing:1.2px;fill:var(--dim);font-weight:600}
.topo .tier-sub{font-size:9px;fill:#4a4a52}
.topo .band{fill:#101013;stroke:#1a1a1f}
.topo .t-name{font-size:13px;font-weight:600;fill:var(--fg)}
.topo .t-sub{font-size:10px;fill:var(--muted)}
.topo .t-x{font-size:9px;fill:var(--dim)}
.topo .t-cloud{font-size:12px;font-weight:600;fill:var(--fg)}
.topo .t-cloud-sub{font-size:9px;fill:var(--muted)}
.topo .t-lbl{font-size:9.5px;fill:var(--muted)}
.topo .t-tag{font-size:8px;fill:var(--dim);letter-spacing:.8px}
.topo .fg-name{font-size:12px;font-weight:700;fill:#ff8a3d}
.topo .nd{fill:var(--panel)}
.topo .lnk{fill:none;stroke-width:2}
.topo .lnk:hover,.topo .hit:hover+.lnk{stroke-width:3.5}
.topo .hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke}
.legend{display:flex;flex-wrap:wrap;gap:1.0769rem;margin-top:.6154rem;font-size:.8462rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.4615rem}
.legend i{width:1.3846rem;height:.2308rem;border-radius:2px;display:inline-block}
.legend i.dotted{height:0;background:none;border-top:3px dotted var(--hold);border-radius:0}

/* ---- ports: rack elevation + detail ---- */
.devbar{display:flex;flex-wrap:wrap;gap:.4615rem;margin-bottom:.9231rem;align-items:center}
.devbar .sep{width:1px;height:1.5385rem;background:var(--line-2);margin:0 .3077rem}
.devbtn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:.3846rem .7692rem;cursor:pointer;font-size:.8846rem;display:flex;align-items:center;gap:.5385rem;color:var(--muted)}
.devbtn:hover{color:var(--fg);border-color:var(--line-2)}
.devbtn[aria-pressed="true"]{color:var(--fg);border-color:var(--brand);background:#0f1712}
.rack{display:flex;flex-direction:column;gap:.4615rem}
.rack .tier{display:flex;align-items:center;gap:.7692rem;margin:.3846rem 0 1px;font-size:.7692rem;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.rack .tier .rule{flex:1;height:1px;background:var(--line)}
.rackrow{display:grid;grid-template-columns:17.6923rem minmax(0,1fr) 14.6154rem;gap:.9231rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r);padding:.4615rem .9231rem;cursor:pointer;text-align:left;color:inherit;font-size:1rem;min-width:0}
.rackrow.ok{border-left-color:var(--ok)} .rackrow.warn{border-left-color:var(--warn)} .rackrow.crit{border-left-color:var(--crit)} .rackrow.info{border-left-color:var(--info)}
.rackrow:hover{border-color:var(--brand);background:#0f1712}
.rackrow .lb{display:flex;flex-direction:column;gap:2px;min-width:0}
.rackrow .lb .nm{display:flex;align-items:center;gap:.5385rem;font-weight:600;font-size:1rem}
.rackrow .lb .pl{font-family:var(--mono);font-size:.8077rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rackrow .lb .no{font-size:.8077rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rackrow .pn{min-width:0;background:var(--inset);border:1px solid var(--line);border-radius:.3077rem;padding:.3846rem .6154rem}
.rackrow .pn svg{width:100%;height:auto;max-height:5.3846rem;display:block}
.rackrow .sm{display:flex;flex-direction:column;gap:.2308rem;font-family:var(--mono);font-size:.8462rem;color:var(--muted);text-align:right}
.rackrow .sm b{color:var(--fg)}
.rackrow .sm .go{color:var(--brand-2);font-size:.8077rem}
@media (max-width:1100px){.rackrow{grid-template-columns:1fr;gap:.6154rem}.rackrow .sm{flex-direction:row;gap:.9231rem;text-align:left}}
.rackgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(26.1538rem,1fr));gap:.9231rem}
.rackcard{text-align:left;background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r);padding:.8462rem .9231rem;cursor:pointer;display:flex;flex-direction:column;gap:.5385rem;color:inherit;font-family:inherit;font-size:1rem;min-width:0}
.rackcard.ok{border-left-color:var(--ok)} .rackcard.warn{border-left-color:var(--warn)} .rackcard.crit{border-left-color:var(--crit)} .rackcard.info{border-left-color:var(--info)}
.rackcard:hover{border-color:var(--brand);background:#0f1712}
.rackcard .rh{display:flex;align-items:center;gap:.6154rem}
.rackcard .rh .nm{font-weight:600;font-size:1rem}
.rackcard .rh .role{margin-left:auto;font-size:.7308rem;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.rackcard .rplat{font-size:.8077rem;color:var(--muted);font-family:var(--mono)}
.rackcard .rpanel{background:var(--inset);border:1px solid var(--line);border-radius:.3077rem;padding:.4615rem .6154rem}
.rackcard .rpanel svg{width:100%;height:auto;max-height:4.9231rem;display:block}
.rackcard .rsum{display:flex;gap:.7692rem;align-items:center;font-size:.8077rem;color:var(--muted);font-family:var(--mono);flex-wrap:wrap}
.rackcard .rsum .go{margin-left:auto;color:var(--brand-2)}
.backbtn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:.3846rem .8462rem;cursor:pointer;font-size:.8846rem;color:var(--muted);font-family:inherit}
.backbtn:hover{color:var(--fg);border-color:var(--brand)}
.panel-wrap{overflow-x:auto;background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:1.0769rem 1.2308rem}
.panel-svg{display:block;width:100%;height:auto;max-height:11.5385rem;min-width:47.6923rem}
.panel-svg text{font-family:var(--mono)}
.legend2{display:flex;flex-wrap:wrap;gap:.9231rem;margin:.7692rem 2px 0;font-size:.8462rem;color:var(--muted)}
.legend2 span{display:inline-flex;align-items:center;gap:.4615rem}
.legend2 i{width:.9231rem;height:.6923rem;border-radius:2px;border:1px solid #000;display:inline-block}

.foot{border-top:1px solid var(--line);color:var(--dim);font-size:.8462rem;
  padding-block:.7692rem 1.3846rem;padding-left:max(1.2308rem,env(safe-area-inset-left,0px));padding-right:max(1.2308rem,env(safe-area-inset-right,0px));
  display:flex;gap:.9231rem;flex-wrap:wrap;align-items:center}
.foot .pill{border:1px solid var(--line);border-radius:999px;padding:2px .6923rem;color:var(--muted)}

.two-col{grid-template-columns:1.15fr .95fr}
@media (max-width:1100px){.two-col{grid-template-columns:1fr}}
@media (max-width:720px){.brand .psub{display:none}.clocks .utc{display:none}.user span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= additions to the mock: what the live pages and the shell need ================= */

/* ---- helpers ---- */
.mt{margin-top:.9231rem}
.b{font-weight:600}
.wrap{white-space:normal}
.c-ok{color:var(--ok)} .c-warn{color:var(--warn)} .c-crit{color:var(--crit)} .c-info{color:var(--info)} .c-hold{color:var(--hold)} .c-dim{color:var(--dim)}
.it{display:inline-flex;align-items:center;gap:.4615rem}
/* a row whose data stopped reads stale: the TUI's glyph `~`, next to the name or inside the chip (spec 3.4) */
.stalemark{color:var(--hold);font-family:var(--mono);font-weight:700;margin:0 .1538rem;cursor:help}
.chip .stalemark{margin:0 0 0 .0769rem}
.it+.it{margin-left:.9231rem}
.wait,.empty{margin:0;padding:1.5385rem 1.2308rem;color:var(--dim);font-family:var(--mono);font-size:.9231rem;text-align:center}
.empty{text-align:left;padding:1rem 1.2308rem}
.heldstrip{background:var(--warn-bg);color:var(--warn);border:1px solid #4a3b05;border-radius:var(--r-sm);padding:.4615rem .9231rem;font-size:.8462rem;margin-bottom:.7692rem;font-family:var(--mono)}

/* ---- top bar ---- */
.grade-INFO{background:var(--info-bg);color:var(--info);border-color:#113a5c}
.grade-none{background:var(--hold-bg);color:var(--hold);border-color:#303036}
.prog-pill select{appearance:none;-webkit-appearance:none;background:transparent;color:inherit;border:0;font:inherit;letter-spacing:inherit;cursor:pointer;padding:0}
.prog-pill select option{background:var(--panel);color:var(--fg)}
.prog-pill:has(select){cursor:pointer}
.prog-pill:has(select)::after{content:"▾";font-size:.7692rem;opacity:.8}
.sample.lost{color:var(--warn);background:var(--warn-bg);border:1px solid #4a3b05;font-weight:700;animation:pulse 1.6s infinite}
.user .logout{margin:0}
.user .logout button{background:transparent;border:1px solid var(--line-2);color:var(--muted);border-radius:var(--r-sm);padding:.1538rem .6154rem;font-family:var(--mono);font-size:.7692rem;cursor:pointer}
.user .logout button:hover{color:var(--fg);border-color:var(--brand)}
.banner-crit{background:var(--crit-bg);color:var(--crit);border-top:1px solid #5a1013;padding:.6154rem 1.2308rem;display:flex;gap:.9231rem;align-items:center;font-family:var(--mono);font-weight:600;font-size:.9231rem}
.banner-crit span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner-crit button{background:transparent;border:1px solid #5a1013;color:var(--crit);border-radius:var(--r-sm);padding:.1538rem .6923rem;font-family:var(--mono);font-size:.8077rem;cursor:pointer}
.banner-crit button:hover{background:#3a0a0d}

/* the feed is lost: the last state stays on screen, dimmed (a number that stopped moving must not look current) */
body.stale main{opacity:.45;filter:saturate(.5);transition:opacity .3s}
body.stale .tabs{opacity:.7}

/* ---- Wall mode: the chrome is the status line only, the type is x1.25 (html font-size above), the cursor goes after a few seconds ---- */
body.wall .tabs,body.wall .user,body.wall .foot,body.wall .sample:not(.lost){display:none}
body.wall.idle,body.wall.idle *{cursor:none}

/* ---- toast: the answer to a write ---- */
.toast{position:fixed;right:1.2308rem;bottom:1.2308rem;z-index:60;max-width:30rem;background:var(--raised);border:1px solid var(--line-2);border-left:3px solid var(--brand);border-radius:var(--r-sm);padding:.6154rem .9231rem;font-size:.9231rem;box-shadow:0 .5rem 1.5rem #000a}
.toast.err{border-left-color:var(--crit);color:var(--crit)}

/* ---- overview ---- */
.kpi .v.c-ok,.kpi .v.c-warn,.kpi .v.c-crit,.kpi .v.c-info{font-weight:600}
.handfoot .b{color:inherit}
.handfoot .c-ok,.handfoot .c-warn,.handfoot .c-crit,.handfoot .c-info{font-weight:600}
.handfoot>span{white-space:nowrap}
.kvlist .v .it{min-width:0}
.cols2.pad{padding:.9231rem}

/* ---- ports ---- */
.backrow{display:flex;gap:.6154rem;align-items:center;margin-bottom:.9231rem}
.backrow .dim{font-size:.8462rem}

/* ---- BGP ---- */
table.dense th,table.dense td{padding:.2308rem .7692rem}
td.rsn{min-width:14rem;max-width:26rem}
.seg{background:var(--inset);border:1px solid var(--line-2);color:var(--fg);border-radius:999px;padding:.0769rem .6923rem;font-family:var(--mono);font-size:.8077rem;cursor:pointer}
.seg:hover{border-color:var(--brand)}
.tlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));gap:.9231rem}
.tlbody{display:grid;gap:.3846rem}
.tl{display:grid;grid-template-columns:5.5rem 1fr 4.5rem;align-items:center;gap:.6154rem;font-size:.8462rem;font-family:var(--mono)}
.tl .n{text-align:right;color:var(--muted)}

/* ---- alerts and game day ---- */
.evlog{max-height:calc(100vh - 33rem);min-height:8rem;overflow-y:auto}
tr.nextrow td{background:#10161a}
.st{display:inline-flex;align-items:flex-start;gap:.4615rem}
.st .dot{margin-top:.4615rem}
th.tick,td.tick{width:4rem;text-align:center}
td.tick input{width:1.0769rem;height:1.0769rem;accent-color:var(--brand);cursor:pointer}

/* ---- sign-in (the page has no chrome: a centred box on the page colour) ---- */
body.login{align-items:center;justify-content:center;padding:16px}
.login-box{flex:0 0 auto;width:min(360px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 40px #000a}
.login-box .logo{height:36px;width:auto;align-self:flex-start}
.login-box h1{font-size:16px;letter-spacing:.2px}
.login-box form{display:flex;flex-direction:column;gap:14px}
.login-box label{display:flex;flex-direction:column;gap:6px;font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
.login-box input{background:var(--inset);border:1px solid var(--line);border-radius:5px;padding:10px 11px;color:var(--fg);font:inherit;font-size:14px;letter-spacing:0;text-transform:none}
.login-box input:focus{outline:2px solid var(--brand-2);outline-offset:0;border-color:var(--brand)}
.login-box button{background:var(--brand);color:#03130a;border:0;border-radius:5px;padding:11px 12px;font-weight:600;font-size:14px;cursor:pointer}
.login-box button:hover{background:var(--brand-2)}
.login-box .msg{margin:0;color:var(--crit);background:var(--crit-bg);border:1px solid #5a1013;border-radius:5px;padding:8px 10px;font-size:12px}
.login-box .alt{color:var(--brand-2);font-size:12px;text-align:center}