/* The page half of src/lib/edge-to-edge.js, applied only where iOS Safari
   overlays its chrome on the page. Why any of this is needed, and what the
   published variables mean: docs/ios-safari-edge-to-edge.md. */

/* Layout must not see the wrapper off the staged path. */
#hyper-stage {
  display: contents;
}

html.hyper-edge-to-edge {
  /* Anything that lengthens the document unpins the runway. */
  height: var( --hyper-stage-height );
  overflow-y: scroll;
}

html.hyper-edge-to-edge body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* A perspective on an ancestor re-anchors the fixed menu button. */
  perspective: none;
}

html.hyper-edge-to-edge #hyper-stage {
  display: block;
  /* Positioned, or a-scene's inset resolves against the visible viewport. */
  position: relative;
  height: 100%;
  /* Drags belong to the scene; a page scroll here unpins the runway. */
  touch-action: none;
}

/* A drag anywhere but the scene or a list moved the document too: the
   furniture over the scene (a heading, the category row, a HUD) is not a
   scroller, so a vertical drag on it scrolled the page off the runway and the
   pin pulled it back every frame until the throw ran out. touch-action is the
   intersection up to the nearest scroller, so none here reaches only what is
   not inside one; the lists scroll as before, and do not hand a scroll that
   hits their end on to the page. */
html.hyper-edge-to-edge,
html.hyper-edge-to-edge body {
  touch-action: none;
}

html.hyper-edge-to-edge {
  overscroll-behavior: none;
}

html.hyper-edge-to-edge nav .menu-container,
html.hyper-edge-to-edge #cardList,
html.hyper-edge-to-edge #categoryList {
  overscroll-behavior: contain;
}

html.hyper-edge-to-edge #hyper-stage a-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* !important, or the canvas's inline width/height wins over the stage. */
html.hyper-edge-to-edge #hyper-stage .a-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Fixed or sticky on an edge of the layout viewport stops the page compositing
   into the strip beyond it — that is the flat band. Absolute plus a negative
   margin of one runway puts the box back on the edge it asked for. */
html.hyper-edge-to-edge #sound,
html.hyper-edge-to-edge #information,
html.hyper-edge-to-edge #controlPanel {
  position: absolute;
  margin-bottom: calc( -1 * var( --hyper-runway ) );
}

/* The card list reaches the bottom of the document instead, so cards pass under
   the address bar; the panel takes the same amount as height
   (aframe-hypericc-cardlist.css) and its top does not move. */
html.hyper-edge-to-edge #controlPanel {
  margin-bottom: calc( -1 * ( var( --hyper-runway ) + var( --hyper-below-viewport ) ) );
}

/* The tours' floor map sits 2em above the visible strip's bottom, which on a
   staged page is already the address bar's top edge: the gap read as empty
   space. It comes down to 8px — still clear of the edge, since a fixed box
   touching it would stop the page compositing into the band below. */
html.hyper-edge-to-edge body > .map {
  bottom: 8px;
}

/* Fixed is clipped to the visible strip, so an overlay that covers the screen
   has to span the document. */
html.hyper-edge-to-edge #loading,
html.hyper-edge-to-edge nav .menu {
  position: absolute;
  top: 0;
  height: var( --hyper-stage-height );
}

/* The language bar is one box from the top of the screen down to the bottom
   of the menu toggle's row: its blur fills the band under the status bar and
   its links sit beside the toggle (fixed at the top of the visible strip,
   navigation.css). It is absolute on the menu, which is absolute, so it does
   not touch an edge as a fixed or sticky box (that stops the page compositing
   into the band) and does not move when the list scrolls; the container is
   static so the menu, not the scroller, is the bar's containing block. The
   list starts below the bar and scrolls up under it. The list keeps its own
   inertia and bounce: taking the bounce away made the menu stop dead under
   the finger. */
html.hyper-edge-to-edge nav .menu-container {
  position: static;
  box-sizing: border-box;
  height: 100%;
  padding-top: calc( var( --hyper-runway ) + var( --hyper-menu-bar ) );
  padding-bottom: var( --hyper-below-viewport );
}

html.hyper-edge-to-edge nav #topBar {
  position: absolute;
  top: 0;
  height: calc( var( --hyper-runway ) + var( --hyper-menu-bar ) );
  padding-top: calc( var( --hyper-runway ) + 12px );
}

/* #topBar's height on a phone (navigation.css), the only width staged. */
html.hyper-edge-to-edge {
  --hyper-menu-bar: 48px;
}

/* Drawn from the canvas's box, so they are staged with it; the two that place
   from its position measure from their own origin (orbit-labels.js,
   pose-presence.js). */
html.hyper-edge-to-edge #work-labels,
html.hyper-edge-to-edge #orbit-labels-layer,
html.hyper-edge-to-edge #pose-presence-layer {
  position: absolute;
  top: 0;
  bottom: auto;
  height: var( --hyper-stage-height );
}