/* The Fold — one stylesheet, no imports, no remote fonts.
   An instrument, not a dashboard: the numbers are the picture. */

:root{
  --bg:#0b0e12; --bg2:#111620; --line:#1e2735; 
  --ink:#dbe3ef; --dim:#8794a8; --faint:#5b6779;
  --ok:#3fd68a; --fail:#ff5f56; --warn:#f5b544; --unk:#6b7a90;
  --accent:#7fd7ff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(127,215,255,.3)}
a:hover{border-bottom-color:var(--accent)}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.mono{font-family:var(--mono); font-size:12.5px; letter-spacing:-.01em}

/* masthead ------------------------------------------------------------- */
.masthead{padding:44px 0 26px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d1219 0%,var(--bg) 100%)}
.masthead h1{
  margin:0 0 12px; font-family:var(--mono); font-size:clamp(30px,7vw,58px);
  font-weight:600; letter-spacing:.16em; line-height:1;
}
.tag{margin:0 0 14px; max-width:62ch; color:var(--ink); font-size:16px}
.by{margin:0; color:var(--dim); font-size:13px}

/* nav ------------------------------------------------------------------ */
.nav{position:sticky; top:0; z-index:5; background:rgba(11,14,18,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{
  flex:0 0 auto; padding:13px 14px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.11em; color:var(--faint); border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--dim)}
.nav a.on{color:var(--ink); border-bottom-color:var(--accent)}

.main{padding:30px 0 60px}
.view h2{margin:0 0 10px; font-size:24px; font-weight:600; letter-spacing:-.01em}
.lede{margin:0 0 22px; max-width:74ch; color:var(--dim); font-size:14.5px}
.lede strong{color:var(--ink); font-weight:600}

/* cards ---------------------------------------------------------------- */
.slots{display:flex; flex-direction:column; gap:14px}
.card{border:1px solid var(--line); border-left:3px solid var(--line);
  background:var(--bg2); border-radius:3px; padding:16px 18px}
.card.good{border-left-color:var(--ok)}
.card.bad{border-left-color:var(--fail)}
.card.warn{border-left-color:var(--warn)}
.card.plain{border-left-color:var(--line); background:transparent}
.card.err{border-left-color:var(--fail)}
.card-h{margin:0 0 12px}
.card h3{margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.09em;
  font-weight:600; color:var(--ink)}
.sub{margin:3px 0 0; color:var(--faint); font-size:12.5px}
.note{margin:12px 0 0; color:var(--faint); font-size:12.5px; line-height:1.65; max-width:82ch}

/* verdict lines -------------------------------------------------------- */
.v{display:flex; align-items:flex-start; gap:9px; margin:0 0 11px; font-size:13.5px}
.v .dot{flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:7px}
.v-ok .dot{background:var(--ok); box-shadow:0 0 0 3px rgba(63,214,138,.15)}
.v-fail .dot{background:var(--fail); box-shadow:0 0 0 3px rgba(255,95,86,.15)}
.v-warn .dot{background:var(--warn); box-shadow:0 0 0 3px rgba(245,181,68,.15)}
.v-unknown .dot{background:var(--unk)}
.v-ok .vl{color:var(--ok)}
.v-fail .vl{color:var(--fail); font-weight:600}
.v-warn .vl{color:var(--warn)}
.v-unknown .vl{color:var(--dim)}

/* key/value grid ------------------------------------------------------- */
.grid{display:flex; flex-direction:column; gap:5px; margin-top:10px}
.kv{display:grid; grid-template-columns:170px 1fr; gap:12px; align-items:baseline}
.kv .k{color:var(--faint); font-size:11.5px; font-family:var(--mono);
  letter-spacing:.06em; text-transform:uppercase}
.kv .val{color:var(--ink); font-size:13px; word-break:break-all; min-width:0}
.kv .val.mono{font-family:var(--mono); font-size:12px; color:#b9c7db}
@media(max-width:640px){ .kv{grid-template-columns:1fr; gap:1px} }

/* the fold ------------------------------------------------------------- */
.fold{border-top:1px solid var(--line); padding:13px 0 4px}
.fold:first-of-type{border-top:0}
.fold-h{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.fold-h .v{margin:0}
.ev-kind{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--accent);
  border:1px solid rgba(127,215,255,.25); border-radius:2px; padding:1px 6px}
.ev-id,.ev-at{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.ev-detail{margin:7px 0 0; font-size:13px; color:var(--dim); word-break:break-word}
.toggle{margin:9px 0 0; background:transparent; border:1px solid var(--line);
  color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:4px 9px; border-radius:2px; cursor:pointer}
.toggle:hover{border-color:var(--faint); color:var(--ink)}
.fold-body{margin:10px 0 6px; padding:10px 12px; background:#0a0d12;
  border:1px solid var(--line); border-radius:2px; overflow-x:auto}
.step{display:flex; align-items:center; gap:10px; padding:2px 0; white-space:nowrap}
.step .idx{flex:0 0 34px; font-family:var(--mono); font-size:10.5px; color:var(--faint);
  text-align:right; text-transform:uppercase; letter-spacing:.06em}
.step .sib{color:var(--dim)}
.step .arrow{color:var(--faint)}
.step .outh{color:var(--ok)}
.step .stepnote{color:var(--faint); font-size:11.5px; white-space:normal}
.step.final{margin-top:5px; padding-top:7px; border-top:1px dashed var(--line)}
.step.final .outh{color:var(--accent)}

/* witnesses ------------------------------------------------------------ */
.wslot{margin-top:4px}
.wline{padding:9px 0; border-top:1px solid var(--line)}
.wline:first-child{border-top:0; padding-top:0}

/* picker --------------------------------------------------------------- */
.pick{margin:0 0 18px}
.pick-l{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  color:var(--faint); text-transform:uppercase; margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:6px; max-height:230px; overflow-y:auto}
.chip{background:transparent; border:1px solid var(--line); color:var(--dim);
  font-family:var(--mono); font-size:11.5px; padding:4px 9px; border-radius:2px; cursor:pointer}
.chip:hover{border-color:var(--faint); color:var(--ink)}
.chip.on{border-color:var(--accent); color:var(--accent); background:rgba(127,215,255,.07)}
.chip.more{border-style:dashed}
.chip:disabled{opacity:.5; cursor:default}

/* limits --------------------------------------------------------------- */
.prose{max-width:76ch}
.limit{border-top:1px solid var(--line); padding:16px 0}
.limit h3{margin:0 0 6px; font-size:15px; font-weight:600; color:var(--ink)}
.limit p{margin:0; color:var(--dim); font-size:14px}
.limit.last h3{color:var(--ok)}

/* busy / footer -------------------------------------------------------- */
.busy{display:flex; align-items:center; gap:10px; color:var(--faint); font-size:13px; padding:6px 0}
.spin{width:9px; height:9px; border:1.5px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .spin{animation:none} }
.tick{margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.foot{border-top:1px solid var(--line); padding:24px 0 44px; margin-top:20px}
.foot p{margin:0 0 8px; color:var(--faint); font-size:12.5px}
.foot code{font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.foot .fine{max-width:84ch; line-height:1.7}
#counter,#netcount{color:var(--accent); font-family:var(--mono)}

/* the pulse ------------------------------------------------------------ */
.stats{display:flex; flex-wrap:wrap; gap:26px; margin:0 0 22px; padding:16px 18px;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--bg2); border-radius:3px}
.stat{min-width:130px}
.stat-n{font-family:var(--mono); font-size:26px; font-weight:600; color:var(--accent); line-height:1.15}
.stat-l{font-size:12px; color:var(--dim); margin-top:3px}
.stat-s{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px}

.pulse{display:flex; flex-direction:column; gap:3px; overflow-x:auto}
.strip,.strip-hdr{display:flex; align-items:center; gap:10px; min-width:640px}
.strip-day{flex:0 0 82px; font-family:var(--mono); font-size:11px; color:var(--faint)}
.strip-n{flex:0 0 62px; font-family:var(--mono); font-size:11px; color:var(--dim); text-align:right}
.strip-bar{flex:1; display:flex; gap:1px; height:17px; background:#070a0e;
  border:1px solid var(--line); border-radius:2px; padding:1px; overflow:hidden}
.strip-bar.missing{align-items:center; justify-content:center}
.missing-l{font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.05em}
.cell{flex:1 1 0; min-width:0; background:#0d1218; border-radius:.5px}
.cell.c1{background:#1f6b47}
.cell.c2{background:#2fa96c}
.cell.c3{background:var(--ok); box-shadow:0 0 3px rgba(63,214,138,.6)}
.strip-ticks{flex:1; display:flex; justify-content:space-between; padding:0 2px}
.tick-l{font-family:var(--mono); font-size:9.5px; color:var(--faint)}
.strip-hdr .strip-n{font-size:9.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.07em}

/* the fold, drawn ------------------------------------------------------ */
.folddiag{display:block; margin:4px 0 14px; max-width:600px}
.fd-trunk{stroke:var(--line); stroke-width:1}
.fd-branch{stroke:#2b3a4d; stroke-width:1}
.fd-sib{fill:#3d5468}
.fd-node{fill:var(--ok)}
.fd-leaf{fill:var(--accent)}
.fd-root{fill:var(--accent)}
.fd-root.ok{fill:var(--ok)}
.fd-root.bad{fill:var(--fail)}
.fd-t{font-family:var(--mono); font-size:9.5px; fill:#7f8fa3}
.fd-t.dim{fill:#5b6779}
.fd-t.root{fill:var(--ok); font-size:10.5px}
.cell.future{background:repeating-linear-gradient(135deg,#0d1218 0 2px,#12181f 2px 4px); opacity:.65}