/* ============================================
   ACCESSIBILITY TOOLBAR STYLES
   Modern frosted glass design with refined interactions
   ============================================ */

/* Global accessibility button (top-right pill) */
.global-a11y-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  color: #374151;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.global-a11y-btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

.global-a11y-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.global-a11y-btn .a11y-icon {
  font-size: 1.125rem;
}

.global-a11y-btn .a11y-text {
  font-weight: 600;
}

/* Dark mode global button */
@media (prefers-color-scheme: dark) {
  .global-a11y-btn {
    background: rgba(31, 41, 55, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
  }

  .global-a11y-btn:hover {
    background: rgba(55, 65, 81, 1);
    border-color: #60a5fa;
    color: #60a5fa;
  }

  .global-a11y-btn:focus-visible {
    outline-color: #60a5fa;
  }
}

body[data-theme="dark"] .global-a11y-btn {
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

body[data-theme="dark"] .global-a11y-btn:hover {
  background: rgba(55, 65, 81, 1);
  border-color: #60a5fa;
  color: #60a5fa;
}

body[data-theme="dark"] .global-a11y-btn:focus-visible {
  outline-color: #60a5fa;
}

/* High contrast global button */
body.high-contrast .global-a11y-btn {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .global-a11y-btn:hover {
  background: #e6e6e6 !important;
}

@media (prefers-color-scheme: dark) {
  body.high-contrast .global-a11y-btn {
    background: #000000 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
  }

  body.high-contrast .global-a11y-btn:hover {
    background: #1a1a1a !important;
  }
}

body[data-theme="dark"].high-contrast .global-a11y-btn {
  background: #000000 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body[data-theme="dark"].high-contrast .global-a11y-btn:hover {
  background: #1a1a1a !important;
}

/* Mobile adjustments for global button */
@media (max-width: 768px) {
  .global-a11y-btn {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  .global-a11y-btn .a11y-icon {
    font-size: 1rem;
  }
}

/* Hide global button when step flow is visible (wizard has its own) */
.step-flow-page:not([style*="display: none"]) ~ .global-a11y-btn,
body:has(.step-flow-page:not([style*="display: none"])) .global-a11y-btn {
  display: none;
}

/* Accessibility panel - Frosted glass */
#accessibility-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  transform: translateY(-12px) scale(0.97);
  transform-origin: top right;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl, 16px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 24px;
  min-width: 320px;
  max-width: 360px;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--spring-gentle, cubic-bezier(0.25, 0.8, 0.25, 1));
}

#accessibility-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Dark mode panel styling */
@media (prefers-color-scheme: dark) {
  #accessibility-panel {
    background: rgba(22, 27, 34, 0.95);
    color: var(--text-primary, #e8eef5);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}

#accessibility-panel h3 {
  margin: 0 0 20px 0;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-primary-dark, #00838f);
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (prefers-color-scheme: dark) {
  #accessibility-panel h3 {
    color: var(--text-link, #79d8eb);
  }
}

/* Control groups */
.a11y-control-group {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  .a11y-control-group {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

.a11y-control-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.a11y-control-group label,
.a11y-control-group span[id$="-label"] {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary, #24292e);
}

@media (prefers-color-scheme: dark) {
  .a11y-control-group label,
  .a11y-control-group span[id$="-label"] {
    color: var(--text-primary, #e8eef5);
  }
}

/* Button controls - Font size */
.a11y-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-surface-alt, #f9fafb);
  padding: 8px;
  border-radius: var(--radius-xl, 12px);
}

@media (prefers-color-scheme: dark) {
  .a11y-buttons {
    background: rgba(255, 255, 255, 0.05);
  }
}

.a11y-btn {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-surface, white);
  border: 1.5px solid var(--border-color, #e1e4e8);
  border-radius: var(--radius-lg, 8px);
  cursor: pointer;
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  transition: all 0.2s var(--ease-standard, ease);
  color: var(--text-primary, #24292e);
  min-height: 44px;
}

@media (prefers-color-scheme: dark) {
  .a11y-btn {
    background: var(--bg-surface-alt, #21262d);
    border-color: var(--border-color, #30363d);
    color: var(--text-primary, #e8eef5);
  }
}

.a11y-btn:hover {
  background: rgba(0, 172, 193, 0.08);
  border-color: var(--color-primary, #00acc1);
  color: var(--color-primary-dark, #00838f);
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  .a11y-btn:hover {
    background: rgba(121, 216, 235, 0.1);
    border-color: var(--text-link, #79d8eb);
    color: var(--text-link, #79d8eb);
  }
}

.a11y-btn:active {
  transform: scale(0.97);
}

.a11y-btn:focus-visible {
  outline: 3px solid var(--color-accent, #ff6f00);
  outline-offset: 2px;
}

/* Current font size display */
.a11y-value {
  min-width: 55px;
  text-align: center;
  font-weight: 700;
  color: var(--color-primary-dark, #00838f);
  font-size: var(--font-size-base, 1rem);
  padding: 8px 0;
}

@media (prefers-color-scheme: dark) {
  .a11y-value {
    color: var(--text-link, #79d8eb);
  }
}

/* Toggle switches - iOS-inspired */
.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-surface-alt, #f9fafb);
  border-radius: var(--radius-lg, 8px);
  transition: background 0.2s var(--ease-standard, ease);
}

@media (prefers-color-scheme: dark) {
  .a11y-toggle {
    background: rgba(255, 255, 255, 0.03);
  }
}

.a11y-toggle:hover {
  background: rgba(0, 172, 193, 0.05);
}

@media (prefers-color-scheme: dark) {
  .a11y-toggle:hover {
    background: rgba(121, 216, 235, 0.05);
  }
}

.a11y-toggle:last-child {
  margin-bottom: 0;
}

.a11y-toggle label,
.a11y-toggle span[id$="-label"] {
  margin: 0;
  cursor: pointer;
  flex: 1;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--text-primary, #24292e);
}

@media (prefers-color-scheme: dark) {
  .a11y-toggle label,
  .a11y-toggle span[id$="-label"] {
    color: var(--text-primary, #e8eef5);
  }
}

/* Toggle switch - Modern pill style */
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: linear-gradient(180deg, #d1d5db 0%, #e5e7eb 100%);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s var(--spring-gentle, cubic-bezier(0.25, 0.8, 0.25, 1));
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .toggle-switch {
    background: linear-gradient(180deg, #374151 0%, #4b5563 100%);
  }
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border-radius: 50%;
  transition: transform 0.3s var(--spring-bounce, cubic-bezier(0.175, 0.885, 0.32, 1.275));
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-switch.active {
  background: linear-gradient(135deg, var(--color-primary, #00acc1) 0%, var(--color-primary-dark, #00838f) 100%);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 12px rgba(0, 172, 193, 0.3);
}

.toggle-switch.active::after {
  transform: translateX(24px);
}

.toggle-switch:focus-visible {
  outline: 3px solid var(--color-accent, #ff6f00);
  outline-offset: 3px;
}

/* Language selector dropdown */
.a11y-select {
  width: 100%;
  padding: 10px 12px;
  background: white;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.a11y-select:hover {
  border-color: #00acc1;
}

.a11y-select:focus {
  outline: none;
  border-color: #00acc1;
  box-shadow: 0 0 0 3px rgba(0, 172, 193, 0.1);
}

@media (prefers-color-scheme: dark) {
  .a11y-select {
    background: #0d1117;
    border-color: #30363d;
    color: #e8eef5;
  }
  
  .a11y-select:hover {
    border-color: #79d8eb;
  }
  
  .a11y-select:focus {
    border-color: #79d8eb;
    box-shadow: 0 0 0 3px rgba(121, 216, 235, 0.1);
  }
  
  .a11y-select option {
    background: #0d1117;
    color: #e8eef5;
  }
}

.a11y-control-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .a11y-control-group label {
    color: #e8eef5;
  }
}

/* Reset button - Refined accent style */
.a11y-reset {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--color-accent, #ff6f00) 0%, var(--color-accent-light, #ff8f00) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-xl, 12px);
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  transition: all 0.25s var(--spring-gentle, cubic-bezier(0.25, 0.8, 0.25, 1));
  margin-top: 16px;
  min-height: 48px;
  box-shadow:
    0 2px 8px rgba(255, 111, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.a11y-reset:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(255, 111, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.a11y-reset:active {
  transform: translateY(0) scale(0.98);
}

.a11y-reset:focus-visible {
  outline: 3px solid var(--color-primary, #00acc1);
  outline-offset: 3px;
}

/* ============================================
   SIMPLE LANGUAGE MODE
   Comprehensive styling for simplified content
   ============================================ */

/* Base summary box style - HIDDEN BY DEFAULT */
.simple-language-summary {
  display: none !important;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 2px solid #0ea5e9;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
  color: #0c4a6e;
  line-height: 1.7;
  font-weight: 500;
  font-size: 1.05rem;
  position: relative;
}

.simple-language-summary::before {
  content: "📝 In simple terms:";
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0369a1;
  margin-bottom: 8px;
}

/* Show simple language summaries when mode is enabled */
body.simple-language .simple-language-summary,
body.simple-language .simple-language-helper,
body.simple-language .simple-language-tip {
  display: block !important;
}

/* Inline helper text that appears next to elements */
.simple-language-helper {
  display: none !important;
  background: #fef9c3;
  border: 1px solid #facc15;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  color: #713f12;
  font-size: 0.9rem;
  line-height: 1.5;
}

.simple-language-helper::before {
  content: "💡 ";
}

/* Tip boxes for additional context */
.simple-language-tip {
  display: none !important;
  background: #ecfdf5;
  border: 1px solid #10b981;
  border-left: 4px solid #10b981;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 12px 0;
  color: #064e3b;
  font-size: 0.95rem;
  line-height: 1.6;
}

.simple-language-tip::before {
  content: "✅ Tip: ";
  font-weight: 600;
}

/* Section explanation headers */
.simple-language-section-header {
  display: none;
  background: #f0fdf4;
  border: 2px dashed #22c55e;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #166534;
  font-size: 1rem;
  line-height: 1.5;
}

body.simple-language .simple-language-section-header {
  display: block;
}

.simple-language-section-header strong {
  color: #15803d;
}

/* Program card simplified benefit */
.simple-language-benefit {
  display: none;
  background: #fff7ed;
  border: 1px solid #fb923c;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 8px;
  color: #9a3412;
  font-size: 0.9rem;
  line-height: 1.5;
}

.simple-language-benefit::before {
  content: "🎯 What you get: ";
  font-weight: 600;
}

body.simple-language .simple-language-benefit {
  display: block;
}

/* Navigation helper labels */
.simple-language-nav-label {
  display: none;
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 400;
  margin-top: 2px;
}

body.simple-language .simple-language-nav-label {
  display: block;
}

body.simple-language .nav-link {
  flex-direction: column;
  text-align: center;
  padding: 0.5rem 1rem;
}

/* Filter button explanations */
.simple-language-filter-label {
  display: none;
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 400;
  margin-top: 4px;
  text-align: center;
}

body.simple-language .simple-language-filter-label {
  display: block;
}

body.simple-language .filter-btn {
  flex-direction: column;
  min-height: auto;
  padding: 0.75rem 1rem;
}

/* Eligibility badge explanations */
body.simple-language .eligibility-badge {
  position: relative;
}

body.simple-language .eligibility-badge::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

body.simple-language .eligibility-badge:hover::after,
body.simple-language .eligibility-badge:focus::after {
  opacity: 1;
}

/* Hide complex content in simple language mode */
body.simple-language .complex-language-only {
  display: none !important;
}

/* Show only in simple language mode */
.simple-language-only {
  display: none;
}

body.simple-language .simple-language-only {
  display: block;
}

/* Simple language mode indicator */
body.simple-language::after {
  content: "Simple Language Mode Active";
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #0ea5e9;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 9000;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .simple-language-summary {
    background: linear-gradient(135deg, #0c4a6e 0%, #0e7490 100%);
    border-color: #22d3ee;
    color: #e0f2fe;
  }

  .simple-language-summary::before {
    color: #67e8f9;
  }

  .simple-language-helper {
    background: #422006;
    border-color: #d97706;
    color: #fef3c7;
  }

  .simple-language-tip {
    background: #064e3b;
    border-color: #34d399;
    color: #d1fae5;
  }

  .simple-language-section-header {
    background: #14532d;
    border-color: #4ade80;
    color: #bbf7d0;
  }

  .simple-language-section-header strong {
    color: #86efac;
  }

  .simple-language-benefit {
    background: #431407;
    border-color: #fb923c;
    color: #fed7aa;
  }

  .simple-language-nav-label,
  .simple-language-filter-label {
    color: #9ca3af;
  }

  body.simple-language::after {
    background: #0891b2;
  }
}

/* Dark mode manual toggle */
body[data-theme="dark"] .simple-language-summary {
  background: linear-gradient(135deg, #0c4a6e 0%, #0e7490 100%);
  border-color: #22d3ee;
  color: #e0f2fe;
}

body[data-theme="dark"] .simple-language-summary::before {
  color: #67e8f9;
}

body[data-theme="dark"] .simple-language-helper {
  background: #422006;
  border-color: #d97706;
  color: #fef3c7;
}

body[data-theme="dark"] .simple-language-tip {
  background: #064e3b;
  border-color: #34d399;
  color: #d1fae5;
}

body[data-theme="dark"] .simple-language-section-header {
  background: #14532d;
  border-color: #4ade80;
  color: #bbf7d0;
}

body[data-theme="dark"] .simple-language-benefit {
  background: #431407;
  border-color: #fb923c;
  color: #fed7aa;
}

body[data-theme="dark"] .simple-language-nav-label,
body[data-theme="dark"] .simple-language-filter-label {
  color: #9ca3af;
}

body[data-theme="dark"].simple-language::after {
  background: #0891b2;
}

/* Glossary term styling in simple language mode */
body.simple-language .sl-term {
  background: #fef3c7;
  border-bottom: 2px dotted #d97706;
  padding: 0 2px;
  cursor: help;
  position: relative;
}

body.simple-language .sl-term:hover,
body.simple-language .sl-term:focus {
  background: #fde68a;
  outline: 2px solid #d97706;
  outline-offset: 1px;
}

/* Dark mode glossary terms */
@media (prefers-color-scheme: dark) {
  body.simple-language .sl-term {
    background: #422006;
    border-bottom-color: #fbbf24;
    color: #fef3c7;
  }

  body.simple-language .sl-term:hover,
  body.simple-language .sl-term:focus {
    background: #713f12;
  }
}

body[data-theme="dark"].simple-language .sl-term {
  background: #422006;
  border-bottom-color: #fbbf24;
  color: #fef3c7;
}

body[data-theme="dark"].simple-language .sl-term:hover,
body[data-theme="dark"].simple-language .sl-term:focus {
  background: #713f12;
}

.a11y-report-link:focus,
.a11y-report-link:hover {
  color: #0a6da0;
  outline: 3px solid #ff6f00;
  outline-offset: 3px;
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  .a11y-report-link {
    color: #a8e6f1;
  }
  .a11y-report-link:focus,
  .a11y-report-link:hover {
    color: #c4f1f9;
    outline: 3px solid #ffb347;
    outline-offset: 3px;
  }
}

/* Close button - Refined circle */
.a11y-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--bg-surface-alt, #f9fafb);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s var(--ease-standard, ease);
}

@media (prefers-color-scheme: dark) {
  .a11y-close {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #8b949e);
  }
}

.a11y-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  transform: scale(1.1);
}

@media (prefers-color-scheme: dark) {
  .a11y-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
  }
}

.a11y-close:active {
  transform: scale(0.95);
}

.a11y-close:focus-visible {
  outline: 3px solid var(--color-accent, #ff6f00);
  outline-offset: 2px;
}

/* ============================================
   MANUAL THEME OVERRIDES
   When user selects a theme via the dropdown, these
   override the system preference media queries.
   ============================================ */

/* Dark theme manual toggle */
:root[data-theme="dark"] #accessibility-panel,
body[data-theme="dark"] #accessibility-panel {
  background: rgba(22, 27, 34, 0.95);
  color: var(--text-primary, #e8eef5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] #accessibility-panel h3,
body[data-theme="dark"] #accessibility-panel h3 {
  color: var(--text-link, #79d8eb);
}

:root[data-theme="dark"] .a11y-control-group,
body[data-theme="dark"] .a11y-control-group {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .a11y-control-group label,
:root[data-theme="dark"] .a11y-control-group span[id$="-label"],
body[data-theme="dark"] .a11y-control-group label,
body[data-theme="dark"] .a11y-control-group span[id$="-label"] {
  color: var(--text-primary, #e8eef5);
}

:root[data-theme="dark"] .a11y-buttons,
body[data-theme="dark"] .a11y-buttons {
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .a11y-btn,
body[data-theme="dark"] .a11y-btn {
  background: var(--bg-surface-alt, #21262d);
  border-color: var(--border-color, #30363d);
  color: var(--text-primary, #e8eef5);
}

:root[data-theme="dark"] .a11y-btn:hover,
body[data-theme="dark"] .a11y-btn:hover {
  background: rgba(121, 216, 235, 0.1);
  border-color: var(--text-link, #79d8eb);
  color: var(--text-link, #79d8eb);
}

:root[data-theme="dark"] .a11y-value,
body[data-theme="dark"] .a11y-value {
  color: var(--text-link, #79d8eb);
}

:root[data-theme="dark"] .a11y-toggle,
body[data-theme="dark"] .a11y-toggle {
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .a11y-toggle:hover,
body[data-theme="dark"] .a11y-toggle:hover {
  background: rgba(121, 216, 235, 0.05);
}

:root[data-theme="dark"] .a11y-toggle label,
:root[data-theme="dark"] .a11y-toggle span[id$="-label"],
body[data-theme="dark"] .a11y-toggle label,
body[data-theme="dark"] .a11y-toggle span[id$="-label"] {
  color: var(--text-primary, #e8eef5);
}

:root[data-theme="dark"] .toggle-switch,
body[data-theme="dark"] .toggle-switch {
  background: linear-gradient(180deg, #374151 0%, #4b5563 100%);
}

:root[data-theme="dark"] .a11y-select,
body[data-theme="dark"] .a11y-select {
  background: var(--bg-surface-alt, #21262d);
  border-color: var(--border-color, #30363d);
  color: var(--text-primary, #e8eef5);
}

:root[data-theme="dark"] .a11y-close,
body[data-theme="dark"] .a11y-close {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #8b949e);
}

:root[data-theme="dark"] .a11y-close:hover,
body[data-theme="dark"] .a11y-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Light theme manual toggle - resets dark system preference */
body[data-theme="light"] #accessibility-panel {
  background: white;
  color: #24292e;
  border: 1px solid #d0d7de;
}

body[data-theme="light"] #accessibility-panel h3 {
  color: #00838f;
}

body[data-theme="light"] .a11y-control-group {
  border-bottom-color: #e1e4e8;
}

body[data-theme="light"] .a11y-control-group label,
body[data-theme="light"] .a11y-control-group span[id$="-label"] {
  color: #24292e;
}

body[data-theme="light"] .a11y-btn {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #24292e;
}

body[data-theme="light"] .a11y-btn:hover {
  background: #e8eef5;
  border-color: #00acc1;
}

body[data-theme="light"] .a11y-value {
  color: #00838f;
}

body[data-theme="light"] .toggle-switch {
  background: #d0d7de;
}

body[data-theme="light"] .a11y-select {
  background: white;
  border-color: #d1d5db;
  color: #24292e;
}

body[data-theme="light"] .a11y-close {
  color: #6e7781;
}

body[data-theme="light"] .a11y-close:hover {
  background: #f6f8fa;
  color: #24292e;
}

/* ============================================
   ACCESSIBILITY FEATURE IMPLEMENTATIONS
   ============================================ */

/* High contrast mode - Light theme */
body.high-contrast,
body[data-theme="light"].high-contrast {
  --bg-body: white;
  --bg-main: white;
  --bg-table-hover: #e6e6e6;
  --bg-footer: white;
  --text-primary: #000;
  --text-heading: #000;
  --text-link: #0000ff;
  --text-link-hover: #0000ee;
  --border-color: #000;
  --border-light: #333;
  --shadow: rgba(0, 0, 0, 0.5);
  --shadow-light: rgba(0, 0, 0, 0.3);
  --primary-teal: #0000ff;
  --primary-teal-dark: #0000cc;
  --primary-teal-darker: #000099;
  --accent-orange: #ff4500;
  --accent-orange-light: #ff6600;
}

/* High contrast mode - Dark theme (system preference) */
@media (prefers-color-scheme: dark) {
  body.high-contrast {
    --bg-body: #000;
    --bg-main: #000;
    --bg-table-hover: #1a1a1a;
    --bg-footer: #000;
    --text-primary: #fff;
    --text-heading: #fff;
    --text-link: #ffff00;
    --text-link-hover: #ffff66;
    --border-color: #fff;
    --border-light: #ccc;
    --shadow: rgba(255, 255, 255, 0.5);
    --shadow-light: rgba(255, 255, 255, 0.3);
    --primary-teal: #ffff00;
    --primary-teal-dark: #ffff66;
    --primary-teal-darker: #ffff99;
    --accent-orange: #ff8800;
    --accent-orange-light: #ffaa00;
  }
}

/* High contrast mode - Dark theme (manual toggle) */
body[data-theme="dark"].high-contrast {
  --bg-body: #000;
  --bg-main: #000;
  --bg-table-hover: #1a1a1a;
  --bg-footer: #000;
  --text-primary: #fff;
  --text-heading: #fff;
  --text-link: #ffff00;
  --text-link-hover: #ffff66;
  --border-color: #fff;
  --border-light: #ccc;
  --shadow: rgba(255, 255, 255, 0.5);
  --shadow-light: rgba(255, 255, 255, 0.3);
  --primary-teal: #ffff00;
  --primary-teal-dark: #ffff66;
  --primary-teal-darker: #ffff99;
  --accent-orange: #ff8800;
  --accent-orange-light: #ffaa00;
}

/* High contrast mode element styling */
body.high-contrast a {
  text-decoration: underline;
  font-weight: 600;
}

body.high-contrast table,
body.high-contrast th,
body.high-contrast td {
  border: 2px solid #000;
}

body.high-contrast button,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  border: 2px solid #000 !important;
  background: white !important;
  color: #000 !important;
}

body.high-contrast button:hover,
body.high-contrast button:focus {
  background: #e6e6e6 !important;
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
}

/* High contrast - filter buttons */
body.high-contrast .filter-btn {
  background: white !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}

body.high-contrast .filter-btn:hover {
  background: #e6e6e6 !important;
}

body.high-contrast .filter-btn.active {
  background: #000 !important;
  color: white !important;
  border-color: #000 !important;
}

/* High contrast - program link buttons */
body.high-contrast .program-link {
  background: #000 !important;
  color: white !important;
  border: 3px solid #000 !important;
  text-decoration: none !important;
}

body.high-contrast .program-link:hover,
body.high-contrast .program-link:focus {
  background: #333 !important;
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
}

/* High contrast - program cards */
body.high-contrast .program-card {
  border: 3px solid #000 !important;
  background: white !important;
}

/* High contrast - badges */
body.high-contrast .eligibility-badge,
body.high-contrast .program-badge,
body.high-contrast .program-area,
body.high-contrast .program-category {
  background: white !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

/* High contrast - search input */
body.high-contrast #search-input {
  background: white !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}

body.high-contrast #search-input::placeholder {
  color: #333 !important;
}

/* High contrast - sort select */
body.high-contrast .sort-select,
body.high-contrast .utility-select {
  background: white !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}

/* High contrast - utility bar buttons */
body.high-contrast .utility-btn {
  background: white !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

body.high-contrast .utility-btn:hover {
  background: #e6e6e6 !important;
}

/* High contrast - favorite toggle */
body.high-contrast .favorite-toggle {
  background: white !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

body.high-contrast .favorite-toggle.active {
  background: #000 !important;
  color: white !important;
}

/* High contrast - reset button */
body.high-contrast .reset-btn {
  background: white !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}

body.high-contrast .reset-btn:hover {
  background: #000 !important;
  color: white !important;
}

/* High contrast mode - Dark theme element styling */
@media (prefers-color-scheme: dark) {
  body.high-contrast table,
  body.high-contrast th,
  body.high-contrast td {
    border: 2px solid #fff;
  }

  body.high-contrast button,
  body.high-contrast input,
  body.high-contrast select,
  body.high-contrast textarea {
    border: 2px solid #fff !important;
    background: #000 !important;
    color: #fff !important;
  }

  body.high-contrast button:hover,
  body.high-contrast button:focus {
    background: #1a1a1a !important;
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
  }

  /* High contrast dark - filter buttons */
  body.high-contrast .filter-btn {
    background: #000 !important;
    color: #fff !important;
    border: 3px solid #fff !important;
  }

  body.high-contrast .filter-btn:hover {
    background: #1a1a1a !important;
  }

  body.high-contrast .filter-btn.active {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
  }

  /* High contrast dark - program link buttons */
  body.high-contrast .program-link {
    background: #ffff00 !important;
    color: #000 !important;
    border: 3px solid #ffff00 !important;
  }

  body.high-contrast .program-link:hover,
  body.high-contrast .program-link:focus {
    background: #ffff66 !important;
  }

  /* High contrast dark - program cards */
  body.high-contrast .program-card {
    border: 3px solid #fff !important;
    background: #000 !important;
  }

  /* High contrast dark - badges */
  body.high-contrast .eligibility-badge,
  body.high-contrast .program-badge,
  body.high-contrast .program-area,
  body.high-contrast .program-category {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }

  /* High contrast dark - search input */
  body.high-contrast #search-input {
    background: #000 !important;
    color: #fff !important;
    border: 3px solid #fff !important;
  }

  body.high-contrast #search-input::placeholder {
    color: #ccc !important;
  }

  /* High contrast dark - sort select */
  body.high-contrast .sort-select,
  body.high-contrast .utility-select {
    background: #000 !important;
    color: #fff !important;
    border: 3px solid #fff !important;
  }

  /* High contrast dark - utility bar buttons */
  body.high-contrast .utility-btn {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }

  body.high-contrast .utility-btn:hover {
    background: #1a1a1a !important;
  }

  /* High contrast dark - favorite toggle */
  body.high-contrast .favorite-toggle {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }

  body.high-contrast .favorite-toggle.active {
    background: #fff !important;
    color: #000 !important;
  }

  /* High contrast dark - reset button */
  body.high-contrast .reset-btn {
    background: #000 !important;
    color: #fff !important;
    border: 3px solid #fff !important;
  }

  body.high-contrast .reset-btn:hover {
    background: #fff !important;
    color: #000 !important;
  }
}

/* High contrast mode - Dark theme manual toggle element styling */
body[data-theme="dark"].high-contrast table,
body[data-theme="dark"].high-contrast th,
body[data-theme="dark"].high-contrast td {
  border: 2px solid #fff;
}

body[data-theme="dark"].high-contrast button,
body[data-theme="dark"].high-contrast input,
body[data-theme="dark"].high-contrast select,
body[data-theme="dark"].high-contrast textarea {
  border: 2px solid #fff !important;
  background: #000 !important;
  color: #fff !important;
}

body[data-theme="dark"].high-contrast button:hover,
body[data-theme="dark"].high-contrast button:focus {
  background: #1a1a1a !important;
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}

/* High contrast dark manual toggle - filter buttons */
body[data-theme="dark"].high-contrast .filter-btn {
  background: #000 !important;
  color: #fff !important;
  border: 3px solid #fff !important;
}

body[data-theme="dark"].high-contrast .filter-btn:hover {
  background: #1a1a1a !important;
}

body[data-theme="dark"].high-contrast .filter-btn.active {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* High contrast dark manual toggle - program link buttons */
body[data-theme="dark"].high-contrast .program-link {
  background: #ffff00 !important;
  color: #000 !important;
  border: 3px solid #ffff00 !important;
}

body[data-theme="dark"].high-contrast .program-link:hover,
body[data-theme="dark"].high-contrast .program-link:focus {
  background: #ffff66 !important;
}

/* High contrast dark manual toggle - program cards */
body[data-theme="dark"].high-contrast .program-card {
  border: 3px solid #fff !important;
  background: #000 !important;
}

/* High contrast dark manual toggle - badges */
body[data-theme="dark"].high-contrast .eligibility-badge,
body[data-theme="dark"].high-contrast .program-badge,
body[data-theme="dark"].high-contrast .program-area,
body[data-theme="dark"].high-contrast .program-category {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* High contrast dark manual toggle - search input */
body[data-theme="dark"].high-contrast #search-input {
  background: #000 !important;
  color: #fff !important;
  border: 3px solid #fff !important;
}

body[data-theme="dark"].high-contrast #search-input::placeholder {
  color: #ccc !important;
}

/* High contrast dark manual toggle - sort select */
body[data-theme="dark"].high-contrast .sort-select,
body[data-theme="dark"].high-contrast .utility-select {
  background: #000 !important;
  color: #fff !important;
  border: 3px solid #fff !important;
}

/* High contrast dark manual toggle - utility bar buttons */
body[data-theme="dark"].high-contrast .utility-btn {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

body[data-theme="dark"].high-contrast .utility-btn:hover {
  background: #1a1a1a !important;
}

/* High contrast dark manual toggle - favorite toggle */
body[data-theme="dark"].high-contrast .favorite-toggle {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

body[data-theme="dark"].high-contrast .favorite-toggle.active {
  background: #fff !important;
  color: #000 !important;
}

/* High contrast dark manual toggle - reset button */
body[data-theme="dark"].high-contrast .reset-btn {
  background: #000 !important;
  color: #fff !important;
  border: 3px solid #fff !important;
}

body[data-theme="dark"].high-contrast .reset-btn:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Dyslexia-friendly font */
body.dyslexia-font,
body.dyslexia-font * {
  font-family: 'Comic Sans MS', 'OpenDyslexic', Arial, sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.8;
}

/* Enhanced focus indicators */
body.focus-mode a:focus,
body.focus-mode button:focus,
body.focus-mode input:focus,
body.focus-mode select:focus,
body.focus-mode textarea:focus {
  outline: 4px solid #ff6f00 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(255, 111, 0, 0.2) !important;
}

/* Keyboard navigation helper */
body.keyboard-nav-helper *:focus {
  position: relative;
}

body.keyboard-nav-helper *:focus::after {
  content: '← You are here';
  position: absolute;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
  background: #ff6f00;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #accessibility-panel {
    left: 16px;
    right: 16px;
    bottom: 70px;
    transform: translateY(20px) scale(0.95);
    transform-origin: bottom center;
    min-width: auto;
    max-width: none;
  }

  #accessibility-panel.open {
    transform: translateY(0) scale(1);
  }
}

/* Animation for panel opening */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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