/* ═══════════════════════════════════════════════════════════════════════════
   CORPUS CONSOLE — shared design system
   One operator instrument. Services change their nouns, their ladder and their
   numbers; they do not change the shell.

   THE SIGNATURE DEVICE IS THE HATCH.
   All three briefs independently demand the same hard thing: absence must be
   as legible as presence. A lighter tint does not do that — it reads as "less",
   not as "missing". So every shortfall in this console is drawn as a hatched
   area with a real edge. What is not there occupies space and has a boundary.

   SEMANTIC COLOUR IS LICENSED IN FOUR PLACES AND NOWHERE ELSE:
     --measured  a value that exists and was derived
     --gap       expected and absent  (NOT a failure — a shortfall)
     --fail      something broke
     --stale     true once, not known to be true now
   Service accents are identity only. They never encode state.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --pg:#EEF1F5;
  --panel:#FFFFFF;
  --panel-2:#F7F9FB;
  --panel-3:#EDF1F5;
  --line:#DCE2E9;
  --line-2:#C3CCD6;

  --ink:#101720;          /* 18.02:1 */
  --ink-2:#4A5663;        /*  7.49:1 */
  --ink-3:#6B7683;        /*  4.62:1 */

  --measured:#1F3D5C;     /* 11.17:1 */
  --gap:#8A5E0F;          /*  5.69:1 */
  --gap-wash:#F5EBD6;
  --fail:#A32C22;         /*  7.14:1 */
  --fail-wash:#F8E9E7;
  --stale:#6B7683;

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --r:6px;
  --gut:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--pg); color:var(--ink);
  font:14px/1.45 var(--ui);
  font-variant-numeric:tabular-nums;      /* counts must not jitter as they update */
  -webkit-font-smoothing:antialiased;
}
.num,.n,td.num,th.num{font-variant-numeric:tabular-nums}

/* ── the hatch. absence, drawn. ────────────────────────────────────────── */
.hatch{
  background-image:repeating-linear-gradient(135deg,
    transparent 0 3px, var(--hc,rgba(138,94,15,.30)) 3px 4px);
  background-color:var(--hb,#FBF6EA);
}
.hatch-fail{ --hc:rgba(163,44,34,.30); --hb:#FBEEEC }
.hatch-none{ --hc:rgba(107,118,131,.26); --hb:#F2F4F7 }

/* ═══ shell ═══════════════════════════════════════════════════════════════ */
.top{
  position:sticky; top:0; z-index:40;
  background:var(--panel); border-bottom:1px solid var(--line-2);
  display:flex; align-items:stretch; gap:0; min-height:52px;
}
.brandcell{
  display:flex; align-items:center; gap:10px; padding:0 18px;
  border-right:1px solid var(--line); flex:none;
}
.brandcell .bm{width:11px;height:11px;border-radius:2px;background:var(--measured);flex:none}
.brandcell .bt{font-size:13px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}

/* service switcher — the top-level control */
.svcbar{display:flex; align-items:stretch; overflow-x:auto; flex:1; min-width:0}
.svc{
  display:flex; align-items:center; gap:8px; padding:0 15px;
  border:0; border-right:1px solid var(--line); background:transparent;
  font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer;
  white-space:nowrap; position:relative;
}
.svc .dot{width:9px;height:9px;border-radius:2px;background:var(--m);flex:none}
.svc .sname{font-weight:600}
.svc .sstudio{font-size:10.5px;color:var(--ink-3)}
.svc:hover{background:var(--panel-2)}
.svc[aria-current="true"]{color:var(--ink);background:var(--panel-2)}
.svc[aria-current="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--m);
}
.svc[data-pending="true"]{opacity:.55}
.svc[data-pending="true"] .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--m)}
/* flex:none + an unbounded string once widened the whole bar past the viewport.
   The cap is the guard: a long "as of" value now truncates instead of pushing. */
.asof{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:0 16px;border-left:1px solid var(--line);flex:0 0 auto;text-align:right;
  max-width:210px;min-width:0;overflow:hidden;
}
.asof .k,.asof .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asof .k{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.asof .v{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.asof.is-stale .v{color:var(--gap)}
.asof.is-stale .k::after{content:" · dated";color:var(--gap)}

.body{display:flex;align-items:flex-start;min-height:calc(100vh - 52px)}
.side{
  flex:none;width:186px;position:sticky;top:52px;align-self:flex-start;
  padding:14px 0;border-right:1px solid var(--line);background:var(--panel);
  min-height:calc(100vh - 52px);
}
.side .grp{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 16px 5px;font-weight:700}
.nav{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
  font-size:13px;color:var(--ink-2);padding:7px 16px;cursor:pointer;border-left:2px solid transparent}
.nav:hover{background:var(--panel-2);color:var(--ink)}
.nav[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--panel-2);
  border-left-color:var(--measured)}
.main{flex:1;min-width:0;padding:20px var(--gut) 70px}

/* ═══ blocks ══════════════════════════════════════════════════════════════ */
.hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.hd h1{font-size:19px;letter-spacing:-.02em;margin:0;font-weight:650}
.hd .sub{font-size:12px;color:var(--ink-3)}
.srcline{font-size:11.5px;color:var(--ink-3);margin:0 0 16px}
.srcline code{font-family:var(--mono);font-size:11px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden}
.panel > .ph{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.panel > .ph h2{font-size:12.5px;margin:0;font-weight:650;letter-spacing:-.005em}
.panel > .ph .pn{font-size:11px;color:var(--ink-3)}
.panel > .ph .pn.gap{color:var(--gap);font-weight:600}
.pb{padding:14px}
.pb.flush{padding:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:1080px){.grid2,.grid3{grid-template-columns:1fr}}

/* ── LADDER: the funnel. handles 2 stages and 19 with the same component ── */
.ladder{display:flex;flex-direction:column}
.lrow{display:grid;grid-template-columns:minmax(120px,190px) 68px 1fr 96px;
  gap:10px;align-items:center;padding:4px 0;min-width:0}
.lrow .lname{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lnum{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--ink)}
.lbar{position:relative;height:17px;border:1px solid var(--line-2);border-radius:2px;
  overflow:hidden;background:var(--panel-3);min-width:0}
.lbar .fill{position:absolute;inset:0 auto 0 0;background:var(--measured)}
.lbar .short{position:absolute;top:0;bottom:0;right:0;border-left:1px solid var(--gap)}
.lrow .ldelta{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right}
.lrow .ldelta.big{color:var(--gap);font-weight:700}
.lrow.is-cliff{background:var(--gap-wash);margin:2px -8px;padding:5px 8px;border-radius:3px}
.lrow.is-cliff .lname{color:var(--gap);font-weight:700}
.cliffnote{font-size:11.5px;color:var(--gap);margin:6px 0 0;font-weight:600}

/* ── holdings ── */
.holds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line)}
.hold{background:var(--panel);padding:10px 12px}
.hold .hk{font-size:10.5px;color:var(--ink-3);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hold .hv{font-family:var(--mono);font-size:17px;color:var(--ink);letter-spacing:-.01em}
.hold.is-gap{background:var(--gap-wash)}
.hold.is-gap .hv{color:var(--gap)}
.hold.is-none .hv{color:var(--ink-3);font-size:13px}

/* ── composition: totals with the deep-tier gap INSIDE the same bar ── */
.comp{display:flex;flex-direction:column;gap:9px}
.crow{display:grid;grid-template-columns:104px 1fr 118px;gap:10px;align-items:center}
.crow .cn{font-size:12px;color:var(--ink-2)}
.cbar{position:relative;height:19px;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.cbar .cdeep{position:absolute;inset:0 auto 0 0;background:var(--measured)}
.crow .cv{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}
.crow .cv b{color:var(--gap)}
.crow.is-zero .cv b{color:var(--gap)}

/* ── pipeline strip ── */
.pipe{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;
  overflow:hidden}
.pcell{background:var(--panel);padding:9px 12px;flex:1;min-width:0}
.pcell .pk{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pcell .pv{font-family:var(--mono);font-size:16px;margin-top:2px}
.pcell.is-fail .pv{color:var(--fail)}
.pcell.is-zero .pv{color:var(--gap)}
.pcell.is-none .pv{color:var(--ink-3);font-size:12px}
.pnote{font-size:11.5px;color:var(--ink-2);line-height:1.55;margin:9px 0 0}
.pnote.warn{color:var(--fail)}
.pnote.shared{color:var(--gap)}

/* ── tables ── */
.tw{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;font-size:12.5px}
table.dt th{
  text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line-2);
  background:var(--panel-2);position:sticky;top:52px;white-space:nowrap;
}
table.dt th.num,table.dt td.num{text-align:right;font-family:var(--mono)}
table.dt td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:middle}
table.dt tr:last-child td{border-bottom:0}
table.dt tbody tr:hover td{background:var(--panel-2)}
table.dt tbody tr{cursor:pointer}
table.dt td.ti{color:var(--ink);font-weight:600}
table.dt tr.is-bad td{background:var(--fail-wash)}
table.dt tr.is-bad:hover td{background:#F5DFDC}

/* ── the three empty meanings. never one visual language. ── */
.e{font-size:11px;font-family:var(--mono);padding:1px 6px;border-radius:3px;
  display:inline-block;white-space:nowrap}
.e-none{color:var(--ink-3);background:var(--panel-3);border:1px dashed var(--line-2)}
.e-fail{color:var(--fail);background:var(--fail-wash);border:1px solid #E3B7B2}
.e-filt{color:var(--ink-3);background:transparent;border:1px solid var(--line-2);font-style:italic}
.e-gap {color:var(--gap);background:var(--gap-wash);border:1px solid #E0C99A}

/* ── chips ── */
.chip{font-size:10.5px;padding:2px 7px;border-radius:3px;display:inline-block;
  font-weight:650;letter-spacing:.02em;white-space:nowrap}
.chip.measured{background:#E7EDF4;color:var(--measured)}
.chip.hero{background:var(--measured);color:#fff}
.chip.deep{background:#E7EDF4;color:var(--measured)}
.chip.shallow{background:var(--gap-wash);color:var(--gap)}
.chip.degenerate,.chip.boundary{background:var(--fail-wash);color:var(--fail)}
.chip.none{background:var(--panel-3);color:var(--ink-3);border:1px dashed var(--line-2)}

/* ── item detail ── */
.ihead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:14px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.ihead .it{font-size:17px;font-weight:650;letter-spacing:-.02em;margin:0 0 3px}
.ihead .im{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.ihead .ic{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.back{border:0;background:transparent;font:inherit;font-size:12px;color:var(--measured);
  cursor:pointer;padding:0;margin-bottom:8px;display:inline-block}
.back:hover{text-decoration:underline}

/* counts with denominators — a total without one is not allowed here */
.cnts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--line)}
.cnt{background:var(--panel);padding:11px 13px}
.cnt .ck{font-size:10.5px;color:var(--ink-3);margin-bottom:4px}
.cnt .cvv{font-family:var(--mono);font-size:19px;letter-spacing:-.01em}
.cnt .cd{font-size:10.5px;color:var(--ink-3);margin-top:3px}
.cnt.is-unknown{background:var(--panel-3)}
.cnt.is-unknown .cvv{color:var(--ink-3);font-size:13px}

/* per-item stage ladder */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .sd{width:11px;height:11px;border-radius:50%;justify-self:center}
.step.done  .sd{background:var(--measured)}
.step.absent .sd{background:var(--gap-wash);box-shadow:inset 0 0 0 2px var(--gap)}
.step.unknown .sd{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.step.fail  .sd{background:var(--fail)}
.step .sl{font-size:12.5px;color:var(--ink)}
.step.unknown .sl,.step.absent .sl{color:var(--ink-2)}
.step .sx{font-size:11px;color:var(--ink-3);font-family:var(--mono);text-align:right}

/* field completeness — absent fields must be VISIBLE, not omitted */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(154px,1fr));gap:8px}
.f{border:1px solid var(--line-2);border-radius:3px;padding:9px 10px;min-height:52px;
  display:flex;flex-direction:column;justify-content:center;gap:3px}
.f .fl{font-size:11.5px;font-weight:600}
.f .fs{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.f.present{background:var(--panel);border-color:var(--line-2)}
.f.present .fl{color:var(--ink)}
.f.present .fs{color:var(--measured)}
.f.absent{border-color:var(--gap);border-style:dashed}
.f.absent .fl{color:var(--gap)}
.f.absent .fs{color:var(--gap)}

/* scene inspector */
.mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:1px;
  background:var(--line)}
.met{background:var(--panel);padding:9px 11px}
.met .mk{font-size:10px;color:var(--ink-3)}
.met .mv{font-family:var(--mono);font-size:15px;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11px;padding:2px 8px;border:1px solid var(--line-2);border-radius:10px;
  color:var(--ink-2);background:var(--panel-2)}

/* failure list */
.fails{display:flex;flex-direction:column}
.fl2{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:minmax(140px,200px) 1fr;gap:12px;align-items:baseline}
.fl2:last-child{border-bottom:0}
.fl2 .fk{font-size:12px;font-weight:650;color:var(--fail)}
.fl2 .fi{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);display:block;
  font-weight:400;margin-top:2px}
.fl2 .fd{font-size:12px;color:var(--ink-2);line-height:1.5}

/* unknowns — what the briefs do not say */
.unk{display:flex;flex-direction:column}
.uq{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:76px 1fr;gap:12px;align-items:baseline}
.uq:last-child{border-bottom:0}
.uq .uw{font-size:10.5px;font-family:var(--mono);color:var(--gap);font-weight:700}
.uq .ut{font-size:12px;color:var(--ink-2);line-height:1.55}

/* pending service */
.pend{padding:44px 20px;text-align:center}
.pend .pt{font-size:15px;font-weight:650;margin-bottom:6px}
.pend .pd{font-size:12.5px;color:var(--ink-3);max-width:52ch;margin:0 auto;line-height:1.6}

.foot{font-size:11.5px;color:var(--ink-3);line-height:1.65;margin-top:18px;
  padding-top:12px;border-top:1px solid var(--line-2);max-width:88ch}
.foot b{color:var(--ink-2)}

@media(max-width:820px){
  .side{display:none}
  .lrow{grid-template-columns:1fr 62px;grid-template-areas:"n v" "b b" "d d";gap:4px 10px}
  .lrow .lname{grid-area:n}.lrow .lnum{grid-area:v}
  .lbar{grid-area:b}.lrow .ldelta{grid-area:d;text-align:left}
  .crow{grid-template-columns:1fr;gap:4px}
  .crow .cv{text-align:left}
  table.dt th{position:static}
}