/* #550: phone layout corrections.
 *
 * WHAT THIS IS NOT. The ticket describes one real fix: page width is decided
 * in four places that stack, and upload.css styles the global .container for
 * the whole site. That refactor touches the Studio, Builder, Library, login,
 * register and checkout in one change, because .container is load-bearing on
 * all of them, and it is not a change to make in launch week.
 *
 * WHAT THIS IS. The narrow, reversible half: stop the insets compounding on
 * a phone, and stop the bottom bars floating over content. Delete this file
 * and the site is exactly as it was.
 *
 * Loaded LAST in base.html, after the per-page block, because the rules it
 * has to beat (upload.css .container) carry no media query and would
 * otherwise win on specificity order alone.
 */

@media screen and (max-width: 767px) {

    /* Width is layout.css's job now, at every breakpoint, so the phone
       override that used to live here is gone. What is left below is
       genuinely phone-only behaviour. */
    .ct-wrap { padding-top: 1.25rem; }

    /* Cards were sized for a desktop column and keep a wide inner padding
       that eats what little width is left. */
    .ct-card,
    .feature-card {
        padding: 1rem .85rem;
        margin: .75rem 0 1.25rem;
    }

    /* 2.4rem of Orbitron does not fit a phone, and the step rail wraps into
       a stack rather than overflowing sideways. */
    .ct-title { font-size: 1.6rem; }
    .ct-landing .ct-title { font-size: 1.75rem; }
    .ct-tagline { font-size: .95rem; }
    .ct-steps { flex-wrap: wrap; justify-content: center; gap: .3rem; }
    .ct-step-sep { display: none; }

    /* The Builder's action bar is sticky at the bottom of a scrolling
       wrapper while the nav is fixed at the top and the mobile browser's own
       toolbar collapses on scroll. Pin it to the viewport instead, respect
       the home indicator, and reserve the space it occupies so the last
       control is not permanently underneath it. */
    .ct-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        border-radius: 0;
        padding: .7rem .75rem calc(.7rem + env(safe-area-inset-bottom));
        gap: .5rem;
        z-index: 1035;
    }
    /* Reserved on the wrappers themselves rather than via :has(), which
       older Android Chrome does not support and would silently skip,
       putting the last control back under the bar. */
    .ct-wrap { padding-bottom: 7rem; }
    .lib-wrap { padding-bottom: 7.5rem; }

    /* Wide content scrolls inside itself rather than pushing the page
       sideways. A page that scrolls horizontally on a phone reads as broken
       even when every element on it is correct. */
    body { overflow-x: hidden; }
    table,
    pre,
    .tablewrap { max-width: 100%; overflow-x: auto; }
}

/* Tall-phone and small-tablet range: the container is still doing too much,
   but the Builder can keep a little breathing room. */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .ct-wrap { width: 100%; padding-left: .5rem; padding-right: .5rem; }
}