/* Public demo overrides — loaded AFTER the product's style.css so the panel
   files stay byte-identical to what ships on the venue kiosks.
   Two things a browser visitor needs that a wall-mounted tablet does not:
   a visible mouse pointer, and the freedom to pinch/rotate. */

/* The kiosk hides the cursor (`* { cursor: none }`) because nobody points a
   mouse at a wall panel. On a laptop that leaves the visitor clicking blind. */
@media (hover: hover) and (pointer: fine) {
  * { cursor: auto; }

  a,
  button,
  .mod,
  .scene,
  .btn,
  .chip,
  .quick button,
  .hot,
  .hotspot,
  .floorlink,
  .zone select,
  .src select,
  select,
  [role="button"],
  [onclick] { cursor: pointer; }

  input[type="range"] { cursor: grab; }
  input[type="range"]:active { cursor: grabbing; }
  input[type="text"],
  input[type="password"],
  textarea { cursor: text; }
  [disabled],
  .is-disabled { cursor: not-allowed; }
}

/* Rotation: the layout is width-driven and uses height:100%, so it reflows on
   its own. These two just make sure a rotate never leaves a short viewport
   with content trapped behind the fold. */
html, body { min-height: 100%; }
@media (max-height: 520px) and (orientation: landscape) {
  .content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Phone held upright. The floor plan is locked to the room's real proportions
   (the USC plan is ~2.3:1), so in a narrow column it can only get so tall —
   the module sat at the top with half a screen of black under it. Center the
   block instead, and point at the rotate, where the plan actually gets big.
   `safe center` so a tall tab (Games) falls back to top-aligned rather than
   centering itself off the top edge. */
@media (max-width: 560px) and (orientation: portrait) {
  .content {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
  /* fixed, so it stays out of the body grid that lays out rail + content */
  body::after {
    content: "Rotate for the full floor plan";
    position: fixed;
    left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .28);
    pointer-events: none;
  }
}

/* Phone browsers eat the bottom of the panel. The product sets `height:100%`,
   which Chrome on Android resolves against the LARGE viewport (address bar
   hidden) — so when the bar IS showing, the last ~56px of the panel sit under
   it, and the kiosk's `overflow:hidden` means there is no way to scroll to them.

   `svh` (SMALL viewport height) is the right unit for a panel that never
   scrolls: it is the height with the browser bars SHOWN, so nothing is ever cut
   off, and unlike `dvh` the layout does not jump around while a bar animates.
   Once the maximize button takes it fullscreen there are no bars at all, and
   svh == the whole screen anyway.
   The Pi kiosk window is a fixed 800x480, where svh and % are the same number
   — it renders identically. */
@supports (height: 100svh) {
  html, body { height: 100svh; }
}

/* The maximize button sits in the header and borrows .gear, so it inherits each
   venue's skin. Only the icon box needs saying. */
.demo-full { display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* iOS-only fallback line (see demo-api.js): iPhone Safari has no element
   fullscreen, so the button explains Add to Home Screen instead of doing
   nothing. Fixed + pointer-events:none so it never eats a tap on the panel. */
.demo-hint {
  position: fixed; z-index: 50; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  max-width: min(92vw, 420px); text-align: center;
  padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--text-dim); font-size: 13px; line-height: 1.35;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  transition: opacity .5s ease;
}
.demo-hint.out { opacity: 0; }