/* === Уведомление об использовании cookie === */
/* Подключается на публичных страницах: /logon/ и /privacy/. Внутри приложения
   не показывается — сотрудник видел бы её каждый рабочий день, а сообщить
   что-то новое ей нечего: cookie ставятся ровно на входе. */

/* Полоса снизу, а не оверлей во весь экран. Оверлей на странице входа
   перекрыл бы форму, то есть сделал бы первым действием пользователя закрытие
   плашки — и превратил информирование в помеху. Полоса не блокирует ничего:
   войти можно, не трогая её. */
/* Фон — та же полупрозрачная светлая полоса, что у подвала страницы входа
   (#footer.logon-footer), и без тени: плашка выглядит частью страницы, а не
   карточкой поверх неё (владелец, 01.10.2026). Линия снизу отделяет её от
   подвала, над которым она стоит на входе. Текст на полосе — полной
   плотности: на худшей подложке (фото не загрузилось, под полосой #08192d)
   #3c3c43 даёт 5.9:1. */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;          /* ниже модалок bootstrap (1050), выше подвала */
    padding: 14px 18px;
    background: rgba(245, 245, 245, .72);
    border-bottom: 1px solid rgba(60, 60, 67, .18);
}

/* Явно, а не на честном слове UA-стилей: своего display у .cookie-notice нет,
   но одна будущая правка с `display: flex` на этом же селекторе перебила бы
   [hidden], и скрытая плашка стала бы видимой у всех разом. */
.cookie-notice[hidden] {
    display: none;
}

.cookie-notice__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* --usp-text (#3c3c43), 11.6:1 на белом. Не приглушённый: это не подпись под
   картинкой, а текст, который нужно прочитать. Правило дизайн-системы —
   иерархию держат кегль и вес, а не выцветание. */
.cookie-notice__text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    color: #3c3c43;
}

.cookie-notice__cookies {
    color: #5c5c68;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.cookie-notice__line {
    display: block;
}

/* Ссылка — графит с бирюзовым подчёркиванием. Классический синий с
   подчёркиванием владелец забраковал («как из 2000 года»). Бирюза — не новый
   цвет, а акцент самой страницы входа: кнопка «Войти» (#14b8a6 → #0d9488).

   Подчёркивание видно всегда — в тексте ссылку нельзя отличать одним цветом
   (WCAG 1.4.1), — но тонкое, 1px, и отодвинуто от букв, как у GOV.UK («Making
   links easier to see and read», 2021): слово читается целиком. При наведении
   линия утолщается.

   Бирюзовой — только линия, не текст: на худшей подложке полосы (фото не
   загрузилось) бирюзовый текст #0f766e даёт 2.7:1, графит #2b2d33 — 7.4:1. */
.cookie-notice__link {
    color: #2b2d33;
    text-decoration: underline;
    text-decoration-color: #0d9488;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color .15s ease, text-decoration-thickness .15s ease;
}

.cookie-notice__link:hover {
    color: #16181d;
    text-decoration-thickness: 2px;
}

/* Кольцо фокуса — только при переходе с клавиатуры: клик мышью рамку не
   рисует. Сброс через :not(:focus-visible), а не голым :focus — в браузере
   без :focus-visible кольцо тогда остаётся, а не пропадает совсем. Цвет —
   бирюза кнопки, как у полей формы входа: 3.5:1 к полосе на белом. */
.cookie-notice__link:focus:not(:focus-visible) {
    outline: none;
}

.cookie-notice__link:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Метрика кнопки — общая по дизайн-системе: высота 34px, радиус 9px,
   заливка графитом #2b2d33 как у главного действия. */
.cookie-notice__accept {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 20px;
    border: 1px solid #2b2d33;
    border-radius: 9px;
    background: #2b2d33;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.cookie-notice__accept:hover {
    background: #3c3f47;
    border-color: #3c3f47;
}

/* Видимый фокус обязателен: плашка закрывается с клавиатуры, и без кольца
   человек, идущий табом, не поймёт, где он находится (AUD-UX, волна
   доступности 08.09). Бирюзой, как у ссылки рядом (01.10.2026). */
.cookie-notice__accept:focus {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

/* Узкий экран: кнопка уходит под текст и растягивается — 34px в высоту при
   полной ширине остаётся комфортной целью для пальца. */
/* Узкий экран: кнопка уходит под текст и растягивается, а сама плашка
   уплотняется. Высота здесь не косметика — плашка стоит над формой входа, и
   на 375x667 каждая лишняя строка съедает место у поля ошибки. */
@media (max-width: 640px) {
    .cookie-notice {
        padding: 10px 14px;
    }

    .cookie-notice__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cookie-notice__text {
        font-size: 12px;
        line-height: 1.45;
    }

    .cookie-notice__accept {
        width: 100%;
    }
}