/* KC-A11Y - accessibility sweep fixes, 2026-07-10 (Fable #18 audit).
   Injected sitewide by assets/js/kc-i18n.js (the one script every page loads),
   so it reaches generated language pages and /music/ without a shell rebuild.
   Additive only: token definitions scoped to .wt-shell / .wt-mini still win
   inside the shell; these root mirrors exist for position:fixed / body-level
   UI (e.g. the music Playlists pill) that previously resolved NO tokens and
   rendered invisible in dark mode (measured 1.35:1). */

:root {
  --wt-page-bg: #f7f4ee;
  --wt-surface: #fffdf9;
  --wt-card-bg: #fffdf9;
  --wt-rule: #e4ddcf;
  --wt-rule-strong: #283a31;
  --wt-ink: #26302b;
  --wt-ink-soft: #475048;
  --wt-ink-quiet: #5f6a60;
  --wt-eyebrow: #5f6a60;
  --wt-link: #2c5f4e;
  --wt-link-hover: #1f4638;
  --wt-accent: #2c5f4e;
  --wt-chip-bg: #ede7da;
  --wt-chip-border: #ddd4c2;
  --wt-chip-ink: #34403a;
  --wt-btn-bg: #2c5f4e;
  --wt-btn-bg-hover: #1f4638;
  --wt-btn-ink: #fffdf9;
  --wt-panel-bg: #eef3ec;
  --wt-panel-border: #d6e0d2;
  --wt-warm: #be6b45;
  --wt-crisis-bg: #edf1ea;
  --wt-crisis-border: #d8e0d3;
  --wt-crisis-ink: #3a463f;
}
html[data-mode="batman"] {
  --wt-page-bg: #161a18;
  --wt-surface: #1e2522;
  --wt-card-bg: #1e2522;
  --wt-rule: #2c342f;
  --wt-rule-strong: #b9c7b7;
  --wt-ink: #ece7dc;
  --wt-ink-soft: #c2cabb;
  --wt-ink-quiet: #93a093;
  --wt-eyebrow: #a9b6a7;
  --wt-link: #8fd0b4;
  --wt-link-hover: #b9e7d1;
  --wt-accent: #8fd0b4;
  --wt-chip-bg: rgba(143, 208, 180, 0.10);
  --wt-chip-border: rgba(143, 208, 180, 0.32);
  --wt-chip-ink: #b9e7d1;
  --wt-btn-bg: #8fd0b4;
  --wt-btn-bg-hover: #b9e7d1;
  --wt-btn-ink: #10140f;
  --wt-panel-bg: rgba(143, 208, 180, 0.07);
  --wt-panel-border: rgba(143, 208, 180, 0.26);
  --wt-warm: #cdb89a;
  --wt-crisis-bg: rgba(185, 199, 183, 0.08);
  --wt-crisis-border: rgba(185, 199, 183, 0.26);
  --wt-crisis-ink: #c2cabb;
}

/* Long-label locales (ru, vi, haw, tw, wo) overflowed the no-wrap header row
   at desktop width, clipping Sign up + Donate (WCAG 1.4.10). Short-label
   locales still fit on one line and are unaffected. */
.wt-mini__inner { flex-wrap: wrap; row-gap: 6px; }

/* Carousel dots were 9px targets with 8px gaps (fails WCAG 2.5.8, and the
   spacing exception: 24px circles intersect neighbors). The button becomes a
   24px target; the visible dot stays small, drawn via ::before. */
.kc-carousel__dot {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
}
.kc-carousel__dot::before {
  content: "";
  position: absolute;
  inset: 7.5px;
  border-radius: 50%;
  background: var(--wt-rule, #cfc7b8);
}
.kc-carousel__dot.is-active { background: transparent; }
.kc-carousel__dot.is-active::before { background: var(--wt-accent, #2c5f4e); }
/* Dark mode: inactive dots used the dark hairline token (about 1.5:1 on the
   page). Use the quiet ink token instead (4.5:1+), per WCAG 1.4.11. */
html[data-mode="batman"] .kc-carousel__dot::before { background: var(--wt-ink-quiet, #93a093); }
html[data-mode="batman"] .kc-carousel__dot.is-active::before { background: var(--wt-accent, #8fd0b4); }