/* ============================================================================
   Phone-only topbar overrides.

   Loaded AFTER app-topbar.css so these win, and every rule sits inside a
   max-width media query — desktop and tablet render exactly as before.

   Problem this solves: on a ~360-390px screen the title row carries four
   competing items — [FY select][Month select] | [page title] [Go Back] — plus
   the hamburger and the "..." cluster. The page title is the only flexible one,
   so it collapsed to "GST...". There is no spare vertical space to move it to
   its own line, so instead we reclaim horizontal space from the three fixed
   items around it and hand it all to the title.

   Budget on a 390px screen, roughly:
     Go Back label -> icon only   ~48px
     smaller FY / month pills     ~26px
     divider removed              ~11px
     tighter gaps + padding       ~14px
                                  ------
                                  ~99px back to the title
   ============================================================================ */

@media (max-width: 767.98px) {

    /* ---- Reclaim the outer gaps ------------------------------------------ */
    .spq-topbar { padding: 6px 8px; gap: 6px; }
    .spq-topbar__title-row { gap: 6px; }

    /* The hamburger is a 40px square of mostly padding; 36 is still a legal
       target once the row's own height is counted. */
    .spq-topbar__toggle { width: 36px; }

    /* ---- The title is the point of this file ------------------------------ */
    .spq-topbar__page-title {
        flex: 1 1 auto;
        min-width: 0;
        /* Slightly tighter than the 0.92rem the base mobile block sets, which
           buys another two or three characters without reading as small. */
        font-size: .88rem;
        letter-spacing: -.01em;
    }

    /* Purely decorative, and it costs the title a character. */
    .spq-topbar__title-divider { display: none !important; }

    /* ---- FY / month pills: same controls, less chrome --------------------- */
    .spq-topbar__title-row .tiny-select {
        font-size: .72rem !important;
        padding: 3px 14px 3px 3px !important;
        background-position: right 2px center !important;
        background-size: 8px !important;
    }
    .fs-periodbtn {
        gap: 4px;
        padding: 3px 5px;
        font-size: .72rem;
    }
    /* The calendar glyph duplicates what the month text already says. */
    .fs-periodbtn > .fa-calendar,
    .fs-periodbtn > .fa-regular.fa-calendar { display: none; }

    /* ---- Go Back: icon only ---------------------------------------------- */
    /* The chevron alone reads as "back" on a phone; the word is desktop
       affordance. Keep the accessible name via the button's title attribute. */
    .spq-go-back-text { display: none !important; }
    .spq-go-back-btn {
        position: relative;
        gap: 0;
        width: 28px;
        padding: 0;
    }
    /* Invisible hit area: 28px + 8px on every side = a 44px touch target,
       without a 44px button visually bullying the 26px pills next to it. */
    .spq-go-back-btn::after {
        content: "";
        position: absolute;
        inset: -8px;
    }

    /* ---- Very small phones (<=360px) ------------------------------------- */
    /* Last resort: the year is inferable from the month pill and the period
       dialog, so let it shrink hardest before the title gives up any more. */
    @media (max-width: 360px) {
        .spq-topbar { padding: 6px 6px; }
        .spq-topbar__title-row .tiny-select { font-size: .68rem !important; }
        .fs-periodbtn { font-size: .68rem; }
        .spq-topbar__page-title { font-size: .85rem; }
    }
}