/* assets/css/pages/accessibility.css
 * Styling for the Accessibility Showcase & Inclusive Learning Hub
 * Fully supports Light, Dark, Midnight, Sepia, and High Contrast
 */

@layer components {
    .a11y-hub-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem 4rem 1.5rem;
    }

    /* Hero Enhancements */
    .a11y-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 1.5rem;
    }

    .a11y-action-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--color-bg-surface, #ffffff);
        color: var(--color-text-main, #0f172a);
        border: 1px solid var(--color-border, #e2e8f0);
        padding: 0.6rem 1.1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: var(--shadow-sm);
        text-decoration: none;
    }

    .a11y-action-chip:hover {
        background: var(--color-primary, #3b82f6);
        color: #ffffff;
        border-color: var(--color-primary, #3b82f6);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .a11y-action-chip kbd {
        background: var(--color-bg-subtle, #f1f5f9);
        color: var(--color-text-main, #1e293b);
        border: 1px solid var(--color-border, #cbd5e1);
        padding: 0.15rem 0.4rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-family: ui-monospace, monospace;
    }

    .a11y-action-chip:hover kbd {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Sandbox Interactive Playground */
    .a11y-sandbox-card {
        background: var(--color-bg-surface, #ffffff);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1.5rem;
        padding: 2rem;
        margin: 2.5rem 0 3.5rem 0;
        box-shadow: var(--shadow-lg);
        position: relative;
        overflow: hidden;
    }

    .sandbox-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.35rem 0.75rem;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        color: var(--color-primary);
        margin-bottom: 0.75rem;
    }

    .sandbox-title {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 0.5rem 0;
        color: var(--color-text-main);
    }

    .sandbox-desc {
        color: var(--color-text-muted);
        font-size: 0.95rem;
        margin: 0 0 1.75rem 0;
        max-width: 800px;
    }

    .sandbox-controls-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.25rem;
        padding: 1.25rem;
        background: var(--color-bg-subtle, #f8fafc);
        border-radius: 1rem;
        border: 1px solid var(--color-border, #e2e8f0);
        margin-bottom: 1.5rem;
    }

    .sandbox-control-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .sandbox-control-group label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--color-text-muted);
    }

    .sandbox-select,
    .sandbox-range {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid var(--color-border);
        background: var(--color-bg-surface);
        color: var(--color-text-main);
        font-size: 0.875rem;
    }

    .sandbox-preview-box {
        background: var(--color-bg-surface);
        border: 2px dashed var(--color-border);
        border-radius: 1rem;
        padding: 1.75rem;
        position: relative;
        transition: all 0.2s ease;
    }

    .sandbox-preview-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 0.75rem;
        color: var(--color-text-main);
    }

    .sandbox-preview-text {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--color-text-main);
        margin: 0;
    }

    /* Section Headings */
    .a11y-section-header {
        margin: 3.5rem 0 1.5rem 0;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .a11y-section-icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        background: color-mix(in srgb, var(--color-primary) 15%, transparent);
        color: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    .a11y-section-header h2 {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0;
        color: var(--color-text-main);
    }

    /* Cards Grid */
    .a11y-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
    }

    .a11y-feature-card {
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 1.25rem;
        padding: 1.75rem;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .a11y-feature-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .feature-top {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .feature-icon-box {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .icon-blue   { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
    .icon-purple { background: rgba(147, 51, 234, 0.12); color: #9333ea; }
    .icon-teal   { background: rgba(20, 184, 166, 0.12); color: #0d9488; }
    .icon-amber  { background: rgba(245, 158, 11, 0.12); color: #d97706; }
    .icon-rose   { background: rgba(244, 63, 94, 0.12);  color: #e11d48; }
    .icon-emerald{ background: rgba(16, 185, 129, 0.12); color: #059669; }

    .feature-title-wrap h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0;
        color: var(--color-text-main);
    }

    .feature-tag {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }

    .feature-body {
        font-size: 0.9rem;
        color: var(--color-text-muted);
        line-height: 1.55;
        flex-grow: 1;
    }

    .feature-demo-box {
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: 0.85rem;
        font-size: 0.85rem;
    }

    .feature-demo-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 0.35rem;
        display: block;
    }

    /* Shortcuts Table */
    .shortcuts-showcase-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        overflow: hidden;
        margin-top: 1rem;
    }

    .shortcuts-showcase-table th,
    .shortcuts-showcase-table td {
        padding: 0.85rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--color-border);
    }

    .shortcuts-showcase-table th {
        background: var(--color-bg-subtle, #f8fafc);
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .shortcuts-showcase-table td {
        font-size: 0.9rem;
        color: var(--color-text-main);
    }

    .shortcuts-showcase-table tr:last-child td {
        border-bottom: none;
    }

    .shortcuts-showcase-table kbd {
        display: inline-block;
        padding: 0.2rem 0.45rem;
        font-family: ui-monospace, monospace;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--color-text-main);
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-bottom-width: 2px;
        border-radius: 0.3rem;
    }

    /* Compliance Banner */
    .a11y-compliance-banner {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-surface)), var(--color-bg-surface));
        border: 1px solid var(--color-border);
        border-radius: 1.25rem;
        padding: 2rem;
        margin-top: 3.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .a11y-compliance-banner h3 {
        font-size: 1.3rem;
        font-weight: 800;
        margin: 0;
        color: var(--color-text-main);
    }

    .a11y-compliance-banner p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--color-text-muted);
    }

    /* Themes Adaptations */
    [data-theme="dark"] .a11y-sandbox-card,
    .dark .a11y-sandbox-card,
    [data-theme="dark"] .a11y-feature-card,
    .dark .a11y-feature-card {
        background: #1e293b;
        border-color: #334155;
    }
    [data-theme="dark"] .sandbox-controls-grid,
    .dark .sandbox-controls-grid,
    [data-theme="dark"] .feature-demo-box,
    .dark .feature-demo-box,
    [data-theme="dark"] .shortcuts-showcase-table th,
    .dark .shortcuts-showcase-table th {
        background: #0f172a;
        border-color: #334155;
    }

    [data-theme="midnight"] .a11y-sandbox-card,
    .midnight .a11y-sandbox-card,
    [data-theme="midnight"] .a11y-feature-card,
    .midnight .a11y-feature-card {
        background: #0f172a;
        border-color: #1e293b;
    }
    [data-theme="midnight"] .sandbox-controls-grid,
    .midnight .sandbox-controls-grid,
    [data-theme="midnight"] .feature-demo-box,
    .midnight .feature-demo-box,
    [data-theme="midnight"] .shortcuts-showcase-table th,
    .midnight .shortcuts-showcase-table th {
        background: #020617;
        border-color: #1e293b;
    }

    [data-theme="sepia"] .a11y-sandbox-card,
    .sepia .a11y-sandbox-card,
    [data-theme="sepia"] .a11y-feature-card,
    .sepia .a11y-feature-card {
        background: #fbf0d9;
        border-color: #e4d5b7;
    }
    [data-theme="sepia"] .sandbox-controls-grid,
    .sepia .sandbox-controls-grid,
    [data-theme="sepia"] .feature-demo-box,
    .sepia .feature-demo-box,
    [data-theme="sepia"] .shortcuts-showcase-table th,
    .sepia .shortcuts-showcase-table th {
        background: #f4e4c1;
        border-color: #ded0b0;
    }

    /* High Contrast Mode */
    [data-theme="high-contrast"] .a11y-sandbox-card,
    [data-theme="high-contrast"] .a11y-feature-card,
    [data-theme="high-contrast"] .a11y-compliance-banner,
    .high-contrast .a11y-sandbox-card,
    .high-contrast .a11y-feature-card,
    .high-contrast .a11y-compliance-banner {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
        box-shadow: none !important;
    }
    [data-theme="high-contrast"] .sandbox-title,
    [data-theme="high-contrast"] .a11y-section-header h2,
    [data-theme="high-contrast"] .feature-title-wrap h3,
    [data-theme="high-contrast"] .a11y-compliance-banner h3,
    .high-contrast .sandbox-title,
    .high-contrast .a11y-section-header h2,
    .high-contrast .feature-title-wrap h3,
    .high-contrast .a11y-compliance-banner h3 {
        color: #ffff00 !important;
    }
    [data-theme="high-contrast"] .sandbox-controls-grid,
    [data-theme="high-contrast"] .feature-demo-box,
    [data-theme="high-contrast"] .shortcuts-showcase-table th,
    .high-contrast .sandbox-controls-grid,
    .high-contrast .feature-demo-box,
    .high-contrast .shortcuts-showcase-table th {
        background: #000000 !important;
        border: 1px solid #ffffff !important;
    }
    [data-theme="high-contrast"] .sandbox-desc,
    [data-theme="high-contrast"] .feature-body,
    [data-theme="high-contrast"] .a11y-compliance-banner p,
    [data-theme="high-contrast"] .shortcuts-showcase-table td,
    .high-contrast .sandbox-desc,
    .high-contrast .feature-body,
    .high-contrast .a11y-compliance-banner p,
    .high-contrast .shortcuts-showcase-table td {
        color: #ffffff !important;
    }
    [data-theme="high-contrast"] .a11y-action-chip,
    .high-contrast .a11y-action-chip {
        background: #000000 !important;
        color: #ffff00 !important;
        border: 2px solid #ffffff !important;
    }
    [data-theme="high-contrast"] .shortcuts-showcase-table kbd,
    .high-contrast .shortcuts-showcase-table kbd {
        background: #000000 !important;
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
    }

    /* Compliance Statement & Inline (i) Info Buttons */
    .compliance-statement-lead {
        font-size: 1.05rem;
        line-height: 1.8;
        color: var(--color-text-main);
        margin-bottom: 1rem;
    }

    .compliance-term-wrap {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
        padding: 0.15rem 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
        margin: 0 0.15rem;
        white-space: nowrap;
    }

    .a11y-info-btn {
        background: none;
        border: none;
        color: var(--color-primary, #3b82f6);
        cursor: pointer;
        padding: 0.15rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        border-radius: 9999px;
        transition: transform 0.15s ease, color 0.15s ease;
    }

    .a11y-info-btn:hover {
        transform: scale(1.25);
        color: #1d4ed8;
    }

    .a11y-info-btn:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Standards Research Modal */
    .standards-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: rgba(15, 23, 42, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
    }

    .standards-modal-backdrop.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .standards-modal-panel {
        background: var(--color-bg-surface, #ffffff);
        color: var(--color-text-main, #0f172a);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1.25rem;
        width: 100%;
        max-width: 860px;
        height: 90vh;
        max-height: 850px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        animation: standardsModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes standardsModalPop {
        from { transform: scale(0.96) translateY(16px); opacity: 0; }
        to { transform: scale(1) translateY(0); opacity: 1; }
    }

    /* Modal Header */
    .standards-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.75rem;
        background: var(--color-bg-subtle, #f8fafc);
        border-bottom: 1px solid var(--color-border, #e2e8f0);
        gap: 1rem;
    }

    .standards-header-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .standards-type-badge {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-primary, #3b82f6);
    }

    .standards-modal-header h2 {
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        line-height: 1.2;
    }

    .standards-header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .standards-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        font-size: 0.8125rem;
        font-weight: 600;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        cursor: pointer;
        color: var(--color-text-main);
        transition: all 0.15s ease;
    }

    .standards-action-btn:hover {
        background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-surface));
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .standards-close-btn {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }

    .standards-close-btn:hover {
        background: var(--color-bg-surface-hover, rgba(0, 0, 0, 0.06));
        color: var(--color-text-main);
    }

    /* Modal Navigation Tabs */
    .standards-modal-tabs {
        display: flex;
        background: var(--color-bg-subtle, #f8fafc);
        border-bottom: 1px solid var(--color-border);
        padding: 0 1.75rem;
        gap: 0.5rem;
    }

    .standards-tab {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 0.85rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-text-muted);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
    }

    .standards-tab:hover {
        color: var(--color-primary);
    }

    .standards-tab.is-active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    /* Modal Body */
    .standards-modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem 1.75rem;
        display: flex;
        flex-direction: column;
    }

    .standards-tab-content {
        display: none;
        flex-direction: column;
        gap: 1.25rem;
    }

    .standards-tab-content.is-active {
        display: flex;
    }

    /* Overview Content */
    .overview-grid {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .overview-card {
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        padding: 1.25rem 1.5rem;
    }

    .overview-card-title {
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--color-text-main);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .overview-card-title i {
        color: var(--color-primary);
    }

    .overview-card-body {
        font-size: 0.875rem;
        line-height: 1.6;
        color: var(--color-text-muted);
        margin: 0;
    }

    /* Verbatim Text View & Search */
    .standards-search-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }

    .standards-search-bar i {
        color: var(--color-text-muted);
    }

    .standards-search-input {
        background: transparent;
        border: none;
        color: var(--color-text-main);
        font-size: 0.875rem;
        width: 100%;
        outline: none;
    }

    .standards-search-counter {
        font-size: 0.75rem;
        color: var(--color-text-muted);
        white-space: nowrap;
    }

    .standards-verbatim-container {
        flex: 1;
        overflow-y: auto;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.875rem;
        padding: 1.5rem;
        font-size: 0.9rem;
        line-height: 1.65;
        font-family: ui-sans-serif, system-ui, sans-serif;
    }

    .standards-verbatim-container h1,
    .standards-verbatim-container h2,
    .standards-verbatim-container h3,
    .standards-verbatim-container h4 {
        color: var(--color-text-main);
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .standards-verbatim-container h1 { font-size: 1.25rem; }
    .standards-verbatim-container h2 { font-size: 1.1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.35rem; }
    .standards-verbatim-container h3 { font-size: 0.98rem; }

    .standards-verbatim-container ul {
        margin: 0.5rem 0 1rem 1.5rem;
        padding: 0;
    }

    .standards-verbatim-container li {
        margin-bottom: 0.35rem;
    }

    .standards-verbatim-container code {
        background: var(--color-bg-subtle);
        padding: 0.15rem 0.4rem;
        border-radius: 0.25rem;
        font-size: 0.85em;
        font-family: monospace;
    }

    .standards-verbatim-container mark {
        background-color: #fde047;
        color: #000000;
        padding: 0.1rem 0.25rem;
        border-radius: 0.2rem;
        font-weight: 700;
    }

    /* Modal Footer */
    .standards-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.75rem;
        background: var(--color-bg-subtle, #f8fafc);
        border-top: 1px solid var(--color-border);
        gap: 1rem;
    }

    .standards-source-cite {
        font-size: 0.75rem;
        color: var(--color-text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .standards-done-btn {
        background: var(--color-primary, #3b82f6);
        color: #ffffff;
        font-size: 0.875rem;
        font-weight: 600;
        border: none;
        border-radius: 0.625rem;
        padding: 0.5rem 1.25rem;
        cursor: pointer;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }

    .standards-done-btn:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    /* Themes Adaptations for Standards Modal */
    [data-theme="dark"] .standards-modal-backdrop,
    .dark .standards-modal-backdrop {
        background: rgba(0, 0, 0, 0.75);
    }
    [data-theme="dark"] .standards-modal-panel,
    .dark .standards-modal-panel {
        background: #1e293b;
        color: #f8fafc;
        border-color: #334155;
    }
    [data-theme="dark"] .standards-modal-header,
    [data-theme="dark"] .standards-modal-tabs,
    [data-theme="dark"] .standards-modal-footer,
    [data-theme="dark"] .overview-card,
    [data-theme="dark"] .standards-search-bar,
    .dark .standards-modal-header,
    .dark .standards-modal-tabs,
    .dark .standards-modal-footer,
    .dark .overview-card,
    .dark .standards-search-bar {
        background: #0f172a;
        border-color: #334155;
    }
    [data-theme="dark"] .standards-verbatim-container,
    .dark .standards-verbatim-container {
        background: #1e293b;
        border-color: #334155;
        color: #f1f5f9;
    }
    [data-theme="dark"] .compliance-term-wrap,
    .dark .compliance-term-wrap {
        background: rgba(59, 130, 246, 0.15);
        border-color: rgba(59, 130, 246, 0.3);
    }

    [data-theme="midnight"] .standards-modal-panel,
    .midnight .standards-modal-panel {
        background: #0f172a;
        border-color: #1e293b;
    }
    [data-theme="midnight"] .standards-modal-header,
    [data-theme="midnight"] .standards-modal-tabs,
    [data-theme="midnight"] .standards-modal-footer,
    [data-theme="midnight"] .overview-card,
    [data-theme="midnight"] .standards-search-bar,
    .midnight .standards-modal-header,
    .midnight .standards-modal-tabs,
    .midnight .standards-modal-footer,
    .midnight .overview-card,
    .midnight .standards-search-bar {
        background: #020617;
        border-color: #1e293b;
    }
    [data-theme="midnight"] .standards-verbatim-container,
    .midnight .standards-verbatim-container {
        background: #0f172a;
        border-color: #1e293b;
    }

    [data-theme="sepia"] .standards-modal-panel,
    .sepia .standards-modal-panel {
        background: #fbf0d9;
        border-color: #e4d5b7;
        color: #433422;
    }
    [data-theme="sepia"] .standards-modal-header,
    [data-theme="sepia"] .standards-modal-tabs,
    [data-theme="sepia"] .standards-modal-footer,
    [data-theme="sepia"] .overview-card,
    [data-theme="sepia"] .standards-search-bar,
    .sepia .standards-modal-header,
    .sepia .standards-modal-tabs,
    .sepia .standards-modal-footer,
    .sepia .overview-card,
    .sepia .standards-search-bar {
        background: #f4e4c1;
        border-color: #ded0b0;
    }
    [data-theme="sepia"] .standards-verbatim-container,
    .sepia .standards-verbatim-container {
        background: #fbf0d9;
        border-color: #ded0b0;
        color: #433422;
    }

    /* High Contrast Mode */
    [data-theme="high-contrast"] .compliance-term-wrap,
    .high-contrast .compliance-term-wrap {
        background: #000000 !important;
        border: 2px solid #ffff00 !important;
    }
    [data-theme="high-contrast"] .a11y-info-btn,
    .high-contrast .a11y-info-btn {
        color: #ffff00 !important;
    }
    [data-theme="high-contrast"] .standards-modal-backdrop,
    .high-contrast .standards-modal-backdrop {
        background: rgba(0, 0, 0, 0.95);
    }
    [data-theme="high-contrast"] .standards-modal-panel,
    .high-contrast .standards-modal-panel {
        background: #000000 !important;
        border: 3px solid #ffffff !important;
        box-shadow: none !important;
        color: #ffffff !important;
    }
    [data-theme="high-contrast"] .standards-modal-header,
    [data-theme="high-contrast"] .standards-modal-tabs,
    [data-theme="high-contrast"] .standards-modal-footer,
    [data-theme="high-contrast"] .overview-card,
    [data-theme="high-contrast"] .standards-search-bar,
    [data-theme="high-contrast"] .standards-verbatim-container,
    .high-contrast .standards-modal-header,
    .high-contrast .standards-modal-tabs,
    .high-contrast .standards-modal-footer,
    .high-contrast .overview-card,
    .high-contrast .standards-search-bar,
    .high-contrast .standards-verbatim-container {
        background: #000000 !important;
        border-color: #ffffff !important;
        border-width: 2px !important;
        color: #ffffff !important;
    }
    [data-theme="high-contrast"] .standards-modal-header h2,
    [data-theme="high-contrast"] .overview-card-title,
    [data-theme="high-contrast"] .standards-tab.is-active,
    .high-contrast .standards-modal-header h2,
    .high-contrast .overview-card-title,
    .high-contrast .standards-tab.is-active {
        color: #ffff00 !important;
    }
    [data-theme="high-contrast"] .standards-tab.is-active,
    .high-contrast .standards-tab.is-active {
        border-bottom: 3px solid #ffff00 !important;
    }
    [data-theme="high-contrast"] .standards-action-btn,
    [data-theme="high-contrast"] .standards-done-btn,
    .high-contrast .standards-action-btn,
    .high-contrast .standards-done-btn {
        background: #ffff00 !important;
        color: #000000 !important;
        border: 2px solid #ffffff !important;
        font-weight: 800 !important;
    }

    /* ====================================================================
       READING FLUENCY BENCHMARK TOOL
       ==================================================================== */
    .benchmark-wrapper {
        background: var(--color-bg-surface, #ffffff);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1.5rem;
        padding: 2rem;
        margin: 2rem 0;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .benchmark-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .benchmark-tag {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.3rem 0.75rem;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        color: var(--color-primary);
    }

    .benchmark-controls-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1rem;
        padding: 1rem 1.25rem;
    }

    .benchmark-mode-select {
        padding: 0.5rem 0.85rem;
        border-radius: 0.5rem;
        border: 1px solid var(--color-border);
        background: var(--color-bg-surface);
        color: var(--color-text-main);
        font-size: 0.875rem;
        font-weight: 600;
    }

    .benchmark-timer-box {
        font-family: ui-monospace, monospace;
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--color-primary, #3b82f6);
        min-width: 100px;
        text-align: center;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        padding: 0.35rem 0.75rem;
    }

    .benchmark-passage-box {
        background: var(--color-bg-surface);
        border: 2px solid var(--color-border);
        border-radius: 1rem;
        padding: 1.75rem;
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--color-text-main);
        position: relative;
        min-height: 160px;
    }

    .benchmark-passage-box.is-blurred {
        filter: blur(5px);
        user-select: none;
        pointer-events: none;
        opacity: 0.6;
    }

    .benchmark-overlay-prompt {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 1rem;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--color-primary);
        z-index: 5;
    }

    .benchmark-results-card {
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .benchmark-metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
    }

    .benchmark-metric-item {
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: 0.85rem;
        text-align: center;
    }

    .benchmark-metric-val {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--color-primary);
        line-height: 1.2;
    }

    .benchmark-metric-lbl {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        margin-top: 0.25rem;
    }

    /* ====================================================================
       IEP / 504 ACCOMMODATION PROFILE EXPORTER
       ==================================================================== */
    .iep-generator-wrapper {
        background: var(--color-bg-surface, #ffffff);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1.5rem;
        padding: 2rem;
        margin: 2rem 0;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .iep-brief-card {
        background: var(--color-bg-surface);
        border: 2px solid var(--color-primary);
        border-radius: 1rem;
        padding: 1.75rem;
        position: relative;
    }

    .iep-brief-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 1rem;
        margin-bottom: 1.25rem;
        gap: 1rem;
    }

    .iep-brief-title {
        font-size: 1.3rem;
        font-weight: 800;
        margin: 0;
        color: var(--color-text-main);
    }

    .iep-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .iep-section-box {
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: 1rem;
    }

    .iep-section-box h4 {
        font-size: 0.875rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--color-text-main);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .iep-section-box h4 i {
        color: var(--color-primary);
    }

    .iep-list {
        margin: 0;
        padding-left: 1.25rem;
        font-size: 0.875rem;
        color: var(--color-text-muted);
        line-height: 1.6;
    }

    /* Themes for Benchmark & IEP */
    [data-theme="dark"] .benchmark-wrapper,
    [data-theme="dark"] .iep-generator-wrapper,
    .dark .benchmark-wrapper,
    .dark .iep-generator-wrapper {
        background: #1e293b;
        border-color: #334155;
    }
    [data-theme="dark"] .benchmark-controls-bar,
    [data-theme="dark"] .benchmark-results-card,
    [data-theme="dark"] .iep-section-box,
    .dark .benchmark-controls-bar,
    .dark .benchmark-results-card,
    .dark .iep-section-box {
        background: #0f172a;
        border-color: #334155;
    }

    [data-theme="midnight"] .benchmark-wrapper,
    [data-theme="midnight"] .iep-generator-wrapper,
    .midnight .benchmark-wrapper,
    .midnight .iep-generator-wrapper {
        background: #0f172a;
        border-color: #1e293b;
    }
    [data-theme="midnight"] .benchmark-controls-bar,
    [data-theme="midnight"] .benchmark-results-card,
    [data-theme="midnight"] .iep-section-box,
    .midnight .benchmark-controls-bar,
    .midnight .benchmark-results-card,
    .midnight .iep-section-box {
        background: #020617;
        border-color: #1e293b;
    }

    [data-theme="sepia"] .benchmark-wrapper,
    [data-theme="sepia"] .iep-generator-wrapper,
    .sepia .benchmark-wrapper,
    .sepia .iep-generator-wrapper {
        background: #fbf0d9;
        border-color: #e4d5b7;
    }
    [data-theme="sepia"] .benchmark-controls-bar,
    [data-theme="sepia"] .benchmark-results-card,
    [data-theme="sepia"] .iep-section-box,
    .sepia .benchmark-controls-bar,
    .sepia .benchmark-results-card,
    .sepia .iep-section-box {
        background: #f4e4c1;
        border-color: #ded0b0;
    }

    /* High Contrast Mode */
    [data-theme="high-contrast"] .benchmark-wrapper,
    [data-theme="high-contrast"] .iep-generator-wrapper,
    [data-theme="high-contrast"] .iep-brief-card,
    .high-contrast .benchmark-wrapper,
    .high-contrast .iep-generator-wrapper,
    .high-contrast .iep-brief-card {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
    }
    [data-theme="high-contrast"] .benchmark-controls-bar,
    [data-theme="high-contrast"] .benchmark-results-card,
    [data-theme="high-contrast"] .benchmark-metric-item,
    [data-theme="high-contrast"] .iep-section-box,
    .high-contrast .benchmark-controls-bar,
    .high-contrast .benchmark-results-card,
    .high-contrast .benchmark-metric-item,
    .high-contrast .iep-section-box {
        background: #000000 !important;
        border: 1px solid #ffffff !important;
    }
    [data-theme="high-contrast"] .benchmark-timer-box,
    [data-theme="high-contrast"] .benchmark-metric-val,
    [data-theme="high-contrast"] .iep-brief-title,
    [data-theme="high-contrast"] .iep-section-box h4,
    .high-contrast .benchmark-timer-box,
    .high-contrast .benchmark-metric-val,
    .high-contrast .iep-brief-title,
    .high-contrast .iep-section-box h4 {
        color: #ffff00 !important;
    }

    /* ====================================================================
       CLINICAL VISION & COLORBLINDNESS SIMULATION STUDIO
       ==================================================================== */
    .vision-sim-wrapper,
    .karaoke-demo-wrapper,
    .pwa-storage-wrapper {
        background: var(--color-bg-surface, #ffffff);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1.5rem;
        padding: 2rem;
        margin: 2rem 0;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .vision-controls-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border, #e2e8f0);
        border-radius: 1rem;
        padding: 1rem 1.25rem;
    }

    .vision-specimen-box {
        background: var(--color-bg-surface);
        border: 2px solid var(--color-border);
        border-radius: 1rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        transition: filter 0.3s ease;
    }

    .vision-specimen-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 0.75rem;
    }

    .vision-color-spectrum {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        height: 3rem;
        border-radius: 0.5rem;
        overflow: hidden;
        border: 1px solid var(--color-border);
    }

    .vision-color-spectrum div {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }

    .vision-specimen-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1rem;
    }

    .vision-specimen-card {
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: 1.25rem;
    }

    .vision-info-callout {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
        border-radius: 0.75rem;
        padding: 1rem;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--color-text-main);
    }

    /* Global viewport filter classes */
    body.sim-protanopia { filter: url(#protanopia-filter) !important; }
    body.sim-deuteranopia { filter: url(#deuteranopia-filter) !important; }
    body.sim-tritanopia { filter: url(#tritanopia-filter) !important; }
    body.sim-achromatopsia { filter: url(#achromatopsia-filter) !important; }
    body.sim-cataracts { filter: url(#cataracts-filter) !important; }

    /* ====================================================================
       KARAOKE SYNCHRONIZED WORD TRACKING
       ==================================================================== */
    .karaoke-passage-box {
        background: var(--color-bg-surface);
        border: 2px solid var(--color-primary);
        border-radius: 1rem;
        padding: 1.75rem;
        font-size: 1.25rem;
        line-height: 2;
    }

    .karaoke-text-stream {
        margin: 0;
        color: var(--color-text-main);
    }

    .karaoke-word {
        display: inline-block;
        padding: 0.1rem 0.25rem;
        border-radius: 0.3rem;
        transition: all 0.15s ease;
    }

    .karaoke-word.is-active {
        background: #fde047;
        color: #000000 !important;
        font-weight: 800;
        transform: scale(1.08);
        box-shadow: 0 4px 10px rgba(250, 204, 21, 0.4);
    }

    /* ====================================================================
       PWA STORAGE & OFFLINE DIAGNOSTICS
       ==================================================================== */
    .pwa-storage-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
    }

    .pwa-metric-card {
        background: var(--color-bg-subtle, #f8fafc);
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        padding: 1.5rem;
    }

    .pwa-progress-track {
        height: 0.75rem;
        background: var(--color-border);
        border-radius: 9999px;
        overflow: hidden;
        margin-top: 0.5rem;
    }

    .pwa-progress-fill {
        height: 100%;
        background: var(--color-primary);
        border-radius: 9999px;
        transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Themes Adaptations for Vision, Karaoke & Storage */
    [data-theme="dark"] .vision-sim-wrapper,
    [data-theme="dark"] .karaoke-demo-wrapper,
    [data-theme="dark"] .pwa-storage-wrapper,
    .dark .vision-sim-wrapper,
    .dark .karaoke-demo-wrapper,
    .dark .pwa-storage-wrapper {
        background: #1e293b;
        border-color: #334155;
    }
    [data-theme="dark"] .vision-controls-bar,
    [data-theme="dark"] .vision-specimen-card,
    [data-theme="dark"] .pwa-metric-card,
    .dark .vision-controls-bar,
    .dark .vision-specimen-card,
    .dark .pwa-metric-card {
        background: #0f172a;
        border-color: #334155;
    }

    [data-theme="midnight"] .vision-sim-wrapper,
    [data-theme="midnight"] .karaoke-demo-wrapper,
    [data-theme="midnight"] .pwa-storage-wrapper,
    .midnight .vision-sim-wrapper,
    .midnight .karaoke-demo-wrapper,
    .midnight .pwa-storage-wrapper {
        background: #0f172a;
        border-color: #1e293b;
    }
    [data-theme="midnight"] .vision-controls-bar,
    [data-theme="midnight"] .vision-specimen-card,
    [data-theme="midnight"] .pwa-metric-card,
    .midnight .vision-controls-bar,
    .midnight .vision-specimen-card,
    .midnight .pwa-metric-card {
        background: #020617;
        border-color: #1e293b;
    }

    [data-theme="sepia"] .vision-sim-wrapper,
    [data-theme="sepia"] .karaoke-demo-wrapper,
    [data-theme="sepia"] .pwa-storage-wrapper,
    .sepia .vision-sim-wrapper,
    .sepia .karaoke-demo-wrapper,
    .sepia .pwa-storage-wrapper {
        background: #fbf0d9;
        border-color: #e4d5b7;
    }
    [data-theme="sepia"] .vision-controls-bar,
    [data-theme="sepia"] .vision-specimen-card,
    [data-theme="sepia"] .pwa-metric-card,
    .sepia .vision-controls-bar,
    .sepia .vision-specimen-card,
    .sepia .pwa-metric-card {
        background: #f4e4c1;
        border-color: #ded0b0;
    }

    [data-theme="high-contrast"] .vision-sim-wrapper,
    [data-theme="high-contrast"] .karaoke-demo-wrapper,
    [data-theme="high-contrast"] .pwa-storage-wrapper,
    .high-contrast .vision-sim-wrapper,
    .high-contrast .karaoke-demo-wrapper,
    .high-contrast .pwa-storage-wrapper {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
    }
    [data-theme="high-contrast"] .vision-controls-bar,
    [data-theme="high-contrast"] .vision-specimen-card,
    [data-theme="high-contrast"] .pwa-metric-card,
    .high-contrast .vision-controls-bar,
    .high-contrast .vision-specimen-card,
    .high-contrast .pwa-metric-card {
        background: #000000 !important;
        border: 1px solid #ffffff !important;
    }
    [data-theme="high-contrast"] .karaoke-word.is-active,
    .high-contrast .karaoke-word.is-active {
        background: #ffff00 !important;
        color: #000000 !important;
        border: 1px solid #ffffff !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .a11y-action-chip,
        .a11y-feature-card,
        .sandbox-preview-box {
            transition: none !important;
            transform: none !important;
        }
    }
}