/* 总有一个 — a forest plot and two counts.
   Amber is "looked significant", green is "survived the correction", and
   everything that crosses zero is grey. The page has three states and they are
   three colours; nothing else is saturated. */
:root {
  --bg: #0f1012;
  --panel: #17191c;
  --sunk: #121416;
  --line: #262a2e;
  --ink: #e8eaec;
  --dim: #9aa2a8;
  --faint: #69717a;
  --raw: #d9a34f;
  --keep: #63b98a;
  --quiet: #5b646c;
  --hot: #d9694f;
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
b { font-weight: 600; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--dim); }

.topbar { display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line); background: #141619; }
.mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid;
  place-items: center; font-weight: 700; color: #141619;
  background: linear-gradient(140deg, #e8c483, var(--raw)); }
.titles { min-width: 0; }
.titles h1 { margin: 0; font-size: 17px; letter-spacing: .06em; }
.titles p { margin: 0; font-size: 11px; color: var(--faint); }

main { padding: 14px 12px 24px; max-width: 840px; margin: 0 auto; }
textarea, button, input { font: inherit; font-family: inherit; }

.panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel h2 { margin: 0 0 6px; font-size: 15px; }
.panel.quiet { background: none; }
.panel.intro { background: none; border-style: dashed; }
.panel.bad { border-color: #45302b; background: #1d1614; }
.sub { color: var(--dim); font-size: 13.5px; margin: 0 0 8px; }
.sub:last-child { margin-bottom: 0; }
.tiny { color: var(--faint); font-size: 12px; line-height: 1.6; margin: 10px 0 0; }

/* ---- input ---- */
.egs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 400px) { .egs { grid-template-columns: 1fr; } }
.eg { text-align: left; padding: 10px 12px; background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.eg b { display: block; font-size: 14px; }
.eg span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.eg.on { border-color: var(--raw); }

.lbl { display: block; font-size: 12.5px; color: var(--faint); margin-bottom: 6px;
  line-height: 1.8; }
textarea { width: 100%; padding: 12px; background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; font-family: var(--mono);
  font-size: 13px; line-height: 1.7; resize: vertical; }
textarea:focus-visible { outline: 2px solid var(--raw); outline-offset: 1px; }

.prob { display: grid; grid-template-columns: 5em 1fr; gap: 4px 8px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.prob .ln { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.prob code { overflow-wrap: anywhere; }
.prob i { grid-column: 2; font-style: normal; font-size: 12px; color: var(--hot); }

/* ---- the headline ---- */
.verdict { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.verdict > b { display: block; font-size: 17px; }
.verdict.bad { border-color: #45302b; background: #1d1614; }
.verdict.bad > b { color: var(--hot); }
.verdict.warn { border-color: #453a1f; background: #1c1a12; }
.verdict.warn > b { color: var(--raw); }
.verdict.ok { border-color: #2a4436; background: #131d18; }
.verdict.ok > b { color: var(--keep); }
.verdict .say { margin: 12px 0 0; font-size: 13.5px; color: var(--dim); }
.verdict .chance { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }
.verdict .chance b { color: var(--ink); font-family: var(--mono); }

.counts { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: 6px; margin-top: 12px; }
.counts .op { color: var(--faint); font-family: var(--mono); }
.box { background: var(--sunk); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 6px; text-align: center; min-width: 0; }
.box .k { display: block; font-size: 10.5px; color: var(--faint); }
.box .v { display: block; font-family: var(--mono); font-size: 26px; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.box .u { display: block; font-size: 10.5px; color: var(--faint); }
.box.raw { border-color: #453a1f; }
.box.raw .v { color: var(--raw); }
.box.keep { border-color: #2a4436; }
.box.keep .v { color: var(--keep); }
.box.gone .v { color: var(--quiet); }

/* ---- the forest plot ---- */
.forest { position: relative; margin-top: 12px; }
/* Zero is drawn once per row, inside the track, rather than as one element
   over the whole block. A single absolute line would have to be positioned as a
   percentage of the *track* column, and .forest doesn't know where that column
   starts — the first attempt put the line 40px to the right of every bar. Rows
   are packed tightly and each segment overhangs by the row padding, so these
   join into one continuous line. */
.frow .zero { position: absolute; top: -3px; bottom: -3px; width: 1px;
  margin-left: -0.5px; background: var(--faint); opacity: .5; }
.frow { display: grid; grid-template-columns: 5.2em 1fr 3.6em 3.4em; gap: 8px;
  align-items: center; padding: 3px 0; position: relative; z-index: 1; }
.frow .nm { font-size: 12px; color: var(--dim); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.frow .track { position: relative; height: 16px; }
.frow .bar { position: absolute; top: 6px; height: 4px; border-radius: 2px;
  background: var(--quiet); }
.frow .pt { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--quiet); box-shadow: 0 0 0 2px var(--panel); }
.frow.raw .bar, .frow.raw .pt { background: var(--raw); }
.frow.keep .bar, .frow.keep .pt { background: var(--keep); }
.frow.keep .nm, .frow.raw .nm { color: var(--ink); }
.frow .d, .frow .p { font-family: var(--mono); font-size: 11.5px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--faint); }
.frow.raw .d { color: var(--raw); }
.frow.keep .d { color: var(--keep); }

.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px;
  font-size: 11.5px; color: var(--dim); }
.legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px; }
.sw.keep { background: var(--keep); }
.sw.raw { background: var(--raw); }
.sw.quiet { background: var(--quiet); }
.sw.zeroline { width: 2px; height: 12px; border-radius: 0; background: var(--faint);
  margin-right: 9px; }

/* ---- the two corrections ---- */
.corr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 520px) { .corr { grid-template-columns: 1fr; } }
.corr .c { background: var(--sunk); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px; }
/* Direct child only. `.corr .c b` also matches the inline <b> inside the
   paragraph below, which then breaks the sentence across three lines. */
.corr .c > b { display: block; font-size: 13px; }
.corr .c .n { display: block; font-family: var(--mono); font-size: 22px; margin: 4px 0 2px;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.corr .c p { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.55; }

/* ---- the simulation ---- */
.knob { padding: 10px 0 2px; }
.knob label { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 13px; color: var(--dim); }
.knob label b { font-family: var(--mono); color: var(--raw); font-size: 16px;
  font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent; height: 34px; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--line), var(--raw)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--line), var(--raw)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px;
  height: 26px; border-radius: 50%; background: var(--ink); border: none; margin-top: -10px; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); border: none; }

.sim { display: grid; gap: 8px; margin-top: 6px; }
.srow { display: grid; grid-template-columns: 9.6em 1fr 3em; align-items: center; gap: 8px; }
.srow .k { font-size: 12px; color: var(--dim); }
.srow .t { height: 14px; background: var(--sunk); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); }
.srow .t > i { display: block; height: 100%; border-radius: 999px; }
.srow .t > i.raw { background: var(--raw); }
.srow .t > i.keep { background: var(--keep); }
.srow .t > i.strict { background: #6d8fb5; }
.srow .v { text-align: right; font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.srow .v.raw { color: var(--raw); }
.srow .v.keep { color: var(--keep); }
.srow .v.strict { color: #6d8fb5; }

.foot { text-align: center; padding: 6px 12px max(18px, env(safe-area-inset-bottom));
  color: var(--faint); font-size: 11px; }