/* Glass boxes: a design mock on a branch (indy/glass.py, INDY_GLASS=1).

   Brett, 2026-10-07: "instead of having squircles it feels like everything
   is in straight glass boxes with a slight bevel on the edge and some depth",
   then, of the four sketches, Cut, made "thinner, no fake reflections, sparing
   small specular highlights on the edges", then "a little less spec highlight,
   more fine edge", then "needs to be on all surfaces". This file is that
   sketch (Cut round 2b) on every room:
   https://claude.ai/artifact/AhrCFziuQVqSWZFoMzupmD
   2026-10-08, "Lets drop the cut edges show me straight and squircled options
   cut just does not scale": no chamfers. Corners are square (body.glass-straight)
   or each kind's --gl-r drawn as a native squircle (body.glass-squircle, CSS
   corner-shape), so the edge, seam and shadow follow the corner at any size.

   Every surface is one of these kinds, and names its kind in --gl-kind so
   scripts/glass_audit.mjs can list any surface left out:
     pane     thin smoked glass standing on the page: 6px cuts, a fine 1px edge
              all the way round lit at the top-left, a dark seam inside it, a
              light shadow. Drawn by a pseudo-element clipped to the cut, so the
              box itself never clips its menus or focus rings.
     float    a pane that floats (menus, drawers, popovers): more opaque, a
              longer shadow.
     window   a sheet or the bench opened over the canvas: a float's shadow on
              a solid face, so nothing under it shows through.
     chrome  the app's fixed regions (header, rails, inspectors, bars): the
              same face, edge and seam, no cuts (they meet the window edge and
              each other).
     control  buttons and tabs: 3px cuts, the edge and seam; a button that
              says a state (approve, reject, warn, benchmark, primary) keeps
              that colour as its edge.
     filled   paper and the one blue button keep their fill: cut and seam only.
     pill     chips, tags, verdicts: 2px cuts, their own colours.
     well     pictures and their wells: opaque, 3px cuts, no glass on them.
     plate    big pictures: 8px cuts.
     tray     groups and readouts that sink into the page instead of standing.
     drop     drop zones and empty places: they keep their dashed edge, sunk.
     field    inputs: sunk.
     clip     timeline and cue blocks: their own colours, a lit top, a seam,
              2px cuts.
     paper    script pages: white, cut.
     row      list rows: a glass face only on hover or when current.
     ground   the floor of an app view: nothing drawn, named so it is not
              taken for a miss.
   No rounded corners anywhere; true circles keep theirs. Light is a few
   small specular points on edges, by hand, never on every box. Nothing is
   painted on a glass face. Loaded last; every rule is scoped to body.glass,
   so INDY_GLASS=0 draws every room exactly as before. */

@property --gl-kind { syntax: '*'; inherits: false; }
/* a box's corner radius when corners are squircled; never inherited, so a box's children start square */
@property --gl-r { syntax: '<length>'; inherits: false; initial-value: 0px; }

body.glass {
  /* corners: glass-squircle (default) = each kind's --gl-r, drawn as a squircle; glass-straight = square */
  --gl-round: 0;
  --gl-edge: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.17) 24%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.07));
  --gl-face: linear-gradient(180deg, rgba(36,36,36,.8), rgba(25,25,25,.86));
  /* what sits under a face or a picture, inside its edge: the edge is drawn on the whole border-box, so
     without this a translucent face lets ~20% of the edge's white through and lights the box from its top
     left, and a letterboxed or transparent picture shows it at full strength (Brett 2026-10-14: "this
     light grey filler", beside the Sound room viewer, on the brief and the script) */
  --gl-under: linear-gradient(var(--g1) 0 0);
  --gl-pic-under: linear-gradient(var(--g0) 0 0);
  --gl-seam: inset 0 0 0 1px rgba(0,0,0,.38);
  --gl-depth: 0 8px 14px -6px rgba(0,0,0,.34), 0 26px 34px -18px rgba(0,0,0,.3);
  --gl-float-face: linear-gradient(180deg, rgba(40,40,40,.97), rgba(29,29,29,.98));
  --gl-float-depth: 0 12px 22px -8px rgba(0,0,0,.5), 0 34px 50px -20px rgba(0,0,0,.45);
  --gl-chrome-face: linear-gradient(180deg, rgba(33,33,33,.94), rgba(26,26,26,.96));
  --gl-chrome-edge: inset 0 1px 0 rgba(255,255,255,.12), inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 2px rgba(0,0,0,.32);
  --gl-ctl-face: linear-gradient(180deg, rgba(48,48,48,.85), rgba(34,34,34,.85));
  --gl-ctl-edge: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.14) 45%, rgba(255,255,255,.08));
  --gl-ctl-edge-hi: linear-gradient(160deg, rgba(255,255,255,.38), rgba(255,255,255,.17) 45%, rgba(255,255,255,.1));
  /* sunk: shadowed at the top inside, the light catching its lower lip outside */
  --gl-sunk: inset 0 1px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.13), 0 0 0 1px rgba(255,255,255,.04);
  /* the edge drawn inside a box that keeps its own fill (pill, clip, paper): lit top-left, still there
     bottom-right, the seam under it; insets follow the corner, so the light wraps round the curve */
  --gl-ring: inset 0 1px 0 rgba(255,255,255,.34), inset 1px 0 0 rgba(255,255,255,.17), inset -1px 0 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(255,255,255,.07), inset 0 0 0 2px rgba(0,0,0,.3);
  /* the app's own box and button tokens: any box not named below still gets the edge and seam */
  --box-bg: linear-gradient(180deg, #232323, #1C1C1C);
  --box-line: #3A3A3A;
  --box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(0,0,0,.35), 0 8px 14px -6px rgba(0,0,0,.34);
  --btn-bg: linear-gradient(180deg, rgba(48,48,48,.85), rgba(34,34,34,.85));
  --btn-line: #444;
}

/* corners: square everywhere, or each kind's own squircle ----------------------------------- */
body.glass.glass-squircle { --gl-round: 1; }
body.glass *, body.glass *::before, body.glass *::after { border-radius: calc(var(--gl-r) * var(--gl-round)) !important; }
body.glass.glass-squircle *, body.glass.glass-squircle *::before, body.glass.glass-squircle *::after { corner-shape: squircle; }
body.glass .angle-tag img,
body.glass .bench-dot,
body.glass .brief-dot,
body.glass .brief-tick-dot,
body.glass .cu-fd .nm,
body.glass .cu-n,
body.glass .cu-turn i,
body.glass .cue-dot,
body.glass .dev-dots span,
body.glass .dev-send,
body.glass .door-reading-scenes li::before,
body.glass .flow-step__n,
body.glass .gen-n,
body.glass .gn-corner-handle,
body.glass .gn-group__tick,
body.glass .gn-insert-palette__oncanvas,
body.glass .gn-lightbox__close,
body.glass .gn-node__cap-tick,
body.glass .gn-node__layout-overlay,
body.glass .gn-node__lineage-overlay,
body.glass .gn-node__note-chip,
body.glass .gn-node__zoom-overlay,
body.glass .gn-slot-handle,
body.glass .paper__refine img,
body.glass .ps__dot,
body.glass .ps__row-name .ps__add,
body.glass .pulse-dot,
body.glass .rail .dot,
body.glass .react-flow__handle:after,
body.glass .rm-tick,
body.glass .rv-master,
body.glass .scene-circle,
body.glass .sd-face,
body.glass .sidebar-kind-dot,
body.glass .sp-key .dt,
body.glass .sp-key .nn,
body.glass .start-box__close,
body.glass .tag.v::before,
body.glass .tally-dot,
body.glass .tally-dot::after,
body.glass .title-menu__dot,
body.glass .tm-hd .dot,
body.glass .tr-story .beat,
body.glass .wt-dots span,
body.glass .wt-topic::before,
body.glass body.glass .angle-tag img,
body.glass body.glass .bench-dot,
body.glass body.glass .brief-dot,
body.glass body.glass .brief-tick-dot,
body.glass body.glass .cu-fd .nm,
body.glass body.glass .cu-n,
body.glass body.glass .cu-turn i,
body.glass body.glass .cue-dot,
body.glass body.glass .dev-dots span,
body.glass body.glass .dev-send,
body.glass body.glass .door-reading-scenes li::before,
body.glass body.glass .flow-step__n,
body.glass body.glass .gen-n,
body.glass body.glass .gn-corner-handle,
body.glass body.glass .gn-group__tick,
body.glass body.glass .gn-insert-palette__oncanvas,
body.glass body.glass .gn-lightbox__close,
body.glass body.glass .gn-node__cap-tick,
body.glass body.glass .gn-node__layout-overlay,
body.glass body.glass .gn-node__lineage-overlay,
body.glass body.glass .gn-node__note-chip,
body.glass body.glass .gn-node__zoom-overlay,
body.glass body.glass .gn-slot-handle,
body.glass body.glass .paper__refine img,
body.glass body.glass .ps__dot,
body.glass body.glass .ps__row-name .ps__add,
body.glass body.glass .pulse-dot,
body.glass body.glass .rail .dot,
body.glass body.glass .react-flow__handle:after,
body.glass body.glass .rm-tick,
body.glass body.glass .rv-master,
body.glass body.glass .scene-circle,
body.glass body.glass .sd-face,
body.glass body.glass .sidebar-kind-dot,
body.glass body.glass .sp-key .dt,
body.glass body.glass .sp-key .nn,
body.glass body.glass .start-box__close,
body.glass body.glass .tag.v::before,
body.glass body.glass .tally-dot,
body.glass body.glass .tally-dot::after,
body.glass body.glass .title-menu__dot,
body.glass body.glass .tm-hd .dot,
body.glass body.glass .tr-story .beat,
body.glass body.glass .wt-dots span,
body.glass body.glass .wt-topic::before { border-radius: 50% !important; corner-shape: round !important; }

/* pane ------------------------------------------------------------------------------- */
body.glass :is(.card, .box, .front-card__new, .dc-card, .storyboard-panel, .rm-scene, .finding, .story-cut, .story-note, .story-settled, .evidence, .sp-item, .sp-transport, .sp-clip, .lab-card, .stn-side, .work, .fs-card, .loom-panel, .paper, .wt-talk, .lr-fold, .bf-next, summary.strip, .gn-node, .monitor, .sd-ins, .script-ahead),
body.glass :is(.ref-card) {
  --c: 6px; --gl-r: calc(var(--c) * 2.5); --gl-kind: pane;
  isolation: isolate;
  background: transparent !important; border-color: transparent !important;
  box-shadow: var(--gl-depth) !important;
}
body.glass :is(.card, .box, .front-card__new, .dc-card, .storyboard-panel, .rm-scene, .finding, .story-cut, .story-note, .story-settled, .evidence, .sp-item, .sp-transport, .sp-clip, .lab-card, .stn-side, .work, .fs-card, .loom-panel, .paper, .wt-talk, .lr-fold, .bf-next, summary.strip, .gn-node, .monitor, .sd-ins, .script-ahead):not(.sd-ins, .wt-talk),
body.glass :is(.ref-card) { position: relative; }
body.glass :is(.rv-more__menu, .add-drawer-body, .more-menu-list, .gn-givens, .canvas-shot-topbar, .gn-canvas-legend, .react-flow__minimap, .gn-edge-crossing, form[action$="/rename"], .th-acts, .title-menu__list, .app-menu__list, dialog, .start-box, .board-door, .new-shot-pop form) {
  --c: 5px; --gl-r: calc(var(--c) * 2.5); --gl-kind: float; isolation: isolate;
  --gl-face: var(--gl-float-face);
  background: transparent !important; border-color: transparent !important;
  box-shadow: var(--gl-float-depth) !important;
}
body.glass :is(.card, .box, .front-card__new, .dc-card, .storyboard-panel, .rm-scene, .finding, .story-cut, .story-note, .story-settled, .evidence, .sp-item, .sp-transport, .sp-clip, .lab-card, .stn-side, .work, .fs-card, .loom-panel, .paper, .wt-talk, .lr-fold, .bf-next, summary.strip, .gn-node, .monitor, .sd-ins, .script-ahead)::before,
body.glass :is(.ref-card)::after,
body.glass :is(.rv-more__menu, .add-drawer-body, .more-menu-list, .gn-givens, .canvas-shot-topbar, .gn-canvas-legend, .react-flow__minimap, .gn-edge-crossing, form[action$="/rename"], .th-acts, .title-menu__list, .app-menu__list, dialog, .start-box, .board-door, .new-shot-pop form)::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit !important;
  border: 1px solid transparent;
  background: var(--gl-sa, none) border-box, var(--gl-sb, none) border-box, var(--gl-sc, none) border-box,
              var(--gl-face) padding-box, var(--gl-under) padding-box, var(--gl-edge) border-box;
  box-shadow: var(--gl-seam);
}
body.glass :is(.card, .box, .front-card__new, .dc-card, .storyboard-panel, .rm-scene, .finding, .story-cut, .story-note, .story-settled, .evidence, .sp-item, .sp-transport, .sp-clip, .lab-card, .stn-side, .work, .fs-card, .loom-panel, .paper, .wt-talk, .lr-fold, .bf-next, summary.strip, .gn-node, .monitor, .sd-ins, .script-ahead, .ref-card, .rv-more__menu, .add-drawer-body, .more-menu-list, .gn-givens, .canvas-shot-topbar, .gn-canvas-legend, .react-flow__minimap, .gn-edge-crossing, form[action$="/rename"], .th-acts, .title-menu__list, .app-menu__list, dialog, .start-box, .board-door, .new-shot-pop form) {
  /* specular points: a corner, a stretch of the top edge, a stretch of the right edge */
  --gl-corner: radial-gradient(4px 4px at calc(1px + var(--gl-r) * .16 * var(--gl-round)) calc(1px + var(--gl-r) * .16 * var(--gl-round)), rgba(255,255,255,.6), rgba(255,255,255,0));
  --gl-top:    radial-gradient(18px 1px at var(--gl-x, 24%) 0, rgba(255,255,255,.55), rgba(255,255,255,0));
  --gl-side:   radial-gradient(1px 14px at 100% var(--gl-y, 40%), rgba(255,255,255,.28), rgba(255,255,255,0));
}
body.glass :is(.dc-card, .sp-item, .ref-card, .fs-card) { --c: 5px; }
body.glass :is(.sp-clip, .sp-transport, summary.strip) { --c: 4px; }
body.glass .gn-node { --c: 4px; }
body.glass :is(.gn-node--bare, .ps-closed) { --c: 2px; }
/* An open sheet and the bench window are windows ON the flow, drawn over their neighbours
   (canvas.css, vault/84): a pane's smoked face let the pictures under them show through, so a
   window's face is solid and it casts a float's shadow. A closed card stays a pane. */
body.glass .react-flow__node > :is(.gn-node.ps:not(.ps-closed), .gn-group--bench) {
  --gl-kind: window;
  --gl-face: linear-gradient(180deg, rgb(40,40,40), rgb(29,29,29));
  box-shadow: var(--gl-float-depth) !important;
}
/* the brief's next step is a pane like the rest, its light a corner and a stretch of the top edge; no blue face,
   edge or link (Brett 2026-10-15: "dont like this blue colour") */
body.glass .bf-next { --gl-sa: var(--gl-corner); --gl-sb: var(--gl-top); --gl-x: 18%; }
body.glass .bf-next__go { color: var(--ink-dim); }
body.glass .bf-next__go:hover { color: var(--ink); }
body.glass .rv-more__menu, body.glass .title-menu__list, body.glass .app-menu__list { --gl-sb: var(--gl-top); --gl-x: 30%; }
/* a coloured edge is meant to tint its whole face (a locked design's foil, a benchmark's gold): those keep the edge showing through, only the plain white edge is held to its border */
body.glass :is(.dc-card.is-locked, .ref-card.state-benchmark) { --gl-under: none; }

/* where the light catches: by hand, a few boxes, never all */
body.glass :is(.card:first-of-type, .finding.is-picked, .story-cut, .paper:not(.paper--script), .monitor) { --gl-sa: var(--gl-corner); --gl-sb: var(--gl-top); --gl-x: 13%; }
body.glass :is(.evidence, .sd-ins, .stn-side) { --gl-sc: var(--gl-side); --gl-y: 22%; }
body.glass :is(.dc-card:nth-child(4n+2), .storyboard-panel:nth-child(6n+2), .rm-scene:nth-child(5n+2), .lab-card:nth-child(6n+2), .ref-card:nth-child(7n+3)) { --gl-sa: var(--gl-corner); }
body.glass :is(.dc-card:nth-child(4n), .storyboard-panel:nth-child(7n+5), .rm-scene:nth-child(5n+4), .lab-card:nth-child(7n+5), .ref-card:nth-child(6n+5)) { --gl-sb: var(--gl-top); --gl-x: 68%; }
body.glass .front-card__new { --gl-sa: var(--gl-corner); }

/* the design card: the pane replaces its paper edge; a locked design wears its foil as the glass edge */
body.glass .dc-card::after { display: none; }
body.glass .dc-card { padding: 7px 7px 0; }
body.glass .dc-card.is-locked { --gl-edge: linear-gradient(165deg, rgba(165,131,250,.55), rgba(97,160,255,.45) 30%, rgba(85,205,228,.4) 55%, rgba(242,164,107,.38) 80%, rgba(242,164,107,.14)); }
body.glass .dc-card.is-locked:hover { --gl-edge: linear-gradient(165deg, rgba(165,131,250,.85), rgba(97,160,255,.75) 30%, rgba(85,205,228,.7) 55%, rgba(242,164,107,.65) 80%, rgba(242,164,107,.25)); }
body.glass .dc-card:hover { transform: translateY(-3px); }
/* a benchmark ref card keeps its gold, as the edge */
body.glass .ref-card.state-benchmark { --gl-edge: linear-gradient(160deg, rgba(214,168,74,.75), rgba(214,168,74,.35)); }

/* chrome ----------------------------------------------------------------------------- */
body.glass :is(header.site-header, .sp-viewbar, .sp-tlbar, .sp-insp, .sp-rail, .sp-mrail, .tr-h, .sb-act, .lane-label, #tl-corner, #bar, #bins, #bins-view, #tl-right, #inspector, #transport, .canvas-sidebar, nav.design-rail, .lay-rail, .lay-vptop, .lay-dock, .lay-status, .rail-sticky, .pane-h, .shell-nav, .shell-indy, .shell-ctl, .pane-bar) {
  --gl-kind: chrome;
  background: var(--gl-chrome-face) !important;
  box-shadow: var(--gl-chrome-edge) !important;
}
body.glass .pane-h { background: linear-gradient(180deg, rgba(36,36,36,.97), rgba(32,32,32,.97)) !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.4) !important; }

/* ground ------------------------------------------------------------------------------ */
body.glass :is(.canvas-layout, .react-flow__background, .react-flow__minimap svg, .no-bench, #tl-main, #stagewrap, #tl-scroll, .sp-app, .sp-tracks, .lay-vpcol, .lay-stage, .sp-mon, section.viewer, .lab td, .lab th, #gl, td, th) { --gl-kind: ground; }
body.glass :is(td, th) { border-color: rgba(255,255,255,.06); }

/* control ----------------------------------------------------------------------------- */
body.glass :is(.btn, .btn-icon, .rm-btn, .story-btn, .sb-btn, .sp-ib, .bn-rung, .rv-btn, .rv-corner, .rv-save, .dc-ghost, .ov-ghost, .gq, .pulse-chip, .sb-chip, .btn-mark, .master-tick, .tfilt, .tbtn, .ibtn, .dev-reply, .dev-send, .world-yn-btn, .mr-tmp, .lane-chip, .tm-tile, .mr-theme, .lr-chip, .tstep, .voice-icon, .gn-ibtn, .gn-group__go, .gn-group__bench, .scene-cast-chip, .rec-btn, .rv-seg button, .story-views a, .model-pick span, .tr-h button, button:not([class]), button[class=""], .btn-primary, .btn-benchmark, .start-box__way, .start-box__close, .lay-act, .lay-ibtn, #solo button, button.on):not(.ov-go, .front-new, .rm-btn--go, .sb-pri, .paper__refine, .start-box__go, .gn-group--anim .gn-group__go) {
  --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: control;
  border: 1px solid transparent !important;
  background: var(--gl-ctl-face) padding-box, var(--gl-ctl-edge) border-box !important;
  box-shadow: var(--gl-seam) !important;
}
body.glass :is(.btn, .btn-icon, .rm-btn, .story-btn, .sb-btn, .sp-ib, .bn-rung, .rv-btn, .rv-corner, .rv-save, .dc-ghost, .ov-ghost, .gq, .pulse-chip, .sb-chip, .btn-mark, .master-tick, .tfilt, .tbtn, .ibtn, .dev-reply, .dev-send, .world-yn-btn, .mr-tmp, .lane-chip, .tm-tile, .mr-theme, .lr-chip, .tstep, .voice-icon, .gn-ibtn, .gn-group__go, .gn-group__bench, .scene-cast-chip, .rec-btn, .rv-seg button, .story-views a, .model-pick span, .tr-h button, button:not([class]), button[class=""], .btn-primary, .btn-benchmark, .start-box__way, .start-box__close, .lay-act, .lay-ibtn, #solo button, button.on):not(.ov-go, .front-new, .rm-btn--go, .sb-pri, .paper__refine, .start-box__go, .gn-group--anim .gn-group__go):hover {
  background: radial-gradient(3px 3px at 2px 2px, rgba(255,255,255,.55), rgba(255,255,255,0)) border-box,
              linear-gradient(180deg, rgba(54,54,54,.88), rgba(38,38,38,.88)) padding-box, var(--gl-ctl-edge-hi) border-box !important;
}
body.glass :is(.btn, .btn-icon, .rm-btn, .story-btn, .sb-btn, .sp-ib, .bn-rung, .rv-btn, .rv-corner, .rv-save, .dc-ghost, .ov-ghost, .gq, .pulse-chip, .sb-chip, .btn-mark, .master-tick, .tfilt, .tbtn, .ibtn, .dev-reply, .dev-send, .world-yn-btn, .mr-tmp, .lane-chip, .tm-tile, .mr-theme, .lr-chip, .tstep, .voice-icon, .gn-ibtn, .gn-group__go, .gn-group__bench, .scene-cast-chip, .rec-btn, .rv-seg button, .story-views a, .model-pick span, .tr-h button, button:not([class]), button[class=""], .btn-primary, .btn-benchmark, .start-box__way, .start-box__close, .lay-act, .lay-ibtn, #solo button, button.on):not(.ov-go, .front-new, .rm-btn--go, .sb-pri, .paper__refine, .start-box__go, .gn-group--anim .gn-group__go):active {
  background: linear-gradient(180deg, rgba(26,26,26,.9), rgba(34,34,34,.9)) padding-box,
              linear-gradient(160deg, rgba(0,0,0,.4), rgba(255,255,255,.14)) border-box !important;
}
body.glass :is(.btn, .btn-icon, .rm-btn, .story-btn, .sb-btn, .sp-ib, .bn-rung, .rv-btn, .rv-corner, .rv-save, .dc-ghost, .ov-ghost, .gq, .pulse-chip, .sb-chip, .btn-mark, .master-tick, .tfilt, .tbtn, .ibtn, .dev-reply, .dev-send, .world-yn-btn, .mr-tmp, .lane-chip, .tm-tile, .mr-theme, .lr-chip, .tstep, .voice-icon, .gn-ibtn, .gn-group__go, .gn-group__bench, .scene-cast-chip, .rec-btn, .rv-seg button, .story-views a, .model-pick span, .tr-h button, button:not([class]), button[class=""], .btn-primary, .btn-benchmark, .start-box__way, .start-box__close, .lay-act, .lay-ibtn, #solo button, button.on):not(.ov-go, .front-new, .rm-btn--go, .sb-pri, .paper__refine, .start-box__go, .gn-group--anim .gn-group__go):is(.is-on, .on, .is-lead, .is-here, .active, .is-current) {
  background: linear-gradient(180deg, rgba(64,64,64,.9), rgba(46,46,46,.9)) padding-box, var(--gl-ctl-edge-hi) border-box !important;
}
/* a button that says a state keeps its colour, as the edge */
body.glass :is(.btn-primary, .is-approved) { --gl-ctl-edge: linear-gradient(160deg, var(--edge-c), color-mix(in srgb, var(--edge-c) 55%, transparent)); --gl-ctl-edge-hi: linear-gradient(var(--edge-c), var(--edge-c)); }
body.glass .btn-primary { --edge-c: var(--chrome); }
body.glass .is-approved { --edge-c: var(--ok); }
body.glass :is(.btn-warn, .is-rejected, .rec-btn) { --gl-ctl-edge: linear-gradient(160deg, var(--live), color-mix(in srgb, var(--live) 55%, transparent)); --gl-ctl-edge-hi: linear-gradient(var(--live), var(--live)); }
body.glass :is(.btn-benchmark, .master-tick.is-on) { --gl-ctl-edge: linear-gradient(160deg, var(--bench), color-mix(in srgb, var(--bench) 55%, transparent)); --gl-ctl-edge-hi: linear-gradient(var(--bench), var(--bench)); }
body.glass .tm-tile.on { --gl-ctl-edge: linear-gradient(160deg, #E0688A, rgba(224,104,138,.5)); }
body.glass :is(.flop-btn.active, .btn-icon.active) { --gl-ctl-edge: linear-gradient(160deg, #EFEFEF, rgba(239,239,239,.5)); }
body.glass :is(.tm-tile, .mr-theme) { --c: 4px; }
body.glass :is(.btn, .btn-icon, .rm-btn, .story-btn, .sb-btn, .sp-ib, .bn-rung, .rv-btn, .rv-corner, .rv-save, .dc-ghost, .ov-ghost, .gq, .pulse-chip, .sb-chip, .btn-mark, .master-tick, .tfilt, .tbtn, .ibtn, .dev-reply, .dev-send, .world-yn-btn, .mr-tmp, .lane-chip, .tm-tile, .mr-theme, .lr-chip, .tstep, .voice-icon, .gn-ibtn, .gn-group__go, .gn-group__bench, .scene-cast-chip, .rec-btn, .rv-seg button, .story-views a, .model-pick span, .tr-h button, button:not([class]), button[class=""], .btn-primary, .btn-benchmark, .start-box__way, .start-box__close, .lay-act, .lay-ibtn, #solo button, button.on, .ov-go, .front-new, .rm-btn--go, .sb-pri, .paper__refine, .start-box__go, .gn-group--anim .gn-group__go):focus-visible { outline-offset: -3px; }

/* filled ------------------------------------------------------------------------------ */
body.glass :is(.ov-go, .front-new, .rm-btn--go, .sb-pri, .paper__refine, .start-box__go, .gn-group--anim .gn-group__go) {
  --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: filled;
  /* a light fill: a bright inner rim is its edge, a dark hairline outside keeps it off the ground */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px rgba(0,0,0,.4) !important;
}

/* pill -------------------------------------------------------------------------------- */
body.glass :is(.pill, .sf-pill, .motion-pill, .finding__serious, .rm-scene__num, .rv-verdict, .chip, .tag, .brief-chip, .brief-chip-count, .rd-state, .gen-src, .bench-next, .pick-now, .gn-group__badge) { --c: 2px; --gl-r: 999px; --gl-kind: pill; }
/* small things are capsules, as on main (and macOS): a squircle on a 20px chip reads as a box, and they keep
   their own border, no glass edge (Brett 2026-10-08: squircles on small elements in the board look wrong) */
body.glass.glass-squircle :is(.pill, .sf-pill, .motion-pill, .finding__serious, .rm-scene__num, .rv-verdict, .chip, .tag, .brief-chip, .brief-chip-count, .rd-state, .gen-src, .bench-next, .pick-now, .gn-group__badge) { corner-shape: round !important; }

/* well and plate: pictures, opaque, cut, no glass --------------------------------------- */
body.glass :is(img, video, .dc-card__pic, .rm-card__frame, .ov-tile__frame, .front-card__plate, .storyboard-panel .panel-canvas, .cl-pic, .sd-thumb, .entity-gallery-tile, .th-pic, .lab-pic, .design-rail-thumb, .shot-card-thumb, .folder-thumb, .bf-char__pic, .ls-plate, .ls-oth, .world-plate, .world-candidate, .wt-pick-plate, .world-proof-roll, .bench-rung-pic, .fs-card .frame, .gn-group__face, .lr-behind > div) { --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: well; }
body.glass :is(.ov-hero:not(.ov-hero--bare), .dc-plate, .ls-big, .world-proof-plate, .stn-well, .well-focus, .frame.fit) { --c: 8px; --gl-r: calc(var(--c) * 2.5); --gl-kind: plate; }
body.glass :is(.stn-well, .well-focus, .frame.fit) { --c: 6px; }

/* the picture's edge: a picture covers its box's fill and insets, so the box draws its edge over the
   picture, as a 1px ring on ::after (masked to the border), taking the box's own corner */
body.glass :where(.dc-card__pic, .rm-card__frame, .ov-tile__frame, .front-card__plate, .storyboard-panel .panel-canvas, .sd-thumb, .entity-gallery-tile, .th-pic, .lab-pic, .design-rail-thumb, .shot-card-thumb, .folder-thumb, .bf-char__pic, .ls-plate, .ls-oth, .world-plate, .world-candidate, .wt-pick-plate, .world-proof-roll, .bench-rung-pic, .fs-card .frame, .gn-group__face, .lr-behind > div, .ov-hero:not(.ov-hero--bare), .dc-plate, .ls-big, .world-proof-plate, .stn-well, .well-focus, .frame.fit) { position: relative; }  /* .cl-pic left out: it is absolute already */
body.glass :is(.dc-card__pic, .rm-card__frame, .ov-tile__frame, .front-card__plate, .storyboard-panel .panel-canvas, .cl-pic, .sd-thumb, .entity-gallery-tile, .th-pic, .lab-pic, .design-rail-thumb, .shot-card-thumb, .folder-thumb, .bf-char__pic, .ls-plate, .ls-oth, .world-plate, .world-candidate, .wt-pick-plate, .world-proof-roll, .bench-rung-pic, .fs-card .frame, .gn-group__face, .lr-behind > div, .ov-hero:not(.ov-hero--bare), .dc-plate, .ls-big, .world-proof-plate, .stn-well, .well-focus, .frame.fit)::after {
  content: "" !important; position: absolute !important; inset: 0 !important; height: auto !important; width: auto !important;
  z-index: 3; pointer-events: none; --gl-kind: ring;
  border: 1px solid transparent; border-radius: inherit !important;
  background: var(--gl-edge) border-box !important;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
}
/* the look plate shades its picture on ::before and ::after: both shades move to ::before, ::after is the ring */
body.glass .dc-plate:not(.dc-plate--bare)::before {
  top: 0; bottom: 0; height: auto;
  background: linear-gradient(180deg, rgba(8,9,10,.5), rgba(8,9,10,0)) top / 100% 22% no-repeat,
              linear-gradient(180deg, rgba(8,9,10,0), rgba(8,9,10,.72) 46%, rgba(8,9,10,.92)) bottom / 100% 72% no-repeat;
}
/* a picture with no box round it draws the edge itself: a 1px frame of the edge gradient in its own border,
   the void under it where the picture does not reach. The Sound room's #sp-video is not one: its box is the
   whole stage and the frame letterboxes inside it, so it is ground: the monitor's own floor, no edge. */
body.glass #sp-video { --gl-kind: ground; --gl-r: 0px; }
body.glass :is(img.thumb, .gn-node__thumb, .bf-place img, .refs-inbox .card img, .card > img, .bench-take-pic img, .evidence__beat img, video.rec-buf, video.bench-pic) {
  --gl-edge-on: self; box-sizing: border-box;
  border: 1px solid transparent !important; background: var(--gl-pic-under) padding-box, var(--gl-edge) border-box !important;
}
/* the brand mark is a drawing, not a picture: square, no edge */
body.glass .brand-mark { --gl-r: 0px; --gl-kind: mark; }

/* tray, drop, field: sunk ---------------------------------------------------------------- */
body.glass :is(.cm-totals, .cm-tiles, .cm-sum, .cm-tile, .cm-tot, .tray-strip, .lr-send, .brief-guide-body, .prompt-frozen, .ui-lang-toggle) {
  --gl-kind: tray; --gl-r: 8px;
  background: rgba(0,0,0,.22) !important;
  border-color: transparent !important;
  box-shadow: var(--gl-sunk) !important;
}
/* a button group draws nothing: each of its buttons stands on its own, as on main (Brett 2026-10-08: the tray
   "combined board and sf") */
body.glass :is(.rv-seg, .sp-seg, .sp-views, .story-views, .seg) { --gl-kind: group; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
body.glass :is(.cast-wall, .drop-zone, .world-drop-face, .lr-drop-face, .tm-drop, .world-drop, .aud-empty, .gallery-empty, .ls-col--none, .ls-plate--none, .fs-card.empty-card) { --gl-kind: drop; --gl-r: 8px; background: rgba(0,0,0,.18) !important; box-shadow: var(--gl-sunk) !important; }
body.glass :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .sp-search, .dev-composer, .start-box__field) { --gl-kind: field; --gl-r: 6px; box-shadow: var(--gl-sunk); }
/* the benchmark promote form keeps its gold, sunk */
body.glass .promote-form { --gl-kind: tray; box-shadow: var(--gl-sunk) !important; }

/* clip: timeline and cue blocks ----------------------------------------------------------- */
body.glass :is(.tl-clip, .tl-audio-clip, .cl-aud, .cu-blk) {
  --c: 2px; --gl-r: calc(var(--c) * 2.5); --gl-kind: clip;
  box-shadow: var(--gl-ring) !important;
}

/* paper: script pages ---------------------------------------------------------------------- */
body.glass :is(.script-sheet, .scene-paper) { --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: paper; box-shadow: var(--gl-ring) !important; }
body.glass .screenplay { --gl-kind: paper; }

/* row: list rows, a glass face only on hover or when current --------------------------------- */
body.glass :is(.ov-row, .sidebar-item, .design-rail a, .title-menu__item, .app-menu__item) { --gl-kind: row; --gl-r: 6px; }
body.glass :is(.ov-row, .sidebar-item, .design-rail a, .title-menu__item, .app-menu__item):is(:hover, .active, .is-here, [aria-current]) {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4) !important;
}

/* marks: swatches, dots, the small readouts ---------------------------------------------------- */
body.glass :is(i, .dot, .mono) { --gl-kind: mark; }

/* the front door's start box sits over a full picture: thinner glass there, its own blur kept */
body.glass .start-box { --gl-face: linear-gradient(180deg, rgba(30,30,30,.6), rgba(20,20,20,.7)); }
body.glass .start-dialog .start-box { --gl-face: linear-gradient(180deg, rgba(30,30,30,.9), rgba(22,22,22,.93)); }

/* the bar's menu (app_menu.html): its button is a control drawn as a quiet
   square; its list a float; its rows rows */
body.glass .app-menu__btn { --gl-kind: control; --gl-r: 7.5px; }
body.glass .app-menu__list { --c: 5px; --gl-r: 12px; }

/* the board's inspector, grouped (rooms.css, PAP-43) ------------------------------------------
   Its tiles and verdict are controls like any other. The approve keeps its paper (filled); the
   rows inside the three folds are rows, a face only under the pointer; an out-of-date tile keeps
   the warn colour as its edge; the Board | Styleframe switch is a group whose buttons stand on
   their own, the one up lit (as the board's own switch). The control rule carries an id in its
   :is() list, so these name the inspector by id. */
body.glass #rv-inspector .rv-ins__seg { --gl-kind: group; border-color: transparent; padding: 0; gap: 4px; }
body.glass #rv-inspector .rv-ins__verdict [data-slot="approve"] button:not(.is-approved) {
  --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: filled;
  background: var(--paper-ink) !important; border-color: transparent !important; color: var(--g0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px rgba(0,0,0,.4) !important;
}
body.glass #rv-inspector .rv-ins__verdict [data-slot="approve"] button:not(.is-approved):hover { background: color-mix(in srgb, var(--paper-ink), white 35%) !important; }
body.glass #rv-inspector .rv-tiles .is-stale { --gl-ctl-edge: linear-gradient(160deg, var(--warn), color-mix(in srgb, var(--warn) 55%, transparent)); --gl-ctl-edge-hi: linear-gradient(var(--warn), var(--warn)); }
body.glass #rv-inspector .rv-tiles .btn-primary { --gl-ctl-edge: inherit; --gl-ctl-edge-hi: inherit; }
body.glass #rv-inspector .rv-tiles .count { --gl-r: 999px; --gl-kind: pill; corner-shape: round; }
body.glass #rv-inspector :is(.rv-ins__fold, .rv-ins__hint) { --gl-r: 8px; --gl-kind: tray; }
body.glass #rv-inspector .rv-ins__hint { --gl-r: 0px; --gl-kind: chrome; }
body.glass #rv-inspector :is(.rv-ins__rows > form > button, .rv-ins__rows > button, .rv-ins__rows > a, .rv-ins__rows > details > summary) {
  --gl-r: 6px; --gl-kind: row;
  background: none !important; border-color: transparent !important; box-shadow: none !important;
}
body.glass #rv-inspector :is(.rv-ins__rows > form > button, .rv-ins__rows > button, .rv-ins__rows > a, .rv-ins__rows > details > summary):hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4) !important;
}

/* The node sheet in the timeline's dock (INDY_BENCH_DOCK; app.css names its type): its presses are
   controls, the paid one a primary with the chrome edge, its value pills fields, its thumb a well.
   The canvas window's sheet is not touched. */
body.glass #shot-dock .bench-sheet .ps--dock :is(.ps__tb, .ps__ib, .ps__go, .ps__second) {
  --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: control;
  border: 1px solid transparent !important;
  background: var(--gl-ctl-face) padding-box, var(--gl-ctl-edge) border-box !important;
  box-shadow: var(--gl-seam) !important;
}
body.glass #shot-dock .bench-sheet .ps--dock :is(.ps__tb, .ps__ib, .ps__go, .ps__second):hover:not(:disabled) {
  background: radial-gradient(3px 3px at 2px 2px, rgba(255,255,255,.55), rgba(255,255,255,0)) border-box,
              linear-gradient(180deg, rgba(54,54,54,.88), rgba(38,38,38,.88)) padding-box, var(--gl-ctl-edge-hi) border-box !important;
}
body.glass #shot-dock .bench-sheet .ps--dock :is(.ps__tb, .ps__ib, .ps__go, .ps__second):active:not(:disabled) {
  background: linear-gradient(180deg, rgba(26,26,26,.9), rgba(34,34,34,.9)) padding-box,
              linear-gradient(160deg, rgba(0,0,0,.4), rgba(255,255,255,.14)) border-box !important;
}
body.glass #shot-dock .bench-sheet .ps--dock .ps__go { --edge-c: var(--chrome); --gl-ctl-edge: linear-gradient(160deg, var(--edge-c), color-mix(in srgb, var(--edge-c) 55%, transparent)); --gl-ctl-edge-hi: linear-gradient(var(--edge-c), var(--edge-c)); }
body.glass #shot-dock .bench-sheet .ps--dock .ps__go.is-stopped { --edge-c: var(--live); }
body.glass #shot-dock .bench-sheet .ps--dock .ps__pill { --gl-kind: field; --gl-r: 6px; box-shadow: var(--gl-sunk); }
body.glass #shot-dock .bench-sheet .ps--dock .ps__pill.is-changed { box-shadow: var(--gl-sunk), inset 0 0 0 1px var(--warn); }
body.glass #shot-dock .bench-sheet .ps--dock .ps__bar .tk-pic { --c: 3px; --gl-r: calc(var(--c) * 2.5); --gl-kind: well; }

/* Brett 2026-10-15 (PAP-121) ------------------------------------------------------------------------
   The script: "edge highlight to strong around the script squircles". Its card keeps the edge at about half the
   light and no specular points; the white sheet keeps only its dark seam and a faint lit top. The banner over it
   (the file on disk is ahead) is a pane with a squircle, like the card under it, not a chrome bar with a gold rule. */
body.glass .paper--script { --gl-edge: linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.09) 24%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.04)); }
body.glass :is(.script-sheet, .scene-paper) { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.14) !important; }
body.glass .script-ahead { --c: 5px; margin: 0 28px; padding: .7rem .8rem .7rem 1.15rem; }  /* in line with the card under it (.flow-cols pads 28px) */
/* the Design room's cast: a row of cards is not a drop zone until someone is dragged over it, so it draws
   nothing (its sunk tray ran a line along the cards' tops, between them: "there is a line connecting this
   boxes"); an empty tier and a tier under a drag keep the sunk tray */
body.glass .cast-wall:has(.dc-card, .rm-card, .folder--poster):not(.is-over) { --gl-kind: group; background: transparent !important; box-shadow: none !important; }
/* The board's inspector rows: "darker and cleaner". The row rule above names the inspector by one id, and the
   control rule's :is() carries an id (#solo button) and a two-class :not(), so the control rule won and every row
   drew as a grey button. Naming the id twice wins it back: no face, no edge, the icon and price dim, a face only
   under the pointer. */
body.glass #rv-inspector#rv-inspector :is(.rv-ins__rows > form > button, .rv-ins__rows > button, .rv-ins__rows > a, .rv-ins__rows > details > summary) {
  --gl-r: 6px; --gl-kind: row;
  border: 1px solid transparent !important; background: none !important; box-shadow: none !important;
  color: var(--ink-dim);
}
body.glass #rv-inspector#rv-inspector :is(.rv-ins__rows > form > button, .rv-ins__rows > button, .rv-ins__rows > a, .rv-ins__rows > details > summary):is(:hover, :focus-visible) {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4) !important;
  color: var(--ink);
}
body.glass #rv-inspector#rv-inspector .rv-ins__rows > form > button:disabled { background: none !important; box-shadow: none !important; }
body.glass #rv-inspector .rv-ins__rows .icon { color: var(--ink-faint); }
body.glass #rv-inspector .rv-ins__rows :is(button, a, summary):is(:hover, :focus-visible) .icon { color: var(--ink); }
body.glass #rv-inspector .rv-ins__rows .rv-p { color: var(--ink-faint); opacity: .8; }
body.glass #rv-inspector .rv-ins__rows > [data-act="delete"] > button:is(:hover, :focus-visible),
body.glass #rv-inspector .rv-ins__rows > [data-act="delete"] > button:is(:hover, :focus-visible) .icon { color: var(--live); }
body.glass #rv-inspector .rv-ins__fold { background: rgba(0,0,0,.2) !important; border-color: transparent !important; box-shadow: var(--gl-sunk) !important; }