/**
 * xot-touch-target — WCAG 2.5.5 AAA touch-target baseline (44×44 CSS px).
 *
 * v2 2026-05-12 — Narrowed after v1 substring-pattern regression that
 * matched container classes (`.xot-article__actions`, `.xda__actions`,
 * `.xot-cb__actions`, etc.) and overlaid them with a `::after` that
 * captured every click in the container, routing to the container's
 * host element (which had no click handler) — so the buttons inside
 * never received their clicks. v2 uses ONLY element selectors and
 * explicit ARIA roles. No substring class matchers anywhere.
 *
 * Coverage:
 *   - Every native <button> element (catches the v1 regression victims:
 *     Listen, Save, Share, Copy Link, Sign Out, Password, Privacy, etc.)
 *   - <summary> (accordion toggles)
 *   - Elements with explicit role="button | link | menuitem | tab"
 *   - .xot-hit44 (opt-in utility class for one-off cases)
 *
 * Known AAA gaps (meet WCAG 2.5.8 AA at 24×24 minimum):
 *   - <a> tags acting as buttons WITHOUT explicit role attribute
 *     (pagination chips, share-menu items, skip link). To enrol such
 *     elements: add role="link" attribute in the PHP/HTML, OR add the
 *     .xot-hit44 class. Theme-wide opt-in is deferred to avoid the
 *     "touch every template" risk that v1 created.
 *
 * Opt-OUT for elements that legitimately need a smaller hit area
 * (e.g., inline drag handles, tightly-packed editor controls):
 *   - data-no-hit-area="1" attribute on the element, or
 *   - .xot-hit-area-skip class
 *
 * Components that already use ::after for visual decoration (e.g., the
 * shimmer animation on .mu-digest__btn at page-music.css:679) preserve
 * their existing styles automatically — their un-layered class-specific
 * ::after rules win against this layered @layer base rule via the
 * cascade. No explicit skip-list needed.
 *
 * The pattern (applied to each enrolled host):
 *   .host { position: relative; }
 *   .host::after {
 *       content: "";
 *       position: absolute;
 *       inset: 50%;
 *       block-size: max(100%, 44px);
 *       inline-size: max(100%, 44px);
 *       transform: translate(-50%, -50%);
 *       pointer-events: auto;
 *   }
 *
 * `inset: 50%` + the negative translate centres the ::after on the host.
 * `max(100%, 44px)` means buttons already ≥44 get no over-extension; only
 * sub-44 buttons get the extension. Pseudo-element clicks route to the
 * generating host via browser hit-testing (verified pattern — Apple HIG,
 * Material, GOV.UK, Primer, Spectrum all use this).
 *
 * @since v1.1 — Phase 5 a11y close (item 3 of 5: touch target baseline)
 */

@layer base {
    /* Replaced elements (form-submit inputs) — cannot host ::after,
       so min-size directly. Submit / button / reset are designed buttons
       in forms; bumping them to 44px is acceptable (forms have stack
       layout, no rhythm to break). Native checkbox/radio left untouched
       per WCAG 2.5.5 UA-control exemption. */
    input[type="submit"]:not([data-no-hit-area="1"]),
    input[type="button"]:not([data-no-hit-area="1"]),
    input[type="reset"]:not([data-no-hit-area="1"]) {
        min-block-size: 44px;
        min-inline-size: 44px;
    }

    /* Hosts — only element selectors and explicit ARIA roles.
       NO substring class matchers (those caught containers in v1).
       Opt-out is consistent: every selector below excludes elements with
       data-no-hit-area="1" attribute OR .xot-hit-area-skip class — so
       opt-out wins regardless of opt-in. */
    button:not([data-no-hit-area="1"], .xot-hit-area-skip),
    summary:not([data-no-hit-area="1"], .xot-hit-area-skip),
    [role="button"]:not([data-no-hit-area="1"], .xot-hit-area-skip),
    [role="link"]:not([data-no-hit-area="1"], .xot-hit-area-skip),
    [role="menuitem"]:not([data-no-hit-area="1"], .xot-hit-area-skip),
    [role="tab"]:not([data-no-hit-area="1"], .xot-hit-area-skip),
    .xot-hit44:not([data-no-hit-area="1"], .xot-hit-area-skip) {
        position: relative;
    }

    /* Hit-area extension via ::after. Same opt-out applied. */
    button:not([data-no-hit-area="1"], .xot-hit-area-skip)::after,
    summary:not([data-no-hit-area="1"], .xot-hit-area-skip)::after,
    [role="button"]:not([data-no-hit-area="1"], .xot-hit-area-skip)::after,
    [role="link"]:not([data-no-hit-area="1"], .xot-hit-area-skip)::after,
    [role="menuitem"]:not([data-no-hit-area="1"], .xot-hit-area-skip)::after,
    [role="tab"]:not([data-no-hit-area="1"], .xot-hit-area-skip)::after,
    .xot-hit44:not([data-no-hit-area="1"], .xot-hit-area-skip)::after {
        content: "";
        position: absolute;
        inset: 50%;
        block-size: max(100%, 44px);
        inline-size: max(100%, 44px);
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }
}