/* Layout and components.
 *
 * Three rules this file exists to enforce:
 *   - one card is one idea, and cards in a row share a height;
 *   - every number is mono and tabular;
 *   - nothing decorative — no gradients, no shadows, no emoji. Icons are Font
 *     Awesome solid, used for navigation and status only.
 *
 * Desktop-only by decision: comfortable at 1440px, usable to ~1180px, and
 * below that it degrades to a single column rather than pretending to be an
 * app on a phone.
 */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:var(--fs-body)/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}

.mono,td,.v{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.warnc{color:var(--warn)} .muted{color:var(--muted)}
.hidden{display:none !important}

/* ------------------------------------------------------------------ top bar */
.topbar{height:var(--top);display:flex;align-items:center;gap:22px;
  padding:0 18px;border-bottom:1px solid var(--border);background:var(--panel);
  position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;
  letter-spacing:.12em;font-size:12px;text-transform:uppercase;
  min-width:calc(var(--rail) - 18px);color:var(--text);text-decoration:none}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.brand .dot.ok{background:var(--pos)}
.brand .dot.stale{background:var(--warn-mark)}
.brand .dot.down{background:var(--neg)}

.strip{display:flex;align-items:center;flex:1;overflow:hidden}
.sv{padding:0 15px;border-left:1px solid var(--border);line-height:1.25;
  white-space:nowrap}
.sv:first-child{border-left:0}
.sv .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
/* Labels carrying a Greek letter opt out: uppercasing turns σ into Σ, which
   is a different symbol with a different meaning. */
.sv .k.raw{text-transform:none}
.sv .v{font-size:14px;font-weight:600}
.sv .v.sm{font-size:12px;letter-spacing:.02em}

.topacts{display:flex;align-items:center;gap:4px}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;
  border:1px solid transparent;border-radius:7px;background:none;
  color:var(--muted);cursor:pointer;font-size:13px;text-decoration:none}
.iconbtn:hover{background:var(--elev);color:var(--text);
  border-color:var(--border)}

/* -------------------------------------------------------------------- shell */
.layout{display:flex;min-height:calc(100vh - var(--top))}
.rail{width:var(--rail);flex:none;border-right:1px solid var(--border);
  background:var(--panel);padding:14px 10px;display:flex;flex-direction:column;
  gap:2px;position:sticky;top:var(--top);height:calc(100vh - var(--top))}
.rail .grp{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:14px 10px 6px;opacity:.75}
.nav{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;
  color:var(--muted);cursor:pointer;font-size:13px;border:1px solid transparent;
  text-decoration:none}
.nav i{font-size:14px;width:16px;text-align:center}
.nav:hover{background:var(--elev);color:var(--text)}
.nav.on{background:var(--elev);color:var(--text);border-color:var(--border);
  font-weight:600}
.nav.on i{color:var(--accent)}
.nav .badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;
  background:var(--accent);color:var(--bg);border-radius:9px;padding:1px 6px;
  font-weight:700}
.rail .foot{margin-top:auto;font-size:10px;color:var(--muted);padding:10px;
  border-top:1px solid var(--border);line-height:1.7}

main{flex:1;padding:18px;min-width:0}
.screen{display:none}
.screen.on{display:block}

/* --------------------------------------------------------------------- grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.c3{grid-column:span 3}  .c4{grid-column:span 4}  .c5{grid-column:span 5}
.c6{grid-column:span 6}  .c7{grid-column:span 7}  .c8{grid-column:span 8}
.c9{grid-column:span 9}  .c12{grid-column:span 12}
@media(max-width:1180px){
  .c3,.c4,.c5{grid-column:span 6}
  .c7,.c8,.c9{grid-column:span 12}
}

/* -------------------------------------------------------------------- cards */
.card{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--pad);min-width:0;height:100%;
  display:flex;flex-direction:column}
.card>h3{margin:0 0 12px;font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
  display:flex;align-items:center;gap:8px}
.card>h3 i{font-size:11px}
.card>h3 .more{margin-left:auto;color:var(--accent);cursor:pointer;
  font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:500;
  display:flex;align-items:center;gap:5px;background:none;border:0;
  font-family:inherit}
.card .foot{margin-top:auto;padding-top:9px;border-top:1px solid var(--border);
  font-size:11px;color:var(--muted)}
.card .note{font-size:11px;color:var(--muted);margin-top:9px}

.metric .val{font-family:var(--font-mono);font-size:var(--fs-metric);
  font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.metric .sub{font-size:11px;color:var(--muted);margin-top:5px;
  font-family:var(--font-mono)}

/* --------------------------------------------------------------------- hero */
.hero{background:var(--elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 22px}
.hero .kicker{font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.hero h2{margin:7px 0 14px;font-size:21px;font-weight:600;letter-spacing:-.01em}
.hero h2 .qty{font-weight:400;font-size:16px;color:var(--muted)}
.hero ul{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:12px}
.hero li{border-left:2px solid var(--border);padding:2px 0 2px 11px;
  font-size:12.5px;color:var(--muted)}
.hero li b{color:var(--text);font-family:var(--font-mono);font-weight:600}

/* ------------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:right;font-weight:600;padding:0 0 8px;
  border-bottom:1px solid var(--border);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:7px 0;border-bottom:1px solid var(--border);text-align:right}
tr:last-child td{border-bottom:0}
td.name{font-family:var(--font-ui)}
tbody tr:hover td{background:var(--elev)}
.tick{font-weight:600}
.tbl-wrap{overflow-x:auto}

/* -------------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  padding:2px 8px;border-radius:20px;border:1px solid var(--border);
  color:var(--muted);letter-spacing:.03em;white-space:nowrap}
.chip.ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.chip.bad,.chip.breach{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent)}
.chip.info{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* -------------------------------------------------------------- rule rows */
.rule{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:12.5px}
.rule:last-child{border-bottom:0}
.rule i{font-size:12px;width:14px;text-align:center}
.rule .lab{flex:1}
.rule .ev{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  text-align:right}
.rule.off{opacity:.55}

/* -------------------------------------------------------------------- meter */
.meter{height:6px;border-radius:3px;background:var(--elev);overflow:hidden;
  margin:8px 0 6px;border:1px solid var(--border)}
.meter i{display:block;height:100%;background:var(--accent)}
.meter i.warn{background:var(--warn-mark)}

/* --------------------------------------------------------------------- rows */
.row{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);
  font-size:12.5px}
.row:last-child{border-bottom:0}
.row .t{font-family:var(--font-mono);font-size:11px;color:var(--muted);
  flex:none;width:52px}
.row .b{flex:1;min-width:0}
.row .src{font-size:10.5px;color:var(--muted)}

/* ------------------------------------------------------------------- charts */
svg.chart{width:100%;display:block}
.legend{display:flex;gap:14px;font-size:10.5px;color:var(--muted);
  margin-top:9px;flex-wrap:wrap}
.legend i{width:11px;height:2px;display:inline-block;vertical-align:middle;
  margin-right:5px}

/* ------------------------------------------------------------------ notices */
.notice{border:1px solid var(--border);border-left:3px solid var(--warn-mark);
  border-radius:var(--radius);padding:11px 14px;font-size:12.5px;
  color:var(--muted);background:var(--elev)}
.notice b{color:var(--text)}
.demobar{background:var(--warn-mark);color:#1a1206;font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-align:center;padding:5px}

.foot-note{margin-top:18px;padding-top:12px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}

.empty{color:var(--muted);font-size:12.5px;padding:6px 0}

/* -------------------------------------------------------------------- login */
.loginwrap{min-height:100vh;display:grid;place-items:center}
.loginbox{width:320px;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;background:var(--panel)}
.loginbox h1{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 18px;font-weight:600}
.loginbox input{width:100%;padding:9px 11px;border:1px solid var(--border);
  border-radius:7px;background:var(--bg);color:var(--text);
  font:14px var(--font-mono);margin-bottom:12px}
.loginbox button{width:100%;padding:9px;border:1px solid var(--accent);
  border-radius:7px;background:var(--accent);color:var(--bg);
  font:600 13px var(--font-ui);cursor:pointer}
.loginbox .err{color:var(--neg);font-size:11.5px;margin-bottom:10px}