:root {
  --bg: #fbfbfa;
  --fg: #17171b;
  --muted: #6e6e78;
  --rule: #e4e4e8;
  --soft: #f1f1f3;
  --card: #ffffff;
  --bad: #d4323c;
  --warn: #b8731c;
  --notice: #7b4fd8;
  --good: #1f9a57;
  --pending: #9a9aa4;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f12;
    --fg: #ececf1;
    --muted: #9a9aa6;
    --rule: #27272e;
    --soft: #18181d;
    --card: #141418;
    --bad: #ff6f78;
    --warn: #e2a24a;
    --notice: #b296ff;
    --good: #4ed08c;
    --pending: #6c6c77;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 720px; margin: 0 auto; padding: 40px 16px 72px; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.85em; }
button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.top { margin-bottom: 20px; }
h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0; max-width: 56ch; }

/* Composer */
.composer {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer:focus-within { border-color: var(--fg); }
.composer.drop { border-style: dashed; border-color: var(--fg); background: var(--soft); }
textarea {
  display: block;
  width: 100%;
  min-height: 168px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  color: inherit;
  font: 0.95rem/1.55 var(--sans);
}
textarea::placeholder { color: var(--pending); }
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 10px 16px;
  border-top: 1px solid var(--rule);
}
.hint { color: var(--muted); font-size: 0.875rem; }
/* While a check runs the composer folds to one line, and the results area
   becomes a board: one panel with the checklist and the list as one-liners. */
.composer.folded textarea, .composer.folded .hint { display: none; }
.composer.folded .bar { border-top: 0; padding: 10px 10px 10px 16px; }
.now { font-size: 0.95rem; }
#results.board { margin-top: 16px; padding: 14px 16px 6px; border-radius: 14px; background: var(--soft); }
#results.board .rows { margin-top: 12px; border-top: 1px solid var(--rule); }
#results.board .row { border-color: var(--rule); cursor: default; }
#results.board .stages { font-size: 0.875rem; }
.sep { margin: 0 2px; }
.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  cursor: pointer;
}
.link:hover { color: var(--fg); text-decoration-color: var(--fg); }
#run {
  flex: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  cursor: pointer;
}
#run.stop { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule); }

/* Summary */
#results { margin-top: 36px; }
.summary { display: flex; flex-direction: column; gap: 12px; }
.stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.stage { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.stage.active { color: var(--fg); }
.stage .dot { flex: none; background: var(--fg); }
.stage.pending .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
.stage.active .dot { animation: pulse 1.2s ease-in-out infinite; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; }
.count { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.count .dot { flex: none; }
.line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.status { color: var(--muted); font-size: 0.875rem; }
.ghost {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 0.85rem;
  cursor: pointer;
}
.ghost:hover { border-color: var(--fg); }
.ghost:disabled { opacity: 0.4; cursor: default; }
.flash { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 0.9rem; }
.flash.error { color: var(--bad); }

/* Tones: a filled dot for a verdict, a hollow one for a doubt. */
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.notice { color: var(--notice); }
.good { color: var(--good); }
.pending { color: var(--pending); }
.hollow .dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.pending .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* Rows. A tap anywhere on a row opens or closes it, once the run is over. */
.rows { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 2.2ch 1fr;
  gap: 2px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  transition: opacity 0.3s, transform 0.3s;
  cursor: pointer;
}
.row.fresh { opacity: 0; transform: translateY(6px); }
.row.compact { padding: 7px 0; align-items: baseline; }
.row.fold .ref { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; margin: 0; font-size: 0.9rem; }
.row.fold .line { display: flex; align-items: baseline; gap: 10px; }
.row.fold b { font-weight: 600; }
.chevron { flex: none; color: var(--muted); font-size: 0.8rem; }
.row.compact .line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.row.compact .ref { flex: 1; min-width: 0; margin: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; color: var(--muted); }
.row.compact .state { flex: none; font-size: 0.8rem; }
.row.compact .state.pending { color: var(--pending); }
.row.compact .state.live::after { content: "…"; animation: pulse 1.2s steps(2) infinite; }
.n { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: right; padding-top: 3px; }
.body { min-width: 0; }
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ref {
  margin: 4px 0 6px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.says { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.fix {
  margin: 10px 0 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--soft);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.fix b { font-weight: 650; margin-right: 6px; }

/* What the reference says, then what each doubtful identifier points to. */
.lines { display: grid; grid-template-columns: 52px 1fr; gap: 6px 10px; margin-top: 4px; font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
.lines .k { color: var(--muted); }

/* Evidence */
.evidence { margin-top: 10px; font-size: 0.85rem; }
.evidence summary { color: var(--muted); cursor: pointer; width: max-content; }
.evidence summary:hover { color: var(--fg); }
.evidence dl { margin: 8px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--soft); display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.evidence dt { color: var(--muted); }
.evidence dd { margin: 0; overflow-wrap: anywhere; }
.evidence dd ol { margin: 0; padding-left: 1.2em; }
.evidence dd li.err { color: var(--warn); }
.evidence .tool { font-family: var(--mono); font-size: 0.8em; }
@media (max-width: 480px) { .evidence dl { grid-template-columns: 1fr; gap: 2px; } .evidence dt { margin-top: 6px; } .evidence dt:first-child { margin-top: 0; } }


footer { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--muted); }
footer p { margin: 0 0 8px; }

@media (max-width: 480px) {
  main { padding-top: 28px; }
  body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .row { transition: none; }
  .pending .dot, .row.compact .state.live::after { animation: none; }
}