/* ============================================================
   interaction.css — global focus, touch and scroll behaviour

   Loaded LAST on every page. That matters: nineteen rules across the
   stylesheets kill the outline on :focus, five of them without putting
   anything back. Rather than hunt each one, this file restores a single
   visible ring for keyboard users and lets those rules keep suppressing
   the outline for mouse clicks — which is what they were reaching for.

   The ring is deliberately !important. A focus indicator that a later
   component rule can silently remove is not an indicator.
   ============================================================ */

:root {
    --focus-ring-color: var(--primary, #c4a860);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}

/* Keyboard focus only — pointer clicks stay quiet. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: var(--focus-ring-offset) !important;
    /* Second ring in the background colour, so the indicator stays visible
       on top of a same-coloured surface. */
    box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset))
                var(--bg-body, #fff);
}

/* Inputs already carry their own border treatment; the outline alone is
   enough and the extra ring would clip inside dense table rows. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: none;
}

/* ── Touch ───────────────────────────────────────────────────────────────
   No 300ms tap delay, no blue flash box on iOS. */
a,
button,
[role="button"],
label,
summary,
input[type="checkbox"],
input[type="radio"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── Minimum hit area ────────────────────────────────────────────────────
   WCAG 2.2 target size. Applied to the controls the audit measured under
   44px: nav links, the language switcher, header pills and row actions.
   min-height rather than height so nothing that is already taller shrinks. */
.navbar-nav-link,
.navbar-nav-dropdown-trigger,
.navbar-nav-dropdown-link,
.lang-trigger,
.lang-choice,
.hamburger-btn,
.skip-link,
.action-link,
.pagination-link,
.nav-tile,
.nav-sheet-close,
.dash-settings-link,
.tasks-view-btn,
.view-toggle-btn,
.billing-period-btn {
    min-height: 44px;
}

.action-link,
.canvas-zoom-btn,
.hamburger-btn,
.lang-trigger {
    min-width: 44px;
}

/* Footer links are inline text but still have to be tappable. Padding rather
   than min-height so the line rhythm of the footer row survives. 0.7rem, not
   0.6: at 0.6 the box measured 42 px, just under the floor this file exists to
   hold. */
.footer-links a {
    display: inline-block;
    padding-block: 0.7rem;
}

/* ── Scroll containment ──────────────────────────────────────────────────
   Scrolling to the end of a dialog or a popover used to carry on scrolling
   the page underneath it. */
.ea-modal,
.ea-modal__form-body,
.navbar-nav-dropdown,
.loc-picker-popover,
.dash-upgrade-popup,
.table-panel,
.modal-backdrop {
    overscroll-behavior: contain;
}

/* The page must not scroll behind an open dialog. */
body.ea-modal-open {
    overflow: hidden;
}

/* ── Safe areas ──────────────────────────────────────────────────────────
   Keep fixed edges clear of the iPhone home indicator and notch. */
.navbar {
    /* --navbar-pad-x is the responsive side padding from navbar.css. This file
       loads last, so a literal floor here would win over every media query in
       it and keep phones at the 2rem desktop inset. */
    padding-left: max(var(--navbar-pad-x, 2rem), env(safe-area-inset-left));
    padding-right: max(var(--navbar-pad-x, 2rem), env(safe-area-inset-right));
}

/* .msg-toast-region carries its own safe-area offset in toast.css, where its
   bottom anchoring is defined — the two belong together. */
.editor-toast-region {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ── Typography niceties ─────────────────────────────────────────────── */
h1, h2, h3,
.dash-title,
.section-header h1 {
    text-wrap: balance;
}

p,
.section-subtitle,
.stat-label {
    text-wrap: pretty;
}

/* ── Motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}