/* Layout breakpoints (#40) -- the mobile stage.
 *
 * THE ONE PLACE A BREAKPOINT IS DECIDED, the way tokens.css is the one place a
 * colour is decided. #38 shipped exactly one media query -- prefers-color-scheme
 * -- and no layout breakpoints on purpose, so that whoever needed the first one
 * would choose the whole set at once rather than accrete a `max-width` per
 * component until the page had four disagreeing ideas of "narrow". This is that
 * set, and the test suite pins it in both directions: every layout media query
 * in the repository is in this file, and this file declares exactly two.
 *
 * WHY TWO, AND WHY THESE TWO.
 *
 *   900px -- COMPACT. Below this `.container { width: 80% }` stops being
 *     generous and starts being a tax: it already leaves only ~719px of content
 *     at 900, and the body's 20px padding plus the container's own 20px gutters
 *     take 80px more off a screen with none to give. This tier spends the
 *     gutters and changes nothing else. It is also where a phone in landscape
 *     (844x390, 851x393) and a tablet in portrait split-view land, and neither
 *     of those wants the phone layout.
 *
 *   600px -- PHONE PORTRAIT. Above every common phone held upright (the widest
 *     is 430) and below every common tablet held upright (the narrowest is
 *     768), so this tier is exactly "a phone in portrait" and drags nothing
 *     else in with it. Here the floated header stacks and the filter bar
 *     becomes one column of full-width, thumb-sized controls.
 *
 * MAX-WIDTH, NOT MIN-WIDTH. The desktop layout is the one that exists, is the
 * one people use, and is not what #40 is about. Written as `max-width` the
 * desktop rules are never restated and never move, and deleting this file
 * returns the site exactly to where #38 left it.
 *
 * WHY THIS FILE LOADS LAST. base_layout.html links it AFTER `head_css`, which
 * is where each page adds dashboard.css and d3_visualizations.css. A breakpoint
 * that loses to the rule it means to override is a breakpoint that does
 * nothing. There is deliberately no `!important` below: link order does the
 * work, which is the mechanism #38 documented, and the order is pinned by a
 * test rather than left to whoever next edits the layout.
 *
 * WHAT IS NOT HERE, ON PURPOSE. The sticky first column lives beside the table
 * it belongs to, in d3_visualizations.css, and carries no breakpoint at all: a
 * 16-column summary and a 15-column league table overflow their container at
 * 1400px too, and there is no width at which scrolling the row label out of
 * sight is what a reader wanted.
 */

/* --- Compact: 900px and under -------------------------------------------- */
@media (max-width: 900px) {
    /* The gutters are the whole tier. 80% of 899px is 719, and the fifth this
       throws away is the only space the screen has left to give.
       `auto`, NOT `100%`: the container is content-box, so `width: 100%` is
       100% of the parent PLUS its own two gutters, and the page scrolls
       sideways by exactly the padding below. Measured at 390px, where it
       overflowed by 16px before this said `auto`. */
    .container {
        width: auto;
        padding: 0 var(--space-6);
    }

    body {
        padding: var(--space-6);
    }

    /* A card's padding is a gutter too -- six of them on the matchup page. */
    .chart-container {
        padding: var(--space-6);
    }
}

/* --- Phone portrait: 600px and under ------------------------------------- */
@media (max-width: 600px) {
    body {
        padding: var(--space-4);
    }

    .container {
        padding: 0 var(--space-4);
    }

    .chart-container {
        padding: var(--space-4);
    }

    /* The floated header. `float: left` beside `float: right` needs both halves
       to fit on one line; below that the nav drops under the h1, and because
       the container is `overflow: hidden` and floats are out of flow it lands
       ON it. Stacked, centred and back in flow. */
    header h1,
    header nav {
        float: none;
        text-align: center;
    }

    header h1 {
        font-size: 1.4em;
    }

    header li {
        padding: 0 var(--space-4);
    }

    /* The filter bar. Four label/select pairs centred in a wrapping row break
       into a ragged block of half-width controls; one column of full-width ones
       is both readable and thumb-sized. */
    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .filters label {
        display: block;
        margin-bottom: var(--space-1);
    }

    .filters select {
        width: 100%;
        /* 16px is not a taste. Under it, iOS zooms the whole page when the
           control takes focus and does not zoom back out when it closes, which
           leaves the reader stranded at 1.3x with the page wider than the
           screen. `--text-xl` is the 16px rung. */
        font-size: var(--text-xl);
        padding: var(--space-5) var(--space-4);
    }

    /* Seven tabs on the league page. Let them share the rows they wrap onto
       rather than leaving a ragged right edge. */
    .tab-strip .tab {
        flex: 1 1 auto;
        text-align: center;
    }

    /* The page and panel headings are sized for a 1200px column. */
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.15em;
    }
}