/* Public accessibility toolbar (templates/element/accessibility_widget.php, webroot/js/accessibility.js). */

.a11y-widget {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1000;
}

.a11y-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 6px var(--space-4) 6px 6px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-lift);
    transition: background-color 180ms ease, transform 180ms var(--ease-out);
}

.a11y-trigger:hover { background: var(--color-primary-dark); }
.a11y-trigger:active { transform: translateY(1px); }

.a11y-trigger__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: var(--text-sm);
    font-weight: 700;
}

.a11y-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-3));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(360px, calc(100vw - var(--space-6)));
    max-height: min(620px, calc(100vh - 120px));
    padding: var(--space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: var(--border-width) solid var(--color-border);
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: var(--shadow-lift);
    transform-origin: bottom right;
    animation: a11y-panel-in 220ms var(--ease-out);
}

@keyframes a11y-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.a11y-panel[hidden] { display: none; }

/* The drag handle belongs to the phone sheet only; on a desktop popover there
   is nothing to resize. */
.a11y-panel__grab { display: none; }

.a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.a11y-panel__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

.a11y-panel__close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease;
}

.a11y-panel__close:hover {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.a11y-card {
    padding: var(--space-4);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-card);
    background: var(--color-soft);
    transition: border-color 180ms ease;
}

.a11y-card:focus-within { border-color: var(--color-primary-tint); }

.a11y-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.a11y-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.a11y-card__row .a11y-card__title { margin-bottom: 0; }

.a11y-card__title svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-primary-dark);
}

.a11y-card__title h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
}

.site-body .a11y-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-mid);
}

.a11y-slider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.a11y-slider__edge {
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-mid);
}

.a11y-slider__edge--sm { font-size: 0.85rem; }
.a11y-slider__edge--lg { font-size: 1.5rem; }

.a11y-slider__track {
    position: relative;
    flex: 1;
}

.a11y-slider__input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--color-primary) 0%,
        var(--color-primary) var(--fill, 29%),
        color-mix(in srgb, var(--color-text) 14%, transparent) var(--fill, 29%),
        color-mix(in srgb, var(--color-text) 14%, transparent) 100%
    );
    cursor: pointer;
}

.a11y-slider__input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.a11y-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -10px;
    border: 3px solid var(--color-primary-dark);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.a11y-slider__input::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.a11y-slider__input::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--color-primary);
}

.a11y-slider__input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid var(--color-primary-dark);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.a11y-slider__ticks {
    position: absolute;
    top: calc(100% + 4px);
    right: 13px;
    left: 13px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.a11y-slider__ticks span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* In the flow, so the track moves down as the text grows; the shift keeps
   it over the thumb without running past either end of the track. */
.a11y-slider__value {
    position: relative;
    left: var(--fill, 29%);
    display: block;
    width: max-content;
    margin-bottom: 14px;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translateX(calc(var(--fill, 29%) * -1));
}

.a11y-card__stop {
    min-height: 44px;
    margin-top: var(--space-3);
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.a11y-card__stop:hover {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}

/* The real checkbox stays in place and focusable; only its look is replaced. */
.a11y-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 50px;
    height: 30px;
    cursor: pointer;
}

.a11y-switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.a11y-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
    transition: background-color 180ms ease;
}

.a11y-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: transform 220ms var(--ease-out);
}

.a11y-switch input:checked ~ .a11y-switch__track { background: var(--color-primary); }
.a11y-switch input:checked ~ .a11y-switch__track .a11y-switch__thumb { transform: translateX(20px); }
.a11y-switch input:focus-visible ~ .a11y-switch__track { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; }

.a11y-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.a11y-segmented__option {
    position: relative;
    cursor: pointer;
}

.a11y-segmented__option:first-child { grid-column: 1 / -1; }

.a11y-segmented__option input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.a11y-segmented__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    font-size: var(--text-sm);
    color: var(--color-text-mid);
    text-align: center;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.a11y-segmented__option:hover span { border-color: var(--color-primary); }

.a11y-segmented__option input:checked ~ span {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.a11y-segmented__option input:focus-visible ~ span { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; }

.a11y-reset {
    align-self: center;
    min-height: 44px;
    padding: 0 var(--space-5);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-text-mid);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.a11y-reset:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
}

.a11y-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

html.a11y-vision-protanopia { filter: url(#a11y-filter-protanopia); }
html.a11y-vision-deuteranopia { filter: url(#a11y-filter-deuteranopia); }
html.a11y-vision-tritanopia { filter: url(#a11y-filter-tritanopia); }
html.a11y-vision-grayscale { filter: grayscale(1); }

html.a11y-reading-active { cursor: help; }
html.a11y-reading-active ::selection { background: var(--color-primary-tint); }

/* .a11y-armed: a link read aloud and waiting for the second click. */
.a11y-reading-now,
.a11y-armed {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
    border-radius: 2px;
}

.a11y-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--color-white);
    font-size: var(--text-sm);
    color: var(--color-primary-dark);
}

.a11y-status[hidden] { display: none; }

.a11y-caption {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-3));
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: min(300px, calc(100vw - var(--space-6)));
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-lift);
    font-size: var(--text-sm);
}

.a11y-caption[hidden] { display: none; }

.a11y-caption__icon { display: flex; flex-shrink: 0; }

.a11y-caption__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .a11y-widget {
        right: var(--space-4);
        bottom: var(--space-4);
    }

    .a11y-trigger { padding: 6px; }
    .a11y-trigger span:last-child { display: none; }

    /* A bottom sheet on phones rather than a popup beside the button. It stops
       well short of the top so the page keeps showing what each setting does
       while it is being changed, which is why there is no dimming scrim. */
    .a11y-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        gap: var(--space-2);
        width: auto;
        /* accessibility.js drives the height between detents while dragging. */
        height: var(--a11y-sheet-h, 56dvh);
        max-height: 92dvh;
        padding: 0 var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
        border-width: var(--border-width) 0 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 28px rgba(20, 38, 28, 0.16);
        transform: translateY(var(--a11y-sheet-y, 0));
        transform-origin: bottom center;
        animation: a11y-sheet-in 280ms var(--ease-out);
    }

    /* Sticky so the handle stays put while the settings scroll under it. */
    .a11y-panel__grab {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        height: 28px;
        margin: 0 calc(var(--space-4) * -1);
        padding: 0;
        border: 0;
        background: var(--color-white);
        cursor: grab;
        touch-action: none;
    }

    .a11y-panel__grab span {
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--color-text) 20%, transparent);
        transition: background-color 150ms ease;
    }

    .a11y-panel__grab:active { cursor: grabbing; }
    .a11y-panel__grab:active span { background: color-mix(in srgb, var(--color-text) 36%, transparent); }
    .a11y-panel__grab:focus-visible span { background: var(--color-primary-dark); }

    @keyframes a11y-sheet-in {
        from { transform: translateY(100%); }
    }

    .a11y-card { padding: var(--space-3) var(--space-4); }
    .a11y-slider { margin-top: var(--space-3); }
    .a11y-segmented { gap: var(--space-1); margin-top: var(--space-2); }
    .a11y-reset { margin-top: var(--space-1); }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
    .a11y-panel { animation: none; }
}