/* accessibility.css */
/* Purpose: Theming overrides for dark mode, high contrast, large text, and other accessibility modes. */

/* ==========================================================================
   GLOBAL ACCESSIBILITY (A11Y) OVERRIDES
   ========================================================================== */

/* --- DARK MODE --- */
html.a11y-dark-mode {
    --color-bg: var(--color-player-bg);
    --color-black: var(--color-white);
    --color-gray-dark: #F5F5F5;
    --color-gray-med: var(--color-gray-light);
    --color-card-bg: #1C1C1E;
    --color-card-border: rgba(255, 255, 255, 0.1);
    --color-kbd-border: rgba(255, 255, 255, 0.2);
    --color-tooltip-kbd-border: rgba(0, 0, 0, 0.15);
}

html.a11y-dark-mode .slider-dots-container {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .drag-tutorial {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .progress-tutorial{
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .slider-dots-container:active,
html.a11y-dark-mode .slider-dots-container.is-scrubbing {
    background: rgba(28, 28, 30, 0.85);
}

html.a11y-dark-mode .ios-switch::after {
    background: var(--color-player-bg);
}

html.a11y-dark-mode .metric-value,
html.a11y-dark-mode .a11y-container,
html.a11y-dark-mode .a11y-row,
html.a11y-dark-mode .floating-home-btn,
html.a11y-dark-mode .floating-about-btn,
html.a11y-dark-mode .floating-lang-btn,
html.a11y-dark-mode .floating-a11y-btn,
html.a11y-dark-mode .mode-label,
html.a11y-dark-mode .paragraph-hover-menu button,
html.a11y-dark-mode .summary-metric-card .metric-value,
html.a11y-dark-mode .case-search-input,
html.a11y-dark-mode .btn-case-search:hover,
html.a11y-dark-mode .auto-title,
html.a11y-dark-mode .a11y-header,
html.a11y-dark-mode #btn-close-a11y,
html.a11y-dark-mode #btn-close-lang {
    color: var(--color-white);
}
html.a11y-dark-mode .mode-toggle-btn {
    border-color: var(--color-white);
}

html.a11y-dark-mode .mode-toggle-slider {
    background: var(--color-white);
}
html.a11y-dark-mode .mode-toggle-btn:not(.is-recruiter) .mode-label.executive,
html.a11y-dark-mode .mode-toggle-btn.is-recruiter .mode-label.recruiter {
    color: var(--color-bg);
}
html.a11y-dark-mode .metric-label {
    color: var(--color-gray-light);
}

html.a11y-dark-mode .btn-secondary-pill {
    border-color: var(--color-white);
    color: var(--color-white);
}

html.a11y-dark-mode .btn-secondary-pill svg {
    opacity: 1;
}

html.a11y-dark-mode .btn-secondary-pill:hover,
html.a11y-dark-mode .ai-summary-btn:hover {
    border-color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}
/* DOTS */

/* --- Protected Case UI (Dark Mode) --- */
html.a11y-dark-mode .protected-case-card {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .protected-case-icon,
html.a11y-dark-mode .protected-case-title {
    color: var(--color-white);
}

html.a11y-dark-mode .protected-case-desc {
    color: var(--color-gray-med);
}

html.a11y-dark-mode .protected-case-input {
    background: var(--color-bg);
    color: var(--color-white); /* Fixes the invisible dots */
    border-color: rgba(255, 255, 255, 0.15);
}

html.a11y-dark-mode .protected-case-btn {
    background: var(--color-white);
    color: var(--color-bg); /* Inverts button for contrast */
}

html.a11y-dark-mode .slider-dot {
    background-color: rgba(255, 255, 255, 0.2);
}

html.a11y-dark-mode .slider-dot.active {
    background-color: var(--color-white);
}
html.a11y-dark-mode .case-asset-box,
html.a11y-dark-mode .combo-asset-card,
html.a11y-dark-mode .video-loader {
    background-color: var(--color-card-bg);
}

html.a11y-dark-mode .case-asset-box pre,
html.a11y-dark-mode .token.parameter,
html.a11y-dark-mode .token.property {
    color: #9CDCFE;
}

html.a11y-dark-mode .token.keyword {
    color: #569CD6;
}

html.a11y-dark-mode .token.function {
    color: #DCDCAA;
}

html.a11y-dark-mode .token.string {
    color: #CE9178;
}

html.a11y-dark-mode .token.comment {
    color: #6A9955;
}

html.a11y-dark-mode .case-toc:hover {
    background-color: transparent;
}

html.a11y-dark-mode .a11y-container {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.15);
}

html.a11y-dark-mode .action-tooltip {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-bg); /* Fixed to use actual dark color in dark mode */
}

html.a11y-dark-mode .action-tooltip kbd {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.7);
}

html.a11y-dark-mode .paragraph-hover-menu,
html.a11y-dark-mode .resume-reading-toast {
    background: var(--color-card-bg);
    color: var(--color-white);
    border: 1px solid var(--color-card-border);
}

html.a11y-dark-mode .paragraph-hover-menu button:hover,
html.a11y-dark-mode .autocomplete-item:hover,
html.a11y-dark-mode .a11y-row:not(.a11y-row-no-hover):hover,
html.a11y-dark-mode button.a11y-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .ph-divider {
    background: rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .summary-metric-card {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.15);
}

html.a11y-dark-mode .combo-tab.active {
    color: var(--color-bg) !important; /* Maps to dark theme player background */
    background: var(--color-black) !important; /* Maps to white text color layer */
}

html.a11y-dark-mode .combo-tab.active:hover {
    color: var(--color-bg) !important;
    background: var(--color-black) !important;
    opacity: 0.9;
}

html.a11y-dark-mode .combo-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.1) !important; /* Subtle glow fallback instead of blinding light flash */
    color: var(--color-black) !important;
}

html.a11y-dark-mode .search-autocomplete-results {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode mark.search-highlight {
    background-color: rgba(167, 243, 208, 0.3);
    color: #FFF;
    box-shadow: 0 0 0 2px rgba(167, 243, 208, 0.5);
}

html.a11y-dark-mode .case-description-body p code {
    background-color: #2C2C2E;
    color: #FF8A98;
}

html.a11y-dark-mode .a11y-header {
    background: var(--color-card-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.a11y-dark-mode .lang-btn {
    color: var(--color-gray-light);
}

html.a11y-dark-mode .lang-btn.active {
    background: rgba(255, 255, 255, 0.2); /* Soft contrasting bg for Active text toggle */
    color: var(--color-white);
}

html.a11y-dark-mode .toggle-group {
    background: rgba(255, 255, 255, 0.1); /* Prevents the bright white glare */
}

/* Adds dark mode support for A11y KBD tags matching the rest of the site */
html.a11y-dark-mode .a11y-kbd {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

html.a11y-dark-mode .ios-switch {
    background: var(--color-gray-dark);
}

html.a11y-dark-mode .custom-subtitle {
    background: var(--color-card-bg);
    color: var(--color-white);
}

/* --- DARK MODE AI PLAYER --- */
html.a11y-dark-mode .case-audio-player {
    background: var(--color-card-bg);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
}

html.a11y-dark-mode .case-audio-player .audio-player-header {
    color: var(--color-gray-light);
}

html.a11y-dark-mode .audio-progress-track {
    background: rgba(255, 255, 255, 0.2);
}

html.a11y-dark-mode .audio-progress-fill {
    background: var(--color-white);
}

html.a11y-dark-mode .audio-progress-fill::after {
    background-color: var(--color-bg);
}

html.a11y-dark-mode .btn-tts-action,
html.a11y-dark-mode .btn-tts-play,
html.a11y-dark-mode .btn-tts-speed,
html.a11y-dark-mode .audio-time-label {
    color: var(--color-white);
}

html.a11y-dark-mode .btn-tts-action.is-active {
    color: var(--color-accent);
}

/* Ensure native hover works independently */
.a11y-row.selected:hover {
    background: var(--color-card-border);
}

html.a11y-dark-mode .a11y-row.selected {
    background: rgba(255, 255, 255, 0.1);
}


/* --- HIGH CONTRAST MODE --- */
html.a11y-high-contrast {
    --color-bg: #000000;
    --color-black: #FFFFFF;
    --color-gray-dark: #FFFFFF;
    --color-gray-med: #FFFFFF;
    --color-gray-light: #FFFFFF;
    --color-gray-xlight: #555555;
    --color-card-bg: #FFFFFF;
    --color-card-border: #000000;
    --color-player-bg: #000000;
    --color-kbd-border: #FFFFFF;
    --color-tooltip-kbd-border: #FFFFFF;
}

html.a11y-high-contrast .drag-tutorial {
    border: 1px solid white;
}

html.a11y-high-contrast .progress-tutorial{
    border: 1px solid white;
}

/* High Contrast Player Overrides */
html.a11y-high-contrast #progress-track {
    background: rgba(255, 255, 255, 0.3) !important;
}

html.a11y-high-contrast #progress-bar {
    background: var(--color-white) !important;
    box-shadow: none !important;
}

html.a11y-high-contrast #progress-hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

html.a11y-high-contrast .a11y-modal,
html.a11y-high-contrast .a11y-container,
html.a11y-high-contrast .toggle-group,
html.a11y-high-contrast .ios-switch,
html.a11y-high-contrast .ai-summary-block, .resume-reading-toast {
    border: 2px solid var(--color-white);
}

html.a11y-high-contrast .metric-card {
    border: 2px solid var(--color-black);
}

html.a11y-high-contrast .metric-value,
html.a11y-high-contrast .metric-label {
    color: var(--color-black);
}

html.a11y-high-contrast .btn-secondary-pill {
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

html.a11y-high-contrast .case-asset-box {
    background-color: var(--color-black) !important;
    border: 2px solid var(--color-white) !important;
}

html.a11y-high-contrast .case-asset-box pre,
html.a11y-high-contrast .case-asset-box code,
html.a11y-high-contrast .combo-asset-card pre,
html.a11y-high-contrast .combo-asset-card code {
    color: var(--color-black) !important;
    forced-color-adjust: none !important;
}

html.a11y-high-contrast .case-asset-box .token,
html.a11y-high-contrast .combo-asset-card .token {
    forced-color-adjust: none !important;
}

html.a11y-high-contrast .case-asset-box .token.keyword,
html.a11y-high-contrast .combo-asset-card .token.keyword {
    color: #FFFF00 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

html.a11y-high-contrast .case-asset-box .token.function,
html.a11y-high-contrast .case-asset-box .token.class-name,
html.a11y-high-contrast .case-asset-box .token.maybe-class-name,
html.a11y-high-contrast .case-asset-box .token.builtin,
html.a11y-high-contrast .combo-asset-card .token.function,
html.a11y-high-contrast .combo-asset-card .token.class-name,
html.a11y-high-contrast .combo-asset-card .token.maybe-class-name,
html.a11y-high-contrast .combo-asset-card .token.builtin {
    color: #00FFFF !important;
    font-weight: bold !important;
}

html.a11y-high-contrast .case-asset-box .token.string,
html.a11y-high-contrast .combo-asset-card .token.string {
    color: #00FF00 !important;
}

html.a11y-high-contrast .case-asset-box .token.parameter,
html.a11y-high-contrast .combo-asset-card .token.parameter {
    color: #FF9F55 !important;
}

html.a11y-high-contrast .case-asset-box .token.property,
html.a11y-high-contrast .combo-asset-card .token.property {
    color: #FF79C6 !important;
}

html.a11y-high-contrast .case-asset-box .token.punctuation,
html.a11y-high-contrast .case-asset-box .token.operator,
html.a11y-high-contrast .combo-asset-card .token.punctuation,
html.a11y-high-contrast .combo-asset-card .token.operator {
    color: var(--color-black) !important;
}

html.a11y-high-contrast .case-asset-box .token.comment,
html.a11y-high-contrast .combo-asset-card .token.comment {
    color: var(--color-gray-light) !important;
    font-style: italic !important;
}

html.a11y-high-contrast .case-toc:hover {
    border: none;
    background-color: transparent;
}

html.a11y-high-contrast .floating-home-btn,
html.a11y-high-contrast .floating-about-btn,
html.a11y-high-contrast .floating-lang-btn,
html.a11y-high-contrast .floating-a11y-btn,
html.a11y-high-contrast .mode-label,
html.a11y-high-contrast .ai-summary-header,
html.a11y-high-contrast .a11y-container,
html.a11y-high-contrast .a11y-row,
html.a11y-high-contrast .a11y-header,
html.a11y-high-contrast #btn-close-a11y,
html.a11y-high-contrast #btn-close-lang,
html.a11y-high-contrast .lang-btn,
html.a11y-high-contrast .ai-summary-text,
html.a11y-high-contrast .ai-summary-btn,
html.a11y-high-contrast .summary-metric-card .metric-value {
    color: var(--color-white);
}

html.a11y-high-contrast .mode-toggle-btn {
    border-color: var(--color-white);
}

html.a11y-high-contrast .mode-toggle-slider {
    background: var(--color-white);
}

html.a11y-high-contrast .mode-toggle-btn:not(.is-recruiter) .mode-label.executive,
html.a11y-high-contrast .mode-toggle-btn.is-recruiter .mode-label.recruiter {
    color: var(--color-black) !important;
}

/* Toggle specific fix for High Contrast */
html.a11y-high-contrast .mode-toggle-btn {
    background: var(--color-bg) !important;
    border-color: var(--color-black) !important;
}

html.a11y-high-contrast .mode-toggle-slider {
    background-color: var(--color-black) !important;
}

html.a11y-high-contrast .mode-label {
    color: var(--color-black) !important;
}

html.a11y-high-contrast .mode-toggle-btn.is-recruiter .mode-label.recruiter,
html.a11y-high-contrast .mode-toggle-btn:not(.is-recruiter) .mode-label.executive {
    color: var(--color-bg) !important; /* Forces black text on the white slider in HC mode */
}

html.a11y-high-contrast .header-divider {
    background-color: var(--color-black) !important;
    opacity: 1;
}

html.a11y-high-contrast .paragraph-hover-menu,
html.a11y-high-contrast .breadcrumb-menu {
    border: 2px solid var(--color-black) !important;
    background: var(--color-bg) !important;
}

html.a11y-high-contrast .paragraph-hover-menu button,
html.a11y-high-contrast .breadcrumb-menu button {
    color: var(--color-black) !important;
}

html.a11y-high-contrast .paragraph-hover-menu button:hover,
html.a11y-high-contrast .breadcrumb-menu button:hover {
    background: var(--color-black) !important;
    color: var(--color-bg) !important;
}

/* --- A11Y PANEL HOVER & STATES OPTIMIZATION --- */

/* Universal & Normal Mode Hovers */
#font-normal, #font-large, .ph-divider, .ios-switch {
    transition: background-color var(--speed-fast), color var(--speed-fast), border var(--speed-fast);
}

#font-normal:hover, #font-large:hover {
    background-color: var(--color-gray-xlight);
}

.ios-switch:hover {
    opacity: 0.85; 
}

.ios-switch {
    transition: opacity var(--speed-fast);
    opacity: 1;
}

.ios-switch:hover {
    opacity: 0.7; /* Much cleaner hover state universally */
}

/* Dark Mode States */
html.a11y-dark-mode #font-normal:hover, 
html.a11y-dark-mode #font-large:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Matches other a11y menu hovers */
}

html.a11y-dark-mode .ph-divider {
    background-color: rgba(255, 255, 255, 0.15) !important; /* Stronger visibility on dark bg */
}

/* High Contrast States */
html.a11y-high-contrast #font-normal, 
html.a11y-high-contrast #font-large {
    border: none !important;
    color: var(--color-black) !important;
    background-color: transparent !important;
}

html.a11y-high-contrast #font-normal.active, 
html.a11y-high-contrast #font-large.active {
    background-color: var(--color-black) !important;
    color: var(--color-bg) !important;
    border: none !important;
}

html.a11y-high-contrast .ios-switch {
    border: 2px solid var(--color-black) !important;
}

html.a11y-high-contrast .ph-divider {
    background-color: var(--color-black) !important;
}
html.a11y-high-contrast .floating-home-btn:focus-visible,
html.a11y-high-contrast .floating-about-btn:focus-visible,
html.a11y-high-contrast .floating-lang-btn:focus-visible {
    outline-color: var(--color-white);
}

html.a11y-high-contrast .summary-metric-card {
    background-color: transparent;
    border: none;
    border-left: 2px solid var(--color-white);
}

html.a11y-high-contrast .combo-asset-card {
    background-color: var(--color-bg) !important; /* Black canvas */
    border: 2px solid var(--color-black) !important; /* Crisp white borders */
}

html.a11y-high-contrast .combo-asset-card .combo-observation {
    color: var(--color-black) !important;
}

html.a11y-high-contrast .combo-asset-card .combo-divider {
    background-color: var(--color-black) !important;
    height: 2px;
}

html.a11y-high-contrast .combo-asset-card .combo-tab {
    color: var(--color-black) !important;
    background: transparent !important;
    border: 2px solid transparent !important;
}

html.a11y-high-contrast .combo-asset-card .combo-tab:hover {
    background-color: var(--color-black) !important;
    color: var(--color-bg) !important;
}

html.a11y-high-contrast .combo-asset-card .combo-tab.active {
    background-color: var(--color-black) !important;
    color: var(--color-bg) !important;
    border: 2px solid var(--color-black) !important;
}

html.a11y-high-contrast .paragraph-hover-menu {
    border: 2px solid var(--color-white) !important;
    background: var(--color-black) !important;
}

html.a11y-high-contrast .paragraph-hover-menu button {
    color: var(--color-white) !important;
}

html.a11y-high-contrast .action-tooltip {
    border: 2px solid var(--color-white) !important;
    background: var(--color-bg) !important;
    color: var(--color-white) !important;
}

html.a11y-high-contrast .action-tooltip kbd {
    border: 2px solid var(--color-tooltip-kbd-border) !important;
    background: transparent !important;
    color: var(--color-white) !important;
}

html.a11y-high-contrast .a11y-kbd {
    border: 2px solid var(--color-kbd-border) !important;
    background: var(--color-bg) !important;
    color: var(--color-white) !important;
}

html.a11y-high-contrast .btn-play-pill,
html.a11y-high-contrast .btn-secondary-pill,
html.a11y-high-contrast .gallery-pill {
    forced-color-adjust: none !important;
    background-color: var(--color-bg) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white) !important;
}

html.a11y-high-contrast .control-btn {
    border: none !important;
    border-radius: var(--radius-circle);
    background: transparent !important;
    box-shadow: none !important;
}

/* General Deactivated State */
.ios-switch.deactivated {
    background: transparent !important;
    border: 2px dotted var(--color-gray-med) !important;
    opacity: 0.5;
}


/* High Contrast Toggle Fixes */
html.a11y-high-contrast .ios-switch {
    background: var(--color-bg) !important;
    border: 2px solid var(--color-white) !important;
    box-shadow: none !important;
}

html.a11y-high-contrast .toggle-label input:checked + .ios-switch {
    background: var(--color-white) !important;
}

html.a11y-high-contrast .toggle-label input:checked + .ios-switch::after {
    background: var(--color-bg) !important;
}

html.a11y-high-contrast .control-btn svg circle[fill="white"],
html.a11y-high-contrast .control-btn svg circle.a11y-circle-fill {
    fill: var(--color-black) !important;
    stroke: transparent !important;
}

html.a11y-high-contrast .control-btn svg path[fill="black"],
html.a11y-high-contrast .control-btn svg rect[fill="black"],
html.a11y-high-contrast .control-btn svg text[fill="black"],
html.a11y-high-contrast .control-btn svg text.a11y-text-fill {
    fill: var(--color-bg) !important;
    stroke: transparent !important;
}

html.a11y-high-contrast .control-btn svg path[stroke="black"],
html.a11y-high-contrast .control-btn svg line[stroke="black"] {
    stroke: var(--color-bg) !important;
    fill: transparent !important;
}

html.a11y-high-contrast .control-btn svg circle.a11y-stroke {
    stroke: var(--color-black) !important;
    fill: transparent !important;
}

html.a11y-high-contrast .control-btn svg text.a11y-text-stroke {
    fill: var(--color-black) !important;
    stroke: transparent !important;
}

html.a11y-high-contrast .ai-summary-block {
    background-color: var(--color-bg) !important;
    border: 2px solid var(--color-white) !important;
}

html.a11y-high-contrast .ai-summary-btn svg {
    stroke: var(--color-white) !important;
}

html.a11y-high-contrast .case-asset-box,
html.a11y-high-contrast .storage-card,
html.a11y-high-contrast .dark-info-card,
html.a11y-high-contrast .telemetry-pill,
html.a11y-high-contrast .video-loader {
    background-color: var(--color-black) !important;
    border: 2px solid var(--color-white) !important;
}

/* Forces the spinner stroke to be true black in High Contrast */
html.a11y-high-contrast .video-loader {
    color: var(--color-bg) !important;
}

html.a11y-high-contrast .btn-play-pill span,
html.a11y-high-contrast .btn-secondary-pill span,
html.a11y-high-contrast .btn-secondary-pill svg {
    color: var(--color-white) !important;
}

html.a11y-high-contrast .btn-secondary-pill svg {
    fill: var(--color-white) !important;
}

html.a11y-high-contrast .play-icon-circle {
    background-color: var(--color-white) !important;
}

html.a11y-high-contrast .play-icon-circle svg path {
    fill: var(--color-bg) !important; 
}

html.a11y-high-contrast .a11y-header {
    background: var(--color-black);
    border-bottom: 2px solid var(--color-white);
}

html.a11y-high-contrast .lang-btn.active {
    border: none !important;
    background: var(--color-black) !important;
    color: var(--color-bg) !important;
}

html.a11y-high-contrast .toggle-group,
html.a11y-high-contrast .ios-switch {
    background: var(--color-bg) !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px var(--color-black) !important;
}

html.a11y-high-contrast .ios-switch::after {
    background: var(--color-white);
}

/* New inverse states to ensure compliant visible checking */
html.a11y-high-contrast .toggle-label input:checked + .ios-switch {
    background: var(--color-white);
}

html.a11y-high-contrast .toggle-label input:checked + .ios-switch::after {
    background: var(--color-bg);
}

html.a11y-high-contrast .lang-btn {
    color: var(--color-white);
}

html.a11y-high-contrast .lang-btn.active {
    background: var(--color-white);
    color: var(--color-bg);
}

html.a11y-high-contrast .case-thumb-wrapper:focus-visible {
    outline-color: var(--color-white);
    outline-width: 4px;
}

html.a11y-dark-mode .case-thumb-wrapper:focus-visible {
    outline-color: var(--color-bg);
}

html.a11y-high-contrast .a11y-circle-fill,
html.a11y-dark-mode .a11y-circle-fill {
    fill: var(--color-black) !important;
}

html.a11y-high-contrast .a11y-text-fill,
html.a11y-dark-mode .a11y-text-fill {
    fill: var(--color-bg) !important;
}

html.a11y-high-contrast .a11y-stroke,
html.a11y-dark-mode .a11y-stroke {
    stroke: var(--color-black) !important;
}

html.a11y-dark-mode .a11y-text-stroke {
    fill: var(--color-black) !important;
}

/* --- LARGE TEXT MODE --- */
html.a11y-large-text h1 {
    font-size: 48px !important;
}

html.a11y-large-text h2,
html.a11y-large-text .gallery-item h2 {
    font-size: 40px !important;
}

html.a11y-large-text h3 {
    font-size: 28px !important;
}

html.a11y-large-text .p1 {
    font-size: 22px !important;
}

html.a11y-large-text .p2 {
    font-size: 20px !important;
}

html.a11y-large-text .case-short-desc {
    font-size: 24px !important;
}

html.a11y-large-text .top-breadcrumb {
    font-size: 16px !important;
}

/* Pills, metrics, and small labels */
html.a11y-large-text .telemetry-pill,
html.a11y-large-text .case-year,
html.a11y-large-text .combo-tab {
    font-size: 16px !important;
}

html.a11y-large-text .case-metrics span:last-child {
    font-size: 16px !important; /* Metric label */
}

html.a11y-large-text .case-metrics span:first-child {
    font-size: 26px !important; /* Metric value */
}

html.a11y-large-text .combo-observation,
html.a11y-large-text .case-caption {
    font-size: 18px !important;
}

html.a11y-large-text .custom-subtitle {
    font-size: 24px !important;
    line-height: 1.2;
}

html.a11y-large-text .case-audio-player.is-shrunk {
    max-width: 480px; 
}

html.a11y-large-text .speed-value-text {
    font-size: 14px;
}

/* --- Protected Case UI (High Contrast) --- */
html.a11y-high-contrast .protected-case-card {
    background-color: var(--color-bg) !important;
    border: 2px solid var(--color-black) !important;
}

html.a11y-high-contrast .protected-case-icon,
html.a11y-high-contrast .protected-case-title,
html.a11y-high-contrast .protected-case-desc {
    color: var(--color-black) !important;
}

html.a11y-high-contrast .protected-case-input {
    background-color: var(--color-bg) !important;
    color: var(--color-black) !important; /* Fixes the invisible dots */
    border: 2px solid var(--color-black) !important;
}

html.a11y-high-contrast .protected-case-input::placeholder {
    color: var(--color-black) !important;
    opacity: 0.8 !important;
}

html.a11y-high-contrast .protected-case-btn {
    background-color: var(--color-black) !important;
    color: var(--color-bg) !important;
    border: 2px solid var(--color-black) !important;
    font-weight: 800 !important;
}

@media (max-width: 768px) {
    html.a11y-large-text h1 {
        font-size: 34px !important;
    }
    html.a11y-large-text h2,
    html.a11y-large-text .gallery-item h2 {
        font-size: 32px !important;
    }
    html.a11y-large-text .custom-subtitle {
        font-size: 20px !important;
        bottom: 110px;
    }
}

/* --- OTHER MODES --- */
html.a11y-dyslexia * {
    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

html.a11y-focus-mode *:focus-visible {
    outline: 4px solid var(--color-accent) !important;
    outline-offset: 4px !important;
    border-radius: var(--radius-sm);
}

html.a11y-reduce-motion * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.a11y-reduce-motion .ios-switch,
html.a11y-reduce-motion .ios-switch::after,
html.a11y-reduce-motion .a11y-modal {
    transition: none !important;
    animation: none !important;
}

html.a11y-reduce-motion .view-section.active {
    opacity: 1 !important;
}

/* --- HIGH CONTRAST AI PLAYER --- */
html.a11y-high-contrast .case-audio-player {
    background: var(--color-bg) !important;
    border: 2px solid var(--color-white) !important;
    color: var(--color-white) !important;
}

html.a11y-high-contrast .case-audio-player .audio-player-header {
    color: var(--color-white) !important;
}

html.a11y-high-contrast .audio-progress-track {
    background: rgba(255, 255, 255, 0.3) !important;
}

html.a11y-high-contrast .audio-progress-fill {
    background: var(--color-white) !important;
}

html.a11y-high-contrast .btn-tts-action,
html.a11y-high-contrast .btn-tts-play,
html.a11y-high-contrast .btn-tts-speed,
html.a11y-high-contrast .audio-time-label {
    color: var(--color-white) !important;
    opacity: 1 !important;
}

html.a11y-high-contrast .a11y-row.selected {
    background: var(--color-black) !important;
    color: var(--color-bg) !important;
}

html.a11y-high-contrast .a11y-row.selected .row-checkmark {
    color: var(--color-bg) !important;
}