/* ============================================================================
   wl-ux.css — Writelio shared UX layer
   Loaded AFTER each page's own <style>. Purely ADDITIVE — adds accessibility
   affordances without restyling existing components.
   Scope: all app/auth/marketing pages EXCEPT the editor and pipeline.
   ========================================================================== */

/* 1. Always-visible keyboard focus ----------------------------------------- *
 * Gated on :focus-visible so it appears for keyboard / programmatic focus but
 * NOT on mouse clicks — existing pointer UX is unchanged. !important guarantees
 * focus is never invisible even on elements that set `outline:none` on :focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--brand, #734ad3) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm, 6px);
}

/* Never show the focus ring for pointer interactions (older engines that lack
   :focus-visible support fall back to the UA default, which is acceptable). */
:focus:not(:focus-visible) {
  outline: none;
}

/* 1b. Tertiary-text contrast ---------------------------------------------- *
 * --t3 (#475569) on the near-black app bg is ~3.2:1 — fails WCAG AA, yet it is
 * used for labels/helper text/dates across every page. Bumped here (loads last,
 * so it overrides each page's :root) to ~4.7:1 on dark / ~5:1 on light, while
 * staying visibly dimmer than --t2. One place; easy to tune or revert. */
:root { --t3: #6e7d94; }                 /* dark bg: ~4.7:1 (was ~3.2:1) */
[data-theme="light"] { --t3: #475569; }  /* light bg: dark slate, ~7:1 — keeps light mode strong */

/* 1c. Modal width on small screens ----------------------------------------- *
 * Cap the dialog box (direct child of a modal overlay) so fixed-px modals never
 * overflow a phone viewport. Only narrows below 768px; desktop untouched. */
@media (max-width: 768px) {
  .modal-overlay > *, .ws-modal-overlay > *, .wl-ws-overlay > * {
    max-width: 94vw !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* 2. Respect reduced-motion preference ------------------------------------- *
 * Users who ask their OS to reduce motion get near-instant transitions and a
 * single iteration of any looping animation (pulses, spinners settle quickly). */
@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;
  }
}