/* SDM Hub console v2. Brand lives in tokens: swap --brand-h and the
   mark SVG in index.html and the whole console retargets. */

/* ============================================================
   SDM HUB — design canvas
   Brand is tokens only. Swapping --brand-ring / --brand-ink
   retargets the whole console to the final SNIDER mark.
   ============================================================ */
:root{
  /* --- brand (interim) --- */
  --brand-h: 205;
  --brand-ring: hsl(var(--brand-h) 76% 50%);
  --brand-ink:  hsl(var(--brand-h) 66% 15%);

  /* --- ground: cool navy-paper, derived from the mark --- */
  --ground:      hsl(var(--brand-h) 24% 95%);
  --plate:       #ffffff;
  --plate-sunk:  hsl(var(--brand-h) 22% 97%);
  --rule:        hsl(var(--brand-h) 20% 87%);
  --rule-strong: hsl(var(--brand-h) 18% 76%);

  --ink:      hsl(var(--brand-h) 42% 12%);
  --ink-2:    hsl(var(--brand-h) 14% 36%);
  --ink-3:    hsl(var(--brand-h) 12% 52%);

  /* one blue. it means "you can act on this". */
  --action:      hsl(var(--brand-h) 74% 42%);
  --action-hov:  hsl(var(--brand-h) 74% 34%);
  --action-wash: hsl(var(--brand-h) 74% 42% / .09);

  /* status. never blue, never colour alone. */
  --ok:       #0a7d0a;  --ok-fill:       #0ca30c;  --ok-wash:       #0ca30c1a;
  --warn:     #8a5c00;  --warn-fill:     #fab219;  --warn-wash:     #fab2192e;
  --serious:  #b4521f;  --serious-fill:  #ec835a;  --serious-wash:  #ec835a26;
  --crit:     #b32c2c;  --crit-fill:     #d03b3b;  --crit-wash:     #d03b3b1f;
  --unknown:  #6b7684;  --unknown-fill:  #98a3b1;  --unknown-wash:  #98a3b122;

  --r: 6px;
  --density: 1;
  --gap: calc(20px * var(--density));
  --pad: calc(18px * var(--density));

  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-theme="light"]{
  /* --- brand (interim) --- */
  --brand-h: 205;
  --brand-ring: hsl(var(--brand-h) 76% 50%);
  --brand-ink:  hsl(var(--brand-h) 66% 15%);

  /* --- ground: cool navy-paper, derived from the mark --- */
  --ground:      hsl(var(--brand-h) 24% 95%);
  --plate:       #ffffff;
  --plate-sunk:  hsl(var(--brand-h) 22% 97%);
  --rule:        hsl(var(--brand-h) 20% 87%);
  --rule-strong: hsl(var(--brand-h) 18% 76%);

  --ink:      hsl(var(--brand-h) 42% 12%);
  --ink-2:    hsl(var(--brand-h) 14% 36%);
  --ink-3:    hsl(var(--brand-h) 12% 52%);

  /* one blue. it means "you can act on this". */
  --action:      hsl(var(--brand-h) 74% 42%);
  --action-hov:  hsl(var(--brand-h) 74% 34%);
  --action-wash: hsl(var(--brand-h) 74% 42% / .09);

  /* status. never blue, never colour alone. */
  --ok:       #0a7d0a;  --ok-fill:       #0ca30c;  --ok-wash:       #0ca30c1a;
  --warn:     #8a5c00;  --warn-fill:     #fab219;  --warn-wash:     #fab2192e;
  --serious:  #b4521f;  --serious-fill:  #ec835a;  --serious-wash:  #ec835a26;
  --crit:     #b32c2c;  --crit-fill:     #d03b3b;  --crit-wash:     #d03b3b1f;
  --unknown:  #6b7684;  --unknown-fill:  #98a3b1;  --unknown-wash:  #98a3b122;

  --r: 6px;
  --density: 1;
  --gap: calc(20px * var(--density));
  --pad: calc(18px * var(--density));

  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-theme="dark"], .dark-scope{
  color-scheme: dark;
  --ground:      hsl(var(--brand-h) 34% 8%);
  --plate:       hsl(var(--brand-h) 30% 11%);
  --plate-sunk:  hsl(var(--brand-h) 32% 9%);
  --rule:        hsl(var(--brand-h) 22% 20%);
  --rule-strong: hsl(var(--brand-h) 20% 34%);
  --ink:      hsl(var(--brand-h) 30% 95%);
  --ink-2:    hsl(var(--brand-h) 16% 72%);
  --ink-3:    hsl(var(--brand-h) 14% 56%);
  --action:      hsl(var(--brand-h) 84% 64%);
  --action-hov:  hsl(var(--brand-h) 92% 76%);
  --action-wash: hsl(var(--brand-h) 84% 64% / .14);
  --brand-ink:   hsl(var(--brand-h) 40% 96%);
  --ok:      #4cc96a; --ok-fill:      #2fb84f; --ok-wash:      #0ca30c2e;
  --warn:    #f0bb4a; --warn-fill:    #e0a01c; --warn-wash:    #fab21930;
  --serious: #f2986e; --serious-fill: #e07344; --serious-wash: #ec835a30;
  --crit:    #f0736f; --crit-fill:    #d84a4a; --crit-wash:    #d03b3b30;
  --unknown: #93a0b0; --unknown-fill: #6d7b8c; --unknown-wash: #98a3b12b;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
  color-scheme: dark;
  --ground:      hsl(var(--brand-h) 34% 8%);
  --plate:       hsl(var(--brand-h) 30% 11%);
  --plate-sunk:  hsl(var(--brand-h) 32% 9%);
  --rule:        hsl(var(--brand-h) 22% 20%);
  --rule-strong: hsl(var(--brand-h) 20% 34%);
  --ink:      hsl(var(--brand-h) 30% 95%);
  --ink-2:    hsl(var(--brand-h) 16% 72%);
  --ink-3:    hsl(var(--brand-h) 14% 56%);
  --action:      hsl(var(--brand-h) 84% 64%);
  --action-hov:  hsl(var(--brand-h) 92% 76%);
  --action-wash: hsl(var(--brand-h) 84% 64% / .14);
  --brand-ink:   hsl(var(--brand-h) 40% 96%);
  --ok:      #4cc96a; --ok-fill:      #2fb84f; --ok-wash:      #0ca30c2e;
  --warn:    #f0bb4a; --warn-fill:    #e0a01c; --warn-wash:    #fab21930;
  --serious: #f2986e; --serious-fill: #e07344; --serious-wash: #ec835a30;
  --crit:    #f0736f; --crit-fill:    #d84a4a; --crit-wash:    #d03b3b30;
  --unknown: #93a0b0; --unknown-fill: #6d7b8c; --unknown-wash: #98a3b12b;
  }
}

*{box-sizing:border-box}
/* The attribute must win over any display rule, or hidden panels still paint. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:calc(15px * var(--density))/1.5 var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
.verdict{text-wrap:balance}
p{margin:0}
a{color:var(--action);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:-.01em;font-variant-ligatures:none}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:212px 1fr;min-height:100dvh}
.rail{
  background:var(--plate);border-right:1px solid var(--rule);
  padding:var(--pad) 12px;display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100dvh;overflow-y:auto;
}
.logo{display:flex;align-items:center;gap:10px;padding:2px 6px 0}
.logo svg{width:30px;height:30px;flex:none}
.logo .wm{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.19em;color:var(--brand-ink)}
.logo .sub{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-3);display:block;margin-top:1px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
  padding:8px 10px;border-radius:var(--r);cursor:pointer;color:var(--ink-2);font-size:14px;font-weight:450;
}
.nav button:hover{background:var(--plate-sunk);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--action-wash);color:var(--action);font-weight:600}
.nav .tally{margin-left:auto;font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:100px;background:var(--crit-fill);color:#fff;font-weight:600}
.nav button[aria-current="page"] .tally{background:var(--crit-fill)}
.railfoot{margin-top:auto;font-size:11.5px;color:var(--ink-3);line-height:1.45;border-top:1px solid var(--rule);padding-top:12px}

/* ---------- context bar ---------- */
.ctx{
  position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
  padding:12px calc(28px * var(--density));display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.ctx h1{font-size:calc(19px * var(--density));font-weight:650}
.ctx .spacer{flex:1}
.seg{display:flex;border:1px solid var(--rule-strong);border-radius:var(--r);overflow:hidden;background:var(--plate)}
.seg button{background:none;border:0;padding:5px 11px;font-size:12.5px;color:var(--ink-2);cursor:pointer;border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--action);color:#fff;font-weight:600}
.asof{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.03em;display:flex;align-items:center;gap:6px}
.asof .dot{width:6px;height:6px;border-radius:50%;background:var(--ok-fill)}
.asof.stale .dot{background:var(--warn-fill)}

main{padding:calc(24px * var(--density)) calc(28px * var(--density)) 80px;max-width:1240px}

/* ---------- plate ---------- */
.plate{background:var(--plate);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:var(--gap)}
[data-theme="dark"] .plate{box-shadow:inset 0 1px 0 hsl(var(--brand-h) 24% 18%)}
.plate > header{
  display:flex;align-items:baseline;gap:10px;padding:calc(13px * var(--density)) var(--pad);
  border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.plate > header h2{font-size:calc(14.5px * var(--density));font-weight:650;letter-spacing:-.005em}
.plate > header .note{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.plate .body{padding:var(--pad)}
.plate .body.flush{padding:0}

/* ---------- SIGNATURE: the run tape ---------- */
.tape{position:relative;padding:var(--pad) var(--pad) 10px}
.tape .track{
  position:relative;height:74px;border-bottom:1px solid var(--rule-strong);
  display:flex;align-items:flex-end;
}
.tape .tick{
  position:absolute;bottom:0;width:3px;border:0;padding:0;appearance:none;
  border-radius:2px 2px 0 0;cursor:pointer;
  transition:transform .1s, filter .1s;transform-origin:bottom;
}
.tape .tick:hover,.tape .tick:focus-visible{transform:scaleX(2.4);filter:brightness(1.15)}
.tape .tick.ok{background:var(--ok-fill);opacity:.55}
.tape .tick.quiet{background:var(--unknown-fill);opacity:.45}
.tape .tick.blocked{background:var(--warn-fill);opacity:.9}
.tape .tick.fail{background:var(--crit-fill);opacity:1;width:4px}
.tape .tick.fail::after{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--crit-fill);
}
.tape .hour{position:absolute;bottom:0;top:0;width:1px;background:var(--rule);opacity:.55}
.tape .axis{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.tape .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--ink-2)}
.tape .legend span{display:inline-flex;align-items:center;gap:6px}
.tape .legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.tapetip{
  position:absolute;z-index:20;background:var(--brand-ink);color:#fff;padding:7px 10px;border-radius:5px;
  font-family:var(--mono);font-size:11px;line-height:1.5;pointer-events:none;white-space:nowrap;
  transform:translate(-50%,-118%);box-shadow:0 6px 18px #0003;
}
[data-theme="dark"] .tapetip{background:#000;border:1px solid var(--rule-strong)}

/* ---------- the state-of-the-world sentence ---------- */
.verdict{font-family:var(--display);font-size:calc(27px * var(--density));font-weight:600;line-height:1.25;letter-spacing:-.022em;margin-bottom:6px;max-width:26ch}
.verdict em{font-style:normal;color:var(--crit)}
.verdict .gap{font-style:normal;color:var(--serious)}
.verdict .calm{color:var(--ok)}
.verdict-sub{color:var(--ink-2);font-size:14px;max-width:60ch}

/* ---------- needs-you lane: the only solid block on the page ---------- */
.lane{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--plate)}
.lane .row{
  display:grid;grid-template-columns:4px 1fr auto;gap:0;align-items:stretch;
  border-bottom:1px solid var(--rule);
}
.lane .row:last-child{border-bottom:0}
.lane .row .bar{background:var(--unknown-fill)}
.lane .row.crit .bar{background:var(--crit-fill)}
.lane .row.warn .bar{background:var(--warn-fill)}
.lane .row .cell{padding:13px var(--pad);min-width:0}
.lane .row .title{font-weight:550;font-size:14.5px;margin-bottom:4px;overflow-wrap:anywhere}
.lane .row .meta{font-size:12px;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lane .row .acts{display:flex;align-items:center;gap:8px;padding:13px var(--pad) 13px 0}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;
  padding:2px 8px 2px 6px;border-radius:100px;border:1px solid transparent;white-space:nowrap;
}
.badge svg{width:11px;height:11px;flex:none}
.badge.ok{background:var(--ok-wash);color:var(--ok);border-color:var(--ok-wash)}
.badge.warn{background:var(--warn-wash);color:var(--warn)}
.badge.serious{background:var(--serious-wash);color:var(--serious)}
.badge.crit{background:var(--crit-wash);color:var(--crit)}
.badge.unknown{background:var(--unknown-wash);color:var(--unknown)}
.badge.plain{background:var(--plate-sunk);color:var(--ink-2);border-color:var(--rule)}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--rule-strong);background:var(--plate);color:var(--ink);
  padding:6px 13px;border-radius:var(--r);cursor:pointer;font-size:13px;font-weight:500;
  transition:background .12s,border-color .12s;white-space:nowrap;
}
.btn:hover{background:var(--plate-sunk);border-color:var(--ink-3)}
.btn.primary{background:var(--action);border-color:var(--action);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--action-hov);border-color:var(--action-hov)}
.btn.quiet{border-color:transparent;background:none;color:var(--action)}
.btn.quiet:hover{background:var(--action-wash)}
.btn.danger{color:var(--crit);border-color:var(--crit-wash)}
.btn.danger:hover{background:var(--crit-wash);border-color:var(--crit)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:10px var(--pad);border-bottom:1px solid var(--rule);
  background:var(--plate-sunk);white-space:nowrap;
}
td{padding:11px var(--pad);border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--plate-sunk)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.scrollx{overflow-x:auto}

/* ---------- readiness matrix ---------- */
.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.matrix th.cat{
  background:var(--plate);text-transform:none;font-family:var(--body);font-size:12px;
  letter-spacing:0;font-weight:600;color:var(--ink-2);padding:14px var(--pad) 6px;border-bottom:0;
}
.matrix td.svc{padding:9px var(--pad);border-bottom:1px solid var(--rule);width:38%}
.matrix td.svc .n{font-weight:550}
.matrix td.svc .p{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px}
.matrix td.state{padding:9px var(--pad);border-bottom:1px solid var(--rule)}
.matrix td.ref{padding:9px var(--pad);border-bottom:1px solid var(--rule);text-align:right}
.cell-state{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:550}
.cell-state i{width:10px;height:10px;border-radius:2px;flex:none;display:inline-block}
/* shape carries the state as well as colour */
.cell-state.ready{color:var(--ok)}
.cell-state.ready i{background:var(--ok-fill);border-radius:50%}
.cell-state.not_connected{color:var(--serious)}
.cell-state.not_connected i{background:var(--serious-fill);transform:rotate(45deg);border-radius:1px}
.cell-state.account_missing{color:var(--warn)}
.cell-state.account_missing i{background:none;border:2.5px solid var(--warn-fill);border-radius:50%}
.cell-state.read_only{color:var(--unknown)}
.cell-state.read_only i{background:var(--unknown-fill);height:3px;border-radius:2px}
.cell-state i{margin-top:1px}

/* ---------- money ---------- */
.money{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--rule)}
.money .fig{padding:var(--pad);border-right:1px solid var(--rule)}
.money .fig:last-child{border-right:0}
.money .fig .v{font-family:var(--display);font-weight:700;font-size:calc(30px * var(--density));letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;display:block}
.money .fig .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:7px}
.money .fig .d{font-size:12px;color:var(--ink-2);margin-top:5px}
.money .fig .v.flag{color:var(--serious)}
.money .fig .v.unknown{color:var(--unknown);font-size:calc(21px * var(--density));font-weight:600}

/* sparkline */
.spark{display:block;width:100%;height:52px}
.spark .area{fill:var(--action-wash)}
.spark .line{fill:none;stroke:var(--action);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spark .conv{fill:var(--ok-fill)}
.spark .zero{stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:2 3}

/* pacing rail */
.pace{height:9px;border-radius:100px;background:var(--plate-sunk);border:1px solid var(--rule);overflow:hidden;position:relative;margin-top:9px}
.pace i{display:block;height:100%;background:var(--action)}
.pace i.over{background:var(--serious-fill)}
.pace .ceiling{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-3)}

/* ---------- client grid ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:var(--gap)}
.ccard{
  background:var(--plate);border:1px solid var(--rule);border-radius:var(--r);padding:var(--pad);
  cursor:pointer;text-align:left;transition:border-color .12s,transform .12s;width:100%;
  display:flex;flex-direction:column;
}
.ccard .figs{margin-top:auto}
.ccard:hover{border-color:var(--action);transform:translateY(-1px)}
.ccard .top{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.ccard .code{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.06em;
  background:var(--brand-ink);color:#fff;padding:4px 8px;border-radius:4px;flex:none;
}
[data-theme="dark"] .ccard .code{background:var(--action);color:hsl(var(--brand-h) 40% 10%)}
.ccard .name{font-weight:600;font-size:14.5px;line-height:1.3;display:block}
.ccard .lifecycle{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.ccard .figs{display:flex;gap:var(--pad);border-top:1px solid var(--rule);padding-top:12px;margin-top:12px}
.ccard .figs div{min-width:0}
.ccard .figs .v{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.ccard .figs .v.unknown{color:var(--unknown);font-size:14px;font-weight:600}
.ccard .figs .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ccard .strip{display:flex;gap:3px;margin-top:12px}
.ccard .strip i{height:4px;flex:1;border-radius:2px;background:var(--unknown-fill)}
.ccard .strip i.ready{background:var(--ok-fill)}
.ccard .strip i.not_connected{background:var(--serious-fill)}
.ccard .strip i.read_only{background:var(--unknown-fill)}
.ccard .strip i.account_missing{background:var(--warn-fill)}

/* ---------- kv & tabs ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px var(--pad);font-size:13.5px;align-items:baseline}
.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding-top:2px}
.kv dd{margin:0;overflow-wrap:anywhere}
.kv dd.unknown{color:var(--unknown);font-style:italic}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);overflow-x:auto;padding:0 var(--pad)}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;padding:11px 12px;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);white-space:nowrap;font-weight:500;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--action);border-bottom-color:var(--action);font-weight:600}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:14px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .rail .nav{flex-direction:row;gap:4px}
  .railfoot{display:none}
  main{padding:16px}
  .ctx{padding:12px 16px;top:0}
}

/* ---------- sign in ---------- */
.signin{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.signin-card{
  background:var(--plate);border:1px solid var(--rule);border-radius:var(--r);
  padding:40px 34px;max-width:400px;width:100%;text-align:center;
}
.signin-card .mark{width:56px;height:56px;margin:0 auto 20px;display:block}
.signin-card h1{font-size:24px;letter-spacing:-.02em;margin-bottom:6px}
.signin-card .wm{font-family:var(--display);font-weight:700;letter-spacing:.22em;font-size:13px;color:var(--ink-3);display:block;margin-bottom:14px}
.signin-card p{color:var(--ink-2);font-size:14px;margin-bottom:22px;line-height:1.55}
.btn-wide{width:100%;justify-content:center;padding:11px}
.signin-error{
  margin-top:18px;color:var(--crit);font-size:13px;background:var(--crit-wash);
  border-radius:var(--r);padding:11px 13px;text-align:left;line-height:1.5;
}

/* ---------- flash banner ---------- */
.flash{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  max-width:min(560px,92vw);padding:12px 18px;border-radius:var(--r);
  font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:9px;
  border:1px solid;box-shadow:0 8px 30px #0000002e;background:var(--plate);
}
.flash svg{width:14px;height:14px;flex:none}
.flash.good{color:var(--ok);border-color:var(--ok-fill)}
.flash.warn{color:var(--warn);border-color:var(--warn-fill)}
.flash.crit{color:var(--crit);border-color:var(--crit-fill)}

/* ---------- topbar identity ---------- */
.who{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.who b{display:block;color:var(--ink-2);font-weight:550}
.linkbtn{background:none;border:0;color:var(--action);cursor:pointer;padding:0;font-size:12.5px;text-decoration:underline;text-underline-offset:2px}

/* ---------- forms ---------- */
.field{display:grid;gap:5px;margin-bottom:12px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{
  font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--rule-strong);
  border-radius:var(--r);background:var(--plate-sunk);color:var(--ink);width:100%;
}
.field textarea{font-family:var(--mono);font-size:12.5px;resize:vertical;line-height:1.55}
.checks{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 14px}
.checks label{display:inline-flex;gap:7px;align-items:center;font-size:13px;cursor:pointer}
.checks input{accent-color:var(--action)}
details.form{border:1px solid var(--rule);border-radius:var(--r);margin-top:var(--pad)}
details.form > summary{padding:11px var(--pad);cursor:pointer;font-weight:550;font-size:13.5px;list-style:none}
details.form > summary::-webkit-details-marker{display:none}
details.form > summary::before{content:"+ ";color:var(--action);font-weight:700}
details.form[open] > summary::before{content:"− "}
details.form > .inner{padding:0 var(--pad) var(--pad);border-top:1px solid var(--rule);padding-top:var(--pad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--pad)}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

button[disabled]{opacity:.55;cursor:progress}
.skel{color:var(--ink-3);font-size:13.5px;padding:40px 0;text-align:center}

/* Book of business — Active / Inactive.
   Bigger than the time-window seg because it decides what the page IS, not how
   far back it looks. The count rides inside the control so the two numbers can
   never disagree with the grid below them. */
.seg.book{display:inline-flex;border-radius:var(--r)}
.seg.book button{padding:8px 16px;font-size:13.5px;display:flex;align-items:center;gap:8px}
.seg.book button .n{
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;
  background:var(--rule);color:var(--ink-2);border-radius:99px;padding:1px 7px;
}
.seg.book button[aria-pressed="true"] .n{background:rgb(255 255 255 / .22);color:#fff}

/* A dormant client is quieter, never hidden: still legible, still clickable. */
.ccard.dormant{background:var(--plate-2,transparent)}
.ccard.dormant .code{opacity:.62}
.ccard.dormant .name{color:var(--ink-2)}
.ccard .why{
  margin:11px 0 0;font-size:12px;line-height:1.45;color:var(--ink-2);
  border-left:2px solid var(--rule-strong);padding-left:9px;
}

/* Standing statement of fact above a record — not an alert, so no red. */
.notice{
  border:1px solid var(--rule-strong);border-left:3px solid var(--unknown);
  border-radius:var(--r);padding:11px var(--pad);margin-bottom:var(--gap);
  font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--plate);
}
.notice b{color:var(--ink)}
.notice .mono{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ---------- BRIDGE matrix ----------
   Clients down, platforms across, grouped by what the platform is FOR. Column
   shading alternates per group so the bands are readable without a rule between
   every column. Shape carries the state as well as colour, same as the service
   grid — five states, five silhouettes. */
.bmatrix{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.bmatrix th,.bmatrix td{padding:0;text-align:center}
.bmatrix .corner{position:sticky;left:0;z-index:3;background:var(--plate);text-align:left;
  padding:8px var(--pad);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule)}
.bmatrix .band{
  padding:7px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.bmatrix .pl{
  /* the global th rule is mono/uppercase; platform names are proper nouns */
  padding:9px 6px;vertical-align:bottom;border-bottom:1px solid var(--rule-strong);
  font-family:var(--body);font-size:11.5px;font-weight:550;letter-spacing:0;
  text-transform:none;color:var(--ink-2);min-width:76px;white-space:normal;
}
.bmatrix .pl span{display:block;line-height:1.2}
.bmatrix .pl .off{
  display:block;margin-top:3px;font-family:var(--mono);font-style:normal;
  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.bmatrix .rowh{
  position:sticky;left:0;z-index:2;background:var(--plate);text-align:left;
  padding:9px var(--pad);border-bottom:1px solid var(--rule);white-space:nowrap;
}
.bmatrix .rowh a{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--ink);text-decoration:none}
.bmatrix .rowh a:hover{color:var(--action)}
.bmatrix .rowh .nm{display:block;font-family:var(--body);font-weight:400;font-size:11px;
  letter-spacing:0;text-transform:none;color:var(--ink-3);
  max-width:190px;overflow:hidden;text-overflow:ellipsis}
.bmatrix .bx{padding:9px 6px;border-bottom:1px solid var(--rule);position:relative}
.bmatrix tr:last-child .bx,.bmatrix tr:last-child .rowh{border-bottom:0}
/* the group bands: set both, because the global th rule paints every header */
.bmatrix .g0{background:var(--plate)}
.bmatrix .g1{background:var(--plate-sunk)}
.bmatrix tbody tr:hover .bx{background:var(--action-wash)}
.bmatrix .band.g0,.bmatrix .band.g1{border-left:1px solid var(--rule-strong)}
.bmatrix .none{color:var(--rule-strong)}
.bmatrix .bx .n{
  position:absolute;top:3px;right:5px;font-family:var(--mono);font-size:8.5px;
  color:var(--ink-3);
}

.bcell{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:550}
.bcell i{width:11px;height:11px;flex:none;display:inline-block;border-radius:2px}
.bcell.ready{color:var(--ok)}
.bcell.ready i{background:var(--ok-fill);border-radius:50%}
.bcell.read_only{color:var(--warn)}
.bcell.read_only i{background:var(--warn-fill);height:3.5px;border-radius:2px}
.bcell.not_connected{color:var(--serious)}
.bcell.not_connected i{background:var(--serious-fill);transform:rotate(45deg);border-radius:1px}
.bcell.dormant{color:var(--unknown)}
.bcell.dormant i{background:none;border:2.5px solid var(--unknown-fill);border-radius:50%}
.bcell.unsupported{color:var(--ink-3)}
.bcell.unsupported i{background:none;border-bottom:2px solid var(--rule-strong);height:0;border-radius:0}

.legend{border-top:1px solid var(--rule);display:flex;gap:18px;flex-wrap:wrap;
  align-items:center;font-size:12.5px}
.bcell.account_missing{color:var(--warn)}
.bcell.account_missing i{background:none;border:2.5px solid var(--warn-fill);border-radius:50%}

/* ---------- service matrix ----------
   Reuses the .bmatrix table skeleton so the two grids read as one system, with
   its own cell vocabulary: an engagement state, not a reachability state. */
.scell{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:550}
.scell i{width:11px;height:11px;flex:none;display:inline-block;border-radius:2px}
.scell.active{color:var(--ok)}
.scell.active i{background:var(--ok-fill);border-radius:50%}
.scell.setting_up{color:var(--warn)}
.scell.setting_up i{background:none;border:2.5px solid var(--warn-fill);border-radius:50%}
.scell.paused{color:var(--unknown)}
.scell.paused i{background:var(--unknown-fill);height:3.5px;border-radius:2px}
.scell.ended{color:var(--ink-3)}
.scell.ended i{background:none;border:1.5px dashed var(--rule-strong);border-radius:50%}

/* Sold, and something it needs is unreachable. A corner marker, never a colour
   change: much of this work is done by people, and a permanently red grid stops
   being read. */
.snag{
  display:inline-block;width:13px;height:13px;line-height:13px;vertical-align:middle;
  margin-left:6px;border-radius:50%;background:var(--warn-fill);color:hsl(40 90% 14%);
  font-family:var(--mono);font-size:9px;font-weight:700;text-align:center;
}
.legend .scell .snag{margin:0 6px 0 0}
/* An ended engagement is the quietest mark on the grid, but it still has to be
   visible -- a mark you cannot see is the same as no mark. */
.scell.ended i{border-color:var(--ink-3)}