/* ═══════════════════════════════════════════════════════════════════
   AURALIS · Accessibility helpers (Task V)
   ───────────────────────────────────────────────────────────────────
   Skip link, live region (visually hidden), shortcuts help, focus ring.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ SKIP TO CONTENT ═══ */
.a11y-skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.a11y-skip:focus {
  top: 12px;
  outline: 2px solid hsl(38 80% 55%);
  outline-offset: 2px;
}

/* ═══ LIVE REGION (visually hidden) ═══ */
.a11y-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ SHORTCUTS HELP ═══ */
.a11y-shortcuts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.a11y-shortcut-key {
  font-weight: 700;
  margin: 0;
}
.a11y-shortcut-key kbd {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
[data-theme="light"] .a11y-shortcut-key kbd,
:root:not([data-theme]) .a11y-shortcut-key kbd {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-card-sm);
}
[data-theme="dark"] .a11y-shortcut-key kbd {
  background: hsl(220 25% 12%);
  color: hsl(220 15% 85%);
  border: 1px solid hsl(220 20% 18%);
}
.a11y-shortcut-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

/* ═══ GLOBAL FOCUS VISIBLE ═══ */
:focus-visible {
  outline: 2px solid hsl(38 80% 55% / 0.7);
  outline-offset: 2px;
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid hsl(38 80% 55% / 0.7);
  outline-offset: 2px;
}