/*!
 * special.min.css — стили панели доступности.
 *
 * Обновлённый интерфейс (2026): крупные тач-цели, гибкая раскладка на flex+gap,
 * скруглённые кнопки, плавные микровзаимодействия и аккуратный фокус. Индикаторы
 * наведения/выбора строятся на currentColor и color-mix, поэтому одинаково
 * читаются на всех цветовых схемах — и на светлых, и на тёмных.
 *
 * Функциональные цветовые схемы, размеры шрифта, интервалы и все классы-хуки,
 * на которые опирается accessibility.js, сохранены без изменений.
 */

html{font-size:100%}

/* Отступ под фиксированную панель сверху. Значение — запасное (до запуска JS);
   точную высоту панели скрипт проставляет инлайном через ResizeObserver,
   поэтому перенос кнопок на узких экранах и раскрытые настройки не перекрывают
   контент. */
.special body{
    margin-top:66px;
    min-width:300px;
}

#special a{
    font-size:1rem !important;
    text-decoration:none !important;
}

.avtor{
    width:100%;
    text-align:center;
    margin-top:15px;
    padding-top:10px;
    border-top:1px solid rgba(128,128,128,0.2);
}

.avtor a{
    font-size:13px !important;
    color:inherit !important;
    opacity:0.8;
}

/* Иконки — inline SVG, наследуют цвет текста кнопки */
#special .special-icon{
    width:20px;
    height:20px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

/* Кнопка озвучивания в состоянии «ожидает клика пользователя» */
#special button.pending{
    opacity:0.55;
}

/* Служебная область для скринридеров (aria-live) */
.special-sr-only{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

marquee{display:none !important}

/* --- Основная панель --------------------------------------------------- */
#special{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    box-sizing:border-box;
    z-index:999999;
    padding:9px 18px;
    text-align:center;
    line-height:1em !important;
    cursor:default;
    border-bottom:1px solid rgba(128,128,128,0.16);
    box-shadow:0 6px 22px rgba(0,0,0,0.10),0 1px 2px rgba(0,0,0,0.06);
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* Сброс: убираем схлопывание пробелов между инлайновыми узлами
   и включаем предсказуемый box-sizing для всей панели. */
#special *{
    font-size:0 !important;
    box-sizing:border-box;
}

/* Раскладка панели: гибкий ряд групп по центру */
#special .special-panel{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px 18px;
}

/* Группа: подпись + кнопки в одну строку */
#special .special-panel div{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    vertical-align:middle;
}

/* Подписи групп */
#special span,
#special em{
    font-size:14px !important;
    font-weight:600;
    letter-spacing:0.01em;
    opacity:0.72;
    vertical-align:middle;
    margin-right:2px;
}

#special em{
    font-style:italic;
}

/* Текстовая метка внутри кнопки (буквы A / Ц, названия шрифтов и т. п.) */
#special i{
    font-style:normal;
    font-weight:700;
    line-height:1 !important;
    color:inherit !important;
    background:inherit !important;
    font-size:inherit !important;
}

/* --- Кнопки ------------------------------------------------------------ */
#special button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:0;
    min-width:38px;
    height:38px;
    padding:0 13px;
    font-size:16px !important;
    color:inherit;
    background:inherit;
    border:1.5px solid;
    border-color:inherit;
    border-radius:11px;
    cursor:pointer;
    outline:0;
    text-decoration:none;
    text-transform:none;
    vertical-align:middle;
    -webkit-appearance:none;
    appearance:none;
    transition:box-shadow 0.16s ease,transform 0.16s ease,background-color 0.16s ease,opacity 0.16s ease;
}

#special .special-panel button{
    height:38px;
    min-width:38px;
    padding:0 13px;
}

/* Иконочные кнопки панели — круглые (изображения, звук, настройки, выход) */
#special .special-panel button[data-action]{
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    border-radius:50%;
}

/* Наведение: мягкое кольцо цветом текста + едва заметный подъём */
#special button:hover{
    box-shadow:inset 0 0 0 2px color-mix(in srgb,currentColor 42%,transparent);
    transform:translateY(-1px);
}

#special button:active{
    transform:translateY(0);
}

/* Выбранная настройка: чёткое кольцо и лёгкая заливка цветом текста.
   Цветовые «превью»-кнопки схем сохраняют собственный фон (их правила
   специфичнее), а заливка проявляется на обычных кнопках. */
#special .active{
    box-shadow:inset 0 0 0 2.5px currentColor;
}

#special button.active{
    background:color-mix(in srgb,currentColor 13%,transparent) !important;
}

/* Видимый фокус для навигации с клавиатуры */
#special button:focus-visible{
    outline:3px solid color-mix(in srgb,currentColor 60%,transparent) !important;
    outline-offset:2px;
}

/* --- Раскрывающийся блок настроек -------------------------------------- */
#special-settings-body{
    display:none;
    max-width:920px;
    margin:12px auto 2px;
    padding:18px 22px 20px;
    text-align:left;
    border-top:1px solid rgba(128,128,128,0.14);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(128,128,128,0.4) transparent;
    animation:special-reveal 0.26s ease;
}

@keyframes special-reveal{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:none}
}

#special-settings-body>div{
    margin:14px 0 2px;
}

#special-settings-body>div:last-child{
    border-bottom:none;
}

#special-settings-body h2{
    font-size:18px !important;
    font-weight:700;
    margin:20px 0 10px !important;
    padding-bottom:8px;
    border-bottom:1px solid rgba(128,128,128,0.2);
    color:inherit !important;
}

#special-settings-body h2:first-child{
    margin-top:4px !important;
}

/* Группы настроек: подпись на своей строке, кнопки — гибкой сеткой под ней */
#special-settings-body .special-font-family,
#special-settings-body .special-letter-spacing,
#special-settings-body .special-line-height,
#special-settings-body .special-color{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

#special-settings-body .special-font-family>span,
#special-settings-body .special-letter-spacing>span,
#special-settings-body .special-line-height>span{
    flex-basis:100%;
    margin:0 0 4px;
}

#special-settings-body button{
    height:auto;
    min-height:40px;
    min-width:0;
    margin:0;
    padding:10px 16px;
    font-size:14px !important;
    font-weight:600;
    border-radius:12px;
}

#special-settings-body button i{
    line-height:1.25 !important;
    font-size:14px !important;
    font-weight:600;
}

/* Кнопки-действия внизу блока настроек */
.special-reset,
.special-settings-close{
    display:inline-flex;
    margin-top:16px;
}

.special-settings-close{
    float:right;
}

/* --- Функциональные настройки отображения (применяются к контенту) ----- */

/* Межстрочный интервал */
.special-line-height-1 *,
#special .special-line-height button[value='1']{
    line-height:normal !important;
}

.special-line-height-2 *,
#special .special-line-height button[value='2']{
    line-height:1.5rem !important;
}

.special-line-height-3 *,
#special .special-line-height button[value='3']{
    line-height:1.75rem !important;
}

/* Размер шрифта */
.special-font-size-1 *,
#special .special-font-size button[value='1']{
    font-size:1rem !important;
}

.special-font-size-2 *,
#special .special-font-size button[value='2']{
    font-size:1.25rem !important;
}

.special-font-size-3 *,
#special .special-font-size button[value='3']{
    font-size:1.5rem !important;
}

/* Семейство шрифта */
.special-font-family-1 *,
#special .special-font-family button[value='1']{
    font-family:Arial,sans-serif !important;
}

.special-font-family-2 *,
#special .special-font-family button[value='2']{
    font-family:Times,serif !important;
}

/* Цветовые схемы */
.special-color-1 *,
#special .special-color button[value='1']{
    color:#000 !important;
    background:#FFF !important;
    border-color:#000 !important;
}

.special-color-1 #special{
    background:#FFF;
}

.special-color-2 *,
#special .special-color button[value='2']{
    color:#FFF !important;
    background:#000 !important;
    border-color:#FFF !important;
}

.special-color-2 #special{
    background:#000;
}

.special-color-3 *,
#special .special-color button[value='3']{
    color:#063462 !important;
    background:#e6f3ff !important;
    border-color:#063462 !important;
}

.special-color-3 #special{
    background:#e6f3ff;
}

.special-color-4 *,
#special .special-color button[value='4']{
    color:#59422e !important;
    background:#fffcf0 !important;
    border-color:#59422e !important;
}

.special-color-4 #special{
    background:#fffcf0;
}

.special-color-5 *,
#special .special-color button[value='5']{
    color:#a9dd38 !important;
    background:#2a1d10 !important;
    border-color:#a9dd38 !important;
}

.special-color-5 #special{
    background:#2a1d10;
}

/* Межбуквенный интервал (кернинг) */
.special-letter-spacing-1 *,
#special .special-letter-spacing button[value='1']{
    letter-spacing:normal !important;
}

.special-letter-spacing-2 *,
#special .special-letter-spacing button[value='2']{
    letter-spacing:1.5px !important;
}

.special-letter-spacing-3 *,
#special .special-letter-spacing button[value='3']{
    letter-spacing:3px !important;
}

/* --- Адаптивность ------------------------------------------------------ */
@media(max-width:940px){
    #special .special-panel span{
        display:none;
    }

    #special .special-panel{
        gap:8px 12px;
    }

    #special-settings-body{
        padding:16px 16px 18px;
    }
}

@media(max-width:768px){
    #special-settings-body{
        max-height:48vh;
    }
}

@media(max-width:460px){
    #special{
        padding:8px 12px;
    }

    #special .special-panel{
        gap:6px 10px;
    }

    #special .special-panel button,
    #special .special-panel button[data-action]{
        height:36px;
        min-width:36px;
    }

    #special .special-panel button[data-action]{
        width:36px;
    }

    #special-settings-body{
        padding:14px 14px 16px;
        max-height:46vh;
    }

    #special-settings-body button{
        min-height:38px;
        padding:9px 13px;
        font-size:13px !important;
    }

    #special-settings-body h2{
        font-size:16px !important;
        margin:16px 0 8px !important;
    }
}

/* --- Скроллбар блока настроек (WebKit) --------------------------------- */
#special-settings-body::-webkit-scrollbar{
    width:8px;
}

#special-settings-body::-webkit-scrollbar-track{
    background:transparent;
}

#special-settings-body::-webkit-scrollbar-thumb{
    background:rgba(128,128,128,0.35);
    border-radius:8px;
}

#special-settings-body::-webkit-scrollbar-thumb:hover{
    background:rgba(128,128,128,0.5);
}

/* --- Уважение к настройке «уменьшить движение» ------------------------- */
@media(prefers-reduced-motion:reduce){
    #special button{
        transition:none;
    }

    #special button:hover{
        transform:none;
    }

    #special-settings-body{
        animation:none;
    }
}