/* PIP-GLASS (Andrew 10-01). "a fallout pip boy 3000 style … it needs that glassiness, with the pip boy aesthetic",
   then "still too smooth … more like that black mirror bandersnatch, fallout pip boy, ascii matrix vibe".
   The panels stay translucent glass; what was SMOOTH (soft gradients, wide blur glows, big round corners) gives
   way to StarNet's own retro vocabulary — the world's 2026-09-03 "90s Bandersnatch" CRT pass and the ASCII kit:
     · BANDERSNATCH FRINGE — a faint red / blue split on the phosphor type, the world's colour bleed on the glass
     · DITHER, NOT GRADIENT — a lit row / open tab is a 1px ordered-dither ▒ field with a crisp 1px edge
     · CRISP — 4px corners, 1px lines, small tight glows; a curved-glass sheen + tube vignette on each panel
     · PIP-BOY RULES — section headers sit on a thin rule with end ticks
     · ASCII — the CTX gauge keeps its ▮▯ cells; dock labels and crew status decode out of glyph-static
       (AsciiFX.scramble, wired in crewcards.js)
   No texture or grain over text, no flat-square-invert bars (both rejected). Layout and features untouched. */
body.glass-demo {
  --pg-fringe: -0.6px 0 rgba(255, 64, 48, .38), 0.6px 0 rgba(64, 150, 255, .34);
  --pg-glow: var(--pg-fringe), 0 0 3px rgba(var(--ph-rgb), .5);
  --pg-glow-soft: -0.5px 0 rgba(255, 64, 48, .22), 0.5px 0 rgba(64, 150, 255, .2), 0 0 2px rgba(var(--ph-rgb), .3);
  --pg-line: rgba(var(--ph-rgb), .42);
  --pg-dither: repeating-conic-gradient(rgba(var(--ph-rgb), .2) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  --pg-dither-gold: repeating-conic-gradient(rgba(var(--gold-rgb), .22) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}

/* ---------- 1 · every panel is a crisp curved phosphor screen ---------- */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) { border-radius: 4px; }
body.glass-demo:not(.hud-mode) #screen-game:not(.cinema) #stage-wrap,
body.glass-demo:not(.hud-mode) #screen-game:not(.cinema) #stage-wrap::before { border-radius: 4px; }
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) { border-radius: 4px 4px 0 0; }
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar)::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 1;
  border-radius: inherit;
  background:
    linear-gradient(176deg, rgba(255, 238, 205, .05), rgba(255, 238, 205, .01) 20%, transparent 30%),
    radial-gradient(ellipse 125% 105% at 50% 42%, transparent 64%, rgba(0, 0, 0, .4) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 205, .08), inset 0 0 0 1px rgba(0, 0, 0, .5);
}

/* ---------- 2 · phosphor type with the Bandersnatch fringe ---------- */
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3, #crew .crew-name, #crew .crew-clock, .ws-tab, #ws-new, #bottombar .bb-grp, #topbar .tb-val, #topbar #status-pill, .cmsg-empty-line, .cmsg-starter-title) { text-shadow: var(--pg-glow); }
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-status, #crew .crew-step, #left .ws-row, #crew-sum, #topbar .tb-lbl, .ctx-gauge) { text-shadow: var(--pg-glow-soft); }

/* ---------- 3 · Pip-Boy section rules: a thin line with end ticks ---------- */
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) {
  border-bottom: 0;
  background:
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px bottom 0 / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px bottom 0 / 1px 6px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) right 10px bottom 0 / 1px 6px no-repeat;
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head {
  border-block: 0;
  background:
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px top 0 / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px top 0 / 1px 6px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) right 10px top 0 / 1px 6px no-repeat;
}

/* ---------- 4 · crisp shapes: cards, keys, fields ---------- */
body.glass-demo:not(.hud-mode) #crew .crew-row,
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row,
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter { border-radius: 3px; }
body.glass-demo:not(.hud-mode) #crew .crew-portrait { border-radius: 3px; }
body.glass-demo:not(.hud-mode) #crew .crew-portrait > .dot { border-radius: 1px; width: 7px; height: 7px; }
body.glass-demo:not(.hud-mode) #left .ws-head :is(.ws-tab, #ws-new, #ws-addproject),
body.glass-demo:not(.hud-mode) #left #ws-search,
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp,
body.glass-demo:not(.hud-mode) #screen-game .widget-rail .wg-add { border-radius: 3px; }

/* ---------- 5 · the lit row / open tab is a dithered ▒ field with a crisp edge ---------- */
body.glass-demo:not(.hud-mode) #crew .crew-row:is(.selected, :hover, :focus-visible) {
  background: var(--pg-dither), rgba(var(--ph-rgb), .06); border-color: rgba(var(--ph-rgb), .55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
body.glass-demo:not(.hud-mode) #crew .crew-row.asking {
  background: var(--pg-dither-gold), rgba(var(--gold-rgb), .06); border-color: rgba(var(--gold-rgb), .65); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row:is(.sel, :hover, :focus-visible) {
  background: var(--pg-dither), rgba(var(--ph-rgb), .05); border-color: rgba(var(--ph-rgb), .5); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #left .ws-head .ws-tab.on {
  background: var(--pg-dither), rgba(var(--ph-rgb), .1); border-color: var(--ph); color: var(--ph-bright);
}
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter { background: transparent; border-color: rgba(var(--ph-rgb), .16); }
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter:is(:hover, :focus-visible) {
  background: var(--pg-dither), rgba(var(--ph-rgb), .05); border-color: rgba(var(--ph-rgb), .55); box-shadow: none;
}

/* ---------- 6 · the dock is the Pip-Boy tab strip ---------- */
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp {
  background: transparent; border-color: transparent; box-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp:is(:hover, :focus-visible) {
  background: rgba(var(--ph-rgb), .06); border-color: rgba(var(--ph-rgb), .35);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.open > .bb-grp {
  color: var(--ph-bright); background: var(--pg-dither), rgba(var(--ph-rgb), .08); border-color: var(--ph); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.has-active > .bb-grp { box-shadow: inset 0 -2px 0 var(--ph); }

/* ---------- 7 · ASCII gauges ---------- */
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-xp {
  height: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(5, 3, 1, .95) 6px 8px), rgba(var(--gold-rgb), .18);
}

/* ============================================================
   MATTE + CONTRAST (Andrew 10-01: "maybe its not the glass, I think its more so the shininess and fadedness").
   SHINE was the glass sheen on every panel and the inset top-light every glass surface carries (--gd-light);
   FADE was the amber haze washed over the panels (the 165deg --gd-face / 125deg glass gradients), dim
   grey-brown labels and soft glows. Fixed at the TOKENS so panels, keys, cards and windows go matte together:
   a deep even black, no top-lights, brighter labels and lines, a tight glow and a quieter fringe.
   ============================================================ */
body.glass-demo:not(.hud-mode) {
  --gd-light: transparent;
  --gd-face: color-mix(in srgb, var(--panel2) 95%, transparent);
  --gd-hover: rgba(var(--ph-rgb), .12);
  --gd-edge: rgba(var(--ph-rgb), .34);
  --gd-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --cg-glass: linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, .32));
  --cg-card: rgba(0, 0, 0, .3);
  --cg-edge: rgba(var(--ph-rgb), .34);
  --cg-hair: rgba(var(--ph-rgb), .22);
  --cg-mute: color-mix(in srgb, var(--text) 84%, var(--panel2));
  --pg-line: rgba(var(--ph-rgb), .6);
  --pg-fringe: -0.5px 0 rgba(255, 64, 48, .22), 0.5px 0 rgba(64, 150, 255, .2);
  --pg-glow: var(--pg-fringe), 0 0 2px rgba(var(--ph-rgb), .38);
  --pg-glow-soft: 0 0 1px rgba(var(--ph-rgb), .3);
  --pg-dither: repeating-conic-gradient(rgba(var(--ph-rgb), .3) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  --pg-dither-gold: repeating-conic-gradient(rgba(var(--gold-rgb), .32) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}
/* no sheen, no vignette haze: the panel screen is flat matte black with one crisp edge */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar)::before { background: none; box-shadow: none; }
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) {
  background: var(--gd-face); border-color: var(--gd-edge); box-shadow: var(--gd-shadow);
}
/* the content wells lose their faded washes */
body.glass-demo:not(.hud-mode) #chat-panel #chat-log { background: transparent; }
body.glass-demo:not(.hud-mode) #topbar :is(.tb-stat, .tb-connection) { background: rgba(0, 0, 0, .3); box-shadow: none; }
/* brighter readouts */
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) { color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #crew :is(.crew-status, .crew-step), body.glass-demo:not(.hud-mode) #left > h3 #crew-sum { color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) #crew .crew-row.working .crew-status { color: var(--ph); }
body.glass-demo:not(.hud-mode) #left .ws-head :is(.ws-tab, #ws-new, #ws-addproject) { color: var(--ph); border-color: rgba(var(--ph-rgb), .4); box-shadow: none; }
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty-hint { color: var(--cg-mute); opacity: 1; }

/* ============================================================
   NO CRT EFFECTS ON THE PANELS (Andrew 10-01: "remove the crt effects … make it look as clean as possible with
   our aesthetic"). The colour fringe, the phosphor glow on type and the dithered ▒ fields go; a lit row / open
   tab is a clean flat phosphor tint with a crisp edge. Kept: matte black, crisp shapes, the Pip-Boy ticked rules,
   the ▮▯ gauge and the ASCII decode. The station's own screen overlay (style.css body::after) is untouched.
   ============================================================ */
body.glass-demo:not(.hud-mode) {
  --pg-glow: none;
  --pg-glow-soft: none;
  --pg-dither: linear-gradient(rgba(var(--ph-rgb), .14), rgba(var(--ph-rgb), .14));
  --pg-dither-gold: linear-gradient(rgba(var(--gold-rgb), .14), rgba(var(--gold-rgb), .14));
}
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) :is(h3, .crew-name, .crew-clock, .crew-status, .crew-step, .ws-tab, #ws-new, .ws-row, .bb-grp, .tb-val, .tb-lbl, #status-pill, #crew-sum, .ctx-gauge, .cmsg-empty-line, .cmsg-starter-title) { text-shadow: none; }

/* ============================================================
   BALANCE (Andrew 10-02: "needs a bit more of that glass style back … the perfect balance between the two …
   SO CLOSE"). The glass returns at roughly half strength while what he called shine and fade stays out:
   softer corners, a little frosted translucency, a barely-there tint, glass-gradient keys / lit rows, and
   a faint top edge (about a third of the old top-light). No sheen band, no amber haze, readouts stay bright.
   ============================================================ */
body.glass-demo:not(.hud-mode) {
  --gd-face: linear-gradient(170deg, rgba(var(--ph-rgb), .035), transparent 45%), color-mix(in srgb, var(--panel2) 88%, transparent);
  --gd-light: rgba(var(--ph-bright-rgb), .045);
  --gd-hover: linear-gradient(120deg, rgba(var(--ph-rgb), .13), rgba(var(--ph-rgb), .04) 70%);
  --cg-glass: linear-gradient(125deg, rgba(var(--ph-bright-rgb), .05), rgba(var(--ph-rgb), .025) 48%, rgba(var(--ph-rgb), .01));
  --cg-card: linear-gradient(165deg, rgba(var(--ph-rgb), .05), transparent 50%), rgba(0, 0, 0, .25);
  --pg-dither: linear-gradient(120deg, rgba(var(--ph-rgb), .17), rgba(var(--ph-rgb), .06));
  --pg-dither-gold: linear-gradient(120deg, rgba(var(--gold-rgb), .18), rgba(var(--gold-rgb), .06));
}
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) {
  border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--gd-light), 0 8px 26px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
}
body.glass-demo:not(.hud-mode) #screen-game:not(.cinema) #stage-wrap,
body.glass-demo:not(.hud-mode) #screen-game:not(.cinema) #stage-wrap::before { border-radius: 8px; }
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) { border-radius: 8px 8px 0 0; }
body.glass-demo:not(.hud-mode) #crew .crew-row,
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row,
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter { border-radius: 6px; }
body.glass-demo:not(.hud-mode) #crew .crew-portrait { border-radius: 6px; }
body.glass-demo:not(.hud-mode) #crew .crew-portrait > .dot { border-radius: 50%; width: 8px; height: 8px; }
body.glass-demo:not(.hud-mode) #left .ws-head :is(.ws-tab, #ws-new, #ws-addproject),
body.glass-demo:not(.hud-mode) #left #ws-search,
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp,
body.glass-demo:not(.hud-mode) #screen-game .widget-rail .wg-add { border-radius: 6px; }
body.glass-demo:not(.hud-mode) #left .ws-head :is(.ws-tab, #ws-new, #ws-addproject) { background: var(--cg-glass); box-shadow: inset 0 1px 0 var(--gd-light); }
body.glass-demo:not(.hud-mode) #topbar :is(.tb-stat, .tb-connection) { background: var(--cg-card); box-shadow: inset 0 1px 0 var(--gd-light); border-radius: 6px; }

/* ============================================================
   MORE OF EACH (Andrew 10-02: "it needs more of the glass style back, but it needs more of the CRT at the same
   time, it needs both but more of each"). The two live on different layers so neither washes the other out:
   GLASS = the panel itself (softer 10px shape, frosted translucency + blur, a tinted face, a real top edge,
   deeper float shadow, glass-gradient cards and keys); CRT = what is ON the screen (phosphor glow on the type,
   the tube's own vignette inside each panel, a selection that blooms faintly, a whisper of colour fringe on
   titles). Still no sheen band across the panel and no amber haze over the readouts.
   ============================================================ */
body.glass-demo:not(.hud-mode) {
  /* glass up */
  --gd-face: linear-gradient(168deg, rgba(var(--ph-rgb), .06), rgba(var(--ph-rgb), .015) 40%, transparent 60%), color-mix(in srgb, var(--panel2) 82%, transparent);
  --gd-light: rgba(var(--ph-bright-rgb), .08);
  --cg-glass: linear-gradient(125deg, rgba(var(--ph-bright-rgb), .08), rgba(var(--ph-rgb), .035) 48%, rgba(var(--ph-rgb), .012));
  --cg-card: linear-gradient(165deg, rgba(var(--ph-rgb), .075), transparent 46%), rgba(0, 0, 0, .22);
  --pg-dither: linear-gradient(120deg, rgba(var(--ph-rgb), .2), rgba(var(--ph-rgb), .07));
  --pg-dither-gold: linear-gradient(120deg, rgba(var(--gold-rgb), .22), rgba(var(--gold-rgb), .07));
  /* CRT up */
  --pg-glow: -0.4px 0 rgba(255, 64, 48, .16), 0.4px 0 rgba(64, 150, 255, .14), 0 0 5px rgba(var(--ph-rgb), .42);
  --pg-glow-soft: 0 0 3px rgba(var(--ph-rgb), .26);
}
/* GLASS: the panel */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) {
  border-radius: 10px; border-color: rgba(var(--ph-rgb), .28);
  box-shadow: inset 0 1px 0 var(--gd-light), 0 12px 34px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(18px) saturate(1.08); backdrop-filter: blur(18px) saturate(1.08);
}
body.glass-demo:not(.hud-mode) #screen-game:not(.cinema) #stage-wrap,
body.glass-demo:not(.hud-mode) #screen-game:not(.cinema) #stage-wrap::before { border-radius: 10px; }
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) { border-radius: 10px 10px 0 0; }
body.glass-demo:not(.hud-mode) #crew .crew-row,
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row,
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter,
body.glass-demo:not(.hud-mode) #crew .crew-portrait { border-radius: 8px; }
body.glass-demo:not(.hud-mode) #left .ws-head :is(.ws-tab, #ws-new, #ws-addproject),
body.glass-demo:not(.hud-mode) #left #ws-search,
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp,
body.glass-demo:not(.hud-mode) #screen-game .widget-rail .wg-add { border-radius: 8px; }
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter { background: var(--cg-card); border-color: rgba(var(--ph-rgb), .2); }

/* CRT: the screen inside — the tube's vignette, under the type */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar)::before {
  background: radial-gradient(ellipse 120% 100% at 50% 45%, transparent 58%, rgba(0, 0, 0, .38) 100%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .4);
}
/* CRT: phosphor type (the earlier "no CRT" reset loses to this) */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) :is(h3, .crew-name, .crew-clock, .ws-tab, #ws-new, .bb-grp, .tb-val, #status-pill, .cmsg-empty-line, .cmsg-starter-title) { text-shadow: var(--pg-glow); }
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) :is(.crew-status, .crew-step, .ws-row, .tb-lbl, #crew-sum, .ctx-gauge) { text-shadow: var(--pg-glow-soft); }
/* CRT: a selection blooms faintly on the glass */
body.glass-demo:not(.hud-mode) #crew .crew-row:is(.selected, :hover, :focus-visible),
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row:is(.sel, :hover, :focus-visible),
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter:is(:hover, :focus-visible),
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.open > .bb-grp { box-shadow: 0 0 12px rgba(var(--ph-rgb), .16), inset 0 1px 0 var(--gd-light); }
body.glass-demo:not(.hud-mode) #crew .crew-row.asking { box-shadow: 0 0 12px rgba(var(--gold-rgb), .18); }

/* ============================================================
   NO ASCII EFFECTS (Andrew 10-02: "remove these ASCII effects … feels kind of cheap"). The glyph-static decode is
   gone from crewcards.js; the CTX gauge's ▮▯ character cells become a clean segmented glass bar fed by the same
   real fraction (stationui ctxTick → --ctx-fill). Colour still follows its level (idle / warn / crit).
   ============================================================ */
body.glass-demo:not(.hud-mode) #bottombar .ctx-gauge .ctx-cells {
  display: inline-block; width: 92px; height: 6px; border-radius: 3px; vertical-align: middle;
  font-size: 0; letter-spacing: 0; text-shadow: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(5, 3, 1, .9) 8px 10px),
    linear-gradient(90deg, currentColor calc(var(--ctx-fill, 0) * 100%), color-mix(in srgb, currentColor 18%, transparent) 0);
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 30%, transparent), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
body.glass-demo:not(.hud-mode) #bottombar .ctx-gauge .ctx-cells > * { display: none; }

/* ============================================================
   WINDOWS (10-02 touch-up): the dock windows wear the same balance as the panels. Their material token
   (menu-glass.css --menu-glass: a 125deg ph-bright .14 wash) was the haziest surface left — retuned to the
   panels' glass card, so Settings, the dossier, Channels, Commander and the catalogs follow at once. The
   kanban lanes leave their pitch-black wells for the same card, and the decorative window nameplate (a
   footer repeating the title beside a static dot) steps aside — the window's own header already names it.
   ============================================================ */
body.glass-demo:not(.hud-mode) .sn-menu {
  --menu-glass: linear-gradient(165deg, rgba(var(--ph-rgb), .08), rgba(var(--ph-rgb), .02) 46%, transparent 72%), rgba(0, 0, 0, .2);
}
body.glass-demo:not(.hud-mode) .settings-console .prov-card { background: rgba(0, 0, 0, .22); border-color: rgba(var(--ph-rgb), .22); }
body.glass-demo:not(.hud-mode) .settings-console :is(.settings-group, .prov-card),
body.glass-demo:not(.hud-mode) .agent-dossier :is(.ag-hero, .ag-mission, .cf-group) { box-shadow: inset 0 1px 0 var(--gd-light); }
body.glass-demo:not(.hud-mode) .term .kb-col {
  background: linear-gradient(165deg, rgba(var(--ph-rgb), .06), transparent 46%), rgba(0, 0, 0, .22);
  border: 1px solid rgba(var(--ph-rgb), .2); border-radius: 8px; box-shadow: inset 0 1px 0 var(--gd-light);
}
body.glass-demo:not(.hud-mode) .term .kb-col h4 { border-bottom-color: rgba(var(--ph-rgb), .16); }
body.glass-demo:not(.hud-mode) .term:not(.pw) .term-foot { display: none; }
/* the window shell matches the panels' shape and phosphor title */
body.glass-demo:not(.hud-mode) .term:not(.pw) { border-radius: 10px; }
body.glass-demo:not(.hud-mode) .term:not(.pw) .term-title { text-shadow: var(--pg-glow); }

/* ============================================================
   CAM CORNERS (Andrew 10-02, from his mock: "a thin line cam overlay, just thin lines at the corners no words
   needed"). Four 1px L-marks inset from the station view's edges — a viewfinder, nothing printed. The 09-30 rule
   that hid the old ┌┐└┘ glyphs and every cam word stays (glass-demo.css); these are drawn lines on
   .cam-hud::after, so the CINEMA key remains the only control and the BR mark frames it from outside.
   ============================================================ */
body.glass-demo:not(.hud-mode) #screen-game #stage-wrap .cam-hud::after {
  --cm: rgba(var(--ph-rgb), .85); --cl: 34px; --ct: 1px;
  content: ''; display: block; position: absolute; inset: 10px; pointer-events: none;
  background:
    linear-gradient(var(--cm), var(--cm)) left top / var(--cl) var(--ct),
    linear-gradient(var(--cm), var(--cm)) left top / var(--ct) var(--cl),
    linear-gradient(var(--cm), var(--cm)) right top / var(--cl) var(--ct),
    linear-gradient(var(--cm), var(--cm)) right top / var(--ct) var(--cl),
    linear-gradient(var(--cm), var(--cm)) left bottom / var(--cl) var(--ct),
    linear-gradient(var(--cm), var(--cm)) left bottom / var(--ct) var(--cl),
    linear-gradient(var(--cm), var(--cm)) right bottom / var(--cl) var(--ct),
    linear-gradient(var(--cm), var(--cm)) right bottom / var(--ct) var(--cl);
  background-repeat: no-repeat;
}
/* CINEMA sits inside the bottom-right mark with clear space, never on its lines */
body.glass-demo:not(.hud-mode) #screen-game #stage-wrap .cam-cine { right: 24px; bottom: 24px; }

/* ============================================================
   TOP-RIGHT INSTRUMENTS (Andrew 10-02: "make the top right lvl and uplink indicator fit better with the new
   aesthetic"). Was three housings deep (a dark well holding two boxes) in its own dialect — a dashed XP sliver
   pinned to the bottom edge, a different border tone, no light on UPLINK. Now: no outer well; each instrument is
   one glass card like the crew cards; values glow like the panel titles; XP is the same segmented glass bar as
   the CTX gauge; UPLINK carries a housed lamp keyed to the pill's own state class (written by app.js /
   stationui.js: '' online · working · standby · down) — so the light only says what the link already says.
   ============================================================ */
body.glass-demo:not(.hud-mode) #topbar .tb-stats { background: none; box-shadow: none; padding: 0; gap: 8px; }
body.glass-demo:not(.hud-mode) #topbar :is(#tb-station, .tb-connection) {
  min-height: 46px; padding: 7px 14px; border: 1px solid rgba(var(--ph-rgb), .22); border-radius: 8px;
  background: var(--cg-card); box-shadow: inset 0 1px 0 var(--gd-light);
}
body.glass-demo:not(.hud-mode) #topbar #tb-station { border-color: rgba(var(--gold-rgb), .26); grid-template-rows: auto auto auto; row-gap: 2px; }
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-lbl,
body.glass-demo:not(.hud-mode) #topbar #sig { font-size: 11px; letter-spacing: 1.8px; opacity: 1; text-shadow: none; }
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-lbl { color: color-mix(in srgb, var(--gold) 75%, var(--panel2)); }
body.glass-demo:not(.hud-mode) #topbar #sig { color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) #topbar :is(#tb-station .tb-val, #status-pill) { font-size: 21px; line-height: 1; color: var(--ph-bright); text-shadow: var(--pg-glow); }
/* XP: the segmented glass bar, in the card's flow under the level (no longer a sliver on the edge) */
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-xp {
  position: relative; left: auto; right: auto; bottom: auto; grid-column: 2; width: 100%; min-width: 64px; height: 5px;
  border-radius: 3px; overflow: hidden; background: rgba(var(--gold-rgb), .16);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-xp::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(5, 3, 1, .9) 8px 10px);
}
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-xp-fill { background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), .45); }
body.glass-demo:not(.hud-mode) #topbar .tb-station-mark { grid-row: 1 / 4; }
/* UPLINK: a housed lamp that follows the pill's real state */
body.glass-demo:not(.hud-mode) #topbar #status-pill { display: flex; align-items: center; gap: 8px; }
body.glass-demo:not(.hud-mode) #topbar #status-pill::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok, #7bc88a); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 6px rgba(123, 200, 138, .35);
}
body.glass-demo:not(.hud-mode) #topbar #status-pill.working::before { background: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 6px rgba(var(--gold-rgb), .4); }
body.glass-demo:not(.hud-mode) #topbar #status-pill.standby::before { background: var(--ph-dim); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
body.glass-demo:not(.hud-mode) #topbar #status-pill.down::before { background: var(--link-down, #ff5a4a); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 6px rgba(255, 90, 74, .4); }
body.glass-demo:not(.hud-mode) #topbar :is(.tb-stats, .tb-status) { align-items: stretch; }
body.glass-demo:not(.hud-mode) #topbar :is(#tb-station, .tb-connection) { height: 50px; min-height: 50px; box-sizing: border-box; align-content: center; }

/* ============================================================
   PIP-BOY KNOB +1 (Andrew 10-02: "just ever so slightly a bit more of the fallout pip boy / terminal esq vibe").
   Nothing new — the existing Pip-Boy/terminal dials each turned one small notch: glow, fringe, ticked rules,
   the tube vignette inside the panels, the selection bloom, and terminal tracking on the small caps labels.
   ============================================================ */
body.glass-demo:not(.hud-mode) {
  --pg-glow: -0.45px 0 rgba(255, 64, 48, .2), 0.45px 0 rgba(64, 150, 255, .17), 0 0 6px rgba(var(--ph-rgb), .5);
  --pg-glow-soft: 0 0 3px rgba(var(--ph-rgb), .33);
  --pg-line: rgba(var(--ph-rgb), .68);
}
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) {
  background:
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px bottom 0 / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px bottom 0 / 1px 8px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) right 10px bottom 0 / 1px 8px no-repeat;
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head {
  background:
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px top 0 / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) left 10px top 0 / 1px 8px no-repeat,
    linear-gradient(var(--pg-line), var(--pg-line)) right 10px top 0 / 1px 8px no-repeat;
}
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar)::before {
  background: radial-gradient(ellipse 118% 98% at 50% 45%, transparent 55%, rgba(0, 0, 0, .46) 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .46);
}
body.glass-demo:not(.hud-mode) #crew .crew-row:is(.selected, :hover, :focus-visible),
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row:is(.sel, :hover, :focus-visible),
body.glass-demo:not(.hud-mode) #chat-panel .cmsg-empty .cmsg-starter:is(:hover, :focus-visible),
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.open > .bb-grp { box-shadow: 0 0 14px rgba(var(--ph-rgb), .2), inset 0 1px 0 var(--gd-light); }
body.glass-demo:not(.hud-mode) #screen-game :is(#left > h3, #chat-panel > h3) { letter-spacing: 3px; }
body.glass-demo:not(.hud-mode) #screen-game :is(#crew-sum, #topbar .tb-lbl, #topbar #sig, .cmsg-starter-title, #bottombar .bb-grp) { letter-spacing: 1.6px; }

/* ============================================================
   COMMS REPLIES (Andrew 10-02: "clean it up esp in the way agents respond … convey output the best way
   possible"). Measured on a real streamed reply: headings were body-size bright text (no structure), bold was a
   barely-brighter cream in prose (VT323 has one weight) but underlined in list leads, code blocks scrolled under
   their copy key, inline code split its box across lines. The conversation layout (agent left on a phosphor rail,
   Commander right on gold, inverted name chips — comms.css) is untouched; only the reply's typography changes.
   ============================================================ */
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-b { color: var(--ph); text-shadow: 0 0 4px rgba(var(--ph-rgb), .38); }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-list li > .md-b:first-child { text-decoration: none; }
/* a heading is a Pip-Boy section label: amber small caps on a rule that runs to the edge */
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-h {
  display: flex; align-items: center; gap: 9px;
  margin: 1.05em 0 .45em; font-size: .86em; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ph); text-shadow: 0 0 5px rgba(var(--ph-rgb), .4);
}
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-h::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(var(--ph-rgb), .32); }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body > .md-h:first-child { margin-top: .2em; }
/* inline code keeps its box when it wraps */
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-code {
  padding: 0 5px; border-radius: 4px; border-color: rgba(var(--ph-rgb), .24); background: rgba(var(--ph-rgb), .08);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* a code block wraps inside its glass well; the copy key never sits on top of the text */
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-pre-wrap { margin: .55em 0; }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-pre {
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden;
  padding: 10px 42px 10px 12px; font-size: 14px; line-height: 1.45;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(var(--ph-rgb), .22); border-left: 2px solid var(--ph-dim); border-radius: 8px;
}
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-copy { top: 7px; right: 7px; }
/* tables and lists */
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-table-scroll { border: 1px solid rgba(var(--ph-rgb), .2); border-radius: 8px; }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-table :is(th, td) { border: 0; border-bottom: 1px solid rgba(var(--ph-rgb), .14); padding: .35em .7em; }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-table tr:last-child td { border-bottom: 0; }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-table th { background: rgba(var(--ph-rgb), .08); color: var(--ph); letter-spacing: 1px; }
body.glass-demo:not(.hud-mode) :is(#chat-log, #gc-log) .cmsg .body .md-list li::marker { color: var(--ph); }

/* ============================================================
   DECISION CARDS (Andrew 10-02, on the north-star question card: "make it look cleaner maybe slightly less so
   rounded on the edges looks a bit cheap"). The whole beat-card family — nudges, turn-ins, consent — moves from
   a 10px glowing box to a clean 5px glass card that keeps its gold left edge; its reply chips match.
   ============================================================ */
body.glass-demo:not(.hud-mode) #chat-panel .cmsg:is(.turnin, .nudge, .consent) {
  border-radius: 5px; padding: 13px 15px;
  border: 1px solid rgba(var(--ph-rgb), .2); border-left: 2px solid rgba(var(--gold-rgb), .62);
  background: var(--cg-card); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent) .consent-btn,
body.glass-demo:not(.hud-mode) #chat-panel .choice-row .choice,
body.glass-demo:not(.hud-mode) #chat-panel .workshop-return .ws-pane { border-radius: 5px; }

/* laptop widths narrow the CREW rail to 200px (comms-layout.css): SESSIONS / PROJECTS / + NEW stay on one row */
@media (max-width: 1440px) {
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head { gap: 4px; padding-inline: 6px; }
  body.glass-demo:not(.hud-mode) #left .ws-head .ws-view { gap: 4px; }
  body.glass-demo:not(.hud-mode) #left .ws-head .ws-tab,
  body.glass-demo:not(.hud-mode) #left .ws-head #ws-addproject { padding: 4px 5px; letter-spacing: .2px; }
}
@media (max-width: 1440px) {
  /* at laptop widths + NEW becomes a square + key (its label stays the accessible name; the tooltip names it) */
  /* font-size 0 must beat readability.css's control floor (!important) — this key shows an icon, its label stays the accessible name */
  body.glass-demo:not(.hud-mode) #left .ws-head #ws-new { font-size: 0 !important; min-width: 32px; padding: 4px 0; display: inline-flex; align-items: center; justify-content: center; }
  body.glass-demo:not(.hud-mode) #left .ws-head #ws-new::before { content: ''; }
}

/* ============================================================
   TOP-RIGHT INSTRUMENTS v2 — BARE READOUTS (Andrew 10-02 picked B of three: "B looks cleanest"). No housing at
   all: glowing terminal readouts straight on the bar — [shield] COMMANDER over LV 1 · segmented XP │ UPLINK ● state.
   Every value comes from the same writers (topbar.js level/XP, app.js + stationui.js pill state class).
   ============================================================ */
body.glass-demo:not(.hud-mode) #topbar :is(#tb-station, .tb-connection) {
  height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
}
body.glass-demo:not(.hud-mode) #topbar .tb-stats { display: flex; align-items: center; gap: 0; height: 42px; padding: 0 6px; }
body.glass-demo:not(.hud-mode) #topbar .tb-link-mark { display: none; }
body.glass-demo:not(.hud-mode) #topbar #save-dot { position: static; margin-left: 8px; }
body.glass-demo:not(.hud-mode) #topbar .tb-link-copy { flex-direction: row; align-items: center; gap: 10px; }
body.glass-demo:not(.hud-mode) #topbar .tb-status { padding-left: 16px; margin-left: 16px; border-left: 1px solid rgba(var(--ph-rgb), .28); align-self: stretch; display: flex; align-items: center; }
body.glass-demo:not(.hud-mode) #topbar .tb-connection { min-width: 0; }
body.glass-demo:not(.hud-mode) #topbar #tb-station {
  display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
}
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-station-mark { grid-column: 1; grid-row: 1 / 3; width: 20px; height: 22px; }
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-lbl { grid-column: 2; grid-row: 1; }
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-val { grid-column: 2; grid-row: 2; }
body.glass-demo:not(.hud-mode) #topbar #tb-station .tb-xp { grid-column: 3; grid-row: 1 / 3; align-self: center; width: 72px; min-width: 72px; height: 6px; }
/* PHONE WIDTH (sweep/world 2026-10-20): the topbar.css ≤600px contract — shed the level lamp, keep UPLINK — lost to the
   two rules above at glass specificity, so at 390px UPLINK was clipped to "UPLI" and ONLINE / LINK DOWN sat off-screen.
   Restate it here at the specificity it has to beat (locked by test/mobile-topbar-glass-cascade.test.js). */
@media (max-width: 600px) {
  body.glass-demo:not(.hud-mode) #topbar #tb-station { display: none; }
  body.glass-demo:not(.hud-mode) #topbar .tb-status { padding-left: 0; margin-left: 0; border-left: 0; gap: 4px; }
}

/* ============================================================
   QUIETER COMMS BEATS (Andrew 10-02: "the chat just needs these improvements … so its not annoying to communicate
   with the agent"). RATE = one summary line + one row (label · two pixel thumbs). REMEMBERED = a slim collapsed
   toggle; its memories (each still carrying the ✕ forget) open on click. Applies wherever the rate control
   renders (COMMS beats and the OUTBOX window).
   ============================================================ */
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .work-rate-reference {
  flex: 1 0 100%; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px; color: var(--cg-mute); opacity: 1;
}
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .work-rate-label {
  font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ph); text-shadow: var(--pg-glow-soft);
}
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .consent-btns { display: inline-flex; gap: 6px; margin: 0; }
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .consent-btn.thumb {
  width: 38px; min-width: 38px; height: 30px; min-height: 30px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 5px; border: 1px solid rgba(var(--ph-rgb), .3); background: var(--cg-card); color: var(--ph);
}
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .consent-btn.thumb:is(:hover, :focus-visible) {
  border-color: var(--ph); background: rgba(var(--ph-rgb), .12); box-shadow: 0 0 10px rgba(var(--ph-rgb), .2);
}
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .consent-btn.thumb-down { color: color-mix(in srgb, var(--bad, #ff5a4a) 70%, var(--ph)); }
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .consent-btn.thumb-down:is(:hover, :focus-visible) { border-color: var(--bad, #ff5a4a); background: rgba(255, 90, 74, .1); box-shadow: 0 0 10px rgba(255, 90, 74, .18); }
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) .thumb-px { display: block; image-rendering: pixelated; filter: drop-shadow(0 0 2px currentColor); }
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) .thumb-down .thumb-px { transform: rotate(180deg); }
body.glass-demo:not(.hud-mode) :is(#chat-panel, .term) [data-rate-run] .consent-result { font-size: 14px; letter-spacing: 1px; }

/* REMEMBERED: a slim toggle row, collapsed by default */
body.glass-demo:not(.hud-mode) #chat-panel .cmsg.receipts { padding: 9px 14px; }
body.glass-demo:not(.hud-mode) #chat-panel .receipts .receipt-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 0; margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ph); text-shadow: var(--pg-glow-soft);
}
body.glass-demo:not(.hud-mode) #chat-panel .receipts .receipt-head::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor; transition: transform var(--t-fast, .12s) ease;
}
body.glass-demo:not(.hud-mode) #chat-panel .receipts .receipt-head[aria-expanded="true"]::before { transform: rotate(90deg); }
body.glass-demo:not(.hud-mode) #chat-panel .receipts .receipt-head:is(:hover, :focus-visible) { color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #chat-panel .receipts .receipt-items { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(var(--ph-rgb), .14); }
body.glass-demo:not(.hud-mode) #chat-panel .receipts .receipt-items[hidden] { display: none; }

/* ============================================================
   UI SWEEP (Andrew 10-02: "so many flaws … tiny little areas that havent been improved in ages … sweep starnet UI
   to find any areas that are extremely old and not up to date with the new style, also change the HUD button").
   ============================================================ */
/* HUD key: a square glass icon key like the idbar's + / globe keys — a picture-in-picture glyph (a small window riding
   a big one, which is what HUD mode does). The markup keeps its HUD text as the accessible name (hudmode.test pins it). */
body.glass-demo #comms-hud:not([hidden]) {
  display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0; margin-left: 6px;
  font-size: 0; letter-spacing: 0; color: var(--ph);
  border: 1px solid rgba(var(--ph-rgb), .3); border-radius: 6px; background: var(--cg-card, rgba(0, 0, 0, .25));
  box-shadow: inset 0 1px 0 var(--gd-light, transparent);
}
body.glass-demo #comms-hud:not([hidden])::before {
  content: ''; width: 16px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='.7' y='.7' width='14.6' height='12.6' rx='1.5'/%3E%3Crect x='8.2' y='7' width='5.6' height='4.6' rx='.8' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='.7' y='.7' width='14.6' height='12.6' rx='1.5'/%3E%3Crect x='8.2' y='7' width='5.6' height='4.6' rx='.8' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.glass-demo #comms-hud:not([hidden]):is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .12); box-shadow: 0 0 10px rgba(var(--ph-rgb), .18); }

/* a routine's runs key (app.css): the glass rail's quiet line colour; the older runs it opens sit set in under the newest */
body.glass-demo:not(.hud-mode) #left #workstreams .ws-runs { font-size: 16px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) #left #workstreams .ws-runs:is(:hover, :focus-visible) { color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #left #workstreams .ws-row[data-runs="older"] { margin-left: 28px; }

/* NEEDS YOU (2026-10-11, needsyou.js): every approval, question and failure on the station, pinned atop SESSIONS — the
   approval-card glass edged in the station's "needs you" gold. One row per item, sized for the narrow rail: WHO · where ·
   how long (on a narrow rail the place leaves the line, and stays the row's door and its tip), then what exactly (a free-form
   ask, a question or a build two lines at most, every other wait in full: its last word is the claim), then its keys full
   width. Matte: state is an edge or a fill, never a glow. */
/* (Andrew 10-15: "ugly and unorganized … in different styles", then on the plain-row pass: "disgusting and cheap … we need
   it premium") NEEDS YOU is the rail's first section, each wait drawn as the CREW panel's own agent card in its "needs your
   OK" frame (portrait well + housed lamp, name in the agent's colour, time, the line); a click on a card opens it. */
body.glass-demo:not(.hud-mode) #left .ws-needs {
  flex: 0 0 auto; margin: 2px 0 4px; padding: 0 0 2px; font-family: 'VT323', monospace; color: var(--text); text-shadow: none;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
#left .ws-needs[hidden] { display: none !important; }
/* bounded in every rail mode (glass, plain, hud): an expanded "N more" scrolls inside its card, so the lower asks' keys
   and "Show fewer" stay reachable and SESSIONS keeps its rows. The scrollbar is themed like COMMS', never a white native one.
   Its gutter is reserved (review 10-16): a scrollbar that comes and goes never narrows the rows, so an ask line reads the
   same with or without it (needsyou.js measures that line to offer Approve once; a first row whose own keys brought the
   scrollbar in flipped its reading on every heartbeat). The glass panel gives the gutter's width back (--ny-gutter, below) */
#left .ws-needs { max-height: min(48%, 440px); overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ph-dim) transparent; }
#left .ws-needs::-webkit-scrollbar { width: 8px; }
#left .ws-needs::-webkit-scrollbar-track { background: transparent; }
#left .ws-needs::-webkit-scrollbar-thumb { background: var(--ph-dim); border-radius: 4px; }
/* (Andrew 10-15, his pick of three rendered options: "B · ONE PANEL") the section head on the rail's 10px gutter, then
   every wait as a row inside ONE quiet glass panel: hairlines between rows, a small portrait well with its housed lamp,
   the agent's name in its colour with the time, the line under it, keys only when there is more than opening it.
   The panel shares the CREW cards', rail keys' and search field's edges (x 21 to 401 at the 400px rail). The section's
   reserved scrollbar gutter (above) is taken back out of the right margins: needsyou.js measures it into --ny-gutter, so
   the panel and the count keep those edges whether or not the section scrolls (up to the margin's own width; 0 where
   scrollbars overlay the content). */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 21px 6px 19px; padding-right: max(0px, 21px - var(--ny-gutter, 0px));
  font-size: 18px; letter-spacing: 2.4px; line-height: 1; text-transform: uppercase; color: var(--ph-bright);
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-lamp { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-count { margin-left: auto; font-size: 18px; letter-spacing: .4px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cg-mute); }
/* (Andrew 10-19, his pick of three rendered at his settings: "B · ONE PANEL BY KIND" — "I like B when they are organized
   together perfectly … because its groups each agent by whether its an approval etc") the waits sit in ONE matte panel on
   the rail's 10px gutter, each kind under its own strip (the 10-17 alert card's strip - APPROVALS, QUESTIONS, … FAILED -
   said once for its kind, with its count from two waits up), its rows on hairlines under it. A row is the agent's portrait,
   two lines (WHO . in <where> . how long, then the ask) and ONE right-hand column: its safe one-tap key (Deny, Retry,
   Dismiss) at one width, or a quiet caret where the row only opens, so every age and every key lines up row to row. No gold
   wash on a row: seven tinted boxes under the CREW cards read as one mustard wall ("this still has such a cheap feel to
   it"); the colour is the strip, the frame and the key. It is the 10-19 INBOX (every row the door to where its wait is
   answered, only the safe keys: "drop the REVIEW/ANSWER keys"), regrouped. */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-panel {
  margin: 0 10px 6px; margin-right: max(0px, 10px - var(--ny-gutter, 0px)); padding: 0; container-type: inline-size;
  border: 1px solid rgba(var(--gold-rgb), .4); border-radius: 2px; background: rgba(0, 0, 0, .35); box-shadow: none; overflow: hidden;
}
/* nothing but failures waiting: the panel's frame takes the fault colour */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-panel:not(:has(> .ny-sec:not(.failed, [hidden]))) { border-color: rgba(var(--bad-rgb), .45); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-sec { --ny-k: var(--gold-rgb); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-sec.failed { --ny-k: var(--bad-rgb); }
/* a kind's strip, edge to edge: what these waits are, and how many from two up */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-grp {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px 4px;
  font-size: 16px; line-height: 1.15; letter-spacing: 1.6px; text-transform: uppercase; color: rgb(var(--ny-k));
  background: rgba(var(--ny-k), .14); border-bottom: 1px solid rgba(var(--ny-k), .3);
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-sec + .ny-sec > .ny-grp { border-top: 1px solid rgba(var(--ny-k), .3); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-grp-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-grp-n { flex: none; margin-left: auto; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-list {
  display: block; margin: 0; padding: 0; list-style: none; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none;
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item {
  --ny-k: var(--gold-rgb);
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 68px; column-gap: 10px; row-gap: 3px; align-items: center;
  margin: 0; padding: 6px 10px; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; background: transparent;
  transition: background var(--t-fast, .12s) ease;
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item + .ny-item { border-top: 1px solid rgba(var(--ph-rgb), .14); }
/* something broke (failed work, a failed routine): its portrait well and its hover take the fault colour */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item:is(.failed, .routine) { --ny-k: var(--bad-rgb); }
#left .ws-needs .ny-item[hidden], #left .ws-needs .ny-sec[hidden], #left .ws-needs .ny-more[hidden] { display: none !important; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item:has(> .ny-line > .ny-where:focus-visible) { outline: 2px solid var(--ph-bright); outline-offset: -2px; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item:is(:hover, :focus-within) { background: rgba(var(--ny-k), .07); }
/* the portrait well (the CREW card's, scaled to a row) with the figure the floor draws, edged in the row's colour */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-face {
  grid-column: 1; grid-row: 1 / span 2; align-self: center; position: relative; box-sizing: border-box; width: 34px; height: 40px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  border-radius: 2px; border: 1px solid rgba(var(--ny-k), .32); background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-face img { width: 30px; height: 36px; object-fit: contain; object-position: 50% 100%; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > :is(.ny-line, .ny-what) { grid-column: 2; min-width: 0; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > .ny-line { grid-row: 1; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > .ny-what { grid-row: 2; }
/* the right-hand column: the key, or the caret that says the row opens, centred on the two lines at the row's right edge */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > :is(.ny-keys, .ny-go) { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-go {
  width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid rgba(var(--ph-rgb), .55); border-top: 2px solid rgba(var(--ph-rgb), .55); transform: rotate(45deg);
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item:is(:hover, :focus-within) > .ny-go { border-color: var(--ph-bright); }
/* THE NARROW RAILS (the 232px default, the 200px laptop rail, a large TEXT SIZE), read off the panel's width:
   · the portrait steps out first and the lines take its room: the rows stay two lines with the key beside them (live on
     the 232px rail, a portrait AND the key left the ask 12 characters, and the key under the lines made each row 89px:
     one wait showed as it landed);
   · "in <where>" steps out of sight rather than leave a two-letter stub ("in DELIV…"). It is never display:none: it stays
     the row's door for the keyboard and a screen reader (its name says who, what and where; focus lands on it while an
     answer is on its way), the line's tip ends "— in <where>", and a keyboard focus on it rings the row (live 10-16: put
     back into the line it was a 0-22px stub on the 200px rail);
   · at the very narrowest the key leaves its column for the line under the lines, at the row's right edge, so the ask
     keeps the row's width (the caret, which only says the row opens, steps out with the column) */
@container (max-width: 300px) {
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item { grid-template-columns: minmax(0, 1fr) 68px; }
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-face { display: none; }
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > :is(.ny-line, .ny-what) { grid-column: 1; }
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > :is(.ny-keys, .ny-go) { grid-column: 2; }
}
@container (max-width: 270px) {
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-where {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@container (max-width: 200px) {
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item { grid-template-columns: minmax(0, 1fr); }
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > .ny-keys { grid-column: 1; grid-row: 3; margin-top: 4px; }
  body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item > .ny-go { display: none; }
}
/* line 1: AGENT (the row's headline, in its colour) · in <where> ........ time. The place gives up its room first (review
   10-16): it starts from nothing and takes only what the name and the time leave (flex-basis 0, then it fades out), so a
   two-word name (MISS FORTUNE) or a group's names stay on one line beside a long place; a name wraps only where it and its
   time alone overflow the line, and the time is never pushed out of the row */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-line { display: flex; align-items: baseline; gap: 0 8px; min-width: 0; line-height: 1.15; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-who { flex: 0 1 auto; font-size: 19px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ph); text-shadow: var(--pg-glow-soft); }
/* a group chat's headline is its members' names, the SESSIONS row's own line ("ULTRON, CYPHER +3"): it wraps at a space
   rather than end in "…", and its +N keeps its gap */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-who > .ws-agent-names { white-space: normal; overflow: visible; text-overflow: clip; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-who > .ws-agent-more { margin-left: .4em; }
/* line 2: the ask first, then what it is about. A wait whose last words ARE the claim (a quest said done, loop results,
   STEP-IN, extensions, a group, a stored question) is shown whole */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-what { display: block; font-size: 17px; line-height: 1.25; letter-spacing: .4px; color: var(--text); overflow-wrap: anywhere; }
/* an approval, a question, a build and a failure keep ONE line, so every such row is the same two lines (the ask leads, an
   agent's builds lead with their count, a failure with its claim: "failed: …", "stopped when …", "routine failed · <its
   name>"). A line too long for its room fades out at the row's edge rather than end in "…": VT323 draws its ellipsis as
   one flat bar at this size, and "playable p_" read as a typo (a second line that wrapped at a word showed no cut at all).
   Its whole sentence is the tip, and the row opens the card or the run that holds it all */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item:is(.approval, .question, .build, .failed, .routine) .ny-what {
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item:is(:hover, :focus-within) .ny-what { color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-verb { color: var(--cg-mute, var(--text)); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-age { flex: none; margin-left: auto; font-size: 16px; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--cg-mute, var(--text)); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-where {
  flex: 1 1 0; min-width: 0; padding: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: clip; cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  font: 16px 'VT323', monospace; letter-spacing: .4px; color: var(--cg-mute, var(--text)); background: none; border: 0; box-shadow: none; text-shadow: none;
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-where:is(:hover, :focus-visible) { color: var(--ph-bright); }
/* a row's one key (Deny, Retry, Dismiss) is a terminal key: the 16px label (the type scale's floor), 7px sides, the glass key's 34px */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key {
  flex: 0 0 auto; min-width: 0; min-height: 34px; padding: 5px 7px; font: 16px/1.1 'VT323', monospace; letter-spacing: .9px; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  color: var(--ph); border: 1px solid rgba(var(--ph-rgb), .4); border-radius: 2px; text-shadow: none;
  background: rgba(0, 0, 0, .25); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key:hover:not(:disabled) { color: var(--ph-bright); border-color: rgba(var(--ph-rgb), .75); background: rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key:focus-visible { outline: 2px solid var(--ph-bright); outline-offset: 2px; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key.primary { color: var(--gold); border-color: rgba(var(--gold-rgb), .75); background: rgba(var(--gold-rgb), .1); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key.primary:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); background: rgba(var(--gold-rgb), .2); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key.deny { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 6%, transparent); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key.quiet { color: var(--text); background: transparent; }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-key:disabled { opacity: .55; cursor: default; }
/* every key is the column's one width, so the keys stand in one column row to row (Andrew 10-15: "make sure buttons are
   aligned"), and never narrower than its label; the glass key's 34px */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-keys > .ny-key { flex: 0 0 auto; min-width: 68px; min-height: 34px; text-align: center; }
/* a build's door is its own session, named for the build its line already names: the place leaves sight there (it stays the
   row's door for the keyboard and a screen reader, as on a narrow rail) */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-item.ny-place-said .ny-where { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* "N more" / "Show fewer" is a key, the rail's own: full width under the panel, on its edges (its width takes back the
   scrollbar gutter the panel's right margin gives back, or it ended short of the rows), gold caps on no fill */
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 10px - max(0px, 10px - var(--ny-gutter, 0px))); min-height: 32px; margin: 2px 10px 5px;
  margin-right: max(0px, 10px - var(--ny-gutter, 0px)); padding: 4px 10px; cursor: pointer;
  font: 16px/1.1 'VT323', monospace; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 2px; background: transparent; box-shadow: none; text-shadow: none;
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-more:is(:hover, :focus-visible) { border-color: var(--gold); background: rgba(var(--gold-rgb), .1); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-more::after {
  content: ''; width: 7px; height: 7px; margin: 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-more[aria-expanded="true"]::after { transform: rotate(-135deg); margin: 4px 0 0; }
/* open, the list takes the rail's room - the SESSIONS rows wait under it - rather than a short box that slices its rows */
#left .ws-needs.ny-open { max-height: min(72%, 680px); }
body.glass-demo:not(.hud-mode) #left .ws-needs .ny-more:is(:hover, :focus-visible) { color: var(--ph-bright); }

/* --- old-style leftovers found by the 16-window sweep (10-02), each brought into the current glass --- */
/* step-by-step guides (ABILITIES, CHANNELS): were a flat black box with a 1px dim rule */
body.glass-demo:not(.hud-mode) .term .platform-guide {
  border: 1px solid rgba(var(--ph-rgb), .22); border-radius: 8px; background: var(--cg-card); box-shadow: inset 0 1px 0 var(--gd-light);
  padding: 11px 14px;
}
body.glass-demo:not(.hud-mode) .term .platform-guide summary { font-size: 16px; letter-spacing: .6px; list-style: none; display: flex; align-items: center; gap: 9px; }
body.glass-demo:not(.hud-mode) .term .platform-guide summary::-webkit-details-marker { display: none; }
body.glass-demo:not(.hud-mode) .term .platform-guide summary::before {
  content: ''; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; transition: transform var(--t-fast, .12s) ease;
}
body.glass-demo:not(.hud-mode) .term .platform-guide[open] summary::before { transform: rotate(90deg); }
/* DELIVERABLES: the widely tracked h3, the flat summary strip, the left-rail project list and the dashed empty box */
body.glass-demo:not(.hud-mode) .term .cfg.dlv > h3 { letter-spacing: 2px; }
body.glass-demo:not(.hud-mode) .term .dlv-head-strip { border: 1px solid rgba(var(--ph-rgb), .18); border-radius: 8px; background: rgba(0, 0, 0, .2); }
body.glass-demo:not(.hud-mode) .term .dlv-proj { border: 1px solid transparent; border-left-width: 1px; border-radius: 6px; padding: 7px 10px; }
body.glass-demo:not(.hud-mode) .term .dlv-proj:hover { border-color: rgba(var(--ph-rgb), .3); background: rgba(var(--ph-rgb), .06); }
body.glass-demo:not(.hud-mode) .term .dlv-proj.on { border-color: rgba(var(--ph-rgb), .45); background: var(--pg-dither, rgba(var(--ph-rgb), .12)); }
body.glass-demo:not(.hud-mode) .term .dlv-proj-c { font-size: 13px; }
body.glass-demo:not(.hud-mode) .term .dlv-empty { border: 1px solid rgba(var(--ph-rgb), .16); border-radius: 8px; background: rgba(0, 0, 0, .18); letter-spacing: 1px; }
body.glass-demo:not(.hud-mode) .term .dlv-empty span { font-size: 14px; }
/* AUTOMATE rail head: "INITIATIVE  SUGGEST  [CHANGE]" read as an old settings stamp */
body.glass-demo:not(.hud-mode) .term .auto-init-head { gap: 8px; }
body.glass-demo:not(.hud-mode) .term .auto-init-head .set-sub-k { font-size: 13px; letter-spacing: 1.6px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) .term .auto-init-head .set-sub-d { font-size: 15px; letter-spacing: .6px; color: var(--ph-bright); }
/* every legacy small key (.bb.sm / .bb.xs) inside a window: the glass key, not the flat dark cap */
body.glass-demo:not(.hud-mode) .term :is(.bb.sm, .bb.xs) {
  border-radius: 6px; border: 1px solid rgba(var(--ph-rgb), .3); background: var(--cg-glass); box-shadow: inset 0 1px 0 var(--gd-light);
  letter-spacing: .8px; text-shadow: none;
}
body.glass-demo:not(.hud-mode) .term :is(.bb.sm, .bb.xs):is(:hover, :focus-visible) { border-color: var(--ph); background: rgba(var(--ph-rgb), .12); color: var(--ph-bright); }
/* NOTIFICATIONS: the timestamp sat glued to the text */
body.glass-demo:not(.hud-mode) .term .nf .ts { margin-right: 10px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) .term .nf { border-radius: 6px; }

/* ============================================================
   WINDOW SIDE MENUS (Andrew 10-02 on ABILITIES: "I think this can honestly be improved"). Every item stays (the
   August 8→3 condense was rejected) — only the presentation changes:
   · the intent groups (INSTALLED / DISCOVER / CREATE) = ONE segmented glass capsule, not three loose rows
   · a hairline, then the sections as compact one-line rows: fixed icon column, ellipsis, tight rhythm
   · selection = the lit row the CREW / SESSIONS rails use, not a separate card with a bar
   Applies to every window rail built by StationUI (ABILITIES, SETTINGS, COMMANDER, CHANNELS, AUTOMATE …).
   ============================================================ */
body.glass-demo:not(.hud-mode) .term.sn-menu .con-intents {
  display: flex; flex-direction: column; gap: 0; margin: 0 0 12px; padding: 3px;
  border: 1px solid rgba(var(--ph-rgb), .24); border-radius: 8px; background: rgba(0, 0, 0, .22);
}
body.glass-demo:not(.hud-mode) .term.sn-menu .con-intent {
  min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  font-size: 14px !important; letter-spacing: 1.2px; color: var(--cg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.glass-demo:not(.hud-mode) .term.sn-menu .con-intent:hover { color: var(--ph-bright); background: rgba(var(--ph-rgb), .07); }
body.glass-demo:not(.hud-mode) .term.sn-menu .con-intent[aria-pressed="true"] {
  color: var(--ph-bright); border-color: rgba(var(--ph-rgb), .45); background: var(--pg-dither, rgba(var(--ph-rgb), .14));
  box-shadow: 0 0 10px rgba(var(--ph-rgb), .14); text-shadow: var(--pg-glow-soft);
}
body.glass-demo:not(.hud-mode) .term.sn-menu .con-intents + .con-rail-list { padding-left: 0; border-top: 1px solid rgba(var(--ph-rgb), .16); padding-top: 10px; }
body.glass-demo:not(.hud-mode) .term.sn-menu .con-rail-item:not(.con-toptab) {
  grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 0 10px;
  min-height: 36px; padding: 7px 10px; margin-bottom: 3px;
  border: 1px solid transparent; border-left-width: 1px; border-radius: 6px; background: transparent; box-shadow: none;
}
body.glass-demo:not(.hud-mode) .term.sn-menu .con-rail-item:not(.con-toptab) .con-rail-label {
  font-size: 14px; letter-spacing: .6px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
}
body.glass-demo:not(.hud-mode) .term.sn-menu .con-rail-item:not(.con-toptab) .con-rail-glyph { width: 18px; text-align: center; opacity: .75; }
body.glass-demo:not(.hud-mode) .term.sn-menu .con-rail-item:not(.con-toptab):hover { border-color: rgba(var(--ph-rgb), .28); background: rgba(var(--ph-rgb), .06); }
body.glass-demo:not(.hud-mode) .term.sn-menu .con-rail-item:not(.con-toptab):is(.active, [aria-selected="true"]) {
  color: var(--ph-bright); border-color: rgba(var(--ph-rgb), .5); background: var(--pg-dither, rgba(var(--ph-rgb), .14));
  box-shadow: 0 0 12px rgba(var(--ph-rgb), .16); text-shadow: var(--pg-glow-soft);
}
body.glass-demo:not(.hud-mode) .term.sn-menu .con-rail-item:not(.con-toptab):is(.active, [aria-selected="true"]) .con-rail-glyph { opacity: 1; }

/* --- weak spots found by the live audit (10-02): tiny type, square boxes, black fields, glyph headers --- */
/* catalog bays (RECRUIT / RECIPES): one glass search field, readable intro, glass filter keys, one-line tile copy */
body.glass-demo:not(.hud-mode) .term .mkt-search {
  min-height: 36px; padding: 0 12px; border: 1px solid rgba(var(--ph-rgb), .24); border-radius: 8px;
  background: rgba(0, 0, 0, .2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}
body.glass-demo:not(.hud-mode) .term .mkt-search:focus-within { border-color: var(--ph); box-shadow: 0 0 0 2px rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) .term .mkt-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
body.glass-demo:not(.hud-mode) .term .mkt-sub { font-size: 14px; letter-spacing: .3px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) .term .mkt-chip.pick {
  min-height: 30px; padding: 4px 11px; font-size: 13px; letter-spacing: 1px; border-radius: 6px;
  border-color: rgba(var(--ph-rgb), .22); background: transparent;
}
body.glass-demo:not(.hud-mode) .term .mkt-chip.pick.sel { color: var(--ph-bright); background: var(--pg-dither, rgba(var(--ph-rgb), .14)); border-color: rgba(var(--ph-rgb), .55); }
body.glass-demo:not(.hud-mode) .term .mkt-tag { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) .term .mkt-sect-h { font-size: 13px; letter-spacing: 2px; }
/* QUESTS: the 9px eyebrow, the over-tracked glowing headline, 12px action keys, cramped kind/state labels */
body.glass-demo:not(.hud-mode) .quests-win .q-ns-eyebrow { font-size: 13px; letter-spacing: 1.6px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) .quests-win .q-return-card h3 { letter-spacing: .5px; text-shadow: none; background: none; border: 0; padding: 0; }
body.glass-demo:not(.hud-mode) .quests-win .q-return-card h3::after { content: none; display: none; }
body.glass-demo:not(.hud-mode) .quests-win .consent-btn { font-size: 14px !important; min-height: 32px; padding: 5px 12px; border-radius: 6px; }
body.glass-demo:not(.hud-mode) .quests-win :is(.q-mission-kind, .q-card-meta .q-kind, .q-card-state, .q-field-label) { font-size: 13px; letter-spacing: 1px; }
body.glass-demo:not(.hud-mode) .quests-win .q-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
body.glass-demo:not(.hud-mode) .quests-win .q-card-meta .q-kind { align-self: center; margin: 0; }
body.glass-demo:not(.hud-mode) .quests-win .q-card-state { margin: 0; padding: 0; }
/* FIELD MANUAL: the route strip between two full-width rules + square notes/entries/pager */
body.glass-demo:not(.hud-mode) .term .fm-route { border: 1px solid rgba(var(--ph-rgb), .22); border-radius: 8px; background: var(--cg-card); padding: 12px 10px; }
body.glass-demo:not(.hud-mode) .term .fm-note { border-top: 0; border: 1px solid rgba(var(--ph-rgb), .16); border-radius: 8px; background: rgba(0, 0, 0, .18); padding: 10px 12px; }
body.glass-demo:not(.hud-mode) .term .fm-entry { border-left-width: 1px; border-radius: 0 6px 6px 0; }
body.glass-demo:not(.hud-mode) .term :is(.fm-pager, .fm-entry) { border-radius: 6px; }
body.glass-demo:not(.hud-mode) .term :is(.fm-eyebrow, .fm-tag) { font-size: 13px; letter-spacing: 1.6px; }
/* AGENT DOSSIER: stat labels, level chip, role line and model tag read at 11-12px */
body.glass-demo:not(.hud-mode) .term :is(.stat-lbl, .ag-lv, .ag-role-line, .ag-setup-lbl) { font-size: 13px; letter-spacing: 1.2px; }
body.glass-demo:not(.hud-mode) .term .tag.model { font-size: 13px; border-radius: 6px; padding: 2px 8px; }
/* window search fields: the ⌕ sat on the placeholder's first letter */
body.glass-demo:not(.hud-mode) .term .con-search .con-search-in { padding-left: 34px !important; border-radius: 8px; background: rgba(0, 0, 0, .2); border-color: rgba(var(--ph-rgb), .24); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15); text-shadow: none; }
body.glass-demo:not(.hud-mode) .term .con-search-i { left: 14px; text-shadow: none; }
/* DELIVERABLES filter: the native select was the old pitch-black field */
body.glass-demo:not(.hud-mode) .term select { background-color: rgba(0, 0, 0, .2); border: 1px solid rgba(var(--ph-rgb), .24); border-radius: 8px; }
/* catalog badges (official / community / site) at 10-11px */
body.glass-demo:not(.hud-mode) .term :is(.cc-badge, .cc-home, .sec-tag, .key-stat) { font-size: 12px; }
body.glass-demo:not(.hud-mode) .term :is(.cc-details, .cc-alternatives, .q-cw, .wfw-sec) { border-radius: 8px; }

/* RAIL ICONS (railicons.js): the drawn 16px line icons sit in the rail's icon column, phosphor via currentColor */
body.glass-demo .con-rail-glyph.has-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 0; line-height: 0; }
body.glass-demo .con-rail-glyph .rail-ico { display: block; width: 16px; height: 16px; }
body.glass-demo .con-rail-item.con-toptab .con-rail-glyph.has-ico { width: 16px; margin-right: 2px; }

/* ============================================================
   INBOX SESSION ROWS (Andrew 10-02: "they just look a bit cheap", then on the first pass: "the name is too
   small, and the box is too big", then "the name should be on top"). Two lines, like a mail inbox: the AGENT'S
   NAME on top in its own colour (as on its CREW card) with the time, the session title under it (two lines at
   most). The latest message is the row's hover tip (app.js
   railRowTip), never a sentence under the name. Rows rest quiet on hairlines; only the selected one is a
   card. The lamp stays the station's square glass lamp with every state glyph; a row that needs
   you says "Approval needed" / "Reply needed" in gold where the time sits.
   The list keeps glass-demo.css's 6px row gap and 6px ends: from 10-03 to 10-21 this comment had lost its opener, so the
   browser threw away the 1px-gap rule that stood here and the rows Andrew has looked at since were spaced by glass-demo.css.
   Its edges are the rail gutter's (ONE RAIL GUTTER, below).
   ============================================================ */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row {
  position: relative; margin: 0 6px; min-height: 0; padding: 7px 10px 8px;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "dot agent pin   meta"
    ".   title title title";
  row-gap: 1px; column-gap: 8px; align-items: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none;
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-receipt { display: none; }
/* a hairline between resting rows; it steps aside around a lit card */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row + .ws-row::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: -1px; height: 1px; background: rgba(var(--ph-rgb), .1);
  pointer-events: none;
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:is(.sel, :hover, :focus-visible)::before,
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:is(.sel, :hover, :focus-visible) + .ws-row::before { opacity: 0; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:is(:hover, :focus-visible) {
  background: rgba(var(--ph-rgb), .05); border-color: transparent; box-shadow: none;
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.sel {
  background: rgba(var(--ph-rgb), .1); border-color: rgba(var(--ph-rgb), .3);
  box-shadow: inset 0 1px 0 var(--gd-light);
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn:not(.sel) {
  background: linear-gradient(165deg, rgba(var(--gold-rgb), .08), transparent 60%); border-color: rgba(var(--gold-rgb), .3);
}

/* a routine's newest run carries its runs key on a line of its own (15px, like the time); its older runs, open under it, are
   one line each: lamp, the run's title, its time (the agent and the routine are the newest row's) */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row[data-runs="head"]:not(.attn) {
  grid-template-areas:
    "dot agent pin   meta"
    ".   title title title"
    ".   runs  runs  runs";
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn[data-runs="head"] {
  grid-template-areas:
    "dot agent pin   menu"
    ".   title title title"
    ".   meta  meta  meta"
    ".   runs  runs  runs";
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row > .ws-runs { grid-area: runs; justify-self: start; margin-top: 3px; font-size: 15px; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row[data-runs="older"] {
  margin-left: 28px; grid-template-areas: "dot title pin meta";
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row[data-runs="older"] > .ws-agent { display: none; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row[data-runs="older"] .ws-title { font-size: 16px !important; -webkit-line-clamp: 1; }

/* the lamp is the station's own SQUARE glass lamp (glass-demo.css: empty when read, lit core when unread, the
   scan / reply strokes / approval mark / failure X inside it). Andrew 10-03: the one thing he did not want
   changed. This block only seats it on the agent's line. */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row > .ws-dot { justify-self: start; align-self: center; margin: 0; }

/* line 2: the session's title, full width, two lines at most */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-title {
  margin: 0; font-size: 17px !important; line-height: 1.2; letter-spacing: .3px;
  color: color-mix(in srgb, var(--text) 86%, var(--panel2));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:is(.sel, .unread, .attn) .ws-title { color: var(--ph-bright); }

/* line 1: AGENT ........ (pin) 2h — the name is the row's headline, in the agent's colour (inline, from app.js) */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-agent {
  min-width: 0; font: 19px/1.15 'VT323', monospace; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ph); opacity: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--pg-glow-soft);
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row > .ws-meta {
  font: 15px/1.2 'VT323', monospace; letter-spacing: .4px; font-variant-numeric: tabular-nums;
  color: var(--cg-mute); opacity: 1;
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.busy > .ws-meta { color: var(--ph-bright); }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-dot.unseen ~ .ws-meta { color: var(--gold); }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn > .ws-meta { padding: 0; border: 0; background: none; color: var(--gold); }
/* the pin: a drawn gold bookmark, not a fallback-font star */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-pin {
  width: 7px; height: 10px; overflow: hidden; color: transparent; font-size: 0; text-shadow: none;
  background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); opacity: .85;
}
/* a GROUP row's headline is its names ("ULTRON, CYPHER +3"): they own line 1, and the pin and time/status end the title
   line (rc walk 10-14: beside "Connecting" the names measured 0px wide, and "NOVA, COPY" was cut even beside "6m") */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:not(.attn):has(> .ws-agent-group) {
  grid-template-areas:
    "dot agent agent agent"
    ".   title pin   meta";
}
/* at headline size two real names can be wider than the rail: they wrap at a space, never end in "…" */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-agent.ws-agent-group { display: block; white-space: normal; text-overflow: clip; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-agent-group > .ws-agent-names { display: inline; white-space: normal; overflow: visible; text-overflow: clip; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-agent-group > .ws-agent-more { margin-left: .4em; }
/* a row that needs you keeps the agent's whole name and puts the call to action on a line of its own */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn {
  grid-template-areas:
    "dot agent pin   menu"
    ".   title title title"
    ".   meta  meta  meta";
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn > .ws-meta { justify-self: start; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn:not(.renaming) > .ws-meta { display: block; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn > .ws-kebab { grid-area: menu; }
/* a GROUP row's names line is several names, not one: it takes the WHOLE first line (walk 10-14 #6 — beside the time
   it got 48-82 of the 123 px "ULTRON, CYPHER" needs, and read "ULTR… +3"). The pin and the time sit at the end of the
   title's first line. Two names too wide for this rail wrap at a space (the headline rule above), so fitRailAgentLine
   (app.js) keeps "ULTRON, CYPHER +3" here and folds to "ULTRON +4" only where a names line never wraps. */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:has(> .ws-agent-group) {
  grid-template-areas:
    "dot agent agent agent"
    ".   title pin   meta";
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row:has(> .ws-agent-group) > :is(.ws-meta, .ws-pin, .ws-kebab) { align-self: start; margin-top: 2px; }
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn:has(> .ws-agent-group) {
  grid-template-areas:
    "dot agent agent agent"
    ".   title pin   menu"
    ".   meta  meta  meta";
}
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams .ws-row.attn:has(> .ws-agent-group) > .ws-meta { align-self: auto; margin-top: 0; }

/* ============================================================
   PIP-BOY TERMINAL RAIL (Andrew 10-17: "more of that Fallout Pip Boy / Terminal ASCII vibe … we are almost there but
   need to seriously touch it up"; of three directions rendered at his settings he picked C · TERMINAL CURSOR). The
   left rail's chrome only: no row, card or line changes size, so every fit model above still holds.
     · the rail's scrollbars are a 1px phosphor line with a block thumb (no OS arrow buttons)
     · the CREW header keys are drawn icons in square keys; the search field is a > prompt (the > only where you type:
       Andrew kept the TRIMMED pass, no cursor on the selection, no blinking caret)
     · SESSIONS / PROJECTS is the Pip-Boy tab strip: one rule across the rail, the open tab boxed above it and open at
       the bottom; + NEW is a key on the rule
     · a selected crew card or session is coloured, nothing drawn around it, gold on a card or row that waits on you
       (Andrew 10-18 retired the four viewfinder corners, then the frame: "simple as just being colored")
     · statuses and steps are tracked caps; a working agent carries a calm Pip-Boy segmented meter (indeterminate: busy,
       never a %), hidden while it waits on your OK
     · every shape is a 2px terminal box; NEEDS YOU sits on a gold rule that runs out to its count
   ============================================================ */
body.glass-demo:not(.hud-mode) {
  --pip-line: rgba(var(--ph-rgb), .55);
}

/* ---- scrollbars: Chromium ignores ::-webkit-scrollbar wherever the standard scrollbar-width / -color are set (motion.css
   sets them on every element), and its standard thin bar paints the OS's arrow buttons. The rail's scrollers opt back
   out; the width stays the NEEDS YOU section's 8px (its fit model reads that rule). ---- */
body.glass-demo:not(.hud-mode) #left :is(#crew, #workstreams, #projects, .ws-needs, #ws-search-results) { scrollbar-width: auto; scrollbar-color: auto; }
body.glass-demo:not(.hud-mode) #left ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
body.glass-demo:not(.hud-mode) #left ::-webkit-scrollbar-track { background: linear-gradient(rgba(var(--ph-rgb), .24), rgba(var(--ph-rgb), .24)) 50% 0 / 1px 100% no-repeat; }
body.glass-demo:not(.hud-mode) #left ::-webkit-scrollbar-thumb { background-color: var(--ph); background-clip: padding-box; border: solid transparent; border-width: 0 2px; border-radius: 0; min-height: 26px; }
body.glass-demo:not(.hud-mode) #left ::-webkit-scrollbar-thumb:hover { background-color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #left ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body.glass-demo:not(.hud-mode) #left ::-webkit-scrollbar-corner { background: transparent; }

/* ---- the CREW header keys: drawn icons (a lens, a fold-to-the-edge) in square keys, not fallback-font glyphs; the buttons
   keep their glyph text and labels ---- */
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-h3-right { gap: 6px; }
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-hide {
  width: 28px; height: 26px; padding: 0; display: inline-grid; place-items: center; font-size: 0;
  color: var(--ph); border: 1px solid rgba(var(--ph-rgb), .32); border-radius: 2px; background: rgba(0, 0, 0, .22); box-shadow: none; text-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-hide:is(:hover, :focus-visible),
body.glass-demo:not(.hud-mode) #screen-game #left > h3 #crew-search-toggle[aria-expanded="true"] { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .1); }

/* ---- THE RAIL'S ICONS: one pixel set (Andrew 10-23: "maybe the little icons could still be slightly cleaner like the +
   the magnifying glass and the other icon on the top right"). The lens and fold were smooth 1.6px strokes, soft at 1x; the
   + was a font glyph of another weight; the agent finder's close key a fallback-font ✕. Now each is a 14px pixel map drawn
   1:1 (crispEdges, 2px strokes) on the key's own colour, and sits dead centre in its key: placed absolutely, because the
   key's hidden glyph text took a grid row under the lens and fold and lifted them 3px ---- */
body.glass-demo:not(.hud-mode) #screen-game #left {
  --pip-ico-lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h6v1h-6zM1 1h8v1h-8zM0 2h3v1h-3zM7 2h3v1h-3zM0 3h2v4h-2zM8 3h2v4h-2zM0 7h3v1h-3zM7 7h3v1h-3zM1 8h9v1h-9zM2 9h6v1h-6zM9 9h2v1h-2zM9 10h3v1h-3zM10 11h3v1h-3zM11 12h3v1h-3zM12 13h2v1h-2z'/%3E%3C/svg%3E");
  --pip-ico-fold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h2v12h-2zM10 2h3v1h-3zM9 3h3v1h-3zM8 4h3v1h-3zM7 5h3v1h-3zM6 6h3v2h-3zM7 8h3v1h-3zM8 9h3v1h-3zM9 10h3v1h-3zM10 11h3v1h-3z'/%3E%3C/svg%3E");
  --pip-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 2h2v4h-2zM2 6h10v2h-10zM6 8h2v4h-2z'/%3E%3C/svg%3E");
  --pip-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h2v1h-2zM10 2h2v1h-2zM3 3h2v1h-2zM9 3h2v1h-2zM4 4h2v1h-2zM8 4h2v1h-2zM5 5h4v1h-4zM6 6h2v2h-2zM5 8h4v1h-4zM4 9h2v1h-2zM8 9h2v1h-2zM3 10h2v1h-2zM9 10h2v1h-2zM2 11h2v1h-2zM10 11h2v1h-2z'/%3E%3C/svg%3E");
}
body.glass-demo:not(.hud-mode) #screen-game #left > h3 #crew-search-toggle { --pip-ico: var(--pip-ico-lens); }
body.glass-demo:not(.hud-mode) #screen-game #left > h3 #crew-hide { --pip-ico: var(--pip-ico-fold); }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject) { --pip-ico: var(--pip-ico-plus); }
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close { --pip-ico: var(--pip-ico-close); font-size: 0; }
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-hide,
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject),
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close { position: relative; }
/* the + key's ::before exists only where the strip draws it as the square key (its content is set there) */
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-hide::before,
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject)::before,
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close::before {
  position: absolute; inset: 0; width: 14px; height: 14px; margin: auto; background: currentColor;
  -webkit-mask: var(--pip-ico) 0 0 / 14px 14px no-repeat; mask: var(--pip-ico) 0 0 / 14px 14px no-repeat;
}
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-hide::before,
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close::before { content: ''; }
/* the agent finder's row is zoomed with the rail (the CREW head and the strip are not), so its icon is sized back to 14
   device px: TEXT SIZE 90 resampled the 14px map to an uneven 9px ✕ */
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close::before {
  --ico-px: calc(14px * var(--sn-unzoom, 1));
  width: var(--ico-px); height: var(--ico-px); -webkit-mask-size: var(--ico-px) var(--ico-px); mask-size: var(--ico-px) var(--ico-px);
}

/* ---- the selection: the row is coloured, nothing is drawn around it (Andrew 10-18: first "maybe we overdid it with the
   corner L i kind of think it looks tacky", then "it should be simple as just being colored rather than having an entire
   border"). --pip-fill turns gold on a card or row that waits on you, so a selected wait keeps its colour, and that card
   keeps its own resting frame; a keyboard focus alone adds a 1px ring ---- */
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row,
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-row,
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-portrait { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row:is(.selected, .filtering),
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.filtering.crew-row,
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-row.sel { box-shadow: none; background: var(--pip-fill); }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row:is(.selected, .filtering):not(.asking),
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-row.sel:not(.attn) { border-color: transparent; }
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-row, #left #workstreams .ws-row):focus-visible { outline: 1px solid var(--pip-mark); outline-offset: -1px; }
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-row, #left #workstreams .ws-row) { --pip-mark: var(--ph-bright); --pip-fill: rgba(var(--ph-rgb), .16); }
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-row.asking, #left #workstreams .ws-row.attn) { --pip-mark: var(--gold); --pip-fill: rgba(var(--gold-rgb), .16); }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row:hover:not(.selected):not(.filtering):not(.asking),
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-row:hover:not(.sel):not(.attn) { border-color: transparent; background: rgba(var(--ph-rgb), .07); box-shadow: none; }

/* ---- crew readouts: status, live step and level in tracked caps ---- */
body.glass-demo:not(.hud-mode) #screen-game #crew :is(.crew-status, .crew-step) { text-transform: uppercase; letter-spacing: 1.6px; }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.working .crew-status { color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-name .crew-room { text-transform: uppercase; letter-spacing: 1px; }
/* a working agent: the Pip-Boy segmented meter under its status, a lit block stepping across it. Indeterminate (the row is
   working; how far along is never claimed), shown only on the row crewTick marks .working, and hidden while that agent
   waits on your OK (it is not busy then). Calm (Andrew kept the trimmed pass): a dim track, the block at 70%, a 4s
   sweep. Under reduced motion the block rests lit at the start. */
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.working .crew-prog {
  display: block; flex: 1 0 100%; height: 5px; margin-top: 7px; overflow: hidden; position: relative;
  background: repeating-linear-gradient(90deg, rgba(var(--ph-rgb), .12) 0 7px, transparent 7px 9px);
}
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.working .crew-prog > div { display: none; }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.working .crew-prog::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45px; transform: none; box-shadow: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ph) 70%, transparent) 0 7px, transparent 7px 9px);
  animation: pip-meter 4s steps(38) infinite;
}
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.asking .crew-prog { display: none; }
@keyframes pip-meter { from { transform: translateX(-45px); } to { transform: translateX(297px); } }

/* ---- SESSIONS / PROJECTS: the Pip-Boy tab strip. One plain rule runs across the rail on its gutter; the open tab is
   boxed above it, open at the bottom; + NEW / + ADD is a key the tabs' own height standing on the rule, its top and bottom
   on theirs (Andrew 10-21 circled the old shorter key floating 6px above the line). The first tab starts and the key ends
   on the cards' edges, the key on the CREW keys' edge too; no end ticks (Andrew 10-23 circled the stub-and-tick at each
   end and the key stopping short of them: "needs to look and appear cleaner") ---- */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head {
  background: none; border: 0; box-shadow: none; padding: 14px var(--rail-gut-u, 10px) 0; gap: 0; align-items: flex-end; flex-wrap: nowrap;
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-view { display: flex; flex: 1 1 auto; gap: 0; align-items: flex-end; min-width: 0; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-view::before { content: none; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-view::after { content: ''; flex: 1 1 auto; align-self: stretch; border-bottom: 1px solid var(--pip-line); }
/* a resting tab draws its stretch of the rule as a 1px background line across its whole border box: a bottom border
   beside transparent side borders splits its corners diagonally, so each stretch began and ended on a half-faded pixel (a
   notch in the line at every tab edge). No bottom border on any tab, 1px of padding in its place, so a tab is the same box
   selected or not */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab {
  --tab-rule: linear-gradient(var(--pip-line), var(--pip-line)) left bottom / 100% 1px no-repeat border-box;
  min-height: 0; height: 32px; padding: 0 14px 1px; border: 1px solid transparent; border-bottom-width: 0; border-radius: 0;
  background: var(--tab-rule); box-shadow: none; text-shadow: none; letter-spacing: 2px;
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab:not(.on):is(:hover, :focus-visible) { opacity: 1; background: var(--tab-rule), rgba(var(--ph-rgb), .05); border-color: transparent; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab.on {
  border-color: var(--ph); color: var(--ph-bright); box-shadow: none;
  background: linear-gradient(rgba(var(--ph-rgb), .13), rgba(var(--ph-rgb), .02)); text-shadow: 0 0 6px rgba(var(--ph-rgb), .45);
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-head-acts {
  display: flex; align-items: flex-end; align-self: stretch; gap: 6px; padding: 0 0 0 10px; border-bottom: 1px solid var(--pip-line); background: none;
}
/* 32px like the tabs; the -1px lays the key's bottom edge ON the rule (the acts' border) instead of a second line above it */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject) {
  min-height: 0; height: 32px; margin-bottom: -1px; padding: 0 10px; border: 1px solid rgba(var(--ph-rgb), .45); border-radius: 2px;
  background: rgba(var(--ph-rgb), .06); box-shadow: none; text-shadow: none; letter-spacing: 1.6px; color: var(--ph);
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject):is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .12); }
/* the strip on a narrow rail (the default 232px, the 200px laptop rail, any dragged width) — keyed to the rail's own width,
   not the window's: tighter tabs and + NEW / + ADD as the square + key, and on the narrowest tighter still */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head { container: pip-tabs / inline-size; }
@container pip-tabs (max-width: 330px) {
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab { padding: 0 7px 1px; letter-spacing: .6px; }
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-head-acts { padding-left: 6px; }
  /* the hidden "+ NEW" label spaces nothing (letter-spacing 0); the drawn + sits in the key's centre (THE RAIL'S ICONS) */
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject):not([hidden]) {
    font-size: 0 !important; letter-spacing: 0; min-width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  }
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject)::before { content: ''; }
}
@container pip-tabs (max-width: 205px) {
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab { padding: 0 5px 1px; letter-spacing: .2px; }
}
/* a laptop window draws + NEW as the + key at every rail width (the 1440px rule above): its hidden label spaces nothing.
   + ADD takes the same key there, so the key keeps its size when the tab changes */
@media (max-width: 1440px) {
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-head #ws-new { letter-spacing: 0; }
  /* at + NEW's own specificity (the 1440px rule above), so on a narrow rail the strip's own square key wins for both */
  body.glass-demo:not(.hud-mode) #left .ws-head #ws-addproject:not([hidden]) {
    font-size: 0 !important; letter-spacing: 0; min-width: 32px; display: inline-flex; align-items: center; justify-content: center;
  }
  body.glass-demo:not(.hud-mode) #left .ws-head #ws-addproject::before { content: ''; }
}
/* the SESSIONS / PROJECTS switch (Andrew 10-23: "i saw a UI glitch in sessions and projects"): at a laptop window the
   hidden + NEW still drew in PROJECTS (the 1440px rule's display: inline-flex outranks [hidden]) as a second + box over the
   PROJECTS tab; the tabs crossfaded for 0.12s, so mid-switch both read as open; + ADD's label was 14px to + NEW's 16px,
   so the key changed size with the tab */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head :is(#ws-new, #ws-addproject)[hidden] { display: none !important; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab { transition: none; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head #ws-addproject { font-size: 16px; }

/* ---- ONE RAIL GUTTER (Andrew 10-21: "my only complaint is that some of it is misaligned like this"). Every block in the
   CREW rail spans one column, its edges 10px in from the rail's at every TEXT SIZE: the crew cards, the SESSIONS / PROJECTS
   rule, NEEDS YOU, the search, the session rows (the cards ended 7px and the rows 10px short of the box above them). A list
   that scrolls keeps its 8px scrollbar lane (the rail's own ::-webkit-scrollbar width) INSIDE that right gutter whether it
   overflows or not, so an edge never moves with its scrollbar. The CREW head and the tab strip are counter-zoomed (app.css:
   one size at every TEXT SIZE), so their 10px is converted back into the rail's zoomed px (--rail-gut-u). The CREW title
   starts on the content line 20px in, where the crew portraits and the NEEDS YOU and session lamps start ---- */
body.glass-demo:not(.hud-mode) #screen-game #left { --rail-gut-u: calc(10px / var(--sn-unzoom, 1)); }
body.glass-demo:not(.hud-mode) #screen-game #crew { scrollbar-gutter: stable; }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row { margin-right: 0; }
body.glass-demo:not(.hud-mode) #screen-game #left :is(#workstreams, #projects) { padding-left: 4px; padding-right: 0; scrollbar-gutter: stable; }
body.glass-demo:not(.hud-mode) #screen-game #left :is(#workstreams, #projects) > .ws-row { margin-right: 2px; }
/* the CREW head (Andrew 10-23: "needs to look and appear cleaner"): its rule plain from edge to edge, no end ticks; the two
   keys square and in the + key's own box. Where the head has room the keys sit centred beside the title and the count line;
   on a narrower rail they keep the title's row and the count line takes the full width under them (beside the keys it ran
   under them) */
body.glass-demo:not(.hud-mode) #screen-game #left > h3 {
  padding-left: calc(20px / var(--sn-unzoom, 1)); padding-right: var(--rail-gut-u);
  background: linear-gradient(var(--pg-line), var(--pg-line)) left var(--rail-gut-u) bottom 0 / calc(100% - 2 * var(--rail-gut-u)) 1px no-repeat;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: center;
  container: crew-head / inline-size;
}
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-h3-right { grid-column: 2; grid-row: 1; margin-left: 0; }
body.glass-demo:not(.hud-mode) #screen-game #left > h3 #crew-sum { grid-column: 1 / -1; grid-row: 2; }
@container crew-head (min-width: 340px) {
  body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-h3-right { grid-row: 1 / span 2; }
  body.glass-demo:not(.hud-mode) #screen-game #left > h3 #crew-sum { grid-column: 1; }
}
body.glass-demo:not(.hud-mode) #screen-game #left > h3 .crew-hide {
  width: 28px; height: 28px; border-color: rgba(var(--ph-rgb), .45); border-radius: 2px; background: rgba(var(--ph-rgb), .06);
}

/* ---- PROJECTS in the session rows' language (Andrew 10-23: "i saw a UI glitch in sessions and projects"). The project
   rows were never brought over: they still wore the oldest base .ws-row box (a black fill with a 2px left bar running down
   the list), a 10px path cut by VT323's flat "…" bar, and a 9px boxed GIT chip. Now they rest quiet on hairlines like the
   session rows, on the rail gutter (6px + the list's 4px), the entered project wears the selection mesh, the path reads
   at the rail's meta size and fades where it runs out, and git is a word, not a chip ---- */
body.glass-demo:not(.hud-mode) #screen-game #left #projects { row-gap: 6px; }   /* the inbox session list's rhythm */
body.glass-demo:not(.hud-mode) #screen-game #left #projects > .ws-row.proj-row {
  --pip-fill: var(--pg-dither), rgba(var(--ph-rgb), .06);
  position: relative; margin: 0 2px 0 6px; padding: 8px 10px 9px;
  border: 1px solid transparent; border-radius: 2px; background: transparent; box-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #left #projects > .ws-row.proj-row + .ws-row.proj-row::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: -1px; height: 1px; background: rgba(var(--ph-rgb), .1); pointer-events: none;
}
body.glass-demo:not(.hud-mode) #screen-game #left #projects > .ws-row.proj-row:is(:hover, :focus-visible) { background: rgba(var(--ph-rgb), .07); }
body.glass-demo:not(.hud-mode) #screen-game #left #projects > .ws-row.proj-row:is(.project-selected, [aria-current="page"]) { background: var(--pip-fill); }
body.glass-demo:not(.hud-mode) #screen-game #left #projects > .ws-row.proj-row:is(.project-selected, [aria-current="page"], :hover, :focus-visible)::before,
body.glass-demo:not(.hud-mode) #screen-game #left #projects > .ws-row.proj-row:is(.project-selected, [aria-current="page"], :hover, :focus-visible) + .ws-row.proj-row::before { opacity: 0; }
body.glass-demo:not(.hud-mode) #screen-game #left #projects .proj-row .ws-title { font-size: 17px; white-space: nowrap; overflow: hidden; }
body.glass-demo:not(.hud-mode) #screen-game #left #projects :is(.proj-path, .proj-sess-n) { font-size: 15px; letter-spacing: .2px; color: var(--cg-mute); opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #left #projects :is(.proj-git-badge, .proj-tag) {
  font-size: 15px; letter-spacing: .4px; line-height: inherit; padding: 0; border: 0; border-radius: 0; background: none;
}
body.glass-demo:not(.hud-mode) #screen-game #left #projects .proj-git-badge { text-transform: lowercase; color: var(--cg-mute); }
@supports (animation-timeline: scroll()) {
  body.glass-demo:not(.hud-mode) #screen-game #left #projects :is(.proj-row .ws-title, .proj-path) { text-overflow: clip; animation: sn-cut-line 1s linear both; animation-timeline: scroll(self inline); }
}
/* the session search's placeholder on a narrow rail: "search sessions + transcripts" ran out as "search sessions + tra"
   and VT323's flat "…" bar (it read as a typo). Where the whole line can't fit (about 236px of field at its 0.3px
   tracking), the empty field shows "search sessions" instead; the input keeps its full placeholder as its accessible name */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-rail-search { container: rail-search / inline-size; }
@container rail-search (max-width: 250px) {
  /* !important: readability.css pins the placeholder's colour with one; the label wears that colour (--text at .85) */
  body.glass-demo:not(.hud-mode) #screen-game #left #ws-search::placeholder { color: transparent !important; }
  body.glass-demo:not(.hud-mode) #screen-game #left .ws-rail-search label:has(> #ws-search:placeholder-shown)::after {
    content: 'search sessions'; position: absolute; left: 31px; top: 0; bottom: 0; display: flex; align-items: center;
    font-size: 16px; letter-spacing: .3px; color: var(--text); opacity: .85; white-space: nowrap; pointer-events: none;
  }
}

/* ---- the search field is a prompt: a typed > in front (no caret: the trimmed pass) ---- */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-rail-search label { position: relative; display: block; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-rail-search label::before {
  content: '>'; position: absolute; left: 11px; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 19px; line-height: 1; color: var(--ph); pointer-events: none; z-index: 1;
}
body.glass-demo:not(.hud-mode) #screen-game #left #ws-search { padding-left: 30px; border-radius: 2px; }
/* the agent finder under the CREW head speaks the same prompt: a typed >, the session search's field, a square close key */
body.glass-demo:not(.hud-mode) #screen-game #left .crew-search-wrap { position: relative; gap: 6px; padding: 8px 10px; border-bottom-color: rgba(var(--ph-rgb), .2); }
body.glass-demo:not(.hud-mode) #screen-game #left .crew-search-wrap::before {
  content: '>'; position: absolute; left: 21px; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 19px; line-height: 1; color: var(--ph); pointer-events: none; z-index: 1;
}
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search {
  min-height: 32px; padding-left: 30px; border-radius: 2px; border: 1px solid rgba(var(--ph-rgb), .34); background: rgba(0, 0, 0, .25); color: var(--ph-bright);
}
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search:focus { border-color: var(--ph); outline: 0; box-shadow: 0 0 0 2px rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close {
  flex: 0 0 auto; width: 32px; padding: 0; border-radius: 2px; border: 1px solid rgba(var(--ph-rgb), .32); background: rgba(0, 0, 0, .22); color: var(--ph);
}
body.glass-demo:not(.hud-mode) #screen-game #left #crew-search-close:is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .1); }

/* ---- NEEDS YOU: the label on a gold rule that runs out to the count (its waits are the alert cards above) ---- */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-needs .ny-head::after { content: ''; order: 2; flex: 1 1 auto; height: 1px; background: rgba(var(--gold-rgb), .4); }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-needs .ny-title { order: 1; }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-needs .ny-count { order: 3; margin-left: 0; color: var(--gold); }
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-runs { text-transform: uppercase; letter-spacing: 1.4px; }

@media (prefers-reduced-motion: reduce) {
  body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.working .crew-prog::after { animation: none; }
}

/* ============================================================
   PIP-BOY DOCK (Andrew 10-17, the bottom menu after the rail: of three docks rendered at his settings, "A without the
   >"). The SESSIONS tab strip, mirrored onto the dock, and the dock's menus in the rail's terminal language. Chrome only:
   the deck's stacking (app.css, locked by dock-focus-seams) and the menus' widths (mobile reachability) are untouched.
     · CREW / WORK / BUILD / SYSTEM hang from one rule (end ticks); the open group's tab is boxed below it, the rule
       bending down around it; a group with a window open keeps its gold underline
     · a menu is one matte 2px terminal box: rows rest on hairlines, the lit row is coloured (the rail's selection; the
       viewfinder corners retired 10-18), an open window's row keeps a gold edge, every icon sits in a square well
     · the alert chip is a square gold block, the widget + a square key, and CTX the crew card's segmented meter
   ============================================================ */
body.glass-demo:not(.hud-mode) #screen-game #bottombar { column-gap: 0; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar > #wr-bot { margin-left: 14px; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar > #term-strip { margin-left: 8px; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar > .bb-group { align-self: flex-start; margin-top: 4px; border-top: 1px solid var(--pip-line); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar > .bb-group[data-group="crew"] { background: linear-gradient(var(--pip-line), var(--pip-line)) left top / 1px 7px no-repeat; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar > .bb-group[data-group="system"] { background: linear-gradient(var(--pip-line), var(--pip-line)) right top / 1px 7px no-repeat; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar > .bb-group.open { border-top-color: transparent; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp {
  height: 34px; padding: 0 16px; border: 1px solid transparent; border-top: 0; border-radius: 0;
  background: none; box-shadow: none; text-shadow: none; letter-spacing: 2px; color: var(--ph);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp:is(:hover, :focus-visible) { color: var(--ph-bright); background: rgba(var(--ph-rgb), .05); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.open > .bb-grp {
  margin-top: -1px; height: 35px; border-color: var(--ph); border-top: 0; color: var(--ph-bright);
  background: linear-gradient(to top, rgba(var(--ph-rgb), .14), rgba(var(--ph-rgb), .02)); box-shadow: none; text-shadow: 0 0 6px rgba(var(--ph-rgb), .45);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.has-active > .bb-grp { box-shadow: inset 0 -2px 0 var(--gold); }
@media (max-width: 720px) {
  body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group > .bb-grp { padding-inline: 9px; letter-spacing: 1px; }
}

/* ---- the menus ---- */
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu {
  border-radius: 2px; border-color: rgba(var(--ph-rgb), .5); padding: 6px; gap: 0;
  background: linear-gradient(var(--panel), var(--panel)), var(--bg); box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb { border-radius: 2px; min-height: 54px; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb + .bb:not(:hover):not(:focus-visible):not(.active) { box-shadow: 0 -1px 0 rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb:is(:hover, :focus-visible, .active) {
  border-color: transparent; color: var(--ph-bright); box-shadow: none; background: rgba(var(--ph-rgb), .16);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb:focus-visible { outline: 1px solid var(--ph-bright); outline-offset: -1px; }
/* a window from this row is open: a gold edge on its left, lit or not */
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb.active { box-shadow: inset 2px 0 0 var(--gold); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb .bb-tx b { letter-spacing: 2px; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb .bb-tx small { font-size: 14px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb:is(:hover, :focus-visible) .bb-tx small { color: var(--text); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb-i {
  width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; opacity: 1; color: var(--ph);
  border: 1px solid rgba(var(--ph-rgb), .24); border-radius: 2px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb:is(:hover, :focus-visible) .bb-i { color: var(--ph-bright); border-color: rgba(var(--ph-rgb), .5); }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-menu .bb > .badge { border-radius: 2px; }

/* ---- the alert chip, the widget +, CTX ---- */
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-grp-badge {
  top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 2px;
  font-size: 15px; line-height: 19px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .7);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .widget-rail .wg-add {
  width: 32px; height: 30px; border-radius: 2px; border: 1px solid rgba(var(--ph-rgb), .32); background: rgba(0, 0, 0, .22); color: var(--ph); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .widget-rail .wg-add:is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .1); }
/* CTX: the crew card's segmented meter, filled by the same real fraction (stationui ctxTick → --ctx-fill), in its level's colour */
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells {
  width: 88px; height: 8px; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, currentColor calc(var(--ctx-fill, 0) * 100%), color-mix(in srgb, currentColor 22%, transparent) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px); mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge :is(.ctx-lbl, .ctx-num, .ctx-cap) { letter-spacing: 1.8px; }

/* ============================================================
   PIP-BOY COMMS CHROME (Andrew 10-17, after the rail and the dock: the trimmed register, option A). The conversation itself
   is untouched — its language was settled with Andrew over six rounds (comms-convo.css) — only the chrome around it:
     · the transcript's scrollbars are the rail's: a 1px phosphor line with a block thumb, no OS arrow buttons
     · its keys and wells are 2px terminal boxes (the id bar's + / web keys, SEND, the tool row, copy, the rate thumbs)
     · MY READ, the transcript's one rounded card, is squared
     · the composer is a squared box and shows its > prompt (the markup always carried it; the glass layer hid it): the >
       lives where you type
   ============================================================ */
body.glass-demo:not(.hud-mode) #chat-panel :is(#chat-log, #gc-log, #chat-input) { scrollbar-width: auto; scrollbar-color: auto; }
body.glass-demo:not(.hud-mode) #chat-panel ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
body.glass-demo:not(.hud-mode) #chat-panel ::-webkit-scrollbar-track { background: linear-gradient(rgba(var(--ph-rgb), .24), rgba(var(--ph-rgb), .24)) 50% 0 / 1px 100% no-repeat; }
body.glass-demo:not(.hud-mode) #chat-panel ::-webkit-scrollbar-thumb { background-color: var(--ph); background-clip: padding-box; border: solid transparent; border-width: 0 2px; border-radius: 0; min-height: 26px; }
body.glass-demo:not(.hud-mode) #chat-panel ::-webkit-scrollbar-thumb:hover { background-color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #chat-panel ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body.glass-demo:not(.hud-mode) #chat-panel ::-webkit-scrollbar-corner { background: transparent; }
body.glass-demo:not(.hud-mode) #chat-panel :is(#comms-browser, #gc-add-agents, #chat-send, #chat-attach, #model-dock-toggle, .voice-toggle, #chat-mic, .cmsg-copy, .comms-portrait, .consent-btn.thumb) { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #chat-panel :is(#comms-browser, #gc-add-agents, #chat-send) { border-color: rgba(var(--ph-rgb), .32); background: rgba(0, 0, 0, .22); box-shadow: none; }
body.glass-demo:not(.hud-mode) #chat-panel :is(#comms-browser, #gc-add-agents, #chat-send):is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) #chat-panel .cmsg.tb-read { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #chat-panel #chat-inputrow { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #chat-panel .chat-editline .prompt {
  display: flex; align-self: flex-start; align-items: center; height: 46px; padding: 0 0 0 12px; margin: 0;
  font-size: 19px; line-height: 1; color: var(--ph); opacity: 1;
}
body.glass-demo:not(.hud-mode) #chat-panel .chat-editline #chat-input { padding-left: 8px; }

/* ============================================================
   PIP-BOY TOP BAR (Andrew 10-17: "go with A"). The bare readouts he picked on 10-02 keep their layout; they take the
   rail's language: XP is the crew card / CTX segmented meter (7px cells, flat, filled by the same topbar.js width), the
   level reads in caps like the crew cards (the text stays "Lv N": only the case is drawn), and the top rail's + is the
   dock's square key (its empty-rail look included). The logo is untouched.
   ============================================================ */
body.glass-demo:not(.hud-mode) #screen-game #topbar #tb-station .tb-xp {
  width: 70px; min-width: 70px; height: 8px; border-radius: 0; box-shadow: none; background: rgba(var(--gold-rgb), .22);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px); mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
}
body.glass-demo:not(.hud-mode) #screen-game #topbar #tb-station .tb-xp::after { display: none; }
body.glass-demo:not(.hud-mode) #screen-game #topbar #tb-station .tb-xp-fill { background: var(--gold); box-shadow: none; }
body.glass-demo:not(.hud-mode) #screen-game #topbar #tb-station .tb-val { text-transform: uppercase; letter-spacing: 1.2px; }
body.glass-demo:not(.hud-mode) #screen-game #topbar .widget-rail .wg-add {
  width: 32px; height: 30px; border-radius: 2px; border: 1px solid rgba(var(--ph-rgb), .32); background: rgba(0, 0, 0, .22); color: var(--ph); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #topbar .widget-rail .wg-add:is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .1); }

/* ============================================================
   DASHBOARD POLISH (Andrew 10-17: "keep the menus as is, and focus mainly on the front facing dashboard … polish it and
   make it perfect in the necessary areas"). A sweep of the dashboard at his settings found these; each is fixed in place:
     · a toast was see-through (the 82% glass face over the rail: the session rows behind read through its text) and led
       with a solid green keycap: now an opaque 2px readout card whose severity is its left edge and its glyph's colour
     · the first-run dock hint wore the old glowing 2px ring: now the matte 2px card, GOT IT a terminal key
     · CINEMA was the station view's last rounded glass pill: now the dock's square key
     · the COMMS agent picker's ⌄ sat alone at the panel's far edge: it follows the name now
     · the composer's effort chip ("· OFF") was a smaller, raised label beside the model name (the shrunken-chip law): it
       takes the name's size and line, quieter by colour
     · CTX lit a 1px sliver at 1%: it lights the cells its own count says (AsciiFX.barCells: whole cells, a half cell for
       the remainder, and a nonzero context never reads empty — the honesty the old glyph bar had)
     · NEEDS YOU's fold key reads in the rail's tracked caps
   ============================================================ */
/* toast */
body.glass-demo:not(.hud-mode) #toast-stack .toast {
  border: 1px solid rgba(var(--ph-rgb), .3); border-left: 2px solid var(--sev); border-radius: 2px;
  background: linear-gradient(var(--panel2), var(--panel2)), var(--bg); box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
body.glass-demo:not(.hud-mode) #toast-stack .toast-lamp { background: none; box-shadow: none; color: var(--sev); font-size: 15px; animation: none; }
/* the first-run dock hint */
body.glass-demo:not(.hud-mode) .nav-coach {
  border: 1px solid rgba(var(--ph-rgb), .6); border-radius: 2px; box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
  background: linear-gradient(var(--panel2), var(--panel2)), var(--bg);
}
body.glass-demo:not(.hud-mode) .nav-coach-x {
  border-radius: 2px; padding: 4px 10px; letter-spacing: 1.4px; color: var(--ph-bright);
  border: 1px solid rgba(var(--ph-rgb), .6); background: rgba(var(--ph-rgb), .1);
}
body.glass-demo:not(.hud-mode) .nav-coach-x:is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .2); }
body.glass-demo:not(.hud-mode) .nav-coach-arrow { text-shadow: none; }
/* CINEMA */
body.glass-demo:not(.hud-mode) #screen-game #stage-wrap .cam-cine {
  border-radius: 2px; border-color: rgba(var(--ph-rgb), .32); background: rgba(0, 0, 0, .45); box-shadow: none; letter-spacing: 1.4px;
}
body.glass-demo:not(.hud-mode) #screen-game #stage-wrap .cam-cine:is(:hover, :focus-visible) { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .12); }
/* the COMMS agent picker: its ⌄ follows the name */
body.glass-demo:not(.hud-mode) #chat-panel .gd-agent-toggle { justify-content: flex-start; gap: 8px; }
/* the composer's effort chip: the model name's size and line, quieter by colour */
body.glass-demo:not(.hud-mode) #chat-panel .model-dock-effort-chip { font-size: var(--sn-type-control) !important; line-height: 1; max-width: 76px; color: var(--cg-mute, var(--ph-dim)); }
body.glass-demo:not(.hud-mode) #chat-panel .model-dock-model-name { line-height: 1; }
/* CTX: the cells its own count lights (data-on = whole cells, a "+" in data-sig = the half cell after them) */
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells {
  --on: 0; --half: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / calc(var(--on) * 9px) 100% no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 55%, transparent), color-mix(in srgb, currentColor 55%, transparent)) calc(var(--on) * 9px) 0 / calc(var(--half) * 7px) 100% no-repeat,
    color-mix(in srgb, currentColor 22%, transparent);
}
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="1"] { --on: 1; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="2"] { --on: 2; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="3"] { --on: 3; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="4"] { --on: 4; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="5"] { --on: 5; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="6"] { --on: 6; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="7"] { --on: 7; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="8"] { --on: 8; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="9"] { --on: 9; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-on="10"] { --on: 10; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge .ctx-cells[data-sig*="+"] { --half: 1; }
/* NEEDS YOU's fold key */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-needs .ny-more { text-transform: uppercase; letter-spacing: 1.6px; }

/* ============================================================
   PIP-BOY COMMS CARDS (Andrew 10-18: "audit and polish the COMMS cards (approval, question, working, delegated) in the same
   way"). Driven for real on a test station at his settings (approval, choice question, LET'S SHAPE THIS, the working line,
   a delegated batch with a worker waiting on him, the group strip), the cards still wore the older language while
   everything around them had moved to this pass's terminal register:
     · five corner radii in one transcript (decision cards 5px, DELEGATED 10px, its keys 8px, the answer box 7px, the
       working line 4px): every card is the 2px box
     · a card that waits on you said so with a 2px gold left edge, which draws at ONE device pixel at TEXT SIZE 90 (Chrome
       floors border widths) and read as the same line as its other edges: it is framed in gold all round now, the NEEDS
       YOU card's own frame, and goes back to the quiet line once answered (data-live-ask leaves with the answer)
     · three looks for the same APPROVE ONCE · DENY (NEEDS YOU's terminal keys, the approval card's glossy sentence-case
       keys, the delegated row's 8px gradient keys): every command is the NEEDS YOU key — 2px, matte, caps, the lit one
       gold, a deny in the fault colour. A question's ANSWERS keep their words as written, squared and matte
     · the working line was the smallest, dimmest text in COMMS (a 12px dim tool name and time) behind a blinking block
       caret: it reads at 15px in a 2px box, the CREW rail's calm segmented meter in place of the blink, one steady gold
       lamp while the run waits on you (the rail hides its meter then too)
     · DELEGATED's lamps were glossy and breathed: flat squares, steady (the row's clock ticks)
     · LET'S SHAPE THIS said NOVA ASKS in red where the choice card says it in gold
   ============================================================ */
/* 1. every card is the 2px box (were 5px / 10px / 7px / 4px in one transcript) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, #chat-log > .dg-line, #gc-questions .gc-question, #gc-states .gc-state) { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .task-conversation :is(.tc-answer, .tc-sample, .tc-understanding) { border-radius: 2px; }

/* 2. a card that waits on you is framed in gold all round, the NEEDS YOU card's own frame (a 2px gold left edge drew at one
   device pixel at TEXT SIZE 90, indistinguishable from the other edges); answered, it goes back to the quiet line */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .cmsg.consent { border: 1px solid rgba(var(--ph-rgb), .22); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .cmsg.consent[data-live-ask] {
  border-color: rgba(var(--gold-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(var(--gold-rgb), .012) 55%), rgba(0, 0, 0, .28);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .cmsg.consent[data-clarify-prompt] .cq-who,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .task-conversation .tc-caption { color: var(--gold); letter-spacing: 1.6px; text-transform: uppercase; }

/* 3. ONE key: the NEEDS YOU terminal key — 2px, matte, caps for a command; the lit one gold, a deny in the fault colour */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log .dg-line .dg-key,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state :is(.gc-ok, .gc-copy),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice {
  min-height: 34px; padding: 5px 12px; border-radius: 2px; box-shadow: none; text-shadow: none;
  font-family: 'VT323', monospace; line-height: 1.15; letter-spacing: .9px; text-transform: uppercase;
  color: var(--ph-bright); border: 1px solid rgba(var(--ph-rgb), .4); background: rgba(0, 0, 0, .25);
}
/* (a plain key reads in the bright phosphor: in a red theme the phosphor itself is the fault colour's twin, and ALWAYS
   read as a second DENY) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-copy { margin-left: 0 !important; font-size: var(--sn-type-control, 16px) !important; min-height: 34px !important; padding: 5px 12px !important; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb):hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log .dg-line .dg-key:hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state :is(.gc-ok, .gc-copy):hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice:hover:not(:disabled) {
  color: var(--ph-bright); border-color: rgba(var(--ph-rgb), .75); background: rgba(var(--ph-rgb), .1);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb):is(.primary, .ws-openit, .ws-primary, .consent-confirm),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log .dg-line .dg-key.primary,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-ok.lit,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice.lit {
  color: var(--gold); border-color: rgba(var(--gold-rgb), .75); background: rgba(var(--gold-rgb), .1);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb):is(.primary, .ws-openit, .ws-primary, .consent-confirm):hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log .dg-line .dg-key.primary:hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-ok.lit:hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice.lit:hover:not(:disabled) {
  color: var(--gold); border-color: var(--gold); background: rgba(var(--gold-rgb), .2);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb).deny,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log .dg-line .dg-key.deny,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-ok.deny {
  color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 6%, transparent);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb).deny:hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log .dg-line .dg-key.deny:hover:not(:disabled),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-ok.deny:hover:not(:disabled) {
  color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent) .consent-btn:not(.thumb).danger { color: var(--warn); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent, .dg-inspect) .consent-btn:not(.thumb).quiet { color: var(--text); background: transparent; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(.cmsg.turnin, .cmsg.nudge, .cmsg.consent) .consent-btn:not(.thumb).sel { color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .2); opacity: 1; }
/* a question's ANSWERS keep their words as written (they are what you will be saying, not a command): squared and matte,
   full width, the suggested one lit gold */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .cmsg.consent[data-clarify-prompt] .consent-btn,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .task-conversation .consent-btn.tc-shortcut,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice {
  text-transform: none; letter-spacing: .3px; text-align: left; padding: 6px 12px; color: var(--ph-bright);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .cmsg.consent[data-clarify-prompt] .consent-btn.primary,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice.lit { color: var(--gold); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .cmsg.consent[data-clarify-prompt] .consent-btn.quiet { color: var(--text); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .task-conversation .tc-actions .consent-btn { min-height: 34px; padding: 5px 12px; }
/* a picked answer (pick-several, LET'S SHAPE THIS's starting point in your answer, a group pick) stays visibly pressed */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .task-conversation .consent-btn.tc-shortcut[aria-pressed=true],
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-questions .gc-question .gc-q-choice:is([aria-pressed=true], .chosen) {
  color: var(--ph-bright); border-color: var(--ph); background: rgba(var(--ph-rgb), .2); opacity: 1;
}

/* 4. the WORKING line: the transcript's size (a 12px dim tool name and time), a 2px box, and the CREW rail's calm segmented
   meter where the blinking block caret was; it rests lit gold while the run waits on you */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence:not(.resolved),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state:not(.hold) {
  align-items: center; gap: 10px; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(var(--ph-rgb), .22); border-radius: 2px;
  background: rgba(0, 0, 0, .28); box-shadow: none; font-size: var(--sn-type-meta); letter-spacing: .4px;
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence.paused:not(.resolved),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state.hold {
  border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 2px; box-shadow: none;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(var(--gold-rgb), .012) 55%), rgba(0, 0, 0, .28);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence:not(.resolved) :is(.cp-verb, .cp-tool, .cp-time) { font-size: var(--sn-type-meta); text-shadow: none; }   /* the floor (16), was 15 */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence:not(.resolved) .cp-verb { letter-spacing: 1.8px; color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence:not(.resolved) :is(.cp-tool, .cp-time) { color: var(--text); opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence.paused:not(.resolved) :is(.cp-verb, .cp-tool) { color: var(--gold); }
/* the meter: six cells, a two-cell block stepping across (indeterminate: it says working, never how far along) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence:not(.resolved) .cp-dot,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-dot {
  position: relative; flex: 0 0 52px; width: 52px; height: 6px; overflow: hidden; align-self: center;
  font-size: 0; color: transparent; text-shadow: none; animation: none; opacity: 1;
  background: repeating-linear-gradient(90deg, rgba(var(--ph-rgb), .16) 0 7px, transparent 7px 9px);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence:not(.resolved) .cp-dot::after,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-dot::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 16px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ph) 80%, transparent) 0 7px, transparent 7px 9px);
  animation: pip-meter-cp 2.4s steps(8) infinite;
}
@keyframes pip-meter-cp { from { transform: translateX(-16px); } to { transform: translateX(56px); } }
/* waiting on you (or failed) there is no work to show: the meter gives way to ONE steady lamp in the state's colour, as the
   CREW rail hides its meter while an agent waits on your OK */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence.paused:not(.resolved) .cp-dot,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state:is(.hold, .bad) .gc-dot {
  flex-basis: 7px; width: 7px; height: 7px; background: var(--gold);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state.bad .gc-dot { background: var(--bad); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #comms-presence.paused:not(.resolved) .cp-dot::after,
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state:is(.hold, .bad) .gc-dot::after { content: none; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-verb { font-size: var(--sn-type-meta); letter-spacing: 1.8px; text-shadow: none; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state .gc-what { font-size: var(--sn-type-meta); text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#comms-presence .cp-dot, #gc-states .gc-dot)::after { animation: none !important; transform: none; }
}

/* 5. DELEGATED: the family's frame (gold all round while a worker waits on you), flat steady lamps (were glossy and
   breathing: the row's clock already ticks) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line {
  border: 1px solid rgba(var(--ph-rgb), .22); box-shadow: none; background: rgba(0, 0, 0, .28);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line:has(.dg-line-sum.waiting) {
  border-color: rgba(var(--gold-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .06), rgba(var(--gold-rgb), .012) 55%), rgba(0, 0, 0, .28);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line .dg-line-list { border-top-color: rgba(var(--ph-rgb), .2); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line .dg-lamp { border-radius: 0; box-shadow: none; animation: none; opacity: 1; }
/* working: lit but calm (the phosphor at 70%: in a red theme a full-strength phosphor lamp reads as the fault lamp) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line .dg-lamp.working { background: color-mix(in srgb, var(--ph) 70%, transparent); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line .dg-line-text { text-transform: none; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line .dg-li-who { letter-spacing: 1.2px; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #chat-log > .dg-line .dg-inspect summary { color: var(--ph); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel #gc-states .gc-state.bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent); }

/* ============================================================
   PIP-BOY COMMS STEPS + RUN COMPLETE (Andrew 10-18: "polish the COMMS step rows and the RUN COMPLETE line the same way").
   Driven on a real run at his settings (a step waiting on his approval, the finished footer, the footer opened):
     · a step row was the smallest text in COMMS (12.5px; its time 11px, its chevron 10px) with its args and time in the
       darkest phosphor: steps read at 15px in a 2px box, the tool's name as the terminal's opcode (tracked caps)
     · a running step blinked its ▸ and ended in the same ▸ meaning "open me": the state glyph is steady (the working
       line's meter says the run is live) and "open me" is DELEGATED's drawn caret
     · RUN COMPLETE was 14px at half opacity, the dimmest line in COMMS: still the reply's quiet footer (Andrew 10-03), now
       legible — 15px in the muted text colour, the drawn caret for its fold, bright while open
     · the fold's run record was 11px dim phosphor: it reads at 14px (its lead line now names who ran it and tells the
       footer's time — chat.js telemetryRun / hydrateRunTelemetry)
   ============================================================ */
/* the step rail: the indented phosphor line the run's steps hang from */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-rail { gap: 4px; border-left-color: rgba(var(--ph-rgb), .28); }
/* a step: the 2px box, matte, no entrance glow */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip {
  border: 1px solid rgba(var(--ph-rgb), .2); border-radius: 2px; background: rgba(0, 0, 0, .25); box-shadow: none;
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip:hover { border-color: rgba(var(--ph-rgb), .45); background: rgba(var(--ph-rgb), .06); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-head {
  align-items: center; gap: 8px; min-height: 30px; padding: 4px 10px; font-size: var(--sn-type-meta); line-height: 1.2; letter-spacing: .3px; color: var(--text);
}
/* the tool's name reads as the terminal's opcode: tracked caps in the bright phosphor */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-name { color: var(--ph-bright); letter-spacing: 1.4px; text-transform: uppercase; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-args { color: var(--text); opacity: .8; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-stat { font-size: 15px; color: var(--cg-mute, var(--text)); opacity: 1; }
/* the state glyph: steady (a running step no longer blinks — the working line's meter already says the run is live) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-glyph { flex: 0 0 auto; width: 1.1em; text-align: center; text-shadow: none; animation: none; opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip.pending .tc-glyph { color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip.ok .tc-glyph { color: var(--ok); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip.err :is(.tc-glyph, .tc-stat) { color: var(--bad); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip.held :is(.tc-glyph, .tc-stat) { color: var(--ph-dim); }
/* "open me" is a drawn caret (DELEGATED's), never the same ▸ the running state shows at the row's start */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-exp {
  flex: 0 0 auto; width: 7px; height: 7px; margin: 0 3px 2px 2px; font-size: 0; opacity: 1;
  border-right: 2px solid rgba(var(--ph-rgb), .7); border-bottom: 2px solid rgba(var(--ph-rgb), .7); transform: rotate(-45deg);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip.open .tc-exp { transform: translateY(-2px) rotate(45deg); border-color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-detail {
  padding: 2px 10px 8px; margin-top: 0; border-top: 1px solid rgba(var(--ph-rgb), .16); font-size: 14px; line-height: 1.45; color: var(--text);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-d-args { color: var(--cg-mute, var(--text)); padding-top: 6px; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-d-res { color: var(--text); padding-top: 4px; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-d-res.err { color: var(--bad); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .tool-chip .tc-d-res.held { color: var(--ph-dim); }

/* RUN COMPLETE: still the reply's quiet footer (Andrew 10-03), legible: 15px in the muted text colour at full strength
   (it was 14px at half opacity), its fold key the same drawn caret */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved {
  font-size: var(--sn-type-meta); letter-spacing: 1px; line-height: 1.35; color: var(--cg-mute, var(--text)); opacity: .9; padding: 2px 0;
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved.has-fold:is(:hover, :focus-visible),
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved.open { color: var(--ph-bright); opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved.err { color: var(--bad); opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved.stopped { color: var(--gold); opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved .cp-chev {
  display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 10px; font-size: 0; opacity: 1; vertical-align: middle;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast, .12s) ease;
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .comms-presence.resolved.open .cp-chev { transform: translateY(-2px) rotate(45deg); }
/* the fold's run record: the steps' size, one line per run, its head in the bright phosphor */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .run-telemetry {
  margin: 6px 0 8px; padding: 6px 10px; border-left: 1px solid rgba(var(--ph-rgb), .28);
  font-size: 14px; line-height: 1.4; letter-spacing: .5px; color: var(--cg-mute, var(--text));
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .run-telemetry .rt-run-head { color: var(--ph-bright); letter-spacing: .6px; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .run-telemetry .rt-tool { margin: 3px 0 0 12px; opacity: 1; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .run-telemetry .rt-tool.err { color: var(--bad); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .run-telemetry .rt-tool.held { color: var(--ph-dim); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .run-telemetry .rt-run + .rt-run { border-top-color: rgba(var(--ph-rgb), .14); }

/* ============================================================
   PIP-BOY COMMS DELIVERED (10-19, Andrew: "lets finish and polish everything"). What a run hands over, in the steps'
   register: COPY PATH / FOLDER is a terminal key (it was an 11px chip, the shrunken-chip law); the file's name keeps its
   gold with a quiet underline set off the letters. The recap foot no longer repeats the time and model the RUN COMPLETE footer
   above it already tells (chat.js recapCard: one run, one duration).
   ============================================================ */
/* (the saved line and the recap keep the transcript's 18px reading floor, readability.css) the recap's foot, now only its
   cost, reads at the steps' size in the muted text */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) > .cmsg.recap .recap-foot { font-size: 14px; color: var(--cg-mute, var(--text)); opacity: 1; }
/* the file's name: gold, a quiet 1px underline set off the letters */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .deliverable-link { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* COPY PATH / FOLDER: a terminal key (it was an 11px chip) */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .deliverable-folder {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; min-height: 26px; margin-left: 10px; padding: 2px 9px;
  font-size: 14px; line-height: 1; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ph-bright); opacity: 1;
  border: 1px solid rgba(var(--ph-rgb), .4); border-radius: 2px; background: rgba(0, 0, 0, .25);
}
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .deliverable-folder:is(:hover, :focus-visible) { color: var(--ph-bright); border-color: rgba(var(--ph-rgb), .75); background: rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel .deliverable-folder .fb-label { margin-left: 0; }

/* ============================================================
   RAIL LEFTOVERS (10-19 sweep: every box in the rail rounder than the 2px terminal box, in every rail state — filtered by an
   agent, crew search open, PROJECTS): two were left, both now the rail's keys
   ============================================================ */
/* the DOSSIER key on a crew card and the bar that names whose sessions show: the rail's 2px terminal keys (they were 6px / 8px) */
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-dossier {
  border-radius: 2px; border-color: rgba(var(--ph-rgb), .4); background: rgba(0, 0, 0, .55); color: var(--ph-bright); letter-spacing: 1.2px; text-transform: uppercase;
}
body.glass-demo:not(.hud-mode) #screen-game #left .ws-agent-filter { border-radius: 2px; border-color: rgba(var(--ph-rgb), .4); background: rgba(var(--ph-rgb), .1); }
body.glass-demo:not(.hud-mode) #screen-game #left .ws-agent-filter:hover { border-color: rgba(var(--ph-rgb), .75); background: rgba(var(--ph-rgb), .16); }
/* ============================================================
   DASHBOARD LEFTOVERS (10-19 sweep of COMMS, the dock and the top bar for boxes rounder than the 2px terminal box, the
   panels' curved shells excepted): the inline RATE thumbs (4px), the CTX gauge's housing (6px) and the widget strips'
   drag outline (4px, shown only while a widget is dragged)
   ============================================================ */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) > .cmsg.work-rate.rate-inline .consent-btn.thumb { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .ctx-gauge { border-radius: 2px; }
body.glass-demo:not(.hud-mode) #screen-game .widget-rail { border-radius: 2px; }

/* ============================================================
   PIP-BOY MESH (Andrew 10-19: "fix the glow … a different type", then "can we try the mesh look that we had at one point
   … it made it look way better", "it was just the mesh with no glow", and of the 10-01 mesh re-rendered beside a finer one,
   "lets try finer"). The dashboard's lit material is the 10-01 PIP-GLASS ▒ mesh again — a checker of phosphor cells at its
   10-01 strength (.30, gold .32), no gradient — and NOTHING glows: no glow or colour fringe on the type (it was one red 6px
   haze on every heading and name, a blue name included, deaf to the GLOW slider), no halo on a waiting card, a selection,
   a lamp or the dock's open tab. The mesh alone says lit: a waiting CREW card, the selected crew card and session row,
   the open SESSIONS tab, the dock's open group, each NEEDS YOU kind's strip. The cells are two SCREEN pixels at every
   TEXT SIZE and display scale (the 10-01 shots were taken at 150%, three pixels a cell: "finer" is two), so the checker
   stays crisp and never beats against the zoom. The windows keep their own material (Andrew 10-18: "keep UI menus as is").
   ============================================================ */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) {
  --mesh-cell: calc(2px * var(--sn-unzoom, 1));
  --pg-dither: repeating-conic-gradient(rgba(var(--ph-rgb), .3) 0 25%, transparent 0 50%) 0 0 / var(--mesh-cell) var(--mesh-cell);
  --pg-dither-gold: repeating-conic-gradient(rgba(var(--gold-rgb), .32) 0 25%, transparent 0 50%) 0 0 / var(--mesh-cell) var(--mesh-cell);
  --pg-glow: none;
  --pg-glow-soft: none;
}
@media (min-resolution: 1.5dppx) { body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) { --mesh-cell: calc(1.3333px * var(--sn-unzoom, 1)); } }
@media (min-resolution: 2dppx) { body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel, #topbar, #bottombar) { --mesh-cell: calc(1px * var(--sn-unzoom, 1)); } }
/* the head of the SESSIONS view is counter-zoomed (it keeps its size at every TEXT SIZE): its cells are plain pixels. The
   mesh is re-declared there, since a custom property resolves its var() where it is declared (the rail's zoomed cell
   would ride in) */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head {
  --mesh-cell: 2px;
  --pg-dither: repeating-conic-gradient(rgba(var(--ph-rgb), .3) 0 25%, transparent 0 50%) 0 0 / var(--mesh-cell) var(--mesh-cell);
}
@media (min-resolution: 1.5dppx) { body.glass-demo:not(.hud-mode) #screen-game #left .ws-head { --mesh-cell: 1.3333px; } }
@media (min-resolution: 2dppx) { body.glass-demo:not(.hud-mode) #screen-game #left .ws-head { --mesh-cell: 1px; } }
/* the selection (fill only, Andrew 10-18) is the mesh; a wait's selection keeps its gold */
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-row, #left #workstreams .ws-row) { --pip-fill: var(--pg-dither), rgba(var(--ph-rgb), .06); }
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-row:not(.attn) { --pip-fill: var(--pg-dither), rgba(var(--ph-rgb), .05); }
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-row.asking, #left #workstreams .ws-row.attn) { --pip-fill: var(--pg-dither-gold), rgba(var(--gold-rgb), .06); }
/* a card that waits on you: the gold mesh in its frame, no halo */
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-row.asking { background: var(--pg-dither-gold), rgba(var(--gold-rgb), .06); box-shadow: none; }
/* the open tab */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-head .ws-tab.on { background: var(--pg-dither), rgba(var(--ph-rgb), .08); }
/* NEEDS YOU: each kind's strip is a mesh band in its colour */
body.glass-demo:not(.hud-mode) #screen-game #left .ws-needs .ny-grp {
  background: repeating-conic-gradient(rgba(var(--ny-k), .24) 0 25%, transparent 0 50%) 0 0 / var(--mesh-cell) var(--mesh-cell), rgba(var(--ny-k), .06);
}
/* no halo anywhere on the dashboard: a lit or selected row, the dock's open group (its open-window underline stays), the
   first-run starter cards, the UPLINK lamp (a housed lamp, like the crew's) */
body.glass-demo:not(.hud-mode) #screen-game :is(#crew .crew-row, #left #workstreams .ws-row, #bottombar .bb-group > .bb-grp, #chat-panel .cmsg-empty .cmsg-starter) { box-shadow: none; }
body.glass-demo:not(.hud-mode) #screen-game #bottombar .bb-group.has-active > .bb-grp { box-shadow: inset 0 -2px 0 var(--ph); }
body.glass-demo:not(.hud-mode) #screen-game #topbar #status-pill::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
body.glass-demo:not(.hud-mode) #screen-game #topbar #status-pill:is(.standby, .down)::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }

/* ============================================================
   PIP-BOY TYPE SCALE (Andrew 10-19: "make sure the text isnt too small everywhere, and also that the spacing of text is
   perfectly structured and organized everywhere"). Measured on the dashboard at his settings (TEXT SIZE 90), its text ran
   from 11 to 21 screen px in eleven sizes, one agent name was two sizes (16.2 on its CREW card, 17.1 on its session row),
   and its caps labels were tracked eleven ways (0.2 to 3px). One scale now. The rail and COMMS grow with TEXT SIZE:
     · NAME  19px, tracked 1.2: every agent name (a CREW card, a NEEDS YOU row, a session row)
     · BODY  18px: COMMS speech and its composer, the NEEDS YOU head
     · LINE  17px: a row's second line (a session's title, a NEEDS YOU ask)
     · LABEL 16px, caps tracked 1.6: THE FLOOR (status, level, ages, counts, a kind's strip, keys, timestamps, run tallies)
   The counter-zoomed bars (the top bar, the dock, the panels' heads) keep their pixel sizes and meet the same floor at 15px,
   the LABEL's screen size. NEEDS YOU's own rules carry the scale in place (test/needs-you-rail-fit.test.js lays them out).
   ============================================================ */
/* THE FLOOR, through the station's own reading tokens (readability.css sets every named label to var(--sn-type-meta) with
   !important): on the dashboard the meta and compact roles are the LABEL size, 16px in the rail and COMMS, 15px in the
   counter-zoomed bars (the top bar, the dock, the panels' heads), the LABEL's screen size. The windows keep the station's
   14px floor (their own pass) */
body.glass-demo:not(.hud-mode) #screen-game :is(#left, #chat-panel) { --sn-type-meta: 16px; --sn-type-compact: 16px; }
body.glass-demo:not(.hud-mode) #screen-game :is(#topbar, #bottombar, #left > h3, #chat-panel > h3) { --sn-type-meta: 15px; --sn-type-compact: 15px; }
/* NAME: a CREW card's name is the session row's size (readability gives it the 18px section role) */
body.glass-demo:not(.hud-mode) #screen-game #crew { --sn-type-section: 19px; }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-name .crew-nm { letter-spacing: 1.2px; }
/* LABEL: a crew card's live step (no reading role of its own), its status and level tracked like every caps label */
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-step { font-size: 16px; }
body.glass-demo:not(.hud-mode) #screen-game #crew :is(.crew-status, .crew-step) { letter-spacing: 1.6px; }
body.glass-demo:not(.hud-mode) #screen-game #crew .crew-name .crew-room { letter-spacing: 1.6px; }
/* LABEL: a session row's run tally */
body.glass-demo:not(.hud-mode) #screen-game #left #workstreams .ws-row > .ws-runs { font-size: 16px; letter-spacing: 1.6px; }
/* LABEL: COMMS — who spoke and the day break, tracked like every caps label */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .cmsg .who { letter-spacing: 1.6px; }
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .cmsg-timebreak .tb-when { font-size: 16px; letter-spacing: 1.6px; }
/* the dock's CTX gauge (no reading role) at the bars' floor; the top bar's labels tracked like every caps label */
body.glass-demo:not(.hud-mode) #screen-game #bottombar #ctx-gauge :is(.ctx-lbl, .ctx-num, .ctx-cap) { font-size: 15px; letter-spacing: 1.6px; }
body.glass-demo:not(.hud-mode) #screen-game #topbar :is(#tb-station .tb-lbl, #sig) { letter-spacing: 1.6px; }
/* KEYS: every terminal key is tracked .9 (the COMMS keys' own), the choice keys included */
body.glass-demo:not(.hud-mode) #screen-game #chat-panel :is(#chat-log, #gc-log) .choice { letter-spacing: .9px; }
/* A ROW'S TWO LINES sit 2px apart everywhere (a CREW card's status, a NEEDS YOU ask, a session's title), and a session's
   title too long for its two lines fades out at its end rather than in VT323's flat "…" (read as a typo); an older run's
   one-line title the same */
body.glass-demo.rows-inbox:not(.hud-mode) #screen-game #left #workstreams .ws-title {
  margin-top: 2px; display: block; -webkit-line-clamp: none; max-height: 2.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-size: 100% calc(100% - 1.2em), 100% 1.2em; -webkit-mask-position: top, bottom; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-size: 100% calc(100% - 1.2em), 100% 1.2em; mask-position: top, bottom; mask-repeat: no-repeat;
}
body.glass-demo.rows-inbox:not(.hud-mode) #screen-game #left #workstreams .ws-row[data-runs="older"] .ws-title {
  max-height: none; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-size: auto;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-size: auto;
}

/* ============================================================
   WINDOW TYPE FLOOR (Andrew 10-19, after the dashboard's: "Yes, give the windows the same text floor and spacing too").
   Measured across every station window and each of its rail sections at his settings (41 views), 3,179 pieces of text
   sat under the floor, down to 9 screen px, in 223 styles. The windows take the dashboard's scale: the station's reading
   tokens raised on the windows' container (readability.css keeps its own bounded defaults), then every hard-set size under
   the floor lifted to it below.
   ============================================================ */
body.glass-demo:not(.hud-mode) #terms { --sn-type-meta: 16px; --sn-type-compact: 16px; }
/* every piece of window text the floor measured under it (typefloor.js marks it; nothing at or over the floor is marked,
   so nothing is made smaller, and an icon glyph keeps its own size) */
body.glass-demo:not(.hud-mode) #terms [data-sn-floor] { font-size: var(--sn-type-meta) !important; }
/* the dashboard's spacing in every window: a caps label at the floor's size tracked 1.6, a caps key .9 (typefloor.js marks
   them; a bigger caps title keeps its own wide tracking) */
body.glass-demo:not(.hud-mode) #terms [data-sn-caps="label"] { letter-spacing: 1.6px !important; }
body.glass-demo:not(.hud-mode) #terms [data-sn-caps="key"] { letter-spacing: .9px !important; }

/* ============================================================
   WINDOW RHYTHM (Andrew 10-19: "measure and even out the windows' line and section gaps"). Measured in all 41 window
   views: sections already sat 16px apart and a console section's heading 7px over its text; the rest drifted. An item's
   title sat 3, 4, 5 or 6px over its own subtitle depending on the component, a heading 0 (two lines touching in
   COMMANDER › SOURCES) to 20px over its text, and wrapped text ran at eight line heights from 1.22 to 1.6. One rhythm
   (screen px at his TEXT SIZE 90; the rules below are in CSS px):
     · an item's title to its subtitle, and a kicker to its title, 4px
     · a heading to its first text 7px (the console sections' own)
     · a paragraph to the next 22px, a sub-section's heading 18px under what precedes it
     · wrapped prose at 1.5 (the most common), a caption under an item at 1.35
   ============================================================ */
/* LINES */
body.glass-demo:not(.hud-mode) #terms :is(p, li, .mc-hint, .mc-note, .set-about, .con-sec-desc, .fm-note, .fm-lead, .fm-entry-b, .sk-note, .cf-grp-note,
  .cd-body, .cd-privacy, .nf-txt, .prov-ep, .sn-menu-nav-note, .dlv-lead, .wfw-lead, .ext-empty, .ch-sum-help, .q-mission-title,
  .settings-toggle-copy) { line-height: 1.5; }
body.glass-demo:not(.hud-mode) #terms :is(div.sub, div.dim, small, .fb-empty, .gx-tro .nm) { line-height: 1.35; }
/* AN ITEM'S TITLE TO ITS SUBTITLE, AND A KICKER TO ITS TITLE: 4px */
body.glass-demo:not(.hud-mode) #terms :is(.ab-route-main, .ab-router .ab-router-q, .pp-card) { gap: 4px; }
body.glass-demo:not(.hud-mode) #terms :is(.set-sub, .ch-sum-copy) { row-gap: 4px; }
body.glass-demo:not(.hud-mode) #terms .gx-tro .sub { margin-top: 4px; }
body.glass-demo:not(.hud-mode) #terms .sn-menu-nav-note { margin-top: 4px; }
body.glass-demo:not(.hud-mode) #terms .nf-meta { margin-bottom: 4px; }
body.glass-demo:not(.hud-mode) #terms .fm-eyebrow { margin-bottom: 4px; }
body.glass-demo:not(.hud-mode) #terms .fm-eyebrow + :is(h2, h3) { margin-top: 0; }
body.glass-demo:not(.hud-mode) #terms :is(.ag-role-line, .key-meta) { margin-top: 4px; }
body.glass-demo:not(.hud-mode) #terms .up-mini > div > b + span { margin-top: 4px; }
/* the quest card's kicker row: its 32px dismiss key hangs into the card's padding instead of setting the row's height */
body.glass-demo:not(.hud-mode) #terms .q-card-meta { margin-bottom: 0; }
body.glass-demo:not(.hud-mode) #terms .q-card-meta .q-dismiss { margin-block: -7px; }
/* A HEADING TO ITS FIRST TEXT: 7px */
body.glass-demo:not(.hud-mode) #terms .con-sec-head + .con-sec-body { margin-top: -4px; }   /* a section with no description starts its body where the description would */
body.glass-demo:not(.hud-mode) #terms :is(.sec, .gx-sec):not(.con-sec-head) { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms :is(.sec, .gx-sec):not(.con-sec-head) + * { margin-top: 0; }
body.glass-demo:not(.hud-mode) #terms :is(.sec, .gx-sec):not(.con-sec-head) + .con-lane > :first-child { margin-top: 0; }
body.glass-demo:not(.hud-mode) #terms .cc-group > .sec { margin-bottom: 0; }   /* the group's own 8px flex gap is the gap */
body.glass-demo:not(.hud-mode) #terms :is(.ms-h, .cd-sech, .ch-section-title) { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms :is(.ms-h, .ch-section-title) + * { margin-top: 0; }
body.glass-demo:not(.hud-mode) #terms .cf-group-summary { margin-top: 2px; }
body.glass-demo:not(.hud-mode) #terms .wh-content > h4 { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms .wh-source-settings > .wh { margin-top: 8px; }
body.glass-demo:not(.hud-mode) #terms .utility-head > h2 { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms .fm-cover > h2 { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms .fm-chapter { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms .q-return-card > p { margin-top: 8px; }
body.glass-demo:not(.hud-mode) #terms .fm-entry > .fm-entry-h { margin-bottom: 8px; }
body.glass-demo:not(.hud-mode) #terms .q-card .q-hd h3.nm { margin-bottom: 0; }
body.glass-demo:not(.hud-mode) #terms .q-card > .sub { margin-top: 4px; }
/* A BREAK BEFORE A SUB-SECTION: 18px (the agent RECORD's own, between its RUNS, RUN ISSUES and INSIGHTS blocks) */
body.glass-demo:not(.hud-mode) #terms .sec:not(.con-sec-head):not(:first-child) { margin-top: 20px; }
body.glass-demo:not(.hud-mode) #terms .cf-nav { margin-bottom: 20px; }
body.glass-demo:not(.hud-mode) #terms .set-reset-browser { margin-top: 20px; }
body.glass-demo:not(.hud-mode) #terms .wh-content > * + h4 { margin-top: 20px; }
body.glass-demo:not(.hud-mode) #terms #sk-lib .sk-lib-sum { margin-bottom: 20px; }
body.glass-demo:not(.hud-mode) #terms .cc-list { margin-top: 16px; row-gap: 16px; }   /* + its category heading's own 4px */
/* A TEXT TO ITS KEY ROW: 16px (settings' own action rows) */
body.glass-demo:not(.hud-mode) #terms .ag-can-do { margin-bottom: 18px; }
/* A PARAGRAPH TO THE NEXT: one blank line, 22px (a section description's gap in most windows; agents, commander and
   settings had drifted to 16 and 18; a new routine's form keeps its own tighter start) */
body.glass-demo:not(.hud-mode) #terms .con-sec:not([data-section="routines-create"]) > .con-sec-desc { margin-bottom: 24px; }
body.glass-demo:not(.hud-mode) #terms .wh-content > p + p { margin-top: 24px; }
/* SPENDING LIMITS › an interrupted run's line was one 169px line cut at an ellipsis (435px of text: "INTERRUPTED — Write
   the la…", a VT323 ellipsis a flat bar), so which run it was could not be read: the whole line, wrapped, over its
   charge field and SETTLE key */
body.glass-demo:not(.hud-mode) #terms #budget-unsettled .bg-un-what { flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ============================================================
   CUT TEXT FADES (Andrew 10-19: "swap the cut-off card descriptions to fades"). VT323 draws "…" as one flat bar, and 63
   card descriptions in CONNECT › CATALOG and SKILL MARKET ended on it. typefloor.js marks the window text its own box cuts
   (`data-sn-cut`: a one-line ellipsis, or a line clamp with its line count in --sn-clamp) and the ellipsis becomes a
   fade — a line's last 28px, a clamp's last line top to bottom. The fade is a scroll-driven animation on the box's own
   overflow, so it runs only while there is text to cut: a description that fits never fades. An engine without
   scroll-driven animations (an older macOS or Linux webview) keeps the ellipsis rather than fading text that fits.
   ============================================================ */
@supports (animation-timeline: scroll()) {
  @keyframes sn-cut-line { from, to { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
  @keyframes sn-cut-clamp { from, to { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1lh), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 1lh), transparent); } }
  body.glass-demo:not(.hud-mode) #terms [data-sn-cut="line"] { text-overflow: clip !important; animation: sn-cut-line 1s linear both; animation-timeline: scroll(self inline); }
  body.glass-demo:not(.hud-mode) #terms [data-sn-cut="clamp"] { display: block !important; -webkit-line-clamp: none !important; max-height: calc(var(--sn-clamp, 2) * 1lh);
    overflow: hidden !important; animation: sn-cut-clamp 1s linear both; animation-timeline: scroll(self block); }
}

/* ============================================================
   NARROW WINDOWS AND LARGE TEXT (Andrew 10-20: "check other text sizes and narrow windows"). Every window audited at
   TEXT SIZE 90, 100, 115, 130 and 145 and at its minimum width (the resize grip's 320px; 560 with a section rail). The
   windows' own narrow layouts keyed on the SCREEN's width (@media), so a narrow window on a wide screen never stacked —
   nor did any window at a large text size, where the crew rail and COMMS take more of the screen: MY WORK's files and
   the quest briefing squeezed to one letter per line, the dossier's name ran down the pane, the trophy case ran a 4th
   column out of the window even at 90, and the station record, a dossier's achievements and setup tiles kept fixed
   column counts. Each window's content pane is a container now, and these layouts follow ITS width.
   ============================================================ */
body.glass-demo:not(.hud-mode) #terms :is(.con-pane, .term-body:not(.term-console-body)) { container-type: inline-size; }
/* a fixed column count → as many columns as fit (each minimum keeps the column count his TEXT SIZE 90 had; only the
   trophy case changes there, 4 columns that ran out of the window → 3) */
body.glass-demo:not(.hud-mode) #terms .gx-tros { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
body.glass-demo:not(.hud-mode) #terms .agent-dossier .gx-tros { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }
body.glass-demo:not(.hud-mode) #terms .cd-record-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
body.glass-demo:not(.hud-mode) #terms .ag-setup { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
body.glass-demo:not(.hud-mode) #terms .gx-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
body.glass-demo:not(.hud-mode) #terms .stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 56px), 1fr)); }
body.glass-demo:not(.hud-mode) #terms .ns-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(210px, calc(50% - 12px))), 1fr)); }
/* a tab strip, a key row, a URL: wrap rather than run out of the window (each only moves when it would not fit) */
body.glass-demo:not(.hud-mode) #terms .fam-tabs { flex-wrap: wrap; }
body.glass-demo:not(.hud-mode) #terms .dlv-bucket h4 { flex-wrap: wrap; }
body.glass-demo:not(.hud-mode) #terms .q-actions { flex-wrap: wrap; }
body.glass-demo:not(.hud-mode) #terms .q-actions .q-go { white-space: normal; min-width: 0; }
body.glass-demo:not(.hud-mode) #terms :is(.ch-card, .cc-card) :is(b, code, .dim) { overflow-wrap: anywhere; }
/* a desk's job line keeps its own line height when a short window squeezes the desk (it was cut through its letters) */
body.glass-demo:not(.hud-mode) #terms .ds-job { flex-shrink: 0; }
/* a rail item keeps its whole height and the rail scrolls (a 36px minimum let an item shrink, and its two-line note
   spilled onto the next item) */
body.glass-demo:not(.hud-mode) #terms .con-rail-item { flex-shrink: 0; }
/* the permission cards: never wider than their window */
body.glass-demo:not(.hud-mode) #terms .pp-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* a growth bar's zone legend: at the floor its four words are wider than their zones, so they ran together past the card
   ("BUILDSTEADYRELIABLETRUST") — they read in order now, wrapping under the bar */
body.glass-demo:not(.hud-mode) #terms .gx-zlabels { display: flex; flex-wrap: wrap; gap: 2px 12px; text-align: left; }
/* layouts that stack by the window's own width */
@container (max-width: 500px) {   /* side by side needs ~500: a 220px list, the gap, a readable briefing */
  body.glass-demo:not(.hud-mode) #terms .quests-win .q-journal { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 480px) {
  body.glass-demo:not(.hud-mode) #terms .dlv-split { grid-template-columns: minmax(0, 1fr); }
}
/* a console pane under 340px: his TEXT SIZE 90 panes measure ~360, 115 ~230, 145 ~135 with his rail and COMMS widths, and
   a window at its 560px minimum ~320 — so these rows reflow only where they would cut or collide, never in his view */
@container (max-width: 340px) {
  body.glass-demo:not(.hud-mode) #terms :is(.ag-hero, .ag-growth-hero) { flex-wrap: wrap; }
  body.glass-demo:not(.hud-mode) #terms :is(.ag-info, .ag-growth-heading) { flex: 1 1 100%; }
  /* a messaging row: its name and help keep 160px or the state drops to its own line (at 115 they had 36px and ran one
     word per line under "○ not connected") */
  body.glass-demo:not(.hud-mode) #terms .ch-sum-row { flex-wrap: wrap; }
  body.glass-demo:not(.hud-mode) #terms .ch-sum-copy { flex: 1 1 160px; grid-template-columns: minmax(0, 1fr); }
  body.glass-demo:not(.hud-mode) #terms .ch-sum-row .ch-state { margin-left: 0; max-width: none; text-align: left; }
  body.glass-demo:not(.hud-mode) #terms .ch-sum-row .ch-sum-arrow { margin-left: auto; }
  /* a card's head, a skill's switch, the updater, a growth band, an "environment default" badge: wrap, never cut */
  body.glass-demo:not(.hud-mode) #terms :is(.cc-head, .cc-identity, .cc-acts, .up-mini, :has(> .gx-band)) { flex-wrap: wrap; }
  body.glass-demo:not(.hud-mode) #terms .sk-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  body.glass-demo:not(.hud-mode) #terms .cc-chip { white-space: normal; }
  body.glass-demo:not(.hud-mode) #terms .src-badge { display: inline-block; max-width: 100%; white-space: normal; }
}

/* ============================================================
   THE SAME FLOOR BEYOND THE WINDOWS (Andrew 10-20: "run the same audits over COMMS and the dashboard rails at every text
   size, BUILD MODE, onboarding, toasts and tooltips, and the other colour themes, then fix what they find"). Measured at
   his settings: BUILD MODE drew 92 texts at 11-12.5px (material names, the tier, key hints — his glass standard for the
   Build Library is 15-17px), the first-run screens 12-13px help and labels, the dock coach a 12px key, and COMMS's
   working card, tool rows and group status words 15px. typefloor.js now watches BUILD MODE (and the workflow panel), the
   first-run screens and the coach too; COMMS keeps its own tuned scale with its 15px roles named here.
   ============================================================ */
body.glass-demo:not(.hud-mode) :is(.refit-overlay, .wf-panel, #screen-splash, #screen-connect, #nav-coach) { --sn-type-meta: 16px; --sn-type-compact: 16px; }
body.glass-demo:not(.hud-mode) :is(.refit-overlay, .wf-panel, #screen-splash, #screen-connect, #nav-coach) [data-sn-floor] { font-size: var(--sn-type-meta) !important; }
body.glass-demo:not(.hud-mode) :is(.refit-overlay, .wf-panel, #screen-splash, #screen-connect, #nav-coach) [data-sn-caps="label"] { letter-spacing: 1.6px !important; }
body.glass-demo:not(.hud-mode) :is(.refit-overlay, .wf-panel, #screen-splash, #screen-connect, #nav-coach) [data-sn-caps="key"] { letter-spacing: .9px !important; }
/* BUILD MODE › Edit: the shortcut rows' key column fits its longest key at the floor ("Drag a selected one"; the 108px
   column was sized for 12px key caps, so at 16px they ran into their descriptions) */
body.glass-demo:not(.hud-mode) .refit-overlay .refit-keyrow { grid-template-columns: 156px minmax(0, 1fr); }
/* COMMS: the first-run interview's stage line (COMMS's status strip, step rows, run footer and a group's status words
   take the floor in their own rules above — they were 15px) */
body.glass-demo:not(.hud-mode) #chat-panel .fnv-stage { font-size: var(--sn-type-meta); }
@supports (animation-timeline: scroll()) {
  body.glass-demo:not(.hud-mode) :is(.refit-overlay, .wf-panel, #screen-splash, #screen-connect, #nav-coach) [data-sn-cut="line"] { text-overflow: clip !important; animation: sn-cut-line 1s linear both; animation-timeline: scroll(self inline); }
  body.glass-demo:not(.hud-mode) :is(.refit-overlay, .wf-panel, #screen-splash, #screen-connect, #nav-coach) [data-sn-cut="clamp"] { display: block !important; -webkit-line-clamp: none !important;
    max-height: calc(var(--sn-clamp, 2) * 1lh); overflow: hidden !important; animation: sn-cut-clamp 1s linear both; animation-timeline: scroll(self block); }
  /* the dashboard's own one-line cuts — a crew row's step at a large text size, COMMS's model line — fade too */
  body.glass-demo:not(.hud-mode) :is(#left .crew-step, #chat-panel .comms-agent-model) { text-overflow: clip; animation: sn-cut-line 1s linear both; animation-timeline: scroll(self inline); }
}

/* ============================================================
   ONE WINDOW GUTTER (Andrew 10-21: "my only complaint is that some of it is misaligned like this", the rail's floating
   + key circled). Measured in every window at his settings: the title sat 10px in from the window's edge and the close
   key 7px, the family tab strip 12px, a side menu's search 10px, its sections 8px, CONNECT's sections and capsule 0px (on
   the window's frame), and the content under the strip 16-22px: each edge a few px off the one above it. Now one 10px
   gutter for the title, the head keys, the tab strip, the side menu's search, capsule and sections, and the content of
   the single-column windows that wear the strip. The window's scrollers run on the CREW rail's 8px bar (a hairline track,
   a square thumb, no arrow buttons) instead of the OS's thin bar, a fixed width on every platform, so a side menu and a
   stripped window keep that lane reserved inside the right gutter and their edges hold whether they scroll or not.
   ============================================================ */
body.glass-demo:not(.hud-mode) #terms .term-head { padding-right: 10px; }
body.glass-demo:not(.hud-mode) #terms .fam-tabs { margin-left: 10px; margin-right: 10px; }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list) { scrollbar-width: auto; scrollbar-color: auto; }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list)::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list)::-webkit-scrollbar-track { background: linear-gradient(rgba(var(--ph-rgb), .24), rgba(var(--ph-rgb), .24)) 50% 0 / 1px 100% no-repeat; }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list)::-webkit-scrollbar-thumb { background-color: var(--ph); background-clip: padding-box; border: solid transparent; border-width: 0 2px; border-radius: 0; min-height: 26px; }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list)::-webkit-scrollbar-thumb:hover { background-color: var(--ph-bright); }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body.glass-demo:not(.hud-mode) #terms .term :is(.term-body, .con-pane, .con-rail-list, .ag-list)::-webkit-scrollbar-corner { background: transparent; }
/* a side menu: its search, capsule and sections on the gutter; the list's lane inside the right one (2px + the 8px bar) */
body.glass-demo:not(.hud-mode) #terms .term.sn-menu .con-search { padding-left: 10px; padding-right: 10px; }
body.glass-demo:not(.hud-mode) #terms .term.sn-menu .con-intents { margin-left: 10px; margin-right: 10px; }
body.glass-demo:not(.hud-mode) #terms .term.sn-menu .con-rail-list { padding-left: 10px; padding-right: 2px; scrollbar-gutter: stable; }
body.glass-demo:not(.hud-mode) #terms .term.sn-menu .con-rail-top { padding-left: 10px; padding-right: 10px; }
body.glass-demo:not(.hud-mode) #terms .term.dossier .con-rail-top { padding-right: 0; }
body.glass-demo:not(.hud-mode) #terms .term.dossier .ag-list { padding-right: 2px; scrollbar-gutter: stable; }
/* the single-column windows that wear the strip (MY WORK › TASKS and DELIVERABLES, AUTOMATE › WORKFLOWS): their content
   on the strip's edges */
body.glass-demo:not(.hud-mode) #terms .term:is(.tasks-win, .dlv-win, .wfw-win) .term-body { padding-left: 10px; padding-right: 2px; scrollbar-gutter: stable; }
body.glass-demo:not(.hud-mode) #terms .term.wfw-win .wfw { padding-left: 0; padding-right: 0; }
/* the 24px the content gained would tip "Or pick one" from two tiles a row to three at his window size: the tile's
   minimum grows by a third of it, so a row takes a third tile at the window width it did before */
body.glass-demo:not(.hud-mode) #terms .term.wfw-win .wfw-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* controls side by side share one height: SCHEDULES' RUN BY takes Name's 46px, DELIVERABLES' MORE its search's and
   status's 37px (and, closed, sits on the row's right edge instead of the left of an empty stretch), the dossier's tabs
   its search's 46px */
body.glass-demo:not(.hud-mode) #terms .term.sn-menu .rt-identity select.key-input { padding-top: 10px; padding-bottom: 10px; line-height: 1.5; }
body.glass-demo:not(.hud-mode) #terms .term.dlv-win .cfg.dlv .dlv-tools > summary { padding-top: 7px; padding-bottom: 7px; line-height: 1.3; }
body.glass-demo:not(.hud-mode) #terms .term.dlv-win .cfg.dlv .dlv-tools:not([open]) { flex: 0 0 auto; gap: 0; }   /* closed, the hidden keys' box still took the flex gap */
body.glass-demo:not(.hud-mode) #terms .term.dossier .con-toptab { padding-top: 10px; padding-bottom: 10px; }
body.glass-demo:not(.hud-mode) #terms .term.dossier .con-toptab .con-rail-label { line-height: 24px; }