/**
 * Lecture Mind - Accessibility Styles (Student Playground)
 *
 * Enhanced focus indicators, forced-colors support, auto dark mode detection,
 * touch targets, print styles, screen reader helpers, and reduced-motion overrides.
 *
 * IMPORTANT: Load AFTER animations-v2.css and BEFORE playground-components.css.
 */

/* ============================================
   ENHANCED FOCUS INDICATORS
   ============================================ */

/*
 * 3px ring with 2px offset for all interactive playground elements.
 * Uses outline (not box-shadow) for forced-colors compatibility.
 * 3:1 contrast ratio: cyan ring against both light and dark backgrounds.
 */
.sp-flashcard:focus-visible,
.sp-library-card:focus-visible,
.sp-study-controls__quality-btn:focus-visible,
.sp-confusion-btn:focus-visible,
.sp-mastery-badge:focus-visible,
[class^="sp-"] button:focus-visible,
[class^="sp-"] a:focus-visible,
[class^="sp-"] [tabindex]:focus-visible {
  outline: 3px solid var(--color-primary-400);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.dark .sp-flashcard:focus-visible,
.dark .sp-library-card:focus-visible,
.dark .sp-study-controls__quality-btn:focus-visible,
.dark .sp-confusion-btn:focus-visible,
.dark [class^="sp-"] button:focus-visible,
.dark [class^="sp-"] a:focus-visible,
.dark [class^="sp-"] [tabindex]:focus-visible {
  outline-color: var(--color-primary-300);
}

/* ============================================
   SCREEN READER HELPERS
   ============================================ */

/* Live region for dynamic announcements (e.g., "Card flipped", "Review complete") */
.sr-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but focusable (for skip links within playground) */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--surface);
  color: var(--foreground);
  z-index: var(--z-toast);
}

/* ============================================
   FORCED COLORS (Windows High Contrast)
   ============================================ */
@media (forced-colors: active) {
  /* Ensure all interactive elements have visible borders */
  .sp-flashcard,
  .sp-flashcard__front,
  .sp-flashcard__back,
  .sp-library-card,
  .sp-study-controls__quality-btn,
  .sp-confusion-btn,
  .sp-mastery-badge,
  .sp-sync-indicator {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }

  /* Active/selected states use system highlight */
  .sp-flashcard--flipped,
  .sp-confusion-btn--voted,
  .sp-study-controls__quality-btn:hover {
    border-color: Highlight;
    color: HighlightText;
    background: Highlight;
  }

  /* Focus ring uses system focus color */
  [class^="sp-"]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  /* Progress indicators */
  .sp-progress-ring__circle {
    stroke: ButtonText;
  }

  /* Mastery badges show distinct text */
  .sp-mastery-badge {
    background: Canvas;
    color: CanvasText;
  }

  /* Sync indicator states */
  .sp-sync-indicator--online {
    border-color: LinkText;
  }

  .sp-sync-indicator--offline {
    border-color: GrayText;
  }

  .sp-sync-indicator--syncing {
    border-color: Highlight;
  }

  /* Disable decorative gradients and glass effects */
  .glass,
  .glass-heavy,
  .text-gradient,
  .gradient-brand,
  .gradient-mastery {
    background: Canvas;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* ============================================
   AUTO DARK MODE DETECTION
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: var(--color-neutral-950);
    --background-subtle: var(--color-neutral-900);
    --foreground: var(--color-neutral-50);
    --foreground-muted: var(--color-neutral-300);

    --surface: var(--color-neutral-900);
    --surface-elevated: var(--color-neutral-800);
    --surface-overlay: rgba(15, 23, 42, 0.9);

    --border: var(--color-neutral-700);
    --border-subtle: var(--color-neutral-800);
    --border-focus: var(--color-primary-400);

    --primary: var(--color-primary-400);
    --primary-hover: var(--color-primary-300);
    --primary-foreground: var(--color-neutral-950);

    --accent: var(--color-accent-400);
    --accent-hover: var(--color-accent-300);

    --ring: var(--color-primary-400);
    --ring-offset: var(--background);

    --glow-primary: rgba(34, 211, 238, 0.15);
    --glow-accent: rgba(129, 140, 248, 0.15);
  }
}

/* ============================================
   TOUCH TARGETS (WCAG 2.5.5 — 44x44px minimum)
   ============================================ */
@media (pointer: coarse) {
  .sp-study-controls__quality-btn,
  .sp-confusion-btn,
  .sp-flashcard,
  [class^="sp-"] button,
  [class^="sp-"] a,
  [class^="sp-"] [role="button"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Ensure adequate spacing between touch targets */
  .sp-study-controls {
    gap: var(--space-3);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  /* Hide non-essential UI */
  .sp-sync-indicator,
  .sp-confusion-btn,
  .sp-study-controls,
  .animate-confetti,
  .sp-skeleton,
  .sp-progress-ring,
  [class^="sp-"] button,
  [class^="sp-"] nav {
    display: none !important;
  }

  /* Make content readable */
  .sp-flashcard {
    break-inside: avoid;
    border: 1px solid #333;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .sp-flashcard__front,
  .sp-flashcard__back {
    transform: none;
    backface-visibility: visible;
    position: static;
    background: white;
    color: black;
  }

  .sp-flashcard__back {
    border-top: 1px dashed #999;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }

  .sp-library-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #333;
  }

  /* Remove backgrounds and ensure black text */
  .glass,
  .glass-heavy {
    background: white;
    backdrop-filter: none;
  }

  .text-gradient {
    background: none;
    -webkit-text-fill-color: black;
    color: black;
  }

  /* Force page to full width */
  .sp-container {
    max-width: 100%;
    padding: 0;
  }
}

/* ============================================
   REDUCED MOTION AGGREGATE OVERRIDES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* Disable all playground transitions */
  .sp-flashcard,
  .sp-flashcard__inner,
  .sp-flashcard__front,
  .sp-flashcard__back,
  .sp-library-card,
  .sp-study-controls__quality-btn,
  .sp-confusion-btn,
  .sp-mastery-badge,
  .sp-sync-indicator,
  .sp-progress-ring__circle {
    transition: none !important;
    animation: none !important;
  }

  /* Ensure flipped state is still visible without animation */
  .sp-flashcard--flipped .sp-flashcard__inner {
    transform: rotateY(180deg);
  }

  /* Progress ring shows final state immediately */
  .sp-progress-ring__circle {
    stroke-dashoffset: var(--progress-offset, 0);
  }

  /* Card entrance shows final state */
  .animate-card-entrance {
    opacity: 1;
    transform: none;
  }

  /* Disable utility transition classes */
  .transition-all,
  .transition-colors,
  .transition-transform {
    transition: none !important;
  }
}