/* =====================================================================
   THEME-012H1A — Accessibility Center Enterprise
   ===================================================================== */

:root {
    --ms-accessibility-ui-scale: 1;
    --ms-accessibility-text-scale: 1;
}

html {
    font-size: calc(
        16px *
        var(--ms-accessibility-text-scale)
    );
}

html[data-ms-grayscale="true"] {
    filter: grayscale(1);
}

html[data-ms-dyslexia-friendly="true"] body {
    letter-spacing: .035em;
    word-spacing: .09em;
    line-height: 1.65;
}

html[data-ms-dyslexia-friendly="true"] :is(
    p,
    label,
    input,
    textarea,
    select,
    button,
    a,
    span
) {
    font-family:
        Arial,
        Verdana,
        sans-serif !important;
}

html[data-ms-underline-links="true"] a {
    text-decoration: underline !important;
    text-underline-offset: .18em;
}

html[data-ms-focus-visibility="true"] :focus-visible {
    outline:
        3px solid
        var(--ms-c-primary, #2d8cff) !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 2px
        var(--ms-bg-page, #071727) !important;
}

html[data-ms-large-targets="true"] :is(
    button,
    [role="button"],
    input,
    select,
    textarea,
    a.nav-item,
    a.nav-subitem
) {
    min-height: 44px !important;
}

html[data-ms-reduced-motion="true"] *,
html[data-ms-reduced-motion="true"] *::before,
html[data-ms-reduced-motion="true"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

html[data-ms-high-contrast="true"] {
    --ms-border-default: rgba(255, 255, 255, .58);
    --ms-divider: rgba(255, 255, 255, .38);
    --ms-auto-muted: #d6e2f1;
}

html[data-ms-high-contrast="true"] :is(
    button,
    input,
    textarea,
    select,
    .workspace-card,
    .widget,
    .panel,
    .card
) {
    border-width: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid CanvasText !important;
    }
}

.ms-accessibility-center {
    display: grid;
    gap: 16px;
    transform-origin: top left;
}

.ms-accessibility-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-accessibility-header h2 {
    margin: 4px 0 5px;
}

.ms-accessibility-header p {
    max-width: 760px;
    margin: 0;
    color: var(--ms-text-secondary, #b9c7da);
}

.ms-accessibility-header button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-component-button-radius, 9px);
    background: var(--ms-bg-control, #0b2035);
    color: var(--ms-text-primary, #f5f8ff);
    cursor: pointer;
}

.ms-accessibility-layout {
    display: grid;
    grid-template-columns:
        minmax(370px, 460px)
        minmax(480px, 1fr);
    gap: 14px;
    align-items: start;
}

.ms-accessibility-controls {
    display: grid;
    gap: 14px;
}

.ms-accessibility-controls > section,
.ms-accessibility-preview {
    padding: 16px;
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: var(--ms-layout-card-radius, 14px);
    background: var(--ms-bg-panel, #10263d);
}

.ms-accessibility-controls h3,
.ms-accessibility-preview h3 {
    margin: 4px 0 5px;
}

.ms-accessibility-toggle,
.ms-accessibility-range {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 12px;
    align-items: center;
    margin-top: 13px;
    padding: 11px;
    border: 1px solid var(
        --ms-divider,
        rgba(137, 166, 202, .15)
    );
    border-radius: 10px;
    background: var(--ms-bg-control, #0b2035);
}

.ms-accessibility-toggle > div,
.ms-accessibility-range > div:first-child {
    display: grid;
    gap: 3px;
}

.ms-accessibility-toggle span,
.ms-accessibility-range span {
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 10px;
    line-height: 1.4;
}

.ms-accessibility-toggle {
    grid-template-columns:
        minmax(0, 1fr)
        44px;
    cursor: pointer;
}

.ms-accessibility-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ms-accessibility-toggle i {
    position: relative;
    width: 42px;
    height: 23px;
    border-radius: 999px;
    background: rgba(137, 166, 202, .28);
}

.ms-accessibility-toggle i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}

.ms-accessibility-toggle input:checked + i {
    background: var(--ms-c-primary, #2d8cff);
}

.ms-accessibility-toggle input:checked + i::after {
    transform: translateX(19px);
}

.ms-accessibility-range {
    grid-template-columns: 1fr;
}

.ms-accessibility-range-control {
    display: grid;
    grid-template-columns: 1fr 50px;
    gap: 10px;
    align-items: center;
}

.ms-accessibility-range-control input {
    width: 100%;
}

.ms-accessibility-range-control output {
    color: var(--ms-c-primary, #2d8cff);
    font-weight: 800;
    text-align: right;
}

.ms-accessibility-preview {
    position: sticky;
    top: 82px;
}

.ms-accessibility-score {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 18px;
    border-radius: 12px;
}

.ms-accessibility-score.is-pass {
    border: 1px solid rgba(38, 201, 126, .38);
    background: rgba(38, 201, 126, .11);
}

.ms-accessibility-score.is-warning {
    border: 1px solid rgba(255, 177, 64, .38);
    background: rgba(255, 177, 64, .11);
}

.ms-accessibility-score strong {
    font-size: 28px;
}

.ms-accessibility-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 10px;
}

.ms-accessibility-checks > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(
        --ms-divider,
        rgba(137, 166, 202, .15)
    );
    border-radius: 10px;
    background: var(--ms-bg-control, #0b2035);
}

.ms-accessibility-checks span {
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 10px;
}

.ms-accessibility-demo {
    display: grid;
    gap: 12px;
    margin-top: 13px;
    padding: calc(
        17px *
        var(--ms-accessibility-ui-scale)
    );
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: 12px;
    background: var(--ms-bg-control, #0b2035);
}

.ms-accessibility-demo h4,
.ms-accessibility-demo p {
    margin: 0;
}

.ms-accessibility-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ms-accessibility-demo button,
.ms-accessibility-demo input {
    min-height: calc(
        38px *
        var(--ms-accessibility-ui-scale)
    );
    padding: 7px 11px;
    border: 1px solid var(
        --ms-border-default,
        rgba(137, 166, 202, .22)
    );
    border-radius: 9px;
    background: var(--ms-bg-panel, #10263d);
    color: var(--ms-text-primary, #f5f8ff);
}

.ms-accessibility-demo label {
    display: grid;
    gap: 6px;
}

.ms-accessibility-note {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(45, 140, 255, .25);
    border-radius: 9px;
    background: rgba(45, 140, 255, .08);
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 1050px) {
    .ms-accessibility-layout {
        grid-template-columns: 1fr;
    }

    .ms-accessibility-preview {
        position: static;
    }
}

@media (max-width: 700px) {
    .ms-accessibility-header {
        flex-direction: column;
    }

    .ms-accessibility-checks {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   THEME-012H2B1 — Accessibility Reactivation Phase One
   ===================================================================== */

.ms-accessibility-toggle.is-phase-disabled,
.ms-accessibility-range.is-phase-disabled {
    opacity: .46;
    filter: saturate(.45);
}

.ms-accessibility-toggle.is-phase-disabled {
    cursor: not-allowed;
}

.ms-accessibility-toggle.is-phase-disabled::after,
.ms-accessibility-range.is-phase-disabled::after {
    content: "Disponibile nella fase successiva";
    grid-column: 1 / -1;
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 9px;
    font-weight: 700;
}

.ms-accessibility-toggle
input:disabled + i {
    cursor: not-allowed;
}

.ms-accessibility-center[
    data-ms-accessibility-mode="phase-one"
]::before {
    content:
        "Fase 1 attiva: scala interfaccia, scala testo, scala di grigi e ripristino.";
    display: block;
    padding: 10px 12px;
    border: 1px solid rgba(45, 140, 255, .28);
    border-radius: 9px;
    background: rgba(45, 140, 255, .08);
    color: var(--ms-text-secondary, #b9c7da);
    font-size: 10px;
}