/* iPad photo-booth layout overrides.
   The base/portrait presentation remains in index.html; these rules target the
   practical landscape viewport range from 10.2/10.9-inch through 11-inch iPads. */

.printReturnTimer {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px));
  margin: 0;
  transform: translateX(-50%);
  color: rgba(36, 33, 29, .64);
  font: 400 11px/1.4 "Geist Mono", monospace;
  white-space: nowrap;
}

@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh;
  }

  body {
    min-height: 100dvh;
  }
}

@media (orientation: landscape)
  and (min-width: 1024px)
  and (min-height: 640px)
  and (min-aspect-ratio: 4 / 3) {
  :root {
    --frame-safe-x: max(64px, env(safe-area-inset-left), env(safe-area-inset-right));
    --frame-safe-top: max(78px, calc(env(safe-area-inset-top) + 62px));
    --frame-safe-bottom: max(104px, calc(env(safe-area-inset-bottom) + 88px));
    --btn-font-large: 19px;
    --btn-font-small: 15px;
  }

  body {
    padding: max(16px, env(safe-area-inset-top))
             max(28px, env(safe-area-inset-right))
             max(18px, env(safe-area-inset-bottom))
             max(28px, env(safe-area-inset-left));
  }

  .handFrame {
    inset: max(10px, env(safe-area-inset-top))
           max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-left));
  }

  /* START */
  .hero {
    gap: clamp(14px, 2.2dvh, 20px);
    padding: clamp(36px, 6dvh, 50px) var(--frame-safe-x) 24px;
  }

  .wordmark {
    font-size: clamp(48px, 7dvh, 60px);
  }

  .instruction,
  .selectionInstruction {
    font-size: clamp(14px, 1.7dvh, 16px);
  }

  .startBtn.btn-large {
    width: min(380px, 42vw);
    min-width: 300px;
    min-height: 56px;
  }

  .footer {
    margin-bottom: max(30px, env(safe-area-inset-bottom));
    padding-inline: var(--frame-safe-x);
  }

  /* PREPARING / CAMERA */
  .cameraTopBar {
    padding: max(78px, calc(env(safe-area-inset-top) + 66px))
             var(--frame-safe-x) 10px;
  }

  .cameraStatus {
    font-size: 13px;
  }

  .cameraBottomBar {
    left: var(--frame-safe-x);
    right: var(--frame-safe-x);
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px));
    gap: 8px;
    padding: 8px 12px;
  }

  .cameraInstruction {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.35;
  }

  .cameraCountdown {
    top: max(118px, calc(env(safe-area-inset-top) + 106px));
    right: var(--frame-safe-x);
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
    left: var(--frame-safe-x);
    padding-top: clamp(22px, 4dvh, 48px);
    font-size: clamp(58px, 11dvh, 82px);
  }

  .cameraPrepOverlay,
  .cameraError {
    padding: var(--frame-safe-top) var(--frame-safe-x) var(--frame-safe-bottom);
  }

  .prepWord {
    font-size: clamp(34px, 5.5dvh, 44px);
  }

  .errorActions button,
  .errorActions .btn-small {
    min-width: 128px;
    min-height: 56px;
  }

  /* SELECT: keep the preview + 2×3 thumbnail set as one centered group. */
  .selectionScreen {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--frame-safe-top) var(--frame-safe-x) var(--frame-safe-bottom);
    gap: 12px;
  }

  .selectionTimer {
    width: min(100%, clamp(580px, 60vw, 720px));
    justify-self: center;
    align-self: center;
    text-align: right;
    font-size: 13px;
  }

  .selectionBody {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    width: fit-content;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    margin-inline: auto;
    gap: clamp(32px, 3.2vw, 44px);
    align-items: center;
  }

  .selectionPreviewWrap {
    width: min(32vw, 37dvh, 380px);
    height: 100%;
    min-height: 0;
    max-width: none;
    justify-self: center;
    justify-content: center;
    align-items: center;
    max-height: min(56dvh, 570px);
  }

  #selectionPreviewCanvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .selectionThumbGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-self: center;
    justify-self: center;
    width: min(27vw, 27dvh, 280px);
    height: auto;
    max-width: min(100%, 280px);
    max-height: min(58dvh, 590px);
    min-height: 0;
    gap: 10px;
  }

  html[data-photo-mode="landscape"] .selectionThumbGrid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    width: min(24vw, 30dvh, 240px);
    max-width: min(100%, 240px);
  }

  .selectionThumb {
    width: 100%;
    height: auto;
    min-height: 44px;
    /* Matches each photo cell in the 1200×1800 final print layout. */
    aspect-ratio: 547 / 757;
  }

  html[data-photo-mode="id-photo"] .selectionThumb {
    aspect-ratio: 3 / 4;
  }

  html[data-photo-mode="landscape"] .selectionThumb {
    aspect-ratio: 3297 / 1490;
  }

  #selectionNextBtn.btn-large {
    width: min(360px, 38vw);
    min-width: 300px;
    min-height: 54px;
    justify-self: center;
    align-self: center;
    margin: 0;
    transform: none;
  }

  .selectionActions {
    justify-self: center;
  }

  /* EDIT */
  .editScreen {
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: 12px;
    padding: var(--frame-safe-top) var(--frame-safe-x) var(--frame-safe-bottom);
  }

  .editTop,
  .editBody {
    width: min(980px, 100%);
  }

  .editBody {
    grid-template-columns: minmax(330px, 1fr) minmax(410px, 440px);
    justify-content: center;
    gap: 18px;
  }

  .editPreviewWrap {
    justify-content: flex-end;
    align-items: center;
  }

  #editPreviewCanvas {
    max-height: 100%;
  }

  .editControls {
    align-self: center;
    gap: 12px;
  }

  .editControlGroup h2 {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .editOption {
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  #filterOptions,
  #primeColorOptions {
    display: grid;
    gap: 6px;
  }

  #filterOptions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Frame groups must stay full-width: their own 3 / 2 and 4-button grids
     otherwise become tiny nested columns and overflow their labels. */
  #primeColorOptions,
  html[data-photo-mode="landscape"] #primeColorOptions,
  html[data-photo-mode="id-photo"] #primeColorOptions {
    grid-template-columns: minmax(0, 1fr);
  }

  .editPrintBtn.btn-large {
    width: min(340px, 36vw);
    min-width: 300px;
    min-height: 54px;
    align-self: center;
    margin: 0;
    transform: none;
  }

  /* FINISH / PRINT / QR: motion, copy, actions, countdown never share a row. */
  .printPreviewScreen {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    justify-items: center;
    align-items: center;
    row-gap: clamp(8px, 1.25dvh, 14px);
    padding: max(56px, calc(env(safe-area-inset-top) + 42px))
             var(--frame-safe-x)
             max(72px, calc(env(safe-area-inset-bottom) + 58px));
  }

  .closingScreen {
    padding: var(--frame-safe-top) var(--frame-safe-x) var(--frame-safe-bottom);
  }

  .printMachine {
    position: relative;
    inset: auto;
    grid-row: 1;
    align-self: center;
    width: min(64vw, 47dvh, 580px);
    max-width: 100%;
    transform: none;
  }

  .printStatus {
    position: relative;
    inset: auto;
    grid-row: 2;
    justify-self: center;
    width: auto;
    margin: 0;
  }

  .printActions {
    position: relative;
    inset: auto;
    grid-row: 3;
    justify-self: center;
    width: auto;
    max-width: 400px;
    margin: 0;
    gap: 12px;
  }

  .printReturnTimer {
    position: relative;
    inset: auto;
    grid-row: 4;
    justify-self: center;
    transform: none;
  }

  .printAction.btn-small,
  .printAction.btn-ghost {
    width: 132px;
    min-width: 132px;
    min-height: 56px;
  }

  .printMessage {
    position: relative;
    inset: auto;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 420px);
    max-width: 380px;
    margin: 0;
    font-size: 14px;
  }

  .printQrPlaceholder {
    position: relative;
    inset: auto;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: clamp(176px, 21dvh, 220px);
    max-width: min(100%, 220px);
    margin: 0;
    transform: none;
  }

  .printQrNote {
    position: relative;
    inset: auto;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 520px);
    margin: 0;
    font-size: 12px;
  }

  .closingWord {
    font-size: clamp(44px, 7dvh, 56px);
  }
}

/* Larger 4:3-class landscape viewport (for example a 13-inch iPad viewport).
   Height remains the primary limiter so browser chrome cannot cause clipping. */
@media (orientation: landscape)
  and (min-width: 1200px)
  and (min-height: 850px)
  and (min-aspect-ratio: 4 / 3) {
  :root {
    --frame-safe-x: max(80px, env(safe-area-inset-left), env(safe-area-inset-right));
    --frame-safe-top: max(84px, calc(env(safe-area-inset-top) + 66px));
    --frame-safe-bottom: max(110px, calc(env(safe-area-inset-bottom) + 92px));
    --btn-font-large: 20px;
    --btn-font-small: 16px;
  }

  .hero {
    gap: clamp(18px, 2.4dvh, 26px);
  }

  .wordmark {
    font-size: clamp(56px, 6.4dvh, 66px);
  }

  .startBtn.btn-large {
    width: min(420px, 38vw);
  }

  .cameraInstruction {
    max-width: 620px;
    font-size: 15px;
  }

  .selectionScreen {
    gap: 14px;
  }

  .printPreviewScreen {
    padding-top: max(64px, calc(env(safe-area-inset-top) + 48px));
    padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 64px));
  }

  .selectionTimer {
    width: min(100%, 760px);
    font-size: 14px;
  }

  .selectionBody {
    gap: clamp(40px, 3.4vw, 50px);
  }

  .selectionPreviewWrap {
    width: min(31vw, 38dvh, 400px);
    max-height: 600px;
  }

  .selectionThumbGrid {
    width: min(25vw, 28dvh, 292px);
    max-width: 292px;
    gap: 12px;
  }

  #selectionNextBtn.btn-large {
    width: 390px;
  }

  .editTop,
  .editBody {
    width: min(1120px, 100%);
  }

  .editBody {
    grid-template-columns: minmax(380px, 1fr) minmax(440px, 480px);
    gap: clamp(24px, 3vw, 42px);
  }

  .printMachine {
    width: min(64vw, 48dvh, 600px);
  }

  .printQrPlaceholder {
    width: clamp(200px, 22dvh, 236px);
    max-width: 236px;
  }

  .printMessage {
    font-size: 15px;
  }

  .printReturnTimer {
    font-size: 12px;
  }
}

/* Landscape Safari with a visible browser bar or split-height viewport. */
@media (orientation: landscape)
  and (min-width: 1024px)
  and (max-height: 760px)
  and (min-aspect-ratio: 4 / 3) {
  :root {
    --frame-safe-x: max(56px, env(safe-area-inset-left), env(safe-area-inset-right));
    --frame-safe-top: max(56px, calc(env(safe-area-inset-top) + 42px));
    --frame-safe-bottom: max(76px, calc(env(safe-area-inset-bottom) + 60px));
  }

  .selectionScreen {
    gap: 8px;
  }

  .selectionTimer {
    width: min(100%, 560px);
  }

  .selectionBody {
    gap: clamp(26px, 3vw, 36px);
  }

  .selectionPreviewWrap {
    width: min(30vw, 34dvh, 260px);
    max-height: 390px;
  }

  .selectionThumbGrid {
    width: min(23vw, 24dvh, 192px);
    max-width: 192px;
    max-height: 400px;
    gap: 8px;
  }

  #selectionNextBtn.btn-large {
    min-height: 48px;
  }

  .printPreviewScreen {
    row-gap: 7px;
    padding-top: max(48px, calc(env(safe-area-inset-top) + 34px));
    padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 46px));
  }

  .printMachine {
    width: min(64vw, 47dvh, 440px);
  }

  .printAction.btn-small,
  .printAction.btn-ghost {
    min-height: 50px;
  }

  .printQrPlaceholder {
    width: clamp(154px, 21dvh, 174px);
  }
}

/* ID PHOTO selection only chooses a shot. The printable frame appears after
   the two crop adjustments, not beside the candidates. */
html[data-photo-mode="id-photo"] .selectionPreviewWrap {
  display: none;
}
html[data-photo-mode="id-photo"] .selectionBody {
  display: flex;
  justify-content: center;
  width: min(100%, 1120px);
  max-width: 1120px;
}
html[data-photo-mode="id-photo"] .selectionThumbGrid {
  flex: none;
  width: min(92vw, 68dvh, 1120px);
  max-width: 1120px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
html[data-photo-mode="id-photo"] .selectionThumb {
  aspect-ratio: 3 / 4;
}

/* Landscape output keeps a 4:3 camera composition through the final prime.
   Give the wide final preview and its 4:3 candidates the available screen. */
@media (orientation: landscape)
  and (min-width: 1024px)
  and (min-height: 640px)
  and (min-aspect-ratio: 4 / 3) {
  html[data-photo-mode="id-photo"] .selectionBody {
    gap: clamp(22px, 2.4vw, 34px);
  }

  html[data-photo-mode="id-photo"] .selectionPreviewWrap {
    width: min(43vw, 64dvh, 520px);
    max-height: min(58dvh, 460px);
  }

  html[data-photo-mode="id-photo"] .selectionThumbGrid {
    width: min(82vw, 74dvh, 900px);
    max-width: 900px;
    max-height: min(76dvh, 720px);
  }

  html[data-photo-mode="landscape"] .selectionBody {
    grid-template-columns: minmax(0, 1fr) minmax(160px, .38fr);
    grid-template-rows: minmax(0, 1fr);
    width: min(100%, 980px);
    gap: clamp(20px, 2.2vw, 34px);
  }

  html[data-photo-mode="landscape"] .selectionPreviewWrap {
    width: min(34vw, 48dvh, 400px);
    max-height: min(58dvh, 540px);
  }

  html[data-photo-mode="landscape"] .selectionThumbGrid {
    width: min(22vw, 30dvh, 230px);
    max-width: 230px;
    max-height: min(58dvh, 540px);
    gap: 12px;
  }

  .printPreviewScreen[data-photo-mode="id-photo"] .printMachine {
    width: min(76vw, 82dvh, 720px);
  }
}

@media (orientation: landscape)
  and (min-width: 1024px)
  and (max-height: 760px)
  and (min-aspect-ratio: 4 / 3) {
  html[data-photo-mode="id-photo"] .selectionPreviewWrap {
    width: min(42vw, 58dvh, 430px);
  }

  html[data-photo-mode="id-photo"] .selectionThumbGrid {
    width: min(82vw, 67dvh, 760px);
    max-width: 760px;
  }

  html[data-photo-mode="landscape"] .selectionPreviewWrap {
    width: min(31vw, 46dvh, 350px);
    max-height: min(42dvh, 360px);
  }

  html[data-photo-mode="landscape"] .selectionThumbGrid {
    width: min(20vw, 27dvh, 200px);
    max-height: min(42dvh, 360px);
  }

  .printPreviewScreen[data-photo-mode="id-photo"] .printMachine {
    width: min(74vw, 80dvh, 620px);
  }
}

/* Six-shot selection: large vertical 2 × 3 candidates beside the frame. */
html[data-photo-mode="portrait"] .selectionBody,
html[data-photo-mode="landscape"] .selectionBody {
  transform: translateX(clamp(-30px, -2.4vw, -18px));
}
html[data-photo-mode="portrait"] .selectionPreviewWrap,
html[data-photo-mode="landscape"] .selectionPreviewWrap {
  transform: translateX(clamp(-70px, -5vw, -40px));
}
html[data-photo-mode="portrait"] .selectionThumbGrid,
html[data-photo-mode="landscape"] .selectionThumbGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
}
html[data-photo-mode="portrait"] .selectionThumbGrid {
  width: min(34vw, 38dvh, 340px);
  max-width: min(100%, 340px);
  max-height: none;
}
html[data-photo-mode="landscape"] .selectionThumbGrid {
  /* Display-only selection cards. These dimensions never affect the print canvas. */
  width: min(62vw, 82dvh, 720px);
  max-width: min(100%, 720px);
  max-height: none;
  gap: 8px;
}
/* Keep the left frame preview stationary while the selectable cards grow. */
html[data-photo-mode="landscape"] .selectionBody {
  /* Override the earlier fractional grid track: it was constraining the
     clickable cards to a narrow column even when the screen had free space. */
  grid-template-columns: auto auto;
  width: fit-content;
  max-width: 100%;
  --selection-grid-before-half: min(26vw, 38dvh, 300px);
  --selection-grid-after-half: min(31vw, 41dvh, 360px);
  transform: translateX(calc(
    clamp(16px, 4vw, 30px) +
    var(--selection-grid-after-half) - var(--selection-grid-before-half)
  ));
}

/* Mode-specific selection surfaces. These rules only resize the on-screen
   candidate cards; no print canvas, crop, or frame geometry is involved. */
html[data-photo-mode="portrait"] .selectionThumbGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  width: min(48vw, 62dvh, 650px);
  max-width: min(100%, 650px);
  max-height: none;
  gap: 10px;
}

/* Keep preview + thumbnails as one centered selection group on every mode. */
.selectionBody {
  margin-inline: auto;
  transform: none !important;
}
.selectionPreviewWrap {
  transform: none !important;
}