/* ============================================================================
   THE PHONE FIT — the empty state, the gutter, and the slack
   ----------------------------------------------------------------------------
   Owner brief, 2026-09-13, with 26 screenshots of the app: "too much spaces,
   uneven alignment, spaces not divided equally between the related tools area
   and dropdown area from the border. some has old dropdown zone and some has
   old ugly ui."

   MEASURED FIRST, IN BRAVE AT 390x844, isMobile + hasTouch, IN APP MODE:

     what                              spread across the 21 reported pages
     zone inset from the card           6px  ..  104px   (photo-collage l34/r6)
     dead slack under the zone         17px  .. 1066px   (photo-enhancer)
     card bottom -> RELATED TOOLS      48px  ..  152px

   The related-tools divider sits at 16px from the screen edge on every one of
   them, so the zone at 104px and the zone at 6px are both visibly out of step
   with the one band that never moves. That is the "not divided equally".

   THE THREE RULES, AND WHY EACH IS A RULE AND NOT A NUMBER PER PAGE
   ----------------------------------------------------------------
   1. A ZONE SPANS ITS CARD. Not a width this file invents -- the card's own
      content box, which is the same box the related-tools divider is measured
      from. Every page then has one gutter and it is the page's own.
   2. NOTHING RESERVES HEIGHT IT IS NOT USING. A min-height sized for a loaded
      editor is 600px of nothing while the editor is empty (image-cropper).
   3. THE EMPTY STATE IS THE DROP ZONE. Owner's call, 2026-09-13, given against
      a mock: settings, editor panels, toolbars and result docks do not exist
      until there is a file. They come back the instant one arrives.

   WHY THE DECLARATIONS ARE !important
   -----------------------------------
   Identical reason to assets/css/tool-scale.css, whose header has the counts:
   these 21 pages carry their drop-zone and panel rules in an inline <style>
   block, and a linked stylesheet loses to a two-class inline rule wherever it
   sits. This file is linked last in <head>, after the page's own block, and
   still needs the flag against the three-class selectors.

   The same guard tool-scale.css keeps: !important appears ONLY on geometry --
   size, spacing, display. THIS FILE SETS NO COLOUR. Not a background, not a
   border colour, not a shadow, not a text colour. The 2026-08-03 sitewide skin
   was reverted inside a day for exactly that (memory/traps/glass-design-layer.md)
   and tests/tool-scale/no-colour.verify.mjs is the standing gate on the idea.

   WHY max-width: 899px
   --------------------
   The brief is the phone. Desktop has the room these pages were laid out for
   and nothing in the report is about it, so the desktop picture is untouched --
   the same line tool-scale.css draws, at the same width, so the two layers
   never disagree about where the phone starts.

   THE MARKUP CONTRACT — four attributes, hand-placed, one page at a time
   ---------------------------------------------------------------------
     data-pf-zone    the drop zone. Spans the card, keeps its own height.
     data-pf-fit     a box whose reserved height is only right once loaded.
     data-pf-later   chrome that must not exist before a file does.
     data-pf-gap     the last band in the tool; owns the gap to RELATED TOOLS.

   Hand-placed and never inferred. The generic tagger already inline on these
   pages guesses at layout from shape, and its own comment records what that
   cost: "a preset grid became a one-line horizontal strip".

   LOADED BY: a <link> before </head> on the 21 pages of the 2026-09-13 report,
   inserted by scripts/apply-phone-fit.mjs --check.
   ========================================================================= */

@media (max-width: 899px) {

    /* ═══ 1. ONE GUTTER ═════════════════════════════════════════════════════
       The zone fills the box it is in, so its distance from the screen edge is
       its card's padding -- the same measurement the related-tools divider is
       already showing. Margins go because several pages centre a fixed-width
       zone with `margin: 0 auto`, which is what put one at 104px.
       ──────────────────────────────────────────────────────────────────── */
    .tool-scope [data-pf-zone],
    [data-pf-zone] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        /* The zone is a flex or grid child on 9 of these pages and the parent
           centres it. `width:100%` alone loses to that, and `width:auto` made
           blur-image's zone 81px NARROWER than it was before this file existed:
           an auto-width flex item is its content. Both axes have to say stretch. */
        align-self: stretch !important;
        justify-self: stretch !important;
        flex: 1 1 auto !important;
    }

    /* ═══ 1b. THE ANCESTOR THAT WAS HOLDING THE ZONE IN ══════════════════════
       A zone flush against its own parent is still inset by whatever that
       parent is padded by, and measured on these pages that is where the 104px
       came from -- not from the zone at all. Marked per page rather than
       swept, because a wrapper's padding is load-bearing the moment the tool
       has a file in it and this only ever runs on the empty state's chain.
       ──────────────────────────────────────────────────────────────────── */
    html:not(.pf-file) [data-pf-flush] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* A zone that was centring its own contents keeps doing so now that it is
       wider; one that was not would leave its prompt against the left edge.
       EMPTY STATE ONLY (fixed 2026-09-22): an unconditional display:flex
       !important beat both the page's own `hidden` and its inline
       display:none, so on a phone the drop zone stayed on screen over the
       photo after a file had loaded (add-text-to-image, found by the Stage 7
       flow gate). Once there is a file the page decides whether its zone
       shows. */
    html:not(.pf-file) .tool-scope [data-pf-zone] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* ═══ 2. NO RESERVED SLACK ═══════════════════════════════════════════════
       EMPTY STATE ONLY, and that is the correction that makes this safe. A
       600px min-height is not wrong -- it is right for the workspace that
       appears once a file is in the tool, and it was only ever 600px of nothing
       while the workspace was empty. Same for the flush above: a wrapper's
       padding is load-bearing the moment there is something in it to pad.
       ──────────────────────────────────────────────────────────────────── */
    html:not(.pf-file) [data-pf-fit] {
        min-height: 0 !important;
        height: auto !important;
    }

    /* ═══ 3. THE EMPTY STATE IS THE DROP ZONE ════════════════════════════════
       Keyed on <html>, so one class flips the whole page at once and the rule
       costs nothing while it is off. `display:none` and not visibility: these
       are tall boxes and a laid-out-but-hidden panel is the dead space this
       file exists to remove.

       tool-phone-fit.js adds .pf-file in the CAPTURE phase of the change/drop/
       paste that carries the file, so the panels are back in the layout before
       the page's own handler runs and measures them. A canvas sized while its
       parent was display:none is 0x0 for the life of the page.
       ──────────────────────────────────────────────────────────────────── */
    html:not(.pf-file) [data-pf-later] {
        display: none !important;
    }

    /* THE DOCK IS BUILT AT RUNTIME, SO IT CANNOT CARRY THE ATTRIBUTE.
       Every image-tools page ships an inline adapter that mirrors the tool's
       primary action into a fixed bottom bar. With no file loaded that bar said
       "Download Options" over an empty tool -- top of the owner's screenshots of
       image-frame and add-text-to-image. The adapter is on all 48 pages of the
       category and this stylesheet is on 21 of them, so the rule reaches only
       the pages of this round. */
    html:not(.pf-file) .mobile-dock {
        display: none !important;
    }

    /* ═══ 3b. THE WEBSITE'S OWN GUTTER ═══════════════════════════════════════
       Measured at 390px on the website (not the app) across the 21 pages: the
       related-tools section is padded 24px on every single one, and .tool-outer
       — the only box that decides where the tool card starts — is 24px on 17 of
       them, 12px on the three pdf pages and 0px on add-text-to-image. So four
       pages showed a tool that was 12 to 24px wider than the block under it,
       which is the owner's "not divided equally" on the website side.

       A no-op on the seventeen that already say 24. Scoped away from the app,
       where app-mode.css owns this gutter and sets a tighter one on purpose —
       the app's card has no ring around it, so it does not need the inset the
       website's does, and the two must not fight over the same box.
       ──────────────────────────────────────────────────────────────────── */
    html:not(.app-mode) .tool-outer {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* ═══ 4. THE BAND GAP ════════════════════════════════════════════════════
       48-152px measured; 32px is tool-scale.css's own rhythm at this width.
       ──────────────────────────────────────────────────────────────────── */
    [data-pf-gap] {
        margin-bottom: 32px !important;
    }

    /* The card stops carrying the margin too -- doubling is how 152px happened
       on image-resizer: a 32px container margin under a 120px one. */
    html:not(.pf-file) [data-pf-gap] > *:last-child {
        margin-bottom: 0 !important;
    }
}