/* Wide-stage STRUCTURE (public_layout.js sets body.gws-wide / body.gws-mid and the size vars). Without either class this file is
   inert: #gws_stage is a plain block and #gws_info is hidden, i.e. the previous layout (stack < 820 px, theater overlay with
   small wrist insets) is untouched. Colours, fonts and motion are NOT here: they are tokens in public_theme.css.          */
#gws_info, #gws_reach, #gws_stage > .lbox { display: none; }
body.gws-wide main, body.gws-mid main { padding: 0 16px !important; gap: 0 !important; }
body.gws-wide #gws_stage, body.gws-mid #gws_stage {
  position: relative; display: grid; grid-template-columns: 100%;
  grid-template-rows: var(--top-h) 1fr var(--bot-h); row-gap: var(--gws-gap, 10px); align-items: center;
  min-height: calc(100vh - var(--gws-s0, 0px)); box-sizing: border-box; }   /* HUD bands at the frame edges, the row centred between them */
/* row 1: the HUD top band (#gws_top, moved here by public_layout.js) */
body.gws-wide #gws_stage > #gws_top, body.gws-mid #gws_stage > #gws_top {
  grid-row: 1; display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: var(--top-h);
  padding: 0; margin: 0; border: 0; background: none; position: relative; z-index: 10; box-sizing: border-box; flex-wrap: nowrap; }
#gws_top .hud-l, #gws_top .hud-r, #gws_top .actions { display: contents; }             /* narrow: the old flex-wrap status bar */
body.gws-wide #gws_top .hud-l, body.gws-mid #gws_top .hud-l, body.gws-wide #gws_top .hud-r, body.gws-mid #gws_top .hud-r {
  display: flex; align-items: center; gap: 8px; min-width: 0; }
body.gws-wide #gws_top .hud-r, body.gws-mid #gws_top .hud-r { justify-content: flex-end; }
body.gws-wide #gws_top .actions, body.gws-mid #gws_top .actions { display: flex; gap: 6px; }
body.gws-wide #gws_top .sp, body.gws-mid #gws_top .sp { display: none; }
body.gws-wide #gws_top .timer, body.gws-mid #gws_top .timer { align-self: start; }
/* row 2: [LEFT wrist] [TOP] [RIGHT wrist], wrists vertically centred on the TOP view */
body.gws-wide #views, body.gws-mid #views {
  grid-row: 2; display: grid; grid-template-columns: var(--gws-wr) var(--gws-side) var(--gws-wr); grid-template-rows: var(--gws-side);
  gap: var(--gws-gap, 10px); align-items: center; justify-content: center; position: relative; inset: auto; }
body.gws-wide #views figure, body.gws-mid #views figure { position: relative; inset: auto; width: auto; height: var(--gws-wr); margin: 0; box-sizing: border-box; }
body.gws-wide #views figure:nth-child(1), body.gws-mid #views figure:nth-child(1) { grid-column: 1; grid-row: 1; }            /* LEFT wrist */
body.gws-wide #views figure:nth-child(2), body.gws-mid #views figure:nth-child(2) { grid-column: 2; grid-row: 1; height: var(--gws-side); }   /* TOP */
body.gws-wide #views figure:nth-child(3), body.gws-mid #views figure:nth-child(3) { grid-column: 3; grid-row: 1; }            /* RIGHT wrist */
body.gws-wide #views figure canvas, body.gws-mid #views figure canvas { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
/* row 3: the HUD bottom band (arm selector + controls bar); the spectator banner replaces it while watching */
body.gws-wide #gws_info, body.gws-mid #gws_info {
  grid-row: 3; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; column-gap: 14px; row-gap: 4px;
  height: var(--bot-h); box-sizing: border-box; position: relative; z-index: 10; }
#gws_info .arms { display: none; gap: 4px; }
body.gws-arms-on #gws_info .arms { display: flex; }
#gws_info .gi_priv { flex-basis: 100%; text-align: center; }
#gws_info .gi_priv:empty { display: none; }
body.gws-spectate #gws_info .arms, body.gws-spectate #gws_info .ctrl, body.gws-spectate #gws_info .gi_priv { display: none !important; }
body.gws-wide #gws_info #gws_spec, body.gws-mid #gws_info #gws_spec { margin: 0; position: relative; }
#gws_info .ctrl:empty { display: none; }
body.gws-simple #gws_info .slot.opt, body.gws-simple #gws_info .ctrl-note.opt, body.gws-simple #gws_info .opt + .sep { display: none; }   /* optional slots: >= 1240 px only */
@media (min-width: 1240px) { body.gws-simple #gws_info .slot.opt { display: flex; } body.gws-simple #gws_info .ctrl-note.opt { display: block; } }
/* transient items on the video */
body.gws-wide #gws_reach, body.gws-mid #gws_reach { display: flex; position: absolute; z-index: 12; }
body.gws-wide #gws_stage > .lbox, body.gws-mid #gws_stage > .lbox { display: block; }
body.gws-wide #pip, body.gws-mid #pip { position: absolute; z-index: 11; margin: 0; box-sizing: border-box; }
body.gws-wide #pip img, body.gws-mid #pip img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
body.gws-wide #pip .hud, body.gws-mid #pip .hud, body.gws-wide #pipfps, body.gws-mid #pipfps { display: none; }
body.gws-wide #pip .cap, body.gws-mid #pip .cap { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the top band replaces the bar's one-line hint + privacy line (ids stay in the DOM for the monitor) */
body.gws-wide #gws_hint, body.gws-mid #gws_hint, body.gws-wide #gws_priv, body.gws-mid #gws_priv { display: none !important; }
/* mouse overlay: the pill / hint move to the bottom band (arm selector + controls bar) */
body.gws-wide .mz .mz-pill, body.gws-mid .mz .mz-pill, body.gws-wide .mz .mz-hint, body.gws-mid .mz .mz-hint { display: none; }

/* ---- /embed theater, wide iframe: the same stage; the theater's own overlay pill / time / buttons give way to the bands ---- */
body.gws-theater.gws-wide #gws_stage { position: absolute; inset: 0; padding: 0 16px; box-sizing: border-box; min-height: 0; height: 100%; }
body.gws-theater.gws-wide #gws_ov .pill, body.gws-theater.gws-wide #gws_ov .time, body.gws-theater.gws-wide #gws_ov .btns { display: none !important; }
body.gws-theater #gws_details { display: none !important; }