/* ═══ css/16-crew.css · v3.8 · CREW — one stream per crew ═══
   The phone page layer (14) supplies the plate, masthead, title block, rows,
   buttons, fields and chips; this file adds the four things a chat needs and
   nothing else: the crew list row, the stream (bubbles, cards, dividers), the
   composer, and the high five. Every colour is a token; radius encodes function
   (surface 4px · fact 100px · action/choice 0 · 50% avatars only); weights
   400/900 + mono 500/700 as the layer already uses. `cw-` namespace. */

/* ── the crew list row: name · preview · time · unread ── */
.cw-list{margin-top:-4px}
.cw-row{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:18px 0 16px;border-bottom:.8px solid var(--line);-webkit-tap-highlight-color:transparent}
.cw-row:active{background:var(--wash);margin:0 -17px;padding-left:17px;padding-right:17px}
.cw-ava{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--courier);font-size:12px;font-weight:500}
.cw-ava.mut{background:var(--wash);color:var(--ink)}
.cw-row-m{flex:1;min-width:0}
.cw-row-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cw-row-n{font-family:var(--helv);font-weight:900;font-size:16px;letter-spacing:-.01em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-row-time{flex:0 0 auto;font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cw-row.unread .cw-row-time{color:var(--ink);font-weight:700}
.cw-row-p{display:flex;align-items:center;gap:10px;margin-top:4px}
.cw-row-prev{flex:1;min-width:0;font-size:13.5px;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-row.unread .cw-row-prev{color:var(--ink)}
.cw-row-prev b{font-weight:400;color:var(--ink)}
.cw-row-prev .mono{font-family:var(--courier);font-size:11.5px;font-weight:500;letter-spacing:.02em}
.cw-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-fact);background:var(--ink);color:var(--paper);font-family:var(--courier);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* the invitation row — same row, a choice instead of a door */
.cw-inv{padding:16px 0 18px;border-bottom:.8px solid var(--line)}
.cw-inv-t{font-size:14px;line-height:1.45;color:var(--ink)}
.cw-inv-t b{font-weight:900}
.cw-inv-m{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.cw-inv-a{display:flex;gap:10px;margin-top:12px}
.cw-inv-a .pg-btn{height:40px;font-size:10.5px}
/* zero state */
.cw-zero{padding:6px 0 0}
.cw-zero .eh{font-family:var(--helv);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.05;max-width:300px}
.cw-zero p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:14px 0 0;max-width:320px}

/* ── the stream: a solo surface (no dock); fixed head + composer, one scroller ── */
body.cw-stream{overflow:hidden}
.cw-head{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper);padding:var(--hs-top,61px) 32px 0}
.cw-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 0 10px;-webkit-tap-highlight-color:transparent}
.cw-back:active{color:var(--ink)}
.cw-head .pg-head{align-items:center}
.cw-head .pg-h1{font-size:24px}
.cw-head .pg-side{font-size:18px;letter-spacing:0;line-height:1;padding:6px 0 6px 12px}
.cw-head .pg-rule{margin-top:8px}
.cw-meta{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 0 10px;display:flex;justify-content:space-between;gap:10px}
.cw-meta .now{color:var(--ink)}
.cw-scroll{position:fixed;left:0;right:0;top:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--cw-head-h,150px) + 8px) 20px calc(var(--cw-comp-h,72px) + 16px);scroll-padding-bottom:20px;background:var(--paper)}
.cw-msgs{display:flex;flex-direction:column;gap:4px;max-width:720px;margin:0 auto}

/* dividers — the day, and the unread line */
.cw-day{align-self:center;margin:18px 0 10px;font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.cw-new{display:flex;align-items:center;gap:12px;margin:14px 0 8px;font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-text)}
.cw-new::before,.cw-new::after{content:"";flex:1;height:1px;background:var(--accent)}
/* system and joined lines */
.cw-sys{align-self:center;text-align:center;margin:10px 0;font-family:var(--courier);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.cw-sys b{font-weight:700;color:var(--ink)}

/* the message group: author label once, then bubbles */
.cw-g{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:10px;max-width:84%}
.cw-g.me{align-self:flex-end;align-items:flex-end}
.cw-g+.cw-g.same{margin-top:0}
.cw-who{display:flex;align-items:center;gap:8px;margin:0 0 2px 2px;font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cw-who .cw-ava{width:22px;height:22px;font-size:8px}
.cw-b{position:relative;padding:10px 14px 8px;border-radius:var(--radius);font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.cw-g:not(.me) .cw-b{background:var(--paper);box-shadow:0 2px 9px rgba(23,18,15,.10)}
.cw-g.me .cw-b{background:var(--wash)}
.cw-b.pending{opacity:.55}
.cw-b.failed{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cw-t{display:block;text-align:right;margin:4px -4px -2px 12px;font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.05em;color:var(--muted);float:right;line-height:1}
.cw-b p{margin:0;display:inline}
.cw-b a{color:var(--accent-text);text-decoration:underline}
.cw-fail{font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin:2px 2px 0}
.cw-del{font-style:italic;color:var(--muted)}
/* the reply quote inside a bubble */
.cw-q{display:block;margin:-2px -6px 8px;padding:6px 10px;border-left:2px solid var(--ink);background:rgba(23,18,15,.05);font-size:13px;line-height:1.35;color:var(--muted);border-radius:0;-webkit-tap-highlight-color:transparent}
.cw-q b{display:block;font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.cw-g.me .cw-q{background:rgba(23,18,15,.06)}

/* ── the session card — the DOM twin of the v3.7 share card ── */
.cw-card{width:min(100%,340px);background:var(--paper);border-radius:var(--radius);box-shadow:0 2px 9px rgba(23,18,15,.10);padding:14px 16px 12px}
.cw-g.me .cw-card{background:var(--paper)}
.cw-card-l{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--courier);font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.cw-logged{font-size:8.5px;font-weight:700;letter-spacing:.08em;padding:3px 7px;background:var(--volt);color:var(--ink);border-radius:var(--r-fact)}
.cw-spec{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:14px}
.cw-spec .v{font-family:var(--courier);font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1;color:var(--ink);white-space:nowrap}
.cw-spec .v small{font-size:11px;letter-spacing:.02em;margin-left:2px;color:var(--muted)}
.cw-spec .l{font-family:var(--courier);font-size:8.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.cw-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:.8px solid var(--line);min-height:28px}
.cw-serial{font-family:var(--courier);font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.cw-card .cw-t{float:none;margin:0;text-align:left}
/* race cards reuse the same frame */
.cw-card .cw-race{font-family:var(--helv);font-weight:900;font-size:17px;letter-spacing:-.02em;line-height:1.15;margin-top:8px}
.cw-card .cw-race small{display:block;font-family:var(--courier);font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ── the high five: a fact pill with a mono count ── */
.cw-hf{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 10px 0 8px;border:1.5px solid var(--line);border-radius:var(--r-fact);background:var(--paper);color:var(--ink);font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.02em;transition:transform var(--t-touch) var(--ease),background-color var(--t-touch) var(--ease),color var(--t-touch) var(--ease);-webkit-tap-highlight-color:transparent}
.cw-hf svg{width:14px;height:14px;display:block}
.cw-hf:active{transform:scale(.94)}
.cw-hf.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cw-hf.on svg *{stroke:var(--paper)}
.cw-hf.zero{color:var(--muted)}
/* the pill under a text bubble */
.cw-g .cw-hf.under{margin:2px 0 2px 2px}
.cw-g.me .cw-hf.under{margin:2px 2px 2px 0}
.cw-hfwho{display:flex;align-items:center;gap:4px;font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 2px}.cw-hfwho svg{width:11px;height:11px}

/* ── the message actions: press and hold ── */
.cw-acts{position:fixed;inset:0;z-index:200}
.cw-acts-scrim{position:absolute;inset:0;background:rgba(23,18,15,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cw-acts-card{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto}
.cw-acts-lift{display:flex;justify-content:flex-start;pointer-events:none}
.cw-acts-lift .cw-b{background:var(--paper);box-shadow:var(--lift-sheet);max-width:100%;font-size:15px}
.cw-acts-lift .cw-card{box-shadow:var(--lift-sheet)}
.cw-acts-lift .cw-hf.under,.cw-acts-lift .cw-hfwho{display:none}
.cw-acts-react{display:flex}
.cw-hf.big{height:48px;padding:0 18px 0 14px;gap:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);box-shadow:var(--lift-sheet);border-color:var(--paper)}
.cw-hf.big svg{width:20px;height:20px}
.cw-hf.big.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cw-acts-list{background:var(--paper);border-radius:var(--radius);box-shadow:var(--lift-sheet);overflow:hidden}
.cw-acts-list button{display:flex;align-items:center;gap:14px;width:100%;height:52px;padding:0 18px;text-align:left;font-family:var(--helv);font-size:16px;font-weight:400;color:var(--ink);border-top:.8px solid var(--line);-webkit-tap-highlight-color:transparent}
.cw-acts-list button:first-child{border-top:0}
.cw-acts-list button:active{background:var(--wash)}
.cw-acts-list button svg{width:20px;height:20px;flex:0 0 auto}
.cw-acts-list button.del{color:var(--accent-text)}
@media(prefers-reduced-motion:no-preference){.cw-acts-card{animation:cw-pop var(--t-move) var(--ease)}@keyframes cw-pop{from{opacity:0;transform:translateY(-50%) scale(.96)}}}

/* ── the composer ── */
.cw-comp{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));border-top:.8px solid var(--line)}
.cw-comp-in{display:flex;align-items:flex-end;gap:12px;max-width:720px;margin:0 auto}
.cw-replyto{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:720px;margin:0 auto 8px;padding:6px 10px;border-left:2px solid var(--ink);background:var(--wash);font-size:13px;color:var(--muted)}
.cw-replyto b{display:block;font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.cw-replyto button{font-size:18px;color:var(--muted);width:32px;height:32px;flex:0 0 auto}
.cw-ta{flex:1;min-width:0;resize:none;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;padding:12px 0 8px;font-family:var(--helv);font-size:16px;line-height:22px;color:var(--ink);max-height:132px;min-height:44px}
.cw-ta::placeholder{color:var(--platinum);font-weight:400}
.cw-ta:focus{outline:none;border-bottom-color:var(--volt-ink);border-bottom-width:2.5px;padding-bottom:7px}
.cw-send{flex:0 0 auto;width:44px;height:44px;background:var(--ink);color:var(--paper);border-radius:var(--r-action);display:flex;align-items:center;justify-content:center;transition:transform var(--t-touch) var(--ease),opacity var(--t-touch) var(--ease);-webkit-tap-highlight-color:transparent}
.cw-send:active{transform:scale(.94)}
.cw-send[disabled]{opacity:.25}
.cw-send svg{width:20px;height:20px;display:block}
.cw-offline{max-width:720px;margin:0 auto;font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 0}
/* the ↓ new pill */
.cw-jump{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:calc(var(--cw-comp-h,72px) + 14px);z-index:61;height:32px;padding:0 14px;border-radius:var(--r-fact);background:var(--ink);color:var(--paper);font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--lift-sheet);opacity:0;pointer-events:none;transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease)}
.cw-jump.on{opacity:1;pointer-events:auto;transform:translateX(-50%)}

/* ── the invite sheet: a To: field that takes many, like Mail ── */
.cw-to{display:flex;align-items:flex-start;gap:12px;border-bottom:1.5px solid var(--ink);padding:6px 0 6px}
.cw-to label{font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:15px}
.cw-to-f{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cw-chip{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 4px 0 10px;border-radius:var(--r-fact);background:var(--ink);color:var(--paper);font-family:var(--courier);font-size:11px;font-weight:500;max-width:100%}
.cw-chip button{color:var(--paper);width:24px;height:24px;font-size:16px;line-height:1;opacity:.7}
.cw-to-in{flex:1;min-width:140px;border:0;background:transparent;font-family:var(--helv);font-size:16px;font-weight:400;color:var(--ink);height:44px;padding:0}
.cw-to-in::placeholder{color:var(--platinum)}
.cw-to-in:focus{outline:none}
.cw-sug{width:100%;text-align:left;-webkit-tap-highlight-color:transparent}
.cw-sug.added .pg-act{color:var(--volt-text)}
.cw-sug.added .pg-act::before{content:"✓ "}
/* the welcome card — a crew of one */
.cw-welcome{align-self:stretch;margin:6px 0 10px;padding:22px 20px 20px;background:var(--paper);border-radius:var(--radius);box-shadow:0 2px 9px rgba(23,18,15,.10)}
.cw-welcome .eh{font-family:var(--helv);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1.1}
.cw-welcome p{font-size:14px;line-height:1.5;color:var(--muted);margin:10px 0 16px}
.cw-welcome .pg-btn{height:44px}

/* ── the sheets: invite · new crew · members · session-done chip ── */
.cw-sh-f{margin-top:6px}
.cw-sh-f label{display:block;font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.cw-sh-row{display:flex;gap:10px;align-items:flex-end}
.cw-sh-row .pg-in{flex:1}
.cw-sh-row .pg-btn{width:auto;padding:0 16px;flex:0 0 auto}
.cw-sent{font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--volt-text);margin-top:10px;min-height:14px}
.cw-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.cw-or::before,.cw-or::after{content:"";flex:1;height:.8px;background:var(--line)}
.cw-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-family:var(--courier);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cw-link button{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cw-code{margin-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cw-code .k{font-family:var(--courier);font-size:24px;font-weight:500;letter-spacing:.14em;color:var(--ink)}
.cw-code .l{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.5}
.cw-never{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.05em;line-height:1.7;text-transform:uppercase;color:var(--muted);margin-top:22px;padding-top:14px;border-top:.8px solid var(--line)}
.cw-never b{font-weight:700;color:var(--ink)}
/* the members list in the ⋯ sheet */
.cw-mem{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;border-bottom:.8px solid var(--line)}
.cw-mem:last-child{border-bottom:0}
.cw-mem .cw-ava{width:34px;height:34px;font-size:10px}
.cw-mem-n{flex:1;min-width:0;font-size:15px;font-weight:400}
.cw-mem-n small{display:block;font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.cw-mem .pg-act{font-size:11px}
.cw-memb{width:100%;text-align:left;-webkit-tap-highlight-color:transparent}
.cw-memb:active{background:var(--wash)}
/* the session-done chip row */
.cw-post{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.cw-post .pg-chip{min-height:40px;padding:0 14px}
.cw-post .pg-chip.on::before{content:"✓";margin-right:7px}

/* ── the invite landing page (public, server-rendered) ── */
.cw-join{min-height:100dvh;background:var(--paper);padding:max(40px,calc(28px + env(safe-area-inset-top,0px))) 28px 40px;max-width:520px;margin:0 auto}
.cw-join .wm{font-family:var(--courier);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink)}
.cw-join .wm i{font-style:normal;color:var(--accent)}
.cw-join .inv{font-size:15px;color:var(--muted);margin-top:44px}
.cw-join .inv b{color:var(--ink);font-weight:400}
.cw-join .crew{font-family:var(--helv);font-weight:900;font-size:34px;letter-spacing:-.02em;line-height:1;margin-top:8px}
.cw-join .cm{font-family:var(--courier);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.cw-join .sec{font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:36px 0 6px}
.cw-join .cw-card{width:100%;margin-top:10px;box-shadow:none;border:.8px solid var(--line);padding:12px 14px 10px}
.cw-join .cw-card .cw-spec{margin-top:10px}
.cw-join .cw-card .cw-spec .v{font-size:16px}
.cw-join .go{margin-top:30px}
.cw-join .go .pg-btn{height:52px;font-size:12px}
.cw-join .alt{text-align:center;font-family:var(--courier);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.cw-join .alt button{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cw-join .fine{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.05em;line-height:1.7;text-transform:uppercase;color:var(--muted);margin-top:36px;padding-top:14px;border-top:.8px solid var(--line)}
.cw-join .pg-btn{width:100%;height:47px;display:flex;align-items:center;justify-content:center;border:1.5px solid currentColor;background:transparent;font-family:var(--courier);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-action)}
.cw-join .pg-btn.t-black{color:#fff;background:#0A0A0A;border-color:#0A0A0A}

/* ── desktop (>720px): the list is a rail, the stream fills the right ── */
@media(min-width:721px){
  /* the layer's breakpoint-independent primitives, available above 720px too
     (lifted from 14's phone media block per the preview's build note, so the
     desktop rail can wear the same grammar without forking components) */
  .pg-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .pg-h1{font-family:var(--helv);font-weight:900;font-size:24px;letter-spacing:-.02em;line-height:.95}
  .pg-side{flex:0 0 auto;padding:0;font-family:var(--courier);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--ink)}
  .pg-rule{height:1.5px;background:var(--ink);margin-top:10px}
  .pg-btn{width:100%;height:47px;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid currentColor;background:transparent;font-family:var(--courier);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-action);white-space:nowrap}
  .pg-btn.t-ink{color:var(--ink)}.pg-btn.t-red{color:var(--accent)}.pg-btn.t-black{color:#fff;background:#0A0A0A;border-color:#0A0A0A}
  .pg-btns{display:flex;flex-direction:column;gap:10.5px;margin-top:24px}
  .pg-sec{font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
  .pg-sec:first-child{margin-top:0}
  .pg-fine{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.05em;line-height:1.7;text-transform:uppercase;color:var(--muted);margin-top:28px}
  .pg-link{display:block;width:100%;text-align:center;padding:8px 0;margin-top:22px;font-family:var(--courier);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .pg-act{flex:0 0 auto;padding:0 0 0 12px;font-family:var(--courier);font-size:13px;font-weight:700;text-transform:uppercase;color:var(--ink)}
  .pg-act.mut{color:var(--muted)}
  .pg-chip{display:inline-flex;align-items:center;min-height:36px;padding:9px 11px;border:1.5px solid var(--line);border-radius:var(--r-choice);background:transparent;color:var(--ink);font-family:var(--courier);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .pg-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  input.pg-in{width:100%;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;font-family:var(--helv);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);padding:16px 0 6px;height:44px;line-height:22px}
  input.pg-in::placeholder{color:#B2B2B2;font-weight:500}
  .cw-inv-a .pg-btn{height:40px;font-size:10.5px}
  .cw-rail .cw-zero .pg-btns .pg-btn{height:44px}
  .cw-desk{display:grid;grid-template-columns:300px 1fr;gap:20px;min-height:calc(100vh - 140px)}
  .cw-rail{background:var(--paper);box-shadow:var(--lift);border-radius:var(--radius);padding:18px 20px 8px;align-self:start;position:sticky;top:80px}
  .cw-rail .ct{font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .cw-rail .cw-row{padding:14px 0 12px}
  .cw-rail .cw-row.on{position:relative}
  .cw-rail .cw-row.on::before{content:"";position:absolute;left:-20px;top:10px;bottom:10px;width:3px;background:var(--ink)}
  .cw-rail .cw-ava{width:36px;height:36px;font-size:11px}
  .cw-rail .cw-row-n{font-size:15px}
  .cw-rail .pg-btns{margin-top:14px}
  .cw-rail .btn-line{width:100%}
  .cw-pane{background:var(--paper);box-shadow:var(--lift);border-radius:var(--radius);display:flex;flex-direction:column;min-height:calc(100vh - 140px);max-height:calc(100vh - 140px);overflow:hidden}
  .cw-pane .cw-head{position:static;padding:18px 24px 0}
  .cw-pane .cw-head .pg-head{align-items:center}
  .cw-pane .pg-side{font-size:18px;letter-spacing:0;padding:6px 0 6px 12px}
  .cw-pane .cw-back{display:none}
  .cw-pane .cw-scroll{position:static;flex:1;min-height:0;padding:16px 24px 20px;background:var(--canvas)}
  .cw-pane .cw-comp{position:static;padding:12px 24px 14px}
  .cw-pane .cw-jump{position:absolute}
  .cw-pane .cw-g{max-width:70%}
  .cw-zero{padding:40px 0 20px}
}
/* the recorder rule, applied here: the stream drops the dock */
@media(max-width:720px){
  body.cw-stream .dock-wrap,body.cw-stream #pageChrome{display:none}
  body.cw-stream #appRoot>.page{padding:0}
  body.cw-stream .view.on{padding:0}
}

/* ── build addition (not in the preview, which draws no dock states): the dock
   tab's unread badge — PRD §4. The list row's .cw-badge grammar, sat on the
   Crew tab's icon corner. Hidden at zero. The volt presence dot is v3.10; when
   it arrives it is suppressed while the Crew view is open (§4). ── */
.dock-tab{position:relative}
.cw-dock-n{position:absolute;top:5px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-fact);background:var(--accent);color:var(--paper);font-family:var(--courier);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}