/*
 * Stable first layout for iPad/WKWebView.
 * Container sizing avoids a provisional 100vw/100vh being held until the
 * device rotates, while preserving split-view and Stage Manager support.
 */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
}

html body main.app-shell,
html body main.app-shell > .map-stage {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--mymappi-layout-height, 100dvh) !important;
  min-height: var(--mymappi-layout-height, 100dvh) !important;
}

/* Full-screen surfaces must follow the repaired stage as well. WKWebView can
   keep a provisional 100vw after launch even once the shell has reached its
   real iPad width, which leaves viewers and their scrims covering only part
   of the live map. */
html body main.app-shell > .map-stage > .life-chapter-viewer {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--mymappi-layout-height, 100%) !important;
  max-height: var(--mymappi-layout-height, 100%) !important;
}

/* The Memory Capsule sheet is also its own dimming backdrop. Keep that shared
   surface on the stage's repaired dimensions, then keep its tablet contents
   parent-relative so an old viewport measurement cannot narrow either layer. */
html body main.app-shell > .map-stage > .memory-bottom-sheet.open {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--mymappi-layout-height, 100%) !important;
  max-height: var(--mymappi-layout-height, 100%) !important;
}

@media (min-width: 721px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  html body main.app-shell > .map-stage > .memory-bottom-sheet.open > #memorySheetContent:has(> .full-memory-capsule) {
    box-sizing: border-box !important;
    width: min(790px, 100%) !important;
    max-width: min(790px, 100%) !important;
    min-width: 0 !important;
    max-height: calc(
      var(--mymappi-layout-height, 100%)
      - max(14px, env(safe-area-inset-top))
      - max(14px, env(safe-area-inset-bottom))
    ) !important;
  }

  html body main.app-shell > .map-stage > .memory-bottom-sheet.open > #memorySheetContent > .full-memory-capsule {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(
      var(--mymappi-layout-height, 100%)
      - max(14px, env(safe-area-inset-top))
      - max(14px, env(safe-area-inset-bottom))
    ) !important;
  }
}

html body main.app-shell > .map-stage > #map,
html body main.app-shell > .map-stage > #map .maplibregl-canvas-container,
html body main.app-shell > .map-stage > #map .maplibregl-canvas {
  max-width: 100% !important;
}

html body main.app-shell > .map-stage > #map {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Keep the authored chapter atmosphere while avoiding two large animated
   GPU filters competing with MapLibre during an iPad arrival. */
@media (min-width: 721px) and (hover: none) and (pointer: coarse) {
  html body main.app-shell > section.map-stage.chapter-journey-active #map canvas {
    filter: saturate(1.12) contrast(1.03) brightness(0.94) !important;
    transition:
      opacity 320ms ease,
      transform 420ms cubic-bezier(0.2, 0.72, 0.24, 1) !important;
    will-change: opacity, transform !important;
  }

  html body main.app-shell > .map-stage.chapter-journey-active .chapter-journey-atmosphere-glow {
    opacity: 0.12 !important;
    filter: blur(24px) !important;
    animation: none !important;
  }
}