/* 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: '+'; font-size: 20px; line-height: 1; }
}

/* ============================================================
   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; }

/* ============================================================
   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); }

/* routine groups in the SESSIONS rail (the fold that stays for scheduled runs): the session-row glass, not the old
   hairline box with a 10px caption */
body.glass-demo:not(.hud-mode) #left .ws-auto-group { margin: 6px 6px 2px; }
body.glass-demo:not(.hud-mode) #left .ws-auto-group button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center;
  padding: 7px 10px; border: 1px solid rgba(var(--ph-rgb), .2); border-radius: 6px; background: var(--cg-card); color: var(--ph); cursor: pointer;
}
body.glass-demo:not(.hud-mode) #left .ws-auto-group button::before {
  content: ''; grid-row: 1 / 3; 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) #left .ws-auto-group button[aria-expanded="true"]::before { transform: rotate(90deg); }
body.glass-demo:not(.hud-mode) #left .ws-auto-group button span { font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; }
body.glass-demo:not(.hud-mode) #left .ws-auto-group button small { grid-column: 2; font-size: 13px; color: var(--cg-mute); }
body.glass-demo:not(.hud-mode) #left .ws-auto-group button:is(:hover, :focus-visible) { border-color: rgba(var(--ph-rgb), .45); background: rgba(var(--ph-rgb), .08); }

/* --- 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.
   ============================================================ */
body.glass-demo.rows-inbox:not(.hud-mode) #left #workstreams { gap: 1px; padding: 4px 4px 8px; }
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);
}

/* 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 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; }