/* Mobile / touch ergonomics.

   Small icon controls (copy icons, btn-sm row actions, modal close buttons) render
   ~16-31px, well under the ~44px touch guideline. Rather than growing them visually
   — which would reflow tables and toolbars — each gets an invisible ::before overlay
   extending its hit area. Where adjacent buttons' extended areas overlap, the
   topmost (later) element wins the tap, which is the normal tradeoff.

   Applies on coarse pointers (real touch devices at any size) and on narrow
   viewports (so a shrunk desktop window behaves the same and it's testable there). */

/* Phones: the header is fixed-cost real estate — every px trimmed from gaps and
   the select caret goes to the account name, which truncates hard at 375px. */
@media (max-width: 575.98px) {
    .app-header {
        gap: 0.5rem;
    }

    .account-selector-trigger {
        padding-right: 1.6rem; /* form-select reserves 2.25rem for the caret */
    }
}

@media (pointer: coarse), (max-width: 575.98px) {

    .btn-sm,
    .btn-close,
    .btn-system,
    .vm-icon-btn,
    .mobile-menu-icon,
    .np-copy {
        position: relative;
    }

    .btn-sm::before,
    .btn-close::before,
    .btn-system::before,
    .vm-icon-btn::before,
    .mobile-menu-icon::before,
    .np-copy::before {
        content: "";
        position: absolute;
        inset: -6px;
    }

    /* The inline copy icon is the smallest control in the app (~14px glyph). */
    .np-copy::before {
        inset: -9px;
    }
}