/* #550: the page shell. ONE owner for how wide a page is.
 *
 * Before this, width was decided in four places that stacked: upload.css
 * styled the global .container three separate times with two different
 * max-widths, base.html nested .container inside .container-fluid, and
 * cutter.html declared .ct-wrap at its own 95%/1600px while claiming to be
 * "one standard, every page". On a 375px phone the insets compounded down to
 * roughly 290px of usable width.
 *
 * Width, max-width, padding and centering are set HERE and nowhere else.
 * Other stylesheets may still style what is INSIDE a container, and
 * upload.css keeps the vertical stacking that its own pages rely on, but no
 * other file gets to decide how wide the box is.
 *
 * Loaded immediately after tokens.css so a page that genuinely needs a
 * different shape can still override it deliberately rather than by accident.
 */

:root {
    /* One gutter, scaled by breakpoint, used by every shell below. */
    --page-gutter: .75rem;

    /* WIDE IS THE DEFAULT, and that is deliberate. This is an audio editing
       app: waveforms, the Builder timeline and the Library grid all read
       better the more horizontal room they get, and 1600px is what the site
       has actually been rendering at, because the last of the five competing
       rules happened to say so. Narrowing the default to a reading column
       would have been a silent regression on every working surface.
       --page-max-read exists for pages that are genuinely prose or a short
       form, where a 1600px line length is just hard to read. */
    --page-max: 1600px;
    --page-max-read: 46rem;
}

@media screen and (min-width: 768px) {
    :root { --page-gutter: 1rem; }
}

@media screen and (min-width: 1200px) {
    :root { --page-gutter: 1.25rem; }
}

.container,
.container-fluid,
.ct-wrap,
.lib-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    box-sizing: border-box;
}

.container,
.ct-wrap,
.lib-wrap { max-width: var(--page-max); }

.container-fluid { max-width: none; }

/* Opt-in, for prose and short forms only. Nothing uses it yet; it exists so
   that narrowing a specific page is a deliberate act on that page rather
   than another global rule competing with this one. */
.page-read { max-width: var(--page-max-read); margin-left: auto; margin-right: auto; }

/* A shell inside a shell adds a second gutter for no reason. Whichever one
   is nested gives its padding up; the outer one is already holding the
   page off the edge of the screen. */
.container .container,
.container .ct-wrap,
.container .lib-wrap,
.container-fluid .container,
.container-fluid .ct-wrap,
.container-fluid .lib-wrap {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}