/* Knox Rank — shared design system.
   Palette from claude/brand-print-specs.md. The rank scale is separate from the
   brand accent by design: gold is identity, the rank colours are status, and the
   two must never be confused on screen. Both scales were validated against their
   surfaces for lightness band, chroma floor, CVD separation and contrast. */
:root{
  --ground:#0B1026; --panel:#0E1430; --raised:#161E42; --raised-2:#1C2650;
  --edge:rgba(201,169,97,.20); --edge-soft:rgba(138,147,168,.18);
  --gold:#C9A961; --gold-bright:#E8CE93; --gold-micro:#CDAE6A;
  --ivory:#F2EFE8; --steel:#8A93A8; --steel-dim:#6C748A;

  /* Rank scale — diverging around the only threshold that matters (top 3).
     Validated dark: CVD ΔE 16.9 deutan, normal 20.2, all ≥3:1 on #0E1430. */
  --rank-top3:#37A173;   /* 1–3   in the pack */
  --rank-mid:#5D74BE;    /* 4–10  visible if they scroll */
  --rank-low:#C25F4A;    /* 11–20 effectively invisible */
  --rank-none:rgba(138,147,168,.14); /* not found — drawn as an outline, not a fill */

  --good:#37A173; --warn:#C89A4A; --bad:#C25F4A;

  --serif:'Cormorant Garamond',Georgia,serif;
  --caps:'Cinzel',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(201,169,97,.10), transparent 62%),
    var(--ground);
  color:var(--ivory);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--gold-bright);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.stack{display:flex;flex-direction:column;gap:20px}

/* header */
header.top{border-bottom:1px solid var(--edge);background:rgba(11,16,38,.95);backdrop-filter:blur(16px);position:sticky;top:0;z-index:60}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.mark{display:flex;align-items:center;gap:12px}
.dial{width:28px;height:28px;flex:none}
.wordmark{font-family:var(--caps);font-size:15px;letter-spacing:.30em;color:var(--gold);text-transform:uppercase;line-height:1.2}
.sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel-dim);margin-top:3px}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1A1200;border:none;
  padding:15px 24px;border-radius:3px;font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%}
.btn.ghost{background:none;border:1px solid var(--gold);color:var(--gold-bright);font-weight:500}
.btn.ghost:hover:not(:disabled){background:rgba(201,169,97,.10)}
.btn.small{padding:9px 15px;font-size:10.5px;letter-spacing:.14em}

/* panels */
.panel{background:linear-gradient(180deg,rgba(22,30,66,.72),rgba(14,20,48,.55));
  border:1px solid var(--edge);border-radius:4px;padding:24px}
.eyebrow{font-family:var(--caps);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
h1.display{font-family:var(--serif);font-weight:300;font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h2.sec{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.2vw,32px);line-height:1.14;margin-bottom:6px;text-wrap:balance}
h3.lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-micro);margin-bottom:12px}
.muted{color:var(--steel);font-size:14px}
.tiny{font-size:11.5px;color:var(--steel-dim);line-height:1.55}
.num{font-variant-numeric:tabular-nums}

/* form */
.field{margin-bottom:16px}
.field label{display:block;font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--gold-micro);margin-bottom:7px}
input[type=text],input[type=email],select{width:100%;background:rgba(11,16,38,.8);
  border:1px solid rgba(138,147,168,.32);color:var(--ivory);padding:14px 15px;border-radius:3px;
  font-family:var(--sans);font-size:16px;font-weight:300}
input:focus,select:focus{outline:none;border-color:var(--gold)}
input::placeholder{color:rgba(138,147,168,.6)}
select option{background:var(--panel);color:var(--ivory)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.row2{grid-template-columns:1fr}}

/* ---------- heat map ---------- */
.heat{display:grid;gap:2px;width:100%;max-width:420px;aspect-ratio:1}
.cell{position:relative;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:#0B1026;
  background:var(--rank-none);border:1px solid transparent;transition:transform .12s;cursor:default}
.cell.t3{background:var(--rank-top3)}
.cell.mid{background:var(--rank-mid);color:#fff}
.cell.low{background:var(--rank-low);color:#fff}
.cell.none{background:transparent;border:1px dashed rgba(138,147,168,.34);color:var(--steel-dim);font-weight:400}
.cell.pending{background:rgba(138,147,168,.08);color:transparent;animation:pulse 1.4s ease-in-out infinite}
.cell.failed{background:repeating-linear-gradient(45deg,rgba(138,147,168,.10),rgba(138,147,168,.10) 3px,transparent 3px,transparent 6px);
  border:1px solid rgba(138,147,168,.3);color:var(--steel-dim);font-size:9px}
.cell.centre{box-shadow:0 0 0 2px var(--gold)}
.cell:hover{transform:scale(1.12);z-index:5}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.75}}
.heat-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:11.5px;color:var(--steel)}
.heat-legend span{display:flex;align-items:center;gap:6px}
.heat-legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.tip{position:fixed;z-index:99;background:var(--raised-2);border:1px solid var(--edge);
  border-radius:3px;padding:9px 12px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .1s;
  box-shadow:0 8px 26px rgba(0,0,0,.5);max-width:240px}
.tip.on{opacity:1}
.tip b{color:var(--gold-bright);font-weight:600}

/* ---------- metric tiles ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{border:1px solid var(--edge-soft);border-radius:4px;padding:16px;background:rgba(11,16,38,.42)}
.tile .v{font-family:var(--serif);font-size:38px;line-height:1;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.tile .v.small{font-size:26px}
.tile .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-top:7px}
.tile .note{font-size:11px;color:var(--steel-dim);margin-top:5px;line-height:1.4}
.tile .d{font-size:12px;margin-top:6px;font-variant-numeric:tabular-nums}
.d.up{color:var(--good)} .d.down{color:var(--bad)} .d.flat{color:var(--steel-dim)}

/* ---------- findings ---------- */
.findings{display:flex;flex-direction:column;gap:0}
.finding{border-top:1px solid var(--edge-soft);padding:20px 0 20px 18px;position:relative}
.finding:last-child{border-bottom:1px solid var(--edge-soft)}
.finding::before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:2px;background:var(--steel-dim)}
.finding.critical::before,.finding.high::before{background:var(--bad)}
.finding.medium::before{background:var(--warn)}
.finding.good::before{background:var(--good)}
.fmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.sev{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--steel)}
.finding.critical .sev,.finding.high .sev{color:var(--bad)}
.finding.medium .sev{color:var(--warn)}
.finding.good .sev{color:var(--good)}
.basis{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-dim);
  border:1px solid var(--edge-soft);border-radius:2px;padding:2px 7px}
.basis.knox{border-color:rgba(201,169,97,.4);color:var(--gold-micro)}
.finding h4{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.28;margin-bottom:8px;color:var(--ivory)}
.finding p{font-size:14px;color:#B9C0D2;margin-bottom:0}
.fact{margin-top:12px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.fact b{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px;white-space:nowrap;font-weight:600}
.fact.do b{color:var(--gold-micro)} .fact.do span{color:var(--gold-bright)}
.fact.care b{color:var(--warn)} .fact.care span{color:#C9CFDD}
.fsrc{margin-top:10px;font-size:11px;color:var(--steel-dim);line-height:1.5}

/* ---------- table ---------- */
.tw{overflow-x:auto;border:1px solid var(--edge-soft);border-radius:3px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
th{text-align:left;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-micro);
  font-weight:600;padding:12px 14px;border-bottom:1px solid var(--edge);white-space:nowrap;background:rgba(22,30,66,.5)}
td{padding:11px 14px;border-bottom:1px solid var(--edge-soft);color:#C2C9DA;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tr.you td{background:rgba(201,169,97,.10)}
tr.you td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
tr.you .nm{color:var(--gold-bright);font-weight:600}
td .nm{display:block} td .ad{display:block;font-size:11px;color:var(--steel-dim);margin-top:2px}
.chk{color:var(--good);font-weight:600}.xno{color:var(--bad);font-weight:600}

/* ---------- misc ---------- */
.load{text-align:center;padding:56px 20px}
.spin{width:38px;height:38px;border:2px solid rgba(201,169,97,.22);border-top-color:var(--gold);
  border-radius:50%;margin:0 auto 18px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.err{border:1px solid rgba(194,95,74,.5);background:rgba(194,95,74,.09);border-radius:4px;padding:18px;margin:16px 0}
.err h4{color:var(--bad);font-size:14px;margin-bottom:6px;font-weight:600}
.err p{font-size:13.5px;color:#D9DEEB}
.err code{background:rgba(0,0,0,.4);padding:2px 6px;border-radius:2px;color:var(--gold-bright);font-size:12.5px}
.prog{height:3px;background:rgba(242,239,232,.09);border-radius:2px;overflow:hidden;margin-top:14px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));width:0;transition:width .3s}
.cands{display:flex;flex-direction:column;gap:8px}
.cand{display:flex;justify-content:space-between;gap:14px;align-items:center;text-align:left;width:100%;
  border:1px solid var(--edge-soft);border-radius:3px;padding:14px 16px;background:rgba(11,16,38,.5);
  cursor:pointer;font-family:var(--sans);color:var(--ivory)}
.cand:hover{border-color:var(--gold);background:rgba(201,169,97,.07)}
.cand .cn{font-size:15px}.cand .ca{font-size:12px;color:var(--steel-dim);margin-top:2px}
.cand .ct{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-micro);white-space:nowrap}
.grid2{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.caveat{border-top:1px solid var(--edge-soft);margin-top:22px;padding-top:16px}

@media print{
  body{background:#fff;color:#111}
  header.top,.btn,.no-print{display:none!important}
  .panel{border:1px solid #ccc;background:#fff;break-inside:avoid}
  .cell.t3{background:#12855A!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cell.mid{background:#4A5CA8!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cell.low{background:#A8452F!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cell.none{border-color:#999!important;color:#666!important}
  h1.display,h2.sec,.tile .v,.finding h4{color:#1a1a1a}
  .muted,.tiny,.finding p,td{color:#333}
  .eyebrow,h3.lbl,.fact.do span{color:#8A6D2F}
}