/* Portrait layouts are reading pages: their content may grow beyond one screen. */
@media screen and (orientation: portrait), screen and (max-width: 800px) {
  body.apple-edition .panel:not(#opening, #japan-jury, #robot-maid, #change) {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }
  body.apple-edition .panel:not(#opening, #japan-jury, #robot-maid, #change) > * {
    flex-shrink: 0;
  }

  /* The desktop paper composition uses absolute positioning inside a fixed page.
     Return it to document flow so both the argument and paper remain readable. */
  body.apple-edition #game-ai > .chapter-label {
    position: static;
    width: 100%;
    max-width: none;
    margin-bottom: 35px;
  }
  body.apple-edition #game-ai .paper-layout { height: auto; }
  body.apple-edition #game-ai .paper-layout > div {
    position: static;
    width: 100%;
    max-width: none;
  }
  body.apple-edition #game-ai .paper-preview {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin-top: 34px;
  }
  body.apple-edition #game-ai .paper-preview a,
  body.apple-edition #game-ai .paper-preview img { height: auto; max-height: none; }
}

/* Wide portrait monitors need vertical arrangements too, not only phones. */
@media screen and (orientation: portrait) and (min-width: 801px) {
  .apple-edition .metrics-grid,
  .apple-edition .lesson-groups,
  .apple-edition .self-feedback-grid,
  .apple-edition #naming.naming-combined { grid-template-columns: 1fr; }
  .apple-edition #platforms .real-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apple-edition #naming .label-model-marks { max-width: 450px; }
  .apple-edition #naming .watch-cloud { height: clamp(430px, 64vw, 820px); }
}