/* 表停了 — one stylesheet, no framework, no client script.

   Paper, not a dashboard. The subject is a statute, a form and a date stamp,
   so the page is warm paper and near-black ink with two signal colours: a
   green for the clock running and a rust red for the clock stopped. Those two
   carry the whole argument, so nothing else on the page is allowed to be
   saturated. */

:root {
  --paper: #f7f4ee;
  --card: #fffdf9;
  --ink: #1b1a17;
  --dim: #55514a;
  --faint: #8b8479;
  --rule: #ded6c6;
  --run: #2f6b4f;
  --run-soft: #d7e6dd;
  --stop: #a8402c;
  --stop-soft: #f0dbd5;
  --shut: #cdc5b6;
  --mark: #3a4a5a;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16171a;
    --card: #1d1f23;
    --ink: #eceae5;
    --dim: #b6b1a8;
    --faint: #857f76;
    --rule: #33363c;
    --run: #6fc79b;
    --run-soft: #1f3a2e;
    --stop: #e08a72;
    --stop-soft: #3a241f;
    --shut: #3d414a;
    --mark: #8fa8bd;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 14px calc(30px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans SC", "PingFang SC", sans-serif;
  overflow-wrap: anywhere;
}
main { max-width: 800px; margin: 0 auto; }

.topbar {
  max-width: 800px; margin: 0 auto; padding: 22px 0 14px;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start;
}
.mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: var(--mark); color: var(--card); font-size: 20px;
}
.titles h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.titles p { margin: 4px 0 0; color: var(--dim); font-size: 14px; }

.panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px; margin: 14px 0;
}
.panel h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.01em; }
.panel h2.spaced { margin-top: 18px; }
.sub { margin: 0 0 10px; color: var(--dim); font-size: 14px; }
.sub:last-child { margin-bottom: 0; }
.tiny { margin: 8px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.quiet { background: transparent; }
code {
  font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 5px; padding: 1px 4px;
}

/* ------------------------------------------------------------------ form */

.egs { display: grid; gap: 8px; margin-bottom: 14px; }
.eg, .pill {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 9px; padding: 9px 11px;
  font: inherit;
}
.eg b, .pill b { display: block; font-size: 14px; }
.eg span, .pill span { display: block; color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.eg.on, .pill.on { border-color: var(--mark); background: var(--card); box-shadow: inset 0 0 0 1px var(--mark); }
.eg:focus-visible, .pill:focus-visible, .go:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mark); outline-offset: 2px;
}
.pills { display: grid; gap: 7px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pills { grid-template-columns: 1fr 1fr; } }

.lbl { display: block; margin: 6px 0 7px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
textarea {
  width: 100%; min-width: 0; resize: vertical;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 9px; padding: 10px;
  font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dials { margin-top: 12px; }
.go {
  cursor: pointer; border: 0; border-radius: 9px; padding: 11px 20px;
  background: var(--mark); color: var(--card); font: inherit; font-weight: 650;
}

/* --------------------------------------------------------------- verdicts */

.verdict {
  border: 1px solid var(--rule); border-left: 4px solid var(--mark);
  border-radius: var(--radius); background: var(--card); padding: 15px 16px; margin: 14px 0;
}
.verdict > b { display: block; font-size: 19px; line-height: 1.3; }
.verdict .say { margin: 7px 0 0; color: var(--dim); font-size: 14px; }
.verdict.ok { border-left-color: var(--run); }
.verdict.bad { border-left-color: var(--stop); }
.verdict.na { border-left-color: var(--faint); }

.finding { border-top: 1px solid var(--rule); padding: 12px 0; }
.finding:first-child { border-top: 0; padding-top: 0; }
.finding:last-child { padding-bottom: 0; }
.finding > b { display: block; font-size: 14.5px; }
.finding > p { margin: 5px 0 0; color: var(--dim); font-size: 13.5px; }
.finding.ok > b { color: var(--run); }
.finding.bad > b { color: var(--stop); }

/* -------------------------------------------------------------- timelines */

.row { border-top: 1px solid var(--rule); padding: 12px 0; }
.row:first-of-type { border-top: 0; }
.rh { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.rh b { font-weight: 650; }
.rh span { color: var(--faint); white-space: nowrap; }
.rn { margin-top: 3px; color: var(--dim); font-size: 12.5px; }
.rn .n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rn .sep { margin: 0 7px; color: var(--rule); }
.rn .late { color: var(--stop); }

svg.tl { display: block; width: 100%; height: auto; margin: 5px 0 2px; }
.seg.run { fill: var(--run); }
.seg.stop { fill: var(--stop); }
.seg.shut { fill: var(--shut); }
.due { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 2; }
.duelab { fill: var(--faint); font-size: 9px; font-family: inherit; }

.key { display: inline-block; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.key.run { background: var(--run-soft); color: var(--run); }
.key.stop { background: var(--stop-soft); color: var(--stop); }
.key.shut { background: var(--shut); color: var(--ink); }

.breakdown { display: grid; gap: 8px; margin-bottom: 12px; }
@media (min-width: 620px) { .breakdown { grid-template-columns: repeat(3, 1fr); } }
.br {
  border: 1px solid var(--rule); border-radius: 9px; padding: 11px 12px; background: var(--paper);
}
.br .n {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.br span:last-child { display: block; color: var(--dim); font-size: 12.5px; margin-top: 3px; }
.br.run { border-left: 3px solid var(--run); }
.br.stop { border-left: 3px solid var(--stop); }
.br.shut { border-left: 3px solid var(--shut); }

/* ---------------------------------------------------------------- scatter */

svg.sc { display: block; width: 100%; height: auto; margin-top: 6px; }
.gl { stroke: var(--rule); stroke-width: 1; }
.gy, .ax, .limlab, .ideallab { fill: var(--faint); font-size: 10px; font-family: inherit; }
.ideal { stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 4 3; }
.lim { stroke: var(--stop); stroke-width: 1.2; }
.limlab { fill: var(--stop); }
.pt { fill: var(--run); fill-opacity: 0.75; }
.pt.over { fill: var(--stop); fill-opacity: 0.9; }

/* ------------------------------------------------------------------ lists */

.bad { border-color: var(--stop); }
.badlist, .hol { margin: 0; padding-left: 18px; font-size: 13px; color: var(--dim); }
.badlist li, .hol li { margin: 5px 0; }
.badlist b, .hol b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hol li.shutdown b { color: var(--stop); }

.more { margin: 14px 0; border: 1px solid var(--rule); border-radius: var(--radius);
        background: var(--card); padding: 12px 16px; }
.more > summary { cursor: pointer; color: var(--mark); font-weight: 650; font-size: 14px;
                  list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "\002B  "; color: var(--faint); }
.more[open] > summary::before { content: "\2212  "; }
.warn { margin: 10px 0 0; color: var(--stop); font-size: 13px; }

.foot {
  max-width: 800px; margin: 22px auto 0; padding-top: 14px;
  border-top: 1px solid var(--rule); color: var(--faint); font-size: 12.5px;
}