/* Metric Coder — the Review Coder's layout language (sticky header, cards, muted labels) with its own accent
   (Okabe-Ito blue), so you can tell which project you are in. Every distinction is carried without colour first:
   a highlight is bold + underlined + tinted; an overlap is a double underline; done is a ✓ mark; a check is ✓ ✗ ?. */
:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1f2328; --muted:#6b7380; --line:#e6e8ec; --line-soft:#f0f1f4;
  --accent:#0072B2; --accent-bg:#e3eef7;          /* Okabe-Ito blue */
  --hl:#cfe8f6;                                    /* sky tint for a highlight */
  --hl-ink:#003f66;
  --ok:#2a6f4a; --ok-bg:#e7f2ec; --warn:#8a6a14; --warn-bg:#f7f0d8; --bad:#9b3a2b; --bad-bg:#f6e6e2;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:var(--accent)}
header{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
header .wrap{display:flex;align-items:center;gap:18px;padding:11px 22px;flex-wrap:wrap}
.brand{font-weight:600;font-size:16px;white-space:nowrap}
.brand span{color:var(--accent);font-weight:500}
.spacer{flex:1}
.who{font-size:13.5px;color:var(--muted)}
.who b{color:var(--ink);font-weight:600}
.status{font-size:13px;color:var(--muted);min-width:120px}
.status.bad{color:var(--bad)}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
main{padding:22px 22px 80px}
h1{font-size:23px;font-weight:600;margin:4px 0 6px;letter-spacing:-.01em}
h2{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:22px 0 10px}
.sub{color:var(--muted);margin:0 0 16px;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
button,.btn{font:inherit;font-size:13.5px;padding:5px 11px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;color:var(--ink)}
button:hover{border-color:#c9ccd3}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.on{background:var(--accent-bg);border-color:var(--accent);color:var(--hl-ink);font-weight:600}
button:disabled{opacity:.45;cursor:default}
input[type=text],input[type=search],select,textarea{font:inherit;font-size:13.5px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
input[type=text]:focus,input[type=search]:focus,textarea:focus{outline:2px solid var(--accent-bg);border-color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:13px}
.tag{display:inline-block;font-size:12px;padding:1px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fff;margin-left:4px;white-space:nowrap}
.tag.firm{color:var(--ink)}
kbd{font:12px/1 ui-monospace,Menlo,monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:#fafafa}

/* ---------- front page */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}
.filters .grp{display:flex;gap:4px}
table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13.5px}
table.list th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);background:#fafbfc}
table.list td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.list tr:hover td{background:#fafbfd}
table.list td.num{text-align:right;font-variant-numeric:tabular-nums}
table.list a.t{color:var(--ink);text-decoration:none;font-weight:500}
table.list a.t:hover{text-decoration:underline;color:var(--accent)}
.done-mark{font-weight:700;color:var(--ok)}
.namebox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.namebox input{min-width:220px}

/* ---------- coder */
.coder{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
@media (max-width:980px){.coder{grid-template-columns:1fr}}
.doc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 34px 40px;font-size:16px;line-height:1.72}
.doc ::selection{background:var(--accent-bg);color:var(--hl-ink)}
.doc .blk{position:relative;margin:0 0 .9em;white-space:pre-wrap}
.doc .blk.t-h1{font-size:25px;font-weight:600;line-height:1.3;margin:0 0 18px;letter-spacing:-.01em}
.doc .blk.t-h2{font-size:19px;font-weight:600;margin:1.3em 0 .5em}
.doc .blk.t-h3,.doc .blk.t-h4{font-size:16.5px;font-weight:600;margin:1.1em 0 .4em}
.doc .blk.t-li{padding-left:1.3em}
.doc .blk.t-li::before{content:"•";position:absolute;left:.3em;color:var(--muted)}
.doc .blk.t-quote{border-left:3px solid var(--line);padding-left:12px;color:#3a3f46}
.doc .blk.t-fig{font-size:13.5px;color:var(--muted);border-left:3px dotted var(--line);padding-left:12px}
.doc .bn{position:absolute;left:-30px;top:.35em;font:11px/1 ui-monospace,Menlo,monospace;color:#b8bcc5;user-select:none}
/* a highlight: bold + solid underline + sky tint; two overlapping highlights: double underline */
mark.hl{background:var(--hl);color:var(--hl-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;border-radius:2px;cursor:pointer;padding:0 1px}
mark.hl.hl2{text-decoration-style:double}
mark.hl.flash{outline:2px solid var(--accent)}
.side{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;display:flex;flex-direction:column;gap:10px}
.side .card{margin:0}
.side h3{margin:0 0 8px;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.side h3 .n{font-weight:500;color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 8px}
ul.metrics{list-style:none;margin:0;padding:0;max-height:38vh;overflow:auto;border-top:1px solid var(--line-soft)}
ul.metrics li{display:flex;gap:8px;align-items:baseline;padding:6px 2px;border-bottom:1px solid var(--line-soft);font-size:14px}
ul.metrics li .q{flex:1;font-weight:600;color:var(--hl-ink);cursor:pointer}
ul.metrics li .q:hover{text-decoration:underline}
ul.metrics li .where{font:11.5px ui-monospace,Menlo,monospace;color:var(--muted);white-space:nowrap}
ul.metrics li .x{border:none;background:none;color:var(--muted);font-size:16px;line-height:1;padding:0 4px;cursor:pointer}
ul.metrics li .x:hover{color:var(--bad)}
ul.metrics li.flash{background:var(--accent-bg)}
ul.metrics li.empty{color:var(--muted);font-style:italic;font-weight:400}
.donebar{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13.5px}
.meta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13.5px}
.meta dt{color:var(--muted)}
.meta dd{margin:0;word-break:break-word}
.paper{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:8px 0;font-size:13.5px}
.paper .pt{font-weight:600}
.paper .pm{color:var(--muted);font-size:12.5px}
.paper .nom{font-size:11.5px;color:var(--hl-ink);background:var(--accent-bg);border-radius:999px;padding:0 7px;margin-left:4px}
.chk{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:6px}
.chk label{font-size:13px;border:1px solid var(--line);border-radius:7px;padding:3px 9px;cursor:pointer;background:#fff}
.chk label.on{background:var(--accent-bg);border-color:var(--accent);font-weight:600}
.chk input[type=radio]{display:none}
.chk input[type=text]{flex:1;min-width:140px}
.by{font-size:12px;color:var(--muted);margin-top:3px}
.by b{font-weight:600;color:var(--ink)}
details.hist{font-size:12.5px;color:var(--muted);margin-top:8px}
details.hist li{margin:2px 0}
.nav{display:flex;gap:6px;align-items:center}
.nav .pos{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1f2328;color:#fff;padding:8px 14px;border-radius:8px;font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.toast.bad{background:var(--bad)}
.legend{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.legend mark.hl{cursor:default}
.list tr.aside td{color:var(--muted)}
.filters .rowbreak{flex-basis:100%;height:0}