/* Basis — shared design system */

/* Self-hosted, latin-subset woff2. Source Serif 4 carries headings, Source Sans 3
   carries everything else — one superfamily, so the serif heading and the sans
   figures under it share proportions and a figure design.

   Weights are deliberate, not exhaustive: the sans ships as one variable file
   covering 400–700 (28,792 B, cheaper than three static cuts at 47,020 B), and
   the serif ships a single 600 because it is only ever a heading. The variable
   serif was measured at 122,168 B — its optical-size axis alone busts the whole
   60 KB budget, so it is not shipped.

   --mono stays on the OS stack on purpose: it appears only in code samples in
   the docs pages, and a third family would put this app over budget.

   Measured total: 50,280 B (49.1 KB).                                        */
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/source-sans-3-var.woff2) format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/source-serif-4-600.woff2) format("woff2");
}
:root{
  --bg:#f7f6f3; --panel:#ffffff; --ink:#16191c; --muted:#5f6570; --line:#e8e6e1;
  --accent:#1a6b54; --on-accent:#ffffff; --accent-soft:#ecf3f0; --pos:#1a6b54; --neg:#b4341f; --warn:#8a6210;
  --warn-soft:#fdf8ec; --neg-soft:#fcf1ee;
  --shadow:0 1px 2px rgba(22,25,28,.04);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4",ui-serif,Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#131518;--panel:#1a1d21;--ink:#e9e7e2;--muted:#8f959c;--line:#282c31;
        --accent:#4bbf9a;--on-accent:#0f1b17;--accent-soft:#16302a;--pos:#4bbf9a;--neg:#e4735c;--warn:#d6a53c;
        --warn-soft:#241f12;--neg-soft:#271816;
        --shadow:0 1px 2px rgba(0,0,0,.3);}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);
     -webkit-font-smoothing:antialiased}
.num,.mono{font-variant-numeric:tabular-nums;font-family:var(--mono)}
a{color:var(--accent)}

/* ---------- top bar ---------- */
header{position:sticky;top:0;z-index:50;background:var(--panel);
       border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
       padding:0 16px;height:52px}
.brandmark{font-family:var(--serif);font-size:19px;letter-spacing:-.02em;font-weight:600;
  text-decoration:none;color:var(--ink);margin-right:2px}
.brandmark span{color:var(--accent)}
nav{display:flex;gap:2px;margin-left:6px}
nav a{font-size:13px;font-weight:550;color:var(--muted);text-decoration:none;
  padding:6px 10px;border-radius:7px;white-space:nowrap}
nav a:hover{color:var(--ink);background:var(--bg)}
nav a.on{color:var(--accent);background:var(--accent-soft)}
.spacer{flex:1}
button,.btn{font:inherit;font-size:13.5px;font-weight:550;border-radius:7px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:6px 12px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button:hover,.btn:hover{border-color:var(--muted)}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button.primary:hover{filter:brightness(1.08)}
button.ghost{border-color:transparent;color:var(--muted)}
button.ghost:hover{color:var(--ink);background:var(--bg)}
button:disabled{opacity:.5;cursor:not-allowed}

.wrap{display:grid;grid-template-columns:minmax(330px,400px) 1fr;gap:20px;
      max-width:1480px;margin:0 auto;padding:20px 18px 80px;align-items:start}
@media (max-width:1000px){.wrap{grid-template-columns:1fr}}
.narrow{max-width:900px;margin:0 auto;padding:26px 18px 80px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.right{position:sticky;top:72px}
@media (max-width:1000px){.right{position:static}}

/* ---------- inputs ---------- */
.group+.group{border-top:1px solid var(--line)}
.group>summary{list-style:none;cursor:pointer;padding:12px 15px;display:flex;
  align-items:center;gap:9px;font-weight:600;font-size:13px;user-select:none}
.group>summary::-webkit-details-marker{display:none}
.group>summary::before{content:"";width:6px;height:6px;border-right:1.8px solid var(--muted);
  border-bottom:1.8px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
.group[open]>summary::before{transform:rotate(45deg)}
.group>summary:hover{background:var(--bg)}
.fields{padding:0 15px 15px;display:grid;grid-template-columns:1fr 1fr;gap:9px 11px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:11px;color:var(--muted);font-weight:550;letter-spacing:.02em}
.inputbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;
  background:transparent;overflow:hidden;transition:border-color .12s}
.inputbox:hover{border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
.inputbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.inputbox .pre,.inputbox .suf{font-size:12px;color:var(--muted);padding:0 8px;flex:none}
.inputbox input,.inputbox select,.inputbox textarea{flex:1;min-width:0;border:0;
  background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:8px 9px;
  font-variant-numeric:tabular-nums}
.inputbox .pre+input{padding-left:0}
.inputbox input:focus,.inputbox select:focus,.inputbox textarea:focus{outline:none}
.inputbox select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:24px}
.inputbox textarea{resize:vertical;font-family:var(--sans)}
.f.check{flex-direction:row;align-items:flex-start;gap:9px;grid-column:1/-1;padding:3px 0}
.f.check input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none}
.f.check .ct{font-size:13px;line-height:1.35}
.cs{font-size:11.5px;color:var(--muted);display:block;margin-top:1px}

/* ---------- results ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:var(--line);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.kpi{background:var(--panel);padding:12px 14px}
.kpi .k{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.kpi .v{font-size:23px;font-weight:600;letter-spacing:-.025em;margin-top:4px;
  font-variant-numeric:tabular-nums;font-family:var(--mono);line-height:1.15}
.kpi .s{font-size:11px;color:var(--muted);margin-top:2px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .mut{color:var(--muted)}

/* Signals read as one calm list. Severity is carried by a dot and the colour of
   the lead phrase — four stacked tinted banners drowned out whichever mattered. */
.flags{display:flex;flex-direction:column;margin:12px 0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.flags:empty{display:none}
/* Block, not flex: a flex container would make the <b> lead phrase and the
   sentence after it two separate items sitting in columns. The dot hangs in
   the left gutter so the text flows as one paragraph. */
.flag{position:relative;display:block;padding:9px 14px 9px 30px;font-size:13px;
  line-height:1.45;color:var(--ink);border-top:1px solid var(--line);background:none}
.flag:first-child{border-top:0}
.flag::before{content:"";position:absolute;left:14px;top:15px;
  width:6px;height:6px;border-radius:50%}
.flag.bad::before{background:var(--neg)}
.flag.warn::before{background:var(--warn)}
.flag.ok::before{background:var(--accent)}
.flag b{font-weight:650}
.flag.bad b{color:var(--neg)}
.flag.warn b{color:var(--warn)}
.flag.ok b{color:var(--accent)}
/* the import dialog still wants a boxed callout */
.dlg-b .flag{border:1px solid var(--line);border-radius:8px;margin-top:8px;padding-left:30px}
.dlg-b .flag.warn{background:var(--warn-soft)}
.dlg-b .flag.bad{background:var(--neg-soft)}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{padding:9px 13px;font-size:13px;font-weight:550;color:var(--muted);cursor:pointer;
  border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.pane{display:none;padding:16px} .pane.on{display:block}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 9px;text-align:right;white-space:nowrap;
      font-variant-numeric:tabular-nums;font-family:var(--mono)}
th:first-child,td:first-child{text-align:left;font-family:var(--sans);white-space:normal}
thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:650;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--panel);font-family:var(--sans)}
tbody tr:hover{background:var(--bg)}
tr.rule td{border-top:1px solid var(--line)}
tr.total td{font-weight:650;border-top:1.5px solid var(--ink)}
tr.sub td:first-child{padding-left:22px;color:var(--muted)}
.scroll{overflow-x:auto;max-height:520px;overflow-y:auto}

.sechead{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:650;margin:18px 0 7px}
.sechead:first-child{margin-top:0}
.note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:12px}

.bars{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.bar{display:grid;grid-template-columns:150px 1fr 110px;gap:10px;align-items:center;font-size:13px}
.bar .track{height:22px;background:var(--bg);border-radius:5px;position:relative;overflow:hidden}
.bar .fill{position:absolute;top:0;bottom:0;border-radius:5px}
.bar .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- heatmap ---------- */
.heat{border-collapse:separate;border-spacing:2px}
.heat td.cell{border-radius:5px;text-align:center;padding:9px 6px;font-weight:600;
  font-size:12.5px;color:#12211d}
.heat td.cell.base{outline:2px solid var(--ink);outline-offset:-2px}
.heat th{font-size:11px;color:var(--muted);font-weight:650;text-align:center;
  font-family:var(--sans);text-transform:none;letter-spacing:0;position:static;border:0}
.heat th.rowh{text-align:right;padding-right:10px}
.heat .corner{font-size:10.5px;line-height:1.25;color:var(--muted);text-align:right}

/* ---------- dialogs, misc ---------- */
.acct{position:relative}
.acct>button{width:28px;height:28px;padding:0;justify-content:center;border-radius:50%;
  background:var(--accent-soft);border-color:transparent;color:var(--accent);
  font-size:11.5px;font-weight:700;letter-spacing:.02em}
.acct>button:hover{border-color:var(--accent)}
.menu{position:absolute;right:0;top:36px;min-width:196px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px -10px rgba(0,0,0,.28);
  padding:5px;display:none;z-index:60}
.menu.on{display:block}
.menu .who{padding:8px 10px 9px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .who b{display:block;font-size:13px}
.menu .who span{font-size:11.5px;color:var(--muted);word-break:break-all}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:7px 10px;border-radius:6px;font-size:13px;color:var(--ink)}
.menu button:hover{background:var(--bg)}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);
  padding:0;box-shadow:0 24px 60px -20px rgba(0,0,0,.4);max-width:520px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(20,23,26,.45)}
.dlg-h{padding:16px 18px;border-bottom:1px solid var(--line);font-weight:650}
.dlg-b{padding:18px;display:grid;gap:12px}
.dlg-f{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.deal-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer}
.deal-row:hover{border-color:var(--accent);background:var(--bg)}
.deal-row .dn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:20px;background:var(--accent-soft);color:var(--accent);flex:none}
.linkbox{display:flex;gap:8px}
.linkbox input{flex:1;font:13px var(--mono);padding:9px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:var(--ink)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:9px;font-size:13.5px;
  font-weight:550;transition:transform .22s;z-index:99;pointer-events:none;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.empty{color:var(--muted);text-align:center;padding:40px 20px;font-size:14px}
h1.page{font-family:var(--serif);font-size:30px;letter-spacing:-.02em;margin:0 0 4px;font-weight:600}
p.pagesub{color:var(--muted);margin:0 0 22px;font-size:14.5px}
code.snip{display:block;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font:12.5px/1.6 var(--mono);white-space:pre-wrap;word-break:break-all;color:var(--ink)}