/* ============================================================================
   glass.css: the site's glass material (2026-09-15, Mark: "as much glass as is
   suited", built from the glasscraft draft's light-ground recipe, the same one
   the home platform panel uses). Loaded after each page's own stylesheet.

   The method, as the skill orders it:
   1. Name the ground: the beige stage. It was one flat colour, so the frost had
      nothing to soften and would have read as a tinted rectangle. The stages
      now carry the home panel's three faint washes (blue top-right, navy
      bottom-left, warm low centre). One colour still dominates; the washes stay
      under 20 percent.
   2. One light source, top-left. The white specular sits on the top edge, the
      dark hairline rim is faintest top-left and strongest bottom-right, the
      shadow falls down-right with x about half of y.
   3. Two thicknesses only. The card on a stage is the thin sheet (blur 12).
      Anything inside a sheet stays a flat fill: rows, chips, tiles, switches.
      The white-paper window is the one thick sheet (blur 24) because it sits
      over the whole page.
   4. Ink and blue nodes are not frosted: they are the dark and the tinted
      materials, which carry a white lit rim and a hue-matched shadow instead.
   5. The rim is a masked pseudo-element at 1.2px so it survives a downscale;
      the old 1px borders go transparent so nothing moves.
   Text stays a child of the frosted element (backdrop-filter never touches
   children), as on the home panel Mark approved.
   ============================================================================ */

/* ---- 1. the ground: the stages get something for the frost to reveal ---- */
.arow__vis--panel:not(.arow__vis--navy):not(.srx-ui--photo), .atx-stage {
  background:
    radial-gradient(56% 64% at 104% 16%, rgba(47,107,235,.17), transparent 62%),
    radial-gradient(50% 60% at -6% 108%, rgba(51,84,158,.14), transparent 64%),
    radial-gradient(44% 50% at 42% 112%, rgba(255,196,150,.22), transparent 70%),
    linear-gradient(158deg, #F5EEE1 0%, #EFE7D8 100%);
}

/* ---- 2. the thin sheet: every card that sits directly on a stage ---- */
.nd--w, .rc, .ov, .bd, .ng__tabs,
.jn--w, .jn--q, .fill.on, .kb, .pw-chn.on, .pw-row.on, .pw-foot,
.rx-cw, .rx-chn.on, .rx-foot, .rq.on, .sq-ev.on, .sq__hd,
.gcd,
.psp-dup__card, .psp-dup__one, .vw-rec {
  background: rgba(255,255,255,.64);
  -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%);
  border-color: transparent;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(28,32,48,.05),
              0 1px 2px rgba(28,32,48,.06), 4px 10px 26px rgba(28,32,48,.11);
}
/* the ones that were static need a box for the rim to sit in */
.rc, .ov, .bd, .ng__tabs, .fill, .rx-chn, .rx-foot, .sq-ev, .sq__hd, .pw-row, .pw-foot, .gcd, .vw-rec { position: relative; }
.nd--w::before, .rc::before, .ov::before, .bd::before, .ng__tabs::before,
.jn--w::before, .jn--q::before, .fill.on::before, .kb::before, .pw-chn.on::before, .pw-row.on::before, .pw-foot::before,
.rx-cw::before, .rx-chn.on::before, .rx-foot::before, .rq.on::before, .sq-ev.on::before, .sq__hd::before,
.gcd::before,
.psp-dup__card::before, .psp-dup__one::before, .vw-rec::before,
.nd--ink::before, .jn--ink::before, .nd--go::before, .jn--go::before, .rx-hub::before, .pw-hub::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 3;
  background: linear-gradient(135deg, rgba(28,32,48,.05), rgba(28,32,48,.11) 45%, rgba(28,32,48,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* the sheet's own ghost state keeps its faint frame until it lands */
.rq, .sq-ev, .fill, .pw-row { border-color: rgba(11,20,64,.07); }
.rx-chn { position: relative; }

/* ---- 3. the dark material: ink nodes and the active tab ---- */
.nd--ink, .jn--ink, .ng__tab.on {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.28),
              0 2px 4px rgba(28,32,48,.16), 6px 14px 34px rgba(28,32,48,.24);
}
.nd--ink::before, .jn--ink::before {
  background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.06) 50%, rgba(0,0,0,.28));
}

/* ---- 4. the tinted material: the blue nodes and the hubs ---- */
.nd--go, .jn--go, .rx-hub, .pw-hub {
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(20,30,90,.28),
              0 2px 4px rgba(30,58,186,.16), 6px 14px 30px rgba(30,58,186,.26);
}
.rx-hub, .pw-hub { position: relative; }
.rx-hub.beat { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.50), inset 0 -1px 0 rgba(20,30,90,.28), 0 2px 4px rgba(30,58,186,.16), 6px 14px 30px rgba(30,58,186,.26), 0 0 0 8px rgba(47,107,235,.14); }
.nd--go::before, .jn--go::before, .rx-hub::before, .pw-hub::before {
  background: linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.08) 50%, rgba(30,40,110,.38));
}

/* ---- 5. fills inside a sheet stay fills (never glass on glass) ---- */
.rx-role, .ov__n.on, .ov__c.on, .rc__row, .kb__col, .kb__p { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-transparency: reduce) {
  .nd--w, .rc, .ov, .bd, .ng__tabs, .jn--w, .jn--q, .fill.on, .kb, .pw-chn.on, .pw-row.on, .pw-foot, .rx-cw, .rx-chn.on, .rx-foot, .rq.on, .sq-ev.on, .sq__hd, .gcd, .psp-dup__card, .psp-dup__one, .vw-rec { background: rgba(255,255,255,.94); }
}