/* ============================================================================
   FOURTHPEN FLOWS — v1 design round
   Sana · 10 Aug 2026 · commissioned by Khoa via Will
   Spec: docs/FLOWS_SPEC.md on greenpen PR #58 (branch will/flows-spec)

   LOADED AFTER room.css AND ADDS ONLY. Nothing here overrides a v1/v2 rule —
   the Flows round extends /lane and /readers, it does not replace them, so the
   existing pack must keep rendering byte-identical with this file absent.

   Every token below is inherited from room.css, which is itself read from the
   shipped product (fd-room.tsx, fd-agent-dock.tsx, globals.css). No new palette.
   ============================================================================ */

:root{
  /* The FOURTH readiness state. The spec names three (pass/warn/block); honesty
     rule 2 — "a check over nothing says no data yet, never a confident green" —
     cannot be expressed in three, because a vacuous pass IS a pass unless the
     absence of data has its own visual identity. Slate, deliberately colourless:
     it is not a severity, it is a missing measurement. */
  --nodata:#5d6470; --nodataBg:#eef0f3; --nodataLine:#d6dae0;

  /* Floor cast marking. Not a new hue — this is --gpblue's neighbour already in
     the FD palette, used ONLY for provenance, never for status. */
  --floor:#5a4b8a; --floorBg:#efecf7; --floorLine:#d8d0ec;
}

/* ── the front door ───────────────────────────────────────────────────────── */
/* Two doors, equal weight. The spec's fold ruling is that Flows is the room's
   front door, not a sibling — so this cannot become a chooser between two
   products. Freeform stays exactly as it is: "a session with no script." */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
@media(max-width:720px){ .doors{grid-template-columns:1fr} }
.door{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;
  background:var(--paper2);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:14px 15px;text-decoration:none;color:inherit}
.door:hover{border-color:#d8cdb8;background:#fff}
.door:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.door .dk{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.door b{font-size:15px;font-weight:650;letter-spacing:-.012em;color:var(--deep)}
.door p{margin:0;font-size:12.5px;line-height:1.6;color:#4a4238}
.door.now{border-color:var(--gpblue);background:#fff}
.door.now .dk{color:var(--gpblue)}
.door .same{margin-top:2px;font-size:11px;color:var(--muted);font-style:italic}

/* the named flows — a SMALL set, v1 */
.flowlist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.flow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  width:100%;text-align:left;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:12px 14px;color:inherit;text-decoration:none}
.flow:hover{border-color:#d8cdb8}
.flow:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.flow .ft{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.flow .ft b{font-size:13.5px;font-weight:650;color:var(--deep)}
.flow .ft .writes{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;padding:1px 7px;border:1px solid var(--hair);color:var(--muted);background:var(--paper)}
.flow .ft .writes.no{color:#3f6b52;background:var(--okBg);border-color:var(--okLine)}
.flow .obj{margin:5px 0 0;font-size:12px;line-height:1.55;color:#4a4238}
.flow .seats{margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:10.5px;color:var(--muted);font-family:var(--ui)}
.flow .seats i{font-style:normal;background:var(--paper);border:1px solid var(--hair);
  border-radius:99px;padding:1px 7px;color:#5c5346}
.flow .seats .arw{color:#b9ae98}
.flow .go3{font-size:11.5px;font-weight:650;color:var(--blueText);white-space:nowrap}

/* the objective field — this is the whole new gesture */
.objbox{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:13px 14px}
.objbox label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.objbox .fieldrow{display:flex;gap:8px;align-items:stretch}
.objbox input{flex:1;min-width:0;font:inherit;font-size:13.5px;border:1px solid var(--hair);
  border-radius:var(--r-ctl);padding:9px 11px;background:var(--paper2);color:var(--ink)}
.objbox input:focus{outline:2px solid var(--blue);outline-offset:-1px;background:#fff}
.objbox .gobtn{flex:none;border:1px solid var(--gpblue);background:var(--gpblue);color:#fff;
  border-radius:var(--r-ctl);padding:0 15px;font-size:12.5px;font-weight:650}
.objbox .hint{margin:8px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}

/* ── readiness report ─────────────────────────────────────────────────────── */
.rr{display:flex;flex-direction:column;gap:9px}
.chk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  background:var(--paper2);border:1px solid var(--hair);border-left-width:3px;
  border-radius:var(--r-card);padding:12px 14px}
.chk.pass{border-left-color:#8fa78d}
.chk.warn{border-left-color:var(--warn);background:var(--warnBg);border-color:var(--warnLine)}
.chk.block{border-left-color:var(--no);background:var(--noBg);border-color:var(--noLine)}
.chk.nodata{border-left-color:var(--nodata);background:var(--nodataBg);border-color:var(--nodataLine);
  border-left-style:dashed}
.vd{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  border-radius:99px;padding:3px 9px;white-space:nowrap;border:1px solid transparent;
  font-variant-numeric:tabular-nums}
.vd.pass{color:#1f7a3d;background:var(--okBg);border-color:var(--okLine)}
.vd.warn{color:#79510f;background:#fff;border-color:var(--warnLine)}
.vd.block{color:var(--no);background:#fff;border-color:var(--noLine)}
.vd.nodata{color:var(--nodata);background:#fff;border-color:var(--nodataLine);border-style:dashed}
.chk .ck{font-size:13px;font-weight:650;color:var(--deep);letter-spacing:-.01em}
.chk .cd{margin:4px 0 0;font-size:12px;line-height:1.6;color:#4a4238}
.chk .src2{font-family:var(--ui);font-size:11px;background:#fff;border:1px solid var(--hair);
  border-radius:4px;padding:1px 5px;color:#4a4238}
/* the fix IS an action, not advice */
.fix{display:inline-flex;align-items:center;gap:6px;margin-top:9px;border:1px solid var(--hair);
  background:#fff;border-radius:var(--r-ctl);padding:6px 11px;font-size:12px;font-weight:650;
  color:var(--deep);text-decoration:none}
.fix:hover{border-color:var(--gpblue);color:var(--gpblue)}
.fix:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.fix .tool{font-family:var(--ui);font-size:10px;font-weight:500;color:var(--muted)}
.fix::before{content:"\2192";font-weight:700;color:var(--muted)}
.fix:hover::before{color:var(--gpblue)}

/* the corpus bar — our gap, drawn honestly */
.cbar{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.cbar .crow{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:9px;align-items:center;
  font-size:11.5px}
.cbar .cf{color:#4a4238;font-weight:600}
.cbar .ctrack{height:7px;border-radius:99px;background:#e2dbcd;overflow:hidden}
.cbar .cfill{height:100%;background:#8fa78d;border-radius:99px}
.cbar .cfill.zero{background:transparent;box-shadow:inset 0 0 0 1px var(--noLine)}
.cbar .cn{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;font-size:11px}
.cbar .crow.gapf .cf{color:var(--no)}
.cbar .crow.none2 .cn{font-style:italic}

/* the verdict banner at the top of the report */
.verdict{border-radius:var(--r-card);padding:14px 16px;border:1px solid}
.verdict.go{background:var(--okBg);border-color:var(--okLine)}
.verdict.stop{background:var(--noBg);border-color:var(--noLine)}
/* "we cannot tell" — a gating precondition that was never measured. Drawn in the
   same colourless slate as the NO DATA verdict and dashed, because it is the
   same fact scaled up to the whole report: an absence, not a severity. */
.verdict.unknown{background:var(--nodataBg);border-color:var(--nodataLine);border-style:dashed}
.verdict .vh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.verdict .vh b{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--deep)}
.verdict p{margin:7px 0 0;font-size:12.5px;line-height:1.6;color:#4a4238;max-width:74ch}
.tally{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}

/* ── casting ──────────────────────────────────────────────────────────────── */
/* Risk 3 in the spec: "a customer must never see Floor-agent output presented as
   the product's persona." A header-only mark fails the moment a single note is
   quoted, exported, screenshotted or read aloud — so the cast mark RIDES ON THE
   SEAT ATTRIBUTION, everywhere the seat is named. */
.castbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 11px;
  border-bottom:1px solid var(--hair);background:var(--paper2)}
.castbar.floor{background:var(--floorBg);border-bottom-color:var(--floorLine)}
.castbar .cl{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.castbar.floor .cl{color:var(--floor)}
.castbar .cn2{font-size:11.5px;font-weight:650;color:var(--deep)}
.castbar .why{font-size:10.5px;color:var(--muted);margin-left:auto}
/* the mark itself — shape AND text, never colour alone (it must survive
   greyscale print, colour-blindness, and a screenshot pasted into Slack) */
.cmark{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:1px 5px;
  border:1px solid var(--floorLine);background:#fff;color:var(--floor);white-space:nowrap}
.cmark::before{content:"";width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-bottom:6px solid var(--floor)}
.cmark.app{border-color:var(--hair);color:#5c5346}
.cmark.app::before{border:0;width:6px;height:6px;border-radius:50%;background:#8fa78d}

/* seat ↔ agent binding table */
.bind{width:100%;border-collapse:collapse;font-size:12px}
.bind th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:0 10px 6px 0;border-bottom:1px solid var(--hair)}
.bind td{padding:9px 10px 9px 0;border-bottom:1px solid var(--hair);vertical-align:middle;
  color:#4a4238}
.bind tr:last-child td{border-bottom:0}
.bind .seatn{font-weight:650;color:var(--deep)}
.bind .arw2{color:#b9ae98;padding:0 2px}
.bind .who6{display:flex;align-items:center;gap:7px}
.bind .tok{font-family:var(--ui);font-size:10.5px;color:var(--muted)}
.bind .tok.bad{color:var(--no)}

/* ── the route (flow on the rail) ─────────────────────────────────────────── */
.route{display:flex;flex-direction:column;gap:0;margin-top:8px}
.rstep{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;
  padding:0 0 2px}
.rstep .spine{display:flex;flex-direction:column;align-items:center;height:100%}
.rstep .dot{width:11px;height:11px;border-radius:50%;border:2px solid #cfc4ae;background:#fff;
  flex:none;margin-top:3px}
.rstep .bar2{flex:1;width:2px;background:#e2dbcd;min-height:14px;margin:2px 0}
.rstep:last-child .bar2{display:none}
.rstep.done .dot{background:#b9ae98;border-color:#b9ae98}
.rstep.done .bar2{background:#b9ae98}
.rstep.now .dot{background:var(--gpblue);border-color:var(--gpblue);
  box-shadow:0 0 0 3px rgba(45,91,208,.16)}
.rstep .rb{padding-bottom:12px}
.rstep .rh{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.rstep .rh b{font-size:12.5px;font-weight:650;color:var(--deep)}
.rstep.todo .rh b{color:#6f665a;font-weight:600}
.rstep .pace2{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--paper);border:1px solid var(--hair);border-radius:99px;
  padding:1px 7px}
.rstep .rd2{margin:4px 0 0;font-size:11.5px;line-height:1.55;color:#4a4238}
.rstep .rnow{margin-top:6px;font-size:11px;color:var(--gpblue);font-weight:650}
.rstep.todo .rd2{color:#6f665a}

/* the flow strip that sits above the existing paces — orchestration, not nav */
.fstrip{padding:9px 11px;background:var(--paper2);border-bottom:1px solid var(--hair)}
.fstrip .fh{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.fstrip .fh b{font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--deep)}
.fstrip .fh .of{font-size:10.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.fstrip .obj2{font-size:11.5px;color:#4a4238;line-height:1.5;margin:0 0 7px}
.fstrip .ftrack{display:flex;gap:3px}
.fstrip .ftrack i{flex:1;height:5px;border-radius:99px;background:#e2dbcd}
.fstrip .ftrack i.done{background:#b9ae98}
.fstrip .ftrack i.now{background:var(--gpblue)}
.fstrip .fnote{margin-top:7px;font-size:10.5px;color:var(--muted);line-height:1.5}
.fstrip .fnote b{color:var(--ink);font-weight:600}

/* ── the flow board (round 2) ─────────────────────────────────────────────── */
/* Nodes and edges, rendered from the template. Same ink as everything else —
   the board introduces no palette, because it is not a new place, it is the
   same flow seen from further away. */
svg.board{display:block;width:100%;height:auto;overflow:visible}
svg.board .ed{stroke:#cfc4ae;stroke-width:1.6;fill:#cfc4ae}
svg.board .ed.loop{fill:none;stroke-dasharray:3 3;color:#cfc4ae;stroke:#cfc4ae}
svg.board .ed.edon{stroke:var(--gpblue);fill:var(--gpblue)}
svg.board .looplbl{font-family:var(--sans);font-size:8.5px;fill:var(--muted)}

svg.board .nd rect,svg.board .nd path,svg.board .nd circle{
  fill:#fff;stroke:#cfc4ae;stroke-width:1.6}
svg.board .nd .nl{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--deep)}
svg.board .nd .na{font-family:var(--sans);font-size:9.5px;fill:#4a4238}
svg.board .nd .np{font-family:var(--ui);font-size:8px;fill:var(--muted);letter-spacing:.08em}
svg.board .nd .ng{font-family:var(--ui);font-size:8px;fill:var(--muted);letter-spacing:.08em}

/* run states — the pointer travelling across the board */
svg.board .nd.done rect,svg.board .nd.done path,svg.board .nd.done circle{
  fill:#f1ece1;stroke:#b9ae98}
svg.board .nd.done .nl{fill:#6f665a}
svg.board .nd.now rect,svg.board .nd.now path,svg.board .nd.now circle{
  fill:#fff;stroke:var(--gpblue);stroke-width:2.4}
svg.board .nd.now .nl{fill:var(--gpblue)}
svg.board .nd.todo rect,svg.board .nd.todo path,svg.board .nd.todo circle{
  stroke-dasharray:4 3;stroke:#d8cdb8}
svg.board .nd.todo .nl,svg.board .nd.todo .na{fill:#8a8073}
svg.board.paused .nd.now rect,svg.board.paused .nd.now path{stroke:var(--warn)}
svg.board.paused .nd.now .nl{fill:#79510f}

/* the front-door cards — you pick by SHAPE */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:11px;margin-top:10px}
.pick{display:flex;flex-direction:column;gap:9px;text-align:left;width:100%;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-card);padding:14px 15px;color:inherit;
  text-decoration:none}
.pick:hover{border-color:var(--gpblue)}
.pick:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pick .pv{background:var(--paper2);border:1px solid var(--hair);border-radius:9px;padding:9px 8px}
.pick .ph{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pick .ph b{font-size:14px;font-weight:650;color:var(--deep);letter-spacing:-.012em}
.pick .ph .w2{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;padding:1px 7px;border:1px solid var(--hair);color:var(--muted);background:var(--paper)}
.pick .ph .w2.no{color:#3f6b52;background:var(--okBg);border-color:var(--okLine)}
.pick p{margin:0;font-size:12px;line-height:1.55;color:#4a4238}

/* mini board inside the dock */
.dboard{padding:10px 11px;background:var(--paper2);border-bottom:1px solid var(--hair)}
.dboard .dbh{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}
.dboard .dbh b{font-size:11.5px;font-weight:700;color:var(--deep)}
.dboard .dbh .zoom{margin-left:auto;font-size:10px;color:var(--muted)}

/* THE FLOW IDENTITY CHIP — round 2's smaller fix. A running session must
   announce WHICH flow it is, not just which step. */
.flowchip{display:flex;align-items:center;gap:7px;padding:7px 11px;background:#fff;
  border-bottom:1px solid var(--hair);flex-wrap:wrap}
.flowchip .fi{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:var(--gpblue);background:#eef2fc;border:1px solid #ccd9f5;border-radius:99px;padding:2px 9px}
.flowchip .fi::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gpblue)}
.flowchip .fp{font-size:10.5px;color:var(--muted);font-family:var(--ui);letter-spacing:.06em}
.flowchip .fstep{margin-left:auto;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.flowchip.paused2 .fi{color:#79510f;background:var(--warnBg);border-color:var(--warnLine)}
.flowchip.paused2 .fi::before{background:var(--warn)}

/* A/B comparison furniture */
.ab{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:900px){ .ab{grid-template-columns:1fr} }
.abcol{border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;background:#fff}
.abcol > .abh{padding:10px 13px;background:var(--paper2);border-bottom:1px solid var(--hair)}
/* scope to the direct child only — an unscoped `.abh b` also caught the inline
   <b> inside the description and broke it onto its own line */
.abcol > .abh > b{font-size:13px;font-weight:700;color:var(--deep);display:block}
.abcol > .abh > span{font-size:11.5px;color:#4a4238;line-height:1.5;display:block;margin-top:3px}
.abcol > .abh > span b{font-weight:700;color:var(--deep)}
.abcol.rec{border-color:var(--gpblue)}
.abcol.rec > .abh{background:#eef2fc;border-bottom-color:#ccd9f5}
.abcol .dockmini{width:300px;max-width:100%;margin:0 auto;border-left:1px solid var(--hair);
  background:var(--paper)}
.runctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
.runctl button{border:1px solid var(--hair);background:#fff;border-radius:7px;padding:6px 12px;
  font-size:12px;font-weight:650;color:#4a4238}
.runctl button:hover{border-color:var(--gpblue);color:var(--gpblue)}
.runctl button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.runctl .stepnow{font-size:11.5px;color:var(--muted);margin-left:4px}

/* ============================================================================
   ROUND 3 — RESIDENTS model (docs/RESIDENTS_SPEC.md, greenpen PR #64)
   Sana · 11 Aug 2026 · commissioned by Khoa via Will

   Additive to everything above — round 1/2 pages (door/readiness/flow-lane/
   board-run) must keep rendering byte-identical. --floor/--floorBg/--floorLine
   and .cmark.app/.castbar.floor are LEFT IN PLACE (flow-lane.html round 1/2
   still uses them) even though the product no longer has two casts — that
   history is what actually shipped and stays honest on its own page.
   ============================================================================ */
:root{
  /* ONE mark type now — residents only. Not a status colour; a slate-plum
     kept deliberately distinct from --gpblue (the room's own accent) and from
     every readiness/severity hue, because provenance is neither of those. */
  --resident:#5a4b8a; --residentBg:#efecf7; --residentLine:#d8d0ec;
}

/* the single provenance mark — shape + text, never colour alone (unchanged
   rule, simpler system: one cast, so one mark, everywhere a seat is named) */
.cmark.resident{border-color:var(--residentLine);color:var(--resident)}
.cmark.resident::before{border:0;width:6px;height:6px;border-radius:1px;
  transform:rotate(45deg);background:var(--resident)}
.castbar.resident{background:var(--residentBg);border-bottom-color:var(--residentLine)}
.castbar.resident .cl{color:var(--resident)}

/* ── the proposal card — the run's contract ───────────────────────────────── */
.pcard{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.pcard.blocked{border-color:var(--noLine)}
.pcard .pctop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;
  background:var(--paper2);border-bottom:1px solid var(--hair)}
.pcard.blocked .pctop{background:var(--noBg);border-bottom-color:var(--noLine)}
.pcard .shape{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--gpblue);border-radius:99px;padding:3px 10px}
.pcard.blocked .shape{background:#8a8073}
.pcard .brief{font-size:13px;font-weight:650;color:var(--deep);letter-spacing:-.01em}
.pcard .brief i{font-style:normal;color:var(--muted);font-weight:500}
.pcard .depth{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--hair);
  border-radius:99px;padding:2px 9px}
.pcard .pcbody{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px;
  padding:14px 15px}
@media(max-width:640px){ .pcard .pcbody{grid-template-columns:1fr} }
.pcard .silhouette{background:var(--paper2);border:1px solid var(--hair);border-radius:9px;
  padding:8px}
.pcard .side h4{margin:0 0 8px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.pcard .cast2{display:flex;flex-direction:column;gap:6px}
.pcard .cast2 .cr{display:flex;align-items:center;gap:7px;font-size:12px;color:#4a4238}
.pcard .cast2 .cr .seatn2{color:var(--muted);min-width:64px;flex:none}
.pcard .contract{margin-top:12px;padding:10px 12px;background:var(--paper2);border:1px dashed var(--hair);
  border-radius:8px;font-size:11.5px;line-height:1.55;color:#4a4238}
.pcard .contract b{color:var(--deep)}
.pcard .pcfoot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 15px;
  border-top:1px solid var(--hair);font-size:11.5px;color:var(--muted)}
.pcard .pcfoot .kchat{display:inline-flex;align-items:center;gap:6px}
.pcard .pcfoot .kchat::before{content:"";width:7px;height:7px;border-radius:50%;background:#8fa78d}

/* the honest missing-seat block — same grammar as a readiness BLOCK row */
.seatblock{margin-top:10px;background:var(--noBg);border:1px solid var(--noLine);
  border-left-width:3px;border-radius:var(--r-card);padding:12px 14px}
.seatblock .sh{font-size:13px;font-weight:650;color:var(--no)}
.seatblock p{margin:5px 0 0;font-size:12px;line-height:1.6;color:#4a4238}
.seatfix{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.seatfix button,.seatfix a{border:1px solid var(--hair);background:#fff;border-radius:var(--r-ctl);
  padding:7px 12px;font-size:11.5px;font-weight:650;color:var(--deep);text-decoration:none}
.seatfix button:hover,.seatfix a:hover{border-color:var(--gpblue);color:var(--gpblue)}
.seatfix .primary{border-color:var(--gpblue);background:var(--gpblue);color:#fff}
.seatfix .primary:hover{color:#fff;opacity:.92}

/* busy ≠ missing — a queue, not a block (spec §4) */
.queued{margin-top:10px;background:var(--warnBg);border:1px solid var(--warnLine);
  border-left:3px solid var(--warn);border-radius:var(--r-card);padding:11px 14px;
  font-size:12px;line-height:1.6;color:#4a4238}
.queued b{color:#79510f}

/* ── arrival — landing mid-run from a Keystack link ───────────────────────── */
.viakeystack{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);
  margin-bottom:10px}
.viakeystack .kk{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#3f6b52;
  background:var(--okBg);border:1px solid var(--okLine);border-radius:99px;padding:2px 9px}
.viakeystack .kk::before{content:"";width:6px;height:6px;border-radius:50%;background:#8fa78d}

.needsme{border-radius:var(--r-card);padding:13px 15px;border:1px solid;margin-top:12px}
.needsme.watch{background:var(--paper2);border-color:var(--hair)}
.needsme.act{background:var(--warnBg);border-color:var(--warnLine)}
.needsme .nh{display:flex;align-items:center;gap:8px}
.needsme .nh b{font-size:13.5px;font-weight:700;color:var(--deep)}
.needsme.act .nh b{color:#79510f}
.needsme p{margin:6px 0 0;font-size:12px;line-height:1.6;color:#4a4238}
.needsme .go4{display:inline-block;margin-top:9px;border:1px solid var(--warn);background:#fff;
  border-radius:var(--r-ctl);padding:6px 13px;font-size:12px;font-weight:700;color:#79510f;
  text-decoration:none}

/* ── the tools panel — replaces the old agent drawer ──────────────────────── */
.tpstates{display:flex;gap:6px;padding:8px 10px;background:var(--paper2);border-bottom:1px solid var(--hair)}
.tpstates button{border:1px solid var(--hair);background:#fff;border-radius:99px;padding:4px 11px;
  font-size:10.5px;font-weight:700;color:var(--muted)}
.tpstates button.on{border-color:var(--gpblue);color:var(--gpblue);background:#eef2fc}

.shapecard{border-bottom:1px solid var(--hair);padding:12px 13px}
.shapecard .sc-h{display:flex;align-items:center;gap:8px}
.shapecard .sc-h b{font-size:12.5px;font-weight:700;color:var(--deep)}
.shapecard .sc-h .w2{margin-left:auto}
.shapecard .sc-v{background:var(--paper2);border:1px solid var(--hair);border-radius:8px;
  padding:6px;margin-top:7px}
.shapecard .sc-sub{margin:6px 0 0;font-size:11px;color:var(--muted);line-height:1.5}
.presetlist{display:flex;flex-direction:column;gap:0;margin-top:8px}
.presetlist button{display:flex;align-items:center;gap:7px;text-align:left;border:0;
  border-top:1px solid var(--hair);background:none;padding:7px 2px;font-size:11.5px;color:#4a4238}
.presetlist button:first-child{border-top:0}
.presetlist button:hover{color:var(--gpblue)}
.presetlist .pfill{color:var(--muted);font-family:var(--ui);font-size:10.5px;margin-left:auto}
.presetlist .nodataflag{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nodata);border:1px dashed var(--nodataLine);border-radius:99px;padding:1px 6px}

.ladder{display:flex;flex-direction:column;gap:0;padding:11px 13px}
.rung{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;padding:8px 0}
.rung .rdot{width:12px;height:12px;border-radius:50%;border:2px solid #cfc4ae;background:#fff;
  margin-top:2px}
.rung.done .rdot{background:#8fa78d;border-color:#8fa78d}
.rung.now .rdot{background:var(--gpblue);border-color:var(--gpblue);box-shadow:0 0 0 3px rgba(45,91,208,.16)}
.rung b{font-size:12.5px;font-weight:650;color:var(--deep)}
.rung.todo b{color:#6f665a}
.rung p{margin:3px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.rung .rfix{margin-top:5px}

/* ── the activity lane (amendment 2) ──────────────────────────────────────
   Was ".pendbadge", a pending-APPROVALS lane with a warn-orange count and an
   Open button. Under the MCP ruling nothing is ever pending on a tap, so a
   badge counting things that want you is a lie about the model. Retired
   deliberately rather than left defined: a class literally named "pending"
   is the kind of stale artifact that outlives the idea it encoded.

   What replaces it is a RECORD, not a queue — what the resident did on your
   word. Every row carries its authorization, because §8 makes the instructing
   exchange the audit trail; the mark distinguishes prose from tap WITHOUT
   ranking them, since the ruling's whole point is that both bind equally. */
.actlane{border-bottom:1px solid var(--hair);background:var(--paper2)}
.actlane .alh{display:flex;align-items:center;gap:7px;padding:8px 13px 6px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.actlane .alh .aln{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;
  font-size:10.5px;font-variant-numeric:tabular-nums}
.actrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;
  padding:7px 13px 8px;border-top:1px solid var(--hair)}
.actrow .did{font-size:11.5px;line-height:1.45;color:#4a4238}
.actrow .did b{color:var(--deep);font-weight:650}
/* the authorization, shown not asserted — this is the audit trail */
.actrow .auth{margin-top:3px;font-size:10.5px;line-height:1.45;color:var(--muted);
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.actrow .auth .how{font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:3px;padding:0 4px;color:#5c5346;background:#fff;
  white-space:nowrap}
.actrow .auth q{font-style:italic;color:#4a4238}
.actrow .auth q::before{content:"\201C"}
.actrow .auth q::after{content:"\201D"}
.actrow .when{color:var(--faint,#9a8c7c);white-space:nowrap}
.actlane .alfoot{padding:7px 13px 9px;border-top:1px solid var(--hair);font-size:10.5px;
  line-height:1.5;color:var(--muted)}
.actlane .alfoot a{color:var(--blueText);font-weight:650;text-decoration:none}

/* ── round-3 amendment (RESIDENTS_SPEC §8, Khoa's final ruling 4f9d62a) ────
   the option-button pattern in Keystack chat — a NEW small surface. Not the
   room's own chat (the .lc lane cards), a different product; kept visually
   related (same bubble-and-avatar grammar lane.html already uses) rather than
   inventing an unrelated language for "an agent talking to a human." */
.kchatbox{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:14px 15px}
.kbubble{display:flex;gap:10px;align-items:flex-start}
.kbubble .kav{width:26px;height:26px;border-radius:50%;flex:none;background:var(--resident);
  color:#fff;font-family:var(--serif,serif);font-weight:700;font-size:11px;display:flex;
  align-items:center;justify-content:center}
.kbubble .kmsg{background:var(--paper2);border:1px solid var(--hair);border-radius:12px 12px 12px 3px;
  padding:9px 12px;font-size:12.5px;line-height:1.55;color:#4a4238;max-width:52ch}
.kbtns{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 0 36px}
.kbtn{border:1px solid var(--gpblue);background:#fff;color:var(--blueText);border-radius:8px;
  padding:6px 13px;font-size:12px;font-weight:650}
.kbtn.chosen{background:var(--gpblue);color:#fff}
.kbtn.other{border-color:var(--hair);color:var(--muted);opacity:.55}
.kdecided{margin:8px 0 0 36px;font-size:11px;color:#3f6b52;font-weight:650;display:flex;
  align-items:center;gap:5px}
.kdecided::before{content:"\2713";font-weight:800}
.kprose{margin:12px 0 0 36px;background:var(--paper2);border:1px dashed var(--hair);border-radius:10px;
  padding:8px 11px;font-size:11.5px;color:#4a4238;font-style:italic}
.kdeeplink{margin:9px 0 0 36px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);
  background:#fff;border-radius:10px;padding:8px 12px;text-decoration:none;color:inherit}
.kdeeplink:hover{border-color:var(--gpblue)}
.kdeeplink .dlk{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.kdeeplink b{display:block;font-size:12.5px;color:var(--deep)}

/* ── pack furniture ───────────────────────────────────────────────────────── */
.q2{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#79510f;
  margin-bottom:6px}
.openq{background:var(--paper2);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:15px 17px}
.openq h3{margin:0 0 7px;font-size:14.5px}
.openq p{margin:0 0 9px;font-size:13px;line-height:1.65}
.openq p:last-child{margin-bottom:0}
.mine{border-left:3px solid var(--gpblue)}
.mine .q2{color:var(--gpblue)}

/* ============================================================================
   ROUND 4 — Evidence Packs, Flow Directory, History
   Sana · 11 Aug 2026 · RESIDENTS_SPEC §9 (b113445) + Will's round-4 brief

   Additive as always: rounds 1–3 pages must keep rendering unchanged.
   ============================================================================ */
:root{
  /* MACHINERY provenance. Deliberately NOT --resident: §9 demands two-stage
     attribution where measured and interpreted are unmistakable. The Library
     answers; it has no persona, so it gets an institutional slate-cyan, never
     the resident plum. Shape+text carries it, colour never alone. */
  --lib:#2b6b7d; --libBg:#e8f2f5; --libLine:#c5dde4;
}

/* the machinery mark — a bracket, against the resident's diamond */
.cmark.lib{border-color:var(--libLine);color:var(--lib);background:#fff}
.cmark.lib::before{content:"";width:0;height:0;border:0;border-left:2px solid var(--lib);
  border-top:2px solid var(--lib);border-bottom:2px solid var(--lib);width:5px;height:8px;
  border-radius:1px 0 0 1px;transform:none;background:none}

/* ── the pack announcement in the dock ──────────────────────────────────── */
.packcard{display:block;padding:11px 13px;background:var(--libBg);border:1px solid var(--libLine);
  border-radius:10px;margin:10px 11px;text-decoration:none;color:inherit}
.packcard:hover{border-color:var(--lib)}
.packcard .pk{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lib)}
.packcard b{display:block;font-size:13px;font-weight:650;color:var(--deep);margin-top:5px}
.packcard .cnt{margin-top:4px;font-size:11.5px;color:#4a4238}
.packcard .go5{margin-top:7px;font-size:11px;font-weight:650;color:var(--blueText)}

/* ── the split view: draft left, pack right ─────────────────────────────── */
.splitwrap{flex:1;min-width:0;display:flex;overflow:hidden}
.splitL{flex:1;min-width:0;overflow-y:auto;background:var(--paper);padding:18px 22px 40px;
  border-right:1px solid var(--hair)}
.splitR{width:440px;flex:none;overflow-y:auto;background:var(--paper2)}
@media(max-width:1100px){.splitR{width:380px}}
.splitR .rh{position:sticky;top:0;z-index:2;background:var(--paper2);padding:12px 15px;
  border-bottom:1px solid var(--hair)}
.splitR .rh b{font-size:13.5px;font-weight:650;color:var(--deep)}
.splitR .rh p{margin:4px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}

/* evidence group per matched title */
.eg{border-bottom:1px solid var(--hair)}
.eg .egh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:12px 15px 8px}
.eg .egh b{font-size:13px;font-weight:650;color:var(--deep)}
.eg .egh .yr{font-size:11px;color:var(--muted);font-family:var(--ui)}
.eg .egh .kin{margin-left:auto;font-family:var(--ui);font-size:10px;color:var(--lib);
  border:1px solid var(--libLine);background:var(--libBg);border-radius:99px;padding:2px 8px}
.eg .why{padding:0 15px 10px;font-size:12px;line-height:1.55;color:#4a4238}
.eg .why em{font-style:normal;color:var(--lib);font-weight:600}

/* a row of measured evidence vs a row of resident interpretation */
.erow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;padding:9px 15px;
  border-top:1px dashed var(--hair)}
.erow.evidence{background:#fbfcfd}
.erow.suggestion{background:var(--residentBg)}
.erow .etag{font-family:var(--ui);font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border-radius:3px;padding:2px 6px;height:fit-content;white-space:nowrap;
  border:1px solid}
.erow.evidence .etag{color:var(--lib);border-color:var(--libLine);background:#fff}
.erow.suggestion .etag{color:var(--resident);border-color:var(--residentLine);background:#fff}
.erow .ebody{font-size:12px;line-height:1.55;color:#4a4238}
.erow .ebody q{font-style:italic;color:var(--ink)}
.erow .meta2{margin-top:5px;font-family:var(--ui);font-size:10px;color:var(--muted)}
.erow .anchor{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:650;color:var(--blueText);background:#fff;border:1px solid var(--hair);
  border-radius:6px;padding:4px 9px;cursor:pointer}
.erow .anchor:hover{border-color:var(--gpblue)}
.erow .anchor.on{background:#eef2fc;border-color:var(--gpblue)}
.erow .applyrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:8px}
.erow .applybtn{font-size:11px;font-weight:650;color:var(--deep);background:#fff;
  border:1px solid var(--hair);border-radius:6px;padding:4px 10px;cursor:pointer}
.erow .applybtn:hover{border-color:var(--resident);color:var(--resident)}
.erow .primary2{font-size:10.5px;color:var(--muted);font-style:italic}

/* the anchor highlight in the user's draft */
.sheet mark.anch{background:#fdf0d8;border-bottom:2px solid var(--warn);padding:1px 0}
.sheet mark.anch.lit{background:#ffe3a8;box-shadow:0 0 0 3px rgba(240,180,91,.28)}

/* excerpt, rights-limited */
.excerpt{margin-top:6px;padding:8px 11px;background:#fff;border:1px solid var(--hair);
  border-left:3px solid var(--libLine);border-radius:0 7px 7px 0;font-size:11.5px;line-height:1.5;
  color:#4a4238;font-style:italic}
.excerpt .lim{display:block;margin-top:5px;font-style:normal;font-family:var(--ui);font-size:9.5px;
  color:var(--muted);letter-spacing:.05em}

/* ── flow directory (BROWSE) ────────────────────────────────────────────── */
.dirwrap{flex:1;min-width:0;display:flex;overflow:hidden}
.dirL{width:250px;flex:none;background:var(--paper2);border-right:1px solid var(--hair);overflow-y:auto}
.dirL .dh2{padding:11px 14px 7px;font-family:var(--ui);font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dirItem{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:0;
  border-top:1px solid var(--hair);cursor:pointer}
.dirItem:hover{background:#fff}
.dirItem.on{background:#fff;box-shadow:inset 3px 0 0 var(--gpblue)}
.dirItem b{display:block;font-size:13px;font-weight:650;color:var(--deep)}
.dirItem .ds{display:block;margin-top:3px;font-size:11px;color:var(--muted);line-height:1.45}
.dirC{flex:1;min-width:0;overflow-y:auto;background:var(--paper);padding:20px 24px 40px}

/* people-in-order — the readable form for newcomers */
.chain2{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:14px}
.oseat{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--hair);
  border-radius:12px;padding:12px 14px;min-width:150px}
.oseat.ph{background:var(--paper2);border-style:dashed}
.oseat .role{font-family:var(--ui);font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.oseat .who7{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:650;color:var(--deep)}
.oseat.ph .who7{color:var(--muted);font-weight:600}
.oseat .act{font-size:11.5px;color:#4a4238;line-height:1.45}
.oseat .pace3{font-family:var(--ui);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.arrow2{display:flex;align-items:center;padding:0 9px;color:#b9ae98;font-size:16px}
.gateseat{display:flex;flex-direction:column;justify-content:center;gap:4px;background:#fff;
  border:1px solid var(--gpblue);border-radius:12px;padding:12px 16px;min-width:110px}
.gateseat .role{color:var(--gpblue)}
.gateseat .who7{color:var(--gpblue);font-size:13px}

.viewfam{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.viewfam a{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:#fff;
  border:1px solid var(--hair);border-radius:9px;padding:9px 13px;color:inherit;min-width:132px}
.viewfam a:hover{border-color:var(--gpblue)}
.viewfam a.now2{border-color:var(--gpblue);background:#eef2fc}
.viewfam .vk{font-family:var(--ui);font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.viewfam a.now2 .vk{color:var(--gpblue)}
.viewfam b{font-size:12.5px;color:var(--deep)}
.viewfam span{font-size:10.5px;color:var(--muted);line-height:1.4}

/* ── version history ────────────────────────────────────────────────────── */
.vrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start;
  padding:11px 15px;border-top:1px solid var(--hair)}
.vrow:first-child{border-top:0}
.vrow .vdot{width:9px;height:9px;border-radius:50%;background:var(--gpblue);margin-top:5px}
.vrow.archived .vdot{background:transparent;box-shadow:inset 0 0 0 1px var(--muted)}
.vrow.recovered .vdot{background:var(--warn)}
.vrow .vt{font-size:12.5px;font-weight:650;color:var(--deep)}
.vrow .vd{font-size:11.5px;color:#4a4238;margin-top:3px;line-height:1.5}
.vrow .vm{font-family:var(--ui);font-size:10px;color:var(--muted);white-space:nowrap;text-align:right}
.robadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);font-size:9px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#79510f;
  background:var(--warnBg);border:1px solid var(--warnLine);border-radius:3px;padding:2px 6px}

/* a one-node shape scales to absurd size at width:100% — cap the browse preview */
.dirC .pv svg.board{max-height:150px}

/* ============================================================================
   ROUND 5 — the flow IS the face-order (Khoa reset, 11 Aug)
   The drawer keeps its idiom; the faces just mean something new. No new page,
   no silhouette on the user path.
   ============================================================================ */
.flowpick{padding:10px 11px 8px;border-bottom:1px solid var(--hair);background:var(--paper2)}
.flowpick .fpk{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.fplist{display:flex;gap:5px;flex-wrap:wrap}
.fpbtn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:#4a4238;background:#fff;border:1px solid var(--hair);border-radius:99px;padding:4px 11px;
  cursor:pointer}
.fpbtn:hover{border-color:#d8cdb8}
.fpbtn.on{border-color:var(--gpblue);color:var(--gpblue);background:#eef2fc}
.fpbtn .fpgap{color:var(--no);font-size:8px;line-height:1}
.fphint{margin:7px 0 0;font-size:10.5px;line-height:1.5;color:var(--muted)}

.castorder{padding:11px 11px 12px;border-bottom:1px solid var(--hair)}
.castrow{display:flex;align-items:flex-start;gap:0;flex-wrap:wrap;justify-content:center}
.castslot{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;
  padding:4px 6px;cursor:pointer;border-radius:9px;min-width:62px}
.castslot:hover{background:var(--paper2)}
.castslot:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.castslot .cn3{font-size:11.5px;font-weight:650;color:var(--deep);line-height:1.2}
.castslot .co3{font-family:var(--ui);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.2}
/* done work reads as spent, not as failed */
.castslot.done .f{filter:grayscale(.55);opacity:.62}
.castslot.done .cn3{color:var(--muted);font-weight:600}
/* the live worker is the one thing the eye should find */
.castslot.live .f{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--gpblue)}
.castslot.live .cn3{color:var(--gpblue)}
.castslot.live .co3{color:var(--gpblue)}
.castslot[aria-pressed="true"]{background:#eef2fc}
.castslot.empty{cursor:default;opacity:.9}
.castslot.empty .cn3{color:var(--muted);font-weight:600}
.castslot.empty .co3{color:var(--no)}
.phface{width:38px;height:38px;border-radius:50%;border:1.5px dashed var(--noLine);
  display:flex;align-items:center;justify-content:center;color:var(--no);font-size:15px;
  font-weight:700;background:#fff}
.gateface{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gpblue);
  display:flex;align-items:center;justify-content:center;color:var(--gpblue);font-size:17px;
  background:#fff}
.castslot.gate2 .cn3{color:var(--gpblue)}
.castslot.gate2.live .gateface{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--gpblue)}
.arrow3{align-self:center;color:#c4b9a3;font-size:15px;padding:0 1px;margin-top:-14px}
.castnote{margin:9px 0 0;font-size:11px;line-height:1.55;color:var(--muted);text-align:center}
.castnote b{color:var(--ink)}

/* ============================================================================
   ROUND 6 — FLOW TYPES in the drawer (Khoa ruling 11 Aug, spec §7 efa045c)
   Purely additive: new class names only. The round-5 strip is untouched — the
   type row sits under the flow row inside the same .flowpick block, so picking
   a flow and picking its type read as one gesture in two steps.
   ============================================================================ */
.fpk2{margin-top:9px}
.fpk .fpsub{font-weight:600;letter-spacing:.02em;text-transform:none;color:#b3a894;
  margin-left:6px;font-size:9px}

/* THE LADDER, IN THE CONTROL. One bar per seat, so a type's size is legible
   before you pick it and the largest type reads as the top rung of a ladder
   rather than as a differently-shaped thing. */
.trung{display:inline-flex;align-items:flex-end;gap:1.5px;height:9px}
.trung i{width:2px;background:#c4b9a3;border-radius:1px;height:5px}
.trung i:nth-child(2){height:6.5px}
.trung i:nth-child(3){height:8px}
.trung i:nth-child(4){height:9px}
.trung i:nth-child(5){height:10px}
.tpbtn.on .trung i{background:var(--gpblue)}
.tpbtn.top{border-style:dashed}
.tpbtn.top.on{border-style:solid}

/* the eight segments a type lights — same eight the session chip uses, so the
   footprint and the running pace are visibly the same vocabulary */
.segfoot{display:flex;align-items:center;gap:3px;justify-content:center;margin-top:9px}
.segfoot i{width:9px;height:3px;border-radius:2px;background:#e2d9c8}
.segfoot i.on{background:var(--gpblue)}
.segfoot b{font-family:var(--ui);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-left:5px}

/* a roster gap, stated under the faces that show it */
.castgap{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--hair);
  font-size:10.5px;line-height:1.5;color:#79510f;text-align:left}

/* ============================================================================
   ROUND 7 — THE GREAT SIMPLIFICATION (Khoa, 11 Aug)
   4P v1 is four things: the TEXT, the BOARD (its alt view), the RECORD, the
   CATALOGUE. These are the styles for what remains after the chrome came out —
   there is deliberately no composer, gate tray or markup surface to style.
   Purely additive: new class names only.
   ============================================================================ */

/* the alt-view toggle, in the tab row where the artifact already is */
.vtog{display:flex;gap:3px;background:#fff;border:1px solid var(--hair);border-radius:8px;padding:2px}
.vtog button{border:0;background:none;font:inherit;font-size:11.5px;font-weight:650;color:#4a4238;
  padding:3px 11px;border-radius:6px;cursor:pointer}
.vtog button.on{background:#eef2fc;color:var(--gpblue)}
/* a tab whose artifact is not shaped gets no button — and says why on hover */
.vnone{font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#b3a894;font-weight:700;padding:4px 6px;cursor:help}

/* the board, hosted inside the tab rather than on a page of its own */
.pbwrap{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--paper2);
  background-image:radial-gradient(#e0d7c6 1px,transparent 1px);background-size:22px 22px;
  cursor:grab;touch-action:none}
.pbwrap.drag{cursor:grabbing}
.pblay{position:absolute;left:12px;bottom:12px;display:flex;gap:4px;background:rgba(255,255,255,.96);
  border:1px solid var(--hair);border-radius:99px;padding:3px;box-shadow:0 4px 12px rgba(60,40,20,.09)}
.pblay button{border:0;background:none;font:inherit;font-size:11px;font-weight:600;color:#4a4238;
  padding:4px 11px;border-radius:99px;cursor:pointer}
.pblay button.on{background:#eef2fc;color:var(--gpblue)}

/* the drawer body — one scroll, no docked furniture under it */
.dockbody{flex:1;min-height:0;overflow-y:auto}
.dockfoot{margin:11px;padding-top:9px;border-top:1px solid var(--hair);font-size:10.5px;
  line-height:1.55;color:var(--muted)}

/* the live run is an ENTRY, not a second header — see renderRecord() */
.rhk{display:block;font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gpblue);margin-bottom:3px}
.rec.islive{border-color:var(--gpblue);background:#fff}
.runlive{margin:0 0 10px;padding:8px 0 10px;border-bottom:1px dashed var(--hair)}

/* THE RECORD — collapsed to title · type · outcome, expanding to the whole run */
.reclist{display:flex;flex-direction:column;gap:8px;padding:11px}
.rec{border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;background:var(--paper2)}
.rech{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:start;width:100%;
  text-align:left;border:0;background:none;font:inherit;padding:10px 11px;cursor:pointer}
.rech:hover{background:#fff}
.rech .tw2{color:var(--muted);font-size:10px;transition:transform .12s;padding-top:3px}
.rec.open .rech .tw2{transform:rotate(90deg)}
.rect{font-size:12.5px;font-weight:650;color:var(--deep);line-height:1.4}
.recm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.rectype{font-family:var(--ui);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--gpblue);background:#eef2fc;border:1px solid #bcd0f5;
  border-radius:3px;padding:1px 5px}
.recmode{font-family:var(--ui);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}
.recflag{font-family:var(--ui);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:#79510f;background:var(--warnBg);border:1px solid var(--warnLine);
  border-radius:3px;padding:1px 5px}
.recout{flex-basis:100%;font-size:10.5px;color:var(--muted);line-height:1.45}
.recbody{display:none;padding:0 11px 11px}
.rec.open .recbody{display:block}

/* machinery posts without a face — it is not a person and must not read as one */
.machface{width:26px;height:26px;border-radius:6px;flex:none;background:#eee8dc;
  border:1px solid var(--hair);position:relative}
.machface::after{content:"";position:absolute;inset:8px;border-radius:2px;background:#b3a894}
.machface.lib{background:var(--libBg);border-color:var(--libLine)}
.machface.lib::after{background:var(--lib)}
.cmark.mach{border-color:var(--hair);color:#6b6152;background:#fff}
.cmark.mach::before{border:0;width:6px;height:6px;border-radius:1px;background:#b3a894}
.measured{margin-top:6px;font-family:var(--ui);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700;color:var(--lib)}

/* THE CATALOGUE — browse what you can ask for, then go and ask for it */
.catk{padding:11px 11px 6px;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.dockbody .fplist{padding:0 11px 7px}
.dockbody .castrow{padding:4px 8px 0}
.dockbody .segfoot{padding-bottom:2px}
.dockbody .castgap{margin:8px 11px 0}
.saythis{margin:11px;padding:11px 12px;background:var(--residentBg);border:1px solid var(--residentLine);
  border-radius:var(--r-card)}
.saythis .sk{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--resident);margin-bottom:6px}
.saythis q{display:block;font-size:12.5px;line-height:1.5;color:var(--deep);font-style:italic}
.saythis .sn{display:block;margin-top:7px;font-size:10.5px;line-height:1.5;color:#6b6152}
.toolwrap{display:flex;flex-wrap:wrap;gap:5px;padding:0 11px}
.tool2{font-size:11px;background:#fff;border:1px solid var(--hair);border-radius:99px;
  padding:3px 10px;color:#4a4238}

/* HISTORY — the one auxiliary surface */
.vlist{display:flex;flex-direction:column;gap:1px;padding:0 11px}
.vrow{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--paper2);
  border:1px solid var(--hair);border-radius:7px;font-size:11.5px;flex-wrap:wrap}
.vrow b{color:var(--deep);font-size:12px;min-width:34px}
.vrow .vw{color:#4a4238;flex:1;min-width:80px}
.vrow .vwhen{font-family:var(--ui);font-size:9.5px;color:var(--muted)}
.vrow .vact{font-family:var(--ui);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--gpblue)}
.vrow.now{border-color:var(--gpblue);background:#fff}
.vrow.arch{opacity:.66}
.vrow.arch .vact{color:#6b6152}
/* an arrow belongs to the slot it points at, so the pair wraps as one */
.castgrp{display:inline-flex;align-items:flex-start}

/* ============================================================================
   ROUND 8 — four refinements from Khoa's live review (11 Aug)
   Purely additive: new class names only.
   ============================================================================ */

/* (3) the concept page has to say what it is, where you cannot miss it */
.chip.specchip{background:var(--warnBg);border-color:var(--warnLine);color:#79510f;font-weight:800}
.btn.prim{border-color:var(--gpblue);color:var(--gpblue);background:#eef2fc;font-weight:700}
.specbar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 14px;
  background:var(--warnBg);border-bottom:1px solid var(--warnLine);font-size:12px;
  line-height:1.55;color:#5c4a24}
.specbar b{color:#4a3a16}
.specgo{margin-left:auto;display:flex;align-items:baseline;gap:8px}
.specgo a{color:var(--gpblue);font-weight:700;text-decoration:none;white-space:nowrap}
.specgo a:hover{text-decoration:underline}

/* (4) the prototype says it is one, and every drop offers its own undo */
.protochip{position:absolute;left:14px;top:12px;z-index:6;font-family:var(--ui);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#79510f;
  background:var(--warnBg);border:1px solid var(--warnLine);border-radius:99px;padding:4px 11px}
.toast{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:30;
  display:flex;align-items:center;gap:10px;background:#2a2419;color:#f6f1e6;
  border-radius:10px;padding:9px 12px;box-shadow:0 10px 26px rgba(0,0,0,.3);font-size:12px}
.toast .tm{font-weight:650}
.toast .tu{border:1px solid #6d6353;background:none;color:#f6f1e6;font:inherit;font-size:11.5px;
  font-weight:700;border-radius:6px;padding:3px 11px;cursor:pointer}
.toast .tu:hover{background:#3b3325}
.toast .tv{font-family:var(--ui);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:#b9ae99}

/* (3) the board glyph on each shaped tab — discoverability, not decoration */
.fdtabs .t .tbd{margin-left:6px;font-size:10px;color:#b3a894;border-radius:4px;padding:1px 3px;
  vertical-align:1px}
.fdtabs .t .tbd:hover{background:#eef2fc;color:var(--gpblue)}
.fdtabs .t.on .tbd{color:var(--gpblue)}

/* (1) two grains, two sub-tabs inside the one catalogue panel */
.catsub{display:flex;gap:4px;padding:10px 11px 8px;border-bottom:1px solid var(--hair);
  background:var(--paper2)}
.catsub button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--hair);background:#fff;font:inherit;padding:6px 10px;border-radius:8px;
  cursor:pointer;text-align:left}
.catsub button b{font-size:12px;font-weight:700;color:#4a4238;line-height:1.2}
.catsub button i{font-family:var(--ui);font-style:normal;font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.catsub button.on{border-color:var(--gpblue);background:#eef2fc}
.catsub button.on b,.catsub button.on i{color:var(--gpblue)}

.toolist{display:flex;flex-direction:column;gap:1px;padding:10px 11px 0}
.toolrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:8px 10px;
  background:var(--paper2);border:1px solid var(--hair);border-radius:8px}
.toolrow b{font-size:12px;color:var(--deep)}
.toolrow .tw3{flex-basis:100%;font-size:11px;line-height:1.45;color:#4a4238}
.toolrow .tr3{font-family:var(--ui);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}

/* (2b) flows are the parent; types hang off the selected one */
.flowlist{display:flex;flex-direction:column;gap:3px;padding:0 11px 4px}
.flowbtn{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;width:100%;text-align:left;
  border:1px solid var(--hair);background:#fff;font:inherit;padding:7px 10px;border-radius:8px;
  cursor:pointer}
.flowbtn b{font-size:12.5px;color:var(--deep)}
.flowbtn .fsub{flex-basis:100%;font-size:10.5px;line-height:1.4;color:var(--muted)}
.flowbtn:hover{border-color:#d8cdb8}
.flowbtn.on{border-color:var(--gpblue);background:#eef2fc}
.flowbtn.on b{color:var(--gpblue)}
.typenest{margin:0 0 2px 16px;padding:7px 0 3px 12px;border-left:2px solid #d9e2f7;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tnk{font-family:var(--ui);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-right:2px}
.tpbtn2{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:#4a4238;background:#fff;border:1px solid var(--hair);border-radius:99px;
  padding:3px 9px;cursor:pointer}
.tpbtn2:hover{border-color:#d8cdb8}
.tpbtn2.on{border-color:var(--gpblue);color:var(--gpblue);background:#eef2fc}
.tpbtn2.on .trung i{background:var(--gpblue)}
.tpbtn2.top{border-style:dashed}
.tpbtn2.top.on{border-style:solid}
.tpbtn2 .fpgap{color:var(--no);font-size:8px;line-height:1}

/* (2a) the fix, named on the seat that needs it */
.castslot.empty[data-fix]{cursor:pointer}
.castslot.empty[data-fix]:hover .phface{border-color:var(--gpblue);color:var(--gpblue)}
.castslot.empty.picked .phface{border-style:solid;border-color:var(--gpblue);color:var(--gpblue)}
.castslot.empty.picked .co3{color:var(--gpblue)}
.seatfix2{margin:9px 11px 0;padding:10px 12px;background:#fff;border:1px solid var(--gpblue);
  border-radius:var(--r-card)}
.sfh{font-family:var(--ui);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;color:var(--muted);margin-bottom:5px}
.sfa{font-size:12.5px;font-weight:700;color:var(--gpblue);line-height:1.4}
.sfa.resident{color:var(--resident)}
.sfd{margin:5px 0 0;font-size:11px;line-height:1.5;color:#4a4238}
.sfsim{margin-top:8px;font-size:11px;font-weight:650;color:#4a4238;background:var(--paper2);
  border:1px dashed var(--hair);border-radius:7px;padding:5px 10px;cursor:pointer}
.sfsim:hover{border-color:#d8cdb8;background:#fff}
.sfn{display:block;margin-top:6px;font-size:10.5px;line-height:1.5;color:var(--muted)}

/* ── THE [hidden] GUARD ────────────────────────────────────────────────────
   The UA sheet's `[hidden]{display:none}` loses to any class rule that sets
   display, so `.pblay{display:flex}` + hidden left the layout toggle on screen
   from round 7 onward — and the check passed, because it read the `hidden`
   PROPERTY instead of what rendered. Property and pixels are different claims.
   One guard, and the assertions now measure the box. */
[hidden]{display:none !important}