/* DarkArray public dashboard. Dark operations console: one blue magnitude ramp for every chart and the map,
   orange only for the single series a panel is about, green only for the live signal. Colours validated with the
   dataviz palette checker against the panel surface #0f1316 (ramp: ordinal pass; blue/orange: CVD dE 26.8). */
@font-face{font-family:'Chakra Petch';font-weight:500;font-display:swap;src:url(/fonts/chakra-petch-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plex Condensed';font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-condensed-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plex Condensed';font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --page:#07090b;--panel:#0f1316;--panel-2:#131a1f;--line:#1f272e;--line-2:#2a343c;--grid:rgba(120,160,190,.045);
  --ink:#e6edf2;--ink-2:#a3b0ba;--muted:#6c7985;
  --blue:#3987e5;--accent:#d95926;--good:#0ca30c;--warn:#fab219;--crit:#d03b3b;
  --r0:#18212a;--r1:#184f95;--r2:#256abf;--r3:#3987e5;--r4:#6da7ec;--r5:#9ec5f4;
  --display:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --text:'Plex Condensed','Arial Narrow',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;min-height:100vh;color:var(--ink);font:400 14px/1.45 var(--text);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(57,135,229,.10),transparent 70%),
    repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 40px),
    var(--page)}
a{color:var(--r5)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:12px 24px;
  background:rgba(7,9,11,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand svg{width:30px;height:30px;flex:none}
.brand h1{margin:0;font:600 19px/1 var(--display);letter-spacing:.22em}
.brand p{margin:3px 0 0;font:500 11px/1 var(--display);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.status{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:500 12px/1 var(--display);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.status b{color:var(--ink-2);font-weight:500}
.live{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-2);border-radius:2px;color:var(--ink)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.live[data-state=live]{border-color:rgba(12,163,12,.45)}
.live[data-state=live] i{background:var(--good);box-shadow:0 0 0 0 rgba(12,163,12,.6);animation:pulse 2s infinite}
.live[data-state=stale] i{background:var(--warn)}
.live[data-state=down] i{background:var(--crit)}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(12,163,12,0)}100%{box-shadow:0 0 0 0 rgba(12,163,12,0)}}
.clock{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- layout ---- */
main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding:18px 24px 8px;max-width:1680px;margin:0 auto}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
@media (max-width:1180px){.span-8,.span-4,.span-6,.span-3{grid-column:span 12}}
@media (min-width:760px) and (max-width:1180px){.span-3{grid-column:span 6}}

/* ---- panels: hairline frame with corner brackets ---- */
.panel{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel) 38%);border:1px solid var(--line);min-width:0;
  opacity:0;transform:translateY(6px);animation:rise .5s ease-out forwards}
.panel::before,.panel::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--r3);border-style:solid;opacity:.7}
.panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none;opacity:1;transform:none}.live[data-state=live] i{animation:none}}
.panel-h{display:flex;align-items:baseline;gap:10px;padding:12px 16px 0}
.panel-h .code{font:500 10px/1 var(--display);letter-spacing:.14em;color:var(--r4)}
.panel-h h2{margin:0;font:600 13px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.panel-h .tag{margin-left:auto;font:500 10px/1 var(--display);letter-spacing:.12em;padding:4px 6px;border:1px solid var(--line-2);color:var(--muted)}
.panel-h .tag.live-tag{color:var(--good);border-color:rgba(12,163,12,.35)}
.panel-h .tag.lag-tag{color:var(--warn);border-color:rgba(250,178,25,.3)}
.panel .sub{margin:4px 16px 0;color:var(--muted);font-size:12px}
.body{padding:12px 16px 16px}

/* ---- KPI tiles ---- */
.kpis{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:14px}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi.hero{grid-column:span 2}}
.kpi{padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px}
.kpi .label{font:500 11px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi .value{font:600 34px/1 var(--display);letter-spacing:.02em}
.kpi.hero .value{font-size:52px}
.kpi .note{color:var(--ink-2);font-size:12px}
.kpi .note b{color:var(--ink);font-weight:500}
.kpi .src{margin-top:auto;font:500 10px/1 var(--display);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.spark{width:100%;height:44px;display:block}

/* ---- map ---- */
.mapwrap{position:relative}
#map{display:block;width:100%;height:auto}
#map .sphere{fill:#0a0e11;stroke:var(--line-2);stroke-width:1}
#map .graticule{fill:none;stroke:rgba(120,160,190,.08);stroke-width:.6}
#map .land path,#map .land circle{fill:var(--r0);stroke:#07090b;stroke-width:.4;transition:fill .6s}
#map .land [data-bin="1"]{fill:var(--r1)}#map .land [data-bin="2"]{fill:var(--r2)}#map .land [data-bin="3"]{fill:var(--r3)}
#map .land [data-bin="4"]{fill:var(--r4)}#map .land [data-bin="5"]{fill:var(--r5)}
#map .land path:hover,#map .land circle:hover,#map .land .on{stroke:var(--ink);stroke-width:1.2}
#map .land circle{stroke-width:.8}
.legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font:500 11px/1 var(--display);letter-spacing:.06em}
.legend .ramp{display:flex;gap:2px}
.legend .ramp span{display:block;width:34px;height:8px}
.legend .ramp span:nth-child(1){background:var(--r0)}.legend .ramp span:nth-child(2){background:var(--r1)}.legend .ramp span:nth-child(3){background:var(--r2)}
.legend .ramp span:nth-child(4){background:var(--r3)}.legend .ramp span:nth-child(5){background:var(--r4)}.legend .ramp span:nth-child(6){background:var(--r5)}
.legend .ticks{display:flex;gap:2px}.legend .ticks span{width:34px;text-align:left}
.caveat{margin:10px 0 0;color:var(--muted);font-size:12px}

/* ---- bar lists (HTML bars: the row is the hit target) ---- */
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;cursor:default}
.bars .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);font-size:13px}
.bars .num{font:500 13px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.bars .track{grid-column:span 2;height:6px;background:rgba(57,135,229,.10);border-radius:0 2px 2px 0}
.bars .fill{height:100%;background:var(--blue);border-radius:0 3px 3px 0;min-width:2px;transition:width .6s}
.bars li.em .fill{background:var(--accent)}
.bars li:hover .name{color:var(--ink)}
.bars .rank{color:var(--muted);font:500 11px/1 var(--display);margin-right:6px}
.bars .flag{display:inline-block;min-width:24px;margin-right:8px;font:500 11px/1 var(--display);color:var(--r4);letter-spacing:.04em}

/* ---- svg charts ---- */
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .gridline{stroke:var(--line);stroke-width:1}
.chart .axis text{fill:var(--muted);font:500 10px var(--display);letter-spacing:.04em}
.chart .area,.spark .area{fill:rgba(57,135,229,.12)}
.chart .line,.spark .line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .col{fill:var(--blue)}
.chart .col:hover,.chart .col.on{fill:var(--r4)}
.chart .now,.spark .now{fill:var(--blue);stroke:var(--panel);stroke-width:2}
.chart .now-ring,.spark .now-ring{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:.6;animation:ring 2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.chart .now-ring{display:none}}
.chart .cross{stroke:var(--line-2);stroke-width:1}
.chart .hit{fill:transparent}

/* ---- tooltip ---- */
#tip{position:fixed;z-index:20;pointer-events:none;min-width:120px;padding:8px 10px;background:#0b0f12;border:1px solid var(--line-2);
  box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:12px;color:var(--ink-2);opacity:0;transition:opacity .12s}
#tip.on{opacity:1}
#tip strong{display:block;font:600 16px/1.1 var(--display);color:var(--ink)}

/* ---- findings ---- */
.findings{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.finding{padding:14px 16px}
.finding .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{font:500 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border:1px solid var(--line-2);color:var(--muted)}
.chip.conf{color:var(--r5);border-color:rgba(109,167,236,.35)}
.chip.sev-notable{color:var(--warn);border-color:rgba(250,178,25,.3)}
.findings-note{margin:4px 16px 12px;color:var(--muted);font-size:12px}
.finding h3{margin:0 0 6px;font:600 15px/1.3 var(--display);letter-spacing:.02em}
.finding .n{margin:0;color:var(--ink-2);font-size:12px}
.finding details{margin-top:10px;color:var(--ink-2)}
.finding summary{cursor:pointer;color:var(--r4);font:500 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.finding details p{margin:8px 0 0}
.finding details dt{margin-top:8px;color:var(--muted);font:500 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.finding details dd{margin:4px 0 0}

/* ---- footer ---- */
footer{max-width:1680px;margin:8px auto 0;padding:14px 24px 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
@media (max-width:900px){footer{grid-template-columns:1fr}}
footer h4{margin:0 0 6px;font:600 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
footer p{margin:0}
noscript p{margin:0 24px;color:var(--warn)}