/* THE SHELL - S1 navigation and S5 desktop layout. Session-owned.
 *
 * S5 WAS UNSPECCED WITH NO BAR, and DESIGN.md lists "there is no max width" as a
 * known open bug: the score bar stretches edge to edge in a desktop window.
 *
 * THE BAR IS A FAILURE MODE, not a model to copy:
 * reference/cbs-pickem-teardown/screens/CBS-picks-week1-15-games-spreads-crowd-desktop.png
 * at ~1900px - two team names at the extreme edges, every control clustered in the
 * middle, a lake of empty between them. And the same failure from the other end:
 * reference/officepool-teardown/screens/OP-marketing-home-393.png, where a product
 * built for office pools has no reflow at 393 and clips its own headline.
 *
 * THE DECISION: DESKTOP IS A SECOND LAYOUT, NOT A VARIANT.
 *   - a measure cap, so a row never stretches to 1900px
 *   - the nav moves from the bottom to the side
 *   - above 1200px the pool becomes two columns: the list keeps the phone measure
 *     and the second column carries what a phone reaches by navigating
 * Widening a phone layout is what produced the lake. The cap is the fix; the
 * second column is what makes the space earn itself.
 */

/* The shell is a column: content grows, the nav sits on the floor of the VIEWPORT
 * rather than under the last element. Found by looking at it at 393px - the nav
 * had ridden up under a two-line caption with 900px of dead ground beneath it,
 * which no test in this repo could have caught. Requirement 7.5, first time out. */
.ag-shell { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.ag-main  { flex: 1 1 auto; width: 100%; max-width: 560px; margin-inline: auto; padding: 12px;
            padding-bottom: 20px; }

/* 393px IS THE DESIGN WIDTH. Everything is measured here first, in a real browser. */
@media (max-width: 560px) { .ag-main { padding: 10px; } }

@media (min-width: 900px) {
  /* The nav is the SECOND child in source order because a phone puts it on the
   * floor. On a real window it moves to the side, so the grid names the columns
   * and puts it first - one source order, two layouts. */
  .ag-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; }
  .ag-main  { max-width: 640px; padding: 20px; margin-inline: 0; grid-column: 2; grid-row: 1; }
  .ag-shell > .ag-nav { grid-column: 1; grid-row: 1; }
}

/* 🔴 THE SECOND COLUMN IS OPT-IN, and it was not until P1 rendered at 1400px.
 * .ag-main was an unconditional two-column grid above 1200px, so EVERY direct
 * child of a screen auto-placed into it: P1 put its pool header in column one and
 * a full-width maroon primary button alone in column two - a 600px slab of accent
 * beside a lake of empty. That is precisely the CBS-at-1900px failure this file
 * exists to answer, reproduced by the fix for it.
 *
 * A screen now opts in by containing an .ag-aside. Everything else keeps one
 * measure column at every width, which is the correct default: desktop is a
 * SECOND LAYOUT a screen is designed into, never a widening it falls into. */
@media (min-width: 1200px) {
  .ag-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .ag-main  { max-width: 640px; }
  .ag-main:has(> .ag-aside) {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 24px;
    max-width: 1180px;
  }
  .ag-main > .ag-aside { border-left: 1px solid var(--line); padding-left: 24px; }
}
/* Nothing gets a second column it has not been designed one for. */
.ag-main > .ag-aside:empty { display: none; }

/* Wide content scrolls inside itself. The page body never scrolls sideways. */
.ag-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }