/* orbit-ui-overrides.css — extracted from orbit-ui.html inline <style>.
   Demo-stage neutralization (contain absolute/fixed canonical classes),
   view-switch + flipbook/canon view layout, perf rules. Shared by
   orbit-ui.html (legacy) and workbench.html (data-driven v2). */

body { overflow: auto; }

  /* ── orb-dropdown · moved to core orbit-ui.css (so every product, not only Relay, gets it). ── */
  /* ── Stage isolation · contain absolute/fixed canonical demos within their card stage. ── */
  /*    transform creates a containing block so any position:fixed canonical class       */
  /*    (scrims, backdrops, fullscreen overlays) is contained to the stage, not the     */
  /*    viewport.                                                                        */
  .orb-ui-stage { position: relative; isolation: isolate; overflow: hidden; transform: translateZ(0); contain: layout paint; min-height: 60px; }
  /* Lock the catalog column · prevent any batch-10 demo from collapsing the article width or floating siblings beside it. */
  .orb-ui-card { display: block !important; width: 100% !important; float: none !important; clear: both !important; }
  .orb-ui-stage > * { position: relative; }
  .orb-ui-stage [class^="orb-"][style*="position:fixed"],
  .orb-ui-stage [class^="orb-"][style*="position:absolute"] { position: relative !important; }
  /* ── Neutralize 46 canonical full-screen overlays inside catalog stages — so ── */
  /*    scrims / backdrops / vignettes don't escape and cover the whole page.   */
  .orb-ui-stage .orb-app,
  .orb-ui-stage .orb-auth-root,
  .orb-ui-stage .orb-auth-vignette,
  .orb-ui-stage .orb-cmdk-backdrop,
  .orb-ui-stage .orb-cmdp,
  .orb-ui-stage .orb-constellation,
  .orb-ui-stage .orb-desk-master,
  .orb-ui-stage .orb-drawer-backdrop,
  .orb-ui-stage .orb-handoff-flash,
  .orb-ui-stage .orb-iot-scrim,
  .orb-ui-stage .orb-modal-backdrop,
  .orb-ui-stage .orb-orbit,
  .orb-ui-stage .orb-orbit-bg,
  .orb-ui-stage .orb-painting-nebula,
  .orb-ui-stage .orb-power-scrim,
  .orb-ui-stage .orb-scan,
  .orb-ui-stage .orb-scene-dim,
  .orb-ui-stage .orb-settings-backdrop,
  .orb-ui-stage .orb-start-scrim,
  .orb-ui-stage .orb-tray-scrim,
  .orb-ui-stage .orb-video-takeover,
  .orb-ui-stage .orb-wake-glow,
  .orb-ui-stage .orb-wall-stage {
    position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; min-height: 120px;
    z-index: auto !important; pointer-events: auto !important;
  }
  /* Astra mini's ::after pseudo overlay also escapes — neutralize the mini itself */
  .orb-ui-stage .orb-astra-mini { position: relative !important; }
  .orb-ui-stage .orb-astra-mini::after { content: none !important; }
  /* ── Static popover demos · neutralize position:fixed/absolute + display:none so surfaces render in-flow inside the orb-ui-stage cards. ── */
  /*    Excludes [data-card="orb-topbar"] so the LIVE assembled topbar's       */
  /*    real search dropdown / popovers retain their canonical absolute        */
  /*    positioning when shell.js fires them.                                  */
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-menu,
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-notif-panel,
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-tenant-menu,
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-chat-panel,
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-astra-panel,
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-search-dropdown {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    display: block !important;
    transform: none !important;
  }
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-notif-panel { display: flex !important; }
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-chat-panel { display: flex !important; max-height: none !important; }
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-search-dropdown { width: 100% !important; max-width: 380px; max-height: none !important; }
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-menu,
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-tenant-menu { width: 100%; max-width: 320px; }
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-notif-panel { width: 100%; max-width: 380px; max-height: none !important; }
  /* Static demo of the inline search wrapper · let the input expand */
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-search-inline.is-demo { width: 100% !important; max-width: 380px; background: var(--2); border-color: var(--10); }
  .orb-ui-card:not([data-card="orb-topbar"]) .orb-ui-stage .orb-search-inline.is-demo .orb-search-input { width: 100% !important; padding: 0 12px 0 0 !important; }
  /* ── Backdrop family · scene / scene-dim / scene-layer / scene-switcher / starfield are position:fixed;inset:0 in their host surfaces. */
  /*    Inside a catalog demo stage they escape the card and paint a full-viewport overlay across the whole catalog — contain them. ── */
  .orb-ui-stage .scene,
  .orb-ui-stage .scene-dim,
  .orb-ui-stage .scene-layer,
  .orb-ui-stage .scene-switcher,
  .orb-ui-stage #starfield,
  .orb-ui-stage [id="starfield"] {
    position: static !important;
    inset: auto !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    width: 100% !important; height: 100% !important;
    z-index: auto !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* scene/scene-dim are pure gradient backdrops — give the demo a finite box so the gradient is visible but bounded */
  .orb-ui-stage .scene,
  .orb-ui-stage .scene-dim,
  .orb-ui-stage .scene-layer { min-height: 120px; border-radius: var(--r-md); border: 1px solid var(--5); }
  /* ── ID collisions · surface backdrops use bare ids (#scene/#scene-dim/#starfield) that pin position:fixed;inset:0. */
  /*    A catalog card or demo that happens to reuse one of those ids must NEVER escape the document flow. ── */
  .orb-main #scene, .orb-main #scene-dim, .orb-main #starfield,
  .orb-ui-main #scene, .orb-ui-main #scene-dim, .orb-ui-main #starfield {
    position: static !important; inset: auto !important;
    width: auto !important; height: auto !important;
    z-index: auto !important; pointer-events: auto !important;
  }
  .ui-side { background: rgba(0,0,0,0.5); border-right: 1px solid var(--5); padding: 18px 12px; position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; align-self: start; }
  .ui-side h3 { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--40); padding: 12px 8px 6px; }
  .ui-side a { display: block; padding: 6px 10px; font-family: var(--f-sans); font-size: 12px; color: var(--80); text-decoration: none; border-radius: var(--r-sm); text-shadow: none; }
  .ui-side a:hover { background: var(--4); color: var(--100); }
  .ui-side a.active { background: var(--5); color: var(--100); }
  .is-primary { background: var(--100); color: var(--inv-100); border-color: var(--100); }
  .is-primary:hover { background: var(--100); filter: brightness(1.08); }
  /* ── Workbench views · the left icon RAIL switches top-level views; .ui-side is the within-view nav ── */
  /* panels share grid column 2 (inventory) or span full width (flipbook/canon); only the active one shows */
  .orb-ui-flipbook { grid-column: 2; grid-row: 1; min-width: 0; }
  .orb-ui-canon { grid-column: 2; grid-row: 1; min-width: 0; }
  /* flipbook + canon collapse the section nav and use the full width */
  .orb-ui-shell.view-flipbook, .orb-ui-shell.view-canon { grid-template-columns: 1fr; }
  .orb-ui-shell.view-flipbook .ui-side, .orb-ui-shell.view-canon .ui-side { display: none; }
  .orb-ui-shell.view-flipbook .orb-ui-flipbook, .orb-ui-shell.view-canon .orb-ui-canon { grid-column: 1 / -1; }
  /* flipbook view = full height, no page scroll; station scrolls internally */
  .orb-ui-shell.view-flipbook { height: calc(100vh - 56px); min-height: 0; overflow: hidden; }
  .orb-ui-shell.view-flipbook .orb-ui-flipbook { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
  .orb-ui-shell.view-flipbook #orb-fb-mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .orb-ui-canon { padding: 32px 40px 80px; }
  /* ── Perf · the catalog holds 600+ live component demos (many with animating
     canvases). content-visibility skips layout/paint for offscreen cards until
     they scroll near the viewport — kills the timeouts/jank on this heavy page.
     contain-intrinsic-size reserves an estimated height so the scrollbar is stable. */
  .orb-ui-main .orb-ui-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }
}