/* Demo-page scaffolding — NOT part of the library contract.
 *
 * Shared by the six example pages so the pieces that only exist to show
 * components off (static modal stages, inline previews of floating
 * surfaces, the top bar's wrapping) live in one place instead of six
 * drifting copies. Everything an app would really build is a core
 * component; see CONTRACT.md. Unlayered, so it sits above the theme's
 * `@layer ui` bundle. */
* { box-sizing: border-box; }

/* The example apps' top bar: brand, the cross-page nav, then (via .push)
   the theme picker and app controls. On touch tiers core puts the nav on
   its own scrolling line (core/layout.css). */
.demo-topbar { gap: 0.75rem; }
.demo-topbar .nav-brand { white-space: nowrap; }
.demo-topbar .btn { flex-shrink: 0; }
/* The theme picker would size to its longest option ("Weyland-Yutani —
   MU/TH/UR (green)"); capped so the bar stays on one line. */
.demo-topbar #theme-picker { max-width: 11rem; text-overflow: ellipsis; }

/* A fixed box that shows a modal in place, so screenshots capture it
   without interaction. The "Open dialog" button beside each one opens the
   real top-layer modal. */
.demo-stage {
  position: relative;
  min-height: var(--demo-stage-height, 15rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.demo-stage > .modal-overlay { position: absolute; }

/* Floating surfaces (popover, context menu, dropdown, toast region) drawn
   in the page flow for review instead of floating. */
.demo-inline { position: static; }
.demo-toasts { position: static; max-width: 22rem; }