/* Zonedeck scene styles (DESIGN.md §3.3, §7.3). Owned by the scene engine; shared by every scene file.
   Every selector is scoped under .scene and every class is prefixed z-.
   Geometry (left/top/width/height, opacity, transform) is written by scenes.js (ZD.put). This file holds
   only looks. State that animates is driven by CSS variables that ZD.put sets on the node:
     --r     corner radius (px)          --bar   window title-bar height (px)
     --lift  0..1 lifted-shadow mix      --sh    0..1 drop-shadow strength (window, desk monitor)
     --lit   0..1 lit (drop highlight)   --hov   0..1 hover fill (panel tiles)
     --press 0..1 key / button pressed   --act   0..1 tab active fill
   Rings are box-shadows OUTSIDE the element box, so a node's box is exactly its spec rect. */

.scene { position: relative; }
.scene > .z-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.scene .z-stage *, .scene > .z-caption { box-sizing: border-box; }
.scene .z-n { position: absolute; left: 0; top: 0; margin: 0; }
/* Pieces with children keep their z-order to themselves (a lifted card's z-index never escapes its panel),
   and the cursor is always on top of the stage. */
.scene .z-panel, .scene .z-mon, .scene .z-win, .scene .z-card, .scene .z-mcard { isolation: isolate; }
.scene .z-cursor { z-index: 50; }
.scene .z-stage svg { display: block; overflow: visible; }

/* Shared overlay layers (::before / ::after) used by several pieces */
.scene .z-mon::before, .scene .z-mon::after,
.scene .z-win::before, .scene .z-win::after,
.scene .z-tile::before, .scene .z-tile::after,
.scene .z-tab::before, .scene .z-tab::after,
.scene .z-btn::before, .scene .z-btn::after,
.scene .z-dline::after, .scene .z-dcap::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border-radius: inherit; pointer-events: none;
}

/* ---------- Desk monitor (light glass) ---------- */
.scene .z-mon { --sh: 1; border-radius: var(--r, 13px); }
.scene .z-mon--desk {
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
/* desk shadow (fades with --sh, e.g. orient's turn) */
.scene .z-mon--desk::before { box-shadow: 0 18px 36px -22px rgba(7, 26, 49, .45); opacity: var(--sh); }
/* 2 px white ring + navy third pixel, drawn last so nothing paints over it. Spacing is measured to the white ring. */
.scene .z-mon--desk::after { box-shadow: 0 0 0 2px rgba(255, 255, 255, .70), 0 0 0 3px rgba(7, 26, 49, .10); }

/* ---------- Panel monitors: enlarged (cards, editor) and desk-map minis ---------- */
.scene .z-mon--panel, .scene .z-mon--mini { background: rgba(255, 255, 255, .035); }
.scene .z-mon--panel::before, .scene .z-mon--mini::before { display: none; }
.scene .z-mon--panel::after, .scene .z-mon--mini::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .30); }
.scene .z-mon--mini { border-radius: var(--r, 8px); }

/* Menu bar: a child of the glass. The ::before is a rounded slab twice the corner radius tall, clipped to the
   bar's own height, so the bar follows the glass corner exactly without clipping the glass. */
.scene .z-menu { overflow: hidden; }
.scene .z-menu::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(2 * var(--r, 13px));
  border-radius: var(--r, 13px) var(--r, 13px) 0 0; background: rgba(255, 255, 255, .30);
}
.scene .z-mon--panel .z-menu::before, .scene .z-mon--mini .z-menu::before { background: rgba(255, 255, 255, .10); }

/* ---------- Zone tiles ----------
   base fill, ::before = hover layer (opacity --hov), ::after = lit layer (opacity --lit).
   Layer alphas are pre-composited so base + layer equals the spec value exactly:
   desk .22 -> lit .50 ; panel .075 -> hover .12, lit .20 ; fan card .10 -> lit .20 */
.scene .z-tile { --hov: 0; --lit: 0; --ha: 0; --la: .359; --lr: .95; border-radius: var(--r, 5px); }
.scene .z-tile::before { background: rgba(255, 255, 255, var(--ha)); opacity: var(--hov); }
.scene .z-tile::after {
  background: rgba(255, 255, 255, var(--la)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, var(--lr));
  opacity: var(--lit);
}
.scene .z-tile--desk { background: rgba(255, 255, 255, .22); }
.scene .z-tile--panel { background: rgba(255, 255, 255, .075); --ha: .0486; --la: .1351; --lr: .92; }
.scene .z-tile--card { background: rgba(255, 255, 255, .10); --la: .1111; --lr: .92; }
/* editor mini-card tiles */
.scene .z-tile--chip { background: rgba(255, 255, 255, .16); border-radius: var(--r, 2px); }
.scene .z-tile--chip::before, .scene .z-tile--chip::after { display: none; }
.scene .z-mcard.is-picked .z-tile--chip { background: rgba(255, 255, 255, .62); }

/* ---------- Stands and decks ---------- */
.scene .z-neck { background: rgba(255, 255, 255, .50); border-radius: 0 0 2px 2px; }
.scene .z-foot { background: rgba(255, 255, 255, .62); border-radius: 3px; }
.scene .z-deck { background: rgba(255, 255, 255, .62); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.scene .z-neck--panel { background: rgba(255, 255, 255, .22); }
.scene .z-foot--panel { background: rgba(255, 255, 255, .18); }
.scene .z-deck--panel { background: rgba(255, 255, 255, .16); }
.scene .z-neck--mini { border-radius: 0 0 1px 1px; }
.scene .z-foot--mini { border-radius: 1.5px; }
.scene .z-neck--compact { border-radius: 0; }
.scene .z-foot--compact { border-radius: 1px; }

/* ---------- Plain window: white card + thin grey title bar. Nothing else, ever. ---------- */
.scene .z-win {
  --lift: 0; --sh: 1;
  background: #fff; border-radius: var(--r, 5px);
  box-shadow: 0 0 0 1px rgba(7, 26, 49, .06);
}
.scene .z-win::before { box-shadow: 0 10px 22px -12px rgba(7, 26, 49, .40); opacity: calc(var(--sh) * (1 - var(--lift))); }
.scene .z-win::after { box-shadow: 0 18px 32px -14px rgba(7, 26, 49, .45); opacity: calc(var(--sh) * var(--lift)); }
.scene .z-bar {
  width: 100%; height: var(--bar, 10px);
  background: #eef0f4; box-shadow: inset 0 -1px 0 #e1e5ec;
  border-radius: var(--r, 5px) var(--r, 5px) 0 0;
}
/* drop preview inside a lit panel / fan-card tile: still a plain white window */
.scene .z-win--preview { box-shadow: none; }
.scene .z-win--preview::before { box-shadow: 0 2px 6px rgba(0, 0, 0, .40); opacity: var(--sh); }
.scene .z-win--preview::after { display: none; }
.scene .z-win--preview .z-bar { background: #e9ebf0; box-shadow: none; }

/* Browser tabs (blank pills inside a 24-tall strip = the window bar) */
.scene .z-tab { --lift: 0; --act: 0; background: #dfe3ea; border-radius: 5px 5px 0 0; }
.scene .z-tab::before { box-shadow: 0 4px 10px -4px rgba(7, 26, 49, .3); opacity: var(--lift); }
.scene .z-tab::after { background: #fff; opacity: var(--act); }

/* ---------- Dark panel (the app's drop panel; also the editor surface) ---------- */
.scene .z-panel {
  background: #12141f; border-radius: var(--r, 22px);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .30), 0 40px 80px -40px rgba(4, 10, 30, .65);
}
.scene .z-sep { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }
.scene .z-chip {
  height: 20px; border-radius: 6px;
  background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font: 600 11.5px/20px var(--sans, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0; white-space: nowrap;
}
.scene .z-chip svg { width: 10px; height: 11px; }

/* ---------- Fan cards ---------- */
.scene .z-card {
  background: rgba(22, 26, 38, .92); border-radius: var(--r, 4px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 12px 26px -10px rgba(0, 0, 0, .45);
}
.scene .z-label {
  left: 50%; top: calc(100% + 5px); translate: -50% 0;
  font: 600 10.5px/1 var(--mono, "Geist Mono", Menlo, monospace);
  height: 1.7143em; line-height: 1.7143em; padding: 0 .5714em; border-radius: .8571em;
  background: rgba(10, 13, 22, .70); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #fff; white-space: nowrap; letter-spacing: 0;
}
/* Stage scale below 0.8 (data-small on .scene): only the lifted card's label shows, counter-scaled. */
.scene[data-small] .z-card:not(.z-lifted) .z-label { visibility: hidden; }
.scene[data-small] .z-label { font-size: calc(8.4px / var(--s, 1)); }

/* ---------- Editor pieces ---------- */
.scene .z-mcard { border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .20); }
.scene .z-mcard.is-picked { box-shadow: 0 0 0 1px rgba(255, 255, 255, .60); }
.scene .z-star { color: rgba(255, 255, 255, .75); }
.scene .z-dline { --lit: 0; background: rgba(255, 255, 255, .18); }
.scene .z-dline::after { background: rgba(255, 255, 255, .634); opacity: var(--lit); }
.scene .z-dcap { --lit: 0; background: rgba(255, 255, 255, .82); border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.scene .z-dcap::after { background: #fff; opacity: var(--lit); }
.scene .z-btn {
  --press: 0; background: #292c38; border-radius: var(--r, 6px); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.scene .z-btn::before { background: #4a4e5c; opacity: var(--press); }
.scene .z-btn::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20); }
/* the editor strip's "+" is a strip card: its ring sits outside, like the mini cards (ring-to-ring gap 9) */
.scene .z-btn--card::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .20); }
.scene .z-btn svg { position: relative; }

/* ---------- Key caps and the pulse ---------- */
.scene .z-key {
  --press: 0; background: #fff; border-radius: var(--r, 8px);
  box-shadow: 0 calc(4px - 3px * var(--press)) 0 #c9cfdd, 0 12px 20px -10px rgba(7, 26, 49, .45);
  translate: 0 calc(3px * var(--press));
  display: flex; align-items: center; justify-content: center;
  color: var(--ink, #071a31);
  font-family: var(--sans, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  font-weight: 600; line-height: 1; letter-spacing: 0;
}
/* 2 px ring inside the pulse rect (white; node opacity runs .9 -> 0), drawn behind the key */
.scene .z-pulse { border-radius: var(--r, 10px); box-shadow: inset 0 0 0 2px #fff; }

/* ---------- Cable ---------- */
.scene .z-cable path { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cursor (never scaled) ---------- */
.scene .z-cursor { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.scene .z-cursor svg { position: absolute; left: 0; top: 0; }

/* ---------- Caption pill: HTML, a sibling of the stage, not scaled ---------- */
.scene > .z-caption {
  position: absolute; translate: -50% -50%; z-index: 1;
  height: 28px; padding: 0 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 8px 20px -10px rgba(7, 26, 49, .5);
  font: 600 13px/28px var(--sans, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  color: var(--ink, #071a31); white-space: nowrap; letter-spacing: 0;
  pointer-events: none; opacity: 0;
}
@media (max-width: 599px) {
  .scene > .z-caption { height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; line-height: 24px; }
}