/* Tablet portrait has a full room followed by the existing opened paper/book.
   No phone, landscape, medallion, interaction or persistence overrides. */
@media (min-width: 761px) and (max-width: 1280px) and (orientation: portrait) {
  body .miles-travel-bureau { container-type: inline-size; gap: 12px; }
  body .miles-scene-copy { gap: 6px; padding-top: 8px; }
  body .miles-scene-copy .eyebrow { margin-bottom: 0; }
  body .miles-scene-copy h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; }
  body .miles-room-hint { font-size: .9rem; }

  body .miles-scene,
  body .miles-scene:has(.miles-state-sheet[data-planner-mode="myPlans"].is-open) {
    box-sizing: content-box;
    width: min(calc(100% - 4px), calc((100dvh - 200px) * 16 / 9));
    height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9;
    margin-bottom: 0; overflow: visible;
  }
  body .miles-scene-plate {
    --miles-plate-scale: 1; --miles-plate-x: 50%; --miles-plate-y: 50%;
    object-fit: contain; border-radius: 6px;
  }
  body .miles-overlay-coordinate-layer > :is(.miles-filing-drawer, .miles-state-sheet, .miles-tip-detail-sheet, .miles-my-plans-workspace):not(.is-open) {
    display: none; /* Closed off-room panels must not create phantom scroll space. */
  }
  /* Both artwork and its percentage-coordinate layer keep the same 16:9 box. */
  body .miles-state-sheet,
  body .miles-state-sheet.is-open,
  body .miles-state-sheet[data-planner-mode="myPlans"],
  body .miles-state-sheet[data-planner-mode="myPlans"].is-open {
    top: calc(100% + 48px); left: 50%;
    width: min(calc(100% - 16px), 1000px); min-width: 0; max-width: none;
    max-height: none; transform: translateX(-50%); overflow: visible;
  }
  body .miles-scene:has(.miles-state-sheet.is-open) {
    margin-bottom: calc(min(calc(100cqw - 16px), 1000px) * .75 + 64px);
  }
  body .miles-state-sheet[data-planner-mode="stateStory"] .miles-state-story-hint {
    margin-bottom: 14px; font-size: .9rem; line-height: 1.3;
  }
  /* Tablet keeps the existing Add/Next presentation. The old 56px deduction
     was for controls outside the pocket; these controls now occupy grid rows. */
  body .miles-state-sheet[data-planner-mode="myPlans"] .pocket-keepsakes {
    height: 100%;
  }
  /* The empty legacy actions row overlaps Next Keepsake. Only actual buttons
     should capture taps; its transparent area must pass through to the pocket. */
  body .miles-state-sheet[data-planner-mode="myPlans"] .miles-state-sheet__actions { pointer-events: none; }
  body .miles-state-sheet[data-planner-mode="myPlans"] .miles-state-sheet__actions button { pointer-events: auto; }
  body .miles-tip-detail-sheet,
  body .miles-tip-detail-sheet.is-open {
    top: calc(100% + 48px); left: 50%; width: min(calc(100% - 16px), 1000px);
    min-width: 0; transform: translateX(-50%); max-height: none;
  }

  body .miles-filing-drawer.is-open {
    top: calc(100% + 12px); left: 50%; width: min(calc(100% - 16px), 560px);
    min-width: 0; height: clamp(360px, 60cqw, 440px); min-height: 0;
    transform: translateX(-50%);
  }
  body .miles-scene:has(.miles-filing-drawer.is-open) {
    margin-bottom: calc(clamp(360px, 60cqw, 440px) + 32px);
  }
  body .miles-filing-drawer.is-open .miles-folder-stack { right: 26%; }
  body .miles-filing-drawer.is-open .miles-filing-drawer__close { top: 3%; min-height: 44px; font-size: 12px; }
  body .miles-drawer-paging button { min-height: 44px; font-size: 12px; }
}