/* Rook, the console (CONSOLE-1, 2026-10-20; docs/console-2026-10-20.md). An editorial morning report: Fraunces for the masthead and the
   headline, Geist for the working interface, Geist Mono for stamps and figures that line up. Paper by day, night edition by night, both
   designed. One accent, vermilion, only where it needs him. Stamps carry status; nothing moves unless he moved it.
   The 2026-10-12 calls that stand: a left rail of places (03), rows of two lines that open in place (04, 05), a card opens in 220 ms on his
   tap and nothing pulses (07), titled settings panels (08), the slim bar and the sheet on a phone (10). */

@font-face { font-family:"Geist"; font-style:normal; font-weight:400 700; font-display:optional; src:url(/static/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Geist"; font-style:normal; font-weight:400 700; font-display:optional; src:url(/static/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:optional; src:url(/static/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:300 900; font-display:swap; src:url(/static/fraunces-latin.woff2) format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:italic; font-weight:300 900; font-display:swap; src:url(/static/fraunces-italic-latin.woff2) format("woff2"); }
/* Geist and Geist Mono: SIL Open Font License 1.1, Vercel (OFL-geist.txt). Fraunces: SIL OFL 1.1, Undercase Type (OFL-fraunces.txt). */

/* ---------- the two editions. Contrast (checked in tests/test_console.py): text-3 on surface 4.4:1 paper, 4.9:1 night; the accent 5.7:1 and 6.8:1. */
:root, [data-theme="light"] {
  --bg:#F6F2EA; --rail:#F1ECE2; --surface:#FFFDF8; --raised:#EFE9DE; --line:#E4DDD0; --line-2:#CBC2B3;
  --text-1:#1B1916; --text-2:#5B554C; --text-3:#6F685D;
  --accent:#B8381A; --accent-hi:#A53216; --on-accent:#FFFFFF; --accent-soft:rgb(184 56 26 / .09); --accent-line:rgb(184 56 26 / .4);
  --danger:#B8381A; --danger-soft:rgb(184 56 26 / .09); --warn:#7D5A14; --warn-soft:rgb(176 128 32 / .13);
  --ink:#1B1916; --paper:#FFFDF8;
  --shadow:0 1px 2px rgb(27 25 22 / .05), 0 0 0 1px rgb(27 25 22 / .02); --pop:0 16px 48px rgb(27 25 22 / .16), 0 0 0 1px var(--line); --scrim:rgb(27 25 22 / .34);
  color-scheme:light;
}
[data-theme="dark"] {
  --bg:#141311; --rail:#111009; --surface:#1B1916; --raised:#24211D; --line:#2C2924; --line-2:#3E3A33;
  --text-1:#EFE9DE; --text-2:#B5AC9E; --text-3:#8E867A;
  --accent:#FF7A52; --accent-hi:#FF8F6E; --on-accent:#141311; --accent-soft:rgb(255 122 82 / .13); --accent-line:rgb(255 122 82 / .45);
  --danger:#FF7A52; --danger-soft:rgb(255 122 82 / .13); --warn:#E0B458; --warn-soft:rgb(224 180 88 / .13);
  --ink:#EFE9DE; --paper:#1B1916;
  --shadow:inset 0 1px 0 rgb(255 255 255 / .025); --pop:0 16px 48px rgb(0 0 0 / .55), 0 0 0 1px var(--line-2); --scrim:rgb(4 3 2 / .62);
  color-scheme:dark;
}
[data-theme="dark"] .rail-logo, [data-theme="dark"] .stamp { --ink:#EFE9DE; }
:root {
  --sans:"Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:"Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --ease:cubic-bezier(0.2, 0.8, 0.2, 1); --tr:180ms var(--ease);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r1:5px; --r2:8px; --r3:12px; --pill:999px;
  --t1:15px; --t2:14px; --t3:13px; --row:52px; --ctl:36px; --rail-w:232px; --chat-w:380px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text-1); font:400 var(--t1)/1.55 var(--sans); -webkit-font-smoothing:antialiased; font-feature-settings:"cv11"; }
.num { font-variant-numeric:tabular-nums; }
.nav a .num, .section .num, .row .sure, .row .due, .pg td.num, .figs dd { font-family:var(--mono); letter-spacing:-0.01em; }
.muted { color:var(--text-3); }
.label, .fine, .meta, .so-far, .fix-how { font-size:var(--t3); color:var(--text-3); }
.verdict, p.quiet, .back, .manage-biz .words { font-size:var(--t2); color:var(--text-3); }
.label { display:block; margin-bottom:var(--s2); }
.fine.err, .err { color:var(--danger); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; }
p, li { text-wrap:pretty; }
.note, .hint, .group-note, .stats, .english, .posted label, .views label, .lens > label, .biz-form label, .sent, .nrow .kind, .nrow .marks { font-size:var(--t2); color:var(--text-2); }

/* ---------- the frame: the rail of places, the page, and the chat that slides in on the right ---------- */
.shell { min-height:100vh; }
@media (min-width: 900px) {
  .shell { display:grid; grid-template-columns:var(--rail-w) minmax(0, 1fr); }
  .top { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:var(--s4); padding:var(--s5) var(--s3) var(--s4);
         background:var(--rail); border-right:1px solid var(--line); }
  .place { display:none; }
  .nav { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; }
  main { padding:var(--s6) clamp(var(--s5), 5vw, 72px) var(--s8); max-width:960px; width:100%; }
  body.chat-open main { max-width:none; padding-right:calc(var(--chat-w) + var(--s5)); }
}

/* the wordmark: the rook and the name in Fraunces, the only identity on the page */
.rail-logo { display:flex; align-items:center; gap:10px; padding:0 10px 2px; color:var(--text-1); text-decoration:none; }
.rail-logo .rook { flex:none; width:18px; height:18px; color:var(--ink); }
.rail-logo .name { font:italic 600 19px/1 var(--serif); font-variation-settings:"opsz" 24, "SOFT" 50; letter-spacing:-0.01em; }
.rail-logo .ed { margin-left:auto; font:500 11px/1 var(--mono); color:var(--text-3); letter-spacing:0.02em; }

.nav a { position:relative; display:flex; align-items:center; gap:var(--s2); min-height:36px; padding:var(--s1) 10px; border-radius:var(--r1);
         color:var(--text-2); font-weight:500; font-size:var(--t2); text-decoration:none; overflow-wrap:anywhere; transition:background-color var(--tr), color var(--tr); }
.nav a .num { margin-left:auto; padding-left:var(--s2); color:var(--text-3); font-weight:500; font-size:12px; }
.nav a.on { background:var(--surface); color:var(--text-1); font-weight:600; box-shadow:var(--shadow); }
.nav a.on::before { content:""; position:absolute; left:-12px; top:50%; width:3px; height:18px; margin-top:-9px; border-radius:0 3px 3px 0; background:var(--accent); }
.nav a.on .num { color:var(--accent); }
.nav a.today { font-weight:600; color:var(--text-1); }
.nav a.to-mind, .nav .rule + a { margin-top:21px; }
.nav a.to-mind::after, .nav .rule + a::after { content:""; position:absolute; left:10px; right:10px; top:-11px; height:1px; background:var(--line); }
.nav a:focus-visible { outline-offset:-2px; }

/* the autopilot block at the foot of the rail: the switch, its state in words, the plan's week in one line */
.auto { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px var(--s2); align-items:center; padding:var(--s3) 10px; border-top:1px solid var(--line); }
.auto .auto-name { font-weight:600; font-size:var(--t2); color:var(--text-1); }
.auto .auto-line, .auto .auto-plan { grid-column:1 / -1; font-size:12px; line-height:1.4; color:var(--text-3); overflow-wrap:anywhere; }
.auto .auto-line.on { color:var(--text-2); }
.auto .auto-line.held { color:var(--warn); }
.auto .auto-plan { font-family:var(--mono); font-size:11px; letter-spacing:0.01em; }
/* the plan bar is inline SVG: its fill is a width attribute, which the page's CSP (style-src 'self') allows where an inline style is blocked (H6) */
.auto .auto-plan .bar { display:inline-block; vertical-align:middle; width:56px; height:4px; margin-right:6px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.auto .auto-plan .bar rect { fill:var(--text-3); }
.auto .auto-plan .bar.hot rect { fill:var(--accent); }
.switch { -webkit-appearance:none; appearance:none; position:relative; width:38px; height:22px; margin:0; border-radius:var(--pill); background:var(--line-2); cursor:pointer;
          transition:background-color var(--tr); }
.switch::before { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / .25); transition:transform var(--tr); }
.switch:checked { background:var(--accent); }
.switch:checked::before { transform:translateX(16px); }
.switch[disabled] { opacity:0.6; cursor:default; }

.top-right { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:2px var(--s1); padding-top:var(--s3); border-top:1px solid var(--line); }
.fresh, .gear, .theme { display:flex; align-items:center; gap:10px; min-height:36px; padding:0 10px; border-radius:var(--r1); border:0; background:transparent;
                        color:var(--text-2); font:500 var(--t2) var(--sans); text-decoration:none; cursor:pointer; transition:background-color var(--tr), color var(--tr); }
.fresh { grid-column:1 / -1; visibility:hidden; color:var(--accent); font-weight:600; }
.fresh.on { visibility:visible; background:var(--accent-soft); }
.gear.on { background:var(--surface); color:var(--text-1); font-weight:600; }
.theme { width:36px; padding:0; justify-content:center; color:var(--text-2); }
.theme span { width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor; background:linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* a phone: the 2026-10-12 slim bar and sheet (call 10); PHONE-1 at the end of this file replaces it with the board as a strip */
@media (max-width: 899px) {
  .top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--s2); height:56px;
         padding:0 max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left)); background:var(--bg); border-bottom:1px solid var(--line); }
  .rail-logo { display:none; }
  .place { display:inline-flex; align-items:center; gap:var(--s2); min-width:0; min-height:44px; margin-left:calc(-1 * var(--s2)); padding:0 var(--s2); border:0; border-radius:var(--r1);
           background:transparent; color:var(--text-1); font:600 19px/1.2 var(--serif); font-variation-settings:"opsz" 20; letter-spacing:-0.01em; cursor:pointer; }
  .place-name { overflow-wrap:anywhere; }
  .place-dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); }
  .place .chev { flex:none; color:var(--text-3); transition:transform var(--tr); }
  .top.open .place .chev { transform:rotate(180deg); }
  .nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; flex-direction:column; gap:2px; max-height:80vh; overflow-y:auto;
         padding:var(--s3) var(--s3) max(var(--s5), env(safe-area-inset-bottom)); background:var(--surface); border-radius:var(--r3) var(--r3) 0 0;
         box-shadow:var(--pop); transform:translateY(100%); visibility:hidden; transition:transform 240ms var(--ease), visibility 240ms; }
  .top.open .nav { transform:none; visibility:visible; }
  .top.open::after { content:""; position:fixed; inset:0; z-index:30; background:var(--scrim); }
  .nav a { min-height:48px; padding:0 var(--s3); font-size:var(--t1); }
  .nav a.on::before { left:0; }
  .auto { display:none; }
  .top-right { display:flex; margin-left:auto; gap:var(--s1); padding:0; border:0; }
  .fresh, .gear { width:44px; height:44px; padding:0; justify-content:center; }
  .fresh .lbl, .gear .lbl { display:none; }
  .top-right .theme { display:none; }
  main { padding:var(--s4) max(var(--s4), env(safe-area-inset-right)) var(--s7) max(var(--s4), env(safe-area-inset-left)); }
}

/* ---------- the masthead: the day, the edition, what Rook is doing now, and the way to ask it ---------- */
.masthead { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3); margin:0 0 var(--s5); padding:0 0 var(--s3); border-bottom:1px solid var(--line-2); }
.masthead .day { font:500 var(--t3)/1.4 var(--mono); color:var(--text-2); letter-spacing:0.01em; }
.masthead .day .ed { color:var(--text-3); }
.masthead .now { flex:1 1 20ch; min-width:0; font:italic 400 var(--t1)/1.4 var(--serif); font-variation-settings:"opsz" 14; color:var(--text-2); overflow-wrap:anywhere; }
.masthead .now.held { color:var(--warn); }
.masthead .ask { flex:none; margin-left:auto; }
.ask { display:inline-flex; align-items:center; gap:var(--s2); height:32px; padding:0 12px 0 10px; border:1px solid var(--line-2); border-radius:var(--pill); background:var(--surface);
       color:var(--text-1); font:500 var(--t3) var(--sans); cursor:pointer; transition:border-color var(--tr), background-color var(--tr); }
.ask .rook { width:14px; height:14px; color:var(--ink); }
.ask kbd { font:500 11px var(--mono); color:var(--text-3); }

/* ---------- the headline and its one quiet line ---------- */
.state { font:500 34px/1.12 var(--serif); font-variation-settings:"opsz" 40, "SOFT" 30; letter-spacing:-0.012em; margin:0 0 var(--s2); max-width:24ch; }
.state:has(+ .state-sub) { margin-bottom:6px; }
.state-sub { margin:0 0 var(--s5); color:var(--text-2); max-width:62ch; }
.state + .free, .state + .section.cat, .state + .list { margin-top:var(--s5); }
.state-sub a { color:var(--text-1); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; white-space:nowrap; }
.lede { margin:0 0 var(--s6); color:var(--text-2); max-width:62ch; }
.numbers { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin:calc(-1 * var(--s3)) 0 var(--s5); }
.numbers div { display:grid; gap:1px; }
.numbers dt { font-size:var(--t3); color:var(--text-3); }
.numbers dd { margin:0; font:500 22px/1.1 var(--serif); font-variation-settings:"opsz" 24; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.numbers dd small { font:400 var(--t3) var(--sans); color:var(--text-3); margin-left:4px; }

/* ---------- stamps: status as a small rubber stamp; the accent only where it needs him ---------- */
.stamp, .chip { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 7px; border-radius:3px; border:1px solid currentColor;
                font:500 10.5px/1 var(--mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2); white-space:nowrap; background:transparent; }
.chip.wait, .stamp.needs { color:var(--accent); }
.chip.ok, .stamp.done { color:var(--text-3); }
.chip.gone { color:var(--text-3); border-style:dashed; }
.chip.busy, .stamp.onit { color:var(--text-1); }
.chip.busy::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.held, .stamp.held { color:var(--warn); }
.chip.no, .stamp.stuck { color:var(--accent); border-style:double; border-width:3px; height:22px; }
.stamp.tonight { color:var(--text-2); border-style:dashed; }
.stamp.taught { color:var(--text-2); }
.stamp.mind { color:var(--text-2); }

/* ---------- panels: one surface, one border, one radius ---------- */
.list, .group, .pg-wrap, .score-wrap, .gates, .readers, .set-panel, .manage-biz ul, .accounts ul, .products-form, .product-list:not(:empty), .tasks, .reports, .composer, .tiles li {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow); }
.list { overflow:hidden; }
.group .list { background:none; border:0; border-radius:0; box-shadow:none; border-top:1px solid var(--line); }
.row + .row, .nrow + .nrow, .gates li + li, .readers li + li, .manage-biz li + li, .accounts li + li, .set-panel .field + .field, .task + .task, .report + .report { border-top:1px solid var(--line); }

/* ---------- a card's row: two lines, the title and its facts, then the one-line why ---------- */
.row > summary { list-style:none; display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:3px; min-height:72px; padding:14px 18px;
                 cursor:pointer; transition:background-color var(--tr); }
.row > summary::-webkit-details-marker, .group > summary::-webkit-details-marker { display:none; }
.row > summary:focus-visible, .nrow:focus-visible, .group > summary:focus-visible { outline-offset:-2px; }
.row .new, .row .chip, .row .kind, .row .due, .row .sure, .row .caret { flex:none; }
.row .who { flex:1 1 12ch; min-width:0; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.row .kind, .row .due, .row .sure { font-size:12.5px; color:var(--text-3); }
.row .kind { font:500 10.5px/1 var(--mono); letter-spacing:0.08em; text-transform:uppercase; padding:4px 6px; border:1px solid var(--line-2); border-radius:3px; }
.free { margin-top:var(--s6); }
.row .due, .row .sure { color:var(--text-2); }
.row .gist { order:9; flex:1 0 100%; padding-left:17px; font-size:var(--t2); line-height:1.45; color:var(--text-2); overflow-wrap:anywhere; }
.row .caret { order:8; }
.row[open] { box-shadow:inset 2px 0 0 var(--accent); }
.row[open] > summary .gist { color:var(--text-1); }
.row[open] > summary .sure { visibility:hidden; }
.s-withdrawn .who, .s-expired .who { color:var(--text-2); font-weight:500; }
.new { width:7px; height:7px; border-radius:50%; }
.new.on { background:var(--accent); }
.caret, .group > summary.section::after { width:7px; height:7px; margin-left:var(--s1); border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3);
                                          transform:rotate(-45deg); transition:transform var(--tr); }
.row[open] > summary .caret, .group[open] > summary.section::after { transform:rotate(45deg); }

/* ---------- the card, open ---------- */
.detail { padding:0 18px 20px 35px; }
.meta { margin:0; }
.why { margin:var(--s2) 0 0; max-width:64ch; }
.note, .hint { margin:var(--s3) 0 0; max-width:64ch; }
.arrived { margin:var(--s4) 0 0; padding:0 0 0 var(--s4); border-left:2px solid var(--line-2); }
.arrived p { margin:0; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.draft-wrap { margin-top:var(--s4); position:relative; }
.draft-wrap + .draft-wrap { margin-top:var(--s3); }
.draft { margin:0; background:var(--raised); border:1px solid transparent; border-radius:var(--r2); padding:var(--s3) var(--s4); white-space:pre-wrap; overflow-wrap:anywhere;
         font:var(--t1)/1.55 var(--sans); color:var(--text-1); }
.draft[data-editable] { cursor:text; transition:border-color var(--tr), background-color var(--tr), box-shadow var(--tr); }
.draft[data-editable]:focus { outline:none; border-color:var(--accent); background:var(--bg); box-shadow:0 0 0 3px var(--accent-soft); }
.edit-hint { position:absolute; right:0; bottom:100%; font-size:12px; line-height:var(--s4); color:var(--text-3); opacity:0; transition:opacity var(--tr); pointer-events:none; }
.draft-wrap:focus-within .edit-hint { opacity:1; }
.draft-wrap .english { margin:var(--s2) 0 0; }
.gate { margin:var(--s3) 0 0; padding:10px var(--s3); font-size:var(--t2); color:var(--text-1); max-width:66ch; background:var(--warn-soft);
        border-left:3px solid var(--warn); border-radius:var(--r1); }
.steps { margin:var(--s4) 0 0; padding-left:1.5em; max-width:64ch; }
.steps li { padding:3px 0; }
.steps li::marker { color:var(--text-3); font:500 12.5px var(--mono); }
.does { margin:var(--s4) 0 0; font-size:var(--t2); color:var(--text-2); max-width:64ch; }
.changed, .learned { margin:var(--s2) 0 0; font-size:var(--t2); color:var(--text-2); max-width:66ch; }
.does + .changed, .does + .learned { margin-top:var(--s3); }
.changed .lbl, .learned .lbl { color:var(--text-1); font-weight:600; }
.learned .layer-pick { margin-left:var(--s2); }
select.layer, .app-pick select.app { font:inherit; font-size:var(--t3); color:var(--text-2); background:transparent; border:0; border-bottom:1px dashed var(--line-2);
                                     padding:0 var(--s1); cursor:pointer; -webkit-appearance:none; appearance:none; }
.app-pick select.app { field-sizing:content; }
.do-line { margin:var(--s3) 0 0; font-size:var(--t2); }
.tell { margin-top:var(--s5); }
.tell-box { display:block; width:100%; min-height:44px; padding:10px var(--s3); background:var(--bg); color:var(--text-1); border:1px solid var(--line-2);
            border-radius:var(--r1); font:var(--t2)/1.5 var(--sans); resize:vertical; transition:border-color var(--tr), box-shadow var(--tr); }
.tell-box:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tell-box[disabled] { opacity:0.6; }
.tell + .actions, .kept + .actions { margin-top:var(--s3); }
.tell, .free { position:relative; }
.tell:has(.tell-box:not(:placeholder-shown)) > label.sr, .free:has(input:not(:placeholder-shown)) > label.sr {
  clip:auto; width:auto; height:auto; overflow:visible; bottom:100%; left:0; margin-bottom:2px; font-size:12px; line-height:16px; color:var(--text-3); }
.kept, .missed { margin:var(--s3) 0 0; font-size:var(--t2); color:var(--text-2); max-width:66ch; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.actions > .chip.busy { height:var(--ctl); padding:0 var(--s3); }
.actions .fine { margin-left:auto; }
.actions .fine.err { margin-left:0; flex-basis:100%; font-size:var(--t2); }
.actions .fine:empty, .lens .fine:empty { display:none; }

/* the card's working line is p.working, never a bare .working: the body carries class "working" while a task runs (PREMIUM-1, H1) */
p.working { display:flex; align-items:flex-start; gap:10px; min-height:var(--ctl); margin:var(--s4) 0 0; padding:9px var(--s3); color:var(--text-1); font-size:var(--t2);
            line-height:1.35; background:var(--raised); border-radius:var(--r1); }
p.working .wline { min-width:0; overflow-wrap:anywhere; }
.beat { flex:none; width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--text-1); }

/* ---------- the box at the top of a page: what it missed, about no card ---------- */
.free { display:flex; gap:var(--s2); margin:0 0 var(--s5); }
.free input { flex:1; min-width:0; height:40px; padding:0 var(--s3); background:var(--surface); color:var(--text-1); border:1px solid var(--line-2); border-radius:var(--r2);
              font:var(--t2) var(--sans); transition:border-color var(--tr), box-shadow var(--tr); }
.free .btn { height:40px; }
.free input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.free input.said::placeholder { color:var(--accent); }
.free input[disabled] { opacity:0.7; }
.free-err { margin:calc(-1 * var(--s3)) 0 var(--s5); }

/* ---------- buttons: the vermilion one is the one thing to do ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; height:var(--ctl); padding:0 14px; font:500 var(--t2) var(--sans); white-space:nowrap;
       border-radius:var(--r1); cursor:pointer; border:1px solid transparent; text-decoration:none; transition:background-color var(--tr), color var(--tr), border-color var(--tr), transform 120ms var(--ease); }
.btn.primary { background:var(--accent); color:var(--on-accent); font-weight:600; }
.btn.ghost { background:var(--surface); color:var(--text-1); border-color:var(--line-2); }
.btn.quiet { background:transparent; color:var(--text-2); padding:0 10px; }
.btn.sm { height:30px; padding:0 10px; font-size:var(--t3); }
.btn:active:not([disabled]) { transform:scale(0.98); }
.btn[disabled] { cursor:default; opacity:0.5; }
.linkish, .teach-link, .manage-biz .link { background:none; border:0; padding:0; font:inherit; font-size:var(--t2); color:var(--accent); cursor:pointer;
                                           text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:3px; }
@media (hover: hover) {
  .row > summary:hover, .group > summary.section:hover, .task > summary:hover, .report > summary:hover { background:var(--raised); }
  .group > summary.section:hover { color:var(--text-1); }
  .nav a:not(.on):hover, .gear:not(.on):hover, .theme:hover { background:var(--surface); color:var(--text-1); }
  .btn.primary:hover:not([disabled]) { background:var(--accent-hi); }
  .btn.ghost:hover:not([disabled]) { border-color:var(--text-3); }
  .btn.quiet:hover:not([disabled]) { background:var(--raised); color:var(--text-1); }
  .ask:hover { border-color:var(--text-3); }
  .draft[data-editable]:hover { border-color:var(--line-2); }
  .draft-wrap:hover .edit-hint { opacity:1; }
  select.layer:hover, .app-pick select.app:hover { color:var(--text-1); }
  .biz-add-row button.add:hover, .manage-biz .move button:hover:not([disabled]) { background:var(--raised); color:var(--text-1); }
  .free input:hover:not(:focus) { border-color:var(--text-3); }
  .fix:hover { background:var(--danger); color:var(--bg); }
  .linkish:hover, .teach-link:hover { text-decoration-color:currentColor; }
  .tiles li:hover { border-color:var(--line-2); }
}

.verdict { margin:var(--s4) 0 0; }
.v { color:var(--text-1); font-weight:600; }
.v-rejected, .v-withdrawn, .v-expired { color:var(--text-2); }
.sent { margin:var(--s2) 0 0; overflow-wrap:anywhere; }

.teach { margin:var(--s4) 0 0; }
.lens { margin-top:var(--s4); }
.lens > label { display:block; margin-bottom:var(--s2); }
.lens-row { display:flex; gap:var(--s3); align-items:flex-end; }
.lens textarea, .posted input, .views input, .settings input[type=number], .settings input[type=text], .set-group input[type=text], .settings select, .accounts select, .biz-form input, .manage-biz input, .composer input, .composer select {
  background:var(--bg); color:var(--text-1); border:1px solid var(--line-2); border-radius:var(--r1); font:var(--t2) var(--sans);
  transition:border-color var(--tr), box-shadow var(--tr); }
.lens textarea:focus, .posted input:focus, .views input:focus, .settings input[type=number]:focus, .settings input[type=text]:focus, .set-group input[type=text]:focus, .settings select:focus, .accounts select:focus,
.biz-form input:focus, .manage-biz input:focus, .composer input:focus, .composer select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.lens textarea { flex:1; min-height:44px; padding:var(--s2) var(--s3); line-height:1.5; resize:vertical; }
::placeholder { color:var(--text-3); }
.lens .fine { margin:var(--s2) 0 0; }
.lens-list { list-style:none; margin:var(--s3) 0 0; padding:0; color:var(--text-2); }
.lens-list li { font-size:var(--t2); padding:var(--s1) 0; }
.lens-list .num { color:var(--text-3); margin-right:var(--s2); }

/* ---------- sections: a small-caps serif label, the count in mono ---------- */
.section { font:600 var(--t3)/1.3 var(--sans); color:var(--text-2); margin:var(--s7) 0 10px; }
.section .num { margin-left:6px; color:var(--text-3); font-weight:500; }
.section.cat { margin:var(--s6) 0 10px; padding-left:2px; }
h2.section.cat, .section.first, .tasks-head, .reports-head, .tiles-head { font:500 12px/1.3 var(--mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }
.free + .section.cat, .free-err + .section.cat, .state + .section.cat, .state-sub + .section.cat, .mind-part > .section.cat:first-child, .numbers + .section.cat { margin-top:0; }
.section.first { margin-top:0; }
.group { margin-top:var(--s3); overflow:hidden; }
main > .list + .group, main > .state-sub + .group, main > .state + .group, main > .free + .group, main > .free-err + .group { margin-top:var(--s6); }
main > .list + .group, .list + .group, .tasks + .group, .reports + .group, .tiles + .group, .composer + .group { margin-top:var(--s6); }
.group + .group { margin-top:var(--s3); }
.group > summary.section { display:flex; align-items:center; gap:0; margin:0; min-height:var(--row); padding:0 18px; cursor:pointer; list-style:none;
                           font-size:var(--t2); transition:background-color var(--tr), color var(--tr); }
.group > summary.section::after { content:""; margin-left:auto; margin-right:var(--s1); }
.group-note { margin:0; padding:var(--s3) 18px; border-top:1px solid var(--line); }
.group .group-note + .list { border-top:0; }

/* ---------- Working: Rook's tasks, one row each, a stamp for the state, the result one tap away ---------- */
.tasks-head, .reports-head, .tiles-head { display:flex; align-items:baseline; gap:var(--s2); margin:var(--s6) 0 10px; padding-left:2px; }
.tasks-head .num, .reports-head .num, .tiles-head .num { color:var(--text-3); }
.tasks-head .more, .reports-head .more { margin-left:auto; font:500 var(--t3) var(--sans); letter-spacing:0; text-transform:none; color:var(--text-2); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.tasks { overflow:hidden; }
.task > summary { list-style:none; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"stamp title when" "stamp line when"; column-gap:var(--s3); row-gap:2px;
                  align-items:center; min-height:64px; padding:12px 18px; cursor:pointer; transition:background-color var(--tr); }
.task > summary::-webkit-details-marker { display:none; }
.task .stamp { grid-area:stamp; align-self:center; }
.task .t-title { grid-area:title; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.task .t-title .biz-tag { margin-left:var(--s2); font:500 11px var(--mono); letter-spacing:0.02em; color:var(--text-3); }
.task .t-line { grid-area:line; font-size:var(--t2); color:var(--text-2); overflow-wrap:anywhere; }
.task .t-when { grid-area:when; font:500 12px var(--mono); color:var(--text-3); white-space:nowrap; text-align:right; }
.task[open] { box-shadow:inset 2px 0 0 var(--line-2); }
.task .t-body { padding:0 18px 18px calc(18px + 7ch); }
.task .t-body p { margin:0 0 var(--s2); max-width:66ch; color:var(--text-2); font-size:var(--t2); }
.task .t-body .moved { color:var(--text-1); font-size:var(--t2); }
.task .t-body .actions { margin-top:var(--s3); }
.task .result { margin:var(--s3) 0 0; padding:var(--s3) var(--s4); background:var(--raised); border-radius:var(--r2); max-width:72ch; font-size:var(--t2); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.task .rate { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s3); }
.task .rate input { flex:1 1 20ch; min-width:0; height:32px; padding:0 10px; background:var(--bg); color:var(--text-1); border:1px solid var(--line-2); border-radius:var(--r1); font:var(--t3) var(--sans); }
.tasks-empty { padding:var(--s4) 18px; color:var(--text-2); font-size:var(--t2); }
.tasks-empty i { font-style:italic; font-family:var(--serif); font-variation-settings:"opsz" 14; }

/* give Rook a task: one line, which business, when */
.composer { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); padding:10px; }
/* BLIND-1 (2026-10-25): the task box under the headline, before the cards; a stranger finds it in seconds */
.state-sub + .composer, .state + .composer { margin:0 0 var(--s5); padding:10px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); }
.intro { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin:0 0 var(--s4); padding:12px 16px; border:1px dashed var(--line-2); border-radius:var(--r3); background:var(--surface); }
.intro .intro-text { flex:1 1 30ch; min-width:0; font-size:var(--t2); color:var(--text-2); }
.result .r-by { margin:var(--s1) 0 0; font-size:var(--t3); color:var(--text-3); }

.composer input[type=text] { flex:1 1 24ch; min-width:0; height:var(--ctl); padding:0 var(--s3); }
.composer select { height:var(--ctl); padding:0 var(--s2); max-width:16ch; }
.composer .fine { flex-basis:100%; }
.composer .fine:empty { display:none; }

/* ---------- sectors: the connected ones as quiet tiles, one tile to connect more ---------- */
.tiles { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--s2); margin:0; padding:0; }
.tiles li { display:grid; gap:3px; padding:var(--s3) 14px; min-height:68px; transition:border-color var(--tr); }
.tiles .t-name { display:flex; align-items:center; gap:var(--s2); font-weight:600; font-size:var(--t2); }
.tiles .t-name .dot { width:7px; height:7px; border-radius:50%; background:var(--text-1); }
.tiles li.partial .t-name .dot { background:transparent; border:1.5px solid var(--text-3); }
.tiles .t-line { font-size:var(--t3); color:var(--text-2); overflow-wrap:anywhere; }
.tiles li.connect { border-style:dashed; background:transparent; box-shadow:none; cursor:pointer; color:var(--text-2); }
.tiles li.connect .t-name { color:var(--text-2); font-weight:500; }
.tiles li.connect button { all:unset; display:grid; gap:3px; cursor:pointer; width:100%; }
.sheet { width:min(560px, calc(100vw - 2 * var(--s4))); max-height:85vh; padding:0; color:var(--text-1); background:var(--surface); border:0; border-radius:var(--r3); box-shadow:var(--pop); }
.sheet::backdrop { background:var(--scrim); }
.sheet-head { display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); }
.sheet-head h2 { margin:0; font:500 22px/1.2 var(--serif); font-variation-settings:"opsz" 24; }
.sheet-head .close { margin-left:auto; }
.sheet ul { list-style:none; margin:0; padding:var(--s2) 0; }
.sheet li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px var(--s3); align-items:center; padding:var(--s3) var(--s5); }
.sheet li + li { border-top:1px solid var(--line); }
.sheet li .s-name { font-weight:600; font-size:var(--t2); }
.sheet li .s-line { grid-column:1; font-size:var(--t3); color:var(--text-2); }
.sheet li .s-act { grid-column:2; grid-row:1 / span 2; }
.sheet li .stamp { justify-self:start; }

/* ---------- reports: what Rook wrote, newest first ---------- */
.reports { overflow:hidden; }
.report > summary { list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3); min-height:52px; padding:12px 18px; cursor:pointer; transition:background-color var(--tr); }
.report > summary::-webkit-details-marker { display:none; }
.report .r-title { flex:1 1 20ch; min-width:0; font-weight:600; font-size:var(--t2); overflow-wrap:anywhere; }
.report .r-when { font:500 12px var(--mono); color:var(--text-3); white-space:nowrap; }
.report .r-body { padding:0 18px 18px; max-width:72ch; font-size:var(--t2); line-height:1.6; color:var(--text-1); white-space:pre-wrap; overflow-wrap:anywhere; }

/* Sort these: one thread a row, its guess first */
.nrow { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items:center; gap:var(--s3); min-height:var(--row); padding:10px 18px; }
.nrow .who { font-weight:600; overflow-wrap:anywhere; }
.nrow .guess { color:var(--text-3); }
.nrow .marks { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; white-space:nowrap; }
.nrow.busy { opacity:0.6; }
.nrow.done.personal .who { color:var(--text-3); font-weight:500; }
.nrow.done.business .marks .said { color:var(--accent); }

/* ---------- empty moments ---------- */
.empty { padding:var(--s2) 0 var(--s6); }
.empty-line { font:500 30px/1.15 var(--serif); font-variation-settings:"opsz" 32; letter-spacing:-0.01em; margin:var(--s2) 0 var(--s3); max-width:22ch; }
.empty-sub { margin:0 0 var(--s5); color:var(--text-2); max-width:58ch; }
.plan-empty .btn { margin-bottom:var(--s3); }

p.quiet { margin:var(--s3) 0 0; max-width:66ch; }
code { font:var(--t3) var(--mono); color:var(--text-2); overflow-wrap:anywhere; }

.posted, .views { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2) var(--s3); margin:0; }
.views { margin-top:var(--s3); }
.posted input, .views input, .settings input[type=number], .settings input[type=text], .set-group input[type=text], .settings select, .biz-form input, .manage-biz input { height:var(--ctl); padding:0 10px; }
.posted input { min-width:0; flex:1 1 16ch; }
.views input { width:10ch; }

.call.plan-text { margin-top:var(--s5); white-space:pre-line; }
.call { font:400 17px/1.55 var(--sans); margin:var(--s3) 0 0; max-width:64ch; }
.pg-wrap, .score-wrap { overflow-x:auto; padding:0 18px; }
.pg, .score { width:100%; border-collapse:collapse; font-size:var(--t2); }
.pg th, .pg td, .score th, .score td { padding:var(--s3) 0 var(--s3) var(--s4); border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.pg tbody tr:last-child > *, .score tbody tr:last-child > * { border-bottom:0; }
.pg th[scope=row], .score th[scope=row] { text-align:left; font-weight:400; font-size:var(--t2); color:var(--text-1); padding-left:0; white-space:normal; }
.pg thead th, .score thead th, .score thead td { font-weight:500; font-size:12.5px; color:var(--text-3); vertical-align:bottom; }
.pg thead th:first-child { text-align:left; padding-left:0; }
.pg td { color:var(--text-1); }
.pg .by { color:var(--text-3); }
.review { margin:0; max-width:64ch; color:var(--text-2); white-space:pre-line; }
.review .v { margin-right:var(--s1); }
.score th, .score td { padding-block:var(--s4); }
.score td { font-size:var(--t1); color:var(--text-1); }
.score .wk { color:var(--text-2); }
.score .so-far { display:block; }
.gates, .readers { list-style:none; margin:0; padding:0; }
.gates li { display:grid; grid-template-columns:11ch minmax(0, 1fr) auto; gap:var(--s1) var(--s4); align-items:baseline; padding:var(--s3) 18px; font-size:var(--t2); }
.gates .stage { font-size:var(--t1); }
.gates .this { color:var(--text-2); }
.gates .streak { color:var(--text-3); text-align:right; }
.gates .eligible { grid-column:2 / -1; color:var(--accent); }
.gates .miss { grid-column:2 / -1; color:var(--text-2); }
p.quiet + .gates { margin-top:var(--s3); }

/* ---------- Settings: titled panels; a label and its help on the left, the control on the right, saved as it changes ---------- */
.settings { display:block; margin:var(--s5) 0 0; }
.set-group + .set-group { margin-top:var(--s6); }
.set-group > .section { margin:0 0 10px; padding-left:2px; }
.field { display:grid; grid-template-columns:minmax(0, 1fr) 7ch auto; grid-template-areas:"text status ctrl"; align-items:center; gap:var(--s4); min-height:64px; padding:14px 18px; }
.field .ftext { grid-area:text; min-width:0; }
.field .ftext > label { display:block; color:var(--text-1); font-weight:500; }
.field .field-note { margin:2px 0 0; max-width:58ch; }
.field > input, .field > select { grid-area:ctrl; }
.field > .fine[role=status] { grid-area:status; text-align:right; }
.field > .fine.err[role=status] { grid-column:1 / -1; grid-row:2; text-align:left; }
.settings .field input[type=number] { width:12ch; text-align:right; font-family:var(--mono); }
.settings .field input[type=text] { width:18ch; }
.settings .field select { min-width:16ch; }
.settings input[type=checkbox], .accounts input[type=checkbox] {
  -webkit-appearance:none; appearance:none; position:relative; width:38px; height:22px; margin:0; border-radius:var(--pill); background:var(--line-2); cursor:pointer;
  transition:background-color var(--tr); }
.settings input[type=checkbox]::before, .accounts input[type=checkbox]::before {
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / .25); transition:transform var(--tr); }
.settings input[type=checkbox]:checked, .accounts input[type=checkbox]:checked { background:var(--accent); }
.settings input[type=checkbox]:checked::before, .accounts input[type=checkbox]:checked::before { transform:translateX(16px); }
.settings input[disabled] { opacity:0.6; }
.settings + p.quiet { margin-top:var(--s5); }
p.theme-line { margin:var(--s2) 0 0; }
@media (min-width: 900px) { .theme-line { display:none; } }

.biz-add-row button.add { flex:none; width:28px; height:28px; margin:0; padding:0; border-radius:var(--r1); border:1px solid var(--line-2); background:var(--surface);
                          color:var(--accent); font:500 var(--t1)/1 var(--sans); cursor:pointer; display:grid; place-items:center; }
.biz-dialog { width:min(400px, calc(100vw - 2 * var(--s4))); padding:var(--s5); color:var(--text-1); background:var(--surface); border:0; border-radius:var(--r3); box-shadow:var(--pop); }
.biz-dialog::backdrop { background:var(--scrim); }
.biz-dialog h2 { font:500 22px/1.3 var(--serif); font-variation-settings:"opsz" 24; letter-spacing:-0.01em; margin:0 0 var(--s4); }
.biz-form { display:grid; gap:var(--s3); margin:0; }
.biz-form label { display:grid; gap:6px; color:var(--text-1); font-weight:500; }
.biz-form label input { font-weight:400; }
.biz-form .hint { margin:0; }
.biz-form > :last-child:not(label):not(.hint) { display:flex; justify-content:flex-end; gap:var(--s2); margin:var(--s2) 0 0; padding:0; }
.manage-biz, .accounts, .pulse { margin-top:var(--s6); }
.manage-biz > .section, .accounts > .section, .pulse > .section { margin:0 0 10px; padding-left:2px; }
.manage-biz ul, .accounts ul { list-style:none; margin:0; padding:0; }
.manage-biz li { display:grid; grid-template-columns:minmax(0, 14ch) minmax(0, 1fr) auto auto; align-items:center; gap:var(--s3); min-height:var(--row); padding:var(--s2) 18px; }
.manage-biz .name { font-weight:600; }
.manage-biz input { min-width:0; }
.manage-biz .move { display:flex; gap:var(--s1); }
.manage-biz .move button { width:30px; height:30px; padding:0; border-radius:var(--r1); border:1px solid var(--line); background:transparent; color:var(--text-2); cursor:pointer; }
.manage-biz button[disabled] { opacity:0.4; cursor:default; }
.manage-biz li.archived .name, .manage-biz li.archived .words { color:var(--text-3); text-decoration:line-through; }
.manage-biz li > .fine { grid-column:1 / -1; min-height:0; }
.manage-biz li > .fine:empty { display:none; }
.manage-biz .biz-add-row { display:flex; align-items:center; gap:var(--s2); margin:var(--s3) 0 0; }
.accounts li { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(12ch, 18ch) 38px; align-items:center; gap:var(--s3); min-height:var(--row); padding:var(--s2) 18px; }
.accounts .addr { font-weight:600; overflow-wrap:anywhere; }
.accounts .prov { font-size:var(--t3); color:var(--text-3); }
.accounts select { height:var(--ctl); padding:0 var(--s2); }
.accounts li > .fine { grid-column:1 / -1; min-height:0; }
.accounts li > .fine:empty { display:none; }
.accounts > p.fine { margin:0; }
.accounts .mail-add-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0 0; }

.pulse > .section:first-child { margin-top:0; }
.readers li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s2); min-height:var(--row); padding:var(--s2) 18px; }
.reader .dot { width:7px; height:7px; border-radius:50%; background:var(--text-3); flex:none; }
.reader.live .dot { background:var(--text-1); }
.reader.off .dot { background:transparent; border:1.5px solid var(--danger); }
.readers .back { margin-left:auto; }
.warn { color:var(--danger); font-size:var(--t2); }
.fix { margin-left:auto; height:30px; padding:0 var(--s3); border-radius:var(--r1); border:1px solid var(--danger); background:transparent; color:var(--text-1); font:600 var(--t3) var(--sans); cursor:pointer; }
.readers .fix-how { display:block; }
.stats { margin:var(--s3) 0 0; }
.meta .err { margin-left:var(--s2); }
.moved { margin:var(--s1) 0 0; font-size:var(--t3); color:var(--text-2); }

/* ---------- the first-run intake ---------- */
.intake { margin:0 0 var(--s7); padding-bottom:var(--s6); border-bottom:1px solid var(--line); }
.intake:last-child { border-bottom:0; padding-bottom:0; }
.intake-lede { margin:0 0 var(--s2); color:var(--text-3); font-size:var(--t2); }
.intake[data-ask] #intake-q { color:var(--text-3); }
.intake-form { display:grid; gap:var(--s3); }
.intake-form textarea { width:100%; min-height:112px; padding:var(--s3); background:var(--surface); color:var(--text-1); border:1px solid var(--line-2); border-radius:var(--r2);
                        font:var(--t1)/1.5 var(--sans); resize:vertical; }
.intake-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.intake-form .actions { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-top:0; }
.intake-adds { display:flex; flex-wrap:wrap; gap:var(--s2); }
.intake-adds:empty { display:none; }
.intake ~ h2.state { font-size:22px; color:var(--text-2); }
.intake-rec { display:flex; align-items:center; gap:var(--s4); margin:var(--s4) 0 var(--s2); padding:var(--s3) var(--s4); background:var(--surface);
              border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow); }
.intake-rec[hidden], .intake-decided[hidden] { display:none; }
.intake-rec-text { flex:1; min-width:0; margin:0; color:var(--text-1); overflow-wrap:anywhere; }
.intake-rec-text .label { margin-bottom:2px; }
.intake-rec .btn { flex:none; }
.intake-rec + .state-sub { margin-top:0; }
.intake-decided { margin-top:var(--s6); }
.decided-list { margin:0; padding:0; list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--shadow); overflow:hidden; }
.decided-list li + li { border-top:1px solid var(--line); }
.decided-row > summary { list-style:none; display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); cursor:pointer; transition:background-color var(--tr); }
.decided-row > summary::-webkit-details-marker { display:none; }
.decided-row > summary:focus-visible { outline-offset:-2px; }
.decided-row[open] { box-shadow:inset 2px 0 0 var(--accent); }
.decided-text { flex:1; min-width:0; display:grid; gap:2px; overflow-wrap:anywhere; }
.decided-about { font-size:var(--t3); color:var(--text-3); }
.decided-rec { font-size:var(--t2); font-weight:500; color:var(--text-1); }
.decided-why { font-size:var(--t3); color:var(--text-2); }
.decided-change { flex:none; pointer-events:none; }
.decided-row[open] .decided-change { visibility:hidden; }
.decided-form { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); padding:0 var(--s4) var(--s3); }
.decided-form input { flex:1 1 20ch; min-width:0; height:var(--ctl); padding:0 10px; background:var(--bg); color:var(--text-1); border:1px solid var(--line-2);
                      border-radius:var(--r1); font:var(--t2) var(--sans); transition:border-color var(--tr), box-shadow var(--tr); }
.decided-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
@media (hover: hover) { .decided-row > summary:hover { background:var(--raised); } }
@media (max-width: 560px) { .intake-rec { flex-direction:column; align-items:stretch; } }

/* ---------- the chat: Rook, on the right. A panel on a Mac, a full sheet on a phone. It opens because he tapped Ask Rook. ---------- */
.chat { position:fixed; top:0; right:0; bottom:0; z-index:50; width:var(--chat-w); display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line);
        box-shadow:var(--pop); transform:translateX(100%); visibility:hidden; transition:transform 240ms var(--ease), visibility 240ms; }
body.chat-open .chat { transform:none; visibility:visible; transition:transform 240ms var(--ease), visibility 0s; }   /* visible at once, so the box takes focus on open (M3); the delay stays on close */
.chat-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s4) var(--s4) var(--s3); border-bottom:1px solid var(--line); }
.chat-head .rook { width:16px; height:16px; color:var(--ink); }
.chat-head .c-name { font:italic 600 17px/1 var(--serif); font-variation-settings:"opsz" 20; }
.chat-head .c-place { font:500 11px var(--mono); letter-spacing:0.04em; text-transform:uppercase; color:var(--text-3); margin-left:var(--s1); }
.chat-head .close { margin-left:auto; width:32px; height:32px; padding:0; border:0; border-radius:var(--r1); background:transparent; color:var(--text-2); font:400 20px/1 var(--sans); cursor:pointer; }
.chat-log { flex:1; min-height:0; overflow-y:auto; padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); scrollbar-width:thin; }
.turn { max-width:92%; font-size:var(--t2); line-height:1.5; overflow-wrap:anywhere; }
.turn.him { align-self:flex-end; padding:var(--s2) var(--s3); background:var(--raised); border-radius:var(--r2) var(--r2) 3px var(--r2); color:var(--text-1); }
.turn.rook { align-self:flex-start; color:var(--text-1); }
.turn.rook p { margin:0 0 var(--s2); white-space:pre-wrap; }
.turn.rook p:last-child { margin-bottom:0; }
.turn.thought { align-self:flex-start; font:italic 400 var(--t3) var(--serif); font-variation-settings:"opsz" 14; color:var(--text-3); }
.turn.mind { align-self:flex-start; padding:var(--s3) var(--s4); border:1px solid var(--line-2); border-radius:var(--r2); background:var(--bg); }
.turn.mind .stamp { margin-bottom:var(--s2); }
.turn.mind .m-call { font-weight:600; margin:0 0 var(--s1); }
.turn.mind .m-line { margin:0; color:var(--text-2); font-size:var(--t3); }
.turn.mind .m-line b { color:var(--text-1); font-weight:500; }
.turn .stamp { margin-bottom:6px; }
.turn .t-acts { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.turn .t-at { display:block; margin-top:4px; font:500 10.5px var(--mono); color:var(--text-3); }
.chat-empty { margin:auto 0; padding:var(--s5) var(--s2); text-align:left; color:var(--text-2); font-size:var(--t2); }
.chat-empty .big { display:block; margin-bottom:var(--s2); font:500 24px/1.2 var(--serif); font-variation-settings:"opsz" 28; color:var(--text-1); }
.chat-empty .tries { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.chat-form { display:flex; gap:var(--s2); padding:var(--s3) var(--s4) max(var(--s4), env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.chat-form textarea { flex:1; min-width:0; min-height:40px; max-height:160px; padding:9px var(--s3); background:var(--bg); color:var(--text-1); border:1px solid var(--line-2);
                      border-radius:var(--r2); font:var(--t2)/1.45 var(--sans); resize:none; transition:border-color var(--tr), box-shadow var(--tr); }
.chat-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat-form .btn { height:40px; }
@media (max-width: 899px) {
  .chat { width:100%; border-left:0; }
  .masthead .ask kbd { display:none; }
}

@media (pointer: coarse) {
  :root { --ctl:44px; }
  .btn.sm, .fix, .manage-biz .move button { min-height:44px; }
  .theme { width:44px; }
}

@media (max-width: 600px) {
  .state, .empty-line { font-size:27px; }
  .numbers dd { font-size:19px; }
  .row > summary { padding:var(--s3) 14px; column-gap:var(--s2); }
  .row .kind { display:none; }
  .row .gist { padding-left:15px; }
  .detail { padding:0 14px var(--s5) 29px; }
  p.working { min-height:calc(2 * 1.35em + 18px); }
  .nrow { grid-template-columns:minmax(0, 1fr); padding:var(--s3) 14px; }
  .nrow .marks { justify-content:flex-start; flex-wrap:wrap; white-space:normal; }
  .actions .fine { margin-left:0; flex-basis:100%; }
  .lens-row { flex-direction:column; align-items:stretch; }
  .pg-wrap, .score-wrap { padding:0 var(--s3); }
  .score th, .score td, .pg th, .pg td { padding-left:var(--s3); }
  .score td { font-size:var(--t2); }
  .gates li { grid-template-columns:minmax(0, 1fr) auto; padding:var(--s3) 14px; }
  .gates .this, .gates .eligible, .gates .miss { grid-column:1 / -1; }
  .field { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"text ctrl" "status status"; row-gap:0; padding:14px; }
  .field > .fine[role=status] { text-align:left; }
  .field > .fine[role=status]:empty { display:none; }
  .settings .field input[type=number] { width:9ch; }
  .settings .field select { min-width:0; max-width:14ch; }
  .manage-biz li { grid-template-columns:minmax(0, 1fr) auto auto; padding:var(--s2) 14px; }
  .manage-biz .words { display:none; }
  .accounts li { grid-template-columns:minmax(0, 1fr) auto 38px; padding:var(--s2) 14px; }
  .accounts select { grid-column:1 / -1; }
  .readers li { padding:var(--s2) 14px; }
  .task > summary { grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"stamp title" "stamp line" "stamp when"; padding:12px 14px; }
  .task .t-when { text-align:left; }
  .task .t-body { padding:0 14px 16px 14px; }
  .masthead { align-items:center; }
  .masthead .day { flex:1 1 auto; }
  .masthead .now { flex-basis:100%; order:3; }
  .masthead .ask { margin-left:0; }
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .biz-dialog, .sheet { width:100%; max-width:100%; margin:auto 0 0; border-radius:var(--r3) var(--r3) 0 0; padding-bottom:max(var(--s5), env(safe-area-inset-bottom)); }
}

/* motion: a card opens in 220 ms because you tapped it; nothing else moves on its own (the mind's call 07) */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size:allow-keywords; }
  .row::details-content, .task::details-content, .report::details-content { block-size:0; opacity:0; overflow-y:clip;
                          transition:block-size 220ms var(--ease), opacity 220ms var(--ease), content-visibility 220ms allow-discrete; }
  .row[open]::details-content, .task[open]::details-content, .report[open]::details-content { block-size:auto; opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .btn:active:not([disabled]) { transform:none; }
}

/* Settings, Your products */
.products { margin-top:var(--s6); }
.products > .section { margin:0 0 10px; padding-left:2px; }
.product-list { list-style:none; margin:0 0 var(--s3); padding:0; }
.product-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3); min-height:var(--row); padding:var(--s3) 18px; }
.product-list li + li { border-top:1px solid var(--line); }
.product-list .fine { overflow-wrap:anywhere; }
.products-form { display:grid; gap:var(--s4); padding:var(--s5); }
.products-form .field { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-areas:none; gap:6px; min-height:0; padding:0; }
.products-form .field > label { color:var(--text-1); font-weight:500; }
.products-form .field > input { grid-area:auto; }
.products-form input { width:100%; min-width:0; height:var(--ctl); padding:0 10px; background:var(--bg); color:var(--text-1); border:1px solid var(--line-2);
                       border-radius:var(--r1); font:var(--t2) var(--sans); transition:border-color var(--tr), box-shadow var(--tr); }
.products-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.products-form .field-note { margin:0; }
.products-form .save { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s1); }
.products > p.fine { overflow-wrap:anywhere; }

/* a closed row keeps its short form; an opened card shows every word */
.row .open-only { display:none; }
.row[open] > summary .closed-only { display:none; }
.row[open] > summary .open-only { display:inline; }
.row[open] > summary .gist.open-only { display:block; }

/* ---------- GAME-1 (2026-10-20, his words: "too many things that look like each other ... more like a video game ... not childish,
   dopamine"): each family of card has its own mark and its own preview; a tap stamps the card and rolls the count down. ---------- */
.row .mark { flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
             background:var(--raised); color:var(--text-1); font:600 12.5px/1 var(--mono); letter-spacing:0.02em; border:1px solid var(--line); }
.row .mark.m-review { color:var(--warn); font-size:11px; letter-spacing:-0.08em; }
.row .mark.m-date { flex-direction:column; gap:0; border-radius:var(--r2); font-family:var(--serif); }
.row .mark.m-date b { font:600 16px/1 var(--serif); font-variation-settings:"opsz" 18; }
.row .mark.m-date small { font:500 9px/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); margin-top:2px; }
.row .mark.m-chore, .row .mark.m-mind { color:var(--text-2); background:transparent; border-style:dashed; }
.row .mark.m-mind { font:600 15px/1 var(--serif); }
.row.f-msg > summary .who, .row.f-review > summary .who { font-weight:600; }
.row .pv { order:9; flex:1 0 100%; display:block; padding-left:46px; margin:2px 0 0; quotes:"“" "”";
           font:400 16px/1.5 var(--serif); font-variation-settings:"opsz" 16, "SOFT" 60; color:var(--text-1); overflow-wrap:anywhere; }
.row .pv::before { content:open-quote; color:var(--text-3); }
.row .pv::after { content:close-quote; color:var(--text-3); }
.row.f-review .pv { font-style:italic; }
.row .gist { padding-left:46px; }
.row[open] > summary .closed-only { display:none; }
.row > summary .open-only { display:none; }
.row[open] > summary .open-only { display:block; }
.row > summary:hover { background:var(--raised); }
.list:has(> .row:not([open]) > summary:hover) { box-shadow:var(--pop-soft, 0 6px 24px rgb(0 0 0 / .08)); }
.score { display:flex; align-items:center; gap:var(--s3); margin:var(--s3) 0 var(--s2); }
.score .segs { display:inline-flex; gap:3px; }
.score i { display:block; width:14px; height:8px; border-radius:2px; background:var(--line-2); }
.score i.on { background:var(--accent); }
.score-word { font:500 var(--t3) var(--mono); color:var(--text-3); }
.state-sub { margin-top:0; }
.state { font-size:44px; }
.btn.primary { box-shadow:0 2px 0 var(--accent-hi), var(--shadow); transition:transform 90ms var(--ease), box-shadow 90ms var(--ease), background-color var(--tr); }
.btn.primary:active { transform:translateY(2px); box-shadow:0 0 0 var(--accent-hi); }
.btn.ghost:active, .btn.quiet:active { transform:translateY(1px); }
.row.just > summary .chip { animation:slam 220ms var(--ease) both; }
.row.gone { animation:gone 260ms cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes slam { from { transform:scale(1.6) rotate(-6deg); opacity:0; } 60% { transform:scale(0.96) rotate(1deg); opacity:1; } to { transform:none; } }
@keyframes gone { to { opacity:0; transform:translateX(28px); } }
.state.roll { animation:roll 220ms var(--ease) both; }
@keyframes roll { from { transform:translateY(-6px); opacity:0.3; } to { transform:none; opacity:1; } }
.task.s-done .moved { color:var(--accent); font:500 var(--t2) var(--mono); }
.task.s-done .moved::before { content:"+ "; }
.rail-logo .rook { border-radius:50%; box-shadow:0 0 0 2px transparent; transition:box-shadow var(--tr); }
body.working .rail-logo .rook { box-shadow:0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: reduce) { .row.just > summary .chip, .row.gone, .state.roll { animation:none; } .row.gone { opacity:0; } }

/* ---------- GAME-2 (2026-10-20, his words: "it really does need to feel like a video game. this has so much reading"): the deck.
   A HUD on top (the wordmark, the day, three figures: for you, cleared, energy), the businesses as a strip of bases with their sectors as
   dots, the cards as a grid of tiles with one button each and no prose until opened. Same type, same accent, same stamps. ---------- */
@media (min-width: 900px) {
  .shell { display:block; }
  .top { position:sticky; top:0; z-index:20; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5);
         padding:var(--s3) clamp(var(--s4), 4vw, 56px); border-right:0; border-bottom:1px solid var(--line); }
  .rail-logo { padding:0; gap:8px; }
  .rail-logo .ed { margin-left:4px; }
  .nav { flex:1 1 420px; flex-direction:row; align-items:stretch; overflow-x:auto; overflow-y:hidden; gap:var(--s2); padding:2px 0; scrollbar-width:none; }
  .nav a { flex:0 0 auto; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; min-width:104px; min-height:62px; padding:9px 12px 8px;
           border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); color:var(--text-2); font-size:var(--t3); }
  .nav a .num { margin-left:0; padding-left:0; font:600 22px/1 var(--serif); font-variation-settings:"opsz" 24; color:var(--text-1); }
  .nav a.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), var(--shadow); color:var(--text-1); }
  .nav a.on::before { display:none; }
  .nav a.on .num { color:var(--accent); }
  .nav a.today { color:var(--text-1); }
  .nav a.to-mind, .nav .rule + a { margin-top:0; }
  .nav a.to-mind::after, .nav .rule + a::after, .nav a[data-dots]::after { position:static; left:auto; right:auto; top:auto; height:auto; background:none; }
  .nav a[data-dots]::after { content:attr(data-dots); margin-top:auto; padding-top:4px; font:500 9px/1 var(--mono); letter-spacing:0.22em; color:var(--text-3); }
  .nav a.to-mind::after, .nav .rule + a:not([data-dots])::after { content:none; }
  .top .auto { flex:0 0 auto; border-top:0; padding:0 0 0 var(--s4); border-left:1px solid var(--line); grid-template-columns:auto auto; }
  .top .auto .auto-line, .top .auto .auto-plan { max-width:220px; }
  .top-right { flex:0 0 auto; display:flex; border-top:0; padding:0; }
  .top-right .lbl { display:none; }
  main { max-width:1180px; margin:0 auto; padding-top:var(--s5); }
  body.chat-open main { max-width:none; }
}
/* the HUD figures */
.masthead { align-items:center; border-bottom:0; padding:0; margin-bottom:var(--s4); }
.masthead .counters { flex:1 0 100%; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--s3); margin-top:var(--s3); }
.ctr { display:grid; gap:6px; padding:12px 14px 12px; border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); box-shadow:var(--shadow); }
.ctr .lbl { font:500 10.5px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); }
.ctr .val { font:600 34px/1 var(--serif); font-variation-settings:"opsz" 40; letter-spacing:-0.02em; color:var(--text-1); }
.ctr .val small { font:500 13px var(--mono); color:var(--text-3); margin-left:5px; letter-spacing:0; }   /* a gap between the value and its unit: "1 day", not "1day" (L1) */
.ctr-left .val { color:var(--accent); }
.ctr .cells { display:flex; gap:3px; }
.ctr .cells i { flex:1; height:6px; border-radius:2px; background:var(--line-2); }
.ctr .cells i.on { background:var(--text-1); }
.ctr-energy.low .cells i.on, .ctr-energy.low .val { color:var(--accent); background:var(--accent); }
.ctr-energy.low .val { background:none; }
.state { font-size:30px; margin-top:var(--s2); }
/* the tiles */
main > .list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s3); background:none; border:0; box-shadow:none; overflow:visible; }
main > .list > .row { position:relative; border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); box-shadow:var(--shadow); overflow:hidden;
                      transition:transform 120ms var(--ease), box-shadow 120ms var(--ease), border-color var(--tr); }
main > .list > .row + .row { border-top:1px solid var(--line); }
main > .list > .row[open] { grid-column:1 / -1; box-shadow:inset 3px 0 0 var(--accent), var(--shadow); }
main > .list > .row > summary { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; column-gap:12px; row-gap:6px; align-content:start; min-height:156px; padding:16px 16px 14px; }
main > .list > .row > summary:hover { background:var(--surface); }
main > .list > .row:not([open]):hover { transform:translateY(-2px); box-shadow:0 10px 28px rgb(0 0 0 / .10), var(--shadow); border-color:var(--line-2); }
main > .list > .row > summary .mark { grid-column:1; grid-row:1 / span 2; width:44px; height:44px; font-size:14px; }
main > .list > .row > summary .mark.m-review { font-size:12px; }
main > .list > .row > summary .kind, main > .list > .row > summary .chip { grid-column:2; grid-row:1; justify-self:start; }
main > .list > .row > summary .due { grid-column:3; grid-row:1; justify-self:end; }
main > .list > .row > summary .who { grid-column:2 / 4; grid-row:2; align-self:start; font:600 19px/1.25 var(--serif); font-variation-settings:"opsz" 20, "SOFT" 40; letter-spacing:-0.01em; }
main > .list > .row > summary .pv, main > .list > .row > summary .gist { grid-column:1 / 4; padding-left:0; order:0; }
main > .list > .row > summary .quick { grid-column:1 / 4; display:flex; gap:var(--s2); align-items:center; margin-top:auto; padding-top:var(--s2); }
main > .list > .row > summary .new { position:absolute; top:12px; right:12px; }
main > .list > .row > summary .caret { display:none; }
main > .list > .row:not([data-status=pending]) > summary .quick, main > .list > .row[open] > summary .quick { display:none; }
.btn.sm { height:30px; padding:0 12px; font-size:var(--t3); }
.row.gone { animation:gone 260ms cubic-bezier(0.4, 0, 1, 1) both; }
@media (max-width: 899px) {
  main > .list { grid-template-columns:minmax(0, 1fr); }
  .masthead .counters { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s2); }
  .masthead .counters .ctr-energy { grid-column:1 / -1; }
  .ctr { padding:10px 12px; } .ctr .val { font-size:26px; }
}

/* ---------- GAME-3 (2026-10-20, his words: "make it addictive ... people working ... like an empire"): the streak, the level, the crew. */
.ctr-streak.on .val { color:var(--warn); }
.ctr-streak.due { border-style:dashed; }
.ctr-streak .w-line { font-size:11px; color:var(--text-3); }
.ctr .combo { font:600 11px/1 var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); }
.ctr .combo.roll { animation:roll 220ms var(--ease) both; }
.crew { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--s2); margin:0 0 var(--s5); }
.crew .w { position:relative; display:grid; grid-template-columns:38px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:1px; align-items:center;
           min-height:58px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); color:var(--text-2); }
.crew .ring { grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line-2);
              background:var(--raised); color:var(--text-1); font:600 11.5px/1 var(--mono); letter-spacing:0.02em; }
.crew .ring .rook { width:15px; height:15px; color:var(--ink); }
.crew .w-name { font:600 var(--t3)/1.2 var(--sans); color:var(--text-1); }
.crew .w-line { font:400 12px/1.3 var(--sans); color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crew .w.working .ring { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); animation:breathe 2.4s ease-in-out infinite; }
.crew .w.working .w-line, .crew .w.waiting .w-line { color:var(--text-2); }
.crew .w.waiting .ring { border-color:var(--accent); color:var(--accent); }
.crew .w.queued .ring { border-style:dashed; }
.crew .w.done .ring { border-color:var(--text-2); }
.crew .w.off { color:var(--text-3); }
.crew .w.off .ring { border-style:dotted; color:var(--text-3); background:transparent; }
.crew .w.off .w-name { color:var(--text-3); }
.crew .w.holding .ring { border-color:var(--warn); color:var(--warn); }
.crew.auto-on .w:not(.off) .ring { border-color:var(--text-1); }
.crew.wake .w { animation:wake 420ms var(--ease) both; }
.crew.wake .w:nth-child(2) { animation-delay:60ms; } .crew.wake .w:nth-child(3) { animation-delay:120ms; } .crew.wake .w:nth-child(4) { animation-delay:180ms; }
.crew.wake .w:nth-child(5) { animation-delay:240ms; } .crew.wake .w:nth-child(6) { animation-delay:300ms; }
@keyframes breathe { 0%, 100% { box-shadow:0 0 0 3px var(--accent-soft); } 50% { box-shadow:0 0 0 7px transparent; } }
@keyframes wake { from { transform:translateY(6px); opacity:0.4; } 60% { transform:translateY(-2px); opacity:1; } to { transform:none; } }
@media (max-width: 899px) { .crew { grid-template-columns:repeat(2, minmax(0, 1fr)); } .crew .w-rook { grid-column:1 / -1; } }
@media (prefers-reduced-motion: reduce) { .crew .w.working .ring, .crew.wake .w { animation:none; } }

/* ---------- GAME-4 (2026-10-20, his words: "the builders need to be more visual ... animations and people moving ... interactive"):
   the crew as chess pieces, each with its own motion when working, a nudge when waiting; pieces stand on the base they work for and
   slide there when that changes (app.js); pick a member then a base to send it. ---------- */
.crew .w { cursor:pointer; text-align:left; font:inherit; transition:transform 120ms var(--ease), box-shadow 120ms var(--ease), border-color var(--tr); }
.crew .w:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgb(0 0 0 / .10), var(--shadow); border-color:var(--line-2); }
.crew .w:hover .piece { transform:rotate(-6deg) translateY(-1px); }
.crew .ring { overflow:visible; background:var(--raised); }
.crew .piece { display:block; width:30px; height:30px; color:var(--text-1); transform-origin:50% 90%; transition:transform 160ms var(--ease); }
.crew .w.off .piece { color:var(--text-3); opacity:0.7; }
.crew .w.waiting .piece { color:var(--accent); }
.crew .w.holding .piece { color:var(--warn); }
.crew .w.working .piece.pc-knight { animation:gallop 0.7s ease-in-out infinite alternate; }
.crew .w.working .piece.pc-bishop { animation:sway 1.4s ease-in-out infinite; }
.crew .w.working .piece.pc-queen { animation:regal 2s ease-in-out infinite; }
.crew .w.working .piece.pc-pawn { animation:hammer 0.55s cubic-bezier(0.5, 0, 0.3, 1) infinite alternate; }
.crew .w.working .piece.pc-king { animation:nod 1.8s ease-in-out infinite; }
.crew .w.working .piece.pc-rook { animation:rise 2.4s ease-in-out infinite; }
.crew .w.waiting .piece { animation:nudge 4s ease-in-out infinite; }
.crew .w.queued .piece { animation:shift 3s ease-in-out infinite; }
@keyframes gallop { from { transform:translateY(0) rotate(-3deg); } to { transform:translateY(-3px) rotate(4deg); } }
@keyframes sway { 0%, 100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
@keyframes regal { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.08) translateY(-1px); } }
@keyframes hammer { from { transform:translateY(0) scaleY(1); } to { transform:translateY(-4px) scaleY(1.06); } }
@keyframes nod { 0%, 100% { transform:rotate(0); } 30% { transform:rotate(6deg); } 60% { transform:rotate(-2deg); } }
@keyframes rise { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes nudge { 0%, 86%, 100% { transform:rotate(0); } 90% { transform:rotate(-10deg); } 94% { transform:rotate(8deg); } 97% { transform:rotate(-4deg); } }
@keyframes shift { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(2px); } }
.crew .w.picked { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), var(--shadow); }
.crew .w.picked .ring { border-color:var(--accent); }
.crew .w.sending .piece { animation:gallop 0.5s ease-in-out infinite alternate; }
.crew .crew-hint { grid-column:1 / -1; margin:0; font:italic 400 var(--t2)/1.4 var(--serif); color:var(--text-2); }
.crew.picking .w:not(.picked) { opacity:0.6; }
.nav.targets a[href^="/?biz="]:not([href="/?biz=all"]) { border-color:var(--accent); border-style:dashed; cursor:copy; animation:beckon 1.6s ease-in-out infinite; }
@keyframes beckon { 0%, 100% { box-shadow:0 0 0 0 var(--accent-soft); } 50% { box-shadow:0 0 0 6px transparent; } }
main > .list > .row.dim { opacity:0.35; filter:saturate(0.4); }
/* pieces on the bases */
.nav a { position:relative; }
.nav a .yard { position:absolute; right:8px; bottom:6px; display:flex; gap:2px; pointer-events:none; }
.nav a .yard .yp { display:inline-flex; width:18px; height:18px; color:var(--text-1); }
.nav a .yard .yp svg { width:18px; height:18px; display:block; }
.nav a.on .yard .yp { color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .crew .piece, .nav.targets a { animation:none !important; } }

/* ---------- GAME-5 (2026-10-20, his words: "i like the concept but its so confusing and still flat"): one scene, with light.
   The top is the board: the businesses as plots on a surface that recedes, the pieces standing on them; the crew on a bench under it;
   the five figures as one quiet line; the cards as paper. Depth from a lit surface, an edge and a shadow, never from a glow. ---------- */
:root, [data-theme="light"] { --piece-hi:#26231F; --piece-lo:#1B1916; --plot-top:#FFFDF8; --plot-side:#D9D1C2; --board:#EDE6D9; --felt:#E6DFD0; }
[data-theme="dark"] { --piece-hi:#FFF8EA; --piece-lo:#B5AC9E; --plot-top:#2A2622; --plot-side:#0E0D0B; --board:#1A1816; --felt:#171512; }
body { background:radial-gradient(120% 60% at 50% -10%, var(--felt) 0%, var(--bg) 70%) fixed, var(--bg); }
.crew .piece, .nav .yp svg { fill:var(--piece-hi); filter:drop-shadow(0 2px 1.5px rgb(0 0 0 / .35)); }
.crew .w.waiting .piece, .nav a.on .yp svg { fill:var(--accent); }
.crew .w.off .piece { fill:var(--text-3); filter:none; }
@media (min-width: 900px) {
  .top { position:static; display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; grid-template-areas:"logo hud auto right" "board board board board";
         align-items:center; gap:var(--s3) var(--s5); padding:var(--s4) clamp(var(--s4), 4vw, 56px) 0; background:transparent; border-bottom:0; }
  .rail-logo { grid-area:logo; }
  .top .auto { grid-area:auto; justify-self:end; }
  .top-right { grid-area:right; }
  /* the board: plots on a surface that recedes */
  .nav { grid-area:board; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); overflow:visible; max-width:1180px; width:100%; margin:var(--s2) auto 0;
         padding:28px 36px 22px; border-radius:18px; background:linear-gradient(180deg, var(--board), var(--felt)); border:1px solid var(--line);
         box-shadow:inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 48px -24px rgb(0 0 0 / .45); transform:perspective(1400px) rotateX(9deg); transform-origin:50% 100%; }
  .nav a { flex:1 1 128px; max-width:200px; min-height:84px; padding:10px 14px 10px; border:1px solid var(--line-2); border-bottom:0; border-radius:10px;
           background:linear-gradient(180deg, var(--plot-top), var(--surface)); box-shadow:0 4px 0 0 var(--plot-side), 0 14px 18px -8px rgb(0 0 0 / .45);
           transition:transform 140ms var(--ease), box-shadow 140ms var(--ease); }
  .nav a:hover { transform:translateY(-3px); box-shadow:0 7px 0 0 var(--plot-side), 0 20px 24px -8px rgb(0 0 0 / .5); }
  .nav a.on { border-color:var(--accent); box-shadow:0 4px 0 0 var(--accent-hi), 0 14px 18px -8px rgb(0 0 0 / .45), inset 0 0 0 1px var(--accent); }
  .nav a .num { font-size:26px; }
  .nav a[data-dots]::after { letter-spacing:0.3em; font-size:10px; }
  .nav a .yard { right:10px; bottom:10px; gap:4px; }
  .nav a .yard .yp, .nav a .yard .yp svg { width:28px; height:28px; }
  .nav .rule { display:none; }
  /* the figures: one line, not five boxes */
  .masthead { flex-wrap:wrap; }
  .masthead .counters { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin:var(--s2) 0 0; }
  .ctr { display:flex; align-items:baseline; gap:6px; padding:0; border:0; background:none; box-shadow:none; }
  .ctr .lbl { order:2; font-size:10.5px; }
  .ctr .val { font-size:22px; }
  .ctr .val small { font-size:11px; }
  .ctr .cells { order:3; width:60px; gap:2px; }
  .ctr .cells i { height:5px; }
  .ctr-streak .w-line { order:4; }
  /* the bench: the crew stands on a shelf, no boxes */
  .crew { gap:0; margin:var(--s4) 0 var(--s6); padding:14px 8px 10px; border-radius:14px; background:linear-gradient(180deg, transparent 58%, var(--felt) 58%);
          position:relative; }
  .crew::after { content:""; position:absolute; left:8px; right:8px; top:58%; height:1px; background:var(--line-2); }
  .crew .w { grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:center; row-gap:2px; min-height:0; padding:0 6px; border:0; background:none; box-shadow:none; text-align:center; }
  .crew .w:hover { transform:translateY(-3px); box-shadow:none; }
  .crew .ring { grid-row:auto; width:64px; height:52px; border:0; border-radius:50%; background:radial-gradient(ellipse at 50% 100%, rgb(0 0 0 / .28), transparent 62%); box-shadow:none; }
  .crew .ring .rook, .crew .piece { width:46px; height:46px; }
  .crew .ring .rook { fill:var(--piece-hi); filter:drop-shadow(0 2px 1.5px rgb(0 0 0 / .35)); color:inherit; }
  .crew .w.working .ring { animation:none; box-shadow:none; }
  .crew .w.working .ring::after, .crew .w.picked .ring::after { content:""; position:absolute; left:50%; bottom:2px; width:52px; height:12px; margin-left:-26px; border-radius:50%; border:1.5px solid var(--accent); opacity:.9; }
  .crew .w.working .ring::after { animation:breathe-disc 2.4s ease-in-out infinite; border-color:var(--accent-line); }
  .crew .ring { position:relative; }
  .crew .w-name { font:600 var(--t2)/1.2 var(--serif); font-variation-settings:"opsz" 14; }
  .crew .w-line { max-width:150px; font-size:11.5px; }
  .crew .w.picked { border:0; box-shadow:none; }
  .crew.picking .w:not(.picked) { opacity:0.55; }
  .crew .crew-hint { position:absolute; left:14px; bottom:-28px; margin:0; }
  .crew.picking { margin-bottom:calc(var(--s6) + 20px); }
  @keyframes breathe-disc { 0%, 100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.15); opacity:.4; } }
  /* paper */
  main > .list > .row { background:linear-gradient(180deg, var(--plot-top), var(--surface)); box-shadow:0 1px 0 var(--plot-side), 0 10px 24px -14px rgb(0 0 0 / .5); }
  main { padding-top:var(--s4); }
  .masthead { margin-bottom:var(--s2); }
}

/* ---------- WORK-1 (2026-10-21): a crew member's page, a panel on the right like the chat ---------- */
.worker { position:fixed; top:0; right:0; bottom:0; z-index:50; width:var(--chat-w); display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line);
          box-shadow:var(--pop); transform:translateX(100%); visibility:hidden; transition:transform 240ms var(--ease), visibility 240ms; }
body.worker-open .worker { transform:none; visibility:visible; }
body.worker-open .chat { visibility:hidden; }
.wk-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.wk-head .wk-piece svg { width:30px; height:30px; display:block; fill:var(--piece-hi); filter:drop-shadow(0 2px 1.5px rgb(0 0 0 / .35)); }
.wk-head .wk-name { font:italic 600 19px/1 var(--serif); font-variation-settings:"opsz" 24, "SOFT" 50; }
.wk-head .wk-state { flex:1; min-width:0; font-size:var(--t3); color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-head .wk-state.working { color:var(--accent); }
.wk-head .close { margin-left:auto; width:32px; height:32px; border:0; background:none; color:var(--text-3); font-size:22px; cursor:pointer; border-radius:50%; }
.wk-body { flex:1; overflow-y:auto; padding:14px 16px 24px; }
.wk-standard { margin:0 0 var(--s4); font:italic 400 var(--t2)/1.5 var(--serif); color:var(--text-2); }
.wk-body h3 { margin:var(--s4) 0 8px; font:500 11px/1.3 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); }
.wk-idle { margin:0; font-size:var(--t2); color:var(--text-3); }
.wk-bases { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.wk-form textarea { width:100%; min-height:44px; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r2); background:var(--bg); color:var(--text-1); font:inherit; resize:vertical; }
.wk-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.wk-form .fine { display:block; margin-top:6px; }
.wk-task { border:1px solid var(--line); border-radius:var(--r2); background:var(--bg); }
.wk-task + .wk-task { margin-top:6px; }
.wk-task > summary { list-style:none; display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; }
.wk-task > summary::-webkit-details-marker { display:none; }
.wk-task .wk-title { flex:1; min-width:0; font-weight:600; font-size:var(--t2); line-height:1.3; }
.wk-task .wk-when { font:500 11px var(--mono); color:var(--text-3); white-space:nowrap; }
.wk-task-body { padding:0 12px 12px; font-size:var(--t2); }
.wk-task-body p { margin:0 0 8px; }
.wk-task-body .moved { color:var(--accent); font:500 var(--t2) var(--mono); }
.wk-task-body .moved::before { content:"+ "; }
.wk-trail { display:grid; gap:4px; margin:4px 0 10px; padding-left:12px; border-left:2px solid var(--line-2); }
.wk-step { margin:0; font-size:var(--t3); line-height:1.4; color:var(--text-2); }
.wk-step.tool { color:var(--text-3); font-family:var(--mono); font-size:12px; }
.wk-step.tool::before { content:"› "; }
.wk-step.end { color:var(--text-1); font-weight:500; }
.wk-live .wk-step:last-child { color:var(--text-1); }
.wk-live .wk-trail::after { content:""; display:block; width:6px; height:6px; margin:2px 0 0 0; border-radius:50%; background:var(--accent); animation:blink 1s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity:1; } 50% { opacity:.2; } }
.wk-how > summary { font-size:var(--t3); color:var(--text-3); cursor:pointer; margin-bottom:6px; }
.wk-task-body .result { white-space:pre-wrap; max-height:260px; overflow:auto; padding:8px 10px; border-radius:var(--r1); background:var(--surface); font-size:var(--t3); line-height:1.5; }
.wk-task-body .actions, .wk-task-body .rate { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.wk-task-body .rate input { flex:1; min-width:120px; height:30px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r1); background:var(--surface); color:var(--text-1); font:inherit; }
@media (max-width: 899px) { .worker { width:100%; } }
@media (prefers-reduced-motion: reduce) { .wk-live .wk-trail::after { animation:none; } }

/* ---------- NEXT-1 (2026-10-21): your move, one line with one button; the guide, once ---------- */
.next-move { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin:0 0 var(--s5); padding:10px 14px; border-radius:var(--r3);
             background:var(--accent-soft); border:1px solid var(--accent-line); }
.next-move .nm-lbl { font:600 10.5px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.next-move .nm-text { flex:1 1 20ch; min-width:0; font:400 var(--t1)/1.4 var(--serif); font-variation-settings:"opsz" 14; color:var(--text-1); }
.guide { margin:0 0 var(--s5); padding:14px 16px; border:1px dashed var(--line-2); border-radius:var(--r3); background:var(--surface); }
.guide ol { margin:0 0 10px; padding-left:20px; }
.guide li { margin:0 0 4px; font-size:var(--t2); color:var(--text-2); }
.guide li b { color:var(--text-1); }
@media (min-width: 900px) { .crew + .next-move { margin-top:calc(-1 * var(--s3)); } .crew.picking + .next-move { margin-top:var(--s3); } }
.overnight { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s3); margin:0 0 var(--s4); font:italic 400 var(--t1)/1.4 var(--serif); color:var(--text-1); }
.overnight .ov-lbl { font:600 10.5px/1 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); font-style:normal; }
.wk-about { margin:0 0 var(--s3); }
.wk-about > summary { font:500 11px/1.3 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); cursor:pointer; list-style:none; }
.wk-about > summary::-webkit-details-marker { display:none; }
.wk-about > summary::before { content:"› "; }
.wk-about[open] > summary::before { content:"⌄ "; }
.wk-about .wk-standard { margin:8px 0 0; }

/* ---------- PHONE-1 (2026-10-21): the same scene as the desktop, made for a thumb. Under the wordmark the board is a strip of plots that
   scrolls sideways and snaps, the pieces standing on them; Autopilot is one row under it; the figures are one line; the bench is a strip
   of the six pieces; the cards are one column. No sheet and no place button: every base is on the glass. ---------- */
@media (max-width: 899px) {
  .top { position:static; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"logo right" "board board" "pilot pilot";
         align-items:center; gap:0; height:auto; padding:var(--s2) 0 0; background:transparent; border-bottom:0; }
  .top.open::after { content:none; }
  .place { display:none; }
  .rail-logo { grid-area:logo; display:flex; gap:8px; padding:0 0 0 max(var(--s4), env(safe-area-inset-left)); }
  .rail-logo .ed { margin-left:4px; }
  .top-right { grid-area:right; padding-right:max(var(--s2), env(safe-area-inset-right)); }
  /* the board: a strip of plots, lit from the top, each with an edge and a shadow */
  .nav { grid-area:board; position:static; z-index:auto; flex-direction:row; align-items:stretch; gap:10px; max-height:none; min-width:0;
         margin:var(--s2) max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left));
         padding:16px 14px 20px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:14px;
         scrollbar-width:none; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:16px;
         background:linear-gradient(180deg, var(--board), var(--felt)); box-shadow:inset 0 1px 0 rgb(255 255 255 / .06), 0 18px 32px -20px rgb(0 0 0 / .45);
         transform:none; visibility:visible; transition:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav .rule { display:none; }
  .nav a { flex:0 0 auto; scroll-snap-align:start; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; width:148px; min-height:96px;
           padding:10px 12px; border:1px solid var(--line-2); border-bottom:0; border-radius:10px; font-size:var(--t3); color:var(--text-2);
           background:linear-gradient(180deg, var(--plot-top), var(--surface)); box-shadow:0 4px 0 0 var(--plot-side), 0 12px 16px -8px rgb(0 0 0 / .45); }
  .nav a .num { margin-left:0; padding-left:0; font:600 26px/1 var(--serif); font-variation-settings:"opsz" 24; color:var(--text-1); }
  .nav a.on { border-color:var(--accent); color:var(--text-1); box-shadow:0 4px 0 0 var(--accent-hi), 0 12px 16px -8px rgb(0 0 0 / .45), inset 0 0 0 1px var(--accent); }
  .nav a.on::before { display:none; }
  .nav a.on .num { color:var(--accent); }
  .nav a.today { color:var(--text-1); }
  .nav a.to-mind, .nav .rule + a { margin-top:0; }
  .nav a.to-mind::after, .nav .rule + a::after, .nav a[data-dots]::after { position:static; left:auto; right:auto; top:auto; height:auto; background:none; }
  .nav a[data-dots]::after { content:attr(data-dots); margin-top:auto; padding-top:4px; font:500 10px/1 var(--mono); letter-spacing:0.3em; color:var(--text-3); }
  .nav a.to-mind::after, .nav .rule + a:not([data-dots])::after { content:none; }
  .nav a .yard { right:10px; bottom:24px; gap:2px; }
  .nav a .yard .yp, .nav a .yard .yp svg { width:22px; height:22px; }
  .nav.targets a[href^="/?biz="]:not([href="/?biz=all"]) { border-bottom:0; }
  /* Autopilot: one compact row under the board */
  .top .auto { grid-area:pilot; display:grid; grid-template-columns:auto auto minmax(0, 1fr); align-items:center; gap:2px 10px;
               margin:var(--s3) max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left)); padding:0; border:0; }
  .top .auto .auto-line { grid-column:3; font-size:12.5px; }
  .top .auto .auto-plan { grid-column:1 / -1; }
  main { padding-top:var(--s4); }
  /* the figures: one wrapping line of small numbers */
  .masthead { flex-wrap:wrap; margin-bottom:var(--s3); }
  .masthead .day .ed { display:none; }
  .masthead .counters { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin:var(--s2) 0 0; }
  .ctr { display:flex; align-items:baseline; gap:5px; padding:0; border:0; background:none; box-shadow:none; }
  .masthead .counters .ctr-energy { grid-column:auto; }
  .ctr .lbl { order:2; font-size:10px; letter-spacing:0.12em; }
  .ctr .val { font-size:20px; }
  .ctr .val small { font-size:11px; }
  .ctr .cells { order:3; width:44px; gap:2px; }
  .ctr .cells i { height:5px; }
  .ctr-streak .w-line { display:none; }
  /* the bench: the six pieces on a shelf, a strip that scrolls sideways */
  .crew { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:104px; grid-template-rows:auto; gap:0; min-width:0;
          margin:var(--s3) calc(-1 * max(var(--s4), env(safe-area-inset-left))) var(--s5); padding:12px max(var(--s3), env(safe-area-inset-left)) 12px;
          overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:var(--s3); scrollbar-width:none;
          background:linear-gradient(180deg, transparent 52px, var(--line-2) 52px, var(--line-2) 53px, var(--felt) 53px, var(--felt) calc(100% - 8px), transparent calc(100% - 8px)); }
  .crew::-webkit-scrollbar { display:none; }
  .crew .w, .crew .w-rook { grid-row:1; grid-column:auto; scroll-snap-align:start; grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:center;
           row-gap:2px; min-height:0; min-width:0; padding:0 6px 6px; border:0; background:none; box-shadow:none; text-align:center; }
  .crew .w:hover { transform:none; box-shadow:none; }
  .crew .ring { position:relative; grid-row:auto; width:58px; height:46px; border:0; border-radius:50%; background:radial-gradient(ellipse at 50% 100%, rgb(0 0 0 / .28), transparent 62%); box-shadow:none; }
  .crew .ring .rook, .crew .piece { width:40px; height:40px; }
  .crew .ring .rook { fill:var(--piece-hi); filter:drop-shadow(0 2px 1.5px rgb(0 0 0 / .35)); color:inherit; }
  .crew .w.working .ring { animation:none; box-shadow:none; border:0; }
  .crew .w.waiting .ring, .crew .w.holding .ring, .crew .w.picked .ring, .crew.auto-on .w:not(.off) .ring { border:0; }
  .crew .w.working .ring::after, .crew .w.picked .ring::after { content:""; position:absolute; left:50%; bottom:1px; width:46px; height:11px; margin-left:-23px; border-radius:50%; border:1.5px solid var(--accent); opacity:.9; }
  .crew .w.working .ring::after { animation:breathe-disc 2.4s ease-in-out infinite; border-color:var(--accent-line); }
  .crew .w-name { margin-top:6px; font:600 var(--t2)/1.2 var(--serif); font-variation-settings:"opsz" 14; }
  .crew .w-line { max-width:92px; font-size:11.5px; }
  .crew .w.picked { border:0; box-shadow:none; }
  .crew.picking .w:not(.picked) { opacity:0.55; }
  .crew .crew-hint { grid-row:2; grid-column:1 / span 6; position:sticky; left:0; justify-self:start; width:calc(100vw - 2 * var(--s4)); margin:6px 0 0; padding:0 4px; }
  @keyframes breathe-disc { 0%, 100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.15); opacity:.4; } }
  /* the cards: one column of paper, the one thing to do a thumb's size */
  main > .list { grid-template-columns:minmax(0, 1fr); }
  main > .list > .row { background:linear-gradient(180deg, var(--plot-top), var(--surface)); box-shadow:0 1px 0 var(--plot-side), 0 10px 24px -14px rgb(0 0 0 / .5); }
  main > .list > .row > summary { min-height:0; }
  .btn.primary, main > .list > .row > summary .quick .btn { min-height:44px; }
  main > .list > .row > summary .quick .btn { padding:0 16px; font-size:var(--t2); }
  .tiles { grid-template-columns:minmax(0, 1fr); }
  .worker, .chat { width:100%; max-width:100%; }
  .wk-head .close { width:44px; height:44px; margin-right:-8px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .crew .w.working .ring::after { animation:none; } }
.teach { margin-top:var(--s6); }
.teach > summary.section { cursor:pointer; list-style:none; }
.teach > summary::-webkit-details-marker { display:none; }
.teach-fold { padding:var(--s3) 0 4px; }
.teach-fold .free { margin:0 0 var(--s2); }

/* ---------- RESULTS-1 (2026-10-25, the mind's settlement, 65%: "no sixth redesign ... make the first screen an inbox of results"): the scene
   (the plots, the figures, the bench, the move, the guide) folds into one mono line under the masthead and opens in place on his tap; the
   cards come first and open, one column, the draft and its three buttons on the glass; the finished work follows in full. Same type, same
   accent, same stamps, same paper. ---------- */
.scene { margin:0 0 var(--s4); }
.scene > summary.scene-line { display:flex; align-items:center; gap:var(--s2); min-height:36px; padding:6px 0; list-style:none; cursor:pointer;
                              font:500 var(--t3)/1.4 var(--mono); letter-spacing:0.01em; color:var(--text-2); transition:color var(--tr); }
.scene > summary.scene-line::-webkit-details-marker { display:none; }
.scene > summary.scene-line .sc-text { min-width:0; overflow-wrap:anywhere; }
.scene > summary.scene-line .caret { flex:none; margin-left:2px; }
.scene[open] > summary.scene-line .caret { transform:rotate(45deg); }
.scene > summary.scene-line:hover { color:var(--text-1); }
.scene > summary.scene-line:focus-visible { outline-offset:2px; }
.scene-body { padding-top:var(--s3); }
.scene-body .nav { margin-top:0; }
.scene-body .counters { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin:var(--s4) 0 0; }
.scene-body .crew { margin-bottom:var(--s4); }
.scene-body .crew.picking { margin-bottom:calc(var(--s4) + 20px); }
.scene-body .next-move, .scene-body .guide { margin-bottom:var(--s3); }
@media (min-width: 900px) { .scene-body .nav { max-width:none; } }
@media (max-width: 899px) { .scene-body .nav { margin-left:0; margin-right:0; } .scene-body .crew { margin-left:calc(-1 * max(var(--s4), env(safe-area-inset-left))); } }
/* the cards in front: open, whole, one column; paper, no accent bar (the kind and the primary button already say it is his) */
main > .list > .row[data-inbox] { grid-column:1 / -1; }
main > .list > .row[data-inbox][open] { box-shadow:0 1px 0 var(--plot-side), 0 10px 24px -14px rgb(0 0 0 / .5); }
main > .list > .row[data-inbox] > summary { min-height:0; padding-bottom:6px; cursor:default; }
main > .list > .row[data-inbox] > summary:hover { background:transparent; }
main > .list > .row[data-inbox] > summary .who { font-size:20px; }
.row[data-inbox] .detail { padding-top:2px; }
/* the finished work, in full */
.results-head { display:flex; align-items:baseline; gap:var(--s2); margin:var(--s6) 0 10px; padding-left:2px; }
.results-head .num { color:var(--text-3); }
.results { display:grid; gap:var(--s3); }
.result { padding:16px 18px 14px; background:linear-gradient(180deg, var(--plot-top), var(--surface)); border:1px solid var(--line); border-radius:var(--r3);
          box-shadow:0 1px 0 var(--plot-side), 0 10px 24px -14px rgb(0 0 0 / .5); }
.result .r-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); }
.result .r-worker { font:italic 600 var(--t1)/1.2 var(--serif); font-variation-settings:"opsz" 14, "SOFT" 50; color:var(--text-1); }
.result .r-title { flex:1 1 20ch; min-width:0; font:600 17px/1.3 var(--serif); font-variation-settings:"opsz" 18, "SOFT" 40; letter-spacing:-0.01em; overflow-wrap:anywhere; }
.result .biz-tag { font:500 11px var(--mono); letter-spacing:0.02em; color:var(--text-3); }
.result .r-when { margin-left:auto; font:500 12px var(--mono); color:var(--text-3); white-space:nowrap; }
.result .moved { margin:var(--s2) 0 0; font-size:var(--t2); color:var(--text-1); }
.result .r-text { margin-top:var(--s3); max-width:76ch; font-size:var(--t2); line-height:1.6; color:var(--text-1); overflow-wrap:anywhere; }
.result .r-text h4 { margin:var(--s3) 0 4px; font:600 var(--t1)/1.3 var(--serif); font-variation-settings:"opsz" 14; }
.result .r-text > :first-child { margin-top:0; }
.result .r-text p { margin:0 0 var(--s2); }
.result .r-text ul { margin:0 0 var(--s2); padding-left:18px; }
.result .r-text li { margin:0 0 3px; }
.result .r-text table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:0 0 var(--s2); font-size:var(--t3); }
.result .r-text th, .result .r-text td { padding:4px 12px 4px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.result .r-text th { font:500 10.5px/1.4 var(--mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }
.result .r-link { font:400 12px var(--mono); color:var(--text-3); overflow-wrap:anywhere; }
.result .actions { margin-top:var(--s3); }
.result .actions .r-why { flex:1 1 16ch; min-width:0; height:30px; padding:0 10px; background:var(--bg); color:var(--text-1); border:1px solid var(--line-2); border-radius:var(--r1); font:var(--t3) var(--sans); }
.result.gone { animation:gone 260ms cubic-bezier(0.4, 0, 1, 1) both; }
@media (max-width: 899px) { .result { padding:14px 14px 12px; } .result .actions .r-why { flex-basis:100%; } }
@media (prefers-reduced-motion: reduce) { .result.gone { animation:none; opacity:0; } }

/* ---------- SIMPLE-2 (2026-10-25, his words: "the ui still needs work it's kinda complicated"; the mind's settlement: no new layer, so removal).
   The masthead is the mark, the name, Ask and the edition toggle. One sentence of state. One list of cards: who, the text, two buttons.
   The task box. One row, More, that opens in place on his tap with everything the page held before. Same tokens, same type, same accent;
   nothing moves unless he moved it. The full page stays at /?view=full.
   DESIGN-2 (2026-10-25, "make sure the UI looks sexy", "like something a YC startup would make"): the sentence is the one hero, set larger and
   lighter; the list is one surface of entries under hairlines (the 2026-10-20 call: entries, not boxes), no card inside a card; a draft is a quoted
   paragraph with a rule, not a filled box; the task box is one field; More is a 48px disclosure row with the caret at its end. One spacing scale:
   24 inside an entry, 32 between the page's parts, 48 above the sentence. On a phone the two buttons share one row, both a thumb's height. */
body.simple .shell { display:block; }
body.simple .top { position:sticky; top:0; z-index:20; height:auto; display:flex; flex-direction:row; align-items:center; gap:var(--s3);
                   padding:12px clamp(var(--s4), 4vw, 40px); background:var(--bg); border:0; border-bottom:1px solid var(--line); }
body.simple .rail-logo { display:flex; padding:0; }
body.simple .top-right { display:flex; align-items:center; margin-left:auto; gap:var(--s2); padding:0; border:0; }
body.simple .fresh { display:none; width:auto; height:32px; padding:0 12px; border-radius:var(--pill); }
body.simple .fresh.on { display:inline-flex; }
body.simple .fresh .lbl { display:inline; }
body.simple .theme { display:flex; width:36px; }
body.simple main { max-width:680px; width:100%; margin:0 auto; padding:var(--s7) clamp(var(--s4), 4vw, 40px) var(--s8); }
body.simple.chat-open main { max-width:680px; margin:0 auto; padding-right:clamp(var(--s4), 4vw, 40px); }
/* the one hero: Rook's sentence, Fraunces at its display size, the one large thing on the page */
.say { margin:0 0 var(--s6); max-width:30ch; font:400 clamp(31px, 1.6vw + 18px, 40px)/1.1 var(--serif); font-variation-settings:"opsz" 40, "SOFT" 30; letter-spacing:-0.022em; }
.say .s { display:inline-block; max-width:100%; }   /* a sentence moves to the next line whole; it wraps inside only when it is longer than the line */
/* the list: one surface, entries under hairlines; 24px inside an entry */
.simple-list { display:block; margin:0 0 var(--s6); background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--shadow); overflow:hidden; }
.simple-list .row.simple, .simple-list .result.simple { background:none; border:0; border-radius:0; box-shadow:none; padding:var(--s5) var(--s5) var(--s5); }
.simple-list > * + * { border-top:1px solid var(--line); }
.simple-list .row.simple[open] { box-shadow:none; }
.row.simple > summary { display:block; min-height:0; padding:0; cursor:default; }
.row.simple > summary:hover { background:transparent; }
.row.simple > summary .who, .result.simple .r-title { font:600 16px/1.35 var(--serif); font-variation-settings:"opsz" 16, "SOFT" 40; letter-spacing:-0.008em; }
.row.simple > summary .chip { margin-left:var(--s2); vertical-align:middle; }
.row.simple .detail { padding:0; }
.row.simple .draft-wrap { margin-top:var(--s3); }
.row.simple .draft-wrap .label { margin-bottom:var(--s1); }
/* a draft is the message itself: a quoted paragraph with a rule, a size up from the interface; the fill only arrives when he edits it */
.row.simple .draft { padding:var(--s1) var(--s3) var(--s1) var(--s4); background:transparent; border:0; border-left:2px solid var(--line-2); border-radius:0;
                     font-size:16px; line-height:1.55; transition:border-color var(--tr), background-color var(--tr); }
.row.simple .draft[data-editable]:focus { background:var(--raised); border-color:var(--accent); border-radius:0 var(--r2) var(--r2) 0; box-shadow:none; }
.row.simple .text { margin:var(--s3) 0 0; max-width:64ch; white-space:pre-wrap; overflow-wrap:anywhere; }
.row.simple .steps { margin:var(--s3) 0 0; padding-left:20px; }
.row.simple .does, .row.simple .gate, .row.simple .kept { margin:var(--s2) 0 0; font-size:var(--t3); color:var(--text-2); }
.row.simple .actions, .result.simple .actions { margin-top:var(--s4); gap:var(--s2); }
.row.simple .actions .btn.quiet, .result.simple .actions .btn.quiet { padding:0 14px; }
.result.simple .r-head { gap:var(--s2) var(--s3); }
.result.simple .r-text { max-width:64ch; }
.result.simple .r-text.clip { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.result.simple .read { margin-top:var(--s2); font-size:var(--t3); }
.after { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s3); }
.after label { flex-basis:100%; font-size:var(--t2); color:var(--text-2); }
.after input { flex:1 1 16ch; min-width:0; height:var(--ctl); padding:0 var(--s3); background:var(--bg); color:var(--text-1); border:1px solid var(--line-2); border-radius:var(--r1); font:var(--t2) var(--sans); }
.after input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.after .fine { flex-basis:100%; }
/* the task box: one field, no panel around it; the field, the picker and Add stand at one height */
.composer.simple { margin:0 0 var(--s6); padding:0; border:0; border-radius:0; background:none; box-shadow:none; gap:var(--s2); }
.composer.simple input[type=text] { flex:1 1 20ch; height:44px; padding:0 var(--s4); font-size:var(--t1); background:var(--surface); border-radius:var(--r2); }
.composer.simple select { height:44px; padding:0 var(--s3); background:var(--surface); border-radius:var(--r2); }
.composer.simple .btn { height:44px; padding:0 18px; border-radius:var(--r2); }
/* More: a disclosure row he can find, the label in the interface face, the caret at the row's end */
.more { margin-top:var(--s6); }
.more > summary.more-line { display:flex; align-items:center; gap:var(--s2); min-height:48px; padding:var(--s3) 2px; list-style:none; cursor:pointer;
                            font:500 var(--t1)/1.4 var(--sans); color:var(--text-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); transition:color var(--tr); }
.more > summary.more-line::-webkit-details-marker { display:none; }
.more > summary.more-line .caret { margin-left:auto; margin-right:6px; }
.more > summary.more-line:hover { color:var(--text-1); }
.more[open] > summary.more-line { border-bottom-color:transparent; }
.more[open] > summary.more-line .caret { transform:rotate(45deg); }
.more-body { padding-top:var(--s3); }
.more-body .scene-body { padding-top:0; }
.more-auto { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin:var(--s4) 0 0; padding:var(--s3) 14px; border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); }
.more-auto .auto { display:grid; flex:1 1 24ch; min-width:0; padding:0; border:0; }
@media (max-width: 899px) {
  body.simple .top { height:auto; min-height:56px; padding-top:var(--s2); padding-bottom:var(--s2); }
  body.simple .rail-logo { display:flex; }
  body.simple .place { display:none; }
  body.simple .top-right .theme { display:flex; }
  body.simple .nav { position:static; transform:none; visibility:visible; box-shadow:none; max-height:none; border-radius:0; padding:0; background:transparent; }
  .more-body .crew { margin-left:0; }
}
@media (max-width: 600px) {
  body.simple .ask kbd { display:none; }
  body.simple main { padding-top:var(--s6); }
  .say { margin-bottom:var(--s5); }
  /* the list runs edge to edge; the entries keep the page's gutter */
  .simple-list { margin-left:calc(-1 * var(--s4)); margin-right:calc(-1 * var(--s4)); border-left:0; border-right:0; border-radius:0; }
  .simple-list .row.simple, .simple-list .result.simple { padding:20px var(--s4); }
  /* the two buttons share one row, both a thumb's height: the one to do takes the width, No keeps its own */
  .row.simple .actions .btn, .result.simple .actions .btn { min-height:44px; }
  .row.simple .actions .btn.primary, .result.simple .actions .btn.primary { flex:1 1 auto; }
  .row.simple .actions .btn.quiet, .result.simple .actions .btn.quiet { flex:0 0 auto; padding:0 20px; }
  .after .btn { flex:1 1 100%; }
  .composer.simple input[type=text] { flex:1 1 100%; }
  .composer.simple select { flex:1 1 auto; max-width:none; }
  .composer.simple .btn { flex:0 0 auto; }
}

/* ---------- AUTH-1 (2026-10-25): sign-in and Accounts, the hosted app's two pages, in the board's own tokens; phone width first.
   DESIGN-2: one column of 360px set in the upper third of the screen, the mark small and far from the lede, the Google button, the rule and
   the email form one group at one height (48px) and one gap (12px). ---------- */
body.auth main.login { max-width:408px; width:100%; margin:0 auto; padding:var(--s8) var(--s5) var(--s8); }
.login .rail-logo { display:inline-flex; padding:0; margin:0 0 var(--s7); }
.login .say { margin-bottom:var(--s6); }
.login-form { display:grid; gap:var(--s3); }
.login-form input { height:48px; padding:0 var(--s4); font:400 var(--t1) var(--sans); color:var(--text-1); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r2);
                    transition:border-color var(--tr), box-shadow var(--tr); }
.login-form input[name=code] { font:500 22px/1 var(--mono); letter-spacing:0.3em; text-align:center; }
.login-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-form .btn { height:48px; border-radius:var(--r2); font-size:var(--t1); }
.login-form .err { margin:0; }
.login .again { margin-top:var(--s4); }
.login .fine { margin:0 0 var(--s3); }
.login .google { display:flex; width:100%; height:48px; margin:0 0 var(--s3); font-weight:600; font-size:var(--t1); border-radius:var(--r2); }
.login .or { display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s3); min-height:var(--s5); color:var(--text-3); }
.login .or::before, .login .or::after { content:""; flex:1; height:1px; background:var(--line); }
@media (min-width: 900px) {
  body.auth .shell { display:flex; flex-direction:column; min-height:100vh; }
  body.auth main.login { display:flex; flex-direction:column; justify-content:center; flex:1; padding-top:var(--s8); padding-bottom:calc(var(--s8) + 12vh); }
}
.viewing { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:var(--s2); min-height:30px; padding:4px var(--s4);
           font:500 var(--t3)/1.4 var(--sans); color:var(--on-accent); background:var(--accent); }
.viewing form { display:inline; }
.viewing .linkish { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.accounts-list { list-style:none; margin:0 0 var(--s5); padding:0; display:grid; gap:var(--s2); }
.account { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"mail act" "meta act"; gap:2px var(--s4); align-items:center; padding:12px 16px;
           background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--shadow); }
.account .mail { grid-area:mail; font-weight:500; overflow-wrap:anywhere; }
.account .act { grid-area:act; }
.account .meta { grid-area:meta; display:flex; flex-wrap:wrap; gap:var(--s3); }
.account .meta span:empty { display:none; }
.more-row.accounts { display:block; padding:8px 0 10px; margin:0 0 var(--s3); font-weight:500; color:var(--text-1); text-decoration:none; border-bottom:1px solid var(--line); }
.who-row { display:flex; justify-content:space-between; gap:var(--s3); margin:var(--s5) 0 0; padding-top:var(--s3); border-top:1px solid var(--line); }
.first-biz { margin:var(--s4) 0 0; }

/* TEAMS-1 (2026-10-26): the team's lines on a hosted card and the Team fold under More, in the board's own tokens; no new colour */
.row.team .team-head { display:flex; flex-direction:column; gap:4px; }
.row.team .team-head .who { font-weight:500; color:var(--text-1); }
.row.team .team-note { margin:var(--s2) 0 0; font-size:var(--t2); color:var(--text-2); }
.row.team .team-note .who { font-weight:500; color:var(--text-1); }
.row.team .team-trail { margin:var(--s2) 0 0; }
.team-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s3); }
.team-form { display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:0; }
.team-note-open > summary { list-style:none; cursor:pointer; }
.team-note-open > summary::-webkit-details-marker { display:none; }
.team-note-open[open] > summary { margin-bottom:var(--s2); }
.team-note-open input, .team-fold input[type=email] { height:36px; min-width:0; flex:1 1 220px; }
.team-fold { display:grid; gap:var(--s5); padding:var(--s3) 0; }
.team-name { margin:0 0 var(--s2); font-size:var(--t2); font-weight:500; color:var(--text-1); }
.team-people { list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:var(--s2); }
.team-person { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); justify-content:space-between; padding-bottom:var(--s2); border-bottom:1px solid var(--line); }
.team-person > span:first-child { flex:1 1 auto; }
@media (max-width: 640px) { .team-actions .btn, .team-form .btn { min-height:44px; } }

/* ---------- PREMIUM-1 (2026-10-26): the details a stranger reads as care ---------- */
/* where he is: the places as quiet links over the sentence, the current one in ink; one line, it scrolls inside itself on a phone (H2) */
.places { display:flex; gap:var(--s1) var(--s4); margin:0 0 var(--s4); overflow-x:auto; scrollbar-width:none; white-space:nowrap; font:500 var(--t3)/1 var(--sans); }
.places::-webkit-scrollbar { display:none; }
.places a { display:inline-flex; align-items:center; gap:6px; min-height:32px; color:var(--text-3); text-decoration:none; transition:color var(--tr); }
.places a:hover { color:var(--text-1); }
.places a[aria-current=page] { color:var(--text-1); box-shadow:inset 0 -1px 0 var(--text-1); }
.places .num { font-family:var(--mono); font-size:11px; color:var(--accent); }
/* the line under "Nothing needs you.": proof that it ran, or what to do next (M8) */
.quiet-line { margin:calc(-1 * var(--s4)) 0 var(--s6); max-width:56ch; font-size:var(--t2); color:var(--text-3); }
/* a time on a finished result, in his zone (M5) */
.result.simple .r-when { font:400 var(--t3)/1.35 var(--sans); color:var(--text-3); }
.result.simple .r-when { margin-left:auto; white-space:nowrap; }
/* the 404 and the 500 (H5) */
body.oops main { padding-top:var(--s8); }
.oops-back { display:flex; gap:var(--s2); margin:0; }
.oops-back .btn { height:44px; padding:0 18px; border-radius:var(--r2); text-decoration:none; }
/* Undo, 8 seconds after Approve or No: one quiet line where the buttons were (M1) */
.actions[hidden] { display:none; }
.undo-line { display:flex; align-items:center; gap:var(--s3); min-height:var(--ctl); margin-top:var(--s4); font-size:var(--t2); color:var(--text-2); }
.undo-line .v { font-weight:600; color:var(--text-1); }
.undo-line button { min-height:var(--ctl); padding:0 var(--s2); font:600 var(--t2) var(--sans); color:var(--accent); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.simple-list > .leaving { opacity:0; transition:opacity 200ms var(--ease); }
/* "?": the three keys, in a small sheet (M10) */
dialog.keys { width:min(360px, calc(100% - 32px)); padding:var(--s5); color:var(--text-1); background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--pop); }
dialog.keys::backdrop { background:var(--scrim); }
dialog.keys h2 { margin:0 0 var(--s4); font:600 18px/1.2 var(--serif); }
dialog.keys dl { display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s4); margin:0 0 var(--s5); align-items:center; }
dialog.keys dt kbd { display:inline-block; min-width:28px; padding:3px 8px; text-align:center; font:500 var(--t3)/1.2 var(--mono); border:1px solid var(--line-2); border-radius:var(--r1); }
dialog.keys dd { margin:0; font-size:var(--t2); color:var(--text-2); }
/* a thumb's height for the small text buttons on a touch screen; the padding is pulled back so nothing moves (L2) */
@media (pointer: coarse) {
  .undo-line, .undo-line button, .places a, .back-line a { min-height:44px; }
  .result.simple .read { min-height:44px; margin-top:calc(var(--s2) - 12px); margin-bottom:-12px; padding:12px 0; }
}
/* print: the sentence and the list in ink on white, no chrome (L4) */
@media print {
  :root, [data-theme="dark"] { --bg:Canvas; --surface:Canvas; --raised:Canvas; --line:GrayText; --line-2:GrayText; --text-1:CanvasText; --text-2:CanvasText;
                               --text-3:GrayText; --accent:CanvasText; color-scheme:light; }   /* the system's own paper and ink: no new colour */
  body.simple .top, .chat, .worker, .more, .composer, .actions, .places, .read, .undo-line, dialog { display:none !important; }
  body.simple main { max-width:none; padding:0; }
  .simple-list { box-shadow:none; border:0; }
  .result.simple .r-text.clip { display:block; -webkit-line-clamp:unset; overflow:visible; }
}
/* Settings and Rook's page under the simple top: the way back, one quiet line (H3) */
.back-line { margin:0 0 var(--s4); font:500 var(--t3)/1 var(--sans); }
.back-line a { display:inline-flex; align-items:center; gap:4px; min-height:32px; color:var(--text-3); text-decoration:none; transition:color var(--tr); }
.back-line a:hover { color:var(--text-1); }
body.simple.sub main { max-width:760px; }