/* Local, opt-in glass study. Shared materials stay on body for live theme changes. */
body.glass-demo {
  --gd-edge: rgba(var(--ph-rgb), .24);
  --gd-light: rgba(var(--ph-bright-rgb), .13);
  --gd-face: linear-gradient(165deg, rgba(var(--ph-rgb), .075), transparent 46%), color-mix(in srgb, var(--panel) 92%, transparent);
  --gd-hover: linear-gradient(120deg, rgba(var(--ph-rgb), .14), rgba(var(--ph-rgb), .035) 70%);
  --gd-shadow: inset 0 1px 0 var(--gd-light), 0 6px 24px rgba(0,0,0,.3);
}
.glass-demo :is(#left,#chat-panel,#topbar,#bottombar) {
  background: var(--gd-face); border: 1px solid var(--gd-edge); border-radius: 5px;
  box-shadow: var(--gd-shadow);
}
.glass-demo :is(#left,#chat-panel,#topbar,#bottombar)::before { opacity: .55; }
.glass-demo :is(#left h3,#chat-panel h3,.ws-head,.term-head) {
  background: linear-gradient(180deg, rgba(var(--ph-rgb),.14), rgba(var(--ph-rgb),.025));
  border-bottom: 1px solid var(--gd-edge); box-shadow: inset 0 1px 0 var(--gd-light);
  color: var(--ph-bright);
}
body.glass-demo #crew .crew-row,
body.glass-demo #left #workstreams .ws-row {
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; box-shadow: none; transform: none;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
body.glass-demo #crew .crew-row { margin: 3px 4px; padding: 11px 8px; }
body.glass-demo #left #workstreams .ws-row { margin: 3px 4px; padding: 11px 8px; min-height: 48px; }
body.glass-demo #crew .crew-row:is(:hover,:focus-visible,.selected),
body.glass-demo #left #workstreams .ws-row:is(:hover,:focus-visible,:focus-within,.sel) {
  background: var(--gd-hover); border-color: var(--gd-edge);
  box-shadow: inset 0 1px 0 var(--gd-light), 0 2px 8px rgba(0,0,0,.2); transform: none;
}
body.glass-demo #crew .crew-row:focus-visible,
body.glass-demo #left #workstreams .ws-row:focus-visible { outline: 1px solid var(--ph); outline-offset: -2px; }
.glass-demo :is(.crew-portrait,.comms-portrait) {
  border: 1px solid var(--gd-edge); background: rgba(0,0,0,.25); box-shadow: inset 0 1px 6px rgba(0,0,0,.5);
}
.glass-demo #chat-log { background: rgba(0,0,0,.1); box-shadow: none; }
.glass-demo #chat-panel #chat-inputrow { background: var(--gd-face); border-color: var(--gd-edge); box-shadow: var(--gd-shadow); }
.glass-demo #chat-panel .chat-editline { background: rgba(0,0,0,.3); border-color: var(--gd-edge); }
.glass-demo .term-scrim { background: rgba(0,0,0,.12); backdrop-filter: none; }
body.glass-demo .term:not(.pw) {
  background: var(--gd-face); border: 1px solid var(--gd-edge);
  box-shadow: inset 0 1px 0 var(--gd-light), 0 14px 44px rgba(0,0,0,.55);
  border-radius: 6px; backdrop-filter: blur(7px);
}
.glass-demo .term::before { opacity: .45; }
.glass-demo .term:not(.pw) .term-title { background: none; color: var(--ph-bright); box-shadow: none; padding: 3px 0; }
.glass-demo .term :is(.term-brk,.term-led,.term-grade) { display: none; }
.glass-demo .term :is(.con-rail,.con-content,.con-pane,.term-body,.term-foot) { background-color: transparent; }
.glass-demo .term .con-rail { border-right: 1px solid var(--gd-edge); background: rgba(0,0,0,.12); }
.glass-demo .term .con-item { border-radius: 4px; }
.glass-demo .term .con-item:is(:hover,.on) { background: var(--gd-hover); box-shadow: inset 0 1px 0 var(--gd-light); }
.glass-demo .term-foot { border-top-color: var(--gd-edge); opacity: .6; }
.glass-demo .term.gd-sheet { min-height: 0; min-width: 0; }
.glass-demo .gd-sheet .term-head { padding-top: 14px; min-height: 43px; }
.glass-demo .gd-sheet .term-title { flex: 1; }
.glass-demo .gd-controls { display: flex; gap: 5px; margin-left: auto; }
.glass-demo .gd-controls button {
  font: inherit; font-size: 12px; letter-spacing: .5px; padding: 3px 8px; cursor: pointer;
  color: var(--ph); background: rgba(0,0,0,.22); border: 1px solid var(--gd-edge); border-radius: 3px;
}
.glass-demo .gd-controls button:is(:hover,:focus-visible) { color: var(--ph-bright); background: var(--gd-hover); border-color: var(--ph); }
.glass-demo .gd-pull {
  position: absolute; top: 0; left: 30%; width: 40%; height: 12px; z-index: 12;
  border: 0; background: none; cursor: ns-resize; touch-action: none;
}
.glass-demo .gd-pull::after { content: ''; position: absolute; left: calc(50% - 23px); top: 4px; width: 46px; height: 3px; border-radius: 3px; background: var(--ph-dim); }
.glass-demo .gd-pull:is(:hover,:focus-visible)::after { background: var(--ph); box-shadow: 0 0 8px var(--ph-glow2); }
.glass-demo .gd-sheet .term-body { min-height: 0; flex: 1; }
.glass-demo .gd-sheet.gd-docked > .term-resize { display: none; }
.glass-demo .gd-badge { position: fixed; bottom: 3px; right: 12px; z-index: 970; pointer-events: none; font: 10px 'VT323',monospace; letter-spacing: 1px; color: var(--ph-dim); }
@media (prefers-reduced-motion: reduce) { body.glass-demo #crew .crew-row, body.glass-demo #left #workstreams .ws-row { transition: none; } }

/* Quiet inner chrome so the pane reads as one sheet of glass. */
body.glass-demo .term:not(.pw) .term-title { border: 0; background: none; box-shadow: none; }
body.glass-demo .term :is(.prov-card,.ab-router,.cf-group,.mc-row,.cc-card) {
  border-color: var(--gd-edge); background: var(--gd-hover); box-shadow: inset 0 1px 0 var(--gd-light);
}
/* Session tools: one recessed search well and a quiet segmented glass switch. */
body.glass-demo #left .ws-rail-search { padding: 10px 8px 6px; }
body.glass-demo #left #ws-search {
  height: 34px; padding: 8px 10px; border: 1px solid var(--gd-edge); border-radius: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), transparent), rgba(var(--ph-rgb),.025);
  color: var(--ph-bright); box-shadow: inset 0 1px 5px rgba(0,0,0,.24); text-shadow: none;
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
body.glass-demo #left #ws-search::placeholder { color: var(--ph-dim); opacity: .85; letter-spacing: .3px; }
body.glass-demo #left #ws-search:is(:hover,:focus) { border-color: rgba(var(--ph-rgb),.45); }
body.glass-demo #left #ws-search:focus { outline: 1px solid var(--ph-dim); outline-offset: 2px; box-shadow: inset 0 1px 0 var(--gd-light); }
body.glass-demo #left .ws-kind-filter {
  gap: 3px; padding: 3px; margin: 8px 0 3px; border: 1px solid var(--gd-edge);
  border-radius: 7px; background: rgba(0,0,0,.18); box-shadow: inset 0 1px 4px rgba(0,0,0,.18);
}
body.glass-demo #left .ws-kind-filter button {
  height: 27px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
  color: var(--ph-dim); background: transparent; box-shadow: none; text-shadow: none;
  letter-spacing: .7px; transform: none;
}
body.glass-demo #left .ws-kind-filter button:is(:hover,[aria-pressed="true"]) {
  color: var(--ph-bright); border-color: var(--gd-edge); background: var(--gd-hover);
  box-shadow: inset 0 1px 0 var(--gd-light);
}
body.glass-demo #left #ws-new {
  height: 27px; padding: 3px 10px; border: 1px solid var(--gd-edge); border-radius: 5px;
  color: var(--ph); background: var(--gd-hover); box-shadow: inset 0 1px 0 var(--gd-light);
  font-size: 12px; line-height: 1; letter-spacing: .8px; text-shadow: none;
}
body.glass-demo #left #ws-new:hover { color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.5); background: rgba(var(--ph-rgb),.17); }
body.glass-demo #left :is(#ws-new,.ws-kind-filter button):focus-visible {
  outline: 1px solid var(--ph); outline-offset: 2px;
}
/* Four equal glass tabs: softer silhouettes, a single edge, no stacked keycap bevel. */
body.glass-demo #screen-game #bottombar { gap: 6px; padding-inline: 10px; }
body.glass-demo #screen-game #bottombar .bb-group > .bb-grp {
  height: 32px; min-width: 96px; padding: 0 13px; gap: 7px;
  border: 1px solid var(--gd-edge); border-radius: 7px;
  background: linear-gradient(180deg, rgba(var(--ph-rgb),.075), rgba(var(--ph-rgb),.02));
  color: var(--ph); box-shadow: inset 0 1px 0 var(--gd-light);
  text-shadow: none; font-size: 15px; letter-spacing: 1.1px; transform: none;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
body.glass-demo #screen-game #bottombar .bb-group > .bb-grp:is(:hover,:focus-visible),
body.glass-demo #screen-game #bottombar .bb-group.open > .bb-grp {
  color: var(--ph-bright); border-color: rgba(var(--ph-rgb),.45);
  background: var(--gd-hover); box-shadow: inset 0 1px 0 var(--gd-light); transform: none;
}
body.glass-demo #screen-game #bottombar .bb-group.has-active > .bb-grp {
  box-shadow: inset 0 1px 0 var(--gd-light), inset 0 -2px 0 rgba(var(--gold-rgb),.65);
}
body.glass-demo #screen-game #bottombar .bb-grp:focus-visible { outline: 1px solid var(--ph); outline-offset: 2px; }
body.glass-demo #screen-game #bottombar .bb-gi { width: 16px; opacity: .8; font-size: 14px; }
@media (max-width: 720px) {
  body.glass-demo #screen-game #bottombar { gap: 4px; padding-inline: 6px; }
  body.glass-demo #screen-game #bottombar .bb-group > .bb-grp { min-width: 0; padding-inline: 9px; gap: 5px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.glass-demo #left #ws-search,
  body.glass-demo #screen-game #bottombar .bb-group > .bb-grp { transition: none; }
}

/* Stronger terminal lettering and flatter instrument keys. */
body.glass-demo #left #ws-new {
  font: 18px/1 'VT323', monospace; height: 30px; letter-spacing: 1px;
  color: var(--ph-bright); border-radius: 3px;
  text-shadow: .35px 0 currentColor, 0 0 6px var(--ph-glow2);
}
body.glass-demo #left .ws-tab {
  font: 16px/1 'VT323', monospace; letter-spacing: .7px; padding: 7px 3px;
  color: var(--ph); background: none; border-radius: 0; box-shadow: none;
}
body.glass-demo #left .ws-tab.on {
  color: var(--ph-bright); text-shadow: .25px 0 currentColor;
  box-shadow: inset 0 -1px 0 var(--ph); background: linear-gradient(0deg, rgba(var(--ph-rgb),.08), transparent);
}
body.glass-demo #screen-game #bottombar .bb-group > .bb-grp {
  min-width: 100px; height: 32px; padding: 0 12px; border-radius: 2px;
  font: 18px/1 'VT323', monospace; letter-spacing: 1.2px;
  border-color: rgba(var(--ph-rgb),.2);
  background: linear-gradient(180deg,rgba(var(--ph-rgb),.06),transparent);
  box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.07);
  text-shadow: .25px 0 currentColor, 0 0 5px var(--ph-glow2);
}
body.glass-demo #screen-game #bottombar .bb-gi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 15px; opacity: .9;
  border-right: 1px solid var(--gd-edge); padding-right: 6px; margin-right: 1px;
}
body.glass-demo #screen-game #bottombar .bb-group.open > .bb-grp {
  border-color: var(--ph-dim); box-shadow: inset 0 -1px 0 var(--ph), inset 0 1px 0 var(--gd-light);
}
body.glass-demo #screen-game #bottombar .bb-group.has-active > .bb-grp {
  box-shadow: inset 0 -1px 0 var(--gold), inset 0 1px 0 var(--gd-light);
}
/* Surveillance glass: identity strip, fine frame marks, and a separate camera-mode readout.
   These decorate existing readouts; camera state still comes from the existing controller. */
body.glass-demo #stage-wrap .cam-hud::before {
  content: ''; position: absolute; top: 12px; left: 16px; right: 16px; height: 38px;
  border-top: 1px solid rgba(var(--ph-rgb),.35); border-bottom: 1px solid var(--gd-edge);
  background: linear-gradient(110deg,rgba(var(--ph-rgb),.12),rgba(0,0,0,.32) 75%);
  box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.07);
}
body.glass-demo #stage-wrap .cam-label {
  top: 25px; left: 27px; max-width: calc(100% - 116px);
  font: 14px/1 'VT323',monospace; letter-spacing: 1.2px; opacity: 1;
  color: var(--ph-bright); text-shadow: 0 0 6px var(--ph-glow2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.glass-demo #stage-wrap .cam-rec {
  top: 24px; right: 27px; font: 13px/1 'VT323',monospace;
  letter-spacing: 1.4px; color: var(--ph); opacity: .85; animation: none;
  text-shadow: 0 0 5px var(--ph-glow2);
}
body.glass-demo #stage-wrap .cam-c { font-size: 23px; opacity: .8; color: var(--ph-dim); text-shadow: none; }
body.glass-demo #stage-wrap .cam-tl { top: 9px; left: 10px; }
body.glass-demo #stage-wrap .cam-tr { top: 9px; right: 10px; }
body.glass-demo #stage-wrap .cam-bl { bottom: 9px; left: 10px; }
body.glass-demo #stage-wrap .cam-br { bottom: 9px; right: 10px; }
body.glass-demo #stage-wrap .cam-feed {
  bottom: 15px; left: 26px; font: 12px/1 'VT323',monospace; letter-spacing: 1.5px;
  opacity: .8; padding: 6px 9px; border-left: 2px solid var(--ph-dim);
  background: linear-gradient(90deg,rgba(var(--ph-rgb),.08),transparent);
}
body.glass-demo #stage-wrap .cam-mode {
  top: 60px; left: 26px; right: auto; bottom: auto;
  padding: 5px 8px; border: 1px solid var(--gd-edge); border-radius: 2px;
  background: rgba(0,0,0,.42); color: var(--ph-bright);
  font: 12px/1 'VT323',monospace; letter-spacing: 1.4px; text-shadow: 0 0 5px var(--ph-glow2);
}
@media (max-width:720px) {
  body.glass-demo #screen-game #bottombar .bb-group > .bb-grp { min-width: 0; padding-inline: 8px; font-size: 16px; gap: 4px; }
  body.glass-demo #screen-game #bottombar .bb-gi { width: 16px; padding-right: 3px; font-size: 13px; }
}

/* Fine viewfinder marks over the picture, with no header plate. */
body.glass-demo #left .ws-tab { font-size: 14px; letter-spacing: .5px; padding: 6px 3px; }
body.glass-demo #left .ws-tab.on { text-shadow: none; }
/* Keep the station view free of decorative targeting marks. */
body.glass-demo #stage-wrap .cam-hud::before,
body.glass-demo #stage-wrap .cam-hud::after { content: none; display: none; }
body.glass-demo #stage-wrap .cam-label {
  top: 16px; left: 27px; font-size: 12px; letter-spacing: 1px;
  opacity: .75; color: var(--ph); text-shadow: 0 1px 2px #000;
}
body.glass-demo #stage-wrap .cam-rec { top: 16px; font-size: 11px; opacity: .7; text-shadow: 0 1px 2px #000; }
body.glass-demo #stage-wrap .cam-feed {
  bottom: 16px; left: 27px; padding: 0; border: 0; background: none;
  font-size: 11px; opacity: .65; text-shadow: 0 1px 2px #000;
}
body.glass-demo #stage-wrap .cam-mode {
  top: 36px; left: 27px; padding: 0; border: 0; background: none;
  font-size: 11px; opacity: .75; color: var(--ph); text-shadow: 0 1px 2px #000;
}
body.glass-demo #screen-game #bottombar .bb-gi {
  width: 18px; height: 18px; padding: 0; margin: 0; border: 0; opacity: .9;
}
body.glass-demo #screen-game #bottombar .bb-gi svg {
  display: block; width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}

/* Compact session rows: readable titles and quiet rectangular status lamps. */
body.glass-demo #left #workstreams .ws-row {
  min-height: 34px; padding: 6px 8px; margin-block: 2px; gap: 8px;
}
body.glass-demo #left #workstreams .ws-title { font: 16px/1.2 'VT323',monospace; letter-spacing: .3px; }
body.glass-demo #left #workstreams .ws-meta { font-size: 11px; }
/* Project lamps retain their quiet square; session lamps have their own state language. */
body.glass-demo #left .ws-dot { width: 6px; height: 6px; border-radius: 1px; }
body.glass-demo #left #ws-new { height: 25px; padding: 2px 8px; font-size: 15px; letter-spacing: .6px; text-shadow: 0 0 4px var(--ph-glow2); }
/* A fixed glass bezel keeps the rail still as the signal inside changes. */
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot {
  position: relative; display: inline-block; box-sizing: border-box; flex: 0 0 12px; width: 12px; height: 12px;
  border: 1px solid color-mix(in srgb,currentColor 65%,transparent); border-radius: 2px;
  color: var(--ph-dim); opacity: 1; animation: none;
  background: linear-gradient(145deg,color-mix(in srgb,currentColor 13%,transparent),transparent 70%);
  box-shadow: inset 0 1px 0 var(--gd-light), 0 1px 2px rgba(0,0,0,.28);
}
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot::before,
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot::after { content: ''; position: absolute; box-sizing: border-box; }
/* Read rests as an empty glass square; the filled core belongs to unread activity. */
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.seen {
  color: color-mix(in srgb,var(--text) 50%,var(--ph-dim));
}
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.unseen { color: var(--gold); box-shadow: inset 0 1px 0 var(--gd-light), 0 0 6px rgba(var(--gold-rgb),.18); }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.unseen::before { inset: 2px; border-radius: 1px; background: currentColor; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
/* Working: a scan traverses the inside of the square; the housing never blinks or moves. */
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.working { color: var(--ph-bright); overflow: hidden; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.working::before {
  left: 2px; top: 1px; width: 6px; height: 2px; background: currentColor;
  box-shadow: 0 -2px 0 color-mix(in srgb,currentColor 18%,transparent); animation: gd-session-scan 1.8s ease-in-out infinite;
}
@keyframes gd-session-scan { 0%,100% { transform: translateY(1px); opacity: .6; } 50% { transform: translateY(5px); opacity: 1; } }
/* Connecting: a small center point, distinct from the confirmed-work scan. */
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.connecting { border-style: dashed; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.connecting::before { inset: 4px; background: currentColor; }
/* Reply: two message strokes. Approval: a red exclamation with a slow light pulse. */
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.reply { color: var(--gold); }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.reply::before { left: 2px; top: 2px; width: 6px; height: 1px; background: currentColor; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.reply::after { left: 2px; top: 6px; width: 4px; height: 1px; background: currentColor; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.approval { color: var(--bad); animation: gd-approval-pulse 1.6s ease-in-out infinite; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.approval::before { left: 4px; top: 1px; width: 2px; height: 4px; background: currentColor; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.approval::after { left: 4px; top: 7px; width: 2px; height: 1px; background: currentColor; }
@keyframes gd-approval-pulse {
  0%,100% { border-color: var(--bad); box-shadow: inset 0 1px 0 var(--gd-light), 0 0 7px color-mix(in srgb,var(--bad) 45%,transparent); }
  50% { border-color: color-mix(in srgb,var(--bad) 45%,transparent); box-shadow: inset 0 1px 0 var(--gd-light), 0 0 1px transparent; }
}
@keyframes gd-session-failure { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
/* Failed: the crossed core flashes; its X stays distinct from the live approval exclamation. */
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.failed { color: var(--bad); animation: gd-session-failure 1.6s ease-in-out infinite; }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.failed::before,
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.failed::after { left: 1px; top: 4px; width: 8px; height: 1px; background: currentColor; transform: rotate(45deg); }
body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.failed::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot,
  body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot::before { animation: none; }
  body.glass-demo #left :is(#workstreams .ws-row,#projects .proj-sess-full) > .ws-dot.working::before { transform: translateY(3px); opacity: 1; }
}
/* Small, familiar window glyphs on station glass. */
body.glass-demo .gd-sheet .gd-controls { gap: 4px; }
body.glass-demo .gd-sheet :is(.gd-window-button,.term-x) {
  width: 27px; height: 25px; min-width: 27px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--gd-edge); border-radius: 3px;
  background: rgba(var(--ph-rgb),.04); color: var(--ph); box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.06);
}
body.glass-demo .gd-sheet :is(.gd-window-button,.term-x) svg,
body.glass-demo #bottombar .bb-menu .bb-i svg {
  width: 15px; height: 15px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter;
}
body.glass-demo .gd-sheet :is(.gd-window-button,.term-x):hover { background: var(--gd-hover); border-color: var(--ph-dim); color: var(--ph-bright); }
body.glass-demo .gd-sheet .term-x:hover { color: var(--bad); border-color: var(--bad); background: rgba(255,75,65,.08); box-shadow: none; }
body.glass-demo .gd-sheet :is(.gd-window-button,.term-x):focus-visible { outline: 1px solid var(--ph); outline-offset: 2px; }
/* The dock opens one quiet glass menu with clear destinations, not a stack of keycaps. */
body.glass-demo #screen-game #bottombar .bb-menu {
  width: 320px; min-width: 0; max-width: calc(100vw - 24px); max-height: min(500px,70vh); overflow-y: auto;
  padding: 7px; gap: 3px; bottom: calc(100% + 10px);
  border: 1px solid rgba(var(--ph-rgb),.3); border-radius: 5px;
  background: linear-gradient(145deg,rgba(var(--ph-rgb),.09),transparent 65%),var(--panel);
  box-shadow: inset 0 1px 0 var(--gd-light), 0 12px 35px rgba(0,0,0,.6);
}
body.glass-demo #screen-game #bottombar .bb-menu .bb {
  min-height: 55px; padding: 9px 10px; gap: 11px; border: 1px solid transparent; border-radius: 3px;
  background: transparent; box-shadow: none; text-shadow: none; color: var(--ph); transform: none;
}
body.glass-demo #screen-game #bottombar .bb-menu .bb:is(:hover,:focus-visible,.active) {
  border-color: var(--gd-edge); background: var(--gd-hover); box-shadow: inset 0 1px 0 var(--gd-light); color: var(--ph-bright);
}
body.glass-demo #screen-game #bottombar .bb-menu .bb.active { box-shadow: inset 2px 0 0 var(--ph),inset 0 1px 0 var(--gd-light); }
body.glass-demo #screen-game #bottombar .bb-menu .bb-i { width: 22px; flex-basis: 22px; align-self: center; opacity: .8; }
body.glass-demo #screen-game #bottombar .bb-menu .bb-i svg { width: 18px; height: 18px; }
body.glass-demo #screen-game #bottombar .bb-menu .bb-tx { gap: 4px; }
body.glass-demo #screen-game #bottombar .bb-menu .bb-tx b { font: 17px/1 'VT323',monospace; letter-spacing: 1px; }
body.glass-demo #screen-game #bottombar .bb-menu .bb-tx small { font: 13px/1.25 'VT323',monospace; letter-spacing: .15px; white-space: normal; overflow: visible; color: var(--ph-dim); }

/* One sheet motion owner. Never mix the legacy CRT squash/brightness with sliding glass. */
body.glass-demo .term:not(.pw) { animation: none !important; }
body.glass-demo .gd-sheet { transition: none; }
body.glass-demo .gd-sheet[inert] { pointer-events: none; }
body.glass-demo .gd-sheet :is(.gd-window-button,.term-x,.con-item),
body.glass-demo #screen-game #bottombar .bb-menu .bb {
  transition: color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
/* Display keeps closed menus out of layout; transform/opacity carry both directions.
   Without discrete-transition support, dismissal still works immediately. */
body.glass-demo #screen-game #bottombar .bb-menu {
  display: none; opacity: 0; transform: translateY(8px); animation: none;
  transition: opacity var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-out),
    display var(--t-fast) allow-discrete;
}
body.glass-demo #screen-game #bottombar .bb-group.open .bb-menu {
  display: flex; opacity: 1; transform: translateY(0);
}
@starting-style {
  body.glass-demo #screen-game #bottombar .bb-group.open .bb-menu { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  body.glass-demo #screen-game #bottombar .bb-menu,
  body.glass-demo .gd-sheet :is(.gd-window-button,.term-x,.con-item),
  body.glass-demo #screen-game #bottombar .bb-menu .bb { transition: none; }
}


/* A continuous smoked-glass bed joins the cabinet panels instead of exposing near-black page gaps. */
body.glass-demo {
  --gd-bed: color-mix(in srgb, var(--panel2) 88%, var(--ink));
  --gd-shadow: inset 0 1px 0 var(--gd-light), 0 2px 8px rgba(0,0,0,.12);
}
body.glass-demo #screen-game {
  background: linear-gradient(160deg, rgba(var(--ph-rgb),.055), transparent 60%), var(--gd-bed);
}
body.glass-demo #stage-wrap {
  background: var(--gd-bed); border-radius: 5px;
  box-shadow: 0 0 0 1px var(--gd-edge), inset 0 1px 0 var(--gd-light);
}
/* The sheet's top pull handle and maximize control own sizing, including after undocking. */
body.glass-demo .term:not(.pw) > .term-resize,
body.glass-demo .term:not(.pw) .term-foot-grip { display: none; }

/* Widget rails and their library share the station's smoked glass and readable controls. */
body.glass-demo #screen-game .widget-rail .wg-add {
  width: 28px; height: 28px; min-width: 28px; padding: 0; gap: 0;
  border: 1px solid var(--gd-edge); border-radius: 4px;
  background: var(--gd-face); color: var(--ph); box-shadow: var(--gd-shadow);
  font-size: 0; text-shadow: none;
}
body.glass-demo #screen-game .widget-rail .wg-add::before {
  content: ''; flex: 0 0 11px; width: 11px; height: 11px;
  background: linear-gradient(currentColor,currentColor) center / 11px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center / 1px 11px no-repeat;
}
body.glass-demo #screen-game .widget-rail[data-empty="1"] .wg-add {
  width: auto; padding: 0 9px; gap: 7px;
}
body.glass-demo #screen-game .widget-rail[data-empty="1"] .wg-add::after {
  font: 14px/1 'VT323',monospace; letter-spacing: .6px;
}
body.glass-demo #screen-game .widget-rail .wg-add:is(:hover,:focus-visible,[aria-expanded="true"]) {
  color: var(--ph-bright); border-color: var(--ph-dim); background: var(--gd-hover);
  box-shadow: inset 0 1px 0 var(--gd-light),0 0 9px rgba(var(--ph-rgb),.07);
}
body.glass-demo #screen-game .widget-rail .wg-add:focus-visible {
  outline: 1px solid var(--ph); outline-offset: 2px;
}
body.glass-demo .wg-library {
  padding: 10px; gap: 9px; border: 1px solid var(--gd-edge); border-radius: 5px;
  background: var(--gd-face); color: var(--text); text-shadow: none;
  box-shadow: inset 0 1px 0 var(--gd-light),0 12px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(9px);
}
body.glass-demo .wg-library-header {
  margin: -10px -10px 0; padding: 9px 10px; gap: 9px;
  border-bottom: 1px solid var(--gd-edge);
  background: linear-gradient(110deg,rgba(var(--ph-rgb),.09),transparent 80%);
}
body.glass-demo .wg-library h2 {
  font: 18px/1 'VT323',monospace; letter-spacing: 1.2px; color: var(--ph-bright);
}
body.glass-demo .wg-library-count { font: 14px/1 'VT323',monospace; }
body.glass-demo .wg-library .wg-library-close {
  position: relative; flex: 0 0 26px; width: 26px; height: 26px;
  border: 1px solid var(--gd-edge); border-radius: 3px;
  background: rgba(var(--ph-rgb),.04); color: var(--ph);
  box-shadow: inset 0 1px 0 var(--gd-light); font-size: 0;
}
body.glass-demo .wg-library-close::before,
body.glass-demo .wg-library-close::after {
  content: ''; position: absolute; width: 11px; height: 1px; left: 6.5px; top: 11.5px;
  background: currentColor; transform: rotate(45deg);
}
body.glass-demo .wg-library-close::after { transform: rotate(-45deg); }
body.glass-demo .wg-library .wg-library-close:hover {
  color: var(--bad); border-color: var(--bad); background: rgba(255,75,65,.08); box-shadow: none;
}
body.glass-demo .wg-library .wg-library-search,
body.glass-demo .wg-library .wg-studio-input {
  border: 1px solid var(--gd-edge); border-radius: 3px;
  background-color: rgba(var(--ph-rgb),.035); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.05);
  font: 16px/1.35 'VT323',monospace;
}
body.glass-demo .wg-library .wg-library-search {
  height: 32px; min-height: 32px; padding: 5px 9px;
}
body.glass-demo .wg-library-filters {
  gap: 2px; padding: 3px; border: 1px solid var(--gd-edge); border-radius: 4px;
  background: rgba(var(--ph-rgb),.025);
}
body.glass-demo .wg-library-filters button {
  flex: 1 1 auto; min-width: 0; min-height: 28px; padding: 4px 5px;
  border: 0; border-radius: 2px; font: 14px/1 'VT323',monospace; white-space: nowrap;
}
body.glass-demo .wg-library-filters button[aria-pressed="true"] {
  color: var(--ph-bright); background: var(--gd-hover);
  box-shadow: inset 0 1px 0 var(--gd-light),inset 0 -1px 0 var(--ph-dim);
}
body.glass-demo .wg-library-list { padding: 2px; }
body.glass-demo .wg-library-empty {
  padding: 6px 1px 12px; font: 16px/1.35 'VT323',monospace; color: var(--text);
}
body.glass-demo .wg-library :is(.wg-studio-button,.wg-library-action) {
  min-height: 29px; padding: 5px 8px; border: 1px solid var(--gd-edge); border-radius: 3px;
  background: var(--gd-face); box-shadow: inset 0 1px 0 var(--gd-light); color: var(--ph);
  font: 15px/1.1 'VT323',monospace;
}
body.glass-demo .wg-library .wg-studio-primary {
  color: var(--ph-bright); background: var(--gd-hover); border-color: var(--ph-dim);
}
body.glass-demo .wg-library :is(.wg-studio-button,.wg-library-action):not(:disabled):hover {
  color: var(--ph-bright); border-color: var(--ph-dim); background: var(--gd-hover);
}
body.glass-demo .wg-library :is(button,input,textarea,select):focus-visible {
  outline: 1px solid var(--ph); outline-offset: 1px;
}
body.glass-demo .wg-library button:disabled { opacity: .4; }
body.glass-demo .wg-library :is(.wg-studio-actions,.wg-presets) { gap: 6px; margin: 9px 1px; }
body.glass-demo .wg-library .wg-presets .wg-studio-button { font-size: 14px; }
body.glass-demo .wg-library :is(.wg-studio-note,.wg-studio-message,.wg-studio-error) {
  margin: 10px 1px; font: 15px/1.35 'VT323',monospace;
}
body.glass-demo .wg-library .wg-studio-heading {
  display: block; margin: 11px 1px; padding: 0; letter-spacing: .5px;
  font: 18px/1.2 'VT323',monospace;
}
body.glass-demo .wg-library .wg-studio-heading::after { content: none; }
body.glass-demo .wg-library :is(.wg-app-row,.wg-library-card) {
  gap: 8px; padding: 8px; margin-bottom: 5px;
  border: 1px solid var(--gd-edge); border-radius: 4px; background: var(--gd-face);
  box-shadow: inset 0 1px 0 rgba(var(--ph-bright-rgb),.06);
}
body.glass-demo .wg-library :is(.wg-app-row,.wg-library-card):is(:hover,:focus-within) {
  background: var(--gd-hover); border-color: var(--ph-dim);
}
body.glass-demo .wg-library .wg-app-caption strong { font: 16px/1.2 'VT323',monospace; }
body.glass-demo .wg-library .wg-app-caption small { margin-top: 3px; font: 14px/1.2 'VT323',monospace; }
body.glass-demo .wg-library .wg-studio-field { gap: 5px; margin: 10px 1px; font: 14px/1.2 'VT323',monospace; }
body.glass-demo .wg-library .wg-studio-input { padding: 6px 8px; }
body.glass-demo .wg-library select.wg-studio-input { padding-right: 24px; }
body.glass-demo .wg-library .wg-lbl { font-size: 15px; }
body.glass-demo .wg-library :is(.wg-src,.wg-sub.wg-ticktext) { font-size: 14px; }
body.glass-demo .wg-library .wg-val { font-size: 16px; }
body.glass-demo .wg-library-actions { gap: 3px; }
body.glass-demo .wg-library .wg-library-action { min-height: 27px; padding: 4px 5px; font-size: 14px; }
body.glass-demo .wg-library .wg-detail-reading {
  padding: 10px; border: 1px solid var(--gd-edge); border-radius: 4px; background: var(--gd-face);
  box-shadow: inset 0 1px 0 var(--gd-light);
}
body.glass-demo .wg-library .wg-detail-reading :is(li,a) { font-size: 16px; }
body.glass-demo .wg-library button {
  transition: color var(--t-fast) var(--ease-soft),border-color var(--t-fast) var(--ease-soft),
    background-color var(--t-fast) var(--ease-soft),box-shadow var(--t-fast) var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  body.glass-demo .wg-library button { transition: none; }
}