/* ═══════════════════════════════════════════════════════════════════════
   PRISM · shell — the chrome every page wears.

   Replaces: ten copy-pasted `#nav` blocks, the Studio's bespoke 52px app
   bar, the doc pages' `.docnav` pill, and the four pages that had nothing
   at all. Paired with js/prism-shell.js, which builds the markup.

   Everything is prefixed `pz-` on purpose. The rooms already own `.bar`,
   `.btn`, `#nav`, `#chrome` and `#hintline`; this file must be able to
   land on top of a room without touching any of it.

   Two header densities:
     data-pz-head="bar"   always visible — hub, doc pages, Studio, Admin
     data-pz-head="chip"  collapses to the mark after a few seconds, and
                          comes back on pointer, ON KEYPRESS, and ON TOUCH
                          in the top-left corner. The old chip woke only on
                          pointermove, so on a touchscreen you had to drag
                          across the canvas — which in most rooms feeds the
                          fish, wipes the glass or draws a ledge instead.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── reserve space so page content never sits under the bar ── */
html[data-pz-head="bar"]{--pz-inset:calc(var(--p-head) + var(--p-top))}
html[data-pz-head="chip"],html[data-pz-head="none"]{--pz-inset:0px}
body.pz-push{padding-top:var(--pz-inset)}

/* ═══ header ═══════════════════════════════════════════════════════════ */

.pz-head{
  position:fixed;top:0;left:0;right:0;z-index:2147482000;
  display:flex;align-items:center;gap:var(--p-3);
  height:calc(var(--p-head) + var(--p-top));
  padding:var(--p-top) calc(var(--p-4) + var(--p-rgt)) 0 calc(var(--p-4) + var(--p-lft));
  font-family:var(--p-ui);
  color:var(--p-text-2);
  background:linear-gradient(var(--p-surface),color-mix(in srgb,var(--p-surface) 88%,transparent));
  border-bottom:1px solid var(--p-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity var(--p-t-std) var(--p-ease),transform var(--p-t-std) var(--p-ease),
             background var(--p-t-std),border-color var(--p-t-std);
}

/* chip mode: no plate, no border, floats over the scene */
html[data-pz-head="chip"] .pz-head{
  background:none;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  height:calc(var(--p-head-chip) + var(--p-top));
  padding-top:calc(var(--p-top) + 6px);
}
html[data-pz-head="chip"] .pz-head > *{
  background:color-mix(in srgb,var(--p-ground) 76%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--p-rp);
}
/* collapsed: the mark stays, everything else folds away. It is never
   opacity:0-while-focusable — the old chip stayed in the tab order while
   invisible, so keyboard focus landed on a control nobody could see. */
html[data-pz-head="chip"] .pz-head.pz-idle .pz-where,
html[data-pz-head="chip"] .pz-head.pz-idle .pz-actions{
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
}
html[data-pz-head="chip"] .pz-head.pz-idle .pz-brand{opacity:.5}
.pz-where,.pz-actions{transition:opacity var(--p-t-std) var(--p-ease),transform var(--p-t-std) var(--p-ease)}

/* ── brand + back ── */
.pz-brand{
  display:flex;align-items:center;gap:var(--p-2);flex:none;
  min-height:var(--p-tap);padding:0 var(--p-3) 0 var(--p-2);
  color:var(--p-text-1);text-decoration:none;
  border:1px solid transparent;
  transition:border-color var(--p-t-micro),background var(--p-t-micro),opacity var(--p-t-std);
}
.pz-brand:hover,.pz-brand:focus-visible{border-color:var(--p-line-hi);background:var(--p-overlay)}
.pz-brand svg{width:24px;height:24px;display:block;flex:none}
.pz-brand .pz-arrow{
  font-family:var(--p-ui);font-size:15px;line-height:1;color:var(--p-text-2);
  margin-right:2px;transition:transform var(--p-t-micro) var(--p-ease);
}
.pz-brand:hover .pz-arrow{transform:translateX(-2px)}
.pz-brand .pz-word{
  font-family:var(--p-display);font-size:14px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p-text-1);
}
@media (max-width:560px){.pz-brand .pz-word{display:none}}

/* ── where you are ── */
.pz-where{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-width:0;flex:1;
  padding:0 var(--p-3);min-height:var(--p-tap);
  border:1px solid transparent;
  color:inherit;text-align:left;background:none;cursor:pointer;
  font-family:inherit;
}
.pz-where:hover,.pz-where:focus-visible{border-color:var(--p-line-hi);background:var(--p-overlay)}
.pz-where .pz-room{
  font-family:var(--p-display);font-size:15px;font-weight:500;color:var(--p-text-1);
  letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pz-where .pz-sub{
  font-size:var(--p-fs-micro);letter-spacing:var(--p-track-micro);text-transform:uppercase;
  color:var(--p-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pz-where .pz-caret{display:none}
@media (max-width:520px){.pz-where .pz-sub{display:none}}

/* ── action buttons ── */
.pz-actions{display:flex;align-items:center;gap:var(--p-1);flex:none;padding:0 2px}
.pz-act{
  width:var(--p-tap);height:var(--p-tap);flex:none;
  display:grid;place-items:center;
  border:1px solid transparent;border-radius:var(--p-r1);
  background:none;color:var(--p-text-2);cursor:pointer;
  font-family:var(--p-ui);font-size:15px;line-height:1;
  transition:color var(--p-t-micro),background var(--p-t-micro),border-color var(--p-t-micro);
}
html[data-pz-head="chip"] .pz-act{border-radius:var(--p-rp)}
.pz-act:hover,.pz-act:focus-visible{color:var(--p-text-1);background:var(--p-overlay);border-color:var(--p-line-hi)}
.pz-act[aria-pressed="true"]{color:var(--p-accent);background:var(--p-accent-soft);border-color:var(--p-accent-line)}
.pz-act svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pz-act .pz-kbd{
  position:absolute;bottom:3px;right:5px;font-family:var(--p-mono);font-size:8.5px;
  color:var(--p-text-3);pointer-events:none;
}
.pz-act{position:relative}
@media (max-width:440px){.pz-act[data-optional]{display:none}}

/* ═══ room chrome bar ══════════════════════════════════════════════════
   Generated from the room's `controls` array — the same array that feeds
   the phone remote, so publishing to a phone stops being a second job. */

.pz-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:2147481900;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--p-2);
  padding:var(--p-3) calc(var(--p-4) + var(--p-rgt)) calc(var(--p-3) + var(--p-bot)) calc(var(--p-4) + var(--p-lft));
  font-family:var(--p-ui);
  background:linear-gradient(transparent,color-mix(in srgb,var(--p-ground) 92%,transparent) 38%);
  transition:opacity var(--p-t-std) var(--p-ease),transform var(--p-t-std) var(--p-ease);
}
.pz-bar.pz-idle{opacity:0;transform:translateY(10px);pointer-events:none;visibility:hidden}

.pz-ctl{
  display:inline-flex;align-items:center;gap:var(--p-2);
  min-height:var(--p-tap);padding:0 var(--p-4);
  border:1px solid var(--p-line-hi);border-radius:var(--p-rp);
  background:color-mix(in srgb,var(--p-surface) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--p-text-2);cursor:pointer;
  font-family:inherit;font-size:var(--p-fs-ui);font-weight:500;letter-spacing:.01em;
  transition:color var(--p-t-micro),border-color var(--p-t-micro),background var(--p-t-micro),
             transform var(--p-t-micro) var(--p-ease);
  white-space:nowrap;
}
.pz-ctl:hover,.pz-ctl:focus-visible{color:var(--p-text-1);border-color:var(--p-accent-line)}
.pz-ctl:active{transform:scale(.97)}
.pz-ctl[aria-pressed="true"]{color:var(--p-accent);background:var(--p-accent-soft);border-color:var(--p-accent-line)}
.pz-ctl .pz-ico{font-size:15px;line-height:1}
.pz-ctl.pz-danger:hover{color:var(--p-bad);border-color:var(--p-bad)}

/* slider — the old rooms shipped a 3px track and a 12px thumb */
.pz-ctl.pz-range{padding:0 var(--p-4) 0 var(--p-4);gap:var(--p-3);cursor:default}
.pz-ctl.pz-range label{color:var(--p-text-3);font-size:var(--p-fs-micro);
  letter-spacing:var(--p-track-micro);text-transform:uppercase;cursor:pointer}
.pz-ctl.pz-range output{font-family:var(--p-mono);font-size:var(--p-fs-micro);
  color:var(--p-text-2);min-width:3.6ch;text-align:right}
.pz-range input[type=range]{
  -webkit-appearance:none;appearance:none;background:none;
  width:104px;height:var(--p-tap);cursor:pointer;margin:0;
}
.pz-range input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;background:var(--p-line-hi)}
.pz-range input[type=range]::-moz-range-track{
  height:4px;border-radius:2px;background:var(--p-line-hi)}
.pz-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  margin-top:-8px;background:var(--p-text-1);border:2px solid var(--p-accent);
  box-shadow:var(--p-e1);transition:transform var(--p-t-micro)}
.pz-range input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--p-accent);
  background:var(--p-text-1);box-shadow:var(--p-e1)}
.pz-range input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}

/* segmented */
.pz-seg{display:inline-flex;border:1px solid var(--p-line-hi);border-radius:var(--p-rp);
  overflow:hidden;background:color-mix(in srgb,var(--p-surface) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pz-seg button{
  min-height:var(--p-tap);padding:0 var(--p-4);border:0;background:none;
  color:var(--p-text-3);cursor:pointer;font-family:var(--p-ui);
  font-size:var(--p-fs-micro);font-weight:500;letter-spacing:var(--p-track-micro);
  text-transform:uppercase;transition:color var(--p-t-micro),background var(--p-t-micro)}
.pz-seg button:hover{color:var(--p-text-1)}
.pz-seg button[aria-pressed="true"]{color:var(--p-accent);background:var(--p-accent-soft)}

/* ═══ footer ═══════════════════════════════════════════════════════════ */

.pz-foot{
  border-top:1px solid var(--p-line);
  padding:var(--p-6) calc(var(--p-5) + var(--p-rgt)) calc(var(--p-6) + var(--p-bot)) calc(var(--p-5) + var(--p-lft));
  font-family:var(--p-ui);text-align:center;position:relative;z-index:2;
}
.pz-foot nav{display:flex;flex-wrap:wrap;gap:var(--p-2) var(--p-5);justify-content:center;margin-bottom:var(--p-4)}
.pz-foot nav a{
  color:var(--p-text-2);text-decoration:none;font-size:var(--p-fs-ui);
  min-height:var(--p-tap);display:inline-flex;align-items:center;padding:0 var(--p-1);
  transition:color var(--p-t-micro)}
.pz-foot nav a:hover,.pz-foot nav a:focus-visible{color:var(--p-text-1)}
.pz-foot p{font-size:var(--p-fs-small);color:var(--p-text-3);line-height:1.8;margin:0}
.pz-foot .pz-ver{font-family:var(--p-mono);font-size:10.5px;letter-spacing:var(--p-track-mono);
  color:var(--p-text-3);opacity:.7;margin-top:var(--p-2)}

/* ═══ sheets — help, settings ══════════════════════════════════════════
   Real dialogs. The Studio's help modal, the remote's settings sheet and
   the telemetry overlay all shipped with no role, no focus trap, no focus
   restore and (two of three) no Escape. */

.pz-scrim{
  position:fixed;inset:0;z-index:2147483000;
  background:var(--p-scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:var(--p-5);
  opacity:0;transition:opacity var(--p-t-enter) var(--p-ease);
}
.pz-scrim.pz-on{opacity:1}
.pz-sheet{
  width:min(560px,100%);max-height:min(78vh,720px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--p-surface);border:1px solid var(--p-line-hi);border-radius:var(--p-r4);
  box-shadow:var(--p-e3);font-family:var(--p-ui);color:var(--p-text-2);
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform var(--p-t-enter) var(--p-ease),opacity var(--p-t-enter) var(--p-ease);
}
.pz-scrim.pz-on .pz-sheet{transform:none;opacity:1}
.pz-sheet header{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--p-3);
  padding:var(--p-4) var(--p-4) var(--p-4) var(--p-5);
  background:var(--p-surface);border-bottom:1px solid var(--p-line);
}
.pz-sheet header h2{
  flex:1;margin:0;font-family:var(--p-display);font-size:var(--p-fs-head);
  font-weight:500;color:var(--p-text-1)}
.pz-sheet .pz-body{padding:var(--p-5)}
.pz-sheet h3{
  font-family:var(--p-ui);font-size:var(--p-fs-micro);font-weight:600;
  letter-spacing:var(--p-track-micro);text-transform:uppercase;color:var(--p-text-3);
  margin:var(--p-5) 0 var(--p-3);display:flex;align-items:center;gap:var(--p-3)}
.pz-sheet h3:first-child{margin-top:0}
.pz-sheet h3::after{content:"";flex:1;height:1px;background:var(--p-line)}
.pz-sheet p{font-size:var(--p-fs-body);line-height:1.7;margin:0 0 var(--p-3)}
.pz-sheet p:last-child{margin-bottom:0}
.pz-sheet a{color:var(--p-accent)}

.pz-keys{display:grid;grid-template-columns:auto 1fr;gap:var(--p-2) var(--p-4);align-items:baseline}
.pz-keys dt{justify-self:start}
.pz-keys dd{margin:0;font-size:var(--p-fs-ui);color:var(--p-text-2)}
kbd.pz-key{
  font-family:var(--p-mono);font-size:11px;line-height:1;
  border:1px solid var(--p-line-hi);border-bottom-width:2px;border-radius:6px;
  padding:5px 8px;color:var(--p-text-1);background:var(--p-raised);display:inline-block}

.pz-row{display:flex;align-items:center;gap:var(--p-4);
  padding:var(--p-3) 0;border-bottom:1px solid var(--p-line)}
.pz-row:last-child{border-bottom:0}
.pz-row .pz-lab{flex:1;min-width:0}
.pz-row .pz-lab b{display:block;color:var(--p-text-1);font-size:var(--p-fs-ui);font-weight:500}
.pz-row .pz-lab span{display:block;color:var(--p-text-3);font-size:var(--p-fs-small);line-height:1.5}

.pz-sw{
  width:52px;height:31px;flex:none;border-radius:var(--p-rp);cursor:pointer;
  border:1px solid var(--p-line-hi);background:var(--p-raised);position:relative;
  transition:background var(--p-t-micro),border-color var(--p-t-micro)}
.pz-sw::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:var(--p-text-3);transition:transform var(--p-t-std) var(--p-ease),background var(--p-t-micro)}
.pz-sw[aria-checked="true"]{background:var(--p-accent-soft);border-color:var(--p-accent-line)}
.pz-sw[aria-checked="true"]::after{transform:translateX(21px);background:var(--p-accent)}

/* ═══ room switcher ════════════════════════════════════════════════════
   New. Every journey used to be room → hub → room: two page loads and a
   scroll, for the action a live operator repeats more than any other. */

.pz-switch .pz-sheet{width:min(880px,100%);max-height:min(84vh,860px)}
.pz-filter{
  width:100%;min-height:var(--p-tap);padding:0 var(--p-4);
  border:1px solid var(--p-line-hi);border-radius:var(--p-r1);
  background:var(--p-raised);color:var(--p-text-1);
  font-family:var(--p-ui);font-size:var(--p-fs-body);outline:none}
.pz-filter::placeholder{color:var(--p-text-3)}
.pz-filter:focus-visible{border-color:var(--p-accent)}

.pz-grid{display:grid;gap:var(--p-2);grid-template-columns:repeat(auto-fill,minmax(184px,1fr));margin-bottom:var(--p-2)}
.pz-tile{
  display:flex;align-items:center;gap:var(--p-3);text-align:left;text-decoration:none;
  min-height:60px;padding:var(--p-3) var(--p-4);
  border:1px solid var(--p-line);border-radius:var(--p-r2);
  background:var(--p-raised);color:var(--p-text-2);cursor:pointer;font-family:inherit;
  transition:border-color var(--p-t-micro),background var(--p-t-micro),transform var(--p-t-micro) var(--p-ease)}
.pz-tile:hover,.pz-tile:focus-visible{border-color:var(--p-accent-line);background:var(--p-overlay)}
.pz-tile[aria-current="page"]{border-color:var(--p-accent);background:var(--p-accent-soft)}
.pz-tile .pz-ico{font-size:19px;line-height:1;flex:none;width:24px;text-align:center}
.pz-tile .pz-tx{min-width:0}
.pz-tile b{display:block;font-size:var(--p-fs-ui);font-weight:500;color:var(--p-text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-tile span{display:block;font-size:var(--p-fs-small);color:var(--p-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-empty{color:var(--p-text-3);font-size:var(--p-fs-body);text-align:center;padding:var(--p-6) 0}

/* ═══ toast — with a live region, which nothing in the old suite had ═══ */

.pz-toast{
  position:fixed;left:50%;bottom:calc(var(--p-7) + var(--p-bot));transform:translate(-50%,12px);
  z-index:2147483100;max-width:min(440px,88vw);
  padding:var(--p-3) var(--p-5);border-radius:var(--p-rp);
  background:var(--p-overlay);border:1px solid var(--p-line-hi);box-shadow:var(--p-e2);
  color:var(--p-text-1);font-family:var(--p-ui);font-size:var(--p-fs-ui);text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--p-t-std),transform var(--p-t-std) var(--p-ease)}
.pz-toast.pz-on{opacity:1;transform:translate(-50%,0)}

/* ═══ skip link ════════════════════════════════════════════════════════ */

.pz-skip{
  position:fixed;left:var(--p-3);top:calc(var(--p-3) + var(--p-top));z-index:2147483200;
  transform:translateY(calc(-100% - 24px));
  padding:var(--p-3) var(--p-4);border-radius:var(--p-r1);
  background:var(--p-overlay);border:1px solid var(--p-accent);color:var(--p-text-1);
  font-family:var(--p-ui);font-size:var(--p-fs-ui);text-decoration:none;
  transition:transform var(--p-t-std) var(--p-ease)}
.pz-skip:focus{transform:none}

/* ═══ doc pages ════════════════════════════════════════════════════════ */

body.pz-doc{
  background:var(--p-ground);color:var(--p-text-2);
  font-family:var(--p-ui);font-size:var(--p-fs-body);line-height:1.75;
  padding:0 calc(var(--p-5) + var(--p-lft)) 0 calc(var(--p-5) + var(--p-rgt));
  -webkit-font-smoothing:antialiased}
body.pz-doc main{max-width:720px;margin:0 auto;padding:var(--p-7) 0 var(--p-7)}
body.pz-doc h1{font-family:var(--p-display);font-weight:300;font-size:var(--p-fs-title);
  color:var(--p-text-1);letter-spacing:.005em;margin:0 0 var(--p-2)}
body.pz-doc h2{font-family:var(--p-display);font-weight:500;font-size:var(--p-fs-head);
  color:var(--p-text-1);margin:var(--p-7) 0 var(--p-3)}
body.pz-doc p,body.pz-doc li{color:var(--p-text-2)}
body.pz-doc p+p{margin-top:var(--p-3)}
body.pz-doc .lede{font-size:17px;color:var(--p-text-1);font-weight:300}
body.pz-doc ul,body.pz-doc ol{margin:var(--p-3) 0 0 var(--p-5)}
body.pz-doc li{margin-bottom:var(--p-2)}
body.pz-doc b{color:var(--p-text-1);font-weight:600}
body.pz-doc a{color:var(--p-accent)}
body.pz-doc code{font-family:var(--p-mono);font-size:13px;color:#bcd2ff;
  background:var(--p-accent-soft);border:1px solid var(--p-line);padding:1px 6px;border-radius:6px}
body.pz-doc table{width:100%;border-collapse:collapse;margin-top:var(--p-4);font-size:14.5px}
body.pz-doc th,body.pz-doc td{text-align:left;padding:var(--p-3);border-bottom:1px solid var(--p-line);
  color:var(--p-text-2)}
body.pz-doc th{color:var(--p-text-1);font-weight:600;font-size:var(--p-fs-micro);
  letter-spacing:var(--p-track-micro);text-transform:uppercase}
body.pz-doc .meta{margin-top:var(--p-7);padding-top:var(--p-4);border-top:1px solid var(--p-line);
  font-size:var(--p-fs-small);color:var(--p-text-3)}

@media print{.pz-head,.pz-bar,.pz-foot,.pz-toast,.pz-scrim,.pz-skip{display:none!important}}