/* GrayDates — "moonlit wolf": ink + bone + amber, serif questions, mono chrome */
:root{
  --bg:#0b0e0d;
  --bg-2:#0f1312;
  --panel:#131817;
  --panel-2:#181e1c;
  --line:#222a27;
  --line-2:#313a37;
  --txt:#e8e6e1;
  --txt-dim:#9aa39e;
  --txt-faint:#6d7671;
  --accent:#d9a441;
  --accent-dim:#8a6a2c;
  --accent-bg:rgba(217,164,65,.10);
  --ok:#8fb339;
  --ok-bg:rgba(143,179,57,.13);
  --bad:#c65f3f;
  --bad-bg:rgba(198,95,63,.13);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 50% -12%, #151b19 0%, transparent 62%),
    var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
code{
  font-family:var(--mono);background:#0a0d0c;border:1px solid var(--line);
  padding:.08em .38em;font-size:.86em;color:#f0d9a3;
}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
a{color:var(--accent)}
.app{max-width:960px;margin:0 auto;padding:30px 22px 80px}

/* ---------- header ---------- */
.site-head{display:flex;align-items:center;gap:15px;padding:6px 0 30px}
.logo{width:48px;height:48px;flex:none}
.wordmark{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.01em;margin:0;line-height:1}
.wordmark .gray{color:var(--txt)}
.wordmark .dates{color:var(--accent);font-style:italic}
.tagline{font-size:11.5px;color:var(--txt-faint);margin:6px 0 0;letter-spacing:.03em}
.tagline .c{color:var(--accent-dim)}

/* ---------- home roster ---------- */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:9px;border-bottom:1px solid var(--line-2);margin-bottom:0;flex-wrap:wrap;
}
.section-head h2{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--txt-dim);margin:0;font-weight:500}
.overall{font-size:11px;color:var(--txt-faint);letter-spacing:.06em}
.roster{display:flex;flex-direction:column}
.row-item{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:15px 12px 15px 0;position:relative;transition:background .12s;
}
.row-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .12s;
}
.row-item:hover{background:var(--panel)}
.row-item:hover::before{background:var(--accent)}
.row-item:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.sigil{
  font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.02em;
  border:1px solid var(--line-2);background:#0a0d0c;
  min-width:54px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;margin-left:12px;
}
.row-main{flex:1;min-width:0}
.row-name{display:block;font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.25}
.row-blurb{display:block;font-size:11.5px;color:var(--txt-faint);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 20-tick meter: one tick per question in the round */
.meter{display:flex;gap:2px;flex:none}
.meter i{display:block;width:5px;height:14px;background:var(--line-2)}
.meter i.ok{background:var(--ok)}
.meter i.bad{background:var(--bad)}
.row-stat{font-size:11.5px;color:var(--txt-dim);min-width:74px;text-align:right;flex:none}
.row-stat b{color:var(--txt);font-weight:500}
.pill{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-faint);
  min-width:92px;text-align:right;flex:none}
.pill.progress{color:var(--accent)}
.pill.done{color:var(--ok)}

/* ---------- quiz chrome ---------- */
.quiz-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.btn{background:none;border:1px solid var(--line-2);padding:8px 15px;font-size:12px;
  letter-spacing:.06em;transition:border-color .12s,color .12s,background .12s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.btn.primary:hover{background:rgba(217,164,65,.2)}
.btn.ghost{border-color:transparent;color:var(--txt-dim)}
.btn.ghost:hover{color:var(--accent)}
.btn:disabled{opacity:.3;cursor:not-allowed;border-color:var(--line);color:var(--txt-faint)}
.btn.sm{padding:6px 10px;font-size:11.5px}
.spacer{flex:1}
.stats{font-size:11.5px;color:var(--txt-faint);letter-spacing:.04em;white-space:nowrap}
.stats b.ok{color:var(--ok);font-weight:500}
.stats b.bad{color:var(--bad);font-weight:500}
.timer{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.08em;
  border:1px solid var(--line-2);padding:5px 11px}
.timer.paused{color:var(--txt-faint)}
.scorebar{display:none}

/* question ticks */
.chips{display:flex;flex-wrap:wrap;gap:3px;margin:16px 0 34px}
.chip{width:28px;height:22px;border:1px solid var(--line-2);background:none;
  font-size:10.5px;color:var(--txt-faint);display:flex;align-items:center;justify-content:center;padding:0}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.ok{background:var(--ok);border-color:var(--ok);color:#0b0e0d;font-weight:700}
.chip.bad{background:var(--bad);border-color:var(--bad);color:#0b0e0d;font-weight:700}
.chip.current{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chip.ok.current,.chip.bad.current{color:#0b0e0d;box-shadow:inset 0 0 0 1px #0b0e0d}

/* ---------- question ---------- */
.qcard{max-width:none;margin:0;background:none;border:0;padding:0}
.qhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:22px}
.qnum{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.qtag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint)}
.qtext{font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.35;
  margin:0 0 30px;letter-spacing:-.005em;max-width:34em}
.qtext code{font-size:.72em;vertical-align:.08em}
.qtext pre{font-family:var(--mono);font-size:13px;background:#080a09;border:1px solid var(--line);
  border-left:2px solid var(--accent-dim);padding:13px 16px;overflow-x:auto;color:#d6ded9;
  line-height:1.55;margin:18px 0 0}

.choices{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.choice{display:flex;align-items:baseline;gap:16px;text-align:left;width:100%;
  background:none;border:0;border-bottom:1px solid var(--line);padding:15px 14px 15px 0;
  font-size:15px;position:relative;transition:background .12s}
.choice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent}
.choice:hover:not(:disabled){background:var(--panel)}
.choice:hover:not(:disabled)::before{background:var(--accent)}
.choice:disabled{cursor:default}
.choice .key{font-size:11px;font-weight:700;color:var(--txt-faint);letter-spacing:.1em;
  width:26px;flex:none;text-align:center}
.choice .body{flex:1;font-family:var(--serif);font-size:17px;line-height:1.45}
.choice .body code{font-family:var(--mono);font-size:.8em}
.choice .mark{font-size:13px;font-weight:700;flex:none;width:16px;text-align:right}
.choice.correct{background:var(--ok-bg)}
.choice.correct::before{background:var(--ok)}
.choice.correct .key,.choice.correct .mark{color:var(--ok)}
.choice.chosen-bad{background:var(--bad-bg)}
.choice.chosen-bad::before{background:var(--bad)}
.choice.chosen-bad .key,.choice.chosen-bad .mark{color:var(--bad)}
.choice.muted{opacity:.4}

/* ---------- explanation ---------- */
.explain{margin-top:26px;padding:16px 0 4px 18px;border-left:2px solid var(--line-2);background:none}
.explain.ok{border-left-color:var(--ok)}
.explain.bad{border-left-color:var(--bad)}
.explain h4{margin:0 0 12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.explain.ok h4{color:var(--ok)}
.explain.bad h4{color:var(--bad)}
.explain p{margin:0 0 14px;font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--txt)}
.explain p:last-child{margin-bottom:0}
.explain .label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--txt-faint);display:block;margin-bottom:4px}
.nav{display:flex;gap:10px;margin:36px 0 0;flex-wrap:wrap}
.hint{font-size:10.5px;color:var(--txt-faint);margin-top:20px;letter-spacing:.06em}
.hint kbd{border:1px solid var(--line-2);padding:1px 5px;font-size:10px;font-family:var(--mono)}

/* ---------- results ---------- */
.result-head{max-width:none;margin:0 0 30px}
.ring{width:132px;height:132px;margin:0 0 10px;display:block}
.ring text{font-family:var(--mono);fill:var(--txt)}
.verdict{font-family:var(--serif);font-size:26px;font-weight:400;margin:10px 0 5px;line-height:1.3;max-width:26em}
.verdict-sub{font-size:11px;color:var(--txt-faint);margin:0;letter-spacing:.1em;text-transform:uppercase}
.metrics{display:flex;gap:0;flex-wrap:wrap;margin:26px 0 4px;border-top:1px solid var(--line-2)}
.metric{padding:13px 26px 13px 0;margin-right:26px;border-right:1px solid var(--line);min-width:84px}
.metric:last-child{border-right:0}
.metric .v{font-size:21px;font-weight:700;display:block;line-height:1.2}
.metric .k{font-size:10px;color:var(--txt-faint);text-transform:uppercase;letter-spacing:.16em}
.review{max-width:none;margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rev{border-bottom:1px solid var(--line);border-left:2px solid transparent}
.rev.bad{border-left-color:var(--bad)}
.rev.ok{border-left-color:var(--ok)}
.rev-btn{display:flex;align-items:baseline;gap:13px;width:100%;background:none;border:0;
  padding:14px 14px 14px 16px;text-align:left}
.rev-btn:hover{background:var(--panel)}
.rev-n{font-size:10.5px;color:var(--txt-faint);flex:none;width:22px}
.rev-mark{flex:none;font-weight:700;font-size:13px;width:14px}
.rev.ok .rev-mark{color:var(--ok)}
.rev.bad .rev-mark{color:var(--bad)}
.rev-q{flex:1;font-family:var(--serif);font-size:16px;line-height:1.45}
.rev-q code{font-family:var(--mono);font-size:.78em}
.rev-caret{color:var(--txt-faint);font-size:10px;flex:none}
.rev-body{padding:4px 16px 20px 67px}
.rev-body .row{font-family:var(--serif);font-size:15.5px;margin:0 0 14px;line-height:1.55}
.rev-body .row .label{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--txt-faint);display:block;margin-bottom:2px}
.rev-body .yours-bad{color:#e8a58c}
.rev-body .right{color:#c3d98a}
.hidden{display:none}

/* ---------- footer ---------- */
.foot{max-width:960px;margin:64px auto 0;padding:18px 0 0;border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--txt-faint);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;letter-spacing:.05em}
.foot a{color:var(--txt-dim)}
.linkbtn{background:none;border:0;padding:0;font-family:var(--mono);font-size:10.5px;
  color:var(--txt-faint);text-decoration:underline;letter-spacing:.05em}
.linkbtn:hover{color:var(--bad)}
.paw{opacity:.45}

@media (max-width:620px){
  .app{padding:20px 15px 60px}
  .row-blurb,.row-stat{display:none}
  .meter i{width:4px}
  .sigil{margin-left:0;min-width:46px}
  .qtext{font-size:22px}
  .choice .body{font-size:16px}
  .wordmark{font-size:27px}
  .rev-body{padding-left:24px}
  .metric{padding-right:18px;margin-right:18px;min-width:66px}
}
@media (max-width:460px){
  .meter{display:none}
  .pill{min-width:0}
}