/* ───────────────────────────────────────────────────────────────────────
   09-mobile.css — defensive phone reflow.

   Loaded LAST so it wins specificity ties. The app's base mobile strategy is
   `body { zoom }` (see 01-base-statusbar.css): the whole desktop layout is
   scaled to 0.85 (≤960px) / 0.75 (≤640px). That keeps everything visible but
   several rows still overflow horizontally on a phone (iPhone 12 Pro). These
   rules add real reflow — wrap toolbars/param rows, stop fixed-width inputs
   from forcing horizontal scroll, and compact the header — at the ≤640px tier
   (the same breakpoint where the 0.75 zoom is already active on the phone).

   Everything here only loosens layout on narrow viewports, so it can't affect
   the desktop. !important is used where the target carries an inline style. */
@media (max-width: 640px) {
    /* --- Header: keep the right-side status cluster on ONE line and drop the
       version string to buy width. The badges used to wrap here, which put a
       second row of them over the page content; from 768px down they live in
       the ••• tray instead, so only Abort / Update / the toggle remain and
       they fit. --- */
    .status-bar { gap: 8px; }
    .status-bar-right {
        flex-wrap: nowrap;
        justify-content: flex-end;
        column-gap: 6px;
    }
    .brand-version { display: none; }
    /* Compact the wordmark to just "Polaris" on phones — the full
       "ASTRO CONTROLLER" tag is too wide for the status bar. */
    .brand-tag { display: none; }

    /* --- Param / control rows: wrap so the number inputs stack rather than
       pushing the row wider than the screen (POLAR RA/Exp/Settle/Gain, FOCUS
       Exposure/Gain/Interval/Min stars, etc.). --- */
    .control-row { flex-wrap: wrap !important; }
    .control-row.actions { flex-wrap: wrap !important; }

    /* Number fields with a hard pixel width are the usual overflow culprit;
       cap them to the column so they shrink with the viewport. */
    .input-sm { max-width: 100%; }

    /* --- File-browser / STUDIO toolbars (FILE TOOLS + PROCESSING TOOLS):
       ~16 labelled icons overflow one row. On a phone, wrapping to many rows
       eats vertical space and pushes the file list down; scroll the bar
       horizontally instead (one row, swipe sideways). Children keep their
       size (flex: 0 0 auto) so they don't squash. --- */
    .files-actions-icons {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
        scrollbar-width: thin;
    }
    .files-actions-icons > * { flex: 0 0 auto; }
    /* A slim, unobtrusive horizontal scrollbar so it's clearly swipeable. */
    .files-actions-icons::-webkit-scrollbar { height: 8px; }
    .files-actions-icons::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--accent) 45%, transparent);
        border-radius: 4px;
    }

    /* --- AF param grid (FOCUS) wraps too. --- */
    .af-params { flex-wrap: wrap; }
}

/* ───────────────────────────────────────────────────────────────────────
   Landscape phones. A phone held sideways (e.g. iPhone 17 Pro Max) is WIDE
   (~950 px, so the width-keyed zoom above stays at 0.85 on the full desktop
   layout) but only ~400-450 px TALL. The result: the 15-item nav rail and the
   panels overflow the short height, and everything feels oversized. The width
   tiers can't catch this — a landscape phone isn't "narrow". Key off
   orientation + a short height instead. Tablets in landscape are ≥700 px tall,
   so they never match; portrait phones are tall, so they keep the 0.75 tier. */
@media (orientation: landscape) and (max-height: 520px) {
    /* Scale down further so more fits vertically (and the UI stops feeling
       huge). On a 3x-retina phone the smaller CSS px stay crisp; this only
       trims the generous desktop spacing. Wins over the 0.85 width tier
       because this file loads last. */
    body { zoom: 0.72; }

    /* Reclaim vertical space from the fixed chrome. */
    .status-bar { padding-top: 4px; padding-bottom: 4px; }

    /* Compact the nav rail so more of the ~15 tabs are visible before it has
       to scroll. */
    .nav-btn { padding: 6px 4px; gap: 2px; }

    /* Landscape is wide, but still apply the reflow niceties so nothing forces
       a horizontal scroll if a row is unusually long. */
    /* The focus nudge row is exempt: four arrows that mean "out fast, out,
       in, in fast" only read as a group side by side, and wrapping them
       breaks that reading before it saves any width. */
    .control-row:not(.preview-focus-btn-row),
    .control-row.actions,
    .af-params { flex-wrap: wrap !important; }
    .input-sm { max-width: 100%; }
    .files-actions-icons {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .files-actions-icons > * { flex: 0 0 auto; }
}