/* CS2 Integrity Watch — control-chart report.
   Direction contract: .impeccable/surfaces/site-index-html.md
   World: cool-neutral paper, hairline rules, two data inks, one violation ink.
   Rank is carried by weight, case and rule — two text sizes only. */

@font-face{font-family:Archivo;src:url(/static/fonts/archivo-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-latin-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-latin-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-latin-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#eff1f0;
  --paper-raised:#f8f9f8;
  --ink:#14181b;
  --ink-soft:#4c555c;
  --ink-faint:#636d74;
  --rule:#c4ccc9;
  --rule-strong:#9aa6a2;
  --market:#1b5a8f;
  --model:#8a5713;
  --signal:#a8271d;
  --signal-wash:#f0dfdc;
  --fs:13px;
  --fs-head:17px;
  --gap:18px;
  --pad:22px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  overflow-x:clip;
  background:var(--paper);color:var(--ink);
  font:400 var(--fs)/1.5 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  caret-color:var(--market);
}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--market);outline-offset:2px}
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--rule-strong) var(--paper);scrollbar-width:thin}
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid var(--paper);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

h1,h2,h3{margin:0;font-weight:700;font-size:var(--fs-head);line-height:1.25;letter-spacing:-0.012em}
h2{font-weight:600;font-size:var(--fs);text-transform:uppercase;letter-spacing:.07em;color:var(--ink)}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-faint)}
code{font:500 var(--fs)/1 Archivo,sans-serif;background:var(--signal-wash);color:var(--signal);padding:1px 4px}

/* ---------------------------------------------------------------- top bar */
.bar{
  display:flex;align-items:center;gap:var(--gap);
  padding:14px var(--pad);border-bottom:1px solid var(--ink);
  background:var(--paper-raised);
}
.id{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.id h1{white-space:nowrap}
.mark{width:10px;height:10px;background:var(--ink);display:block}
.premise{flex:1 1 auto;color:var(--ink-soft);max-width:62ch;font-size:var(--fs)}
.premise b{font-weight:600;color:var(--ink)}
.chip{
  flex:0 0 auto;font-size:var(--fs);font-weight:500;color:var(--ink-soft);
  border:1px solid var(--rule);padding:4px 9px;text-transform:uppercase;letter-spacing:.06em;
}
.chip.ok{color:var(--market);border-color:var(--market)}
.chip.warn{color:var(--signal);border-color:var(--signal)}
.chip.dead{color:var(--ink-faint)}

/* ------------------------------------------------------------- statement */
.statement{
  padding:9px var(--pad);border-bottom:1px solid var(--rule);
  color:var(--ink-soft);font-size:var(--fs);background:var(--paper);
}
.statement b{color:var(--ink);font-weight:600}

/* ----------------------------------------------------------------- layout */
main{
  flex:1;display:grid;grid-template-columns:352px minmax(0,1fr);
  align-items:start;min-height:0;
}
.board{border-right:1px solid var(--rule);position:sticky;top:0;max-height:calc(100vh - 0px);display:flex;flex-direction:column}
.board-head{padding:var(--gap) var(--pad) 10px;border-bottom:1px solid var(--rule)}
.board-head h2{margin-bottom:9px}
#search{
  width:100%;font:400 var(--fs)/1 Archivo,sans-serif;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:8px 10px;border-radius:0;
}
#search::placeholder{color:var(--ink-faint)}
#search:hover{border-color:var(--rule-strong)}
.counts{margin-top:9px;color:var(--ink-faint);font-size:var(--fs)}
.board-cols{display:none}

/* ------------------------------------------------------------ board rows */
.rows{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.rows li{
  display:grid;grid-template-columns:30px 1fr 54px;gap:10px;align-items:baseline;
  padding:9px var(--pad);border-bottom:1px solid var(--rule);cursor:pointer;
  outline-offset:-2px;
}
.rows li.hdr{
  position:sticky;top:0;z-index:2;cursor:default;padding-top:7px;padding-bottom:7px;
  background:var(--paper);border-bottom:1px solid var(--rule);
  color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
}
.rows li.hdr:hover{background:var(--paper)}
.rows li.hdr span:last-child{text-align:right}
.rows li:hover{background:var(--paper-raised)}
.rows li.sel{background:var(--paper-raised);outline:2px solid var(--ink)}
.rows .rank{color:var(--ink-faint);font-weight:500;font-variant-numeric:tabular-nums}
.rows li.sel .rank{color:var(--ink);font-weight:700}
.rows .who{min-width:0}
.rows .t{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .t .vs{color:var(--ink-faint);font-weight:400}
.rows .sub{display:block;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .div{
  text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:400;
}
.rows li.flagged .div{color:var(--ink);font-weight:700}
.rows li.flagged .div::before{content:"◆";font-size:9px;margin-right:4px;color:var(--signal);vertical-align:1px}
.rows li.flat .div::before{content:""}

/* ---------------------------------------------------------------- detail */
.detail{min-width:0;padding:var(--gap) var(--pad) 40px}
.empty{max-width:60ch;padding:8vh 0 0}
.empty h2{margin-bottom:10px;text-transform:none;letter-spacing:-.012em;font-size:var(--fs-head)}
.empty p{color:var(--ink-soft)}
article[hidden]{display:none}

.map-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gap);
  padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:var(--gap);
}
.map-title h2{font-size:var(--fs-head);font-weight:700;text-transform:none;letter-spacing:-.012em;margin-bottom:4px}
.meta{color:var(--ink-soft);font-size:var(--fs)}
.verdict{
  flex:0 0 auto;text-align:right;font-size:var(--fs);color:var(--ink-soft);
  border-top:2px solid var(--rule);padding-top:5px;max-width:24ch;
}
.verdict.raised{border-top-color:var(--signal);color:var(--signal);font-weight:600}

/* ----------------------------------------------------------------- plots */
.plot{margin:0 0 24px}
.plot figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap);margin-bottom:8px}
.legend{display:flex;gap:14px;list-style:none;margin:0;padding:0;color:var(--ink-soft);font-size:var(--fs)}
.legend li{display:flex;align-items:center;gap:6px}
.k{width:16px;height:2px;display:inline-block;background:currentColor}
.k-market{color:var(--market)}
.k-model{color:var(--model)}
.k-resid{color:var(--ink)}
.k-limit{background:none;border-top:2px dashed var(--rule-strong);height:0}
.k-breach{color:var(--signal)}
.k-span{background:var(--signal);opacity:.16;height:11px;width:11px}
.plot-frame{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-top:6px}
svg{display:block;width:100%;overflow:visible}
svg text{font:400 11px Archivo,sans-serif;font-variant-numeric:tabular-nums}
.axis-label{fill:var(--ink-faint)}
.grid-line{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
.zero-line{stroke:var(--rule-strong);stroke-width:1}
.limit-line{stroke:var(--rule-strong);stroke-width:2;stroke-dasharray:6 4}
.market-line{fill:none;stroke:var(--market);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.model-line{fill:none;stroke:var(--model);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.resid-line{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.span-bar{fill:var(--signal);opacity:.75}
.span-edge{stroke:var(--signal);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.breach-area{fill:var(--signal);opacity:.16}
.breach-mark{fill:var(--signal)}
.pt-market{fill:var(--market)}
.pt-model{fill:var(--model)}
.pt-injected{fill:none;stroke:var(--signal);stroke-width:1.5}
.limit-label{fill:var(--ink-faint);font-weight:500}

/* ------------------------------------------------- demo series (NOMERCY) */
.margin-note{margin-top:9px;color:var(--ink-soft);font-size:var(--fs);max-width:78ch}
.margin-note b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ladder{table-layout:fixed;max-width:880px}
.ladder th,.ladder td{white-space:nowrap}
.ladder th:nth-child(1),.ladder td:nth-child(1){width:74px}
.ladder th:nth-child(2),.ladder td:nth-child(2){width:78px}
.ladder th:nth-child(3),.ladder td:nth-child(3){width:146px}
.ladder th:nth-child(4),.ladder td:nth-child(4){width:150px}
.ladder th:nth-child(5),.ladder td:nth-child(5){width:150px}
.ladder th:nth-child(6),.ladder td:nth-child(6){width:78px;text-align:right}
.ladder td:nth-child(2),.ladder td:nth-child(6){font-variant-numeric:tabular-nums}
.ladder tr.over td{font-weight:600}
.ladder tr.over td.rank{color:var(--signal)}

/* ---------------------------------------------------------------- alerts */
.alerts{margin-bottom:24px}
.alerts h2{margin-bottom:10px}
.alert{
  display:grid;grid-template-columns:112px 1fr;gap:var(--gap);
  padding:12px 0;border-top:1px solid var(--rule);
}
.alert:last-child{border-bottom:1px solid var(--rule)}
.alert .span-fig{font-weight:700;font-variant-numeric:tabular-nums}
.alert .span-fig .lbl{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--signal);font-size:var(--fs)}
.alert .span-fig .num{font-size:var(--fs)}
.alert .body{min-width:0}
.alert .line{color:var(--ink-soft);margin-bottom:6px}
.alert .line b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.crit{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0 0 8px;padding:0;color:var(--ink-soft)}
.crit li{display:flex;align-items:center;gap:6px}
.crit .g{font-weight:700;width:9px;display:inline-block}
.crit .no .g{color:var(--ink-faint)}
.crit .yes .g{color:var(--market)}
.contrib{list-style:none;margin:0 0 8px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:2px 18px;color:var(--ink-soft)}
.contrib li{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.contrib li b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.disc{color:var(--signal);font-weight:500}
.muted{color:var(--ink-faint)}

/* ------------------------------------------------------------------- duo */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-bottom:24px}
.duo h2{margin-bottom:10px}
.kv{display:grid;grid-template-columns:auto minmax(70px,auto);justify-content:start;gap:3px 18px;margin:0;max-width:330px}
.kv dt{color:var(--ink-soft)}
.kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.tbl th:nth-child(1),.tbl td:nth-child(1){width:46px}
.tbl th:nth-child(3),.tbl td:nth-child(3){width:64px}
.tbl th:nth-child(4),.tbl td:nth-child(4){width:66px}
.tbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl th{text-align:left;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);padding:0 0 5px;border-bottom:1px solid var(--rule)}
.tbl th:last-child,.tbl td:last-child{text-align:right}
.tbl td{padding:5px 0;border-bottom:1px solid var(--rule)}
.tbl .neg{color:var(--signal);font-weight:600}
.tbl .rank{color:var(--ink-faint)}

/* ----------------------------------------------------------------- probe */
.probe{border-top:2px solid var(--ink);padding-top:12px}
.probe h2{margin-bottom:12px}
.probe-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,auto));
  gap:16px 26px;align-items:end;margin-bottom:14px;max-width:760px}
.probe-form .f{display:flex;flex-direction:column;gap:5px;min-width:0;
  color:var(--ink-soft);font-weight:500;white-space:nowrap}
.pair{display:flex;align-items:center;gap:6px}
.probe-form input,.probe-form select{
  font:400 var(--fs)/1 Archivo,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--paper-raised);border:1px solid var(--rule);padding:7px 8px;border-radius:0;
  width:78px;min-width:0;
}
.probe-form button{grid-column:1/-1;justify-self:start}
.probe-form input:hover,.probe-form select:hover{border-color:var(--rule-strong)}
.probe-form .colon{color:var(--ink-faint);padding-bottom:8px}
.probe-form .f-lbl{display:block}
.probe-note{grid-column:1/-1;color:var(--ink-faint);font-size:var(--fs);max-width:70ch}
button{
  font:600 var(--fs)/1 Archivo,sans-serif;text-transform:uppercase;letter-spacing:.07em;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  padding:9px 16px;border-radius:0;cursor:pointer;
}
button:hover{background:var(--market);border-color:var(--market)}
button:active{transform:translateY(1px)}
.out{
  margin:0;padding:12px;background:var(--paper-raised);border:1px solid var(--rule);
  color:var(--ink-soft);font:400 var(--fs)/1.6 Archivo,sans-serif;white-space:pre-wrap;
  min-height:64px;max-height:220px;overflow:auto;
}
.out b{color:var(--ink)}

/* ---------------------------------------------------------------- footer */
footer{
  display:flex;justify-content:space-between;gap:var(--gap);
  padding:10px var(--pad);border-top:1px solid var(--rule);
  color:var(--ink-faint);font-size:var(--fs);background:var(--paper-raised);
}
.mode.static{color:var(--model);font-weight:600}

/* ------------------------------------------------------------ responsive */
@media (max-width:1120px){
  main{grid-template-columns:minmax(0,1fr)}
  .board{border-right:0;border-bottom:1px solid var(--ink);position:static;max-height:none}
  .rows{max-height:44vh}
  .duo{grid-template-columns:minmax(0,1fr);gap:22px}
  .bar{flex-wrap:wrap;gap:10px}
  .premise{flex:1 1 100%;order:3;max-width:none}
}
@media (max-width:640px){
  :root{--pad:14px}
  .bar{padding:11px var(--pad)}
  .map-head{flex-direction:column;gap:10px}
  .verdict{text-align:left}
  .alert{grid-template-columns:1fr;gap:6px}
  .board-cols,.rows li{grid-template-columns:26px 1fr 48px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
