:root{
  --void:#0A0E13; --plate:#10171F; --plate2:#161F29; --rule:#22303D;
  --ink:#CBD8E4; --dim:#6E8296; --faint:#3C4C5C;
  --held:#3F8F7C; --fresh:#4E80B8; --rsv:#2D3E4D;
  --drift:#C79A3E; --breach:#D4485E;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void); color:var(--ink); font-family:var(--mono);
  font-size:13px; line-height:1.55; letter-spacing:-.01em;
  padding:0 20px 72px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto}

/* ---------- masthead ---------- */
.mast{padding:44px 0 26px;border-bottom:1px solid var(--rule)}
.eyebrow{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px
}
h1{
  font-size:clamp(26px,4.6vw,40px);font-weight:600;letter-spacing:-.045em;
  line-height:1.05;color:#EAF2F9
}
h1 em{font-style:normal;color:var(--faint)}
.sub{max-width:60ch;margin-top:14px;color:var(--dim);font-size:13px}
.sub b{color:var(--ink);font-weight:500}
.local{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--held)
}
.local::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--held);box-shadow:0 0 0 3px rgba(63,143,124,.18)
}

/* ---------- case picker ---------- */
.cases{display:flex;flex-wrap:wrap;gap:6px;padding:22px 0 0}
.case{
  appearance:none;border:1px solid var(--rule);background:var(--plate);
  color:var(--dim);font:inherit;font-size:11.5px;padding:7px 13px;
  border-radius:2px;cursor:pointer;transition:.14s
}
.case:hover{border-color:var(--faint);color:var(--ink)}
.case[aria-selected="true"]{background:var(--plate2);border-color:var(--held);color:#EAF2F9}
.case:focus-visible{outline:2px solid var(--fresh);outline-offset:2px}
.blurb{color:var(--dim);font-size:12px;margin-top:14px;min-height:1.55em}

/* ---------- verdict ---------- */
.verdict{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:22px 0 0;padding:15px 18px;border-radius:2px;
  border:1px solid var(--rule);background:var(--plate);
  border-left:3px solid var(--rule)
}
.verdict[data-v="unsafe"]{border-left-color:var(--breach)}
.verdict[data-v="review"]{border-left-color:var(--drift)}
.verdict[data-v="compatible"]{border-left-color:var(--held)}
.vtag{font-size:15px;font-weight:600;letter-spacing:-.02em}
[data-v="unsafe"] .vtag{color:var(--breach)}
[data-v="review"] .vtag{color:var(--drift)}
[data-v="compatible"] .vtag{color:var(--held)}
.vnote{color:var(--dim);font-size:12px}

/* ---------- two column ---------- */
.cols{display:grid;grid-template-columns:330px 1fr;gap:26px;margin-top:26px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.panel-h{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--rule)
}

/* ---------- findings ---------- */
.find{padding:12px 0 13px;border-bottom:1px solid var(--rule)}
.find:last-child{border-bottom:0}
.fhead{display:flex;align-items:baseline;gap:9px}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;transform:translateY(-1px)}
.f-critical .dot{background:var(--breach)}
.f-warning  .dot{background:var(--drift)}
.f-ok       .dot{background:var(--held)}
.fcode{font-size:9.5px;letter-spacing:.16em;color:var(--faint);margin-left:auto}
.ftitle{font-size:12.5px;color:#EAF2F9;font-weight:500;letter-spacing:-.015em}
.f-ok .ftitle{color:var(--ink);font-weight:400}
.fdetail{color:var(--dim);font-size:11.5px;margin-top:5px;padding-left:15px;line-height:1.6}

/* ---------- slot map ---------- */
.mapscroll{overflow-x:auto;padding-bottom:6px}
.map{min-width:640px}
.ruler{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:9.5px;letter-spacing:.1em;margin-bottom:9px}
.ruler .bar{flex:1;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:5px}
.slotno{width:52px;flex:0 0 52px}

.row{display:flex;gap:10px;margin-bottom:3px;align-items:stretch}
.sn{
  width:52px;flex:0 0 52px;color:var(--faint);font-size:10.5px;
  display:flex;align-items:center;padding-top:1px
}
.pair{flex:1;border-left:2px solid var(--rule);padding-left:9px}
.row[data-s="clobbered"] .pair{border-left-color:var(--breach)}
.row[data-s="gapfill"]   .pair{border-left-color:var(--held)}
.row[data-s="added"]     .pair{border-left-color:var(--fresh)}
.row[data-s="vacated"]   .pair{border-left-color:var(--drift)}

.strip{display:flex;height:26px;gap:1px;margin-bottom:1px}
.strip:last-child{margin-bottom:0}
.seg{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:10.5px;white-space:nowrap;border-radius:1px;padding:0 4px;
  letter-spacing:-.02em
}
.seg.free{background:repeating-linear-gradient(135deg,transparent,transparent 4px,rgba(60,76,92,.22) 4px,rgba(60,76,92,.22) 5px)}
.seg.gap{background:var(--rsv);color:var(--dim)}
.seg.var{background:var(--plate2);color:var(--ink);border:1px solid var(--rule)}
.row[data-s="clobbered"] .strip:last-child .seg.var{background:rgba(212,72,94,.13);border-color:rgba(212,72,94,.5);color:#F0A9B4}
.row[data-s="added"]     .strip:last-child .seg.var{background:rgba(78,128,184,.13);border-color:rgba(78,128,184,.5);color:#A9C8E8}
.row[data-s="gapfill"]   .strip:last-child .seg.var{background:rgba(63,143,124,.14);border-color:rgba(63,143,124,.5);color:#9BD3C4}
.seg .ty{color:var(--faint);margin-left:6px;font-size:9.5px}
.vlabel{
  width:26px;flex:0 0 26px;font-size:9px;color:var(--faint);
  display:flex;align-items:center;letter-spacing:.06em
}
.fold{
  margin:3px 0 3px 62px;padding:6px 10px;color:var(--faint);font-size:10.5px;
  border:1px dashed var(--rule);border-radius:2px;letter-spacing:.04em
}

/* ---------- input ---------- */
.byo{margin-top:34px;border-top:1px solid var(--rule);padding-top:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
textarea{
  width:100%;height:150px;background:var(--plate);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;padding:11px;
  font:inherit;font-size:11px;line-height:1.5;resize:vertical
}
textarea:focus{outline:none;border-color:var(--fresh)}
.go{
  margin-top:14px;appearance:none;border:1px solid var(--held);
  background:rgba(63,143,124,.1);color:#9BD3C4;font:inherit;font-size:12px;
  padding:9px 20px;border-radius:2px;cursor:pointer;transition:.14s
}
.go:hover{background:rgba(63,143,124,.2)}
.go:focus-visible{outline:2px solid var(--fresh);outline-offset:2px}
.err{color:var(--breach);font-size:11.5px;margin-top:10px;min-height:1.4em}
.hint{color:var(--dim);font-size:11.5px;margin-top:12px;max-width:70ch}
code{background:var(--plate2);padding:1.5px 5px;border-radius:2px;color:#9BD3C4;font-size:11px}

/* ---------- reserved slots ---------- */
.rsv-tbl{margin-top:34px;border-top:1px solid var(--rule);padding-top:24px}
.rsv-row{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.rsv-row:last-child{border-bottom:0}
.rsv-k{width:230px;flex:0 0 230px;color:var(--ink);font-size:11.5px}
.rsv-v{color:var(--faint);font-size:10.5px;word-break:break-all;flex:1;min-width:200px}
@media(max-width:600px){.rsv-k{width:100%;flex:1 1 100%}}

footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);color:var(--faint);font-size:11px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* footer + colophon */
footer p{margin-bottom:8px}
.colophon a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule)}
.colophon a:hover{color:var(--ink);border-bottom-color:var(--faint)}
.colophon a:focus-visible{outline:2px solid var(--fresh);outline-offset:2px}
.mapscroll:focus-visible{outline:2px solid var(--fresh);outline-offset:4px}

/* sponsor slot — static image and a link, never a script */
.sponsor{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:34px;padding:14px 16px;
  border:1px solid var(--rule);border-radius:2px;background:var(--plate)
}
.sponsor-tag{
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  padding:3px 7px;border:1px solid var(--rule);border-radius:2px;flex:0 0 auto
}
.sponsor a{color:var(--dim);text-decoration:none;font-size:11.5px}
.sponsor a:hover{color:var(--ink)}
.sponsor a:focus-visible{outline:2px solid var(--fresh);outline-offset:3px}
.sponsor-live{display:flex;align-items:center;gap:12px}
.sponsor-live img{display:block;border-radius:2px;max-width:100%;height:auto}