/* Accessibility and micro-interaction pass, Oct 28 2026 (design1028a). Loaded after app.ux1027.css.
   Survey of the signed-in Guild HQ page (Oct 28): 75 text nodes under 13 px (eyebrows 12.5, muted notes 12, small
   buttons 12, tags 11–11.5), 10 tap targets under 24 px (checkboxes 13×13, the "Show more" button 23 px tall),
   no h1 on inner pages. Reduced-motion rules already cover the animations (15 rules, 29 keyframes). */

/* ---------------------------------------------------------------- text floor */
/* Sentences and labels: 13 px minimum. Tags, counts and chips: 12 px minimum (short, uppercase, high contrast). */
.eyebrow, .sample, .btn.sm, .ux-more, .tb-note, .tb-stuck, .wc-thint, .wc-more, .foot, .foot a { font-size: 13px; }
.muted[style*="font-size:12"], .muted[style*="font-size: 12"], p[style*="font-size:11"], p[style*="font-size:12"], span[style*="font-size:11"], span[style*="font-size:12"], div[style*="font-size:12"], a[style*="font-size:12"], div[style*="font-size:11"] { font-size: 13px !important; }
.tag, .gtag, .pill, .plan, .badge-count, .tb-caret, .wc-tlabel, .wc-time, .wc-status, .wc-left, .kbd { font-size: 12px; }
.wc-ch, .wc-rg, .wc-sup { font-size: max(12px, .72em); }
.tile p, .tile-pick-l small, th { font-size: 12.5px; }
.eyebrow { letter-spacing: .02em; }
/* "What is this?" links sit in the eyebrow line at 20 px tall; give them a 24 px hit area without moving the text */
.eyebrow a, .page-head .eyebrow button { display: inline-block; padding-block: 2px; min-height: 24px; }

/* ---------------------------------------------------------------- tap targets (WCAG 2.2, 2.5.8: 24×24 minimum) */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 2px 4px 2px 2px; accent-color: var(--accent); }
label.row:has(> input[type="checkbox"]), label.row:has(> input[type="radio"]) { min-height: 28px; align-items: center; }
.ux-more, .ux-hidden-note button { min-height: 28px; padding: 4px 2px; }
.foot a { min-height: 28px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- focus */
/* The sheet dialogs (Menu, Staff, More, Top bar layout) are plain divs: the script traps Tab inside them and puts focus
   back on the button that opened them. This makes the trap visible. */
.tb-sheet:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent) inset; }

/* ---------------------------------------------------------------- motion that respects the OS setting */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- micro-interactions */
/* Countdown tick: when the top-bar clock or a war card countdown changes, the digits settle in with a short lift. */
@keyframes tick-settle { from { transform: translateY(-3px); opacity: .55; } to { transform: none; opacity: 1; } }
.warclock .wc-t.tick, .num.tick { display: inline-block; animation: tick-settle .28s var(--ease) both; }
/* Pressed state on chips and filters, same feel as .btn:active */
.filt:active, .mchip:active, .life-tile:active, .tb-row a:active, .hubs a:active { transform: scale(.97); }
/* Answer buttons: the chosen one glows for a beat (stamp.js already slams the seal) */
@keyframes chosen-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.rsvp button.chosen { animation: chosen-glow .7s var(--ease) 1; }
@media (prefers-reduced-motion: reduce) { .warclock .wc-t.tick, .num.tick, .rsvp button.chosen { animation: none; } .filt:active, .mchip:active, .life-tile:active, .tb-row a:active, .hubs a:active { transform: none; } }