/* 多久 — a survival curve, and the number it replaces.
   Teal is the honest estimate, amber is the one people quote. Nothing else on
   the page is saturated, because the whole argument is the distance between
   those two marks on one axis. */
:root {
  --bg: #0d1418;
  --panel: #141d22;
  --sunk: #101820;
  --line: #212d34;
  --ink: #e3ecef;
  --dim: #8ea3ac;
  --faint: #5c7079;
  --curve: #5fb6a8;
  --naive: #d98b5e;
  --hot: #e0705e;
  --ok: #6fbf9a;
  --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: #111a1f; }
.mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid;
  place-items: center; font-weight: 700; color: #111a1f;
  background: linear-gradient(140deg, #8fd6ca, var(--curve)); }
.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: 820px; 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.bad { border-color: #43302c; background: #1d1614; }
.sub { color: var(--dim); font-size: 13.5px; margin: 0 0 4px; }
.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(--curve); }

.lbl { display: block; font-size: 12.5px; color: var(--faint); margin-bottom: 6px;
  line-height: 1.7; }
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(--curve); outline-offset: 1px; }
.today { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  font-size: 12.5px; color: var(--faint); flex-wrap: wrap; }
.today input { padding: 8px 10px; background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; font-family: var(--mono);
  font-size: 13px; }

.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: #43302c; background: #1d1614; }
.verdict.bad > b { color: var(--hot); }
.verdict.good { border-color: #2b4034; background: #141d18; }
.verdict.good > b { color: var(--ok); }
.verdict .say { margin: 12px 0 0; font-size: 13.5px; color: var(--dim); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.num { background: var(--sunk); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 10px; }
.num.naive { border-color: #4a3527; }
.num.honest { border-color: #2c4a45; }
.num .k { display: block; font-size: 11px; color: var(--faint); }
.num .v { display: block; font-family: var(--mono); font-size: 30px; line-height: 1.15;
  margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.num.naive .v { color: var(--naive); }
.num.honest .v { color: var(--curve); }
.num .u { display: block; font-size: 11px; color: var(--dim); }

/* ---- the curve ---- */
.chart { display: grid; grid-template-columns: 2.9em 1fr; gap: 4px 6px; margin-top: 12px; }
.yaxis { display: flex; flex-direction: column; justify-content: space-between;
  height: 190px; font-size: 10.5px; color: var(--faint); font-family: var(--mono);
  text-align: right; }
/* The labels sit at the top, middle and bottom of the plot, so the first and
   last need pulling half a line inwards to line up with the edges they name. */
.yaxis span:first-child { margin-top: -.55em; }
.yaxis span:last-child { margin-bottom: -.55em; }
.plot { position: relative; height: 190px; background: var(--sunk);
  border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
/* Everything positioned by day sits in here rather than in .plot directly. The
   censoring marks are circles centred on their day, so one at the last day of
   observation would hang half outside and be sliced off by the rounded corner.
   The x-axis carries the same inset, so labels still line up with the data. */
.plot .inner { position: absolute; left: 6px; right: 6px; top: 0; bottom: 0; }
.xaxis { grid-column: 2; position: relative; height: 14px; margin: 0 6px; }
.xaxis span { position: absolute; transform: translateX(-50%); font-size: 10.5px;
  color: var(--faint); font-family: var(--mono); }
.xaxis span:first-child { transform: none; }
.xaxis span:last-child { transform: translateX(-100%); }

.bandseg { position: absolute; background: var(--curve); opacity: .16; }
/* Past the last completion the curve is flat because the data ran out, not
   because nothing happened. Hatching that stretch says so without a caption. */
.bandseg.tail, .lineseg.tail { opacity: .09; }
.lineseg { position: absolute; height: 2px; background: var(--curve); margin-bottom: -1px; }
.lineseg.tail { opacity: .4; }
.drop { position: absolute; width: 2px; margin-left: -1px; background: var(--curve); }
.cens { position: absolute; width: 9px; height: 9px; margin: -4px 0 -4px -4px;
  border-radius: 50%; background: var(--sunk); border: 2px solid var(--curve); }

.half { position: absolute; left: 0; right: 0; bottom: 50%; height: 0;
  border-top: 1px dashed #3d4d55; }
.vline { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.vline.naive { background: var(--naive); opacity: .8; }
.vline.honest { background: var(--curve); opacity: .5; }

.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: 3px;
  margin-right: 5px; vertical-align: -1px; }
.sw.honest { background: var(--curve); }
.sw.naive { background: var(--naive); }
.sw.cens { border-radius: 50%; background: var(--sunk); border: 2px solid var(--curve);
  width: 9px; height: 9px; }
.sw.bandsw { background: var(--curve); opacity: .25; }

/* ---- the risk table ---- */
.tbl { margin-top: 10px; }
.hd, .row { display: grid; grid-template-columns: 3.4em 4.4em 1fr 4.6em; gap: 8px;
  align-items: baseline; font-variant-numeric: tabular-nums; }
.hd { font-size: 11px; color: var(--faint); padding-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.row { padding: 6px 0; border-bottom: 1px solid var(--line); font-family: var(--mono);
  font-size: 12.5px; }
.row .t { color: var(--ink); }
.row .n, .row .d { color: var(--dim); }
.row .d em { font-style: normal; color: var(--faint); font-size: 11px;
  font-family: -apple-system, "PingFang SC", sans-serif; }
.row .s { text-align: right; color: var(--curve); }

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