/**
 * a11y.css — Accessibility hardening (WCAG 2.1 AA)
 *
 * Focus management, screen reader utilities, touch targets,
 * keyboard navigation, high-contrast support.
 */

/* ── Focus ring ──────────────────────────────────────────────────── */

/* Universal focus-visible ring using DS token colors. */
:focus-visible {
  outline: 2px solid var(--jb-color-primary, #b5854d);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Remove default focus for pointer devices — only keyboard triggers visible ring. */
:focus:not(:focus-visible) {
  outline: none;
}

/* High-contrast focus ring on dark surfaces */
.co-overlay :focus-visible,
[data-theme-preference="dark"] :focus-visible {
  outline-color: var(--jb-color-primaryHover, #c2956a);
}

/* ── Screen reader only ──────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Becomes visible on focus (e.g. skip link) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Skip to content link ────────────────────────────────────────── */

.jb-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--jb-color-primary, #b5854d);
  color: #fff;
  border-radius: var(--jb-radius-card, 8px);
  font-size: var(--jb-fontSize-sm, .875rem);
  font-weight: var(--jb-fontWeight-semibold, 600);
  text-decoration: none;
  transition: top .15s;
}

.jb-skip-link:focus {
  top: 8px;
}

/* ── Touch target sizing (min 44x44) ─────────────────────────────── */

.jb-touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Bottom bar items */
.bottom-nav .nav-item,
.bottom-bar .bar-item {
  min-height: 44px;
  min-width: 44px;
}

/* Common interactive elements */
button,
[role="button"],
[role="tab"],
.jb-chip,
.jb-data-filter-chip,
.jb-mode-pill__opt,
.jb-data-pager__btn {
  min-height: 44px;
  min-width: 44px;
}

/* Inline buttons where 44px min-width would break layout */
.jb-data-filter-chip,
.jb-mode-pill__opt {
  min-width: unset;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── ARIA live regions ───────────────────────────────────────────── */

[aria-live="polite"],
[aria-live="assertive"] {
  /* Ensure live regions don't affect layout when empty */
}

/* Toast / notification container */
.jb-toast-container {
  /* aria-live="polite" + role="status" should be set in JS */
}

/* ── Keyboard navigation ─────────────────────────────────────────── */

/* Card hover states also trigger on focus */
.feature-card:focus-within,
.jb-card:focus-within {
  transform: translateY(-2px);
}

/* Tab panels: current tab indicator */
[role="tab"][aria-selected="true"] {
  font-weight: var(--jb-fontWeight-semibold, 600);
}

/* Interactive chips, filters, and cards — visible focus */
.filter-chip:focus-visible,
.disc-view-chip:focus-visible,
.ob-chip:focus-visible,
.hero-chip:focus-visible,
.mood-btn:focus-visible,
.hm-mood-btn:focus-visible,
.vita-tool-btn:focus-visible,
.people-card:focus-visible,
.habit-check:focus-visible,
.cal-cell:focus-visible,
.miniapp-panel:focus-visible,
.miniapp-surface:focus-visible {
  outline: 2px solid var(--jb-color-primary, #b5854d);
  outline-offset: 2px;
}

/* Glass surface text: ensure readability */
.miniapp-panel,
.miniapp-surface {
  color: var(--miniapp-panel-text, rgba(255,255,255,0.75));
}

/* ── Reduced motion (comprehensive) ──────────────────────────────── */

@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;
  }
}

/* ── High contrast mode ──────────────────────────────────────────── */

@media (forced-colors: active) {
  .jb-card,
  .feature-card,
  .jb-data-card {
    border: 2px solid ButtonText;
  }

  .cta-primary,
  .jb-data-filter-chip--active,
  .jb-mode-pill__indicator {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ── Color contrast helpers ──────────────────────────────────────── */

/* Ensure hint text meets 4.5:1 on white (#fafaf9). stone500 (#78716c) = 4.64:1 ✓ */
/* Ensure secondary text meets 4.5:1. stone600 (#57534e) = 6.38:1 ✓ */
/* Primary action (copper #b5854d) on white = 3.26:1 — use only for large text/UI. */
/* Primary on dark (#1c1917) = 5.62:1 ✓ */