/* ═══════════════════════════════════════════════════════════════════════════
   THE CARD BOOK, IN THE APP — agreed 2026-09-15.

   Every class here is the one the Card Book draws with (the book is the spec,
   and the artifact is the reference), so a card on screen and the card in the
   book are the same markup and the same rules. Cards only for questions and
   uploads; everything else is prose, or a line that shows where something
   went. One type scale, three radii, two buttons, one chip.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens the book adds to the app's own ── */
:root{
  --warn:#f0a63e; --warn-soft:rgba(240,166,62,.14);
  --good:#4ade80; --good-soft:rgba(74,222,128,.12);
  --bad:#e5484d;
  --surface-2:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --ground:#0d0d19; --page:#0b0b15; --ink-on-primary:#fff;
  --t-display:28px; --t-heading:18px; --t-body:15px; --t-ui:13.5px; --t-meta:12.5px; --t-label:11px;
  --r-s:6px; --r-m:12px; --r-pill:999px;
  --out:cubic-bezier(.16,.9,.28,1);
  --paper:#fbfaf7; --paper-ink:#1c1f2e; --paper-law:#f7f5ee; --paper-mute:#8a8f9e; --paper-art:#5a5f70;
}
html[data-theme="light"]{
  --warn:#b9761c; --warn-soft:rgba(185,118,28,.12);
  --good:#1f9d5b; --good-soft:rgba(31,157,91,.12);
  --bad:#c8353a;
  --surface-2:rgba(255,255,255,.95); --line-strong:rgba(12,35,64,.22);
  --ground:#EFEEEA; --page:#FAF9F6; --ink-on-primary:#fff;
}

/* ═══ THE CARD — eyebrow, question, why, answers, one line ═══ */
.m-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px 14px;max-width:560px;margin:14px 0 4px;animation:mcIn .35s var(--out) both}
@keyframes mcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.m-card .eyebrow{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--primary-hi);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.m-card .eyebrow.warn{color:var(--warn)}
.m-card p.q{font-size:var(--t-body);font-weight:500;line-height:1.5;margin:0 0 6px;text-wrap:balance;color:var(--text)}
.m-card .why{font-size:var(--t-meta);color:var(--muted);margin:0 0 12px;line-height:1.5}
.m-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.m-btn{font:inherit;font-size:var(--t-ui);font-weight:600;padding:8px 14px;border-radius:var(--r-s);border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,transform .15s var(--spring)}
.m-btn:hover:not(:disabled){border-color:var(--primary-hi)}
.m-btn:active:not(:disabled){transform:scale(.97)}
.m-btn.p{background:var(--primary);border-color:var(--primary);color:var(--ink-on-primary)}
.m-btn.p:hover:not(:disabled){filter:brightness(1.12)}
.m-btn.q{color:var(--subtle)}
.m-btn:disabled{opacity:.5;cursor:default}
.m-btn:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px}
.m-in{margin-top:10px;display:flex;gap:8px}
.m-in input,.m-in textarea{flex:1;font:inherit;font-size:var(--t-ui);padding:8px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface-2);color:var(--text);min-width:0;resize:none}
.m-in input:focus,.m-in textarea:focus{outline:none;border-color:var(--primary)}
.m-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-ui);font-weight:500;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--subtle);cursor:pointer;font-family:inherit}
.m-chip.on,.m-chip:hover{background:var(--primary-soft);border-color:transparent;color:var(--primary-hi);font-weight:600}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-meta{font-size:var(--t-meta);color:var(--muted)}
/* the wants card numbers its lines in the glyph column — small, muted, even */
[data-frwants] .m-row .gly.num{font-size:var(--t-meta);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;line-height:1.4}
.m-refno{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.m-card .answered{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--muted)}
.m-card .answered b{color:var(--text)}
.m-card .answered a{color:var(--primary-hi);text-decoration:none;margin-inline-start:8px;cursor:pointer}
.m-card .quiet{display:block;margin-top:10px;font-size:var(--t-meta);color:var(--muted);background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.m-card .quiet:hover{color:var(--text)}

/* A POST THAT DID NOT LAND SAYS SO ON THE CARD ITSELF. A card left
   disabled with the failure said somewhere else is a card that is stuck
   and does not know it — one line, in place, and the controls come back. */
.m-fail{margin-top:10px;font-size:var(--t-meta);color:var(--warn);line-height:1.5}

/* AN ANSWERED INTAKE CARD IS ONE LINE AFTER A RELOAD, not the question
   again. The label, then what he said. */
.fr-said{margin:8px 0;font-size:var(--t-meta);color:var(--subtle);line-height:1.6;
  padding-inline-start:16px;position:relative}
.fr-said::before{content:"";position:absolute;inset-inline-start:0;top:.56em;width:6px;height:6px;
  border-radius:2px;background:var(--line-strong)}
.fr-said .k{color:var(--muted);font-weight:600;margin-inline-end:6px}
.fr-said b{color:var(--text);font-weight:600}
.fr-said div+div{margin-top:2px}

/* THE OWN-WORDS LINE GROWS WITH THE ANSWER — about eight lines, then it
   scrolls. A one-line box for "say it in your own words" asks for a word. */
/* one line to start, no scroll arrows and no grip until it reaches its
   ceiling — autoGrow turns the scroll on only there */
/* AND NEVER SHORTER THAN ONE LINE — line-height + padding (8px x2) + border
   (1px x2). A box measured off the page used to sit at six pixels until it
   was clicked, with its placeholder cut in half (autoGrow, growHeight). */
.m-in textarea.grow{line-height:1.5;max-height:13.2em;overflow-y:hidden;resize:none;box-sizing:border-box;min-height:calc(1.5em + 18px)}
/* the button stays at the foot of a box that has grown */
.m-in:has(textarea.grow){align-items:flex-end}

/* "ASK ABOUT THIS…" — what he asked about a question, answered on the card */
.m-askw{margin-top:10px}
.m-askw .m-askin{margin-top:6px}
.m-asks{display:grid;gap:8px}
.m-askans{background:var(--surface-2);border-radius:var(--r-s);padding:6px 10px;font-size:var(--t-meta);color:var(--muted)}
.m-askans.wait{font-style:italic}
.m-askans .you{color:var(--subtle)}
.m-askans .src{color:var(--text);font-weight:500;margin-top:4px}
.m-askans blockquote{margin:4px 0;color:var(--text);font-style:italic}
.m-askans p{margin:4px 0;color:var(--text)}
.m-askans .whyask{margin-top:4px}
/* where a matter came from — its own small tap beside the name */
.m-mat .m-fromt{display:inline-grid;place-items:center;width:16px;height:16px;margin-inline-start:6px;border:1px solid var(--line);border-radius:50%;font-size:10px;line-height:1;color:var(--muted);vertical-align:1px;cursor:help}
.m-mat .m-fromt:hover,.m-mat .m-fromt:focus-visible{color:var(--text);border-color:var(--primary-hi);outline:none}
.m-mat .m-from{display:block;margin-top:3px;font-weight:400;font-size:var(--t-meta);color:var(--muted)}

/* A NEW BUILD IS ON THE SERVER. One quiet line at the foot of the chat,
   once per version — never a banner, never a card. */
.m-newver{margin:14px 0 4px;font-size:var(--t-meta);color:var(--muted);line-height:1.6}
.m-newver a{color:var(--primary-hi);text-decoration:none;cursor:pointer;margin-inline-start:6px}
.m-newver a:hover{text-decoration:underline}


/* ═══ WHAT IS THIS — a reference the papers cite, a guess, the matters as rows ═══ */
.m-quote{margin:0 0 10px;padding:8px 12px;background:var(--surface-2);border-radius:var(--r-s);color:var(--subtle);font-size:var(--t-meta);line-height:1.5;font-style:italic}
.m-quote b{font-style:normal;font-weight:600;color:var(--text);font-family:var(--font-mono);font-size:12px}
.m-guess{font-size:var(--t-meta);color:var(--subtle);margin:0 0 10px;line-height:1.5}
.m-guess b{color:var(--text);font-weight:600}
.m-mats{display:grid;gap:6px;margin:0 0 10px}
.m-mat{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);font-size:var(--t-ui);text-align:start;color:var(--text);cursor:pointer;font:inherit;transition:border-color .15s}
.m-mat:hover:not(:disabled){border-color:var(--primary-hi)}
.m-mat:disabled{opacity:.5;cursor:default}
.m-mat.lead{border-color:var(--primary-hi);box-shadow:inset 0 0 0 1px var(--primary-hi)}
.m-mat .l{font-weight:500}.m-mat .l i{font-style:normal;color:var(--primary-hi);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-inline-end:8px}
.m-mat .r{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.m-mat.alt{background:transparent;color:var(--subtle)}

/* ═══ THE PLACEMENT CARD'S OWN CONTROLS — step through the points, fold when done ═══ */
.m-place-nav{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;font-variant-numeric:tabular-nums}
.m-place-count{font-size:var(--t-label);color:var(--muted)}
.m-place-prev,.m-place-next{background:none;border:0;padding:0 2px;font:inherit;font-size:15px;line-height:1;color:var(--primary-hi);cursor:pointer}
.m-place-prev:hover:not(:disabled),.m-place-next:hover:not(:disabled){color:var(--text)}
.m-place-prev:disabled,.m-place-next:disabled{color:var(--line-strong);cursor:default}
.m-place-lines{display:grid;gap:0}
.m-place-line{font-size:var(--t-ui);color:var(--text);padding:8px 0;border-top:1px solid var(--line)}
.m-place-line:first-child{border-top:0;padding-top:0}
.m-place-line b{font-weight:600}
.m-place-line a{color:var(--primary-hi);text-decoration:none;margin-inline-start:8px;cursor:pointer}
.m-place-line a:hover{text-decoration:underline}

/* ═══ THE DOCUMENT ARRIVES — the drop target IS the paper card, from its first frame ═══
   (28 September: the fanning-sheet arrival is gone. A drop or a choice shows
   this exact card's Uploading/Reading state — the same .pcard, pc-row, and
   the 22px rd-g glyphs the reading itself finishes on; see cards.js.) */
@keyframes upBreathe{0%,100%{opacity:.26}50%{opacity:.44}} /* shared with .lw-add .ghost (Law Library) */
@keyframes upInk{to{stroke-dashoffset:0}} /* shared ink-write, used by many cards below (grep upInk) */
.pcard.updrop{cursor:pointer;border-style:dashed;border-color:var(--line-strong)}
.pcard.updrop.over{border-color:var(--primary-hi);background:var(--primary-soft)}
.pcard.updrop.dropped{cursor:default;border-style:solid;border-color:var(--line)}
/* one short line — "Drop it here, or upload" — the word a link (the whole card opens the dialog) */
.pcard.updrop .up-link{color:var(--primary-hi);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pcard.updrop.dropped .up-link{color:inherit;text-decoration:none;cursor:default}
/* THE UPLOAD GLYPH (30 September) — the work line's 22px style: a page open at
   the foot, an arrow rising into it, inked on the wkInk loop. It is the
   eyebrow of every upload card, and the drop target's glyph while it waits. */
.wg .g-upload .ink{stroke-dasharray:1;stroke-dashoffset:1;animation:wkInk 2.4s var(--ease) infinite}
.wg .g-upload .u1{animation-delay:0s}.wg .g-upload .u2{animation-delay:.35s}
.m-card .eyebrow .qg.wg{position:relative;width:22px;height:22px}
.m-card .eyebrow .qg.wg svg{position:static;display:block;width:22px;height:22px}
.m-card .eyebrow .qg.wg path,.m-card .eyebrow .qg.wg line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.m-card .eyebrow .qg.wg .g-upload .ink,.pcard .rd-g .g-upload .ink,.wg .g-upload .ink{animation:none!important;stroke-dashoffset:0!important}}

/* ═══ THE BATCH PLAN — the upload card's second state: the fan, the names, the order ═══ */
.bp-stage{position:relative;height:84px;margin:2px 0 8px}
.bp-pg{position:absolute;inset-inline-start:50%;top:14px;width:30px;height:38px;margin-inline-start:-15px;transform-origin:50% 120%;opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}
.bp-pg svg{width:30px;height:38px;display:block;overflow:visible}
.bp-pg path,.bp-pg line{fill:none;stroke:var(--primary-hi);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.bp-pg .body{fill:var(--bg)}
.bp-pg .ln{stroke:var(--subtle);stroke-dasharray:1;stroke-dashoffset:0}
.bp-pg .tick{stroke:var(--good);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:0}
.bpcard.play .bp-pg{animation:bpFan .5s var(--out) both;animation-delay:var(--dfan,0s)}
@keyframes bpFan{from{opacity:0;transform:translateY(16px) rotate(0)}to{opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}}
.bpcard.play .bp-pg .ln{animation:bpInk .3s var(--ease) both;animation-delay:var(--dink,0s)}
.bpcard.play .bp-pg .tick{animation:bpInk .28s var(--ease) both;animation-delay:var(--dtick,0s)}
/* while the identification is still running the page has no tick and its lines keep writing */
.bpcard.play .bp-pg.pending .tick{opacity:0}
.bpcard.play .bp-pg.pending .ln{animation:bpInkLoop 1.6s var(--ease) infinite;animation-delay:var(--dink,0s)}
@keyframes bpInk{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bpInkLoop{0%{stroke-dashoffset:1}40%{stroke-dashoffset:0}75%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.bp-intro{font-size:13.5px;color:var(--subtle);margin:0 0 10px;line-height:1.5}
.bp-intro b{color:var(--text);font-weight:600}
.bp-rows{display:grid;gap:0}
.bp-row{display:grid;grid-template-columns:14px 22px 1fr 22px;gap:10px;align-items:center;padding:7px 4px 7px 0;border-bottom:1px solid var(--line);border-radius:6px;font-size:var(--t-ui);cursor:grab;position:relative}
.bp-row:last-child{border-bottom:none}
.bp-row.dragging{opacity:.45}
.bp-row.over{box-shadow:inset 0 2px 0 var(--primary-hi)}
.bp-row .grip{width:10px;height:14px;background:radial-gradient(circle,var(--line-strong) 1.2px,transparent 1.4px) 0 0/5px 5px;opacity:.7}
.bp-row .n{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:10.5px;font-family:var(--font-mono);color:var(--muted);transition:border-color .3s,color .3s,background .3s}
.bpcard.play .bp-row .n{border-color:var(--primary-hi);color:var(--primary-hi)}
.bp-row .t{font-weight:500;color:var(--text)}
.bpcard.play .bp-row .t{animation:bpReveal .5s var(--ease) both;animation-delay:var(--dt,0s)}
@keyframes bpReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.bp-row .m{font-size:var(--t-meta);color:var(--muted);margin-top:1px}
.bpcard.play .bp-row .m{animation:bpFade .35s var(--ease) both;animation-delay:var(--dm,0s)}
@keyframes bpFade{from{opacity:0}to{opacity:1}}
.bp-row .m.ans{color:var(--good)}
.bp-row .x{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .15s;cursor:pointer;font-size:14px;line-height:1}
.bp-row:hover .x{opacity:.8}.bp-row .x:hover{opacity:1;color:var(--bad);background:var(--surface-2)}
.bp-row.gone{animation:bpGone .25s var(--ease) forwards}
@keyframes bpGone{to{opacity:0;transform:translateX(12px);height:0;padding:0;margin:0;overflow:hidden}}
.bp-foot{display:flex;align-items:center;gap:14px;margin-top:12px}
.bp-foot .m-btn{white-space:nowrap;flex:none}
.bpcard.play .bp-foot .m-btn{animation:bpBtn .45s var(--spring) both;animation-delay:var(--dbtn,0s)}
@keyframes bpBtn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bp-foot .hint{font-size:var(--t-meta);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.bpcard.play .bp-pg,.bpcard.play .bp-pg .ln,.bpcard.play .bp-pg .tick,.bpcard.play .bp-row .t,.bpcard.play .bp-row .m,.bpcard.play .bp-foot .m-btn{animation:none}.bpcard.play .bp-pg{opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}.bpcard.play .bp-pg .ln,.bpcard.play .bp-pg .tick{stroke-dashoffset:0}.bpcard.play .bp-row .t{clip-path:none}.bpcard.play .bp-row .m,.bpcard.play .bp-foot .m-btn{opacity:1;transform:none}}

/* ═══ THE WORKING LINE — the glyph of the job, drawing on a loop ═══ */
.m-work2{display:flex;align-items:center;gap:12px;font-size:var(--t-meta);color:var(--muted);min-height:26px;padding:10px 2px 4px}
.m-work2 .wg{position:relative;width:22px;height:22px;flex:none;color:var(--primary-hi)}
.m-work2 .wg svg{position:absolute;inset:0;width:22px;height:22px;display:none;overflow:visible}
.m-work2 .wg svg.on{display:block}
.m-work2 .wg path,.m-work2 .wg line,.m-work2 .wg circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-work2 .wg .ink{stroke-dasharray:1;stroke-dashoffset:1}
.m-work2 .wl{color:var(--subtle)}
.m-work2 .wl b{color:var(--text);font-weight:600}
.m-work2 .e{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums}
.m-work2.done .wg{color:var(--good)}
.m-work2.fade{animation:wkFade .6s var(--ease) forwards}
@keyframes wkFade{to{opacity:0}}
.wg .g-read .ink{animation:wkInk 2.4s var(--ease) infinite}
.wg .g-read .k1{animation-delay:0s}.wg .g-read .k2{animation-delay:.3s}.wg .g-read .k3{animation-delay:.6s}.wg .g-read .k4{animation-delay:.9s}
@keyframes wkInk{0%{stroke-dashoffset:1}25%{stroke-dashoffset:0}70%{stroke-dashoffset:0}85%{stroke-dashoffset:1}100%{stroke-dashoffset:1}}
.wg .g-xref .thread{animation:wkThread 2s var(--ease) infinite}
@keyframes wkThread{0%{stroke-dashoffset:1}40%{stroke-dashoffset:0}75%{stroke-dashoffset:0}90%{stroke-dashoffset:1}100%{stroke-dashoffset:1}}
.wg .g-review .beam{animation:wkBeam 1.8s linear infinite;stroke-width:2;stroke:var(--primary-hi)}
@keyframes wkBeam{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(13px);opacity:0}}
.wg .g-law .ink{animation:wkInk 2.6s var(--ease) infinite}
.wg .g-law .c1{animation-delay:0s}.wg .g-law .c2{animation-delay:.2s}.wg .g-law .c3{animation-delay:.4s}.wg .g-law .roof{animation-delay:.7s}
.wg .g-done .ink{animation:wkOnce .45s var(--ease) forwards}
@keyframes wkOnce{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.wg .ink,.wg .thread,.wg .beam{animation:none!important;stroke-dashoffset:0}}
/* ═══ UPKEEP ON ITS PILL — the pill it feeds wears the job’s glyph, tinted, while it runs ═══ */
.stat.working{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--text)}
.stat.working>svg{display:none}
.stat .pw{position:relative;display:inline-block;width:14px;height:14px;flex:none;color:var(--primary-hi)}
.stat .pw svg{position:absolute;inset:0;width:14px;height:14px;opacity:1;overflow:visible}
.stat .pw path,.stat .pw line,.stat .pw circle{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stat .pw .ink{stroke-dasharray:1;stroke-dashoffset:1}
:root[data-motion="reduced"] .stat .pw .ink,:root[data-motion="reduced"] .stat .pw .thread,:root[data-motion="reduced"] .stat .pw .beam{animation:none!important;stroke-dashoffset:0}

/* ═══ SOURCES, READABLE — the passage itself, evidence or law, under the answer ═══ */
.m-srcs{display:grid;gap:10px;margin-top:12px;max-width:600px}
.m-ex{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.m-ex .paper{background:var(--paper);color:var(--paper-ink);padding:12px 16px;font-family:var(--font-disp);font-size:13.5px;line-height:1.55;position:relative}
.m-ex .paper mark{background:rgba(53,67,240,.16);color:inherit;padding:0 2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m-ex .paper .ell{color:var(--paper-mute)}
.m-ex.law .paper{background:var(--paper-law);font-family:var(--font-body);font-size:13px}
.m-ex.law .paper .art{display:block;font-family:var(--font-disp);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-art);margin-bottom:4px}
.m-ex .cap{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:var(--t-meta);color:var(--muted);flex-wrap:wrap}
.m-ex .cap b{color:var(--text);font-weight:600}
.m-ex .cap .badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);background:var(--good-soft);color:var(--good)}
.m-ex .cap .badge.warn{background:var(--warn-soft);color:var(--warn)}
.m-ex .cap .badge.mute{background:var(--surface-2);color:var(--muted)}
.m-ex .cap a{margin-inline-start:auto;color:var(--primary-hi);text-decoration:none;font-weight:600;white-space:nowrap;cursor:pointer}
.m-ex.none .paper{font-family:var(--font-body);font-style:italic;color:var(--paper-mute);font-size:var(--t-meta)}

/* ═══ THE STAT TICKS — the header count is the notice ═══ */
.stat.tick{animation:statTick .6s var(--spring)}
@keyframes statTick{0%{box-shadow:0 0 0 0 rgba(107,123,245,0)}40%{box-shadow:0 0 0 6px rgba(107,123,245,.25);border-color:var(--primary-hi)}100%{box-shadow:0 0 0 0 rgba(107,123,245,0)}}
@keyframes bpBtnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ═══ AN EVENT LANDS — the node drops onto the thread ═══ */
.m-evt{position:relative;display:grid;grid-template-columns:18px 22px 1fr;gap:12px;align-items:center;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);max-width:520px}
.m-evt .gly{width:22px;height:22px;color:var(--primary-hi)}
.m-evt .gly svg{width:22px;height:22px;display:block;overflow:visible}
.m-evt .gly path,.m-evt .gly line,.m-evt .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-evt .gly .ink{stroke-dasharray:1;stroke-dashoffset:1}
.m-evt.play .gly .ink,.m-evt.still .gly .ink{animation:upInk .4s var(--ease) .3s both}
.m-evt.still .gly .ink{stroke-dashoffset:0;animation:none}
.m-evt.you .node{background:var(--warn)}
.m-evt .thr{position:relative;width:18px;height:40px}
.m-evt .thr::before{content:"";position:absolute;inset-inline-start:8px;top:-2px;bottom:-2px;width:1px;background:var(--line-strong)}
.m-evt .node{position:absolute;inset-inline-start:4px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--primary-hi);box-shadow:0 0 0 3px var(--bg);opacity:0;transform:translateY(-14px) scale(.6)}
.m-evt.play .node{animation:evtDrop .55s var(--spring) .1s forwards}
@keyframes evtDrop{to{opacity:1;transform:none}}
.m-evt .d{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.m-evt .t{font-size:var(--t-ui);font-weight:500;clip-path:inset(0 100% 0 0);color:var(--text)}
.m-evt.play .t{animation:bpReveal .5s var(--ease) .45s both}
.m-evt .s{font-size:var(--t-meta);color:var(--muted);opacity:0}
.m-evt.play .s{animation:bpFade .35s var(--ease) .9s both}
.m-evt .s b{color:var(--warn);font-weight:600}
.m-evt .go{position:absolute;inset-inline-end:10px;top:10px;font-size:var(--t-meta);color:var(--primary-hi);text-decoration:none;opacity:0;cursor:pointer}
.m-evt.play .go{animation:bpFade .35s var(--ease) 1.1s both}
.m-evt.still .node,.m-evt.still .s,.m-evt.still .go{opacity:1;transform:none;animation:none}
.m-evt.still .t{clip-path:none;animation:none}
@media (prefers-reduced-motion:reduce){.m-evt .node,.m-evt .t,.m-evt .s,.m-evt .go{animation:none!important;opacity:1;transform:none;clip-path:none}}

/* ═══ A CORRECTION REACHES THE RECORD — the old value struck, yours writes in, what rested on it flagged ═══ */
.m-corr{margin-top:12px;max-width:520px;display:flex;flex-direction:column;gap:6px}
.m-cr{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);opacity:0;transform:translateY(6px)}
.m-corr.play .m-cr.main{animation:corrIn .4s var(--ease) .1s both}
.m-corr.play .m-cr.dep{animation:corrIn .4s var(--ease) both;animation-delay:var(--dd,1.55s)}
@keyframes corrIn{to{opacity:1;transform:none}}
.m-cr .gl svg{width:22px;height:26px;display:block;overflow:visible}
.m-cr .gl path,.m-cr .gl line{fill:none;stroke:var(--primary-hi);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.m-cr .gl .pg{fill:var(--bg)}
.m-cr .gl .ln{stroke:var(--subtle)}
.m-cr .gl .pen{stroke:var(--warn);stroke-width:1.8;stroke-dasharray:13;stroke-dashoffset:13}
.m-corr.play .gl .pen{animation:upInk .4s var(--ease) .55s forwards}
.m-cr .d{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.m-cr .t{font-size:var(--t-ui);font-weight:500;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;color:var(--text)}
.m-cr .old{position:relative;color:var(--text)}
.m-cr .old::after{content:"";position:absolute;inset-inline-start:-2px;inset-inline-end:-2px;top:54%;height:1.5px;background:var(--warn);transform:scaleX(0);transform-origin:left}
.m-corr.play .old{animation:corrDim .3s var(--ease) .65s forwards}
@keyframes corrDim{to{color:var(--subtle)}}
.m-corr.play .old::after{animation:corrStrike .35s var(--ease) .55s forwards}
@keyframes corrStrike{to{transform:scaleX(1)}}
.m-cr .new{color:var(--text);clip-path:inset(0 100% 0 0)}
.m-corr.play .new{animation:bpReveal .45s var(--ease) .95s both}
.m-cr .s{font-size:var(--t-meta);color:var(--muted);position:relative;min-height:1.4em}
.m-cr .s .was{display:inline-block}
.m-cr .s .now{position:absolute;inset-inline-start:0;top:0;color:var(--warn);font-weight:600;opacity:0;white-space:nowrap}
.m-corr.play .s .was{animation:corrOut .3s var(--ease) 1.3s forwards}
.m-corr.play .s .now{animation:bpFade .35s var(--ease) 1.45s both}
@keyframes corrOut{to{opacity:0}}
.m-cr .go{position:absolute;inset-inline-end:10px;top:10px;font-size:var(--t-meta);color:var(--primary-hi);text-decoration:none;opacity:0;cursor:pointer}
.m-corr.play .go{animation:bpFade .35s var(--ease) 1.5s both}
.m-cr.dep{padding:8px 12px}
.m-cr.dep .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);justify-self:center;box-shadow:0 0 0 0 rgba(240,166,62,.5)}
.m-corr.play .m-cr.dep .dot{animation:corrPulse 1.4s var(--ease) 1.95s 2}
@keyframes corrPulse{0%{box-shadow:0 0 0 0 rgba(240,166,62,.55)}70%{box-shadow:0 0 0 8px rgba(240,166,62,0)}100%{box-shadow:0 0 0 0 rgba(240,166,62,0)}}
.m-cr.dep .t{font-size:var(--t-meta);font-weight:500;color:var(--text)}
.m-cr.dep .s{font-size:var(--t-meta);min-height:0}
.m-corr.still .m-cr{opacity:1;transform:none;animation:none}
.m-corr.still .old{color:var(--subtle)}.m-corr.still .old::after{transform:none}
.m-corr.still .new{clip-path:none}.m-corr.still .s .was{display:none}.m-corr.still .s .now{opacity:1;position:static}
.m-corr.still .go{opacity:1}.m-corr.still .gl .pen{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.m-corr .m-cr,.m-corr .gl .pen,.m-corr .old,.m-corr .new,.m-corr .s .now,.m-corr .go,.m-corr .dot{animation:none!important;opacity:1;transform:none;clip-path:none}.m-corr .old::after{animation:none!important;transform:none}.m-corr .old{color:var(--subtle)}.m-corr .s .was{display:none}}

/* ═══ THE JOURNAL — the note lifts out of the bubble and into the book ═══ */
.m-jr{position:relative;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);max-width:520px}
.m-jr .bk{position:relative;width:34px;height:40px}
.m-jr .bk svg{width:34px;height:40px;display:block;overflow:visible}
.m-jr .bk path,.m-jr .bk line{fill:none;stroke:var(--primary-hi);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.m-jr .bk .cover{fill:var(--bg)}
.m-jr .bk .ribbon{stroke:var(--warn);stroke-width:2}
.m-jr .bk .ln{stroke:var(--subtle);stroke-dasharray:1;stroke-dashoffset:1}
.m-jr.play .bk .ln{animation:upInk .35s var(--ease) forwards}
.m-jr.play .bk .n1{animation-delay:.75s}.m-jr.play .bk .n2{animation-delay:.9s}.m-jr.play .bk .n3{animation-delay:1.05s}
.m-jr .bk .page{transform-origin:6px 50%;transform:rotateY(0)}
.m-jr .bk .page .leaf{fill:var(--bg)}
.m-jr.play .bk .page{animation:jrFlip .5s var(--ease) .3s both}
@keyframes jrFlip{0%{transform:rotateY(0)}50%{transform:rotateY(-70deg)}100%{transform:rotateY(0)}}
.m-jr .t{font-size:var(--t-ui);font-weight:500;opacity:0;color:var(--text)}
.m-jr .m{font-size:var(--t-meta);color:var(--muted);margin-top:1px;opacity:0}
.m-jr .m b{color:var(--subtle);white-space:nowrap}
.m-jr.play .t{animation:bpFade .35s var(--ease) .9s both}
.m-jr.play .m{animation:bpFade .35s var(--ease) 1.1s both}
.m-jr .go{font-size:var(--t-meta);color:var(--primary-hi);text-decoration:none;white-space:nowrap;opacity:0;cursor:pointer}
.m-jr.play .go{animation:bpFade .35s var(--ease) 1.3s both}
.m-jr.still .t,.m-jr.still .m,.m-jr.still .go{opacity:1;animation:none}.m-jr.still .bk .ln{stroke-dashoffset:0}
.m-fly{position:fixed;z-index:50;pointer-events:none;font-size:15px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);padding:6px 10px;border-radius:10px;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:0 0}
@media (prefers-reduced-motion:reduce){.m-jr .t,.m-jr .m,.m-jr .go{opacity:1;animation:none!important}.m-jr .bk .ln{stroke-dashoffset:0;animation:none!important}.m-jr .bk .page{animation:none!important}}
.jr-list{display:grid;gap:10px}
.jr-note{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.jr-note .m{font-size:var(--t-meta);color:var(--muted);margin-bottom:4px}

/* ═══ WHAT TO DO NOW — the list assembles itself, heaviest first ═══ */
.m-todo{display:grid;gap:6px;margin-top:10px;max-width:560px}
.m-ti{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);opacity:0;transform:translateY(8px);position:relative;overflow:hidden}
.m-todo.play .m-ti{animation:bpBtn .45s var(--out) both;animation-delay:var(--di,0s)}
.m-ti .w{position:absolute;inset-inline-start:0;bottom:0;height:2px;background:var(--primary-hi);opacity:.55;width:0}
.m-todo.play .m-ti .w{animation:tdWeight .6s var(--ease) both;animation-delay:var(--dw,0s)}
@keyframes tdWeight{from{width:0}to{width:var(--wt)}}
.m-ti .g{width:22px;height:22px;color:var(--primary-hi);margin-top:1px}
.m-ti .g svg{width:22px;height:22px;display:block;overflow:visible}
.m-ti .g path,.m-ti .g line,.m-ti .g circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-ti .g .ink{stroke-dasharray:1;stroke-dashoffset:1;animation-delay:var(--d,0s)}
.m-todo.play .m-ti .g .ink{animation:upInk .4s var(--ease) both;animation-delay:var(--d,0s)}
.m-ti.warn .g{color:var(--warn)}
.m-ti .t{font-size:var(--t-ui);font-weight:600;color:var(--text)}
.m-ti .t i{font-style:normal;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--warn);margin-inline-end:8px}
.m-ti .why{font-size:var(--t-meta);color:var(--muted);margin-top:2px;line-height:1.45}
.m-ti .go{font-size:var(--t-meta);color:var(--primary-hi);text-decoration:none;margin-top:4px;display:inline-block;cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.m-tfoot{font-size:var(--t-meta);color:var(--muted);margin-top:8px;opacity:0}
.m-todo.play .m-tfoot{animation:bpFade .4s var(--ease) both;animation-delay:var(--df,1.5s)}
.m-todo.still .m-ti{opacity:1;transform:none;animation:none}
.m-todo.still .m-ti .w{width:var(--wt)}
.m-todo.still .m-ti .g .ink{stroke-dashoffset:0}
.m-todo.still .m-tfoot{opacity:1}
@media (prefers-reduced-motion:reduce){.m-ti,.m-tfoot{opacity:1!important;transform:none!important;animation:none!important}.m-ti .w{width:var(--wt)!important;animation:none!important}.m-ti .g .ink{stroke-dashoffset:0!important;animation:none!important}}

/* ═══ THE ARGUMENT ROW — one word in a fixed slot ═══ */
.argrow-h .arg-label{flex:1;min-width:0}
.arg-sup{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--good);width:136px;text-align:end;white-space:nowrap;flex:none}
.arg-sup.part{color:var(--subtle)}
.arg-sup.warn{color:var(--warn)}
.arg-law{font-size:var(--t-meta);color:var(--muted);display:block;margin-top:1px;font-weight:400}

/* ═══ THE CASE LINE — the greeting, and the line it folds into ═══ */
.cl-greet{position:relative;display:grid;gap:10px;padding:34px 0 22px;margin-bottom:14px;border-bottom:1px solid var(--line);max-width:640px;text-align:start}
.cl-greet.folded{display:none}
.cl-eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.cl-eyebrow .mk{width:18px;height:18px;color:var(--primary-hi);flex:none}
.cl-eyebrow .mk svg{width:18px;height:18px;display:block;overflow:visible}
.cl-eyebrow .mk use{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:26;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.cl-eyebrow .mk.drawn use{animation:clMark .6s var(--ease) forwards, clFill .26s var(--ease) .62s forwards}
.cl-eyebrow .mk.drawn use:nth-child(2){animation-delay:.12s,.74s}
@keyframes clMark{to{stroke-dashoffset:0}}
@keyframes clFill{to{fill-opacity:1;stroke-opacity:0}}
.cl-eyebrow .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.cl-name{font-family:var(--font-disp);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.012em;margin:0;text-wrap:balance;color:var(--text)}
.cl-line{font-family:var(--font-disp);font-style:italic;font-weight:400;font-size:22px;line-height:1.35;letter-spacing:-.005em;margin:0;max-width:30ch;text-wrap:balance;transform-origin:0 0;color:var(--text)}
.cl-line b{font-style:normal;font-weight:500}
.cl-since{display:grid;gap:5px;margin:4px 0 2px;position:relative;padding-inline-start:26px}
.cl-since .k{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:2px}
.cl-since a{display:flex;align-items:center;gap:10px;font-size:var(--t-ui);color:var(--text);text-decoration:none;position:relative;cursor:pointer}
.cl-since a .ar{color:var(--muted);font-family:var(--font-mono);font-size:11px;margin-inline-start:auto;white-space:nowrap}
.cl-since a:hover .ar{color:var(--primary-hi)}
.cl-since .thread{position:absolute;inset-inline-start:6px;top:22px;bottom:6px;width:1px;background:var(--line-strong);transform:scaleY(0);transform-origin:0 0}
.cl-since.on .thread{animation:threadDown .7s var(--ease) .15s forwards}
@keyframes threadDown{to{transform:scaleY(1)}}
.cl-since a .clg{position:absolute;inset-inline-start:-26px;top:0;color:var(--subtle);background:var(--bg);padding:1px 0}
.cl-act{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.cl-btn{position:relative;font:inherit;font-size:var(--t-ui);font-weight:600;padding:9px 14px;border-radius:var(--r-s);border:1px solid var(--primary);background:var(--primary);color:var(--ink-on-primary);cursor:pointer;transform-origin:0 50%}
.cl-btn .ul{position:absolute;inset-inline-start:10px;inset-inline-end:10px;bottom:5px;height:1px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:0 50%}
.cl-btn.q{background:transparent;border-color:var(--line-strong);color:var(--subtle)}
.cl-act .why{font-size:var(--t-meta);color:var(--muted)}
.cl-privacy{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-top:-2px;flex-wrap:wrap}
.cl-privacy .clg{color:var(--primary-hi)}
/* the glyphs: drawn, not faded */
.clg{display:inline-block;vertical-align:middle;overflow:visible;flex:none;width:16px;height:16px}
.clg path,.clg circle,.clg line,.clg rect{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.clg .ink{stroke-dasharray:1;stroke-dashoffset:1}
.clg.drawn .ink{animation:clInk .7s var(--ease) forwards}
@keyframes clInk{to{stroke-dashoffset:0}}
.clg .w1{animation-delay:.45s}.clg .w2{animation-delay:.6s}.clg .w3{animation-delay:.75s}.clg .w4{animation-delay:.9s}
.clg.dial .hand{transform-origin:12px 12px;transform:rotate(-90deg)}
.clg.dial.sweep .hand{animation:clSweep 1.1s var(--out) forwards}
@keyframes clSweep{to{transform:rotate(var(--deg,120deg))}}
.cl-count{font-variant-numeric:tabular-nums;display:inline-block;min-width:1.2em}
/* the redaction bar: a name is shown, then covered, then named by its role */
/* THE TAG IS WIDER THAN THE NAME IT COVERS. The span was sized by the name
   and the tag was absolutely positioned inside it, so [OTHER_PARTY] ran out
   past its own box and over the comma after it — the line read "[CLIENT]
   , [OTHER_PARTY][CHILD] .". Both sit in one grid cell now, so the box is as
   wide as the wider of the two and the punctuation stays where it belongs.
   The bar still covers the whole box, and neither one moves as they swap. */
.cl-redact{position:relative;display:inline-grid;grid-template-areas:"r";align-items:baseline;white-space:nowrap;font-style:normal;vertical-align:baseline}
.cl-redact .nm,.cl-redact .tag{grid-area:r;justify-self:start}
/* the name lets go of its width when the tag lands, or the box stays as wide
   as the name was and the comma after it sits in a hole */
.cl-redact .nm{transition:opacity .2s;display:inline-block;overflow:hidden;max-width:40em}
.cl-redact .bar{position:absolute;inset-inline-start:-2px;inset-inline-end:-2px;top:2px;bottom:1px;background:var(--text);border-radius:2px;transform:scaleX(0);transform-origin:0 50%}
.cl-redact .tag{font-family:var(--font-mono);font-size:.78em;letter-spacing:.04em;color:var(--primary-hi);opacity:0;white-space:nowrap;font-style:normal}
.cl-redact.on .bar{animation:clBarIn .45s var(--ease) .1s forwards, clBarOut .35s var(--ease) 1.05s forwards}
.cl-redact.on .nm{animation:clNmOut .2s .5s forwards, clNmGone .25s var(--ease) 1.05s forwards}
.cl-redact.on .tag{animation:clTagIn .3s var(--ease) 1.1s forwards}
@keyframes clBarIn{to{transform:scaleX(1)}}
@keyframes clNmOut{to{opacity:0}}
@keyframes clNmGone{to{max-width:0}}
@keyframes clBarOut{to{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes clTagIn{to{opacity:1}}
/* the case line itself */
.caseline{display:flex;align-items:center;gap:10px;font-size:var(--t-meta);color:var(--muted);padding:0;margin:-26px 0 0;border-bottom:0;height:0;overflow:hidden;opacity:0;transform:translateY(-6px);flex-wrap:wrap}
.caseline.on{opacity:1;transform:none;height:auto;overflow:visible;padding:10px 0 12px;margin:0 0 14px;border-bottom:1px solid var(--line);transition:opacity .35s var(--ease) .2s,transform .35s var(--out) .2s}
.caseline .d{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.caseline b{color:var(--subtle);font-weight:600}
.caseline a{margin-inline-start:auto;color:var(--primary-hi);text-decoration:none;font-weight:600;white-space:nowrap;cursor:pointer}
.caseline .sep{color:var(--line-strong)}
.stack{position:relative;width:16px;height:16px;flex:none}
.stack i{position:absolute;inset-inline-start:3px;top:0;width:9px;height:12px;border:1.2px solid var(--subtle);border-radius:1.5px;background:var(--bg);transform-origin:50% 100%}
.stack i:nth-child(2){transform:rotate(-9deg) translateX(-2px)}.stack i:nth-child(3){transform:rotate(9deg) translateX(2px)}
.stack.fan i:nth-child(2){animation:fanL .5s var(--spring) both}.stack.fan i:nth-child(3){animation:fanR .5s var(--spring) both}
@keyframes fanL{from{transform:none}to{transform:rotate(-9deg) translateX(-2px)}}
@keyframes fanR{from{transform:none}to{transform:rotate(9deg) translateX(2px)}}
/* arrival: everything waits for its turn, then rises */
.cl-greet.pre .cl-eyebrow,.cl-greet.pre .cl-name,.cl-greet.pre .cl-line,.cl-greet.pre .cl-since,.cl-greet.pre .cl-act,.cl-greet.pre .cl-privacy{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){.cl-greet.pre .cl-eyebrow,.cl-greet.pre .cl-name,.cl-greet.pre .cl-line,.cl-greet.pre .cl-since,.cl-greet.pre .cl-act,.cl-greet.pre .cl-privacy{opacity:1;transform:none}.cl-eyebrow .mk use{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}.clg .ink{stroke-dashoffset:0}.cl-redact .nm{opacity:0;max-width:0}.cl-redact .tag{opacity:1}.caseline{opacity:1;transform:none}}

/* ═══ THE TIMELINE PAGE — the spine outside, the date beside it, one node per act ═══ */
.tlp{max-width:760px;position:relative}
.tlp .tools{display:flex;align-items:center;gap:10px;margin:12px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tlp .tools .sp{flex:1}
.tlp .tlfmt{background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);padding:6px 8px;border-radius:var(--r-s)}
.tlp .tlfmt:hover{color:var(--text);background:var(--surface)}
.tlp .list{position:relative}
.tlp .list::before{content:"";position:absolute;inset-inline-start:84px;top:0;bottom:0;width:1px;background:var(--line-strong)}
.tlp .yr{font-family:var(--font-disp);font-weight:500;font-size:22px;margin:18px 0 6px;color:var(--text);opacity:0;position:relative}
.tlp.play .yr{animation:bpFade .4s var(--ease) both;animation-delay:var(--dy)}
.tlp .mo{display:grid;grid-template-columns:64px 18px 1fr;gap:0 12px;align-items:center;margin:6px 0 6px;opacity:0}
.tlp .mo .d{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);text-align:end}
.tlp.play .mo{animation:bpFade .4s var(--ease) both;animation-delay:var(--dy)}
.tlp .row{display:grid;grid-template-columns:64px 18px 1fr;gap:0 12px;align-items:stretch;margin:0 0 8px;opacity:0;transform:translateY(6px)}
.tlp .row .d{font-size:var(--t-meta);color:var(--subtle);text-align:end;font-variant-numeric:tabular-nums;padding-top:13px;white-space:nowrap}
.tlp .row .spine{position:relative;width:18px}
.tlp .row .node{position:absolute;inset-inline-start:4px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--primary-hi);box-shadow:0 0 0 3px var(--bg);opacity:0;transform:translateY(-14px) scale(.6)}
.tlp .row.recorded .node{background:transparent;border:1.5px solid var(--primary-hi)}
.tlp .row.you .node{background:var(--warn)}
.tlp .row.gap .node{background:transparent;border:1.5px dashed var(--line-strong)}
.tlp .row .m-evt{margin:0;max-width:none;grid-template-columns:22px 1fr auto;align-items:center}
.tlp .row .m-evt .t{font-weight:600}
.tlp .row .m-evt[data-tlsrc],.tlp .row .m-evt[data-tlget],.tlp .row .m-evt[data-tlre]{cursor:pointer}
.tlp .row .m-evt[data-tlsrc]:hover,.tlp .row .m-evt[data-tlget]:hover,.tlp .row .m-evt[data-tlre]:hover{border-color:var(--line-strong)}
/* the row answers where it stands — opened, it is a conversation, so the glyph
   and the thumbnail sit at the top rather than floating in the middle of it */
.tlp .row.open .m-evt{align-items:start}
.tlp .row .m-evt .s .re{margin-inline-start:10px;color:var(--primary-hi);text-decoration:none;font-weight:600;opacity:0;transition:opacity .15s;cursor:pointer}
.tlp .row .m-evt:hover .s .re,.tlp .row.open .s .re,.tlp .row .m-evt:focus-visible .s .re{opacity:1}
.tlp .row .m-evt .cm-thread,.tlp .row .m-evt .cm-reply{cursor:auto}
.tlp .row .m-evt .gly{width:22px;height:22px;color:var(--primary-hi)}
.tlp .row .m-evt .gly svg{width:22px;height:22px;display:block;overflow:visible}
.tlp .row .m-evt .gly path,.tlp .row .m-evt .gly line,.tlp .row .m-evt .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tlp .row .m-evt .gly .ink{stroke-dasharray:1;stroke-dashoffset:1}
.tlp.play .row .m-evt .gly .ink{animation:upInk .4s var(--ease) both;animation-delay:var(--dg)}
.tlp .row .m-evt img.th{width:40px;height:52px;object-fit:cover;object-position:top;border-radius:3px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.3);align-self:center;opacity:0;transition:opacity .3s}
.tlp .row .m-evt img.th.big{width:60px;height:78px}
.tlp .row .m-evt img.th.loaded{opacity:1}
.tlp .row .m-evt .fold{display:inline-block;margin-top:5px;font-size:var(--t-meta);color:var(--primary-hi);background:none;border:0;padding:0;cursor:pointer;font-family:inherit;opacity:0}
.tlp.play .row .m-evt .fold{animation:bpFade .35s var(--ease) both;animation-delay:var(--ds)}
.tlp .row .m-evt .fold::after{content:" ›";display:inline-block;transition:transform .2s}
.tlp .row .m-evt.open .fold::after{transform:rotate(90deg)}
.tlp .row.you .m-evt .s b{color:var(--warn)}
/* the one line in a recorded row that is a way in: the paper it still waits for */
.tlp .row .m-evt .s a.get{color:var(--primary-hi);text-decoration:none;cursor:pointer}
.tlp .row .m-evt .s a.get:hover{text-decoration:underline}
.tlp .row.flagged .m-evt .gly{color:var(--warn)}
/* a paper the case is waiting for: hollow — hatched, dashed, no fill — so a hole in the story never reads as story */
.tlp .row.gap .m-evt{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.035) 7px 9px);border-style:dashed;border-color:var(--line-strong)}
html[data-theme="light"] .tlp .row.gap .m-evt{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(12,35,64,.05) 7px 9px)}
.tlp .row.gap .m-evt .t{color:var(--subtle);font-weight:500}
.tlp .row.gap .m-evt .gly{color:var(--muted)}
.tlp .row .m-evt .up{display:inline-block;margin-inline-start:8px;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--primary-hi);background:var(--primary-soft);padding:2px 7px;border-radius:var(--r-pill);vertical-align:1px}
.tlp .decided{display:none;margin:-2px 0 12px 148px}
.tlp .decided.on{display:grid}
.tlp .decided .m-ex{animation:mcIn .35s var(--out) both}
.tlp .decided .m-ex .cap a{cursor:pointer}
/* arrival: the nodes drop down the spine, the titles write in, one after another */
.tlp.play .row{animation:corrIn .4s var(--ease) both;animation-delay:var(--di)}
.tlp.play .row .node{animation:evtDrop .55s var(--spring) both;animation-delay:var(--dn)}
.tlp.play .row .m-evt .t{animation:bpReveal .5s var(--ease) both;animation-delay:var(--dt)}
.tlp.play .row .m-evt .s{animation:bpFade .35s var(--ease) both;animation-delay:var(--ds)}
/* a filter redraws still: the end state, no motion */
.tlp.still .yr,.tlp.still .mo,.tlp.still .row,.tlp.still .row .node,.tlp.still .m-evt .s,.tlp.still .m-evt .fold{opacity:1;transform:none;animation:none}
.tlp.still .m-evt .t{clip-path:none;animation:none}
.tlp.still .m-evt .gly .ink{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.tlp .yr,.tlp .mo,.tlp .row,.tlp .row .node,.tlp .m-evt .t,.tlp .m-evt .s,.tlp .m-evt .fold,.tlp .m-evt .gly .ink{animation:none!important;opacity:1;transform:none;clip-path:none;stroke-dashoffset:0}}
@media (max-width:640px){.tlp .row,.tlp .mo{grid-template-columns:44px 18px 1fr;gap:0 8px}.tlp .list::before{inset-inline-start:60px}.tlp .decided{margin-inline-start:0}}


/* ═══ THE EVIDENCE PAGE — the tiles, and beside them what the case is still waiting for ═══ */
.evp-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin-top:4px}
@media (max-width:1100px){.evp-cols{grid-template-columns:1fr}}
.evp-held{min-width:0}
#evFilters{margin-bottom:4px}
#evFilters:empty{display:none}
/* forces a wrap inside the flex chip strip — one group of chips per line, same break the timeline gets for free from a block parent */
.evp-sep{flex-basis:100%;width:0;height:0}
.sech{display:flex;align-items:baseline;gap:10px;margin:18px 0 10px;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.sech .d{flex:1;font-weight:500;letter-spacing:0;text-transform:none;font-size:var(--t-meta)}
.sech .n{font-family:var(--font-mono);font-size:11px;font-weight:500}
.evp-why{margin:-4px 0 10px}
/* a paper the case waits for looks the same everywhere: hatched, dashed, no fill */
.m-gap{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-s);background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.035) 7px 9px);margin-bottom:8px;cursor:pointer;transition:border-color .15s}
html[data-theme="light"] .m-gap{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(12,35,64,.05) 7px 9px)}
.m-gap:hover,.m-gap:focus-visible{border-color:var(--primary-hi);outline:none}
.m-gap .gly{width:18px;height:18px;color:var(--muted);display:inline-block}
.m-gap .gly svg{width:18px;height:18px;display:block;overflow:visible}
.m-gap .gly path,.m-gap .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-gap .t{font-size:var(--t-meta);font-weight:500;color:var(--subtle);line-height:1.4}
.m-gap .s{font-size:11.5px;color:var(--muted);margin-top:1px}
.m-gap .up{display:inline-block;margin-inline-start:8px;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--primary-hi);background:var(--primary-soft);padding:2px 7px;border-radius:var(--r-pill);vertical-align:1px}
.evp-all{color:var(--primary-hi);text-decoration:none;font-weight:600}
.evp-all:hover{text-decoration:underline}
.stat .tofind{font-style:normal;color:var(--muted);font-size:11px;margin-inline-start:4px;font-weight:500}
.evc:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px}

/* ═══ THE DOCUMENT, OPEN — one slim title bar; the reading pane as prose, lines, paper ═══ */
.wsmeta{font-size:var(--t-meta);color:var(--muted);white-space:nowrap;margin-inline-start:8px}
.ana .m-row{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);font-size:var(--t-ui)}
.ana .m-row:last-child{border-bottom:none}
.ana .m-row.go{cursor:pointer}
.ana .m-row.go:hover .t{color:var(--primary-hi)}
.ana .m-row .t{font-weight:500;font-size:var(--t-meta);line-height:1.4}
.ana .m-row .m{color:var(--muted);font-size:11.5px;margin-top:1px}
.ana .m-row .r{color:var(--primary-hi)}
.ana .gly{width:18px;height:18px;color:var(--primary-hi);display:inline-block}
.ana .gly svg{width:18px;height:18px;display:block;overflow:visible}
.ana .gly path,.ana .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ana .m-srcs{max-width:none;margin-top:8px}
.ana .m-ex .paper{font-size:12.5px;padding:10px 14px}
.ana .m-ex .cap a{cursor:pointer}
.ana .wsmore{cursor:pointer;padding:8px 2px}
.ana .wsmore:hover{color:var(--text)}
.ana .warnline{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:var(--t-meta);color:var(--subtle);padding:6px 2px;line-height:1.5}
.ana .warnline .gly{color:var(--warn);margin-top:1px}
/* a fact in the document */
.wsfacts-h{margin:0 0 6px}
.wsfacts{display:grid}
.m-fact{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:10px 2px 10px 12px;border-bottom:1px solid var(--line);position:relative;cursor:pointer;margin-inline-start:-12px}
.m-fact:last-child{border-bottom:none}
.m-fact .who{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);grid-column:1/-1}
.m-fact .who.court{color:var(--primary-hi)}
.m-fact .who.you{color:var(--warn)}
.m-fact .t{font-size:var(--t-ui);font-weight:500;line-height:1.45}
.m-fact .s{font-size:var(--t-meta);color:var(--muted);grid-column:1/-1;line-height:1.5}
.m-fact .s b{color:var(--text);font-weight:600}
.m-fact .p{font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap;padding-top:2px}
.m-fact .s .re{margin-inline-start:10px;color:var(--primary-hi);text-decoration:none;font-weight:600;opacity:0;transition:opacity .15s;cursor:pointer}
.m-fact:hover .s .re,.m-fact.on .s .re,.m-fact.fixing .s .re,.m-fact:focus-visible .s .re{opacity:1}
.m-fact.on,.m-fact.fixing{background:var(--primary-soft)}
.m-fact.on .t{color:var(--primary-hi)}
.m-fact.fixing{background:var(--primary-soft)}
.m-fact:focus-visible{outline:2px solid var(--primary-hi);outline-offset:-2px}

/* the Evidence page is a gallery, not a column of prose: it takes the width the chat does not need */
#v-evidence .maxw{max-width:1360px}
#v-evidence .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.evp-cols{grid-template-columns:minmax(0,1fr) 320px}
/* what the case needs stays in view while you scroll what it has */
.evp-wait{position:sticky;top:0;max-height:calc(100vh - 72px);overflow:auto;padding-bottom:12px}


/* ═══ FINDINGS — one row per thing the record cannot both be; open, it is the paper ═══ */
#findFilters:empty{display:none}
#findFilters{margin-bottom:6px}
.fd-list{margin-top:14px}
.fd-row{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:12px 2px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(6px);cursor:pointer;position:relative}
.fdp.play .fd-row{animation:corrIn .4s var(--ease) both;animation-delay:var(--d)}
.fdp.still .fd-row{opacity:1;transform:none;animation:none}
.fd-row:last-child{border-bottom:none}
.fd-row:focus-visible{outline:2px solid var(--primary-hi);outline-offset:-2px}
.fd-row .gly{width:18px;height:18px;color:var(--primary-hi);margin-top:2px;display:inline-block}
.fd-row .gly svg{width:18px;height:18px;display:block;overflow:visible}
.fd-row .gly path,.fd-row .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fd-row .t{font-size:var(--t-ui);font-weight:500;line-height:1.5}
.fd-row .s{font-size:var(--t-meta);color:var(--muted);margin-top:3px;line-height:1.5}
.fd-row .s b{color:var(--text);font-weight:600}
.fd-row .s .re{margin-inline-start:10px;color:var(--primary-hi);text-decoration:none;font-weight:600;opacity:0;transition:opacity .15s}
.fd-row:hover .s .re,.fd-row.open .s .re,.fd-row:focus-visible .s .re{opacity:1}
.fd-row .m-srcs{margin-top:10px;max-width:none;cursor:default}
.fd-row .m-ex .paper{font-size:12.5px;padding:10px 14px}
.fd-row .m-ex.none .paper{color:#8a8f9e}
.fd-row .m-ex .cap a{cursor:pointer}
.fd-row.open{background:var(--surface);margin:0 -12px;padding:12px 14px;border-radius:var(--r-s);border-bottom-color:transparent}
.fd-row.dim .t{color:var(--subtle);font-weight:400}
.fd-row.dim .gly{color:var(--muted)}
.fd-row.settled .gly{color:var(--warn)}
.fd-row.settled .eyebrow{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--warn);margin-bottom:3px}
.fd-row.settled .t{color:var(--subtle);font-weight:400}
.fd-row.settled .ans{font-size:var(--t-meta);color:var(--text);margin-top:4px;line-height:1.5}
.fd-row.settled .ans::before{content:"\201C";color:var(--warn)}
.fd-row.settled .ans::after{content:"\201D";color:var(--warn)}
@media (prefers-reduced-motion:reduce){.fd-row{animation:none!important;opacity:1;transform:none}}


/* ═══ LAWS — the shelf ═══ */
#v-laws .maxw{max-width:1360px}
.lw-add{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;border:1.5px dashed var(--line-strong);border-radius:var(--r-m);padding:12px 16px;background:var(--surface-2);margin:8px 0 18px;transition:border-color .2s}
.lw-add.over{border-color:var(--primary-hi)}
.lw-add .ghost{cursor:pointer}
.lw-add .ghost svg{width:30px;height:38px;display:block;opacity:.45;animation:upBreathe 2.6s ease-in-out infinite}
.lw-add .ghost path{fill:none;stroke:var(--primary-hi);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lw-add .t{font-size:var(--t-ui);font-weight:600}
.lw-add .s{font-size:var(--t-meta);color:var(--muted);line-height:1.45;margin-top:2px}
.lw-add .m-in{margin:0;min-width:300px}
.lw-add .m-in input{flex:1}
#lawFilters:empty{display:none}
#lawFilters{margin-bottom:12px}
.lw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lw-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;opacity:0;transform:translateY(8px);animation:bpBtn .45s var(--out) both;animation-delay:var(--d)}
.lw-tile:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.lw-tile:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px}
/* the plate: which law this is, the way a lawyer would check */
.lw-tile .plate{position:relative;background:#fbfaf7;color:#1c1f2e;padding:14px 14px 30px;height:118px;overflow:hidden;border-bottom:1px solid var(--line)}
.lw-tile .plate .pt{font-family:var(--font-disp);font-size:15px;line-height:1.3;font-weight:500;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lw-tile .plate .pn{font-family:var(--font-mono);font-size:10.5px;color:#5a5f70;margin-top:6px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-tile .plate .st{position:absolute;inset-inline-start:14px;bottom:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#5a5f70}
.lw-tile .plate .st.ok{color:#1f9d5b}
.lw-tile .plate .st.gap{color:#b9761c}
.lw-tile .b{height:80px;padding:10px 12px 12px;font-size:var(--t-meta);color:var(--muted);line-height:1.45;display:flex;flex-direction:column;gap:6px}
.lw-tile .b .r b{color:var(--text);font-weight:600}
.lw-tile .b .ind{display:flex;gap:10px;align-items:center;min-height:18px}
.lw-tile .b .ind .i{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);cursor:default}
.lw-tile .b .ind .i svg{width:15px;height:15px;display:block;overflow:visible}
.lw-tile .b .ind .i path,.lw-tile .b .ind .i circle{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lw-tile .b .ind .i.warn{color:var(--warn)}
.lw-tile .b .ind .i b{font-weight:600;color:inherit}
.lw-tile .b .ways{display:flex;gap:6px;margin-top:auto}
.lw-tile .b .ways .wy{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--subtle);text-decoration:none;font-size:11px;font-weight:600}
.lw-tile .b .ways .wy svg{width:13px;height:13px;display:block;overflow:visible}
.lw-tile .b .ways .wy path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lw-tile .b .ways .wy span{display:none}
.lw-tile .b .ways .wy:hover{color:var(--primary-hi);border-color:var(--primary-hi)}
.lw-tile .b .ways .wy:hover span{display:inline}
.lw-tile .b .ways .wy.busy{opacity:.5;pointer-events:none}
/* a law not held is hollow: the shape a missing paper has everywhere */
.lw-tile.hollow{border:1px dashed var(--line-strong);background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.035) 7px 9px)}
html[data-theme="light"] .lw-tile.hollow{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(12,35,64,.05) 7px 9px)}
.lw-tile.hollow .plate{background:transparent;color:var(--subtle);border-bottom:1px dashed var(--line-strong)}
.lw-tile.hollow .plate::before{background:var(--line-strong)}
.lw-tile.hollow .plate .pn{color:var(--muted)}
.lw-tile.hollow .plate .st.gap{color:var(--warn)}
/* the header stat: the dot when a law the papers rest on could not be got */
.stat .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);margin-inline-start:2px;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .4s var(--spring)}
.stat.flag{border-color:rgba(240,166,62,.7)}
.stat.flag .dot{opacity:1;transform:none;animation:corrPulse 1.6s var(--ease) .3s 3}
@media (prefers-reduced-motion:reduce){.lw-tile{animation:none!important;opacity:1;transform:none}.lw-add .ghost svg{animation:none}}

/* ═══ THE LAW, OPEN — three panes, one slim title bar ═══ */
.wsov .wshead{gap:10px;padding:10px 14px}
.wsov .wshead .wstitle{font-size:14px;font-weight:600;max-width:40%}
.wsov .wshead .wsmat .m-chip.sm{padding:2px 8px;font-size:11px;font-family:var(--font-mono);font-weight:500}
.wsov .wshead .wsmeta{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.wsov .wshead .wsmeta.gap{color:var(--warn)}
.wsov .wsleft{width:34%;min-width:300px}
.wsov .wsright{flex:1;overflow-y:auto;padding:16px 20px;min-width:0}
.lwchat{width:360px;flex:none;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--ground)}
.lwchat .wsmsgs{flex:1;overflow-y:auto;padding:14px 14px 6px}
.lwchat .wsc-go{display:flex;gap:8px;align-items:flex-end;padding:8px 10px 12px;border-top:1px solid var(--line)}
.lwchat textarea{flex:1;resize:none;font:inherit;font-size:var(--t-ui);padding:9px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface-2);color:var(--text);max-height:200px}
.lwchat .wsaim{margin:0 10px 6px}
.lwchat .msg.u .uq{font-size:11.5px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:3px 8px;margin-bottom:4px}
@media (max-width:1100px){.lwchat{display:none}}
#lwRight .wssum{font-size:var(--t-ui)}
#lwRight .hl{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:18px 0 4px}
#lwRight .m-row{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;padding:10px 2px;border-bottom:1px solid var(--line);font-size:var(--t-ui);border-radius:0;margin:0}
#lwRight .m-row:last-child{border-bottom:none}
#lwRight .m-row.go{cursor:pointer}
#lwRight .m-row.go:hover .t{color:var(--primary-hi)}
#lwRight .m-row .t{font-weight:500;font-size:var(--t-meta);line-height:1.45}
#lwRight .m-row .m{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.5}
#lwRight .m-row .m b{font-weight:600;color:var(--text)}
#lwRight .m-row .m b.ok{color:var(--good)}
#lwRight .m-row .m b.warn{color:var(--warn)}
#lwRight .m-row .r{color:var(--primary-hi);margin-top:2px}
#lwRight .gly{width:18px;height:18px;color:var(--primary-hi);display:inline-block;margin-top:2px}
#lwRight .gly svg{width:18px;height:18px;display:block;overflow:visible}
#lwRight .gly path,#lwRight .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#lwRight .lw-art .lw-body{display:none;margin-top:8px}
#lwRight .lw-art.open .lw-body{display:block}
#lwRight .lw-art.open{background:var(--surface);margin:0 -10px;padding:10px 12px;border-radius:var(--r-s);border-bottom-color:transparent}
#lwRight .lw-actions{margin-top:8px}
#lwRight .lw-actions .re{color:var(--primary-hi);text-decoration:none;font-weight:600;font-size:var(--t-meta);cursor:pointer}
#lwRight .warnline{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:var(--t-meta);color:var(--subtle);padding:6px 2px;line-height:1.5}
#lwRight .warnline .gly{color:var(--warn)}
#lwRight .m-srcs{max-width:none;margin:6px 0 10px}
#lwRight .m-ex .paper{font-size:12.5px;padding:10px 14px}
#lwRight .m-ex .cap a{cursor:pointer}
#lwRight .lw-ev .m-chip.sm{padding:2px 8px;font-size:11px;cursor:pointer;margin:4px 4px 0 0}

#lwRight .lw-tr{margin-top:8px}
#lwRight .lw-tr.hid{display:none}
#lwRight .lw-actions{display:flex;gap:14px}


/* ═══ THE QUESTION CARD ARRIVES — its glyph draws in: the circle, then the mark, then the dot ═══ */
.m-card .eyebrow{display:flex;align-items:center;gap:8px}
.m-card .eyebrow .qg{width:18px;height:18px;flex:none;color:var(--primary-hi);display:inline-block}
.m-card .eyebrow.warn .qg{color:var(--warn)}
.m-card .eyebrow .qg svg{width:18px;height:18px;display:block;overflow:visible}
.m-card .eyebrow .qg .ink{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m-card .eyebrow .qg .d{fill:currentColor}
.m-card.play .eyebrow .qg .ink{stroke-dasharray:1;stroke-dashoffset:1}
.m-card.play .eyebrow .qg .c{animation:upInk .55s var(--ease) .1s forwards}
.m-card.play .eyebrow .qg .m{animation:upInk .4s var(--ease) .6s forwards}
.m-card.play .eyebrow .qg .d{opacity:0;transform:translateY(-6px) scale(.5);transform-origin:12px 16.6px;animation:evtDrop .35s var(--spring) .95s forwards}
@media (prefers-reduced-motion:reduce){.m-card.play .eyebrow .qg .ink{animation:none!important;stroke-dashoffset:0}.m-card.play .eyebrow .qg .d{animation:none!important;opacity:1;transform:none}}


/* ═══ THE CASE MAP — one page in four bands; the reply where you are ═══ */
#v-case .maxw{max-width:900px}
.cmp .k{display:block;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:6px}
.cm-top{display:grid;grid-template-columns:1fr 260px;gap:20px 32px;padding-bottom:18px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.cm-top{grid-template-columns:1fr}}
.cm-goal .cm-goaltx{font-family:var(--font-disp);font-size:20px;line-height:1.4;margin:0;color:var(--text);padding:6px 8px;margin-inline-start:-8px;border-radius:var(--r-s);border:1px solid transparent;cursor:text;outline:none;text-wrap:balance}
.cm-goal .cm-goaltx:hover{border-color:var(--line-strong);background:var(--surface)}
.cm-goal .cm-goaltx:focus{border-color:var(--primary-hi);background:var(--surface)}
.cm-goalhint{font-size:11.5px;color:var(--muted);margin-top:4px}
.cm-facts{display:grid;gap:12px;align-content:start}
.cm-facts .f b{font-size:var(--t-ui);font-weight:600;display:block}
.cm-facts .f .s{font-size:11.5px;color:var(--muted);line-height:1.45;display:block;margin-top:3px}
.cm-parties{grid-column:1/-1}
.cm-parties .m-row{padding:8px 2px}
.cmp .m-row{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;padding:10px 2px;border-bottom:1px solid var(--line);font-size:var(--t-ui)}
.cmp .m-row:last-child{border-bottom:none}
.cmp .m-row.go{cursor:pointer}
.cmp .m-row.go:hover .t{color:var(--primary-hi)}
.cmp .m-row .t{font-weight:500;font-size:var(--t-meta);line-height:1.45}
.cmp .m-row .m{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.5}
.cmp .m-row .m b.ok{color:var(--good)}
.cmp .m-row .m b.warn{color:var(--warn)}
.cmp .m-row .r{color:var(--primary-hi);margin-top:2px}
.cmp .gly{width:18px;height:18px;color:var(--primary-hi);display:inline-block;margin-top:2px}
.cmp .gly svg{width:18px;height:18px;display:block;overflow:visible}
.cmp .gly path,.cmp .gly circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cmp .sech{display:flex;align-items:baseline;gap:10px;margin:24px 0 8px;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.cmp .sech .d{flex:1;font-weight:500;letter-spacing:0;text-transform:none;font-size:var(--t-meta)}
.cmp .sech .n{font-family:var(--font-mono);font-size:11px;font-weight:500}
.cm-group{font-size:var(--t-meta);color:var(--muted);margin:10px 0 2px}
.cm-group b{color:var(--text);font-weight:600}
.cm-args .m-arg{display:grid;grid-template-columns:14px 1fr auto 18px;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.cm-args .m-arg:focus-visible{outline:2px solid var(--primary-hi);outline-offset:-2px}
.cm-args .m-arg .o{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--subtle)}
.cm-args .m-arg .o.doc{background:var(--good);border-color:var(--good)}
.cm-args .m-arg .o.part{background:linear-gradient(90deg,var(--good) 50%,transparent 50%);border-color:var(--good)}
.cm-args .m-arg .o.word{border-color:var(--warn)}
.cm-args .m-arg .t{font-size:var(--t-ui);font-weight:600}
.cm-args .m-arg .m{font-size:11.5px;color:var(--muted);margin-top:2px}
.cm-args .m-arg .sup{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--good);width:136px;text-align:end;white-space:nowrap}
.cm-args .m-arg .sup.warn{color:var(--warn)}
.cm-args .m-arg .sup.part{color:var(--good)}
.cm-args .m-arg .r{color:var(--primary-hi)}
.cm-args .m-arg.open{background:var(--surface);margin:0 -12px;padding:12px;border-radius:var(--r-s) var(--r-s) 0 0;border-bottom-color:transparent}
.cm-open{background:var(--surface);margin:0 -12px 10px;padding:4px 12px 14px;border-radius:0 0 var(--r-s) var(--r-s);animation:mcIn .3s var(--out) both}
.cm-open .hl{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:16px 0 4px}
.cm-open .m-prose{font-size:var(--t-ui);max-width:none}
.cm-open .m-srcs{margin-top:6px;max-width:none}
.cm-open .m-ex .paper{font-size:12.5px;padding:10px 14px}
.cm-open .m-ex .cap a{cursor:pointer}
.cm-open .m-gap{margin:0 0 6px}
.cm-open .warnline{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:var(--t-meta);color:var(--subtle);padding:6px 2px;line-height:1.5}
.cm-open .warnline .gly{color:var(--warn)}
.cm-thread{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.cm-thread:empty{display:none}
.cm-thread .msg{max-width:none}
.cm-thread .msg.u{align-self:flex-end;max-width:80%;background:var(--surface-2);border:1px solid var(--line);padding:8px 12px;border-radius:14px 14px 4px 14px;font-size:var(--t-meta)}
.cm-thread .msg.u p{margin:0}
.cm-thread .msg.a{font-size:var(--t-meta);line-height:1.55}
.cm-reply{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong)}
.cm-reply .m-in{margin:0}
.cm-reply .m-in input{flex:1}
.cm-replynote{font-size:11.5px;color:var(--muted);margin-top:6px}
.cm-bar{height:3px;background:var(--line);border-radius:2px;margin:8px 0 4px;overflow:hidden}
.cm-bar i{display:block;height:100%;background:var(--primary-hi);border-radius:2px}
.cm-fold{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--muted)}
.cm-fold b{color:var(--text);font-weight:600}
.cm-fold a{color:var(--primary-hi);text-decoration:none;font-weight:600}
.cm-fold .cm-read-b{margin-top:12px;color:var(--subtle);font-size:var(--t-ui);line-height:1.6}


/* ═══════════════════════════════════════════════════════════════════════════
   THE BOARD — pins and strings (book §15, agreed 16 September 2026)

   Two shapes stand on the wall and no others: a cream index card for an
   argument, a plate for a law. The papers are not here — they live in the
   reading beside the wall, for the argument that is open. Nothing is dragged.
   ═══════════════════════════════════════════════════════════════════════════ */
#v-board{padding:0;overflow:hidden}
.bdwrap{display:flex;flex-direction:column;height:100%;min-height:0;padding:20px 24px 14px}
.bdhead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex:none}
.bdhead .sub{margin:4px 0 0;max-width:660px}
.bd-strip{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-meta);color:var(--muted);padding-top:8px;white-space:nowrap}
.bd-strip span{display:inline-flex;align-items:baseline;gap:5px}
.bd-strip b{color:var(--text);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.bd-strip .warn b{color:var(--warn)}
.bd-strip .bad b{color:var(--bad)}
.bd-row{display:flex;gap:16px;flex:1;min-height:0;margin-top:14px}

/* the wall keeps its own ground in both themes — a cream index card is the
   point of a board, and it only reads as paper against something dark */
.bd-stage{position:relative;flex:1;min-width:0;border-radius:18px;overflow:hidden;
  background:radial-gradient(1100px 640px at 50% 44%,rgba(47,158,143,.07),transparent 70%),linear-gradient(180deg,#0a0d15,#070911);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.bd-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:52px 52px}
.bd-empty{position:absolute;inset:0;display:grid;place-items:center;padding:0 14%;text-align:center;
  font-size:var(--t-ui);color:var(--muted);line-height:1.6}

/* ── the strings, above the pins is wrong and behind them is what was wrong
      before: they run between the pins, trimmed to each card's edge ── */
.bd-strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.bd-strings .str{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:upInk .6s var(--ease) both;animation-delay:var(--d,0s)}
.bd-strings.still .str{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
.bd-strings .str.aim{stroke:rgba(160,172,196,.42);stroke-width:1.2}
.bd-strings .str.law{stroke:#e6b450;stroke-width:1.4;opacity:.8}
.bd-stage.sel .str:not(.lit){opacity:.14}
.bd-stage.sel .str.aim.lit{stroke:rgba(186,196,220,.72);stroke-width:1.8}
.bd-stage.sel .str.law.lit{opacity:1;stroke-width:2.2}
/* hover a pin, its strings light, the rest dims — same weights as an open
   argument, so a string never means two different things on the wall */
.bd-stage.hov .str:not(.lit){opacity:.14}
.bd-stage.hov .str.aim.lit{stroke:rgba(186,196,220,.72);stroke-width:1.8}
.bd-stage.hov .str.law.lit{opacity:1;stroke-width:2.2}
@media (prefers-reduced-motion:reduce){.bd-strings .str{animation:none!important;stroke-dasharray:none;stroke-dashoffset:0}}

/* ── the pins ── */
.bd-pins{position:absolute;inset:0;z-index:2}
.bd-pins .pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer}
.bd-pins .pin:focus-visible{outline:2px solid var(--primary-hi);outline-offset:3px;border-radius:6px}
@keyframes bdDrop{from{opacity:0;transform:translate(-50%,-50%) translateY(-12px) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
.bd-pins.play .pin{animation:bdDrop .5s var(--spring) both}
.bd-pins.play .pin.goal{animation-delay:.04s}
.bd-pins.play .pin.arg{animation-delay:.26s}
.bd-pins.play .pin.lawp{animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.bd-pins.play .pin{animation:none;opacity:1;transform:translate(-50%,-50%)}}

.pin.goal{width:246px;background:#fbfaf7;color:#1c1f2e;border-radius:6px;padding:11px 13px;box-shadow:0 2px 12px rgba(0,0,0,.45)}
.pin.goal .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#5a5f70;margin-bottom:4px}
.pin.goal .t{font-family:var(--font-disp);font-size:14px;line-height:1.35}

.pin.arg{width:168px;background:#fbfaf7;color:#1c1f2e;border-radius:4px;padding:9px 11px 8px;
  box-shadow:0 2px 9px rgba(0,0,0,.38),inset 0 0 0 1.5px rgba(107,123,245,.6)}
.pin.arg .t{font-family:var(--font-disp);font-size:13px;line-height:1.3}
.pin.arg .s{display:flex;align-items:center;gap:7px;margin-top:6px}
.pin.arg .s b{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#1f9d5b}
.pin.arg .s.warn b{color:#b9761c}
/* four notches: a paper behind it · a law holding it up · nothing found
   against it · the paper that would settle it. What it stands on, never its
   chances — no percentage, no score, and no colour that says "strong". */
.pin.arg .mt{display:inline-flex;gap:2px;flex:none}
.pin.arg .mt i{display:block;width:9px;height:4px;border-radius:1px;background:#d9dbe3}
.pin.arg .mt i.on{background:var(--primary)}
/* the notches light one by one as the arguments drop in, left to right —
   only on arrival (.bd-pins.play), and only the notches that are ON */
@keyframes bdNotch{from{background:#d9dbe3}to{background:var(--primary)}}
.bd-pins.play .pin.arg .mt i.on{animation:bdNotch .3s var(--ease) both;animation-delay:calc(.55s + var(--k,0)*.12s)}
.bd-pins.play .pin.arg .mt i.on:nth-child(1){--k:0}
.bd-pins.play .pin.arg .mt i.on:nth-child(2){--k:1}
.bd-pins.play .pin.arg .mt i.on:nth-child(3){--k:2}
.bd-pins.play .pin.arg .mt i.on:nth-child(4){--k:3}
@media (prefers-reduced-motion:reduce){.bd-pins.play .pin.arg .mt i.on{animation:none;background:var(--primary)}}
.pin.arg .rm{position:absolute;top:-4px;inset-inline-end:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--bad);box-shadow:0 0 0 2px rgba(10,13,21,.9)}
.pin.arg:hover{box-shadow:0 0 0 1px var(--primary-hi),0 4px 14px rgba(0,0,0,.45)}
.pin.arg.open{box-shadow:0 0 0 2px var(--primary-hi),0 6px 18px rgba(0,0,0,.5)}

.pin.lawp{width:132px}
.pin.lawp .pl{background:#fbfaf7;color:#1c1f2e;border-radius:3px;padding:7px 9px;position:relative;
  box-shadow:0 1px 5px rgba(0,0,0,.45)}
.pin.lawp .pt{font-family:var(--font-disp);font-size:11.5px;line-height:1.25}
.pin.lawp .pn{font-family:var(--font-mono);font-size:9px;color:#5a5f70;margin-top:3px}
/* a law whose text the case does not hold yet wears the hollow every other
   "not here yet" in the app wears */
.pin.lawp.hollow .pl{background:transparent;color:var(--subtle);border:1px dashed var(--line-strong);box-shadow:none;
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.05) 6px 8px)}
.pin.lawp.hollow .pl::before{background:var(--line-strong)}
.pin.lawp.hollow .pn{color:var(--muted)}
.bd-stage.sel .pin:not(.lit){opacity:.4}
.bd-stage.hov .pin:not(.lit){opacity:.4}

/* ── the legend ── */
.bd-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:11.5px;color:var(--muted);padding:11px 2px 0;flex:none}
.bd-legend span{display:inline-flex;align-items:center;gap:6px}
.bd-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;background:#fbfaf7;flex:none}
.bd-legend i.arg{box-shadow:inset 0 0 0 1.5px rgba(107,123,245,.6)}
.bd-legend i.law{background:#e6b450}
.bd-legend i.hollow{background:transparent;border:1px dashed var(--line-strong)}
.bd-legend i.bad{background:var(--bad);border-radius:50%;width:8px;height:8px}
.bd-legend i.mt{background:transparent;width:auto;display:inline-flex;gap:2px}
.bd-legend i.mt b{display:block;width:9px;height:4px;border-radius:1px;background:var(--primary)}
.bd-legend i.mt b.off{background:#d9dbe3}

/* ── the reading, beside the wall ── */
.bd-panel{flex:none;width:392px;min-width:392px;overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px 18px;font-size:var(--t-ui);
  animation:mcIn .3s var(--out) both}
.bd-panel .ph{display:flex;align-items:baseline;gap:10px}
.bd-panel .ph .t{font-family:var(--font-disp);font-size:18px;line-height:1.25;flex:1}
.bd-panel .ph .s{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--good);white-space:nowrap}
.bd-panel .ph .s.warn{color:var(--warn)}
.bd-x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.bd-x:hover{color:var(--text)}
.bd-panel .pq{color:var(--muted);font-size:var(--t-meta);line-height:1.55;margin:7px 0 10px}
.bd-panel .m-row{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:var(--t-ui)}
.bd-panel .m-row:last-child{border-bottom:none}
.bd-panel .m-row .t{font-weight:500;font-size:var(--t-meta);line-height:1.45}
.bd-panel .m-row .m{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.45}
.bd-panel .warnline{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
  font-size:var(--t-meta);color:var(--subtle);padding:6px 2px;line-height:1.5}
.bd-panel .warnline .gly{color:var(--warn);margin-top:1px}
.bd-panel .m-gap .t{font-size:var(--t-meta);font-weight:500;line-height:1.4}
.bd-panel .m-gap .s{color:var(--muted);font-size:11.5px;margin-top:2px}
.bd-panel .pm .m-row{padding:10px 2px}
.bd-panel .m-row .r{color:var(--good);font-weight:700}
.bd-panel .m-row.lit .t{font-weight:600}
.bd-panel .m-row:not(.lit) .gly{color:var(--muted)}
.bd-panel .m-row.bad .gly{color:var(--bad)}
.bd-panel .m-row.go{cursor:pointer}
.bd-panel .m-row.go:hover .t{color:var(--primary-hi)}
.bd-panel .m-gap{opacity:1;animation:none;margin:8px 0 0}
.bd-panel .hl{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:16px 0 6px}
.bd-panel .warnline{margin-top:8px}
.bd-panel .m-srcs{max-width:none}
.bd-panel .m-ex .paper{font-size:12.5px;padding:10px 13px}
.bd-panel .m-ex .cap a{cursor:pointer}
.bd-panel .thumbs{display:flex;gap:12px;flex-wrap:wrap}
.bd-panel .th{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--text);width:108px;cursor:pointer}
.bd-panel .th .pg{display:block;width:100%;height:74px;background:#fff;border-radius:3px;overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.4)}
.bd-panel .th .pg img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .25s}
.bd-panel .th .pg img.loaded{opacity:1}
.bd-panel .th .n{font-weight:600;font-size:12px;margin-top:4px;line-height:1.3}
.bd-panel .th .p{font-size:11px;color:var(--muted)}
.bd-panel .th:hover .n{color:var(--primary-hi)}
.bd-panel .cm-thread{margin-top:14px}
.bd-panel .cm-reply{margin-top:12px}

@media (max-width:1180px){.bd-panel{width:340px;min-width:340px}}
@media (max-width:1080px){.pin.goal{width:198px}.pin.arg{width:146px}.pin.lawp{width:118px}}
@media (max-width:980px){
  .bd-row{flex-direction:column}
  .bd-row.reading .bd-stage{flex:none;height:46vh}
  .bd-panel{width:auto;min-width:0;flex:1;min-height:0}
}

/* ═══ STRATEGY — living plans ═══
   Card Book §16, agreed 17 September 2026. The page is a list of plans; a row
   opens a reading with a fixed shape. The reading borrows the case map's own
   parts on purpose — .hl heads, .m-row rows, hollow .m-gap rows, .warnline,
   .cm-thread and .cm-reply — so a plan reads like every other place the case
   shows its working. Only what is genuinely new to a plan is defined here:
   the draft mark, the editable line, the bar that says a line is his, and the
   mark on a line the case rewrote. */
#v-strategy .maxw{max-width:820px}
.stp .sech{display:flex;align-items:baseline;gap:10px;padding:0 2px 8px;border-bottom:1px solid var(--line-strong);margin:6px 0 2px}
.stp .sech .t{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.stp .sech .d{font-size:var(--t-meta);color:var(--muted);font-weight:500}
.stp .sech .n{margin-inline-start:auto;font-size:var(--t-label);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.stp .emptyv{font-size:var(--t-ui);color:var(--muted);padding:22px 0;line-height:1.6;max-width:62ch}
.stp .emptyv i{color:var(--subtle);font-style:italic}

/* the list */
.st-row{display:grid;grid-template-columns:22px 1fr auto 18px;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.st-row:focus-visible{outline:2px solid var(--primary-hi);outline-offset:-2px}
.st-row .gly{width:20px;height:20px;color:var(--primary-hi);display:inline-block}
.st-row .gly svg{width:20px;height:20px;display:block;overflow:visible}
.st-row .gly path,.st-row .gly circle,.st-row .gly line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st-row .t{font-size:var(--t-ui);font-weight:600}
.st-row .m{font-size:11.5px;color:var(--muted);margin-top:2px}
.st-row .r{color:var(--primary-hi)}
.st-row:hover .t{color:var(--primary-hi)}
.st-row.open{background:var(--surface);margin:0 -12px;padding:12px;border-radius:var(--r-s) var(--r-s) 0 0;border-bottom-color:transparent}
.st-row.open:hover .t{color:var(--text)}
.st-row.pending{cursor:default;opacity:.75}
.st-row.pending .gly{color:var(--muted)}
.st-row.pending:hover .t{color:var(--text)}
.st-state{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap;color:var(--muted)}
.st-state.ok{color:var(--good)}
.st-state.warn{color:var(--warn)}

/* a plan, open */
.st-open{background:var(--surface);margin:0 -12px 10px;padding:4px 12px 16px;border-radius:0 0 var(--r-s) var(--r-s);animation:mcIn .3s var(--out) both}
.st-open .hl{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:18px 0 4px;display:flex;align-items:baseline;gap:8px}
.st-open .m-prose{font-size:var(--t-ui);max-width:none;line-height:1.6}
.st-open .m-prose p{margin:0}
.st-open .gly{width:18px;height:18px;color:var(--primary-hi);display:inline-block;margin-top:2px}
.st-open .gly svg{width:18px;height:18px;display:block;overflow:visible}
.st-open .gly path,.st-open .gly circle,.st-open .gly line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st-open .m-row{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;padding:10px 2px;border-bottom:1px solid var(--line);font-size:var(--t-ui)}
.st-open .m-row .t{font-weight:500;font-size:var(--t-meta);line-height:1.5}
.st-open .m-row .m{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.5}
.st-open .m-row .m b.ok{color:var(--good)}
.st-open .m-row .m b.warn{color:var(--warn)}
.st-open .m-row .r{color:var(--primary-hi);margin-top:2px}
.st-open .m-row .r.w{color:var(--muted)}
.st-open .m-row.go{cursor:pointer}
.st-open .m-row.go:hover .t{color:var(--primary-hi)}
.st-open .m-row.warn .gly{color:var(--warn)}
.st-open .m-gap{margin:0 0 6px}
.st-open .m-gap .t{font-size:var(--t-meta);font-weight:500}
.st-open .warnline{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:var(--t-meta);color:var(--subtle);padding:6px 2px;line-height:1.5}
.st-open .warnline .gly{color:var(--warn)}
.st-open .warnline b{color:var(--text);font-weight:600}
.st-open .cm-thread{margin-top:16px}
.st-open .cm-reply .m-in input{flex:1}

/* the draft mark — first on every plan, no exceptions */
.st-draft{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:var(--t-meta);color:var(--subtle);line-height:1.55;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-s);margin-top:12px}
.st-draft .gly{color:var(--warn);width:18px;height:18px;margin-top:1px}
.st-draft b{color:var(--text);font-weight:600}
.st-meta{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.55}
.st-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--muted)}

/* every line his to change: hover says so, focus holds it, the bar keeps it */
.st-ed{border-radius:4px;padding:2px 5px;margin:0 -5px;cursor:text;outline:none;transition:background .15s,box-shadow .15s}
.st-ed:hover{background:var(--primary-soft)}
.st-ed:focus{background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary-hi)}
.st-ph{color:var(--muted);font-style:italic}
.st-mine{background:var(--primary-soft);border-radius:var(--r-s);padding-inline:10px}
.m-prose.st-mine{margin-inline-start:0}
.st-unsaved{background:color-mix(in srgb, var(--warn) 12%, transparent)}
.st-yours{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--primary-hi);background:var(--primary-soft);padding:2px 7px;border-radius:var(--r-pill)}
.hl.st-own{color:var(--subtle)}
/* what the case rewrote, until he has opened it */
mark.st-new{background:var(--warn-soft);color:inherit;border-bottom:1px dashed var(--warn);padding:0 2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.st-fresh{background:color-mix(in srgb, var(--warn) 10%, transparent);border-radius:var(--r-s)}
.st-li.st-fresh,.m-row.st-fresh{padding-inline-start:10px}

/* what to do, in order */
.st-steps .m-row{grid-template-columns:18px 1fr auto;align-items:start}
.st-n{width:18px;height:18px;border-radius:var(--r-s);border:1.5px solid var(--line-strong);display:grid;place-items:center;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:1px}
.st-item.st-mine .st-n{border-color:var(--primary);color:var(--primary-hi)}

/* what to say, and what not to */
.st-say{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;font-size:var(--t-meta);line-height:1.55;margin-top:2px}
@media (max-width:720px){.st-say{grid-template-columns:1fr}}
.st-say>div>b{display:block;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:700}
.st-ul{margin:0;padding-inline-start:16px;list-style:disc}
.st-li{margin:4px 0;color:var(--subtle)}
.st-li.st-mine{list-style:none;margin-inline-start:-16px}
.st-li .st-ed{display:inline-block;min-width:40px}
.st-li.st-ph{color:var(--muted);font-style:italic;list-style:none;margin-inline-start:-16px}

/* the record moved under a line he wrote */
.st-revisit{margin-top:2px}
.st-revisitbtn{font:inherit;font-size:11.5px;font-weight:600;padding:2px 10px;margin-inline-start:6px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--warn);cursor:pointer}
.st-revisitbtn:hover{border-color:var(--warn);background:var(--warn-soft)}
.st-revisitbtn:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px}

/* a section of his own, and the composer that asks for a plan */
.st-add{margin-top:20px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.st-add .m-in{margin:0;flex-wrap:wrap}
.st-add .m-in input{flex:1;min-width:150px}
.st-ask{margin-top:18px}
.st-ask input{flex:1}
.st-gt{margin-top:6px}
.st-link{color:var(--primary-hi);text-decoration:none;font-weight:600;cursor:pointer}
.st-link:hover{text-decoration:underline}

/* the nav carries the dot while a plan the case rewrote is unopened */
.nav a .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);margin-inline-start:auto;margin-inline-end:14px;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .4s var(--spring);flex:none}
.nav a.flag .dot{opacity:1;transform:none;animation:corrPulse 1.6s var(--ease) .3s 3}

/* motion: a new plan's row drops in; the reading reveals; still on redraw */
.st-row.fresh{opacity:0;transform:translateY(-10px);animation:evtDrop .55s var(--spring) both}
.stp.still .st-row{opacity:1;transform:none;animation:none}
.stp.still .st-open{animation:none}
@media (prefers-reduced-motion:reduce){
  .st-row.fresh,.st-open{animation:none!important;opacity:1;transform:none}
  .nav a.flag .dot{animation:none}
}

/* ═══ PREPARE — the shelf ═══
   Card Book §17, agreed 18 September 2026. The page that replaces Reports.

   Almost nothing is new here, deliberately. The shelf is the Laws shelf —
   `.lw-tiles` of `.lw-tile`, plate and body and `.ways`, the same `bpBtn`
   stagger — because a product is a thing in the case exactly as a statute is.
   A product open is the Strategy reading — `.st-open`, `.hl`, `.m-row`,
   `.m-gap`, `.warnline`, `.st-ed`/`.st-mine`/`.st-fresh`, `.cm-thread` —
   because it is the same act: the case showing its working on a fixed shape,
   every line his to change, and him answering on the row he is looking at.
   The page wrapper is Strategy's own `.stp`, so `.sech`, `.emptyv` and the
   `.still` redraw are not written twice.

   What IS new: a plate that carries the glyph of what the product is for and
   a `for`-line long enough to be a sentence; the ways to take it away, with
   the names on the export line rather than in a setting; the pages that
   matter as page faces with their captions; and the source words that sit
   under a line and open the paper at the page they name. */

#v-prepare .maxw{max-width:1180px}
.prp .lw-tiles{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:14px}

/* ── the plate: what this product is, who it is for, one word for its state ── */
.prp .lw-tile .plate{height:134px}
/* the glyph sits in the top-right corner, so the title stops short of it */
.prp .lw-tile .plate .pt{-webkit-line-clamp:2;padding-inline-end:34px}
/* the for-line is a phrase, not a reference number — it wraps, and it stops at
   two lines so it can never reach down into the state word */
.prp .lw-tile .plate .pn{font-family:var(--font-body);font-size:11.5px;line-height:1.45;
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the state word is one line inside the plate, never spilling under the dot */
.prp .lw-tile .plate .st{inset-inline-end:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prp .lw-tile .plate .gly{position:absolute;inset-inline-end:11px;top:11px;width:18px;height:18px;color:#7b8194;opacity:.8}
.prp .lw-tile .plate .gly svg{width:18px;height:18px;display:block;overflow:visible}
.prp .lw-tile .plate .gly path,.prp .lw-tile .plate .gly circle,.prp .lw-tile .plate .gly line{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prp .lw-tile.hollow .plate .gly{color:var(--muted)}
/* the dot: this became ready, or went stale, since he last opened it */
.prp .lw-tile .plate .dot{position:absolute;inset-inline-end:12px;bottom:11px;width:7px;height:7px;border-radius:50%;
  background:var(--warn);animation:corrPulse 1.6s var(--ease) .3s 3}
/* the tile whose product is open */
.prp .lw-tile.on{border-color:var(--primary)}
.prp .lw-tile.on .plate::before{width:5px}
/* the case is writing it: nothing to click, and the word says so. The dim sits
   on the children, not the tile — the tile's own opacity belongs to the
   entrance animation, which would take it back to 1 the moment it finished. */
/* animation:none means the tile's own opacity:0 would stand, so it is unset too */
.prp .lw-tile.pending{cursor:default;animation:none;opacity:1;transform:none}
.prp .lw-tile.pending>*{opacity:.66}
.prp .lw-tile.pending:hover{transform:none;border-color:var(--line)}
.prp .lw-tile.pending .plate::before{background:var(--line-strong)}
.prp .lw-tile .b .r:empty{min-height:17px}
.prp .lw-tile .b .ways:empty{display:none}

/* ── the one product that has to be asked for in words ── */
.pr-custom{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line-strong)}
.pr-custom .m-in{margin:0;max-width:620px}
.pr-custom .m-in input{flex:1}

/* ── A PRODUCT, OPEN — Strategy's reading, sitting under the shelf instead of
   under a row, so only its seam changes ── */
.pr-open{margin:20px 0 10px;padding:4px 16px 18px;border:1px solid var(--line);border-radius:var(--r-m)}
.pr-open .m-prose{max-width:76ch}
.pr-open .st-draft{margin-top:14px}
.pr-open .cm-reply .m-in input{flex:1}

/* the meta line: the budget it keeps to, the version, when it was made */
.pr-meta{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.55}
.pr-meta b{font-weight:600;color:var(--subtle)}
/* it did not keep to its budget, and that is not a grey detail */
.pr-meta b.pr-over{color:var(--warn)}

/* the ways to take it away. Redacted is the link; the names are the choice
   beside it, on the export line, because that is where the decision is made. */
.pr-ways{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.pr-way{display:inline-flex;align-items:baseline;gap:8px}
.pr-way>a{font-size:var(--t-ui);font-weight:600;color:var(--primary-hi);text-decoration:none;cursor:pointer}
.pr-way>a:hover{text-decoration:underline}
.pr-way>a.nm{font-size:11px;font-weight:500;color:var(--muted);text-decoration:none}
.pr-way>a.nm::before{content:"·";margin-inline-end:7px;color:var(--line-strong)}
.pr-way>a.nm:hover{color:var(--warn);text-decoration:underline}
.pr-ways a.busy{opacity:.45;pointer-events:none}

/* a paper landed under it; nothing re-made itself, and the line says so */
.pr-stale{margin-top:12px}

/* a head the refresh rewrote, until he has opened it */
.pr-changed{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--warn);background:var(--warn-soft);padding:2px 7px;border-radius:var(--r-pill)}

/* THE SOURCE WORDS. Every line says which page it comes from, so they sit
   under the line rather than beside it — a claim and its paper, in that
   order, the way a reader checks one. */
.wr-src{display:inline-block;margin-top:3px;font-size:11px;font-style:italic;color:var(--muted);
  text-decoration:none;cursor:pointer;border-bottom:1px dotted var(--line-strong)}
.wr-src:hover{color:var(--primary-hi);border-bottom-color:var(--primary-hi)}

/* ── the pages that matter, as page faces with what each one proves ── */
.pr-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-top:8px}
.pr-th{margin:0;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface-2);cursor:pointer;
  transition:border-color .15s,transform .15s}
.pr-th:hover{border-color:var(--primary-hi);transform:translateY(-2px)}
.pr-th:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px}
.pr-th img.th{display:block;width:100%;height:138px;object-fit:cover;object-position:top center;
  background:var(--paper);opacity:0;transition:opacity .3s var(--ease)}
.pr-th img.th.loaded{opacity:1}
.pr-th figcaption{padding:8px 10px 10px;font-size:11.5px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
.pr-th figcaption b{color:var(--text);font-weight:600}
.pr-th figcaption span{color:var(--muted)}

.pr-del{float:inline-end;color:var(--muted);text-decoration:none;font-size:11.5px;cursor:pointer}
.pr-del:hover{color:var(--warn);text-decoration:underline}

/* ── motion: the tiles stagger in as on Laws; a product open reveals section
   by section; nothing moves on a redraw ── */
.pr-open .pr-sec,.pr-open .m-row,.pr-open .m-gap,.pr-open .pr-thumbs,.pr-open .warnline{
  animation:mcIn .32s var(--out) both;animation-delay:var(--d,.04s)}
.stp.still .lw-tile,.stp.still .pr-open .pr-sec,.stp.still .pr-open .m-row,
.stp.still .pr-open .m-gap,.stp.still .pr-open .pr-thumbs,.stp.still .pr-open .warnline{
  animation:none;opacity:1;transform:none}
.stp.still .lw-tile .plate .dot{animation:none}
@media (prefers-reduced-motion:reduce){
  .prp .lw-tile,.pr-open,.pr-open .pr-sec,.pr-open .m-row,.pr-open .m-gap,
  .pr-open .pr-thumbs,.pr-open .warnline{animation:none!important;opacity:1;transform:none}
  .prp .lw-tile .plate .dot{animation:none}
}
@media (max-width:640px){
  .pr-open{margin-inline-start:-4px;margin-inline-end:-4px;padding:4px 10px 16px}
  .pr-ways{flex-direction:column;gap:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §18 · SETTINGS — the menu, the window, usage
   Card Book §18, agreed 18 September 2026. The book's own row language:
   sections down the left, and a row is a title, a line under it, and ONE
   control on the right. Pages, never money, anywhere on this surface.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MOTION, CHOSEN RATHER THAN INHERITED ──────────────────────────────────
   Every card in this file already answers `prefers-reduced-motion` in a block
   of its own, because each animation has an end state that has to be reached
   some other way. The Motion choice in Settings has to do the same thing for
   someone whose system is not set that way — and it is one rule rather than
   forty, because collapsing the duration lands every `both`/`forwards`
   animation on its own final frame immediately, which is exactly what those
   blocks spell out by hand. cards.js's reduceMotion() reads the same
   attribute, so the scripted replays do not start either. */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{
  animation-duration:1ms!important;animation-delay:0s!important;
  animation-iteration-count:1!important;transition-duration:1ms!important;
  transition-delay:0s!important;scroll-behavior:auto!important}

/* ── the menu off the avatar ─────────────────────────────────────────────── */
.acct-menu{position:fixed;z-index:160;width:270px;border:1px solid var(--line-strong);
  border-radius:var(--r-m);background:var(--bg);padding:8px 0;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);animation:mcIn .18s var(--out) both}
.acct-menu.hid{display:none}
.acct-menu .e{padding:8px 16px 10px;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a{display:flex;gap:10px;align-items:center;padding:8px 16px;
  font-size:var(--t-ui);color:var(--text);text-decoration:none;cursor:pointer}
.acct-menu a:hover{background:var(--surface)}
.acct-menu a:focus-visible{outline:2px solid var(--primary-hi);outline-offset:-2px}
.acct-menu a .gly{width:18px;height:18px;color:var(--muted);flex:none}
.acct-menu a .gly svg{width:18px;height:18px;display:block}
.acct-menu a .gly path,.acct-menu a .gly circle,.acct-menu a .gly line{
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.acct-menu a .r{margin-inline-start:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.acct-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* ── the window: nav ─────────────────────────────────────────────────────── */
#setnav .setsearch input{flex:1;min-width:0;font:inherit;font-size:12.5px;
  background:transparent;border:0;color:var(--text);outline:none;padding:0}
#setnav .setsearch input::placeholder{color:var(--muted)}
#setnav .setk{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin:14px 12px 4px}
#setnav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#setnav.searching a.on{background:transparent;color:var(--subtle)}

/* ── the window: pane, headings, rows ────────────────────────────────────── */
/* [hidden] is display:none in the UA sheet, which any class with a display
   of its own outranks — so the search hid rows that stayed on screen. */
#setPane [hidden]{display:none!important}

#setPane h4{font-family:var(--font-disp);font-weight:500;font-size:16px;margin:20px 0 2px}
#setPane h4:first-child{margin-top:2px}
#setPane .set-lead{font-size:var(--t-meta);color:var(--muted);margin:0 0 4px;line-height:1.5}
.set-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.set-row .t{font-size:var(--t-ui);font-weight:500}
.set-row .m{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.set-row .m b{color:var(--text);font-weight:600}
.set-row .c{justify-self:end}
.set-p{font-size:var(--t-meta);color:var(--muted);line-height:1.6;padding:10px 0 4px;max-width:66ch}
/* a row whose control is not a control: the value it is reporting */
.set-val{font-size:var(--t-meta);color:var(--subtle);white-space:nowrap;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;display:inline-block}

/* the segmented choice, the dropdown, the word that opens the one thing */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.seg button{font:inherit;font-size:11.5px;padding:5px 11px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--primary);color:var(--ink-on-primary)}
.seg button:focus-visible{outline:2px solid var(--primary-hi);outline-offset:-2px}
.set-dd{font:inherit;font-size:var(--t-meta);color:var(--text);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-s);padding:6px 10px;cursor:pointer}
.set-dd:focus-visible{outline:2px solid var(--primary-hi);outline-offset:1px}
.dd{font:inherit;font-size:var(--t-meta);color:var(--primary-hi);background:none;border:0;
  padding:0;cursor:pointer;white-space:nowrap}
.dd::after{content:" \2192"}
.dd:hover{text-decoration:underline}
.dd:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px;border-radius:3px}
.dd.bad{color:var(--bad)}
.dd.quiet{color:var(--muted);cursor:default}
.dd.quiet::after{content:""}
.dd.quiet:hover{text-decoration:none}

/* a hollow row: the shape of a row with nothing behind it yet, saying so */
.set-hollow{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:11px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-s);
  background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.035) 7px 9px);
  margin:10px 0 0}
html[data-theme="light"] .set-hollow{
  background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(12,35,64,.05) 7px 9px)}
.set-hollow .gly{color:var(--muted);margin-top:1px}
.set-hollow .t{font-size:var(--t-ui);font-weight:500}
.set-hollow .s{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}

/* the inline editors — the case name, where it is, the three name lists */
.set-edit{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.set-edit input{flex:1;min-width:180px;font:inherit;font-size:var(--t-ui);padding:8px 12px;
  border-radius:var(--r-s);border:1px solid var(--line-strong);background:transparent;color:var(--text)}
.set-edit input:focus{outline:2px solid var(--primary-hi);outline-offset:-1px}
.set-parties{margin:10px 0 2px}
.set-parties .pr{display:grid;grid-template-columns:172px 1fr;gap:12px;align-items:center;padding:6px 0}
.set-parties .pr label{font-size:11.5px;color:var(--muted)}
.set-parties .pr label b{display:block;color:var(--text);font-weight:500;font-size:var(--t-meta)}
.set-parties input{width:100%;font:inherit;font-size:var(--t-ui);padding:8px 12px;
  border-radius:var(--r-s);border:1px solid var(--line-strong);background:transparent;color:var(--text)}
.set-note{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.set-note.ok{color:var(--good)}
.set-note.bad{color:var(--bad)}

/* the access log: fifty plain lines, and no case text in any of them */
.set-log{margin-top:10px;max-height:260px;overflow:auto;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface)}
.set-log div{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:7px 12px;
  font-size:11.5px;border-bottom:1px solid var(--line);color:var(--subtle)}
.set-log div:last-child{border-bottom:none}
.set-log time{color:var(--muted);font-family:var(--font-mono);font-size:11px;white-space:nowrap}

/* the asked-once delete: the row becomes one line */
.set-ask{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-ui)}
/* .q is already the quiet button in this file, and the question span wearing
   it made Keep stretch across the row — the question gets a name of its own. */
.set-ask .ask-q{flex:1;min-width:220px;font-weight:500}
.set-ask .m-btn{flex:none}

/* ── usage: the panel, in pages ──────────────────────────────────────────── */
.use-top{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-meta);
  color:var(--muted);margin-bottom:6px}
.use-top .t{color:var(--text);font-weight:600}
.use-head{font-family:var(--font-disp);font-size:19px;line-height:1.35;margin:4px 0 12px;
  max-width:60ch;text-wrap:balance}
.use-row{display:grid;grid-template-columns:200px 1fr 80px;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.use-row .t{font-size:var(--t-ui);font-weight:500}
.use-row .m{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.use-bar{height:3px;background:var(--line-strong);border-radius:2px;position:relative}
.use-bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--primary);border-radius:2px;
  width:0;animation:useFill .6s var(--out) forwards}
@keyframes useFill{from{width:0}to{width:var(--w)}}
.use-bar i.warn{background:var(--warn)}
.use-row .n{text-align:end;font-size:var(--t-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.use-cred{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 0 4px}
.use-cred .t{font-size:var(--t-ui);font-weight:600}
.use-cred .m{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.use-cred .n{font-family:var(--font-disp);font-size:26px;font-variant-numeric:tabular-nums}
.use-hl{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:18px 0 4px}
@media (prefers-reduced-motion:reduce){.use-bar i{animation:none;width:var(--w)}}
:root[data-motion="reduced"] .use-bar i{width:var(--w)}

@media (max-width:640px){
  .use-row{grid-template-columns:1fr;gap:6px}
  .use-row .n{text-align:start}
  .set-parties .pr{grid-template-columns:1fr;gap:4px}
  .acct-menu{width:min(270px,calc(100vw - 24px))}
}

/* ═══ THE FIRST RUN, AND THE SIZE ROWS — Card Book §19 + §20 ═══════════════
   The book's own classes: .stp for the screen, .onb-dots for the three marks,
   .hl for a field's name, .m-in for the line, .m-row for a size, .gly for its
   glyph, .m-prose for the note under. Nothing new is invented where the book
   already has a name for it. */

.fr-ov{position:fixed;inset:0;z-index:220;background:var(--bg);display:none;overflow:auto}
.fr-ov::before{content:"";position:fixed;inset:0;background:var(--wash);pointer-events:none}
.fr-ov.open{display:flex}
.fr-wrap{width:min(640px,92vw);margin:auto;padding:44px 0;position:relative}
.fr-ov .stp{max-width:640px;animation:mcIn .38s var(--out) both}
.fr-x{position:fixed;top:16px;inset-inline-end:16px;width:36px;height:36px;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;z-index:2}
.fr-x:hover{background:var(--surface);color:var(--text)}
.fr-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.onb-dots{display:flex;gap:6px;justify-content:center;margin:0 0 14px}
.onb-dots i{display:block;width:26px;height:3px;border-radius:2px;background:var(--line-strong)}
.onb-dots i.on{background:var(--primary)}
.fr-ov .pg-h{font-family:var(--font-disp);font-weight:500;font-size:var(--t-display);
  margin:0 0 6px;letter-spacing:-.01em;text-align:center;color:var(--text)}
.fr-ov .pg-s{font-size:var(--t-meta);color:var(--muted);margin:0 auto 20px;text-align:center;
  line-height:1.6;max-width:56ch}
.fr-mark{width:52px;height:52px;margin:0 auto 16px;color:var(--text)}
.fr-mark svg{width:100%;height:100%;fill:currentColor}
html[data-theme="light"] .fr-mark{color:var(--primary)}
.fr-ov .hl{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:16px 0 5px}
.fr-ov .m-in{margin:0}
.fr-ov .m-in input{flex:1}
.fr-note{font-size:var(--t-meta);color:var(--muted);margin:10px 0 0;line-height:1.55;max-width:none}
.fr-price{font-size:var(--t-meta);color:var(--muted);text-align:center;margin:14px 0 0;min-height:1.4em}
.fr-say{font-size:var(--t-meta);color:var(--bad);margin:10px 0 0;min-height:0}

/* ── a size, as a row: the glyph, the word, what it carries, the price ──── */
.m-card .m-row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:var(--t-ui);cursor:pointer;
  border-radius:var(--r-s)}
.m-card .m-row:last-child{border-bottom:0}
.m-card .m-row:hover{background:var(--surface)}
.m-card .m-row:focus-visible{outline:2px solid var(--primary-hi);outline-offset:1px}
.m-card .m-row .gly{width:20px;height:20px;color:var(--primary-hi);display:inline-block;margin-top:1px}
.m-card .m-row .gly svg{width:20px;height:20px;display:block;overflow:visible}
.m-card .m-row .gly .ink{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-card .m-row .t{font-weight:600;font-size:var(--t-ui);line-height:1.45;color:var(--text)}
.m-card .m-row .m{color:var(--muted);font-size:var(--t-meta);margin-top:2px;line-height:1.45}
/* THE PRICE COLUMN IS STILL — it never animates, and it never moves on hover.
   A number that slides is a number somebody has to read twice. */
.m-card .m-row .r{color:var(--primary-hi);font-size:var(--t-meta);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:2px;animation:none!important}
.m-card .m-row .tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  color:var(--muted);margin-inline-start:6px;vertical-align:1px}
.m-card .m-row .tag.agreed{color:var(--good);border-color:var(--good);background:var(--good-soft)}
.m-card .m-row.fits{background:var(--primary-soft);border-bottom-color:transparent}

/* ── THE WANTS, AS LINES — and one of them edited in place ──────────
   §19, third round. The row IS the want, so clicking it turns the words
   into an input the width of the row rather than opening a box somewhere
   else: the line he is changing never moves while he changes it. */
.gk-wants .m-row .r{font-size:var(--t-meta);opacity:.75;transition:opacity .15s}
.gk-wants .m-row:hover .r,.gk-wants .m-row:focus-visible .r{opacity:1}
.gk-wants .why{margin-block-start:12px}
.m-card .m-row .fr-wantin{width:100%;font:inherit;font-size:var(--t-ui);font-weight:600;
  line-height:1.45;color:var(--text);background:var(--surface-2);
  border:1px solid var(--primary);border-radius:var(--r-s);
  padding:5px 8px;margin-block:-6px;margin-inline:-8px}
.m-card .m-row .fr-wantin:focus{outline:none}
/* the edit box grows with the line rather than scrolling sideways */
.m-card .m-row textarea.fr-wantin{display:block;resize:none;overflow-y:hidden;max-height:13.2em;box-sizing:border-box;min-height:calc(1.45em + 12px)}
/* A LINE THE CASE PUT ANOTHER WAY, PUT BACK TO HIM: one note over the
   lines, and the line itself tinted until he says That's right */
.gk-wants .fr-wantnote{margin:0 0 6px;font-size:var(--t-meta);color:var(--primary);font-weight:600}
.gk-wants .m-row.fr-changed{background:var(--primary-soft);border-radius:var(--r-s)}
.gk-wants .m-row.fr-changed .t{color:var(--text)}

/* ── WHAT THE CASE NOW UNDERSTANDS ──────────────────────────
   Code-built from the fields an answer changed, so it states rather than
   suggests — and what is bold in it is the thing that changed. */
.msg.a.is-derived b,.msg.a.is-derived strong{color:var(--text);font-weight:650}
.m-card .m-row.fits:hover{background:var(--primary-soft)}
.fr-sizes{margin:2px 0 4px}
.m-card .fr-note{margin-top:12px}

/* the rows arrive in turn; the fitting one settles into its tint after the
   others have landed, so the eye is led to it rather than starting on it */
.m-card.play .fr-sizes .m-row .gly,
.m-card.play .fr-sizes .m-row>div{animation:frRow .34s var(--out) both;animation-delay:calc(var(--i,0)*.07s + .1s)}
.m-card.play .fr-sizes .m-row.fits{background:transparent;
  animation:frTint .45s var(--ease) both;animation-delay:calc(var(--n,3)*.07s + .3s)}
@keyframes frRow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes frTint{from{background:transparent}to{background:var(--primary-soft)}}
@media (prefers-reduced-motion:reduce){
  .m-card.play .fr-sizes .m-row .gly,.m-card.play .fr-sizes .m-row>div{animation:none}
  .m-card.play .fr-sizes .m-row.fits{animation:none;background:var(--primary-soft)}
  .fr-ov .stp{animation:none}
}
html[data-motion="reduced"] .m-card.play .fr-sizes .m-row .gly,
html[data-motion="reduced"] .m-card.play .fr-sizes .m-row>div{animation:none}
html[data-motion="reduced"] .m-card.play .fr-sizes .m-row.fits{animation:none;background:var(--primary-soft)}
html[data-motion="reduced"] .fr-ov .stp{animation:none}

/* the case's own lines around a card, when a screen shows them without the
   conversation behind it (the book's §19 and §20 frames) */
.m-line{font-size:var(--t-ui);line-height:1.55;margin-top:8px;color:var(--text)}
/* the composer's + is a menu — Card Book §21 */
.addwrap{position:relative;display:flex}
/* OPAQUE, because it opens OVER the card that is asking something. .mpop was
   written for a popover with nothing behind it and never shipped; its glass
   let a question card read straight through the menu. */
.addpop{inset-inline-start:0;inset-inline-end:auto;min-width:300px;max-width:min(360px,90vw);
  background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.addpop>div{align-items:flex-start}
.addpop .t{display:block;font-size:12.5px;font-weight:600;color:var(--text)}
.addpop .s{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45;white-space:normal}
/* a case he brought, as a row under the argument it bears on — §21 */
.bd-panel .m-row.bd-pre{background:var(--primary-soft);border-bottom-color:transparent;border-radius:8px;padding-inline:8px;margin-inline:-8px}
.bd-panel .m-row .tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  color:var(--muted);margin-inline-start:6px;vertical-align:1px;white-space:nowrap}
.bd-panel .m-row .tag.agreed{color:var(--good);border-color:var(--good);background:var(--good-soft)}
.m-row.bd-pre{background:var(--primary-soft);border-radius:8px;padding-inline:8px;margin-inline:-8px;cursor:pointer}
.m-row.bd-pre .t{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-row.bd-pre .m{line-height:1.5}
/* a case he brought, on its Evidence row */
.evc-pre{margin-inline-start:6px;font-size:10.5px;padding:3px 8px;flex:none}
.evc-reask{margin-top:6px;font-size:11px}
.m-line b{color:var(--muted);font-weight:600}

@media (max-width:560px){
  .fr-wrap{width:92vw;padding:28px 0}
  .fr-ov .pg-h{font-size:22px}
  .m-card .m-row{grid-template-columns:20px 1fr;row-gap:2px}
  .m-card .m-row .r{grid-column:2;text-align:start;padding-top:4px}
}

/* ═══ RIGHT TO LEFT — what a logical property cannot say ═══════════════════
   Every margin, padding, border, inset and text-align in these two sheets is
   written logically now, so Arabic, Hebrew, Persian, Urdu and Pashto turn the
   rail, the composer, the drag handle, the cards' actions, the `.r` column
   and the settings window round on their own. What is left here is the three
   kinds of thing a logical property has no word for.

   ONE — THE BOARD IS GEOMETRY, NOT TEXT. The pins are placed at percentages
   that the SVG strings are drawn to join. Mirroring the pins without
   mirroring the strings would leave every string pointing at the wrong pin,
   and the solver's coordinates are in board.js where they belong. So the wall
   itself stays left-to-right in every language; the panel beside it, which is
   prose, follows the page.

   TWO — A GLYPH THAT POINTS. An arrow means "onward", and onward is leftward
   in Arabic. The three that are drawn as characters rather than as icons are
   flipped; the icons are symmetrical and are left alone.

   THREE — A SHADOW OR A GRADIENT WITH A SIDE TO IT. */
[dir="rtl"] .bd-stage, [dir="rtl"] .bd-pins, [dir="rtl"] .bd-strings { direction: ltr; }
[dir="rtl"] .bd-panel { direction: rtl; }

[dir="rtl"] .m-row .r,
[dir="rtl"] .m-gap .t .up,
[dir="rtl"] .ar,
[dir="rtl"] .evp-all,
[dir="rtl"] .wy span { unicode-bidi: plaintext; }

/* an arrow drawn as a character points the way the language runs */
[dir="rtl"] .m-row > span.r,
[dir="rtl"] .lk-o .cfm,
[dir="rtl"] .srcs .src-t { direction: rtl; }

/* the page-turn controls read as a pair, and the pair turns round with them */
[dir="rtl"] .floatbar, [dir="rtl"] .lwbar, [dir="rtl"] .dr-preview-toolbar { flex-direction: row-reverse; }

/* a document, a law's text and a quoted passage are in the PAPER's language,
   not the page's — the paper decides which way its own words run */
[dir="rtl"] .lawpage, [dir="rtl"] .trcol pre, [dir="rtl"] .paper, [dir="rtl"] .m-ex .paper { unicode-bidi: plaintext; }
.paper, .lawpage, .trcol pre, .q2, .orig { unicode-bidi: plaintext; }

/* ═══ A QUOTE IN TWO LANGUAGES ═════════════════════════════════════════════
   The case's language on top, the paper's own words beneath it in a smaller
   line. Click to swap which is which. Never a replacement: the original is
   always on screen, because it is the original the citation gate checked and
   the original the page carries. */
.q2 { display: block; cursor: pointer; }
.q2 .orig {
  display: block; margin-top: 4px; padding-top: 4px;
  border-top: 1px dotted var(--line);
  font-size: .88em; color: var(--muted); font-style: normal;
}
.q2:hover .orig { color: var(--subtle); }

/* ═══ PREPARE — which language, before it is written ═══════════════════════ */
.pr-lang { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.pr-lang .pr-lchip {
  font: inherit; font-size: var(--t-label); letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.pr-lang .pr-lchip.on { border-color: var(--primary-hi); color: var(--text); background: var(--primary-soft); }
.pr-lang .pr-lsel {
  font: inherit; font-size: var(--t-label); padding: 3px 6px;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); max-width: 160px;
}
.pr-lang .pr-lsel.on { border-color: var(--primary-hi); color: var(--text); background: var(--primary-soft); }

/* the Evidence pill's trailing note is one string and one direction: next
   to an Arabic label its neutral characters were being re-ordered, and it
   read "to find 1 · الدليل" */
.stat .tofind { unicode-bidi: isolate; }

/* the names screen: the forms line sits under its own input, quieter than the notes */
.fr-forms{margin:4px 0 14px;font-size:var(--t-meta);color:var(--muted);line-height:1.45}

/* ═══ AFTER THE FIRST PAPER — the brief of 22 September 2026 ═══════════════ */

/* ── the landing line: what the reading found, as prose ──────────────────── */
/* THE RULE IS GONE (22 September). A vertical rule ran down the left of the
   landing line and carried on beside the card under it, so two unrelated
   blocks read as one bracketed thing. A landing is prose — it asks nothing —
   so it is a quiet block with a small mark, and nothing is bracketed. */
.m-landed{margin:14px 0 18px;padding-inline-start:16px;position:relative;
  font-size:var(--t-body);line-height:1.6;color:var(--subtle);opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--out)}
.m-landed::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;
  border-radius:2px;background:var(--primary-hi);opacity:.8}
.m-landed.play,.m-landed.still{opacity:1;transform:none}
.m-landed.still{transition:none}
.m-landed p{margin:0 0 6px}
.m-landed p:last-child{margin-bottom:0}
.m-landed b,.m-landed strong{color:var(--text);font-weight:600}
@media (prefers-reduced-motion:reduce){.m-landed{opacity:1;transform:none;transition:none}}

/* ── the people card: the names as chips ─────────────────────────────────── */
.pp-names{margin:2px 0 12px}
.m-chip.pp{gap:8px;padding-inline-end:8px}
.m-chip.pp b{font-weight:600;color:var(--text)}
.m-chip.pp.on b{color:var(--primary-hi)}
.m-chip.pp .n{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);
  background:var(--surface-2);border-radius:var(--r-pill);padding:1px 6px}
.m-chip.pp .src{font-size:11px;color:var(--muted);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.m-chip.pp .role{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--primary-hi);background:var(--primary-soft);border-radius:var(--r-pill);padding:2px 7px;cursor:pointer}
.m-chip.pp .role:hover{filter:brightness(1.18)}
.pp-hint{font-size:var(--t-meta);color:var(--muted);margin:0 0 10px;line-height:1.5}

/* ── the case line: the sentence, the paper, and the name you can rename ─── */
.caseline .st{color:var(--muted)}
.caseline .nx{color:var(--subtle)}
.caseline b[data-clname]{cursor:text;border-radius:3px;padding:1px 3px;margin-inline-start:-3px}
.caseline b[data-clname]:hover{background:var(--primary-soft);color:var(--primary-hi)}
.cl-rename{font:inherit;font-size:var(--t-meta);font-weight:600;color:var(--text);background:var(--surface-2);
  border:1px solid var(--primary-hi);border-radius:var(--r-s);padding:2px 7px;outline:none;min-width:180px;max-width:min(420px,60vw)}
.cl-rename.chip{font-size:13px;min-width:200px}
.cn-edit{background:none;border:0;padding:0 2px;margin:0;cursor:pointer;color:var(--muted);
  display:inline-flex;align-items:center;flex:none;line-height:0;border-radius:3px}
.cn-edit svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cn-edit:hover{color:var(--primary-hi)}
.cn-edit:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px}

/* a request row the case line just sent you to */
.m-gap.lit{border-color:var(--primary-hi);background:var(--primary-soft)}

/* ── the board: what the court held against you, hollow until you answer ─── */
/* dashed, no notches, no meter: the notches measure what an argument of HIS
   stands on, and this is not his — it is the thing his filing has to meet */
/* THE WALL IS DARK IN BOTH THEMES — every pin on it is painted in the
   board's own fixed palette, not in the page's tokens. A hollow pin drawn
   in var(--subtle) is dark ink on a dark wall the moment the page is light. */
.pin.arg.seed{background:transparent;color:#d7dcea;border:1px dashed rgba(203,211,230,.42);
  box-shadow:none;
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.05) 6px 8px)}
.pin.arg.seed .t{color:#d7dcea}
.pin.arg.seed .s{margin-top:5px}
.pin.arg.seed .s i{font-style:normal;font-size:9.5px;line-height:1.35;color:#99a2b8;letter-spacing:.01em}
.pin.arg.seed:hover{box-shadow:0 0 0 1px rgba(203,211,230,.6)}
/* the dash is in pathLength units: every string is normalised to 1, so a
   dasharray of 3 would be one dash the length of three whole strings */
.bd-strings .str.aim.seed{stroke:rgba(160,172,196,.3);stroke-width:1.1}
.bd-strings.still .str.aim.seed{stroke-dasharray:.014 .018;stroke-dashoffset:0}

/* ═══ THE READING — one card per paper, the document itself is the wait ════
 *
 * "the per-step lines under the paper were gone — only the upload pill and a
 *  cut line." Twelve photographed pages took minutes and the screen said one
 * truncated sentence about it. The reading stands where the upload card
 * stood, with the work line’s glyph at its side (see .rd-g below), the paper's name, its page count, and the
 * steps the server actually wrote beside it, each with its seconds while it
 * runs and a tick when it is done. When the reading ends the card folds and
 * the landing line arrives in its place.
 */
.rdcard{display:grid;
  grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  margin:12px 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);max-width:560px;overflow:hidden;max-height:520px;
  transition:max-height .5s var(--ease),opacity .34s var(--ease),transform .34s var(--ease),
    margin .5s var(--ease),padding .5s var(--ease),border-color .34s var(--ease)}
.rdcard.fold{max-height:0;opacity:0;transform:translateY(-6px);
  margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-color:transparent}
/* THE WORK LINE'S GLYPHS, NOT THE UPLOAD'S STAGE (24 September). The big
   stage rendered cramped in a card this size; the 22-px glyph says the same
   thing — writing, the beam over the pile, the tick — and every keyframe of
   the work line (.wg .g-*) drives it unchanged. */
.rdcard .rd-g{position:relative;width:22px;height:22px;flex:none;margin-top:1px;color:var(--primary-hi)}
.rdcard .rd-g svg{position:absolute;inset:0;width:22px;height:22px;display:none;overflow:visible}
.rdcard .rd-g svg.on{display:block}
.rdcard .rd-g path,.rdcard .rd-g line,.rdcard .rd-g circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rdcard .rd-g .ink{stroke-dasharray:1;stroke-dashoffset:1}
.rdcard.done .rd-g{color:var(--good)}
.rd-e{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--primary-hi);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.rdcard.done .rd-e{color:var(--good)}
.rd-t{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35;overflow-wrap:anywhere}
.rd-p{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.rd-steps{margin-top:10px}
.rd-st{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--muted);padding:2.5px 0}
.rd-st b{flex:none;width:11px;text-align:center;color:var(--primary-hi);font-weight:600}
.rd-st.done b{color:var(--good)}
/* a call in the live step was retried or went to another model: said quietly */
.rd-slow{font-style:normal;font-size:11.5px;opacity:.85}
.rd-st>span:first-of-type{flex:1;min-width:0}
.rd-sec{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;opacity:.85}
/* the live step is the one being written — the same shimmer the step list had */
.rd-st.on>span:first-of-type{background:linear-gradient(90deg,var(--muted) 30%,var(--text) 50%,var(--muted) 70%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:textShimmer 1.5s linear infinite}
/* REDUCED MOTION: the glyph stands still, drawn whole, the way the work
   line's glyphs already do; the list keeps no shimmer. */
@media (prefers-reduced-motion:reduce){
  .rdcard{transition:none}
  .rd-st.on>span:first-of-type{animation:none;-webkit-text-fill-color:currentColor;color:var(--text)}
}
:root[data-motion="reduced"] .rdcard .rd-g .ink,:root[data-motion="reduced"] .rdcard .rd-g .thread,:root[data-motion="reduced"] .rdcard .rd-g .beam{animation:none!important;stroke-dashoffset:0}
:root[data-motion="reduced"] .rd-st.on>span:first-of-type{-webkit-text-fill-color:currentColor;color:var(--text)}

/* AND NOTHING THAT WRAPS A CARD WEARS A RULE BESIDE IT — the second half of
   the same complaint: the rule ran on past the prose and down the card. */
#gcardWrap{border:0;padding-inline-start:0}
.msg.a.is-landing{border-inline-start:0}
.msg.a:has(.m-card),.msg.a:has(.gcard){border-inline-start:0;padding-inline-start:0}
.fr-chatcard{border-inline-start:0;padding-inline-start:0}

/* ══ A QUIET CHAT (25 September) ════════════════════════════════════════════
 * A paper is an attachment card; an answered question is one line; the day is
 * a divider and the time is on hover; the + is a menu with the plans in it.
 * Card tokens only, no left bars. */
/* 1 — the paper, as an attachment: one line folded, about 44 px */
.pcard{max-width:560px;margin:10px 0 12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);position:relative;animation:mcIn .3s var(--out) both}
.pcard .pc-row{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;min-height:44px;box-sizing:border-box}
.pcard.read .pc-row{cursor:pointer}
.pcard.read .pc-row:focus-visible{outline:2px solid var(--primary-hi);outline-offset:2px;border-radius:var(--r-m)}
.pc-th{flex:none;width:28px;height:34px;border-radius:4px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.pc-th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;opacity:0;transition:opacity .2s}
.pc-th img.loaded{opacity:1}
.pc-b{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden;white-space:nowrap}
.pc-t{font-size:var(--t-ui);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.pc-m{font-size:var(--t-meta);color:var(--muted);overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums}
.pc-m .rd-st{display:inline;padding:0}
.pc-s{flex:none;display:flex;align-items:center;gap:6px;font-size:var(--t-meta);color:var(--muted)}
/* THE GLYPH ONCE (30 September): while the steps are open the glyph stands
   beside them, and the row says only Reading…; folded, the tick is back */
.pcard:has(> .pc-rd:not([hidden])) > .pc-row .pc-s .rd-g{display:none}
/* A QUOTE ACROSS TWO PAGES: both crops stacked, each with its page, the join between */
.m-ex-pp{margin:8px 0 2px}
.passpp{display:flex;flex-direction:column;gap:4px;cursor:zoom-in}
.passpp canvas{display:block;width:100%;height:auto;border-radius:6px}
.passpp-l{font-size:var(--t-meta);color:var(--muted)}
.passpp-d{display:flex;align-items:center;gap:8px;margin:6px 0 2px;font-size:var(--t-meta);color:var(--muted)}
.passpp-d::before,.passpp-d::after{content:'';flex:1;height:1px;background:var(--line)}
.pageov-nav{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 10px;border-radius:6px}
.pageov-nav:hover,.pageov-nav.on{color:var(--text);background:var(--surface)}
.pageov-nav[hidden]{display:none}
.pcard .rd-g{position:relative;width:18px;height:18px;flex:none;color:var(--primary-hi)}
.pcard .rd-g svg{position:absolute;inset:0;width:18px;height:18px;display:none;overflow:visible}
.pcard .rd-g svg.on{display:block}
.pcard .rd-g path,.pcard .rd-g line,.pcard .rd-g circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pcard .rd-g .ink{stroke-dasharray:1;stroke-dashoffset:1}
.pcard.read .rd-g{color:var(--good)}
.pcard.read .pc-sw{color:var(--good)}
.pc-chev{flex:none;color:var(--muted);font-size:15px;line-height:1;transition:transform .2s var(--out)}
.pcard.reading .pc-chev{visibility:hidden}
.pcard.open .pc-chev{transform:rotate(90deg)}
.pc-open{padding:2px 14px 12px 44px;font-size:var(--t-meta);color:var(--subtle);line-height:1.55}
.pc-open p{margin:6px 0 0}
.pc-open b{color:var(--text);font-weight:600}
.pc-open a{color:var(--primary-hi);cursor:pointer;text-decoration:none}
.pc-open a:hover{text-decoration:underline}
.pc-acts{margin-top:10px}
.pc-acts .m-btn{font-size:var(--t-meta);padding:6px 12px}
/* THE STEPS, OPEN BELOW THE ROW WHILE IT READS (30 September) — the 22-px
   glyph and every step, ticks as they finish; folds to the one line after */
.pcard .pc-rd{display:flex;align-items:flex-start;gap:10px;padding:0 14px 10px 44px;overflow:hidden;animation:pcRdOpen .28s var(--out)}
.pcard .pc-rd[hidden]{display:none}
.pcard .pc-rd.fold{transition:max-height .3s var(--out),opacity .2s var(--out);opacity:0}
.pcard .pc-rd .rd-g22{width:22px;height:22px;margin-top:6px}
.pcard .pc-rd .rd-g22 svg{width:22px;height:22px}
.pcard .pc-rd .rd-steps{flex:1;min-width:0;margin-top:4px}
.pcard.read .pc-rd{display:none}
@keyframes pcRdOpen{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pcard .pc-rd{animation:none}.pcard .pc-rd.fold{transition:none}}
:root[data-motion="reduced"] .pcard .pc-rd{animation:none}
:root[data-motion="reduced"] .pcard .pc-rd.fold{transition:none}
/* 2 — an answered question, one quiet line that opens */
.ans{max-width:560px;margin:4px 0;position:relative;border-radius:var(--r-s);border:1px solid transparent}
.ans-row{display:flex;align-items:baseline;gap:6px;cursor:pointer;font-size:var(--t-meta);color:var(--muted);
  padding:4px 8px;border-radius:var(--r-s);white-space:nowrap;overflow:hidden}
.ans-row:hover{background:var(--surface)}
.ans-row:focus-visible{outline:2px solid var(--primary-hi);outline-offset:1px}
.ans-ck{flex:none;color:var(--good);font-weight:700}
.ans-q{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--subtle)}
.ans-a{flex:0 1 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.ans.open{background:var(--surface);border-color:var(--line)}
.ans-open{padding:4px 12px 10px 26px;font-size:var(--t-meta);color:var(--subtle);line-height:1.55}
.ans-f{margin-top:6px}
.ans-f .k{display:block;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:1px}
.ans-f ul{margin:2px 0 0;padding-inline-start:18px}
.ans-f a{color:var(--primary-hi);text-decoration:none}
.ans-f a:hover{text-decoration:underline}
.ans-more,.ans-none{color:var(--muted)}
.ans.flash{animation:ansFlash 1.8s var(--out)}
@keyframes ansFlash{0%,40%{background:var(--primary-soft)}100%{background:var(--surface)}}
.yousaid{color:var(--primary-hi);text-decoration:none;font-weight:600;cursor:pointer}
.yousaid:hover{text-decoration:underline}
/* 3 — the day, and the time on hover */
.chat-day{display:flex;justify-content:center;margin:4px 0;font-size:var(--t-label);letter-spacing:.06em;color:var(--muted)}
.chat-day span{padding:2px 10px;border-radius:var(--r-pill);background:var(--surface)}
.msg.u,.pl-made{position:relative}
.chat-time{position:absolute;bottom:-17px;inset-inline-start:2px;font-size:10.5px;color:var(--muted);opacity:0;
  pointer-events:none;transition:opacity .15s;white-space:nowrap;font-variant-numeric:tabular-nums}
.msg.u>.chat-time{inset-inline-start:auto;inset-inline-end:4px}
.ans>.chat-time{bottom:auto;top:5px;inset-inline-start:100%;margin-inline-start:8px}
.msg:hover>.chat-time,.pcard:hover>.chat-time,.ans:hover>.chat-time{opacity:1}
/* 4 — the + menu and its plans */
.addpop .pl-row,.pl-list .pl-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;justify-content:flex-start}
.addpop .pl-row:hover,.addpop .pl-row:focus,.pl-list .pl-row:hover,.pl-list .pl-row:focus{background:var(--surface-hover);outline:none}
.pl-row.dis{cursor:default;opacity:.55}
.pl-row.dis:hover{background:transparent}
.pl-ic{flex:none;width:18px;height:18px;margin-top:1px;color:var(--subtle)}
.pl-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pl-tx{flex:1;min-width:0}
.pl-tx .t{display:block;font-size:12.5px;font-weight:600;color:var(--text)}
.pl-tx .s{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45;white-space:normal}
.pl-more{flex:none;color:var(--muted);align-self:center}
.pl-sep{height:1px;background:var(--line);margin:4px 6px}
.pl-wait{font-size:12px;color:var(--muted);padding:8px 10px}
.pl-custom{padding:2px 10px 8px}
.pl-custom input{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}
.pl-list{margin:4px -8px 0}
.pl-made{display:flex;align-items:baseline;gap:6px;max-width:560px;margin:4px 0;font-size:var(--t-meta);color:var(--subtle);padding:4px 8px}
.pl-made a{color:var(--primary-hi);text-decoration:none;white-space:nowrap}
.pl-made-t b{color:var(--text)}
/* 5 — what else he has: a list, and a drop for all of it */
.mp-lines{width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-ui);line-height:1.5;padding:9px 11px;border-radius:var(--r-s);
  border:1px solid var(--line-strong);background:transparent;color:var(--text);resize:none;margin-top:4px}
.mp-drop{margin:8px 0 2px;padding:12px;border:1px dashed var(--line-strong);border-radius:var(--r-s);text-align:center;
  font-size:var(--t-meta);color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}
.mp-drop:hover,.mp-drop.over,.mp-drop:focus-visible{border-color:var(--primary-hi);background:var(--primary-soft);outline:none}
@media (prefers-reduced-motion:reduce){.pcard{animation:none}.ans.flash{animation:none;background:var(--primary-soft)}.pc-chev{transition:none}}
:root[data-motion="reduced"] .pcard{animation:none}
:root[data-motion="reduced"] .ans.flash{animation:none;background:var(--primary-soft)}
:root[data-motion="reduced"] .pcard .rd-g .ink{animation:none!important;stroke-dashoffset:0}
.addpop>.pl-sep{padding:0;min-height:0;cursor:default;background:var(--line)}
.addpop>.pl-wait,.addpop>.pl-custom{cursor:default}
.addpop>.pl-wait:hover,.addpop>.pl-custom:hover{background:transparent}

/* ── the timeline tells the truth about its sources, and takes a correction (30 September, evening) ──
   A row whose own paper is not here has a hollow thumbnail, hatched and dashed
   like .m-gap; Correct is quiet until the row is hovered or focused, and always
   there on touch; a row he says did not happen is struck through and stays. */
.tlp .row .m-evt .th-gap{display:grid;justify-items:center;gap:4px;max-width:118px;cursor:pointer;text-align:center;align-self:center}
.tlp .row .m-evt .th-gap .pg{width:30px;height:39px;border:1px dashed var(--line-strong);border-radius:3px;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.035) 7px 9px);transition:border-color .15s}
html[data-theme="light"] .tlp .row .m-evt .th-gap .pg{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(12,35,64,.05) 7px 9px)}
.tlp .row .m-evt .th-gap .l{font-size:11px;line-height:1.3;color:var(--muted)}
.tlp .row .m-evt .th-gap .up{display:block;color:var(--primary-hi);font-weight:600}
.tlp .row .m-evt .th-gap:hover .pg,.tlp .row .m-evt .th-gap:focus-visible .pg{border-color:var(--primary-hi)}
.tlp .row .m-evt .th-gap:focus-visible{outline:none}
.tlp .row .m-evt .s .fx{margin-inline-start:10px;color:var(--subtle);text-decoration:none;font-weight:600;opacity:0;transition:opacity .15s;cursor:pointer}
.tlp .row .m-evt:hover .s .fx,.tlp .row .m-evt:focus-within .s .fx,.tlp .row.fixing .s .fx{opacity:1}
.tlp .row .m-evt .s .fx:hover,.tlp .row .m-evt .s .fx:focus-visible{color:var(--primary-hi);outline:none}
@media (hover:none){.tlp .row .m-evt .s .fx{opacity:1}}
.tlp .row .m-evt .s s.was{color:var(--muted)}
.tlp .row.crossed .m-evt .t{text-decoration:line-through;text-decoration-thickness:1px;color:var(--subtle)}
.tl-fixp{display:grid;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);cursor:auto}
.tl-fixp .f{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:center;font-size:var(--t-meta);color:var(--subtle)}
.tl-fixp .dt{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.tl-fixp input:not([type=checkbox]),.tl-fixp select{font:inherit;font-size:var(--t-meta);color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:5px 8px;min-width:0;max-width:100%}
.tl-fixp input:not([type=checkbox]):focus,.tl-fixp select:focus{outline:none;border-color:var(--primary)}
.tl-fixp input[data-fx="event"]{width:100%}
.tl-fixp .chk{display:flex;gap:8px;align-items:center;font-size:var(--t-meta);color:var(--subtle)}
.tl-fixp .acts{display:flex;gap:8px}
.tl-fixp .orsay{font-size:11.5px;color:var(--muted)}
@media (max-width:560px){.tl-fixp .f{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (prefers-reduced-motion:reduce){.tlp .row .m-evt .s .fx,.tlp .row .m-evt .th-gap .pg{transition:none}}
:root[data-motion="reduced"] .tlp .row .m-evt .s .fx,:root[data-motion="reduced"] .tlp .row .m-evt .th-gap .pg{transition:none}
/* the AI line under the composer, and the page after an account is deleted (launch-privacy 3 Oct) */
.composer .ailine{font-size:11px;line-height:1.4;color:var(--muted);text-align:center;padding:5px 12px 0}
.acc-gone{max-width:520px;margin:20vh auto 0;padding:0 16px;font-size:16px;line-height:1.6;color:var(--text)}