/* The face. PLAN-CONSOLE-INTERFACE.md §3.3–§3.5: one grid, paper not
   phosphor, colour spent on state only — blue runs, amber waits on a
   person, green is good and closed, red is wrong, grey is gone. One accent
   marks the cursor row and the primary action and nothing else. IBM Plex
   Sans for words, Plex Mono where alignment carries meaning. Tokens first;
   a page never reaches for a literal. Light by default; dark by the
   viewer's setting or the toggle (`:theme`). */

:root {
  color-scheme: light;
  --bg: #f6f6f4; --surface: #ffffff; --surface-2: #f0efec; --hair: #e3e1dc; --hair-2: #cfccc5;
  --ink: #1b1b1a; --ink-2: #4b4a46; --ink-3: #85827a; --ink-4: #b3b0a8;
  --accent: #2a55c9; --accent-soft: rgba(42, 85, 201, 0.10); --accent-ink: #ffffff;
  --blue: #2a6fd6; --amber: #b5791c; --green: #2f8a4c; --red: #c2362f; --grey: #9a9790;
  --blue-soft: rgba(42, 111, 214, .12); --amber-soft: rgba(181, 121, 28, .14); --green-soft: rgba(47, 138, 76, .12); --red-soft: rgba(194, 54, 47, .12); --grey-soft: rgba(154, 151, 144, .16);
  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --row: 30px; --spine: 272px; --drawer: 400px; --bar: 40px; --foot: 26px; --r: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121315; --surface: #1a1b1e; --surface-2: #202227; --hair: #2a2c31; --hair-2: #3a3d44;
  --ink: #ececea; --ink-2: #c4c3be; --ink-3: #8b8a84; --ink-4: #5d5c58;
  --accent: #7ea1ff; --accent-soft: rgba(126, 161, 255, .16); --accent-ink: #0c1326;
  --blue: #6ea0f2; --amber: #d9a33a; --green: #5cb878; --red: #e5635b; --grey: #7c7a74;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121315; --surface: #1a1b1e; --surface-2: #202227; --hair: #2a2c31; --hair-2: #3a3d44;
    --ink: #ececea; --ink-2: #c4c3be; --ink-3: #8b8a84; --ink-4: #5d5c58;
    --accent: #7ea1ff; --accent-soft: rgba(126, 161, 255, .16); --accent-ink: #0c1326;
    --blue: #6ea0f2; --amber: #d9a33a; --green: #5cb878; --red: #e5635b; --grey: #7c7a74;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
:root[data-density="compact"] { --row: 26px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 13px/1.45 var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
#root { height: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font: 11px/1 var(--mono); padding: 2px 5px; border: 1px solid var(--hair-2); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-3); }
.small { font-size: 11px; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.ok { color: var(--green); } .bad { color: var(--red); } .pend { color: var(--amber); }

/* ---- the frame: bar / body / foot; spine | sheet | drawer ---------------- */
#app { display: grid; height: 100vh; height: 100dvh; grid-template-rows: var(--bar) minmax(0, 1fr) var(--foot); grid-template-columns: var(--spine) minmax(0, 1fr) var(--drawer); grid-template-areas: "bar bar bar" "spine sheet drawer" "foot foot foot"; }
#app.no-spine { grid-template-columns: 0 minmax(0, 1fr) var(--drawer); }
#app.no-drawer { grid-template-columns: var(--spine) minmax(0, 1fr) 0; }
#app.no-spine.no-drawer { grid-template-columns: 0 minmax(0, 1fr) 0; }

/* ---- the bar: a path when idle, a prompt when typed into ---------------- */
.bar { grid-area: bar; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: var(--surface); position: relative; z-index: 5; min-width: 0; }
.bar .crumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; height: 28px; padding: 0 8px; border-radius: var(--r); cursor: text; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.bar .crumb:hover { background: var(--surface-2); }
.bar .crumb b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.bar .crumb a { color: var(--ink-2); }
.bar .crumb i { color: var(--ink-4); font-style: normal; }
.bar .crumb .hint { margin-left: auto; color: var(--ink-4); font-size: 12px; display: flex; gap: 10px; align-items: center; }
.bar .prompt { flex: 1; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); min-width: 0; }
.bar .prompt .mode { font: 11px/1 var(--mono); padding: 3px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); letter-spacing: .04em; }
.bar .prompt input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--mono); font-size: 13px; }
.bar .state { display: flex; gap: 14px; align-items: center; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.bar .beats { display: flex; gap: 8px; }
.beat { display: inline-flex; align-items: center; gap: 5px; }
.beat i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.beat.quiet i, .beat.unknown i { background: var(--ink-4); } .beat.down i { background: var(--red); }
.bar .snap { font: 11px/1 var(--mono); color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: 2px 6px; }
.bar .inbox-pill { border: 1px solid var(--hair); border-radius: 999px; padding: 2px 9px; background: var(--surface); color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.bar .inbox-pill.some { border-color: var(--amber); color: var(--amber); }
.bar .inbox-pill b { font-weight: 600; }
.suggest { position: absolute; top: calc(var(--bar) - 4px); left: 14px; right: 14px; max-width: 760px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; z-index: 6; max-height: 70vh; overflow: auto; }
.sug { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 4px; color: var(--ink-2); cursor: pointer; }
.sug .k { font: 11px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.sug .n { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug .d { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.sug.on { background: var(--accent-soft); }
.sug.off .n { color: var(--ink-3); }
.sug .touch { color: var(--amber); font-size: 11px; }
.sug-foot { padding: 6px 10px 2px; color: var(--ink-4); font-size: 11px; border-top: 1px solid var(--hair); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- the spine: the list for the noun ----------------------------------- */
.spine { grid-area: spine; border-right: 1px solid var(--hair); background: var(--surface); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
#app.no-spine .spine { display: none; }
.spine-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.spine-head h1 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.spine-head .count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spine-head .nouns { margin-left: auto; display: flex; gap: 2px; }
.spine-head .nouns button { border: 0; background: transparent; color: var(--ink-4); font: 11px var(--mono); padding: 2px 5px; border-radius: 4px; }
.spine-head .nouns button:hover { background: var(--surface-2); color: var(--ink-2); }
.spine-head .nouns button.on { color: var(--ink); background: var(--surface-2); }
.spine-list { flex: 1; overflow: auto; padding: 2px 6px 8px; scrollbar-width: thin; }
.group { font: 11px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; padding: 12px 8px 6px; display: flex; gap: 8px; align-items: center; }
.group::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: default; min-height: var(--row); align-content: center; border-left: 2px solid transparent; }
.row:hover { background: var(--surface-2); }
.row.here { background: var(--surface-2); border-left-color: var(--hair-2); }
.row.on { background: var(--accent-soft); border-left-color: var(--accent); }
.row .t { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .m { grid-column: 1 / -1; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.spine-foot { padding: 6px 12px; border-top: 1px solid var(--hair); color: var(--ink-4); font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; }
.spine-foot kbd, .foot kbd, .dr-foot kbd, .sug-foot kbd { font-size: 10px; padding: 1px 4px; border-bottom-width: 1px; margin-right: 2px; }

/* a state: a dot and a word */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--grey); flex: none; }
.st.run::before { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); animation: pulse 1.8s ease-in-out infinite; }
.st.wait::before { background: var(--amber); }
.st.good::before { background: var(--green); }
.st.bad::before { background: var(--red); }
.st.off::before { background: var(--grey); }
.st.run { color: var(--blue); } .st.wait { color: var(--amber); } .st.good { color: var(--green); } .st.bad { color: var(--red); } .st.off { color: var(--ink-3); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--blue-soft); } 50% { box-shadow: 0 0 0 5px var(--blue-soft); } }

/* ---- the sheet: the one thing open --------------------------------------- */
.sheet { grid-area: sheet; overflow: auto; min-width: 0; scrollbar-width: thin; position: relative; }
.sheet-in { max-width: 1120px; padding: 18px 28px 60px; margin: 0 auto; }
.head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; word-break: break-word; }
.head .id { font-family: var(--mono); color: var(--ink-3); font-size: 12px; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--ink-2); margin: 6px 0 14px; font-size: 12.5px; }
.facts span b { color: var(--ink-3); font-weight: 400; margin-right: 5px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; align-items: center; }
.btn { border: 1px solid var(--hair-2); background: var(--surface); border-radius: var(--r); padding: 5px 10px; display: inline-flex; gap: 8px; align-items: center; color: var(--ink); font-weight: 500; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary kbd { background: rgba(255, 255, 255, .18); border-color: transparent; color: inherit; }
.btn.danger { color: var(--red); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn .touch { font-size: 11px; color: var(--amber); font-weight: 400; }
.btn.primary .touch { color: inherit; opacity: .85; }
.actions .note { color: var(--ink-3); font-size: 12px; margin-left: 6px; }
/* A table narrower than its floor (frame.js, tableFloor) scrolls sideways
   inside its section rather than squeezing its free column to nothing. */
section.blk { border: 1px solid var(--hair); background: var(--surface); border-radius: 8px; margin-bottom: 14px; overflow-x: auto; overflow-y: hidden; }
section.blk.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.blk-head { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.blk-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.blk-head .count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.blk-head .sub { color: var(--ink-3); font-size: 12px; }
.blk-head .right { margin-left: auto; color: var(--ink-3); font-size: 12px; display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.blk-body { padding: 10px 14px; }
.empty { color: var(--ink-3); padding: 14px; font-size: 12.5px; }
.scrollbox { overflow: auto; scrollbar-width: thin; }
.scrollbox thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* tables: the row is the unit; the cursor row is the accent */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; }
.tbl th { text-align: left; font: 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 7px; border-bottom: 1px solid var(--hair); font-weight: 500; white-space: nowrap; }
.tbl td { padding: 0 10px; height: var(--row); border-bottom: 1px solid var(--hair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: default; }
.tbl tr.on td { background: var(--accent-soft); }
.tbl tr.on td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr.on:hover td { background: var(--accent-soft); }
.tbl tr.pad td { background: transparent !important; }
.tbl.fixed { table-layout: fixed; min-width: var(--floor, 0); }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .mono { font-size: 11.5px; }
.tbl td.name { max-width: 380px; }
.tbl td.wrap { white-space: normal; }
.tbl tr.att td.name { padding-left: 26px; color: var(--ink-2); }
.tbl tr.att td.name::before { content: '↳ '; color: var(--ink-4); }
.tag { display: inline-block; font: 11px var(--mono); padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); margin-right: 4px; }
.tag.dup { color: var(--amber); background: var(--amber-soft); }
.tag.kin { color: var(--blue); background: var(--blue-soft); }
.tag.fam { color: var(--green); background: var(--green-soft); }

/* lines: a log as rows (what the run said, activity, custody) */
.lines .ln { display: grid; grid-template-columns: 140px 150px minmax(0, 1fr) auto; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--hair); font-size: 12.5px; min-height: var(--row); align-items: baseline; cursor: default; }
.lines .ln:last-child { border-bottom: 0; }
.lines .ln:hover { background: var(--surface-2); }
.lines .ln.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.lines .at { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.lines .k { color: var(--ink-2); }
.lines .by { color: var(--ink-3); font-size: 12px; }
.lines .ln.bad .k { color: var(--red); } .lines .ln.warn .k { color: var(--amber); }
/* A line with no kind: its sentence takes the kind's column too. */
.lines .wide { grid-column: span 2; }

/* facets and filters */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--hair); background: var(--surface); }
.chip { border: 1px solid var(--hair); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: var(--ink-2); background: var(--surface); }
.chip:hover { border-color: var(--hair-2); }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip .n { color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip.on .n { color: inherit; opacity: .7; }
.filters .sort { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.filters .q { font-family: var(--mono); font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 4px; }

/* forms */
.form { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px 18px; padding: 14px; align-items: start; }
.form > label { color: var(--ink-2); padding-top: 6px; font-size: 12.5px; }
.form .f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form input, .form textarea, .form select { border: 1px solid var(--hair-2); border-radius: var(--r); padding: 6px 9px; background: var(--surface); width: 100%; max-width: 520px; outline: none; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.form .h { color: var(--ink-3); font-size: 12px; }
.form .h.bad { color: var(--red); }
.form textarea { min-height: 64px; font-family: var(--mono); font-size: 12.5px; resize: vertical; }
.form .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.form .opt { border: 1px solid var(--hair-2); border-radius: var(--r); padding: 6px 10px; background: var(--surface); text-align: left; max-width: 520px; }
.form .opt.on { border-color: var(--accent); background: var(--accent-soft); }
.form .opt[disabled] { opacity: .5; cursor: default; }
.form .opt small { display: block; color: var(--ink-3); font-size: 11.5px; }
.form .line { font-size: 12.5px; color: var(--ink-2); padding-top: 6px; }
.linkbox { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); padding: 6px 9px; border-radius: var(--r); word-break: break-all; color: var(--ink-2); }

/* search boxes inside a section */
.searchbox { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair); align-items: center; }
.searchbox input { flex: 1; min-width: 0; border: 1px solid var(--hair-2); border-radius: var(--r); padding: 6px 9px; font-family: var(--mono); font-size: 12.5px; background: var(--surface); outline: none; }
.searchbox input:focus { border-color: var(--accent); }
.searchbox .k { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

/* the run: the strip of what Start set going, and the tally */
.runblk { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; margin-bottom: 14px; }
.strip { border: 1px solid var(--hair); background: var(--surface); border-radius: 8px; padding: 12px 14px; min-width: 0; overflow: hidden; }
.strip .phases { display: flex; gap: 6px; align-items: stretch; overflow: hidden; }
.phase { flex: 0 1 auto; min-width: 0; }
.phase.wide { flex: 1 1 320px; min-width: 160px; }
.phase:not(.wide) .seg { min-width: 30px; }
.phase:not(.wide) .lbl b { display: none; }
.phase .lbl { font: 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.phase .lbl b { color: var(--ink-2); font-weight: 500; }
.segs { display: flex; gap: 3px; }
.seg { flex: 1; min-width: 0; height: 22px; border-radius: 3px; background: var(--surface-2); position: relative; overflow: hidden; }
.seg .fill { position: absolute; inset: 0; width: var(--w, 0%); background: var(--blue); opacity: .85; transition: width 300ms ease; }
.seg.done .fill { width: 100%; background: var(--green); }
.seg.todo .fill { width: 0; }
.seg.bad .fill { width: 100%; background: var(--red); }
.seg .t { position: absolute; left: 6px; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; font: 10.5px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; }
.seg.done .t, .seg.bad .t { color: #fff; }
.seg .t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.strip .line { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.strip .line .c { width: 7px; height: 13px; background: var(--accent); display: inline-block; animation: blink 1s steps(2) infinite; flex: none; }
@keyframes blink { to { visibility: hidden; } }
.tally { border: 1px solid var(--hair); background: var(--surface); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tally .big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tally .big small { font-size: 14px; color: var(--ink-3); font-weight: 400; margin-left: 4px; letter-spacing: 0; }
.tally .of { color: var(--ink-2); }
.tally .kv { margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.inline-form { display: flex; gap: 10px; align-items: center; margin: -6px 0 16px; padding: 8px 12px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft); flex-wrap: wrap; }
.inline-form label { color: var(--ink-2); font-size: 12.5px; }
.inline-form input { flex: 1; min-width: 220px; border: 1px solid var(--hair-2); border-radius: var(--r); padding: 6px 9px; background: var(--surface); outline: none; }
.inline-form input:focus { border-color: var(--accent); }
.fnd .s-open { color: var(--amber); } .fnd .s-supported { color: var(--green); } .fnd .s-withdrawn { color: var(--ink-3); text-decoration: line-through; }
.tbl tr.derived td.name { color: var(--ink-2); }
.dr-p { margin: 0; font-size: 13px; }

/* ---- the drawer: what the row under the cursor is ----------------------- */
.drawer { grid-area: drawer; border-left: 1px solid var(--hair); background: var(--surface); overflow: auto; min-width: 0; display: flex; flex-direction: column; scrollbar-width: thin; }
#app.no-drawer .drawer { display: none; }
.dr-head { padding: 12px 36px 10px 16px; border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dr-head h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; word-break: break-word; }
.dr-head .sub { color: var(--ink-3); font-size: 12px; font-family: var(--mono); word-break: break-all; }
.dr-head .close { position: absolute; right: 10px; top: 10px; border: 0; background: transparent; color: var(--ink-3); font-size: 12px; }
.dr-head .close:hover { color: var(--ink); }
.dr-sec { padding: 10px 16px; border-bottom: 1px solid var(--hair); }
.dr-sec h4 { margin: 0 0 8px; font: 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.dr-sec h4 .dim { text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 12.5px; }
.kv b { color: var(--ink-3); font-weight: 400; }
.kv .mono { font-size: 11.5px; word-break: break-all; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font: 11.5px var(--mono); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.pill.tag::before { content: '#'; color: var(--ink-4); }
.pill.fnd { background: var(--amber-soft); color: var(--amber); }
.anno { display: flex; flex-direction: column; gap: 8px; }
.anno .ln { font-size: 12.5px; color: var(--ink-2); }
.anno .ln b { color: var(--ink); font-weight: 500; }
.anno .who { color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); margin-left: 6px; }
.anno input { border: 1px solid var(--hair-2); border-radius: var(--r); padding: 5px 8px; background: var(--surface); width: 100%; outline: none; font-size: 12.5px; }
.anno input:focus { border-color: var(--accent); }
.tx { display: flex; gap: 6px; flex-wrap: wrap; }
.tx .btn { padding: 3px 8px; font-size: 12px; font-weight: 400; }
.dr-foot { margin-top: auto; padding: 8px 16px; color: var(--ink-4); font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--hair); position: sticky; bottom: 0; background: var(--surface); }

/* a matter: §16's track, and whose move it is */
.track { display: flex; align-items: flex-start; padding: 14px; overflow-x: auto; }
.tk { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; flex: 1; position: relative; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.tk i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--hair-2); display: block; position: relative; z-index: 1; }
.tk.done i { background: var(--green); border-color: var(--green); }
.tk.now i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tk.now { color: var(--ink); font-weight: 600; }
.tk.derived span::after { content: ' ·'; color: var(--ink-4); }
.tk + .tk::before { content: ''; position: absolute; left: -50%; right: 50%; top: 4px; height: 2px; background: var(--hair); }
.tk.done + .tk::before { background: var(--green); }
.whose { padding: 0 14px 12px; color: var(--ink-2); font-size: 12.5px; }
.whose b { color: var(--amber); font-weight: 600; }
.inline-form select { border: 1px solid var(--hair-2); border-radius: var(--r); padding: 5px 8px; background: var(--surface); }
.inline-form.mint > .dim { flex-basis: 100%; font-size: 12px; }
a.opt { color: inherit; text-decoration: none; display: block; }
a.btn { text-decoration: none; }

/* forms in the drawer: one column */
.form.narrow { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; padding: 12px 16px; }
.form.narrow > label { padding-top: 5px; font-size: 12px; }
.head-box { border: 1px solid var(--hair-2); border-radius: var(--r); padding: 4px 9px; font-family: var(--mono); font-size: 13px; min-width: 320px; background: var(--surface); outline: none; }
.head-box:focus { border-color: var(--accent); }
.big-recall { font-size: 20px; font-weight: 600; margin-right: 8px; font-variant-numeric: tabular-nums; }

/* an item: the receipt, the bytes through the viewer, what was said */
.item-view.as-sheet .dr-sec { padding: 12px 16px; }
.viewer { font-size: 12.5px; }
.viewer .pb-back, .viewer .vw-key { display: none; }
.viewer .pb-head h2 { display: none; }
.viewer .pb-base, .viewer .pb-note { font-size: 11.5px; color: var(--ink-3); margin: 0 0 10px; }
.viewer .pb-hashes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0 0 12px; font-size: 11.5px; }
.viewer .pb-hashes dt { color: var(--ink-3); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.viewer .pb-hashes dd { margin: 0; word-break: break-all; color: var(--ink-2); }
.viewer code { font-family: var(--mono); font-size: 11.5px; }
.viewer .pb-error { color: var(--red); padding: 8px 0; }
.viewer .vw-headers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0 0 10px; font-size: 12.5px; }
.viewer .vw-headers dt { color: var(--ink-3); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; align-self: baseline; }
.viewer .vw-headers dd { margin: 0; word-break: break-word; }
.viewer .vw-attachments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin: 0 0 10px; color: var(--ink-3); }
.viewer .pb-chip { font: 11.5px var(--mono); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.viewer .vw-body { white-space: pre-wrap; word-break: break-word; font: 12px/1.55 var(--mono); background: var(--surface-2); padding: 10px 12px; border-radius: var(--r); max-height: 420px; overflow: auto; margin: 0; }
.item-view.as-sheet .viewer .vw-body { max-height: none; }
.viewer .vw-derived { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--amber); background: var(--amber-soft); font-size: 12px; color: var(--ink-2); }
.viewer .vw-doc { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; background: #fff; }
.viewer .vw-doc iframe { display: block; width: 100%; height: min(60vh, 720px); border: 0; background: #fff; }
.viewer .vw-make { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.viewer .vw-make-label { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.viewer .vw-make button[disabled] { opacity: .45; cursor: default; }
.viewer .vw-make-said { font-size: 12px; color: var(--ink-2); }
.viewer .vw-make-said.bad { color: var(--red); }
.pills.made { margin-top: 8px; }
.pills.made a { text-decoration: none; }

/* ---- the foot: one line of hints, for the region that has the cursor ---- */
.foot { grid-area: foot; border-top: 1px solid var(--hair); background: var(--surface); display: flex; align-items: center; gap: 16px; padding: 0 14px; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; min-width: 0; }
.foot .reg { font: 11px var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.foot .said { margin-left: auto; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.foot .said.bad { color: var(--red); } .foot .said.ok { color: var(--green); }

/* the touch: the one modal */
.veil { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; z-index: 20; }
.touch-box { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 22px 26px; width: 360px; max-width: calc(100vw - 32px); box-shadow: var(--shadow); text-align: center; }
.touch-box .key { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px; border: 2px solid var(--amber); display: grid; place-items: center; color: var(--amber); font-size: 20px; animation: pulse2 1.2s ease-in-out infinite; }
@keyframes pulse2 { 0%, 100% { box-shadow: 0 0 0 0 var(--amber-soft); } 50% { box-shadow: 0 0 0 10px var(--amber-soft); } }
.touch-box h3 { margin: 0 0 4px; font-size: 15px; }
.touch-box p { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.touch-box .mono { display: block; margin-top: 8px; color: var(--ink-3); font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .st.run::before, .touch-box .key, .strip .line .c { animation: none; }
  .seg .fill { transition: none; }
}

/* ---- responsive: the drawer overlays, then the spine becomes the page --- */
@media (max-width: 1180px) {
  #app, #app.no-drawer { grid-template-columns: var(--spine) minmax(0, 1fr) 0; }
  #app.no-spine, #app.no-spine.no-drawer { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .drawer { position: fixed; right: 0; top: var(--bar); bottom: var(--foot); width: min(440px, 92vw); box-shadow: var(--shadow); z-index: 4; }
}
@media (max-width: 760px) {
  #app, #app.no-spine, #app.no-drawer, #app.no-spine.no-drawer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "sheet" "foot"; grid-template-rows: var(--bar) minmax(0, 1fr) 0; }
  .spine { position: fixed; inset: var(--bar) 0 0 0; z-index: 3; border-right: 0; }
  #app.has-thing .spine { display: none; }
  #app.has-thing.at-spine .spine { display: flex; }
  #app.no-spine .spine { display: none; }
  .sheet-in { padding: 14px 14px 60px; }
  .bar { padding: 0 8px; gap: 6px; }
  .bar .crumb .hint, .bar .beats { display: none; }
  .foot { display: none; }
  .drawer { top: var(--bar); bottom: 0; width: 100vw; }
  .lines .ln { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lines .wide { grid-column: auto; }
  .runblk { grid-template-columns: minmax(0, 1fr); }
  .phase .lbl b { display: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form > label { padding-top: 0; }
  .tbl td.name { max-width: 200px; }
  /* A phone has no room for fixed columns: the table takes its content's
     widths and its section scrolls sideways inside itself. */
  .tbl, .tbl.fixed { table-layout: auto; width: max-content; min-width: 100%; }
  .tbl.fixed col { width: auto !important; }
  .tbl td.name { max-width: 260px; }
  section.blk { overflow-x: auto; }
}