/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · UX LANE 4 · ACCESSIBILITY styles  (pairs with ux/a11y.js)
   Everything here is invisible until it is needed: the skip link shows on
   focus, rings show on keyboard focus, motion stops when asked. The only
   always-on changes are the colours that measured under WCAG AA.
   ══════════════════════════════════════════════════════════════════ */

/* ── screen-reader-only text (h1, live region) ── */
.ax-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ── skip link: off-screen until focused ── */
.ax-skip{position:fixed;left:12px;top:-60px;z-index:10000;padding:10px 16px;border-radius:10px;
  background:#ffd21f;color:#0b0710!important;font:900 14px/1 Inter,system-ui,sans-serif;text-decoration:none;
  border:3px solid #0b0710;box-shadow:4px 4px 0 #0b0710}
.ax-skip:focus{top:12px;outline:3px solid #22e3ff;outline-offset:2px}

/* ── keyboard focus ring everywhere (inputs keep the skin's own cyan ring) ──
   a11y.js measures what is behind each focused control: cyan where cyan reads,
   ink where the control sits on paper (cyan on cream measures ~1.3:1). */
:is(a,button,summary,[role=button],[role=tab],[tabindex]:not([tabindex="-1"]),canvas[tabindex]):focus-visible{
  outline:3px solid var(--cool,#22e3ff)!important;outline-offset:2px!important}
[data-ax-ring=ink]:is(a,button,summary,[role=button],[role=tab],[tabindex]):focus-visible{outline-color:#0b0710!important}
#main:focus,#main:focus-visible{outline:none!important}           /* skip-link target, not a control */
#cv:focus-visible{outline-offset:-3px!important}                    /* the canvas fills the stage edge to edge */
.sq.ax-kbclick:focus-visible{outline:4px solid #22e3ff!important;outline-offset:-4px!important;box-shadow:inset 0 0 0 6px #0b0710}
.pcard.ax-kbclick:focus-visible{outline:3px solid #22e3ff!important;outline-offset:2px!important;transform:translateY(-6px)}
.ax-tablist{display:contents}

/* ── reduce-motion footer toggle: reads like the fine print it sits in ── */
.ax-motion{all:unset;cursor:pointer;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;border-radius:4px}
.ax-motion[aria-pressed=true]{font-weight:800}

/* ── contrast fixes (measured, see test/ux-lanes/a11y.md) ── */
.foot a,.tag{color:#cdbde4}                                         /* #bda9d8 on #4d4639 = 4.37 → 5.17 */
.tile .bdg.pick,.card .flash,.cab-btn.hot{background:#e0125f}                    /* white on #ff2d78 = 3.56 → 4.75 */
.board-row .go[style*="opacity"]{opacity:.62!important}             /* quest IN PROGRESS / LOCKED: 3.38 → 5.10 */
/* wager header: the skin paints every <nav> oak (#b07d4a) but these links kept lavender */
nav.nav > a:not(.on):not(:hover){color:#0b0710}                     /* #bda9d8 on oak = 1.67 → 5.60 */
td .pname{filter:brightness(.5) saturate(1.4)}                      /* player colour on paper: teal 1.8 raw / ~4.4 at .62 → ≥5 */
.rank1{color:#8a5f00!important}                                     /* #b07a00 on paper = 3.60 → 5.45 */
#somaMark{opacity:.85!important}                                    /* cyan @ .55 on chalkboard = 3.02 → ~5.2 */

/* ── reduce motion: OS setting OR the toggle (html.ax-calm) ── */
html.ax-calm *,html.ax-calm *::before,html.ax-calm *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.ax-calm{scroll-behavior:auto!important}
/* things whose END state is wrong (a marquee ends off-screen), so stop them instead of finishing them */
html.ax-calm .tape-in{animation:none!important;padding-left:var(--gut,16px)!important}
html.ax-calm .burst,html.ax-calm .pop .shout,html.ax-calm .tipjar .jar .coin,
html.ax-calm .live-dot,html.ax-calm .stat.hero::after{animation:none!important}
html.ax-calm .reveal.in{animation:none!important;opacity:1!important}
html.ax-calm .px-pill::after{display:none!important}
html.ax-calm .confetti{display:none!important}
html.ax-calm .so-box,html.ax-calm .so-nudge,html.ax-calm .so-btn.like.pulse{animation:none!important}
html.ax-calm .tile:hover,html.ax-calm .tile:focus-visible,html.ax-calm .card:hover{transform:none!important}