/* viska-doc.css — parcel health report, engineering register.
   Every visual decision is a token here. index.html carries ZERO style= attributes
   (operator ruling 2026-08-04: "ALL DOC DESIGNS THAT YOU PRODUCE MUST BE EASILY
   UPDATED AND CHANGED VISUALLY"). Re-skin by editing :root, never the markup. */

:root {
  /* ---- the knobs, in the order an editor reaches for them ---- */
  --w-page: 1180px;      /* full measure of the document                    */
  --density: 1;          /* scales table padding, card padding, rhythm      */
  --fs-base: 15.5px;     /* everything else is relative to this             */
  --radius: 10px;        /* 0 flips the whole document square               */
  --accent: #d97706;     /* engineering register: amber, not the client navy*/

  /* grade colours — this is a health report, the grade IS the headline */
  --grade-a: #15803d;
  --grade-b: #4d7c0f;
  --grade-c: #b45309;
  --grade-d: #c2410c;
  --grade-f: #b91c1c;

  --sign-pos: #15803d;   /* day-over-day improvement */
  --sign-neg: #b91c1c;   /* day-over-day regression  */

  /* ---- surfaces ---- */
  --bg: #0f1115;
  --panel: #161a21;
  --panel-2: #1b2029;
  --line: #2a313d;
  --ink: #e6e9ef;
  --ink-dim: #9aa4b2;
  --ink-faint: #6b7480;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: calc(40px * var(--density)) 24px calc(80px * var(--density));
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page { max-width: var(--w-page); margin: 0 auto; }

/* ---- masthead ---- */
.masthead { border-bottom: 1px solid var(--line); padding-bottom: calc(20px * var(--density)); }
.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 10px;
}
.masthead h1 { margin: 0 0 6px; font-size: 1.9rem; letter-spacing: -.02em; font-weight: 650; }
.masthead .sub { margin: 0; color: var(--ink-dim); font-size: .92rem; }
.not-client {
  display: inline-block; margin-top: 14px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 5px 11px; font: 600 11px/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

/* ---- score band ---- */
.scoreband {
  display: grid; grid-template-columns: auto 1fr; gap: calc(28px * var(--density));
  align-items: center;
  margin: calc(28px * var(--density)) 0;
  padding: calc(24px * var(--density));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.score { text-align: center; }
.score .num { font: 700 3.6rem/1 var(--sans); letter-spacing: -.03em; }
.score .out { color: var(--ink-faint); font-size: .8rem; font-family: var(--mono); }
.grade {
  display: inline-block; margin-top: 8px; padding: 3px 14px;
  border-radius: var(--radius); font: 700 1.1rem/1.4 var(--sans); color: #fff;
}
.grade-A { background: var(--grade-a); }
.grade-B { background: var(--grade-b); }
.grade-C { background: var(--grade-c); }
.grade-D { background: var(--grade-d); }
.grade-F { background: var(--grade-f); }

.scoremeta p { margin: 0 0 8px; }
.scoremeta .delta { font-family: var(--mono); font-size: .9rem; }
.up { color: var(--sign-pos); }
.down { color: var(--sign-neg); }

.caveat {
  margin: calc(20px * var(--density)) 0;
  padding: calc(16px * var(--density)) calc(20px * var(--density));
  background: var(--panel-2);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-dim); font-size: .93rem;
}
.caveat strong { color: var(--ink); }

/* ---- sections ---- */
h2 {
  margin: calc(38px * var(--density)) 0 calc(14px * var(--density));
  font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
h2 .count { color: var(--ink-faint); font-weight: 400; font-family: var(--mono); font-size: .8rem; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; margin: calc(14px * var(--density)) 0; }
th {
  text-align: left; padding: calc(9px * var(--density)) 12px;
  font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--line);
}
td {
  padding: calc(10px * var(--density)) 12px;
  border-bottom: 1px solid var(--line); vertical-align: top; font-size: .93rem;
}
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { font-weight: 600; }
.note { color: var(--ink-dim); font-size: .88rem; }
.na { color: var(--ink-faint); font-style: italic; }

/* Score bar sits behind the number, so the table reads as a chart.
   Width is a CLASS (w0..w20, 5% steps) rather than an inline style: the ruling
   forbids style= in the markup, and a data- attribute cannot reach `width`. */
.bar { position: relative; }
.bar span { position: relative; z-index: 1; }
.bar::before {
  content: ""; position: absolute; right: 0; top: 4px; bottom: 4px;
  width: calc(var(--w, 0) * 5%); background: var(--fill, var(--ink-faint));
  opacity: .2; border-radius: 3px;
}
.w0{--w:0}.w1{--w:1}.w2{--w:2}.w3{--w:3}.w4{--w:4}.w5{--w:5}.w6{--w:6}.w7{--w:7}
.w8{--w:8}.w9{--w:9}.w10{--w:10}.w11{--w:11}.w12{--w:12}.w13{--w:13}.w14{--w:14}
.w15{--w:15}.w16{--w:16}.w17{--w:17}.w18{--w:18}.w19{--w:19}.w20{--w:20}
.band-A{--fill:var(--grade-a)}.band-B{--fill:var(--grade-b)}.band-C{--fill:var(--grade-c)}
.band-D{--fill:var(--grade-d)}.band-F{--fill:var(--grade-f)}

/* ---- anomaly cards ---- */
.anoms { display: grid; gap: calc(14px * var(--density)); }
.anom {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--flag); border-radius: var(--radius);
  padding: calc(16px * var(--density)) calc(20px * var(--density));
}
.anom h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 650; }
.anom .why { margin: 0 0 10px; color: var(--ink-dim); font-size: .88rem; }
.anom ul { margin: 0; padding-left: 18px; }
.anom li { font-family: var(--mono); font-size: .82rem; color: var(--ink-dim); margin: 3px 0; }
.anom .more { color: var(--ink-faint); font-style: italic; list-style: none; margin-left: -18px; }
.sev-high { --flag: var(--grade-f); }
.sev-med  { --flag: var(--grade-c); }
.sev-low  { --flag: var(--ink-faint); }

.clean { color: var(--sign-pos); font-weight: 600; }

/* ---- footer ---- */
footer {
  margin-top: calc(48px * var(--density)); padding-top: calc(18px * var(--density));
  border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: .82rem; font-family: var(--mono);
}
footer p { margin: 4px 0; }
code { font-family: var(--mono); font-size: .87em; color: var(--ink-dim); }

@media (max-width: 720px) {
  .scoreband { grid-template-columns: 1fr; text-align: center; }
}