:root{
  --paper:#F3F5F6; --surface:#fff; --sunk:#E8ECEE; --ink:#151A1F; --ink-soft:#3F4952;
  --muted:#67737E; --rule:#D5DBDF; --rule-2:#B5BEC5;
  --accent:#0E6E7D; --accent-soft:#DEEEF1;
  --warn:#B54A33; --warn-soft:#F8E4DF; --good:#2C6E4E; --good-soft:#DFEDE6;
  --f-disp:"Archivo",system-ui,sans-serif; --f-body:"Public Sans",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#12161A; --surface:#1A2027; --sunk:#232B33; --ink:#E6EAED; --ink-soft:#C2CAD0;
  --muted:#8B97A2; --rule:#2C353D; --rule-2:#3E4952;
  --accent:#4FB3C4; --accent-soft:#17333A;
  --warn:#E08268; --warn-soft:#38221C; --good:#5FA97F; --good-soft:#1B2E24;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3{font-family:var(--f-disp);margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:31px;font-weight:700;letter-spacing:-.02em}
h2{font-size:21px;font-weight:600;letter-spacing:-.012em}
h3{font-size:15px;font-weight:600}
p{margin:0;max-width:66ch}
.mono,code{font-family:var(--f-mono);font-size:.86em}
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}

header.top{border-bottom:1px solid var(--rule);background:var(--surface)}
header.top .in{max-width:960px;margin:0 auto;padding:14px 22px;display:flex;
  align-items:center;gap:22px;flex-wrap:wrap}
header.top .brand{font-family:var(--f-disp);font-weight:700;letter-spacing:-.02em;font-size:17px}
header.top nav{display:flex;gap:18px;font-size:14px;margin-left:auto;flex-wrap:wrap}
header.top nav a{color:var(--ink-soft);text-decoration:none}
header.top nav a:hover,header.top nav a.on{color:var(--accent);text-decoration:underline}

main{max-width:960px;margin:0 auto;padding:36px 22px 90px;display:flex;
  flex-direction:column;gap:34px}
.stack{display:flex;flex-direction:column;gap:16px}
.head{display:flex;flex-direction:column;gap:6px}

.panel{background:var(--surface);border:1px solid var(--rule);padding:22px}
.rows{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.row{background:var(--surface);padding:13px 16px;display:flex;gap:14px;align-items:flex-start}
.row .grow{flex:1;min-width:0}
.rank{font-family:var(--f-mono);font-size:12px;color:var(--accent);padding-top:3px;
  font-variant-numeric:tabular-nums;min-width:20px}
.ttl{font-weight:600;line-height:1.35}
.sub{color:var(--muted);font-size:13.5px}

.pill{display:inline-block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;white-space:nowrap}
.pill.active{color:var(--accent)} .pill.done{color:var(--good)}
.pill.dropped,.pill.private{color:var(--muted)} .pill.shared{color:var(--accent)}
.sev-3{color:var(--warn)} .sev-2{color:var(--accent)} .sev-1{color:var(--muted)}

.flag{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule-2);
  padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.flag.s3{border-left-color:var(--warn)} .flag.s2{border-left-color:var(--accent)}
.flag .summary{font-family:var(--f-disp);font-weight:600;font-size:17px;line-height:1.35;max-width:60ch}
.evidence{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);background:var(--sunk);
  padding:9px 12px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pair>div{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.pair .to{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.pair .why{font-size:12px;color:var(--muted);border-top:1px dashed var(--rule);padding-top:7px}
@media (max-width:680px){.pair{grid-template-columns:1fr}}

label{font-size:13.5px;color:var(--ink-soft);font-weight:500}
input[type=text],input[type=email],textarea,select{
  width:100%;font:inherit;font-size:15px;padding:9px 11px;background:var(--surface);
  color:var(--ink);border:1px solid var(--rule-2);border-radius:0}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
button,.btn{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;cursor:pointer;
  background:var(--accent);color:var(--paper);border:1px solid var(--accent);border-radius:0}
button.ghost,.btn.ghost{background:transparent;color:var(--accent)}
button.tiny{font-size:11.5px;padding:3px 8px;font-weight:500}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}

.bar{height:6px;background:var(--sunk);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);display:block}
.scores{display:flex;flex-direction:column;gap:11px}
.scores .s{display:grid;grid-template-columns:130px 1fr 42px;gap:12px;align-items:center;font-size:14px}
.scores .s .v{font-family:var(--f-mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}

.q{font-family:var(--f-disp);font-size:22px;font-weight:600;line-height:1.3;max-width:24ch}
.progress{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.transcript{display:flex;flex-direction:column;gap:12px}
.transcript .t{display:grid;grid-template-columns:64px 1fr;gap:12px;font-size:14.5px}
.transcript .t .who{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding-top:3px}

/* ---- intake ---- */
.intake{display:flex;flex-direction:column;gap:0}
.scalebar{position:sticky;top:-1px;z-index:5;background:var(--surface);
  border:1px solid var(--rule);border-bottom:2px solid var(--rule-2);
  padding:9px 14px;display:flex;justify-content:space-between;align-items:center;
  gap:14px 22px;flex-wrap:wrap;box-shadow:0 8px 10px -8px rgba(0,0,0,.22)}
.scalebar-legend{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.scalebar-legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--muted);white-space:nowrap}
.scalebar-legend b{font-family:var(--f-mono);font-size:12px;color:var(--ink);
  border:1px solid var(--rule-2);min-width:20px;text-align:center;padding:1px 0}
.scalebar-progress{display:flex;align-items:center;gap:12px;white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
.scalebar-progress b{color:var(--ink);font-variant-numeric:tabular-nums}
.scalebar-progress .track{width:96px;height:5px;background:var(--sunk);display:block}
.scalebar-progress .track i{display:block;height:100%;width:0;background:var(--accent);
  transition:width .2s}

.items{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.item{background:var(--surface);padding:13px 16px;display:grid;
  grid-template-columns:1fr 360px;gap:20px;align-items:center;scroll-margin-top:74px}
.item.done{background:var(--good-soft)}
.item-q{margin:0;max-width:none;font-size:15px;line-height:1.4}
.item-n{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-right:11px;
  font-variant-numeric:tabular-nums}
.likert{display:flex;gap:4px;align-items:center}
.likert-end{flex-shrink:0;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;
  color:var(--muted)}
.likert label{flex:1;border:1px solid var(--rule-2);cursor:pointer;min-width:30px}
.likert label:hover span{color:var(--accent);border-color:var(--accent)}
.likert label span{display:block;padding:9px 2px;text-align:center;
  font-family:var(--f-mono);font-size:13px;color:var(--ink-soft)}
.likert input{position:absolute;opacity:0;width:0;height:0}
.likert input:checked+span{background:var(--accent);color:var(--paper)}
.likert input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.intake-submit{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}

@media (max-width:720px){
  .scalebar-legend span i{display:none}
  .scalebar-legend span:first-child i,.scalebar-legend span:last-child i{display:inline}
  .item{grid-template-columns:1fr;gap:9px}
  .likert{width:100%}
}

.empty{border:1px dashed var(--rule-2);padding:26px;text-align:center;color:var(--muted);font-size:14.5px}
details.prompt{border:1px solid var(--rule);background:var(--surface);padding:0}
details.prompt summary{padding:12px 16px;cursor:pointer;font-weight:600;font-size:14px}
details.prompt pre{margin:0;padding:0 16px 16px;font-family:var(--f-mono);font-size:11.5px;
  color:var(--ink-soft);white-space:pre-wrap;overflow-x:auto}
footer{border-top:1px solid var(--rule);margin-top:20px;padding-top:16px;color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
