/* ==========================================================
   hadir. — Phase G2.1 Guest Viewport Stability Hotfix
   Release: 6.20.1-phase-g2-1-viewport-stability-hotfix-v1

   Purpose:
   - Keep every Guest App screen anchored to the active mobile viewport.
   - Prevent accidental pinch/double-tap zoom from leaving the UI enlarged.
   - Prevent iPhone Safari input-focus auto zoom.
   - Recover cleanly after keyboard, orientation, and browser chrome changes.

   This file is loaded last so it only normalizes viewport behaviour.
   Camera, Film Engine, upload queue, Supabase, Admin, and Client logic are
   intentionally untouched.
========================================================== */

:root {
  --guest-viewport-height: 100dvh;
  --guest-viewport-offset-top: 0px;
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Prevent any Guest App canvas from widening the layout viewport. */
body > :is(
  #splash-screen,
  #welcome-screen,
  #loading-screen,
  #event-ended-screen,
  #camera-view,
  #gallery-view
) {
  max-width: 100%;
  overscroll-behavior: none;
}

@media (max-width: 699px), (hover: none), (pointer: coarse) {
  body > :is(
    #splash-screen,
    #welcome-screen,
    #loading-screen,
    #event-ended-screen,
    #camera-view,
    #gallery-view
  ) {
    position: fixed !important;
    top: var(--guest-viewport-offset-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--guest-viewport-height) !important;
    min-height: 0 !important;
    max-height: var(--guest-viewport-height) !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #splash-screen,
  #loading-screen,
  #event-ended-screen,
  #camera-view {
    overflow: hidden !important;
    touch-action: none;
  }

  #welcome-screen,
  #gallery-view {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y;
    scrollbar-gutter: stable both-edges;
  }

  #camera-view .app,
  #camera-view .camera-inspired-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }

  #camera-view .viewfinder-card,
  #camera-view .control-panel,
  #camera-view .photo-review,
  #camera-view .photo-review-shell,
  #gallery-view .gallery-page,
  #welcome-screen .welcome-content {
    max-width: 100%;
  }

  /* Safari zooms the page when an editable field is below 16px. */
  #welcome-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #welcome-screen textarea,
  #welcome-screen select,
  #settings-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #settings-sheet textarea,
  #settings-sheet select,
  #library-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #library-sheet textarea,
  #library-sheet select {
    font-size: 16px !important;
  }

  :is(button, a, input, textarea, select, [role="button"]) {
    touch-action: manipulation;
  }

  .sheet,
  .lightbox,
  .photo-review {
    overscroll-behavior: contain;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }
}

@supports not (height: 100dvh) {
  :root { --guest-viewport-height: 100vh; }
}