/* ==========================================================================
   Quality (v3 D): accessibility fixes. Loaded after styles.css.
   See docs/ACCESSIBILITY.md for the findings behind each rule.
   ========================================================================== */

/* Dim text (#6c6c80) was 3.9:1 on the background. This shade is 5.0:1 on
   --surface2 and higher on everything darker. */
:root { --dim: #8a8aa0; }

/* Inputs had outline: none and relied on a 1px border change. Give keyboard
   focus the same ring as everything else. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}
.pick:focus-visible, .act:focus-visible, .tab:focus-visible, .card-more:focus-visible {
  outline: 3px solid var(--accent-hi);
  outline-offset: 3px;
}

/* Headings get focus on route change (public/js/a11y.js) so screen readers
   start at the top of the new page. They are not controls, so no ring. */
[data-route-focus]:focus { outline: none; }

/* "Reload" button inside the update toast (public/js/pwa.js). */
.toast-body .link-btn { padding: 0; font-size: inherit; color: var(--text); }

/* Reduced motion: no card fling, no confetti, no looping decoration.
   styles.css already shortens durations globally. These make sure the big
   moves are gone entirely, including inline transitions set by deck.js. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .confetti { display: none !important; }
  .swipe-card, .swipe-card.gone, .stamp { transition: none !important; }
  .swipe-card.gone { visibility: hidden; }
  .match-title, .m-left, .m-right, .m-heart, .match-kicker, .match-text, .match-actions,
  .ai-orb, .ai-orb svg, .pulse, .track li.now i, .pr-track i.now,
  .onb-body {
    animation: none !important;
  }
  .ai-bar i { transition: none !important; }
}