/* Accessibility Enhancements and WCAG 2.1 Compliance */\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n  :root {\n    --md-primary-fg-color: #0066cc;\n    --md-primary-fg-color--dark: #004499;\n    --md-accent-fg-color: #cc0000;\n    --md-default-fg-color: #000000;\n    --md-default-bg-color: #ffffff;\n  }\n  \n  .md-typeset {\n    color: #000000;\n  }\n  \n  .md-button {\n    border: 2px solid currentColor;\n    font-weight: 600;\n  }\n  \n  .card,\n  .decision-node,\n  .skill-node {\n    border: 3px solid #000000;\n  }\n  \n  a {\n    text-decoration: underline;\n    font-weight: 600;\n  }\n  \n  .progress-bar {\n    border: 2px solid #000000;\n  }\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n  \n  .animate-fade-in,\n  .animate-slide-in,\n  .animate-pulse {\n    animation: none !important;\n  }\n}\n\n/* Enhanced Focus Indicators */\n:focus {\n  outline: 3px solid var(--md-primary-fg-color) !important;\n  outline-offset: 2px !important;\n  border-radius: var(--radius-sm);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\n:focus-visible {\n  outline: 3px solid var(--md-primary-fg-color) !important;\n  outline-offset: 2px !important;\n}\n\n/* Enhanced keyboard navigation */\n.keyboard-focusable {\n  position: relative;\n}\n\n.keyboard-focusable:focus::before {\n  content: '';\n  position: absolute;\n  inset: -4px;\n  border: 3px solid var(--md-primary-fg-color);\n  border-radius: var(--radius-md);\n  pointer-events: none;\n  animation: focusPulse 2s infinite;\n}\n\n@keyframes focusPulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n\n/* Skip Links */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: var(--spacing-md);\n  z-index: 9999;\n}\n\n.skip-link {\n  background: var(--md-primary-fg-color);\n  color: white;\n  padding: var(--spacing-sm) var(--spacing-md);\n  border-radius: var(--radius-md);\n  text-decoration: none;\n  font-weight: 600;\n  transition: top 0.3s;\n}\n\n.skip-link:focus {\n  top: var(--spacing-md);\n  outline: 3px solid white;\n  outline-offset: 2px;\n}\n\n/* Screen Reader Only Content */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sr-only-focusable:focus {\n  position: static;\n  width: auto;\n  height: auto;\n  padding: inherit;\n  margin: inherit;\n  overflow: visible;\n  clip: auto;\n  white-space: normal;\n}\n\n/* Enhanced Button Accessibility */\n.md-button,\n.decision-option,\n.skill-node,\n.touch-target {\n  position: relative;\n  min-height: 44px;\n  min-width: 44px;\n}\n\n.md-button[aria-pressed=\"true\"] {\n  background: var(--md-primary-fg-color--dark);\n  border: 2px solid var(--md-primary-fg-color);\n}\n\n.md-button[aria-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Form Accessibility */\nlabel {\n  font-weight: 600;\n  margin-bottom: var(--spacing-xs);\n  display: block;\n  color: var(--md-default-fg-color--dark);\n}\n\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"password\"],\ntextarea,\nselect {\n  border: 2px solid var(--md-default-fg-color--lighter);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-md);\n  font-size: 1rem;\n  line-height: 1.4;\n  transition: border-color 0.2s;\n}\n\ninput:focus,\ntextarea:focus,\nselect:focus {\n  border-color: var(--md-primary-fg-color);\n  outline: 3px solid rgba(255, 153, 0, 0.3);\n  outline-offset: 0;\n}\n\ninput[aria-invalid=\"true\"],\ntextarea[aria-invalid=\"true\"],\nselect[aria-invalid=\"true\"] {\n  border-color: var(--error-color);\n}\n\n.form-error {\n  color: var(--error-color);\n  font-size: 0.9rem;\n  margin-top: var(--spacing-xs);\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n.form-error::before {\n  content: '⚠';\n  font-weight: bold;\n}\n\n.form-help {\n  font-size: 0.9rem;\n  color: var(--md-default-fg-color--light);\n  margin-top: var(--spacing-xs);\n}\n\n/* ARIA Live Regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Status Messages */\n.status-message {\n  padding: var(--spacing-md);\n  border-radius: var(--radius-md);\n  margin: var(--spacing-md) 0;\n  font-weight: 500;\n  border-left: 4px solid;\n}\n\n.status-message.success {\n  background: rgba(76, 175, 80, 0.1);\n  border-left-color: var(--success-color);\n  color: var(--success-color);\n}\n\n.status-message.error {\n  background: rgba(244, 67, 54, 0.1);\n  border-left-color: var(--error-color);\n  color: var(--error-color);\n}\n\n.status-message.warning {\n  background: rgba(255, 152, 0, 0.1);\n  border-left-color: var(--warning-color);\n  color: var(--warning-color);\n}\n\n.status-message.info {\n  background: rgba(33, 150, 243, 0.1);\n  border-left-color: var(--info-color);\n  color: var(--info-color);\n}\n\n/* Enhanced Table Accessibility */\n.md-typeset table {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.md-typeset table caption {\n  font-weight: 600;\n  margin-bottom: var(--spacing-md);\n  text-align: left;\n  color: var(--md-default-fg-color--dark);\n}\n\n.md-typeset table th {\n  background: var(--md-primary-fg-color);\n  color: white;\n  font-weight: 600;\n  text-align: left;\n  border-bottom: 2px solid var(--md-primary-fg-color--dark);\n}\n\n.md-typeset table th[scope=\"col\"] {\n  border-bottom: 3px solid var(--md-primary-fg-color--dark);\n}\n\n.md-typeset table th[scope=\"row\"] {\n  background: rgba(255, 153, 0, 0.1);\n  color: var(--md-default-fg-color--dark);\n  font-weight: 600;\n  border-right: 2px solid var(--md-primary-fg-color);\n}\n\n.md-typeset table td {\n  border-bottom: 1px solid var(--md-default-fg-color--lightest);\n}\n\n.md-typeset table tbody tr:hover {\n  background: rgba(255, 153, 0, 0.05);\n}\n\n.md-typeset table tbody tr:focus-within {\n  background: rgba(255, 153, 0, 0.1);\n  outline: 2px solid var(--md-primary-fg-color);\n}\n\n/* Progress Indicators with Labels */\n.progress-bar[role=\"progressbar\"] {\n  position: relative;\n  background: var(--md-default-fg-color--lightest);\n  border-radius: var(--radius-sm);\n  height: 12px;\n  overflow: hidden;\n}\n\n.progress-bar::after {\n  content: attr(aria-valuetext);\n  position: absolute;\n  top: 100%;\n  left: 0;\n  font-size: 0.8rem;\n  color: var(--md-default-fg-color--light);\n  margin-top: var(--spacing-xs);\n}\n\n/* Loading States */\n.loading-spinner {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--md-default-fg-color--lighter);\n  border-top: 2px solid var(--md-primary-fg-color);\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .loading-spinner {\n    animation: none;\n    border-top-color: var(--md-primary-fg-color);\n  }\n  \n  .loading-spinner::after {\n    content: '⟳';\n    display: block;\n    text-align: center;\n    line-height: 16px;\n  }\n}\n\n/* Color Blind Friendly Patterns */\n.colorblind-pattern-1 {\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 2px,\n    currentColor 2px,\n    currentColor 4px\n  );\n}\n\n.colorblind-pattern-2 {\n  background-image: repeating-linear-gradient(\n    90deg,\n    transparent,\n    transparent 3px,\n    currentColor 3px,\n    currentColor 6px\n  );\n}\n\n.colorblind-pattern-3 {\n  background-image: radial-gradient(\n    circle at 50% 50%,\n    currentColor 1px,\n    transparent 1px\n  );\n  background-size: 8px 8px;\n}\n\n/* Enhanced Error Handling */\n.error-boundary {\n  border: 2px dashed var(--error-color);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-lg);\n  text-align: center;\n  background: rgba(244, 67, 54, 0.05);\n  margin: var(--spacing-lg) 0;\n}\n\n.error-message {\n  color: var(--error-color);\n  font-weight: 600;\n  margin-bottom: var(--spacing-md);\n}\n\n.error-actions {\n  display: flex;\n  gap: var(--spacing-md);\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n/* Landmark Regions */\nmain {\n  outline: none;\n}\n\nmain:focus {\n  outline: 2px solid transparent;\n}\n\n/* Language and Direction Support */\n[dir=\"rtl\"] .decision-tree,\n[dir=\"rtl\"] .learning-journey {\n  transform: scaleX(-1);\n}\n\n[dir=\"rtl\"] .decision-tree *,\n[dir=\"rtl\"] .learning-journey * {\n  transform: scaleX(-1);\n}\n\n/* Print Accessibility */\n@media print {\n  .skip-links,\n  .mobile-toolbar,\n  .loading-spinner {\n    display: none !important;\n  }\n  \n  a::after {\n    content: \" (\" attr(href) \")\";\n    font-size: 0.8em;\n  }\n  \n  a[href^=\"#\"]::after,\n  a[href^=\"javascript:\"]::after {\n    content: \"\";\n  }\n  \n  .progress-bar::after {\n    content: \"Progress: \" attr(aria-valuetext);\n    position: static;\n    display: block;\n    margin-top: var(--spacing-xs);\n  }\n}\n\n/* Font Size Controls */\n.font-size-controls {\n  position: fixed;\n  top: 100px;\n  right: var(--spacing-md);\n  background: var(--md-default-bg-color);\n  border: 1px solid var(--md-default-fg-color--lighter);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-sm);\n  box-shadow: var(--shadow-medium);\n  z-index: 1000;\n}\n\n.font-size-control {\n  display: block;\n  width: 40px;\n  height: 40px;\n  border: 1px solid var(--md-default-fg-color--lighter);\n  background: var(--md-default-bg-color);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  font-weight: 600;\n  margin-bottom: var(--spacing-xs);\n  transition: var(--hover-transition);\n}\n\n.font-size-control:hover,\n.font-size-control:focus {\n  background: var(--md-primary-fg-color);\n  color: white;\n  border-color: var(--md-primary-fg-color);\n}\n\n.font-size-control:last-child {\n  margin-bottom: 0;\n}\n\n/* Large Font Size */\nhtml.large-fonts {\n  font-size: 18px;\n}\n\nhtml.large-fonts .md-typeset {\n  font-size: 1.1rem;\n  line-height: 1.7;\n}\n\nhtml.large-fonts .md-typeset h1 { font-size: 2.2rem; }\nhtml.large-fonts .md-typeset h2 { font-size: 1.8rem; }\nhtml.large-fonts .md-typeset h3 { font-size: 1.4rem; }\n\n/* Extra Large Font Size */\nhtml.extra-large-fonts {\n  font-size: 20px;\n}\n\nhtml.extra-large-fonts .md-typeset {\n  font-size: 1.2rem;\n  line-height: 1.8;\n}\n\nhtml.extra-large-fonts .md-typeset h1 { font-size: 2.5rem; }\nhtml.extra-large-fonts .md-typeset h2 { font-size: 2rem; }\nhtml.extra-large-fonts .md-typeset h3 { font-size: 1.6rem; }\n\n/* Content Spacing Adjustments */\nhtml.large-fonts .card,\nhtml.extra-large-fonts .card {\n  padding: var(--spacing-xl);\n}\n\nhtml.large-fonts .decision-node,\nhtml.extra-large-fonts .decision-node {\n  min-height: 60px;\n  padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n/* Responsive Accessibility */\n@media (max-width: 768px) {\n  .font-size-controls {\n    position: relative;\n    right: auto;\n    top: auto;\n    display: flex;\n    justify-content: center;\n    margin: var(--spacing-md) 0;\n  }\n  \n  .font-size-control {\n    margin-bottom: 0;\n    margin-right: var(--spacing-xs);\n  }\n  \n  .font-size-control:last-child {\n    margin-right: 0;\n  }\n}