:root{
  --bg:#111; --panel:#1a1a1a; --panel-2:#181b21; --ink:#eee; --ink-2:#9aa;
  --rule:#333; --accent:#4ea1ff; --q-bg:#1b2733; --val-bg:#2a1f10; --val-rule:#d89b3a;
  --why-bg:#181818; --err:#ff9a9a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,sans-serif}
a{color:var(--accent)}
header.top{background:var(--panel);border-bottom:1px solid var(--rule);
  display:flex;align-items:center}
.topin{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;width:100%}
.brand{display:flex;align-items:baseline;gap:.5rem;color:var(--ink);text-decoration:none}
.brand .mark{font-family:monospace;font-size:.7rem;background:var(--ink);color:var(--bg);
  padding:.15rem .35rem;border-radius:3px}
.who{margin-left:auto;color:var(--ink-2);font-size:.85rem}
button.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;
  padding:0;text-decoration:underline}
.narrow{max-width:640px;margin:2.5rem auto;padding:0 1.2rem}
.narrow.wide{max-width:760px}
.lede{color:var(--ink-2)}
.lede.small{font-size:.85rem}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:1rem}
.stack{display:flex;flex-direction:column;gap:.8rem;max-width:360px}
.stack label{display:flex;flex-direction:column;gap:.3rem}
input[type=email],#note{background:#1a1a1a;color:var(--ink);border:1px solid var(--rule);
  border-radius:6px;padding:.6rem;font:inherit;width:100%}
button, .btn{font:inherit;padding:.6rem 1rem;border-radius:7px;border:1px solid var(--rule);
  background:#2a2a2a;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
button:hover, .btn:hover{background:#333}
.btn.ghost{background:none}

/* ------------------------------------------------------------ review screen */
.review{display:flex;height:calc(100vh - 50px)}
.doc{flex:1.3;background:#222;border-right:1px solid var(--rule);
  display:flex;flex-direction:column}
.doc iframe{flex:1;width:100%;border:0;background:#fff}
.doc .tiny{padding:.4rem .8rem;margin:0}
.side{flex:1;padding:1.3rem 1.6rem;overflow:auto;max-width:640px}
.side h2{margin:.2em 0;font-size:1.15rem}
.ctx{color:var(--ink-2);font-size:.82rem;margin-bottom:.8rem}
.ctx.impact{margin-top:-.4rem}
.q{background:var(--q-bg);border-left:3px solid var(--accent);padding:.7rem .85rem;margin:.8rem 0}
.val{background:var(--val-bg);border-left:3px solid var(--val-rule);padding:.7rem .85rem;
  margin:.7rem 0;word-break:break-word}
.why{background:var(--why-bg);border-left:3px solid #666;padding:.6rem .8rem;margin:.7rem 0;
  font-size:.83rem;color:#bbb}
.rules{background:var(--panel-2);border:1px solid #24303c;border-radius:6px;
  padding:.6rem .9rem;margin:.9rem 0;font-size:.83rem;color:#cfd6dd}
.rules ol{margin:0;padding-left:1.1rem}
.rules li{margin:.25rem 0}
#buttons{margin:.6rem 0}
#buttons button{margin:.3rem .5rem .3rem 0}
kbd{background:#000;border:1px solid #555;border-radius:4px;padding:1px 6px;
  font-size:.72rem;color:#bbb}
textarea{width:100%;padding:.55rem;border-radius:6px;border:1px solid var(--rule);
  background:#1a1a1a;color:var(--ink);font:inherit;margin-top:.5rem}
.row{margin-top:.6rem}
.err{color:var(--err);font-size:.85rem;margin-top:.5rem;min-height:1.2em}
.reopened{background:var(--val-bg);border-left:3px solid var(--val-rule);
  padding:.6rem .8rem;margin-bottom:.8rem;font-size:.85rem}

/* --------------------------------------------------------------- done screen */
table.answered{width:100%;border-collapse:collapse;margin-top:.8rem;font-size:.88rem}
table.answered th, table.answered td{text-align:left;padding:.4rem .5rem;
  border-bottom:1px solid var(--rule)}
table.answered th{color:var(--ink-2);font-weight:600}
.status-ok{color:#8fd19e}
.status-pending{color:var(--val-rule)}

/* --------------------------------------------------------------- home screen */
.progress{margin:1.2rem 0}
.progress p{margin:.3rem 0}
h2{margin:1.6rem 0 .4rem}
table.board{width:100%;border-collapse:collapse;margin-top:.6rem;font-size:.92rem}
table.board th, table.board td{text-align:left;padding:.5rem .6rem;
  border-bottom:1px solid var(--rule)}
table.board th{color:var(--ink-2);font-weight:600;font-size:.8rem}
table.board td.rank{color:var(--ink-2);font-variant-numeric:tabular-nums}
table.board td.settled{font-weight:600;font-variant-numeric:tabular-nums}
table.board td.muted{color:var(--ink-2);font-variant-numeric:tabular-nums}
table.board tbody tr:first-child td{border-top:1px solid var(--rule)}
.vnav{display:flex;gap:.9rem;font-size:.85rem}
.vnav a{color:var(--ink-2);text-decoration:none}
.vnav a:hover{color:var(--ink);text-decoration:underline}

/* page pills under the value: where the text search found it */
.ctx.loc{margin-top:-.3rem}
.ctx.loc a.pg{display:inline-block;padding:0 .45em;border:1px solid var(--ink-2);border-radius:.7em;
  text-decoration:none;color:inherit;font-variant-numeric:tabular-nums}
.ctx.loc a.pg.on{background:var(--accent);border-color:var(--accent);color:#fff}