/* ───────────────────────────────────────────────────────────────────────
   15-touch-targets.css — ≥44×44 hit areas for the app shell.

   Loaded last, so it can widen a control's hit area without restyling the
   control itself. Two rules hold everywhere in this file:

   1. TOUCH ONLY. Every declaration lives inside @media (pointer: coarse),
      so the mouse layout (1920×1080 and every other fine-pointer width) is
      untouched. Coarse also matches touch tablets ≥769px — intended: the
      pointer, not the viewport, is what makes 44px necessary (WCAG 2.5.5 /
      Apple HIG / Material 48dp).

   2. NO VISUAL CHANGE. Controls keep the size they paint at; only the hit
      area grows, via a centred transparent ::after that inflates to 44×44
      while the box stays put:

          .sel          { position: relative; }
          .sel::after   { content: ''; position: absolute;
                          top: 50%; left: 50%;
                          transform: translate(-50%, -50%);
                          width: 100%; height: 100%;
                          min-width: 44px; min-height: 44px; }

      Nothing is painted (no background, no border) and the overlay is part
      of the control, so a tap on it still fires the control's handler.
      44px is the accessibility floor, not a spacing value — it has no
      --space-* token and must stay in CSS px.

   Where the overlay is the WRONG tool, and what is used instead:
     • Stacked full-width rows (drawer nav links, drawer dropdown items).
       Adjacent overlays would overlap and the later row would simply take
       the shared band back — no net gain. Those rows get min-height
       instead; their text is already vertically centred and their
       background only paints on :active, so the growth is invisible.
     • Links inside a sentence (login card footer). A 44px overlay would
       occlude the link beside it, so those get vertical padding only:
       padding on a non-replaced INLINE box expands the hit area without
       affecting the line box, so no text reflows.

   Controls that are ALREADY position:absolute (the login/register theme
   toggle, the casual modal ✕s, the info-drawer close) are their own
   containing block, so they get the ::after with no position declaration —
   writing position:relative on them would move them back into flow.
   ─────────────────────────────────────────────────────────────────────── */

@media (pointer: coarse) {

    /* ═══ Navbar ═══════════════════════════════════════════════════════ */

    /* The hamburger is the PRIMARY nav control and ships at 40×33. Its
       z-index:10 is inert while it is static and becomes live here; the
       drawer (.nav-user) sits at --z-fullscreen, so opening order is
       unchanged. */
    .hamburger-toggle {
        position: relative;
    }

    /* .login-theme-toggle and the coach drawer's toggle are absolutely
       placed by 10-themes/13-casual; those keep their own positioning
       (higher specificity, or an explicit static this list matches). */
    .navbar .theme-toggle,
    .nav-user .theme-toggle,
    .nav-drawer-footer .theme-toggle,
    .login-top-row .login-theme-toggle {
        position: relative;
    }

    .hamburger-toggle::after,
    .theme-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }

    /* ═══ Mobile nav drawer ════════════════════════════════════════════ */

    .nav-drawer-close,
    .nav-drawer-footer .nav-logout {
        position: relative;
    }

    .nav-drawer-close::after,
    .nav-drawer-footer .nav-logout::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }

    /* Drawer rows. Scoped to ≤768px like every other drawer rule (07-mobile)
       because ≥769px this same markup IS the horizontal top bar
       (.nav-drawer-links { display: contents }) — a min-height there would
       grow the navbar on touch tablets. */
    @media (max-width: 768px) {

        .nav-drawer-links>.nav-link,
        .nav-drawer-links .nav-dropdown-trigger,
        .nav-drawer-links .nav-dropdown-item,
        .nav-user.drawer-active .nav-right-group .nav-link {
            min-height: 44px;
        }

        /* The platform switcher gets HEIGHT ONLY, and only here. Its segments
           are horizontally adjacent with a 2px gap, and at 769–1250px they
           collapse to 26px icon-only boxes (07-mobile.css:141) — a centred
           44px overlay would overhang ~9px per side and the later sibling
           would win the hit test, so tapping the edge of "School" would fire
           goPlatform('host'). Below 768px the segments are flex:1 and already
           wide enough; only their 37px height was short. */
        .nav-plat-opt {
            min-height: 44px;
        }
    }

    /* ═══ Modals & slide-out panels ════════════════════════════════════ */

    .modal-close,
    .gsx-modal-close,
    .guide-drawer-close {
        position: relative;
    }

    .modal-close::after,
    .gsx-modal-close::after,
    .guide-drawer-close::after,
    .solo-modal-x::after,
    .solo-statmodal-x::after,
    .info-drawer-panel .drawer-close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }

    /* ═══ Login / register screen ══════════════════════════════════════ */

    /* The login card stacks its controls a few px apart, so centred 44px
       overlays here would OVERLAP each other and the later sibling would win
       the hit test — a tap near the edge of "Scores & Results" could fire the
       QR button. Measured 0/4 reachable that way. These get real height
       instead, which pushes siblings apart rather than fighting them. */
    .login-qr-btn,
    .login-more-toggle {
        min-height: 44px;
    }

    .login-live-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Isolated square in the card's top row — no vertical neighbour within
       44px, so an overlay is safe here and keeps the 30px visual. */
    .login-theme-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }

    /* ═══ Inline text links ════════════════════════════════════════════
       Terms / Privacy / GolfStax.com sit inside sentences and stacked
       micro-rows on the login card, plus the desktop footer's © line.
       Vertical padding only: horizontal padding on an inline box WOULD
       shift the text after it, and a centred overlay would cover the link
       next to it. Height reaches ~40px; the last few px need more vertical
       room between the rows in index.html (not owned here). */
    .login-more-links a,
    .login-consent-note a,
    #loginScreen .login-box a[href="terms.html"],
    #loginScreen .login-box a[href="privacy.html"],
    #loginScreen .login-box a[href="/"],
    .footer-left a {
        padding-block: var(--space-3);
    }

    /* ═══ Buttons & inline actions ═════════════════════════════════════
       .gsx-btn is the shared button primitive (40px tall, 32px for -sm), so
       one overlay lifts every instance. The navbar's own controls
       (#appShellNav .nav-shell-theme / .solo-bell) already carry a real
       44px min box in 01-foundation; the overlay resolves to their exact
       size there and changes nothing. */
    .gsx-btn,
    .solo-help-tip-main,
    .solo-cklist-x {
        position: relative;
    }

    .gsx-btn::after,
    .solo-help-tip-main::after,
    .solo-cklist-x::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }

    /* ═══ School CONTENT screens ═══════════════════════════════════════
       This file originally covered the app SHELL only (96bb9cb). The content
       screens kept sub-44px controls: roster row actions at 16x23 / 24x26,
       "+ Add Player" 117x32, the practices actions at 175x40 / 136x40, and the
       billing year toggle at 116x31 / 132x31.

       These take REAL SIZE, not a centred ::after overlay. Every one sits
       directly beside a sibling, and an overlay wider than its host reaches over
       the neighbour and wins the hit test — measured, 3 of 4 corner probes
       landed on the WRONG control. Growing the box pushes siblings apart
       instead, so each control owns its whole target. (The shell's isolated
       leaf controls above keep their overlays, where that hazard is absent.) */
    .btn-xs,
    .gsx-btn-sm,
    .roster-stats-btn,
    .roster-remove-btn,
    .billing-tab,
    .sub-billing-tab,
    #dashPracticesSection .btn {
        min-height: 44px;
    }

    /* The roster row icons are only ~16-24px wide, so height alone leaves the
       target narrow; pad horizontally to carry it sideways too. */
    .btn-xs,
    .roster-stats-btn,
    .roster-remove-btn {
        min-width: 44px;
        padding-inline: var(--space-2);
    }

    /* ═══ Admin screens ════════════════════════════════════════════════
       Same story as the School content screens: the shell pass never reached
       them. Measured 375x812 — userManagement 28x28 / "Add User" 106x32 / 36x32,
       auditLog tabs 98x33, platformSettings 26x26 and an 81x17 text link,
       systemHealth "Refresh" 93x32.

       Real size again, not overlays: these sit in toolbars and tab bars, i.e.
       always beside a sibling. */
    .audit-tab,
    .btn-sm,
    .btn-ghost,
    #umAddUserBtn {
        min-height: 44px;
    }

    /* Icon-only toolbar buttons need the width carried too. */
    .btn-sm.btn-ghost,
    .btn-icon-sm {
        min-width: 44px;
    }

    /* ═══ Checkbox rows (TASK-AS) ══════════════════════════════════════
       The box paints 18px, but the WRAPPING LABEL is the real control —
       tapping anywhere on it toggles the input — so the label takes the
       44px floor. Real size, not overlays: the two cost labels sit side
       by side and an overlay would reach over the neighbour. Both are
       flex with centred content, .cost-check-label paints no background,
       and .toggle-label already renders ~46px, so nothing visibly moves
       on screens that were already tall enough. */
    .toggle-label,
    .cost-check-label {
        min-height: 44px;
    }
}