/* ==========================================================================
   ACCESSIBILITY LAYER
   Loaded last. Keyboard focus, touch target sizing, and forced-colors support.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VISIBLE KEYBOARD FOCUS (WCAG 2.4.7 / 2.4.11)
   One consistent ring for every interactive element; mouse clicks stay clean.
   -------------------------------------------------------------------------- */
:where(a, button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, select, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Text fields already show an accent border + glow on focus; strengthen it for keyboard users. */
:where(input:not([type="checkbox"]):not([type="radio"]), textarea):focus-visible {
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 0 1px var(--accent);
}

/* Don't let sticky/fixed chrome hide the focused element (WCAG 2.4.11). */
html {
  scroll-padding-top: 5rem;
  scroll-padding-bottom: 6rem;
}

/* --------------------------------------------------------------------------
   2. TOUCH TARGETS (WCAG 2.5.5 / Apple HIG 44pt)
   Only on coarse pointers, so the dense desktop layout is unchanged.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .account-menu-item,
  .auth-btn,
  .btn-ai-ghost-sm,
  .btn-ai-pill,
  .btn-danger-outline,
  .btn-secondary,
  .context-menu-item,
  .drawer-status-btn,
  .filter-chip,
  .ghost-btn,
  .nav-item,
  .primary-btn,
  .profile-editor-cancel,
  .profile-editor-save,
  .select-input-sm,
  .theme-toggle-btn {
    min-height: var(--tap-min);
  }

  /* Small visual × with a 44px invisible hit area */
  .smart-chip-dismiss::after {
    content: "";
    position: absolute;
    inset: -12px;
  }

  .icon-btn,
  .icon-btn-tiny,
  .profile-editor-close {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }

  /* Keep the checkbox visually compact but give it a 44px invisible hit area. */
  .todo-toggle::before {
    content: "";
    position: absolute;
    inset: calc((var(--tap-min) - 1.55rem) / -2);
    border-radius: 50%;
  }
}

/* --------------------------------------------------------------------------
   3. FORCED COLORS (Windows High Contrast)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .todo-toggle,
  .nav-indicator,
  .stat-card,
  .todo-item {
    border: 1px solid CanvasText;
  }

  .motion-spotlight::after,
  .skeleton-block::after {
    display: none;
  }

  .hero-name-highlight {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}