/* ============================================================
   MUIY — Accessibility layer (loads LAST, after app.css)
   Focus visibility, reduced-motion, tap-target floors, SR-only
   helper, and a small contrast lift on the lightest meta tone.
   Deliberately additive — no layout/colour redesign.
   ============================================================ */

/* --- Visible keyboard focus on every interactive control ---
   Pointer users never see it (:focus-visible); keyboard/AT users always do. */
:where(button, a, input, select, textarea, [role="button"], [role="switch"],
       [role="radio"], [role="tab"], [tabindex]):focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 2px;
  border-radius: 9px;
}
/* keep the nav pills’ focus ring tucked inside the floating bar */
.nav button:focus-visible { outline-offset: -3px; border-radius: 14px; }
.switch:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* --- Tap-target floors (WCAG 2.5.5) --- */
.nav button { min-width: 44px; min-height: 44px; }
.icon-btn { min-width: 36px; min-height: 36px; }

/* --- Screen-reader-only utility --- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- A small legibility lift for the lightest meta text ---
   --ink-3 was the lowest-contrast tone; nudge it darker in each theme
   so 11–12px secondary text is easier to read, without touching layout. */
.screen[data-theme="light"] { --ink-3: #8B8173; }
.screen[data-palette="lagoon"][data-theme="light"] { --ink-3: #74898B; }
[data-theme="dark"] .tc-app, [data-theme="dark"].screen { --ink-3: #938977; }

/* --- Respect reduced-motion globally ---
   The app uses staggered entrances + sky animations; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .stagger { opacity: 1 !important; transform: none !important; }
}