/* Demo split-view shell: 50:50 scene + Dashboard port.
 *
 * Landscape (aspect >= 1:1, the 16:9 case): side-by-side halves, scene left,
 * Dashboard right. Portrait: 50:50 stack, scene on top, Dashboard below.
 * The panes are independent: the scene pane owns the WebGL canvas (+ orbit
 * gestures, confined to the canvas by OrbitControls' own touch-action), the
 * Dashboard pane is a separate scroll container hosting #screen-container.
 * min-width/min-height 0 lets both panes actually shrink to their half. */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #111318;
}

#demo-split {
  display: flex;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 1/1) {
  #demo-split {
    flex-direction: row;
  }
  #scene-pane {
    width: 66.666%;
    height: 100%;
  }
  #dashboard-pane {
    width: 33.333%;
    height: 100%;
  }
}

@media (max-aspect-ratio: 1/1) {
  #demo-split {
    flex-direction: column;
  }
  #scene-pane,
  #dashboard-pane {
    width: 100%;
    height: 50%;
  }
}

#scene-pane {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

#scene-pane canvas {
  display: block;
}

#dashboard-pane {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-width: 0;
  min-height: 0;
  /* border-box is NOT inherited from .db-port's scoped reset (the pane is
     its parent, outside the scope): without it the 16px side padding adds
     OUTSIDE width:100% in portrait, pushing the pane 32px past the viewport
     while body overflow hides it -- the "missing right padding". Landscape
     survives only because row-axis flex-shrink absorbs the extra width;
     column layout has no cross-axis shrink. */
  box-sizing: border-box;
  /* The Dashboard section renders the aurora background full-bleed, with
     breathing room between the page/pane edges and the UI column. The
     accordion pills' 21px overhang still clips at the pane edge via
     .db-port's own overflow-x rule. */
  background: var(--aurora-bg, #0a0a0a);
  padding: 12px 16px 24px;
}

/* Demo scope reductions: no bridge-setup flow exists on a static page, so
   the Bridge accordion's Change Bridge button is hidden, not stubbed. */
.db-port #db-change-bridge {
  display: none;
}

/* Dropdown triggers inherit white-space:nowrap with no shrink constraint,
   so long labels ("Zone front-left (Front Left)") spill past the field at
   narrow pane widths and swallow the pane's right padding. Ellipsize the
   label instead (chevron keeps its footprint); open menus keep full text,
   clipped by their own overflow rule. Demo-owned override, not a vendored
   edit -- upstream has the same latent issue on narrow viewports. */
.db-port .dropdown-trigger {
  overflow: hidden;
}

/* Same flex-item floor as web/ui's .dropdown root: without min-width: 0 the
   root keeps its content width inside flex field wrappers and the label
   ellipsis below never engages. */
.db-port .dropdown {
  min-width: 0;
  max-width: 100%;
}
.db-port .dropdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Demo scope: no capture devices exist on a static page, so the whole top
   tier (Monitor picker / sink field) is hidden, not dimmed -- same
   demo-owned override pattern as #db-change-bridge above. Logo + Stop live
   in the top-bar slot and are unaffected. */
.db-port .db-top-tier {
  display: none;
}

/* Repo badge (Aurora-9mq): RockyRoad's badge-to-repo pattern -- a rounded
   pill overlaid at the bottom of the scene pane, horizontally centered the
   way the dashboard brand mark is. bottom uses the top bar's own top
   padding token (vendor shell.css), so the pill sits as far up from the
   scene bottom as the logo sits down from its page top. Own dark chrome so
   OS light/dark never touches it. */
#repo-pill {
  position: absolute;
  left: 50%;
  bottom: var(--aurora-space-4);
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font: 14px system-ui, sans-serif;
  padding: 8px 16px;
  color: #e8eaf0;
  background: rgba(20, 22, 28, 0.75);
  border: 1px solid #4a4f5c;
  border-radius: 999px;
  text-decoration: none;
}
#repo-pill svg {
  fill: currentColor;
}
#repo-pill:hover {
  background: rgba(32, 35, 44, 0.9);
  color: #ffffff;
  text-decoration: underline;
}
#repo-pill:focus-visible {
  outline: 2px solid #e8eaf0;
  outline-offset: 2px;
}