/* Umbrae status — lookdev field: void, hairlines, chamfers, mono data.
   At rest, shadow; in motion, signal. Motion is one scan on refresh and the
   countdown; prefers-reduced-motion removes both. */
:root{
  color-scheme:dark;
  --void:#000;--panel:#050505;
  --t1:rgba(255,255,255,.95);--t2:rgba(255,255,255,.62);--t3:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.12);--line-hot:rgba(255,255,255,.3);
  --pass:#4ade80;--warn:#fb923c;--fail:#f87171;--unk:rgba(255,255,255,.42);--signal:#22d3ee;
  --display:'Space Grotesk',system-ui,sans-serif;--voice:'Inter',system-ui,sans-serif;
  --data:'JetBrains Mono',ui-monospace,'Fira Code',monospace;
  --cut:14px;--cut-sm:6px;--ease:cubic-bezier(.2,.9,.2,1);
}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;background:var(--void);color:var(--t1);font:14px/1.55 var(--voice);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--signal);outline-offset:3px}
[data-state=operational]{--st:var(--pass)}[data-state=degraded]{--st:var(--warn)}
[data-state=unavailable]{--st:var(--fail)}[data-state=unknown]{--st:var(--unk)}

.field{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 15%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 15%,transparent 75%)}
.cham{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.cham-sm{clip-path:polygon(0 0,calc(100% - var(--cut-sm)) 0,100% var(--cut-sm),100% 100%,var(--cut-sm) 100%,0 calc(100% - var(--cut-sm)))}

/* ── bars ── */
.bar{max-width:1120px;margin:0 auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.brand{font:400 19px var(--display);letter-spacing:.42em}
.brand span{margin-left:10px;font:400 10px var(--data);letter-spacing:.24em;color:var(--t3)}
.bar-link,.foot a{font:400 10px var(--data);letter-spacing:.18em;text-transform:uppercase;color:var(--t2)}
.bar-link:hover,.foot a:hover{color:var(--t1)}
.foot{border-top:1px solid var(--line);border-bottom:0;margin-top:72px;font:400 10px var(--data);letter-spacing:.14em;color:var(--t3);text-transform:uppercase}
.foot div{display:flex;gap:22px;flex-wrap:wrap}

main{max-width:1120px;margin:0 auto;padding:34px 28px 0}
.kicker{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 10px var(--data);letter-spacing:.22em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--t2)}
.live i{width:6px;height:6px;background:var(--signal);box-shadow:0 0 8px var(--signal);animation:pulse 2s ease-in-out infinite}
.live b{font-weight:400;color:var(--t1);font-variant-numeric:tabular-nums;display:inline-block;min-width:2ch;text-align:right}
@keyframes pulse{50%{opacity:.3}}

/* ── hero ── */
.hero{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:30px 32px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--line);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 120% at 0% 50%,color-mix(in srgb,var(--st) 14%,transparent),transparent 70%)}
.hero>*{position:relative}
.br{position:absolute;width:12px;height:12px;border-color:var(--st);pointer-events:none}
.br.tl{top:6px;left:6px;border-top:1px solid;border-left:1px solid}.br.tr{top:6px;right:6px;border-top:1px solid;border-right:1px solid}
.br.bl{bottom:6px;left:6px;border-bottom:1px solid;border-left:1px solid}.br.brr{bottom:6px;right:6px;border-bottom:1px solid;border-right:1px solid}
.scan{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0}
.scan::after{content:'';position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,rgba(34,211,238,.12),transparent)}
.hero.scanning .scan{opacity:1}.hero.scanning .scan::after{animation:sweep 900ms var(--ease) both}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

.gauge{position:relative;width:118px;height:118px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:4}
.gauge-track{stroke:rgba(255,255,255,.08)}
.gauge-fill{stroke:var(--st);stroke-dasharray:0 100;transition:stroke-dasharray 820ms var(--ease);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--st) 45%,transparent))}
.gauge-read{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:42px;font-family:var(--data)}
.gauge-read b{font-weight:200;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.gauge-read span{font-size:11px;color:var(--t3);margin-left:4px}

.verdict-tag{margin:0 0 10px;font:400 10px var(--data);letter-spacing:.26em;text-transform:uppercase;color:var(--st)}
.hero h1{margin:0;font:300 clamp(26px,3.4vw,40px)/1.1 var(--display);letter-spacing:.02em}
.hero-line{margin:12px 0 0;max-width:640px;color:var(--t2);font-size:14px}
.checked{margin:14px 0 0;font:400 10px var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.btn{align-self:start;padding:11px 18px;border:0;background:rgba(255,255,255,.08);color:var(--t1);font:400 10px var(--data);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background 120ms}
.btn:hover{background:rgba(34,211,238,.16)}.btn:disabled{opacity:.45;cursor:wait}

/* ── subsystem tiles ── */
.systems{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.sys{position:relative;display:block;padding:14px 14px 13px;border:1px solid var(--line);background:rgba(255,255,255,.015);transition:border-color 120ms}
.sys:hover{border-color:var(--line-hot)}
.sys::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--st)}
.sys-top{display:flex;justify-content:space-between;font:400 10px var(--data);letter-spacing:.2em;color:var(--t3)}
.sys-name{margin-top:10px;font:400 11px var(--data);letter-spacing:.16em;text-transform:uppercase;color:var(--t1)}
.sys-count{margin-top:6px;font:200 24px var(--data);font-variant-numeric:tabular-nums}
.sys-count span{font-size:12px;color:var(--t3)}
.sys-state{font:400 9px var(--data);letter-spacing:.22em;text-transform:uppercase;color:var(--st)}
.segs{display:flex;gap:2px;margin-top:10px;height:3px}
.segs i{flex:1;background:var(--st)}

/* ── attention ── */
.attention{margin-top:28px;border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 5%,transparent);padding:4px 18px 8px}
.attention .head{margin:14px 0 6px}
.att{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
.att:first-child{border-top:0}
.att .chip{grid-row:span 2}
.att b{font-weight:500}
.att p{margin:0;color:var(--t2);font-size:13px}

/* ── groups ── */
.head{display:flex;align-items:baseline;gap:14px;margin:0;font:300 13px var(--data);letter-spacing:.3em;text-transform:uppercase}
.head .num{font-weight:200;font-size:24px;letter-spacing:0;color:var(--t3)}
.head .rollup{margin-left:auto;font-size:10px;letter-spacing:.2em;color:var(--st)}
.group{margin-top:40px;scroll-margin-top:20px}
.group-note{margin:10px 0 12px;color:var(--t3);font-size:12.5px;max-width:760px}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 150px 92px;align-items:center;gap:18px;padding:13px 4px;border-bottom:1px solid var(--line);transition:background 120ms}
.row:hover{background:rgba(255,255,255,.02)}
.row.no-ref>div:first-child{grid-column:span 2}
.row h3{margin:0;font:400 14px var(--voice);color:var(--t1)}
.row p{margin:3px 0 0;font-size:12px;color:var(--t3)}
.ref{min-width:0;font:400 11px var(--data);letter-spacing:.04em;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.ref:hover{color:var(--signal)}
.tag{display:inline-block;margin-right:8px;padding:1px 5px;border:1px solid var(--line);font-size:9px;letter-spacing:.16em;color:var(--t3)}
.lat{display:flex;align-items:center;gap:10px;font:400 11px var(--data);color:var(--t2);font-variant-numeric:tabular-nums}
.lat .track{flex:1;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.lat .track i{display:block;height:100%;background:var(--st);opacity:.7;transform-origin:left;transform:scaleX(var(--w,0));transition:transform 600ms var(--ease)}
.lat span{min-width:56px;text-align:right}
.chip{justify-self:end;display:inline-flex;align-items:center;gap:7px;font:400 9.5px var(--data);letter-spacing:.2em;text-transform:uppercase;color:var(--st)}
.chip::before{content:'';width:6px;height:6px;background:var(--st);box-shadow:0 0 8px color-mix(in srgb,var(--st) 60%,transparent)}
/* Contracts: a two-column directory, not thirteen full-width rows. */
.group[data-group=contracts] .rows{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.group[data-group=contracts] .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px}
.group[data-group=contracts] .lat{display:none}

.empty{padding:22px 0;color:var(--t3);font:400 12px var(--data)}
.empty a{color:var(--signal)}

.coverage{margin-top:44px;border-left:1px solid var(--line-hot);padding:4px 0 4px 18px}
.coverage summary{cursor:pointer;font:400 10px var(--data);letter-spacing:.22em;text-transform:uppercase;color:var(--t2);list-style:none}
.coverage summary::-webkit-details-marker{display:none}
.coverage summary::before{content:'+ ';color:var(--signal)}
.coverage[open] summary::before{content:'– '}
.coverage p{max-width:820px;color:var(--t2);font-size:13px;line-height:1.75}

/* First arrival only: rows rise in; refreshes update in place. */
.arrive .row,.arrive .sys{animation:rise 320ms var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translate3d(0,6px,0)}}

@media (max-width:1000px){
  .systems{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row{grid-template-columns:minmax(0,1fr) 120px 86px}
  .row .ref{grid-column:1/-1;grid-row:2}
  .row.no-ref>div:first-child{grid-column:auto}
  .group[data-group=contracts] .rows{grid-template-columns:1fr}
  .group[data-group=contracts] .row{grid-template-columns:minmax(0,1fr) 86px}
}
@media (max-width:620px){
  .bar{padding:18px 18px}.brand{font-size:15px;letter-spacing:.34em}
  main{padding:24px 18px 0}
  .hero{grid-template-columns:auto 1fr;gap:18px;padding:22px 18px}
  .gauge{width:88px;height:88px}.gauge-read{padding-top:30px}.gauge-read b{font-size:26px}
  .btn{grid-column:1/-1;justify-self:start}
  .systems{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys:last-child:nth-child(odd){grid-column:span 2}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .row .lat{grid-column:1;grid-row:3}
  .row .chip{grid-column:2;grid-row:1}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}