/* ═══════════════════════════════════════════════════════════════
   careiti-appshell.css — the app uses the whole screen

   Measured before this file: post-login pages occupied 69% of a landscape
   iPad and 80% of an iPad Pro, almost all of it in a single column, with
   374px of bare paper down the sides.

   The cause was my own --ct-max: 820px. That number is a READING measure —
   it exists so a paragraph does not run to 60 characters a line — and it is
   correct for the evidence pages and the marketing site. It is wrong for an
   app. A rewards list, a mission list, a game hub and a session history are
   COLLECTIONS, not prose: nobody reads them left to right, and holding them
   to a paragraph's width wastes a third of the screen while forcing the
   reader to scroll past items that would have fit side by side.

   So the rule is by content type, not by breakpoint:
     collections  → fill the screen, flow into as many columns as fit
     prose        → keep the reading measure

   `:has()` is what lets a stylesheet tell the two apart. Where it is
   unsupported the page simply keeps today's single column — the same
   behaviour as before this file, never worse.
   ═══════════════════════════════════════════════════════════════ */

:root { --ct-wide: min(96vw, 1240px); }

@media (min-width: 900px) {

  /* ── Collections take the screen ─────────────────────────────── */
  body[data-ct="app"] .container:has(.gcard),
  body[data-ct="app"] .container:has(.fcard),
  body[data-ct="app"] .container:has(.reward-card),
  body[data-ct="app"] .container:has(.mission-card),
  body[data-ct="app"] .container:has(.tier-card),
  body[data-ct="app"] .wrap:has(.reward-card),
  body[data-ct="app"] .wrap:has(.mission-card),
  body[data-ct="app"] .page:has(.session-card),
  body[data-ct="app"] .records-wrap:has(.session-card),
  body[data-ct="app"] .c-wrap:has(.gcard),
  body[data-ct="app"] .tabs-wrap,
  body[data-ct="app"] .dash-wrap,
  body[data-ct="app"] .container:has(.row),
  body[data-ct="app"] .container:has(.lb-row),
  body[data-ct="app"] .container:has(.board-head),
  body[data-ct="app"] [data-collection] {
    max-width: var(--ct-wide);
  }

  /* ── and flow into as many columns as fit ────────────────────── */
  body[data-ct="app"] .games-grid,
  body[data-ct="app"] .feat-grid,
  body[data-ct="app"] .cards,
  body[data-ct="app"] [data-collection-grid] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 26vw, 340px), 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    /* Cards in a collection are peers, so they are the same height. With
       `align-items:start` each one was only as tall as its own text, and a
       row containing a two-line description sat taller than its neighbours —
       measured 197px against 174px on a landscape iPad. `stretch` equalises
       within a row; `grid-auto-rows: 1fr` equalises across rows too, so the
       whole grid reads as one set rather than a ragged stack. */
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  /* Lists that were never a grid at all — a stack of cards in a block
     container. Given a parent that holds several, they become one. */
  body[data-ct="app"] .wrap:has(> .reward-card),
  body[data-ct="app"] .container:has(> .reward-card),
  body[data-ct="app"] .container:has(> .mission-card),
  body[data-ct="app"] .progress-wrap:has(> .mission-card),
  body[data-ct="app"] .records-wrap:has(> .session-card),
  body[data-ct="app"] .page:has(> .session-card) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 28vw, 380px), 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    align-items: start;
  }

  /* Headers, tab bars, summaries and anything explicitly marked keep the
     full width above the grid so the page still reads top-to-bottom. */
  body[data-ct="app"] .wrap > h1,
  body[data-ct="app"] .wrap > h2,
  body[data-ct="app"] .container > h1,
  body[data-ct="app"] .container > h2,
  body[data-ct="app"] .container > .hero,
  body[data-ct="app"] .container > .page-header,
  body[data-ct="app"] .records-wrap > .page-header,
  body[data-ct="app"] .cgm-switch,
  body[data-ct="app"] .cgm-note,
  body[data-ct="app"] .cht-open,
  body[data-ct="app"] [data-span-all] { grid-column: 1 / -1; }

  /* ── Prose keeps its measure ─────────────────────────────────── */
  body[data-ct="app"] .sci-card,
  body[data-ct="app"] .evidence-body,
  body[data-ct="app"] .legal,
  body[data-ct="app"] article { max-width: 68ch; }

  /* The bottom nav follows the wider shell so it does not float in the
     middle of a screen whose content now reaches the edges. */
  body[data-ct="app"] .bnav-dark,
  body[data-ct="app"] .bnav,
  body[data-ct="app"] .c-nav { width: min(var(--ct-wide), 100%); }
}

/* Very wide landscape: cap the column count so cards do not shrink into a
   contact sheet. Four across is the most this content reads well at. */
@media (min-width: 1500px) {
  body[data-ct="app"] .games-grid,
  body[data-ct="app"] .feat-grid,
  body[data-ct="app"] [data-collection-grid] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Below 900px nothing here applies: phones and portrait tablets keep the
   single column, which is right for their width. */


/* ── /my ────────────────────────────────────────────────────────
   The shell stays a block — see careiti-fit.css for why gridding it broke
   the page. What uses the width is the card column INSIDE it, whose children
   are all cards and therefore safe to flow. Selected as "the child of
   .dash-wrap that is neither the header nor the tab bar", because the markup
   gives that div no class of its own. */
@media (min-width: 900px) {
  body[data-ct="app"] .dash-wrap > div:not(.dash-header):not(.tab-bar) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 30vw, 420px), 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    align-items: start;
  }
  body[data-ct="app"] .dash-header,
  body[data-ct="app"] .tab-bar { width: 100%; }
  /* Tab labels wrapped one character per line inside a 358px cell. */
  body[data-ct="app"] .tab-bar { white-space: nowrap; }
}


/* ── Equal-height cards need their insides laid out ─────────────
   A card that is taller than its content leaves the gap wherever the block
   flow happens to put it, which reads as a mistake. Making the card a
   column and pushing the tag row to the bottom means the extra height lands
   in one deliberate place: between the description and the tags. */
body[data-ct="app"] .gcard,
body[data-ct="app"] .fcard,
body[data-ct="app"] .reward-card,
body[data-ct="app"] .mission-card {
  display: flex;
  flex-direction: column;
}
body[data-ct="app"] .gcard .gtags,
body[data-ct="app"] .gcard .gtag-row { margin-top: auto; padding-top: 10px; }
body[data-ct="app"] .fcard > div:last-child { margin-top: auto; }