/* totop — кнопка «наверх».

   Под доком, у нижнего края экрана: та же ширина, краски окна,
   радиус и тень, что у дока, — со стороны это выглядит верхней
   крышкой того же семейства плашек. Стрелка по центру, как иконка
   в доке.

   Тень — та же единственная тень сайта (см. .dock в main.css):
   вторая своя у кнопки завела бы на странице вторую. */

.totop {
    /* Краски окна, записанные здесь по местным меркам: переменная
       вычисляется там, где объявлена, — см. «Кольцо» в themes.css. */
    --fill: var(--color-panel);
    --ring-color: var(--color-border);

    position: fixed;
    right: var(--dock-gap);
    bottom: var(--dock-gap);
    /* Под доком, затемнением и занавесом: когда окно открыто,
       страница приглушена целиком — и кнопка вместе с ней. Слои
       страницы: затемнение 90, занавес 95, док 100 (см. main.css). */
    z-index: 80;
    display: block;
    width: var(--dock-width);
    height: var(--dock-width);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--dock-radius);
    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    box-shadow: var(--shadow-window);
    cursor: pointer;
    transition: opacity 0.2s ease, border-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Вверху страницы возвращать нечего: кнопка спрятана, пока хоть одна
   прокрутка не уедет от начала (состояние ведёт totop.js). */
.totop.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Наведение: обводка льётся акцентом целиком — та же ступень, что
   у зоны загрузки на наведении и у дока в покое, только здесь она
   приходит со стороны покоя, поэтому наведение читается откликом. */
.totop:hover {
    --ring-color: var(--color-accent);
}

.totop:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Стрелка — значок-маска: краску держит здесь, форму — файл. */
.totop__icon {
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
    background-color: var(--color-ink);
    -webkit-mask: url("/svg/chevron-up.svg") center / contain no-repeat;
    mask: url("/svg/chevron-up.svg") center / contain no-repeat;
}

/* Нажатие: страница уезжает наверх — кнопке достаточно ответить
   самой обводкой, дополнительного хода ей не нужно. */
.totop:active .totop__icon {
    background-color: var(--color-accent);
}