/* ═══════════════════════════════════════════════════════════════
   careiti-fit.css — game content that fits the screen, and reports that
   follow the screen's orientation

   Two related complaints, one cause: the app was authored at one fixed
   size. Play areas were sized in absolute pixels, so on a large tablet
   they sat small in the middle of the screen, and reports laid their
   blocks out the same way whether the device was held tall or wide.

   The rule here is that play content is sized in viewport units with px
   floors, never in fixed px alone — so it grows on a 12.9" iPad and still
   never collapses below a usable size on a phone.
   ═══════════════════════════════════════════════════════════════ */

/* ── Play areas ─────────────────────────────────────────────────
   `min()` against both axes because the binding constraint changes with
   orientation: width in portrait, height in landscape. Sizing off width
   alone is what makes a landscape play area overflow the bottom. */
@media (min-width: 700px) {
  body[data-ct="app"] .tile-grid,
  body[data-ct="app"] .answer-grid,
  body[data-ct="app"] .choices,
  body[data-ct="app"] .cats-grid,
  body[data-ct="app"] .items-pool {
    width: 100%;
    max-width: min(92vw, 720px);
    margin-inline: auto;
    gap: clamp(10px, 1.6vmin, 20px);
  }

  /* Colour-memory tiles are squares: they should own the space, not sit
     in the middle of it at their authored size. */
  body[data-ct="app"] .tile-grid {
    max-width: min(78vmin, 560px);
  }
  body[data-ct="app"] .tile-grid > * {
    aspect-ratio: 1 / 1;
    height: auto !important;
    min-height: 0;
    width: auto !important;
  }

  /* Sortable items and category baskets scale with the viewport instead of
     staying at their phone size on a large screen. */
  body[data-ct="app"] .items-pool > *,
  body[data-ct="app"] .cats-grid > * {
    min-height: clamp(72px, 13vmin, 132px);
    font-size: max(calc(15px * var(--ct-k3, 1)), var(--ct-min, 0px));
  }

  /* The number/emoji/arithmetic prompt is the thing being read; it gets
     the largest share of the extra room. */
  body[data-ct="app"] .q-text,
  body[data-ct="app"] .seq-display,
  body[data-ct="app"] .num-display,
  body[data-ct="app"] .nb-cell {
    font-size: clamp(32px, 7.2vmin, 76px);
    line-height: 1.25;
  }
}

/* Short landscape: height is the scarce axis, so the prompt backs off and
   the play area is capped against viewport height rather than width. */
@media (min-width: 700px) and (max-height: 900px) and (orientation: landscape) {
  body[data-ct="app"] .tile-grid { max-width: min(58vh, 460px); }
  body[data-ct="app"] .q-text,
  body[data-ct="app"] .seq-display,
  body[data-ct="app"] .num-display,
  body[data-ct="app"] .nb-cell {
    font-size: clamp(28px, 8vh, 60px);
  }
  body[data-ct="app"] .items-pool > *,
  body[data-ct="app"] .cats-grid > * {
    min-height: clamp(60px, 11vh, 104px);
  }
}

/* Phones keep their authored sizing untouched — none of the above applies
   below 700px, so nothing that already worked is disturbed. */

/* ── Reports follow the device ──────────────────────────────────
   Held tall, blocks stack; held wide, they sit side by side. A report laid
   out in one narrow column on a landscape tablet wastes the half of the
   screen the reader is holding up, and forces scrolling to compare two
   figures that would otherwise be adjacent. */
@media (min-width: 700px) and (orientation: landscape) {
  /* .dash-wrap must NOT be here: it is /my's PAGE SHELL, not a report body.
     Its children are a header, a tab bar, five zero-height Alpine <template>
     nodes and one div holding every card. Gridding it auto-placed those into
     cells — title in one, tabs in another, all content squeezed into a 358px
     column with half the screen empty. Same mistake as `.page`, repeated.
     Only grid a container whose children are HOMOGENEOUS. */
  body[data-ct="app"] .records-wrap,
  body[data-ct="app"] .report-body,
  body[data-ct="app"] .c-wrap.report,
  body[data-ct="app"] [data-report] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(18px, 3vw, 34px);
    row-gap: 14px;
    align-items: start;
  }
  /* Headers, summaries and anything explicitly marked full-width stay
     across both columns so the report still reads top-to-bottom. */
  body[data-ct="app"] .records-wrap > h1,
  body[data-ct="app"] .records-wrap > h2,
  body[data-ct="app"] .records-wrap > .page-header,
  body[data-ct="app"] .report-body > h1,
  body[data-ct="app"] .report-body > h2,
  body[data-ct="app"] .dash-wrap > .page-header,
  body[data-ct="app"] [data-report] > h1,
  body[data-ct="app"] [data-report] > h2,
  body[data-ct="app"] [data-report] > [data-report-full],
  body[data-ct="app"] .report-full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 700px) and (orientation: portrait) {
  body[data-ct="app"] .records-wrap,
  body[data-ct="app"] .report-body,
  body[data-ct="app"] [data-report] {
    display: block;
  }
}

/* A wide desktop-sized landscape window has room for three, but reports
   are read, not scanned — two columns keeps the measure comfortable. */
@media (min-width: 1400px) and (orientation: landscape) {
  body[data-ct="app"] .records-wrap,
  body[data-ct="app"] .report-body,
  body[data-ct="app"] [data-report] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}