:root {
  --ink: #24292f; --muted: #57606a; --line: #d0d7de; --bg: #f6f8fa;
  --card: #ffffff; --brand: #2d1b69; --good: #2da44e; --mid: #d4a72c;
  --bad: #cf222e; --nodata: #8b949e;
  /* 5-band score scale, one colour per rating level. Neutral is BLUE:
     off the red-green badness axis, reads as "no judgement", and stays
     distinct under red-green colourblindness. Gray remains ? (no data). */
  --vneg: #7a0c1c; --neg: #bc4c00; --neu: #0969da;
  --pos: #57ab5a; --vpos: #0b5223;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
       color: var(--ink); background: var(--bg); }
header { background: var(--brand); color: #fff; padding: 12px 20px;
         display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
header .title { font-size: 18px; font-weight: 600; margin-right: 22px; }
header nav a { color: #cdc4ec; text-decoration: none; font-size: 14px; margin-right: 30px; }
header nav a.here { color: #fff; font-weight: 600; border-bottom: 2px solid #fff; }
main { max-width: 880px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.pad { padding: 14px 16px; }
.searchrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
select, input[type=text], input[type=number], textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; font-family: inherit; }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 12.5px; width: 100%; }
input.value { flex: 1; min-width: 220px; }
button { padding: 8px 16px; border: 0; border-radius: 6px; cursor: pointer;
         background: var(--brand); color: #fff; font-size: 14px; }
button.link { background: none; color: var(--muted); text-decoration: underline;
              padding: 8px 4px; }
.banner { display: none; margin-bottom: 14px; padding: 10px 14px;
          border: 1px solid #ffb3b3; background: #fff0f0; color: var(--bad);
          border-radius: 8px; }
.banner.ok { border-color: #b3e0b3; background: #f0fff0; color: var(--good); }
.summary { display: flex; gap: 18px; align-items: center; }
.dial { width: 84px; height: 84px; border-radius: 50%; border: 6px solid;
        display: flex; align-items: center; justify-content: center;
        font-size: 26px; font-weight: 700; flex-shrink: 0; }
.meta { font-size: 13px; color: var(--muted); word-break: break-all; }
.meta b { color: var(--ink); font-size: 16px; }
.row { border-top: 1px solid var(--line); }
.rowhead { display: flex; gap: 14px; align-items: center; padding: 12px 16px;
           cursor: pointer; }
.scorebox { width: 56px; text-align: center; flex-shrink: 0; }
.scorebox .num { font-size: 20px; font-weight: 700; }
.scorebox .bar { height: 4px; border-radius: 2px; margin-top: 3px; }
.rowname { font-weight: 600; }
.rowdesc { font-size: 13px; color: var(--muted); }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
         color: #fff; flex-shrink: 0; }
.chev { margin-left: auto; color: var(--muted); flex-shrink: 0; }
.details { display: none; padding: 4px 16px 16px 86px; font-size: 13px; }
table { border-collapse: collapse; margin: 8px 0; width: 100%; }
th, td { border: 1px solid var(--line); padding: 5px 10px; text-align: left;
         font-size: 13px; }
th { background: var(--bg); font-weight: 600; }
td.num, th.num { text-align: center; }
th.cat { color: #fff; font-weight: 700; }
/* header-chip variants dark enough for white text (light green fails otherwise) */
:root { --neu-dk: #0550ae; --pos-dk: #3e8e47; }
tr.hl td { background: #dff3e3; }
.foot { color: var(--muted); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ratings { display: flex; gap: 8px; flex-wrap: wrap; }
.ratings label { display: flex; flex-direction: column; align-items: center;
                 width: 96px; padding: 7px 4px; border: 0; border-radius: 6px;
                 cursor: pointer; font-size: 13px; color: #fff;
                 opacity: 0.55; text-align: center; }
.ratings label:hover { opacity: 0.85; }
.ratings label.sel { opacity: 1; outline: 3px solid var(--brand);
                     outline-offset: 1px; font-weight: 600; }
/* three fixed rows so numbers and main words align across tiles:
   "very" (or blank) / signed number / main word */
.ratings .tiny { font-size: 13px; min-height: 17px; line-height: 17px; }
.ratings .big { font-size: 19px; font-weight: 700; line-height: 24px; }
.ratings .word { line-height: 17px; }