/* ============================================================================
   GREENPEN WRITERS ROOM — design pack stylesheet
   Sana · 31 Jul 2026

   GROUNDED, NOT INVENTED. Every value below is read from the shipped product:

     apps/web/components/fd-room.tsx      the Studio shell + its FD palette
     apps/web/components/fd-agent-dock.tsx  the dock this room docks into
     apps/web/app/globals.css             Greenpen Warm Playbook tokens

   The Studio is a Final-Draft-faithful grey desktop surface. The product
   everywhere else is warm paper. The room sits in the grey chrome but is
   rendered on warm paper, because it is the one place in the Studio where
   people and agents talk. That is the product identity leaking in exactly
   where it belongs — not a new palette.
   ============================================================================ */

:root{
  /* FD chrome — verbatim from fd-room.tsx line 36 */
  --desk:#9c9c9c; --chrome:#e9e9e9; --chrome2:#f3f3f3; --panel:#efefef;
  --border:#c4c4c4; --line:#d7d7d7; --ink:#2b2b2b; --muted:#717171;
  --blue:#2f7be6; --blueBg:#d8e8fc; --blueText:#175fc4;

  /* semantics already shipped in the review/compare UI */
  --ok:#1f7a3d;   --okBg:#e7f6ec;   --okLine:#bfe6cc;
  --no:#c0392b;   --noBg:#fdece9;   --noLine:#f0c8c0;
  --warn:#d98324; --warnBg:#fdf3e4; --warnLine:#ead7bd;

  /* Warm Playbook (globals.css) — the room's own ground */
  --paper:#f6f2ea; --paper2:#fcfaf6; --hair:#e8e0d3; --deep:#221a14;
  --gpblue:#2d5bd0;

  --r-ctl:8px; --r-card:14px;
  --sans:Figtree,-apple-system,"SF Pro Text",ui-sans-serif,system-ui,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --mono:"Courier Prime","Courier New",Courier,monospace;
  --ui:ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--desk);
  -webkit-font-smoothing:antialiased;letter-spacing:-.006em}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--blueText)}

/* ── the Studio shell ─────────────────────────────────────────────────────── */
.fd{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--desk)}

.fdtop{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--chrome);
  border-bottom:1px solid var(--border);flex:none;font-size:11px;flex-wrap:wrap}
.fdtop .menus{display:flex;gap:2px;color:var(--ink)}
.fdtop .menus span{padding:2px 6px;border-radius:4px}
.fdtop .menus span:hover{background:#0000000d}
.fdtop .proj{display:flex;align-items:center;gap:5px;min-width:150px;flex:1;
  padding:2px 5px;border-radius:4px;font-size:12.5px}
.fdtop .proj b{font-weight:600}
.fdtop .chip{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:1px 7px;
  font-size:11px;background:#eef2f6;color:var(--ink);white-space:nowrap}
.fdtop .btn{display:inline-flex;align-items:center;gap:4px;border:1px solid #b9b9b9;
  background:#fff;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:500;color:var(--ink)}
.fdtop .btn.on{background:var(--blueBg);border-color:var(--blue);color:var(--blueText)}
.fdtop .grow{flex:1}

.fdtabs{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--chrome2);
  border-bottom:1px solid var(--border);flex:none;overflow-x:auto}
.fdtabs .seg{display:flex;background:#e2e2e2;border-radius:6px;padding:2px;margin:5px 0;flex:none}
.fdtabs .seg span{padding:2px 9px;font-size:11px;border-radius:4px;color:var(--muted);font-weight:500}
.fdtabs .seg span.on{background:#fff;color:var(--ink)}
.fdtabs .t{flex:none;padding:6px 12px;font-size:12.5px;font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0}
.fdtabs .t.on{color:var(--blueText);border-bottom-color:var(--blue);background:#fff}

.fdbody{display:flex;flex:1;min-height:0;overflow:hidden}

/* left rail — drafts + scenes (248px, shipped width) */
.fdside{width:248px;flex:none;display:flex;flex-direction:column;background:var(--panel);
  border-right:1px solid var(--border);overflow:hidden}
.fdside h4{margin:0;padding:8px 12px 6px;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.fdside .drafts{max-height:42%;overflow-y:auto;border-bottom:1px solid var(--border);padding-bottom:6px}
.fdside .d{display:flex;align-items:center;gap:6px;padding:3px 10px;font-size:12px;color:var(--ink)}
.fdside .d.on{background:var(--blueBg);color:var(--blueText)}
.fdside .d b{font-variant-numeric:tabular-nums;font-weight:600}
.fdside .d .who{margin-left:auto;font-size:9.5px;padding:0 5px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--muted)}
.fdside .scenes{flex:1;overflow-y:auto;padding:0 6px 8px}
.fdside .s{display:flex;gap:7px;padding:4px 6px;border-radius:5px;font-size:11.5px;color:var(--ink);
  align-items:baseline}
.fdside .s:hover{background:#0000000a}
.fdside .s i{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px;width:14px;flex:none}
.fdside .s span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdside .s .mk{margin-left:auto;width:6px;height:6px;border-radius:50%;flex:none}
.fdside .s .mk.ed{background:var(--warn)} .fdside .s .mk.co{background:var(--blue)}

/* centre — the script page */
.fdmain{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#8f8f8f}
.fdbanner{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:12px;flex:none;
  border-bottom:1px solid}
.fdbanner.blue{background:#eef4ff;border-color:#cbdcf7;color:var(--blueText)}
.fdbanner.warn{background:var(--warnBg);border-color:var(--warnLine);color:#79510f}
.fdbanner .grow{flex:1;color:var(--muted)}
.fdbanner .b{border:1px solid #b9b9b9;background:#fff;border-radius:6px;padding:2px 9px;
  font-size:11.5px;font-weight:500;color:var(--ink)}
.page{flex:1;overflow-y:auto;padding:20px 0 40px}
.sheet{width:min(640px,92%);margin:0 auto;background:#fff;padding:46px 62px 60px;
  box-shadow:0 3px 14px #0000002e;font-family:var(--mono);font-size:12.6px;line-height:1.42;
  color:#111}
.sheet .sl{text-transform:uppercase;font-weight:700;margin:20px 0 8px}
.sheet .ac{margin:0 0 10px}
.sheet .ch{margin:12px 0 0;padding-left:34%;text-transform:uppercase}
.sheet .pa{margin:0 0 10px;padding-left:22%;padding-right:20%}
.sheet .pn{text-align:right;color:#888;margin:0 0 12px}
.sheet ins{background:#dff3e4;text-decoration:none;color:#14562b}
.sheet del{background:#fbe0dc;color:#8f2b21}
.sheet .amend{background:#fbeedd}
.sheet mark.anno{background:#dfeaff;padding:0 1px;border-bottom:2px solid var(--blue);
  position:relative;color:inherit}
.sheet .flagpin{position:absolute;left:calc(100% + 3px);top:-2px;font-size:10px;color:var(--blue);
  font-family:var(--sans);cursor:help}

/* ── the dock ─────────────────────────────────────────────────────────────── */
.fddock{width:334px;flex:none;display:flex;flex-direction:column;background:var(--paper);
  border-left:1px solid var(--border);overflow:hidden;transition:width .2s ease}
.fddock .dtabs{display:flex;align-items:center;gap:1px;padding:4px 6px;background:var(--chrome2);
  border-bottom:1px solid var(--border);flex:none}
.fddock .dtabs button{border:0;background:none;padding:2px 7px;border-radius:5px;font-size:11px;
  color:var(--muted);text-transform:capitalize}
.fddock .dtabs button.on{background:var(--blueBg);color:var(--blueText);font-weight:600}
.fddock .dtabs .grow{flex:1}
.fddock .dtabs .x{padding:2px 5px;font-size:13px;line-height:1}

/* collapsed: the seat rail. The dock does NOT become an anonymous chevron —
   the seats stay on screen, which is the whole OwnerMind move: identity has to
   survive the collapse or the panel stops telling you anything while hidden. */
.fdrail{width:46px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:9px 0;background:var(--chrome2);border-left:1px solid var(--border)}
/* an author display rule beats the UA [hidden] rule — without this the rail and
   the open drawer render at the same time */
.fdrail[hidden],.fddock[hidden]{display:none}
.fdrail .open{border:0;background:none;color:var(--muted);font-size:14px;padding:2px}
.fdrail .rlabel{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);writing-mode:vertical-rl;margin-top:4px}
.fdrail .spring{margin-top:auto}
.fdrail .cnt{font-size:9px;font-weight:700;color:#79510f;background:var(--warnBg);
  border:1px solid var(--warnLine);border-radius:99px;padding:1px 4px}

/* ── seat faces ───────────────────────────────────────────────────────────── */
.f{position:relative;flex:none;border-radius:50%;background-image:url("assets/gp-seat-sprite.webp");
  background-size:400% 200%;background-repeat:no-repeat;border:0;padding:0;display:block}
.f.s0{background-position:0% 0%}      .f.s1{background-position:33.333% 0%}
.f.s2{background-position:66.667% 0%} .f.s3{background-position:100% 0%}
.f.s4{background-position:0% 100%}    .f.s5{background-position:33.333% 100%}
.f.s6{background-position:66.667% 100%} .f.s7{background-position:100% 100%}
.f.xs{width:24px;height:24px} .f.sm{width:30px;height:30px}
.f.md{width:38px;height:38px} .f.lg{width:56px;height:56px} .f.xl{width:76px;height:76px}
.f:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* presence. Colour is spent ONLY on the state that needs a human. reading and
   writing are the room working normally and get shape, not hue. */
.f .p{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--paper);background:#b9b3a6}
.fdrail .f .p{border-color:var(--chrome2)}
.f[data-p="idle"] .p{background:#c3bdb0}
.f[data-p="reading"] .p{background:#fff;border-color:var(--muted);box-shadow:inset 0 0 0 2px var(--paper)}
.f[data-p="writing"] .p{background:var(--blue)}
.f[data-p="notes"] .p{background:var(--warn)}
@media(prefers-reduced-motion:no-preference){
  .f[data-p="writing"] .p{animation:blink 1.5s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
}
.f.off{filter:grayscale(1) opacity(.45)}

/* ── the paces rail ───────────────────────────────────────────────────────── */
.paces{flex:none;padding:9px 11px 10px;background:var(--paper2);border-bottom:1px solid var(--hair)}
.paces .hd{display:flex;align-items:baseline;gap:6px;margin-bottom:7px}
.paces .hd b{font-size:12px;font-weight:650;letter-spacing:-.01em}
.paces .hd .rd{font-size:10.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.ptrack{display:flex;gap:3px}
.ptrack button{flex:1;height:5px;border:0;padding:0;border-radius:99px;background:#e2dbcd}
.ptrack button.done{background:#b9ae98}
.ptrack button.now{background:var(--gpblue)}
.ptrack button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.paces .foot{margin-top:7px;font-size:11px;color:var(--muted);line-height:1.5}
.paces .foot b{color:var(--ink);font-weight:600}
.paces .loop{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--muted);
  border:1px solid var(--hair);border-radius:99px;padding:0 6px;margin-left:4px}
.paces.stopped{background:var(--warnBg);border-bottom-color:var(--warnLine)}
.paces.stopped .foot b{color:#79510f}

/* THE THREE LEGAL MOVES. Will's orchestration ruling: tapping a pace always
   VIEWS it — inspecting artifacts is never restricted. Moving a live session is
   human-only and there are exactly three moves, none of them forward: a pace
   consumes the previous pace's artifacts, so NOTES without READ is undefined.
   Seats never move the rail; the Showrunner advances it; the human interrupts. */
.moves{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.moves button{flex:1;min-width:0;border:1px solid var(--hair);background:#fff;border-radius:7px;
  padding:5px 6px;font-size:10.5px;font-weight:600;color:#4a4238;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.moves button:hover{border-color:#d8cdb8;background:var(--paper2)}
.moves button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.moves button.stop2{color:var(--no)}
.movenote{margin-top:6px;font-size:10px;color:var(--muted);line-height:1.45}

/* ── dock scroll body ─────────────────────────────────────────────────────── */
.dbody{flex:1;min-height:0;overflow-y:auto;padding:10px 11px 14px;display:flex;
  flex-direction:column;gap:9px}
.dsec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:6px}
.dsec .ln{flex:1;height:1px;background:var(--hair)}

/* seat card — the TABLE */
.seat{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;padding:9px;
  background:var(--paper2);border:1px solid var(--hair);border-radius:var(--r-card);
  text-align:left;width:100%;align-items:start}
.seat:hover{border-color:#d8cdb8}
.seat:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.seat .nm{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.seat .nm b{font-size:12.5px;font-weight:650}
.seat .nm i{font-style:normal;font-size:10.5px;color:var(--muted)}
.seat .note{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:#4a4238}
.seat .lane{margin-top:5px;font-size:10.5px;color:var(--muted);font-family:var(--ui)}

/* stance chips. DELIBERATE: this is not a traffic light. Colour marks the one
   stance that stops the room and needs the human. If ship-it were green and
   another-pass amber, six chips in a column would read as a leaderboard of
   seats — which the product law forbids. See the pack rationale. */
.st{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:650;
  border-radius:99px;padding:1px 8px;border:1px solid var(--hair);background:#fff;color:#5c5346;
  white-space:nowrap}
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:#b9ae98}
.st.ship::before{background:#8fa78d}
.st.pass::before{background:#b9ae98}
.st.concern{background:var(--warnBg);border-color:var(--warnLine);color:#79510f}
.st.concern::before{background:var(--warn)}
.st.none{color:var(--muted);border-style:dashed}
.st.none::before{display:none}

/* ── the notes round ──────────────────────────────────────────────────────── */
/* ONE video surface. Tapping any face plays into this single player; the notes
   stay text below it. At most one moving image is ever on screen, which is the
   difference between a notes round and a video wall. */
/* STICKY. Tapping a face six notes down must not play a clip off-screen — the
   stage stays put and the notes scroll under it. This is also what stops it
   becoming a wall: there is one stage, and it is always the same one. */
.player{background:#1e1a16;border-radius:var(--r-card);overflow:hidden;flex:none;
  position:sticky;top:-10px;z-index:2;box-shadow:0 6px 16px -8px #0000004d}
.player .stage{position:relative;aspect-ratio:16/10;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 10%,#3a332b,#1a1713)}
/* idle, the player is a prompt, not a 200px hole. It earns the 16:10 only when
   something is actually playing in it. */
.player.idle .stage{aspect-ratio:auto;padding:14px 16px}
.player .stage .f{box-shadow:0 6px 22px #0009}
.player .cap{display:flex;align-items:center;gap:7px;padding:7px 9px;background:#171310}
.player .cap b{font-size:11.5px;color:#f2ece2;font-weight:600}
.player .cap i{font-style:normal;font-size:10px;color:#9d9384;font-variant-numeric:tabular-nums;
  margin-left:auto}
.player .bar{height:3px;background:#3a332b}
.player .bar span{display:block;height:100%;background:var(--warn);width:34%}
.player .empty{color:#9d9384;font-size:11.5px;text-align:center;padding:0 22px;line-height:1.6}

.nlist{display:flex;flex-direction:column;gap:8px}
.ncard{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;padding:9px;
  background:var(--paper2);border:1px solid var(--hair);border-radius:var(--r-card);
  align-items:start}   /* or the face stretches and drops its play badge to the floor */
/* playing is SELECTION, so it takes the product selection blue. Amber here
   would read as "this note is a concern", which is a different fact entirely. */
.ncard.playing{border-color:var(--blue);box-shadow:0 0 0 2px var(--blueBg)}
.ncard .top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ncard .top b{font-size:12.5px;font-weight:650}
.ncard ul{margin:6px 0 0;padding-left:15px;font-size:11.5px;line-height:1.55;color:#4a4238}
.ncard ul li{margin-bottom:2px}
.ncard .kv{margin-top:7px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 7px;
  font-size:11px;line-height:1.5}
.ncard .kv dt{font-weight:650;color:#79510f;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;padding-top:1px}
.ncard .kv dt.keep{color:var(--ok)}
.ncard .kv dd{margin:0;color:#4a4238}
/* the play affordance is ON the face, not a separate video tile */
.pf{position:relative;border:0;background:none;padding:0;border-radius:50%;display:block}
.pf .badge{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;
  background:#2b2b2b;color:#fff;font-size:7px;display:grid;place-items:center;
  border:2px solid var(--paper2)}
.pf.norender .badge{background:#b9b3a6;color:#5c5346}
.ncard .fallback{margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.5;
  border-top:1px dashed var(--hair);padding-top:5px}

/* ── the gate tray ────────────────────────────────────────────────────────────
   REVISED after Will's mechanics check. The platform has NO batch transaction:
   approve_pending / reject_pending are individual calls that take effect when
   made, and there is no un-approve. So a button called "Apply" promising to
   commit everything at the end was designing an atomicity that does not exist —
   a crash would lose the held decisions and the queue could move underneath.

   Each decision now COMMITS ON TAP and the row locks. The end button completes
   the GATE pace, not the writes. Partial triage is first-class: decide 3 of 12,
   leave, come back.

   Because commit is irreversible, reject captures its reason BEFORE the call —
   reject_pending(reason) takes it as an argument, so asking afterwards would be
   asking for something that can no longer be sent. */

/* a committed row keeps its provenance and loses its controls */
.grow2.locked{background:#faf8f3}
.grow2.locked .pv b{color:#5c5346}
.cmt{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:650;
  border-radius:99px;padding:2px 9px;white-space:nowrap}
.cmt.yes{background:var(--okBg);color:var(--ok);border:1px solid var(--okLine)}
.cmt.no{background:var(--noBg);color:var(--no);border:1px solid var(--noLine)}
.cmt.ack{background:#fff;color:#5c5346;border:1px solid var(--hair)}
.cmt.res{background:var(--okBg);color:var(--ok);border:1px solid var(--okLine)}
.cmt.dis{background:#f3f0ea;color:#5c5346;border:1px solid var(--hair)}
.cmt .lk{font-size:9px;opacity:.75}
.cmtline{margin-top:6px;font-size:10.5px;color:var(--muted);line-height:1.5}
.cmtline i{font-style:italic;color:#4a4238}

/* reason captured BEFORE the call, with its own commit verb */
.reasonbox{margin-top:8px;border:1px solid var(--noLine);border-radius:10px;
  background:#fff;padding:8px 9px}
.reasonbox.neutral{border-color:var(--hair)}
.reasonbox label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--no);margin-bottom:4px}
.reasonbox.neutral label{color:var(--muted)}
.reasonbox textarea{width:100%;border:1px solid var(--hair);border-radius:7px;padding:6px 8px;
  font:inherit;font-size:11.5px;color:var(--ink);resize:vertical;min-height:44px;line-height:1.5}
.reasonbox textarea:focus{outline:none;border-color:var(--no)}
.reasonbox.neutral textarea:focus{border-color:var(--gpblue)}
.reasonbox .rb{display:flex;gap:6px;margin-top:7px;align-items:center;flex-wrap:wrap}
.reasonbox .rb .warn2{flex:1;min-width:120px;font-size:10px;color:var(--muted);line-height:1.4}

/* ANNOTATIONS ARE NOT PROPOSALS. Different lane in the platform
   (add_annotation / resolve_annotation, requiresApproval:false), so different
   verb, different chip, different border — and the word "approve" never
   appears on them. */
.annogrp{border:1px dashed var(--hair);border-radius:var(--r-card);overflow:hidden;
  background:#fbfaf7;margin-top:9px}
.annogrp .gh{background:#f3f0ea;border-bottom:1px dashed var(--hair)}
.annogrp .gh b{color:#5c5346}
.annogrp .grow2{border-bottom:1px dashed var(--hair)}
.annogrp .grow2:last-child{border-bottom:0}
.blockbadge{display:flex;gap:7px;align-items:flex-start;margin:0;padding:8px 10px;
  background:var(--warnBg);border-top:1px solid var(--warnLine);font-size:10.5px;
  line-height:1.5;color:#79510f}
.blockbadge b{font-weight:700}
.annogrp .grow2.cleared{background:#f7f9f6}
.gate{border:1px solid var(--warnLine);border-radius:var(--r-card);overflow:hidden;
  background:var(--paper2)}
.gate .gh{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--warnBg);
  border-bottom:1px solid var(--warnLine)}
.gate .gh b{font-size:12px;font-weight:650;color:#79510f}
.gate .gh .n{margin-left:auto;font-size:10.5px;color:#79510f;font-variant-numeric:tabular-nums}
.grow2{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;padding:9px 10px;
  border-bottom:1px solid var(--hair)}
.grow2:last-child{border-bottom:0}
.grow2 .pv{font-size:11.5px;line-height:1.5;color:#4a4238}
.grow2 .pv b{font-weight:650;color:var(--ink)}
.grow2 .where{font-size:10.5px;color:var(--muted);font-family:var(--ui);margin-top:2px}
.grow2 .acts{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.abtn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 9px;
  font-size:11px;font-weight:600;color:var(--muted)}
.abtn.yes[aria-pressed="true"]{border-color:var(--ok);background:var(--okBg);color:var(--ok)}
.abtn.no[aria-pressed="true"]{border-color:var(--no);background:var(--noBg);color:var(--no)}
.abtn.look{border-style:dashed}
.grow2 .why{margin-top:6px;display:none}
.grow2.rejected .why{display:block}
.grow2 .why input{width:100%;border:1px solid var(--noLine);background:#fff;border-radius:6px;
  padding:4px 7px;font-size:11px;font-family:inherit;color:var(--ink)}
.grow2 .why input:focus{outline:none;border-color:var(--no)}
.grow2 .why label{display:block;font-size:9.5px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--no);margin-bottom:3px}
.gate .gf{padding:9px 10px;display:flex;align-items:center;gap:7px;background:#fff;
  border-top:1px solid var(--hair);flex-wrap:wrap}
.gate .gf .st2{font-size:11px;color:var(--muted);flex:1;min-width:120px}
.pbtn{border:0;border-radius:7px;padding:5px 11px;font-size:11.5px;font-weight:600;
  background:var(--gpblue);color:#fff}
.pbtn[disabled]{opacity:.42}
.pbtn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}

/* the law, stated in the UI and not only in the spec */
.law{display:flex;gap:7px;align-items:flex-start;font-size:10.5px;line-height:1.5;
  color:var(--muted);background:#fff;border:1px dashed var(--hair);border-radius:10px;padding:7px 9px}
.law b{color:var(--ink);font-weight:650}

/* two takes */
.takes{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--paper2);padding:9px 10px}
.takes .hd2{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;margin-bottom:7px}
.takes .two{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tk{border:1px solid var(--hair);border-radius:10px;background:#fff;padding:7px 8px;text-align:left}
.tk.pick{border-color:var(--blue);box-shadow:0 0 0 2px var(--blueBg)}
.tk .who2{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:650}
.tk .m{margin-top:5px;font-size:10.5px;color:var(--muted);line-height:1.5}
.tk .m b{color:var(--ink);font-variant-numeric:tabular-nums}

/* seat detail */
.detail{display:flex;flex-direction:column;gap:9px}
.dback{border:0;background:none;color:var(--blueText);font-size:11.5px;font-weight:600;
  padding:0;text-align:left;display:flex;align-items:center;gap:4px}
.dhead{display:flex;gap:10px;align-items:center}
.dhead .who3 b{display:block;font-size:14px;font-weight:650;letter-spacing:-.01em}
.dhead .who3 i{font-style:normal;font-size:11px;color:var(--muted);display:block;margin-top:1px}
.temper{font-size:11px;line-height:1.6;color:#4a4238;background:#fff;border:1px solid var(--hair);
  border-radius:10px;padding:8px 9px}
.temper b{display:block;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;font-weight:700}

/* ── generic doc pages (index, roster, brief, morning, mobile) ────────────── */
.doc{background:var(--paper);min-height:100vh;padding:0 0 80px}
.doc .wrap{width:min(1080px,92%);margin:0 auto}
.doc .nav{position:sticky;top:0;z-index:20;background:#f6f2eae8;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);padding:9px 0;margin-bottom:26px}
.doc .nav .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.doc .nav b{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.doc .nav a{font-size:12px;color:var(--muted);text-decoration:none;padding:3px 8px;border-radius:6px}
.doc .nav a:hover{background:#0000000a;color:var(--ink)}
.doc .nav a.on{background:#fff;color:var(--deep);border:1px solid var(--hair);font-weight:600}
.doc h1{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:500;
  letter-spacing:-.02em;margin:0 0 10px;color:var(--deep);text-wrap:balance}
.doc .lede{font-size:15px;line-height:1.65;color:#4a4238;max-width:66ch;margin:0 0 8px}
.doc .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.doc h2{font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:-.015em;
  margin:40px 0 12px;color:var(--deep)}
.doc h3{font-size:14px;font-weight:650;margin:22px 0 7px;color:var(--deep)}
.doc p{font-size:13.5px;line-height:1.7;color:#4a4238;max-width:72ch}
.doc p b,.doc li b{color:var(--deep)}
.doc ul{font-size:13.5px;line-height:1.7;color:#4a4238;max-width:72ch;padding-left:19px}
.card{background:var(--paper2);border:1px solid var(--hair);border-radius:var(--r-card);padding:16px 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
.tblwrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--paper2)}
table.t{border-collapse:collapse;width:100%;font-size:12.5px;min-width:560px}
table.t th{text-align:left;padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);white-space:nowrap}
table.t td{padding:10px 12px;border-bottom:1px solid var(--hair);color:#4a4238;vertical-align:top;
  line-height:1.55}
table.t tr:last-child td{border-bottom:0}
table.t td b{color:var(--deep)}
.frame{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--desk);
  box-shadow:0 8px 30px #0000001f}
.frame .cap2{display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--chrome);
  border-bottom:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.frame .cap2 b{color:var(--ink);font-weight:600}
.note{font-size:12px;line-height:1.65;color:var(--muted);max-width:74ch}
.note b{color:var(--ink)}
.flag{border-left:3px solid var(--warn);background:var(--warnBg);border-radius:0 10px 10px 0;
  padding:11px 14px;font-size:12.5px;line-height:1.65;color:#5c4520;max-width:74ch}
.flag b{color:#79510f}
.ok2{border-left:3px solid var(--ok);background:var(--okBg);border-radius:0 10px 10px 0;
  padding:11px 14px;font-size:12.5px;line-height:1.65;color:#1d4d30;max-width:74ch}
.ok2 b{color:var(--ok)}

/* ── mobile ───────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .fdside{display:none}
  .fddock{position:absolute;inset:0;width:auto;z-index:20;border-left:0}
  .fdrail{width:100%;height:52px;flex-direction:row;border-left:0;border-top:1px solid var(--border)}
  .fdrail .rlabel{writing-mode:horizontal-tb;margin:0}
  .fdrail .spring{margin:0 0 0 auto}
  .doc .nav .wrap{gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PACK v2 · "THE LANE IS THE ROOM"
   Khoa redirected §9 twice on 31 Jul. The table form read as many rooms; the
   room is ONE chronological lane per project, and everything the room does
   posts into it as an attributed card.

   The header copies OwnerMind's top section literally, per instruction:
   focal identity block (60px face, 15px name, 11px sub) → switchable seat row
   → the lane → composer. Reskinned to Greenpen warm paper, proportions kept.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── focal seat: ONE at top, default the Showrunner ───────────────────────── */
.focal{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:15px 17px 13px;background:var(--paper2);border-bottom:1px solid var(--hair);flex:none}
.focal b{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--deep)}
.focal .sub3{font-size:11px;color:var(--muted);text-align:center}
.focal .temper2{font-size:11.5px;line-height:1.5;color:#4a4238;text-align:center;max-width:34ch;
  margin-top:1px}
.focal .gear2{position:absolute;top:11px;right:11px;width:26px;height:26px;border:0;
  background:none;border-radius:8px;color:var(--muted);font-size:15px;line-height:1;
  display:grid;place-items:center;cursor:pointer}
.focal .gear2:hover{background:var(--paper);color:var(--ink)}
.focal .gear2::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;
  border-radius:50%;background:var(--warn);display:none}
.focal .gear2.haswait::after{display:block}

/* the switchable row. A LENS, not a gate — every seat posts to the lane
   regardless of which one is focal, so this filters and addresses, never routes
   into a separate room. */
.seatrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:11px 14px;background:var(--paper2);border-bottom:1px solid var(--hair);flex:none}
.seatrow button{position:relative;border:0;background:none;padding:0;cursor:pointer;line-height:0}
.seatrow button .f{transition:transform .12s ease}
.seatrow button:hover .f,.seatrow button:focus-visible .f{transform:scale(1.12)}
.seatrow button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:50%}
.seatrow button[aria-pressed="true"] .f{box-shadow:0 0 0 2px var(--paper2),0 0 0 4px var(--gpblue)}
.seatrow .lens{width:100%;text-align:center;font-size:10px;color:var(--muted);margin-top:2px}

/* ── the lane ─────────────────────────────────────────────────────────────── */
.lane2{flex:1;min-height:0;overflow-y:auto;padding:12px 11px 16px;display:flex;
  flex-direction:column;gap:9px;background:var(--paper)}
/* flex children shrink by default — without this the collapsed segment headers
   compress and clip their own task text once the lane overflows */
.lane2 > .lseg{flex:none}

/* a session is a collapsible SEGMENT, not a surface.
   NAMED .lseg, not .seg — .seg is already the Studio's segmented tab control in
   .fdtabs, and an unscoped .seg rule bled onto the chrome. */
.lseg{border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;background:var(--paper2)}
.segh{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:start;
  width:100%;text-align:left;border:0;background:none;padding:10px 11px;cursor:pointer}
.segh:hover{background:#fff}
.segh .tw2{color:var(--muted);font-size:10px;transition:transform .12s;padding-top:2px}
.lseg.open .segh .tw2{transform:rotate(90deg)}
.segh .task2{font-size:12.5px;font-weight:650;color:var(--deep);line-height:1.4}
.segh .meta2{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.segh .mode{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair);border-radius:99px;padding:1px 7px;background:#fff}
.segh .out{font-size:10.5px;color:var(--muted)}
/* the paces rail, shrunk to a progress chip — orchestration, not navigation */
.pchip2{display:flex;gap:2px;align-items:center}
.pchip2 i{width:9px;height:3px;border-radius:99px;background:#e2dbcd;font-style:normal}
.pchip2 i.done{background:#b9ae98} .pchip2 i.now{background:var(--gpblue)}
.segbody{display:none;padding:0 11px 11px;flex-direction:column;gap:8px}
.lseg.open .segbody{display:flex}

/* cards, not chat bubbles — each attributed to a seat face */
.lc{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;padding:9px 10px;
  background:#fff;border:1px solid var(--hair);border-radius:11px;align-items:start}
.lc .who5{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.lc .who5 b{font-size:12px;font-weight:650;color:var(--deep)}
.lc .who5 i{font-style:normal;font-size:10px;color:var(--muted)}
.lc .who5 .t2{margin-left:auto;font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lc p{margin:4px 0 0;font-size:11.5px;line-height:1.55;color:#4a4238}
.lc.dim{opacity:.42}
/* a card that REFERENCES an artifact — the lane never contains the draft */
.lc .ref{margin-top:7px;display:flex;align-items:center;gap:7px;border:1px solid var(--hair);
  border-radius:9px;padding:6px 8px;background:var(--paper2);font-size:11px}
.lc .ref .rl{flex:1;min-width:0;color:#4a4238;font-family:var(--ui);font-size:10.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc .ref .go2{font-size:10.5px;font-weight:650;color:var(--blueText);white-space:nowrap}
.lc .clip{margin-top:7px;display:flex;align-items:center;gap:8px;border:1px solid var(--hair);
  border-radius:9px;padding:6px 8px;background:#1e1a16;color:#f2ece2;font-size:10.5px}
.lc .clip .pl{width:20px;height:20px;border-radius:50%;background:#2b2b2b;display:grid;
  place-items:center;font-size:7px;flex:none}
.lc .clip .no2{color:#9d9384;font-style:italic}
.lc.you{grid-template-columns:minmax(0,1fr);background:var(--blueBg);border-color:#cbdcf7}
.lc.you p{color:#1d3a63}

/* ── the dock: three things that never scroll away ────────────────────────── */
.dock2{flex:none;border-top:1px solid var(--hair);background:var(--paper2)}
.dock2 .row4{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--hair)}
.dock2 .row4:last-of-type{border-bottom:0}
.dock2 .row4 .lbl3{font-size:11.5px;font-weight:650;color:var(--deep);flex:1;min-width:0}
.dock2 .row4 .sub4{font-size:10.5px;color:var(--muted);font-weight:400;display:block;margin-top:1px}
.dock2 .badge2{font-size:10px;font-weight:700;border-radius:99px;padding:2px 8px;white-space:nowrap}
.dock2 .badge2.warn3{background:var(--warnBg);color:#79510f;border:1px solid var(--warnLine)}
.dock2 .badge2.ok3{background:var(--okBg);color:var(--ok);border:1px solid var(--okLine)}
.dock2 .row4 button.open2{border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:3px 9px;font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.composer{display:flex;gap:7px;align-items:flex-end;padding:9px 11px}
.composer textarea{flex:1;border:1px solid var(--hair);border-radius:9px;padding:7px 9px;
  font:inherit;font-size:12px;resize:none;min-height:36px;max-height:110px;line-height:1.5;
  background:#fff;color:var(--ink)}
.composer textarea:focus{outline:none;border-color:var(--gpblue)}
.composer .send2{flex:none;border:0;border-radius:8px;background:var(--gpblue);color:#fff;
  width:32px;height:32px;font-size:14px;cursor:pointer}
/* sits ABOVE the composer: it labels what the composer is about to do */
.to{font-size:10px;color:var(--muted);padding:7px 11px 0;flex:none;background:var(--paper2);
  border-top:1px solid var(--hair)}
.to b{color:var(--deep)}

/* ── the wrap segment: morning-after, re-hung on the lane ─────────────────── */
.cliprow{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cb{border:1px solid var(--hair);background:#fff;border-radius:10px;padding:6px 5px;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:52px}
.cb:hover{border-color:#d8cdb8}
.cb:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.cb .cl{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cb .cl.no3{font-style:italic;color:#a09585}
.diffcard{margin-top:8px;border:1px solid var(--hair);border-radius:10px;background:var(--paper2);
  padding:8px 9px}
.diffcard .dr{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:baseline;
  padding:4px 0;font-size:11px}
.diffcard .mk3{width:8px;height:8px;border-radius:2px;align-self:center}
.diffcard .mk3.add{background:#bfe6cc} .diffcard .mk3.cut{background:#f0c8c0}
.diffcard .mk3.rev{background:#ead7bd} .diffcard .mk3.mv{background:#cbdcf7}
.diffcard .dl b{font-weight:650;color:var(--deep)}
.diffcard .dl i{font-style:normal;color:var(--muted);font-size:10.5px}
.diffcard .dn{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10.5px;white-space:nowrap}

/* ═══ v3 · THE STORY DEPARTMENT — Readers as style seats ═══════════════════
   Greenpen's sibling to Wideshot's Fourth Unit. A Reader is a persona bound to
   a measured GRAMMAR, and it is a read-only lens: it conditions and critiques,
   it never writes. Same rules as the crew bench — coverage worn openly, naming
   a skin over seat.<slug>.v1, and NO author or title names user-facing.        */
.rbench{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:14px}
.rcard{background:var(--paper2);border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;text-align:left}
.rcard:hover{border-color:#d8cdb8}
.rcard.pilot2{border-color:var(--gpblue);box-shadow:0 0 0 1px #2d5bd033}
.rface2{aspect-ratio:4/5;background-image:url("assets/readers-sheet.webp");
  background-size:600% 100%;background-repeat:no-repeat;position:relative}
.rface2 .pc2{position:absolute;right:7px;top:7px;font-family:var(--ui);font-size:8.5px;
  letter-spacing:.06em;text-transform:uppercase;background:#2d5bd0;color:#fff;
  border-radius:99px;padding:2px 7px}
.rbody{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.rbody h4{margin:0;font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:var(--deep)}
.rbody .rcov{font-family:var(--ui);font-size:10.5px;color:#4a4238;line-height:1.55}
.rbody .rcov b{color:var(--deep);font-weight:400}
.rbody .rpush{font-size:11px;line-height:1.55;color:#4a4238;border-top:1px solid var(--hair);
  padding-top:7px}
.rbody .rid{font-family:var(--ui);font-size:9px;color:var(--muted);margin-top:auto}
.rlens{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:2px 8px;
  border:1px solid var(--hair);background:#fff;color:#5c5346}
.rlens::before{content:"";width:5px;height:5px;border-radius:50%;background:#8fa78d}
.provisional{border-left:3px solid var(--warn);background:var(--warnBg);border-radius:0 10px 10px 0;
  padding:11px 15px;margin:14px 0;font-size:12.5px;line-height:1.65;color:#5c4520;max-width:78ch}
.provisional b{color:#79510f}

/* ── v3 · pilot vs guest, and the re-plans moment ─────────────────────────── */
.pilotbadge{position:absolute;right:-3px;top:-3px;width:13px;height:13px;border-radius:50%;
  background:var(--gpblue);color:#fff;font-size:7px;display:grid;place-items:center;
  border:2px solid var(--paper2);font-weight:700}
.seatrow button{position:relative}
.pilotline{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:2px 8px;
  background:#2d5bd014;border:1px solid #2d5bd044;color:var(--gpblue)}
.mkpilot{border:1px solid var(--hair);background:#fff;border-radius:7px;padding:4px 10px;
  font-size:11px;font-weight:600;color:var(--gpblue);margin-top:6px}
.mkpilot:hover{border-color:var(--gpblue)}
.replan{position:fixed;inset:0;background:#221a1499;display:grid;place-items:center;z-index:80;padding:18px}
.replan .rp{width:min(430px,100%);background:var(--paper2);border:1px solid var(--hair);
  border-radius:var(--r-card);overflow:hidden;box-shadow:0 24px 60px -14px #221a1466}
.replan .rph{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--hair)}
.replan .rph b{font-size:13.5px;font-weight:650;color:var(--deep)}
.replan .rpb{padding:14px 16px;font-size:12.5px;line-height:1.65;color:#4a4238}
.replan .rpb b{color:var(--deep)}
.replan .cost{margin-top:11px;border-left:3px solid var(--warn);background:var(--warnBg);
  border-radius:0 9px 9px 0;padding:9px 12px;font-size:11.5px;line-height:1.55;color:#5c4520}
.replan .cost b{color:#79510f}
.replan .rpf{display:flex;gap:7px;justify-content:flex-end;padding:12px 16px;
  border-top:1px solid var(--hair);background:#fff}
.blocked2{border-left:3px solid var(--no);background:var(--noBg);border-radius:0 9px 9px 0;
  padding:9px 12px;font-size:11.5px;line-height:1.55;color:#8f2b21;margin-top:11px}
.blocked2 b{color:var(--no)}

/* the Department roster's private-key typeahead */
.seek2{position:relative;width:min(520px,100%);margin:18px 0 22px}
.seek2 input{width:100%;background:#fff;border:1px solid var(--hair);border-radius:10px;
  padding:10px 13px;font:inherit;font-size:13px;color:var(--ink)}
.seek2 input:focus{outline:none;border-color:var(--gpblue);box-shadow:0 0 0 3px #2d5bd01f}
.seek2 .hint3{font-size:10.5px;color:var(--muted);margin-top:7px;line-height:1.55;max-width:70ch}
.seekres2{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--paper2);
  border:1px solid var(--hair);border-radius:10px;overflow:hidden;z-index:20;display:none;
  box-shadow:0 18px 44px -12px #221a1433}
.seekres2.open{display:block}
.seekres2 button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;
  text-align:left;border:0;background:none}
.seekres2 button:hover{background:#fff}
.seekres2 .rf2{width:30px;height:34px;border-radius:5px;flex:none;
  background-image:url("assets/readers-sheet.webp");background-size:600% 100%}
.seekres2 .rn2{font-size:12.5px;font-weight:650;color:var(--deep)}
.seekres2 .rn2 i{font-style:normal;display:block;font-size:10px;color:var(--muted);
  font-weight:400;font-family:var(--ui);margin-top:1px}
.seekres2 .none2{padding:10px 11px;font-size:11.5px;color:var(--muted)}
.pchip2.live3{gap:3px;align-items:center}
.pchip2.live3 i{cursor:pointer;height:4px;width:11px}
.pchip2.live3 i:hover{background:#8fa0b6}
.pchip2 .pnow{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gpblue);margin-left:4px}

/* ── KHOA CORRECTION · Readers → SCRIPT DOCTORS, they WRITE ────────────────
   The lens-never-writes chip was honest when the seats only critiqued. It is
   now wrong: a doctor accesses the fingerprint and rewrites the draft with the
   grammar embedded. The chip becomes a KIND marker rather than a capability
   denial — and the Reference Reader keeps its genuine read-only chip, because
   that one really is a reader. Three kinds in one row, each stated. */
.kind3{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:2px 8px;
  border:1px solid var(--hair);background:#fff;color:#5c5346;white-space:nowrap}
.kind3::before{content:"";width:5px;height:5px;border-radius:50%}
.kind3.doctor::before{background:var(--gpblue)}
.kind3.doctor{color:var(--gpblue);border-color:#2d5bd044;background:#2d5bd00d}
.kind3.readonly::before{background:#b9ae98}
.kind3.role::before{background:#8fa78d}

/* the operate affordance — output lands in surfaces that already exist */
.passbox{margin-top:8px;border:1px solid var(--hair);border-radius:10px;background:#fff;
  padding:9px 10px}
.passbox .pl2{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:6px}
.passbox .scopes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.passbox .scopes button{border:1px solid var(--hair);background:var(--paper2);border-radius:99px;
  padding:2px 9px;font-size:10.5px;color:#4a4238}
.passbox .scopes button[aria-pressed="true"]{border-color:var(--gpblue);background:#2d5bd014;
  color:var(--gpblue);font-weight:650}
.passbox .go3{width:100%;border:0;border-radius:8px;background:var(--gpblue);color:#fff;
  padding:6px 0;font-size:11.5px;font-weight:600}
.passbox .lands{margin-top:7px;font-size:10px;color:var(--muted);line-height:1.5}
.passbox .lands b{color:var(--deep);font-size:inherit;font-weight:600;letter-spacing:0}
/* .focal b is 15px for the seat NAME; the outcome line lives inside .focal too,
   so its <b> spans inherited 15px against a 10px line and the sentence broke
   into three sizes. A component that can be nested has to set its own type. */
.guestwarn{margin-top:7px;border-left:3px solid var(--warn);background:var(--warnBg);
  border-radius:0 8px 8px 0;padding:7px 9px;font-size:10.5px;line-height:1.5;color:#5c4520}
.guestwarn b{color:#79510f}

/* ── a doctor's pass in the gate tray: partial review is a shipped capability,
   so the tray says so rather than implying Approve is all-or-nothing ─────── */
.partial{margin-top:7px;border-left:2px solid var(--gpblue);background:#eef3fd;
  border-radius:0 7px 7px 0;padding:6px 9px;font-size:10.5px;line-height:1.55;color:#2a3f6b}
.partial b{color:#1d3a7a}
.partial i{font-style:normal;font-family:var(--mono);font-size:10px}

/* The annotations header is the same header as the proposals one, but the
   layout rule was written as `.gate .gh` and .annogrp is a SIBLING of .gate —
   so it inherited the colours and none of the flex, and its count ran straight
   into the label: "Continuity flags2". Scoping a shared component's layout to
   one of its two parents is the defect; this restates it for both. */
.annogrp .gh{display:flex;align-items:center;gap:7px;padding:8px 10px}
.annogrp .gh .n{margin-left:auto;font-size:10.5px;color:#7a6f5f;
  font-variant-numeric:tabular-nums;font-weight:400}