/* 倒排 — a wall planner. Warm paper-ish neutrals, one ochre accent, and every
   number set in tabular figures so two columns of hours line up. There is no
   JavaScript on any page, so there is nothing here for hover-only affordances
   to hide behind: every control is visible and is a real form element. */
:root {
  --bg: #101310;
  --panel: #191d19;
  --line: #2a2f29;
  --ink: #e9ece8;
  --dim: #98a094;
  --faint: #67705f;
  --accent: #c9a86a;
  --good: #7cbf86;
  --bad: #e0806f;
  --warn: #e0b155;
  --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%;
}
b { font-weight: 600; }
a { color: var(--accent); }

.topbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px 12px;
  border-bottom: 1px solid var(--line); background: #141814;
  position: sticky; top: 0; z-index: 10;
}
.mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid;
        place-items: center; font-weight: 700; color: #141814;
        background: linear-gradient(140deg, #e7d3a4, var(--accent)); }
.titles { margin-right: auto; min-width: 0; }
.titles h1 { margin: 0; font-size: 17px; letter-spacing: .06em; }
.titles p { margin: 0; font-size: 11px; color: var(--faint);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 6px; }
.tab { color: var(--dim); text-decoration: none; padding: 7px 11px; border-radius: 10px;
       border: 1px solid transparent; font-size: 14px; }
.tab.on { background: var(--panel); border-color: var(--line); color: var(--ink); }
@media (max-width: 560px) { .tabs { flex-basis: 100%; } .tabs .tab { flex: 1 1 0; text-align: center; } }

main { padding: 14px 12px 24px; max-width: 780px; margin: 0 auto; }
input, button, select { 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; }
.sub { color: var(--dim); font-size: 13px; }

.field { display: block; margin: 10px 0; }
.field > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; background: #0d0f0d; color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; }
.field input[type="number"], .field input[type="date"] { font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.btn { display: inline-block; min-height: 46px; padding: 12px 16px; cursor: pointer;
       border-radius: 11px; border: 1px solid var(--line); background: #212720;
       color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--accent); color: #141814; font-weight: 700; border-color: transparent; }
.btn.small { min-height: 38px; padding: 8px 12px; }
.btn:active { filter: brightness(1.2); }

.verdict { padding: 14px 15px; border-radius: 12px; margin-bottom: 14px; font-size: 14.5px;
           background: var(--panel); border: 1px solid var(--line); }
/* Direct child only: the headline is a block, but the <b>s inside the sentence
   below it are emphasis and must stay inline — as a descendant rule this put
   every emphasised number on a line of its own. */
.verdict > b { display: block; font-size: 17px; margin-bottom: 4px; }
.verdict.bad  { border-color: #4a302c; background: #221816; }
.verdict.warn { border-color: #4a3d24; background: #221d16; }
.verdict.good { border-color: #2c4433; background: #172119; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 520px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: #0d0f0d; border: 1px solid var(--line); border-radius: 11px;
        padding: 10px; text-align: center; }
.stat .n { font-size: 20px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat .l { font-size: 11px; color: var(--faint); margin-top: 2px; }

.plan { list-style: none; margin: 8px 0 0; padding: 0; }
.plan li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0;
           border-top: 1px solid var(--line); }
.plan li:first-child { border-top: none; }
.plan .v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--dim);
           white-space: nowrap; }

/* Each topic row is its own form — no JavaScript, so "save" has to submit
   something, and the something is the row you edited. */
.topic { border-top: 1px solid var(--line); padding: 12px 0; margin: 0; }
.topic:first-of-type { border-top: none; }
.topic.off { opacity: .45; }
.trow { display: flex; gap: 8px; align-items: center; }
.trow input { padding: 9px 10px; background: #0d0f0d; color: var(--ink);
              border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.trow .nm { flex: 1 1 auto; }
.trow .sm { flex: 0 0 72px; width: 72px; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: #0d0f0d; border-radius: 999px; overflow: hidden; margin: 9px 0 6px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tmeta { font-size: 12px; color: var(--faint); }
.tmeta a { margin-left: 8px; }

.lrow { display: flex; gap: 10px; align-items: baseline; padding: 9px 0;
        border-top: 1px solid var(--line); font-size: 13.5px; }
.lrow:first-of-type { border-top: none; }
.lrow .d { font-family: var(--mono); color: var(--dim); }
.lrow .t { flex: 1 1 auto; min-width: 0; }
.lrow .v { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrow .a { color: var(--faint); font-size: 12px; white-space: nowrap; }

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