/* ============================================================
   ОФОРМЛЕНИЕ ВСЕГО САЙТА

   Раньше эти правила лежали внутри <style> в index.html. Вынесены
   в отдельный файл, когда появились вторая и третья страницы -
   политика конфиденциальности и пользовательское соглашение.
   Держать переменные оформления в трёх копиях нельзя: копии
   со временем разъезжаются, и однажды акцентный синий на главной
   станет одним, а на политике - другим.

   Файл один на все страницы, включая правила, которые нужны только
   главной (зона загрузки, список истории). Разделять их на два файла
   не стали намеренно: правило, которому на странице нечего красить,
   ничего не делает и ничего не стоит, а разделение потребовало бы
   решать про каждое правило, куда оно относится, - работа с риском
   ошибиться и без выгоды.

   Адреса шрифтов внутри файла абсолютные (/static/fonts/...) -
   поэтому они работают одинаково, откуда бы этот файл ни подключали.

   Побочная выгода на будущее: пока CSS и JS лежали внутри страницы,
   в CSP на боевом сервере приходилось держать уступку 'unsafe-inline'
   (подробности - в README, раздел про заголовки безопасности).
   Вынос CSS - первый из двух шагов, которые позволят её убрать.
   ============================================================ */

/* ============================================================
   ШРИФТ INTER

   Файлы лежат у нас, в static/fonts/ - страница не обращается
   ни к какому чужому серверу. @font-face - это объявление
   "вот шрифт, вот где взять файл, вот для какого начертания".

   Файлов четыре: два набора символов (кириллица и латиница)
   на два начертания (обычное 400 и полужирное 600).

   unicode-range - список символов, которые есть в файле.
   Браузер смотрит на него и качает только то, что реально нужно
   для текста на странице: если на ней одна кириллица, латинский
   файл (он втрое тяжелее) вообще не загрузится.

   font-display: swap - пока шрифт грузится, текст показывается
   запасным шрифтом, а не остаётся невидимым. Читать можно сразу
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/inter-cyrillic-600-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ПЕРЕМЕННЫЕ ОФОРМЛЕНИЯ

   Переменная - это имя для значения. Записывается с двух дефисов
   (--text-size), используется через var(--text-size). Смысл:
   значение живёт в ОДНОМ месте. Чтобы поменять, например, цвет
   акцента на всей странице, правится одна строка здесь, а не
   двадцать по всему файлу.

   :root - это вся страница целиком. Переменные, объявленные
   здесь, видны в любом правиле ниже
   ============================================================ */

:root {
    /* --- Цвета --- */

    /* Основной текст. Не чистый чёрный (#000): он на белом фоне
       режет глаз, почти все интерфейсы берут тёмно-серый */
    --color-text: #111827;

    /* Второстепенный текст - подсказки, даты, пояснения. Тише
       основного, но ещё читаемый */
    --color-text-muted: #6B7280;

    /* Акцент - ссылки и всё, на что нужно нажать */
    --color-accent: #2563EB;

    /* Тот же акцент, но темнее - для кнопки под курсором.
       Потемнение при наведении показывает, что элемент живой
       и на него можно нажать */
    --color-accent-dark: #1D4ED8;

    /* Ещё темнее - для кнопки В МОМЕНТ НАЖАТИЯ. Три оттенка
       подряд нужны, чтобы состояния не путались между собой:
       обычное, под курсором, нажатое. Если нажатое сделать
       тем же цветом, что и наведённое, нажатие никак себя
       не покажет - а именно оно и подтверждает, что клик
       засчитан */
    --color-accent-darker: #1E40AF;

    /* Очень светлый оттенок акцента - подсветка зоны загрузки
       в момент, когда над ней держат файл, и фон второстепенных
       кнопок под курсором */
    --color-accent-soft: #EFF6FF;

    /* Верхняя точка градиента первого экрана. Ещё бледнее, чем
       подсветка: этот цвет лежит под текстом, и заметным ему
       быть нельзя */
    --color-hero-top: #F2F7FF;

    /* Линии: рамки, разделители между блоками */
    --color-border: #E5E7EB;

    /* Цвета состояний для статусов в истории. Зелёный и красный
       взяты той же насыщенности, что и акцентный синий, - иначе
       один цвет казался бы ярче других и перетягивал внимание */
    --color-success: #059669;   /* готово */
    --color-danger: #DC2626;    /* ошибка */

    /* Фон для чередующихся секций - чуть голубоватый белый.
       Им же залиты зона загрузки, текст расшифровки и карточка
       истории под курсором */
    --color-surface: #F6F8FB;

    /* --- Размеры текста --- */

    --font-size-logo: 22px;     /* название сервиса в шапке */
    --font-size-h1: 42px;       /* главный заголовок страницы */
    --font-size-h2: 30px;       /* заголовки разделов */
    --font-size-h3: 19px;       /* вопросы в "Частых вопросах" */
    --font-size-base: 17px;     /* основной текст */
    --font-size-small: 14px;    /* подсказки, даты, мелкие пояснения */

    /* Межстрочное расстояние основного текста. 1.6 - это "в 1.6
       раза больше размера самого текста". Без единиц измерения
       специально: тогда каждый элемент считает интервал от
       СВОЕГО размера, а не от размера body */
    --line-height-base: 1.6;

    /* Насыщенность полужирного начертания. 600 вместо
       стандартного 700: у Inter 600 выглядит аккуратнее,
       и ровно этот файл мы и скачали */
    --font-weight-bold: 600;

    /* --- Отступы --- */

    /* База отступов. Все остальные - кратны ей: 8, 16, 24, 32.
       Так расстояния на странице получаются согласованными,
       а не случайными числами вроде 15px и 13px */
    --space: 8px;

    /* Расстояние между крупными разделами страницы */
    --space-section: 96px;

    /* Боковые поля крупных блоков - первого экрана, истории,
       разделов лендинга и шапки. Вынесено в переменную, потому
       что значение должно быть одним и тем же у всех четырёх:
       именно оно ставит их содержимое на общую левую линию.
       Раньше в каждом правиле стояло своё calc(var(--space) * 4),
       и на телефоне пришлось бы менять их по одному */
    --space-block-x: calc(var(--space) * 4);

    /* --- Размер цели для пальца --- */

    /* Наименьшая сторона того, во что человек целится пальцем.
       44px - общепринятый минимум (столько же требует Apple
       в своих рекомендациях). Взялось не с потолка: это
       примерная ширина подушечки пальца взрослого человека
       на экране. Всё, что меньше, приходится нащупывать
       со второй попытки - особенно на ходу.
       Мышью можно попасть и в 17px, поэтому на большом экране
       это ограничение не применяется */
    --size-tap-target: 44px;

    /* --- Скругления углов --- */

    --radius-large: 12px;   /* крупные блоки: зона загрузки, панели */
    --radius-small: 8px;    /* мелкие: записи истории, кнопки */

    /* --- Ширины --- */

    /* Ширина страницы целиком. Здесь живут блоки, которым нужен
       простор: зона загрузки, карточки истории, "Как работает"
       в три колонки */
    --width-content: 1120px;

    /* Ширина для длинных текстов - заметно уже страницы.
       Зачем отдельно - объяснение у правила ниже */
    --width-text: 680px;
}

/* ============================================================
   ТЕ ЖЕ ПЕРЕМЕННЫЕ ДЛЯ УЗКОГО ЭКРАНА

   Значения, заданные выше, рассчитаны на большой экран. На
   телефоне те же числа означают совсем другое: 42px заголовок
   на экране в 390px занимал шесть строк и четверть экрана,
   а 32px поля с двух сторон съедали восьмую часть ширины.

   Переопределяем здесь, в одном месте, а не правим два десятка
   правил по всему файлу: правила ниже написаны через var(),
   поэтому подхватят новые значения сами.

   Откуда числа:

   --font-size-h1: 30px - не выдуманное число, а то, что уже
     есть в шкале: размер заголовка раздела на большом экране.
     Заголовок при этом складывается в три строки вместо шести.
   --font-size-h2: 24px - пришлось уменьшить следом. Иначе
     заголовок страницы и заголовки разделов стали бы одного
     размера, и разница между "главным" и "разделом" исчезла бы.
     24 = три шага сетки отступов (8px), в общий ритм попадает.
   --space-section: 48px - ровно половина прежнего. 96px пустоты
     на экране высотой 844px - это больше десятой части экрана
     между каждой парой разделов. 48px всё ещё заметно больше
     внутренних полей блока, поэтому разделы не слипаются.
   --space-block-x: 16px - тоже половина. Вместе с полями body
     (20px, их не трогаем - текст не должен упираться в самый
     край экрана) на поля уходит 72px вместо 104px, а тексту
     достаётся 318px вместо 271px. Это плюс 17% ширины строки

   700px - та же граница, что и у остальных правил для узкого
   экрана. Отдельную точку перелома заводить незачем: чем их
   больше, тем труднее держать в голове, что где меняется
   ============================================================ */

@media (max-width: 700px) {
    :root {
        --font-size-h1: 30px;
        --font-size-h2: 24px;
        --space-section: 48px;
        --space-block-x: calc(var(--space) * 2);
    }
}

body {
    /* Сначала Inter. Дальше - запасные шрифты через запятую:
       браузер берёт первый доступный. Нужны на те секунды, пока
       Inter грузится, и на случай, если он не загрузится вовсе.
       -apple-system и Segoe UI - системные шрифты macOS/iOS
       и Windows, они есть всегда и похожи на Inter по духу */
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);

    max-width: var(--width-content);
    margin: 60px auto;
    padding: 0 20px;
}

/* Длинные тексты не растягиваем на всю ширину страницы.
   Причина не в красоте, а в чтении: дочитав строку до конца,
   глаз должен вернуться в начало следующей и не промахнуться.
   Чем длиннее строка, тем чаще промах - перечитываешь ту же
   строку заново или теряешь место. Поэтому у страницы две
   ширины: широкая для блоков (--width-content) и узкая
   для текста (--width-text) */
#upload-limits,
#history-warning {
    max-width: var(--width-text);
}

/* У блока вопросов ширину ограничиваем не самой панели, а тексту
   внутри неё: панель с заливкой на всю ширину смотрится как
   полноценный раздел, а вопросы и ответы внутри остаются
   узкими и читаемыми. То же самое у списка "Что внутри" -
   это тоже сплошной текст, и на всю ширину страницы строка
   получалась в 130 символов, вдвое длиннее читаемого */
#faq details,
#features ul {
    max-width: var(--width-text);
}

/* Список возможностей: вместо точек-маркеров - галочки.
   list-style: none убирает стандартные маркеры, display: flex
   ставит иконку и текст в строку, а align-items: flex-start
   прижимает иконку к ВЕРХУ пункта - иначе в пункте из трёх
   строк она уехала бы в середину */
#features li {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--space) * 1.5);
    margin-bottom: calc(var(--space) * 2);
}

#features ul {
    list-style: none;
    padding: 0;
}

/* Галочка - подтверждение, поэтому зелёная, как статус "готово".
   margin-top подгоняет её к первой строке текста: у иконки нет
   межстрочного расстояния, и без сдвига она стоит чуть выше */
#features .icon {
    color: var(--color-success);
    margin-top: 3px;
}

/* Заголовок первого экрана - тоже по узкой ширине. Здесь причина
   другая, не про усталость глаз: короткой строки в заголовке
   слишком мало, чтобы устать. Крупная фраза, растянутая в одну
   длинную строку, перестаёт читаться как заголовок и выглядит
   как обычный текст, набранный большим кеглем. Перенос на две
   строки возвращает ей вид заголовка */
#hero h1 {
    max-width: var(--width-text);
}

/* Подзаголовок первого экрана: отвечает на вопрос "что это",
   пока человек не начал разбираться сам. Крупнее основного
   текста, но тише заголовка - он поясняет заголовок,
   а не спорит с ним */
#hero-subtitle {
    max-width: var(--width-text);
    font-size: var(--font-size-h3);
    color: var(--color-text-muted);
    margin-top: calc(var(--space) * 2);
    margin-bottom: calc(var(--space) * 4);
}

/* На телефоне подзаголовок в 19px занимал пять строк. Опускаем
   его до размера обычного текста: он всё равно остаётся тише
   заголовка - за это отвечает серый цвет, а не размер.
   Меняем именно здесь, а не переменную --font-size-h3: на ней
   же держатся вопросы в FAQ, а их трогать не просили */
@media (max-width: 700px) {
    #hero-subtitle {
        font-size: var(--font-size-base);
    }
}

/* Заголовки: размеры из переменных и наша насыщенность вместо
   браузерной. Без этой строки браузер попросил бы вес 700,
   файла с ним у нас нет - и браузер "подделал" бы жирность,
   механически растолстив буквы. Выглядит грязно */
h1, h2, h3 {
    font-weight: var(--font-weight-bold);
}

h1 {
    font-size: var(--font-size-h1);

    /* Крупному заголовку тесный межстрочный интервал идёт лучше,
       чем 1.6 от основного текста: иначе строки разъезжаются */
    line-height: 1.2;
}

h2 {
    font-size: var(--font-size-h2);
    line-height: 1.25;
}

h3 {
    font-size: var(--font-size-h3);
}

strong {
    font-weight: var(--font-weight-bold);
}

/* Ссылки: акцентный цвет вместо синего по умолчанию.
   a:visited - правило для уже посещённых ссылок: браузер по
   умолчанию красит их в фиолетовый. Задаём тот же цвет, чтобы
   страница не пестрела двумя разновидностями ссылок */
a,
a:visited {
    color: var(--color-accent);
}

/* ============================================================
   ФОКУС С КЛАВИАТУРЫ

   Фокус - это "где я сейчас нахожусь" при управлении клавишей
   Tab, без мыши. Браузер рисует его сам, но по-своему в каждом
   браузере и не всегда заметно. Задаём одну обводку на все
   элементы, до которых можно добраться с клавиатуры, - чтобы
   она была одинаковой и там, и там, и там.

   :focus-visible, а не :focus - разница важная. :focus
   срабатывает и от клика мышью тоже, и тогда обводка повисает
   на только что нажатой кнопке, чего никто не ждёт.
   :focus-visible браузер включает только когда человек реально
   перемещается с клавиатуры.

   outline, а не border - обводка рисуется ПОВЕРХ, не занимая
   места, поэтому ничего вокруг не сдвигается. Она сама
   повторяет скругление углов элемента.
   outline-offset отодвигает её на 2px наружу, чтобы она
   не сливалась с рамкой самого элемента.

   Последняя строка списка - особый случай. Настоящее поле
   выбора файла спрятано (класс visually-hidden), а видно вместо
   него нашу кнопку-метку. Фокус при этом получает поле, а не
   кнопка, - поэтому обводку рисуем у СОСЕДНЕГО элемента:
   знак "+" значит "элемент, идущий сразу за указанным".
   Иначе человек, идущий по странице клавишей Tab, дошёл бы
   до выбора файла и не увидел, где он
   ============================================================ */

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible,
#file-input:focus-visible + #file-button {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ============================================================
   ПОЛЯ ВВОДА И КНОПКИ

   Важное про формы: поля выбора, кнопки и текстовые поля
   НЕ наследуют шрифт страницы - браузер рисует их системным
   шрифтом. Поэтому без font: inherit наш Inter применился бы
   везде, кроме этих элементов, и они выглядели бы чужими.
   Слово inherit значит "взять у родителя"
   ============================================================ */

select,
button {
    font: inherit;
}

select {
    padding: calc(var(--space) * 0.75) var(--space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #FFFFFF;
    color: var(--color-text);

    /* Курсор-рука: подсказывает, что элемент нажимается */
    cursor: pointer;

    /* Список сам по себе ширины не имеет - браузер делает его
       ровно таким, чтобы влез САМЫЙ ДЛИННЫЙ пункт, и сжиматься
       он не станет. На узком экране из-за этого выбор языка
       ("Авто (определить самостоятельно)") вылезал за скруглённый
       фон первого экрана, а выбор разбивки ("По предложениям
       (как есть)") - за рамку панели экспорта.
       max-width запрещает списку быть шире того блока, в котором
       он лежит: не влезает - браузер обрежет надпись, а не блок.

       box-sizing: border-box обязателен в паре с ним. По умолчанию
       ширина считается ТОЛЬКО по содержимому, а поля и рамка
       добавляются сверху - и "100% ширины родителя" на деле
       означало бы 100% плюс 18px, то есть список всё равно
       торчал бы наружу. border-box значит "считай ширину вместе
       с полями и рамкой".

       На широком экране ничего не меняется: там списки и так
       уже́ своих блоков, и ограничение не срабатывает */
    max-width: 100%;
    box-sizing: border-box;
}

/* На узком экране в список целятся пальцем, а не мышью: 36px
   высоты для этого мало. min-height задаёт нижнюю границу
   высоты - текст внутри браузер расположит по центру сам.
   Пишем min-height, а не height: если надпись когда-нибудь
   перенесётся на две строки, список станет выше, а не обрежет
   её. Поля при этом не трогаем - они отвечают за отступ текста
   от рамки, а не за размер цели */
@media (max-width: 700px) {
    select {
        min-height: var(--size-tap-target);
    }
}

/* Главные кнопки - те действия, ради которых человек пришёл:
   выбрать файл, скачать результат, вернуться к загрузке после
   того как прочитал, как всё устроено. Залиты акцентным цветом,
   поэтому заметны сразу. Правило одно на все: если менять их
   вид по отдельности, они со временем разъедутся */
#download-button,
#file-button,
#cta-button,
#cookie-notice-button {
    padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-accent);
    color: #FFFFFF;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

/* @media (hover: hover) - это медиазапрос не про размер экрана,
   а про устройство ввода: правила внутри действуют только там,
   где есть НАСТОЯЩЕЕ наведение, то есть мышь или трекпад.

   Зачем: у пальца нет состояния "навёл, но не нажал". Браузер
   телефона, чтобы не ломать сайты, написанные под мышь, применяет
   :hover при касании и снимает его только когда коснёшься другого
   места. Подсветка залипает - проверено на настоящем телефоне.
   Внутри этого запроса :hover на телефоне просто не существует,
   и залипать нечему. На ноутбуках с сенсорным экраном правила
   работают: мышь у них есть.

   Все остальные :hover в файле обёрнуты так же */
@media (hover: hover) {
    #download-button:hover,
    #file-button:hover,
    #cta-button:hover,
    #cookie-notice-button:hover {
        background: var(--color-accent-dark);
        border-color: var(--color-accent-dark);
    }
}

/* Момент нажатия. :active действует ровно пока кнопка прижата
   мышью - отпустил, и состояние снялось. Без него кнопка
   на нажатие никак не откликается: человек не понимает,
   засчитался клик или он промахнулся, и жмёт второй раз.
   На медленной связи это лишняя отправка файла */
#download-button:active,
#file-button:active,
#cta-button:active,
#cookie-notice-button:active {
    background: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
}

/* Кнопка "Загрузить файл" под разделом "Как работает".
   Это <a> с адресом "#hero" - обычная якорная ссылка, такая же,
   как в шапке: браузер сам прокручивает страницу к нужному
   блоку, JavaScript не нужен. Поэтому ей отдельно снимаем
   подчёркивание и белим текст - у ссылок свои умолчания */
#cta-button {
    display: inline-block;
    margin-top: calc(var(--space) * 4);
    text-decoration: none;
}

#cta-button,
#cta-button:visited {
    color: #FFFFFF;
}

/* Плавная прокрутка вместо мгновенного прыжка - для всех якорных
   ссылок сразу, и в шапке тоже. Так человек видит, КУДА его
   перенесло, и не теряет ориентацию на странице */
html {
    scroll-behavior: smooth;
}

/* Второстепенные кнопки - действия "заодно": вернуться к загрузке,
   показать ещё записи. Не залиты цветом, только контур: на экране
   должно быть видно, какое действие главное, а какое нет */
#new-upload-button,
#load-more-button {
    padding: var(--space) calc(var(--space) * 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #FFFFFF;
    color: var(--color-accent);
    cursor: pointer;
}

/* Под курсором: рамка становится акцентной И появляется бледная
   заливка. Раньше менялся только цвет рамки толщиной в один
   пиксель - изменение было на грани заметности, особенно
   на большом экране, где кнопка мелкая. Заливка меняет вид
   всей кнопки целиком, её видно боковым зрением */
@media (hover: hover) {
    #new-upload-button:hover,
    #load-more-button:hover {
        border-color: var(--color-accent);
        background: var(--color-accent-soft);
    }
}

/* Нажатие: рамка и текст темнеют. Заливку не меняем - она уже
   появилась при наведении, и менять её ещё раз незачем:
   достаточно, чтобы отклик на нажатие просто был заметен */
#new-upload-button:active,
#load-more-button:active {
    border-color: var(--color-accent-darker);
    color: var(--color-accent-darker);
    background: var(--color-accent-soft);
}

/* Галочки и полоса прогресса красятся accent-color - одна строка
   вместо длинной перерисовки этих элементов вручную */
input[type="checkbox"],
progress {
    accent-color: var(--color-accent);
}

#language-select {
    margin-bottom: var(--space);
}

/* Строчка с лимитами под зоной загрузки - вспомогательный текст,
   поэтому тише основного: те же серый и размер, что у
   предупреждения в истории */
#upload-limits {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

/* Зона загрузки. Пунктирная рамка - устоявшийся знак "сюда можно
   перетащить файл": сплошная читалась бы как обычная рамка блока.
   Светлая заливка отделяет её от белого фона страницы */
#drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-large);
    padding: calc(var(--space) * 6);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface);

    /* Нажимается вся зона целиком, не только кнопка внутри
       (обработчик - в скрипте ниже), поэтому и курсор над ней
       должен быть "рука". Без этой строки над текстом зоны
       показывался бы курсор выделения текста, и зона выглядела
       бы ненажимаемой */
    cursor: pointer;
}

/* На телефоне 48px полей со всех сторон - это почти треть ширины
   блока, отданная пустоте: зона получалась квадратом в пол-экрана,
   внутри которого иконка, две строки и кнопка. Уменьшаем вдвое.
   Заодно решается перенос надписи на кнопке "Выберите файл":
   ей просто становится хватать места на одну строку */
@media (max-width: 700px) {
    #drop-zone {
        padding: calc(var(--space) * 3);
    }
}

/* Под курсором рамка становится акцентной - видно, что зона живая.
   Про @media (hover: hover) - объяснение у главных кнопок выше */
@media (hover: hover) {
    #drop-zone:hover {
        border-color: var(--color-accent);
    }
}

/* Файл тащат над зоной. Отзыв сильнее, чем при наведении: рамка
   акцентная И фон подсвечен - в этот момент важно однозначно
   показать "отпускай здесь". Одним :hover это не решается:
   когда тащишь файл, курсор не считается "наведённым",
   и :hover не срабатывает - поэтому класс вешает JavaScript */
#drop-zone.is-dragover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* Прячем элемент от глаз, но оставляем доступным с клавиатуры
   и для программ чтения с экрана. display:none так не умеет -
   он убирает элемент отовсюду. Приём стандартный: элемент
   размером в один пиксель, обрезанный до нуля */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Кнопка выбора файла - вид берёт из общего правила главных
   кнопок выше, здесь только то, что нужно ей одной. Она <label>,
   а не <button>: у меток нет собственного блочного поведения,
   поэтому отступ сверху задаётся вместе с display: inline-block */
#file-button {
    display: inline-block;
    margin-top: calc(var(--space) * 2);
}

/* Иконка загрузки крупнее остальных - она здесь главный
   опознавательный знак блока, а не подпись к тексту.
   display: block ставит её отдельной строкой над надписью */
#drop-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto calc(var(--space) * 2);
    color: var(--color-accent);
}

/* Имя выбранного файла. Пока файл не выбран, здесь пусто -
   но место под строку держим заранее (min-height), иначе
   в момент выбора файла строка возникает из ниоткуда и всё,
   что ниже, прыгает вниз. Высота посчитана из тех же
   переменных, что и сам текст: размер шрифта, умноженный
   на межстрочное расстояние, - это и есть высота одной строки */
#file-name {
    margin-top: calc(var(--space) * 1.5);
    font-size: var(--font-size-small);
    color: var(--color-text);
    min-height: calc(var(--font-size-small) * var(--line-height-base));
}

#progress-bar {
    width: 100%;
    height: var(--space);
    margin-top: calc(var(--space) * 2);

    /* Полосе прогресса скругление задаётся отдельно - у неё
       собственная внутренняя отрисовка, поэтому одного
       border-radius на элементе браузеру мало */
    border: none;
    border-radius: var(--radius-small);
    overflow: hidden;
}

#status {
    margin-top: calc(var(--space) * 2);
    color: var(--color-text-muted);
}

#settings-panel {
    margin-top: calc(var(--space) * 3);
    padding: calc(var(--space) * 3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
}

#settings-panel label {
    display: block;
    margin-bottom: calc(var(--space) * 2);
}

/* Текст готовой транскрипции. Это <pre> - тег, который сохраняет
   переносы строк как есть, но браузер рисует его моноширинным
   шрифтом (как в редакторе кода). Возвращаем наш шрифт: читать
   длинный текст с таймкодами удобнее обычным */
#transcript-text {
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);

    margin-top: calc(var(--space) * 3);
    padding: calc(var(--space) * 3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    /* Высота ограничена, дальше блок прокручивается внутри себя -
       иначе часовая расшифровка растянула бы страницу на километр */
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;

    /* Текст в расшифровке - тоже длинный текст, и ему нужна
       та же ограниченная ширина строки */
    max-width: var(--width-text);
}

/* Отступ до истории меньше, чем между разделами лендинга
   (48px против 96px): история - продолжение рабочей части,
   а не самостоятельный раздел, и большой провал между зоной
   загрузки и ей выглядел как обрыв страницы */
#history-section {
    margin-top: calc(var(--space) * 6);
    border-top: 1px solid var(--color-border);
    padding-top: calc(var(--space) * 3);
}

/* Скрытый блок. Класс, а не встроенный стиль, - чтобы соседнее
   правило ниже могло на него посмотреть: выбирать элементы
   по классу CSS умеет, а по встроенному стилю нет */
.is-hidden {
    display: none;
}

/* Когда история скрыта, первым после первого экрана становится
   "Как работает" - и отступать он должен так же, как отступала
   бы история. Иначе расстояние в одном и том же месте страницы
   зависело бы от того, есть ли у человека записи: 48px
   у вернувшегося и 96px у нового.
   Знак "+" выбирает элемент, идущий сразу ЗА указанным */
#history-section.is-hidden + .page-section {
    margin-top: calc(var(--space) * 6);
}

#history-list {
    list-style: none;
    padding: 0;
}

/* Карточка записи. Рамка и скругление отделяют записи друг
   от друга - раньше они шли сплошной лентой */
#history-list li {
    padding: calc(var(--space) * 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    margin-bottom: calc(var(--space) * 1.5);
    cursor: pointer;

    /* Карточка стала двухчастной: слева сведения о записи,
       справа кнопка удаления. flex ставит их в строку,
       align-items: center выравнивает кнопку по середине
       высоты карточки, а не по её верхнему краю */
    display: flex;
    align-items: center;
    gap: calc(var(--space) * 2);
}

/* Только для мыши: на телефоне подсвеченная карточка залипала
   и читалась как "выбранная", хотя выбора здесь нет.
   Объяснение приёма - у главных кнопок выше */
@media (hover: hover) {
    #history-list li:hover {
        background: var(--color-surface);
        border-color: var(--color-accent);
    }
}

/* Левая часть карточки - всё, что было в ней раньше.
   flex: 1 - занять всё место, которое не заняла кнопка.
   min-width: 0 обязателен: по умолчанию содержимое flex-строки
   отказывается сжиматься уже своего содержимого, и очень длинное
   имя файла вытолкнуло бы кнопку удаления за край карточки */
#history-list .history-body {
    flex: 1;
    min-width: 0;
}

/* Кнопка удаления - только значок, без рамки и заливки.
   Это второстепенное действие, оно не должно спорить с самой
   записью: человек приходит в историю читать и скачивать,
   а не удалять. Поэтому и цвет серый, приглушённый */
#history-list .history-delete {
    padding: var(--space);
    border: none;
    background: none;
    color: var(--color-text-muted);
    border-radius: var(--radius-small);
    cursor: pointer;

    /* Внутри кнопки только картинка. line-height: 0 убирает
       высоту, которую браузер оставляет под строку текста -
       без неё кнопка выше значка и выглядит съехавшей вниз */
    line-height: 0;
}

/* Красным - только под курсором мыши. Постоянно красный значок
   в каждой карточке кричал бы об опасности там, где ещё ничего
   не происходит. (hover: hover) - тот же приём, что у карточек
   выше: на сенсорном экране подсветка залипает */
@media (hover: hover) {
    #history-list .history-delete:hover {
        color: var(--color-danger);
    }
}

/* Подтверждение - две кнопки в строку на месте значка.
   nowrap не даёт им разъехаться по разным строкам */
#history-list .history-confirm {
    display: flex;
    gap: var(--space);
    white-space: nowrap;
}

#history-list .history-confirm button {
    padding: calc(var(--space) * 0.5) var(--space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #FFFFFF;
    font-size: var(--font-size-small);
    cursor: pointer;
}

/* Из двух кнопок красная только та, что удаляет. "Отмена"
   остаётся обычной: подкрашивать безопасное действие незачем,
   а два цветных пятна рядом труднее различить с одного взгляда */
#history-list .history-confirm-yes {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

/* На узком экране в кнопки целятся пальцем. Значок корзины сам
   по себе 20px шириной - для пальца мало, поэтому задаём обеим
   сторонам минимальный размер цели.
   inline-flex + центрирование: содержимое остаётся посередине
   увеличенной кнопки, а не прижимается к левому верхнему углу */
@media (max-width: 700px) {
    #history-list .history-delete,
    #history-list .history-confirm button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--size-tap-target);
        min-width: var(--size-tap-target);
    }
}

/* Имя файла - первая строка карточки */
#history-list .history-filename {
    display: block;
    margin-bottom: calc(var(--space) * 0.5);
}

/* Дата. Раньше она была одного цвета с остальными подробностями
   и терялась. Теперь тёмная, как основной текст: имена файлов
   часто похожи ("запись.wav", "запись (1).wav"), и на деле
   записи различают именно по дате - значит, она и должна
   бросаться в глаза первой из подробностей */
#history-list .history-date {
    color: var(--color-text);
    font-size: var(--font-size-small);
}

/* Остальные подробности - тише */
#history-list .history-language {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

/* Статус - цветом. Три состояния различимы, не читая надпись:
   зелёное - можно забирать, красное - что-то пошло не так,
   серое - ещё в работе. Полужирный, чтобы цвет был заметен:
   тонкие цветные буквы читаются хуже */
#history-list .history-status {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);

    /* Значок и подпись держим одной связкой: white-space: nowrap
       не даёт им разъехаться по разным строкам, если карточка
       окажется узкой */
    white-space: nowrap;
}

/* Значок статуса чуть меньше основной иконки - он стоит
   рядом с мелким текстом (14px) и не должен его перевешивать */
#history-list .history-status .icon {
    width: 16px;
    height: 16px;
}

#history-list .history-status--done {
    color: var(--color-success);
}

#history-list .history-status--error {
    color: var(--color-danger);
}

#history-list .history-status--processing {
    color: var(--color-text-muted);
}

#history-warning {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    margin-bottom: calc(var(--space) * 3);
}

/* Шапка: название слева, ссылки справа, тонкая линия снизу.
   display: flex ставит содержимое в строку, а
   justify-content: space-between разводит его по краям -
   первый элемент к левому краю, последний к правому, всё
   свободное место между ними. Вручную отступы считать не нужно */
#site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Те же боковые поля, что у остальных блоков (см. правило
       про общую левую линию ниже). Без них название начиналось
       на 32px левее заголовка первого экрана.
       На линию под шапкой это не влияет: поля сдвигают
       содержимое внутри блока, а рамка рисуется по его краю -
       и остаётся во всю ширину страницы, как и задумано */
    padding-left: var(--space-block-x);
    padding-right: var(--space-block-x);

    padding-bottom: calc(var(--space) * 2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: calc(var(--space) * 6);
}

/* Логотип: знак слева, название справа. Крупнее основного текста
   и полужирный - это имя сервиса, оно должно читаться как знак,
   а не как строка текста. Размер вынесен в переменную рядом
   с остальными размерами, чтобы не появилось случайное число
   посреди правил.

   display: flex ставит знак и название в строку, а
   align-items: center выравнивает их по центру друг относительно
   друга - без этой строки они встали бы по нижней линии текста,
   и квадрат оказался бы выше названия.

   letter-spacing: -0.02em чуть поджимает буквы друг к другу.
   Отрицательное значение - буквы ближе, положительное - дальше.
   em значит "доля от размера шрифта", то есть при любом размере
   поджатие останется пропорциональным. Смысл: плотно набранное
   слово читается как единый знак, название, а не как обычный
   текст той же строки. Второй шрифт для этого не нужен */
#site-name {
    display: flex;
    align-items: center;
    gap: var(--space);

    font-size: var(--font-size-logo);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
}

/* Размер знака. flex-shrink: 0 запрещает ему сжиматься, если
   в шапке станет тесно: сжатый квадрат сразу читается как брак,
   а название рядом ужмётся само, оно текст.
   Класса .icon у этого знака намеренно нет: там задано
   fill: none и рисование линиями (stroke), а логотип наоборот
   залитый - под теми правилами он стал бы невидимым */
#site-logo-mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Цвета знака. Держим их здесь, а не в самой разметке, чтобы
   синий брался из общей переменной: поменяется акцент страницы -
   поменяется и логотип */
#site-logo-mark .logo-plate {
    fill: var(--color-accent);
}

#site-logo-mark .logo-letter {
    fill: #FFFFFF;
}

/* Ссылки в шапке идут в одну строку. Без отступа между ними
   браузер разделил бы их одним пробелом, и читались бы они
   как одно слитное предложение. gap - расстояние между
   соседними элементами внутри flex-контейнера */
#site-nav {
    display: flex;
    gap: calc(var(--space) * 3);
}

/* Ссылки в шапке - навигация, а не ссылки внутри текста и не
   действия. Поэтому они не синие: акцентный цвет на странице
   оставлен только кнопкам ("Выберите файл", "Скачать",
   "Загрузить файл"). Так взгляд сразу отделяет действие
   от перехода по странице, не читая надписей.
   Здесь цвет задан явно, потому что общее правило выше
   (a, a:visited) красит акцентным вообще все ссылки.
   Отдельная строка для :visited не нужна: у #site-nav a
   специфичность выше - id перевешивает.
   Подчёркивания в спокойном состоянии тоже нет: ссылки видно
   по месту. Оно появляется при наведении - вместе с потемнением
   это подтверждает, что элемент нажимаемый */
#site-nav a {
    text-decoration: none;
    color: var(--color-text-muted);
}

@media (hover: hover) {
    #site-nav a:hover {
        text-decoration: underline;
        color: var(--color-text);
    }
}

/* Узкий экран: логотип и три ссылки в одну строку не помещаются -
   ссылки вылезали за правый край, "Вопросы" уезжали за экран
   совсем, и это была единственная причина горизонтальной
   прокрутки на всей странице.
   flex-wrap: wrap разрешает содержимому переноситься: логотип
   остаётся на первой строке, ссылки целиком уходят на вторую.
   gap задаёт расстояние между этими строками - без него они
   слиплись бы.

   Почему не кнопка-меню: у нас три якоря на одной странице.
   Прятать три слова за кнопкой, которой нужны состояние
   "открыто/закрыто", закрытие по нажатию мимо и aria-expanded
   для программ чтения с экрана, - это сложность ради приличия.
   Перенос на вторую строку решает ту же задачу без единой
   строки JavaScript.

   Правило лежит рядом с самой шапкой, а не в общем блоке
   "для телефонов": так, глядя на шапку, сразу видно всё, что
   с ней происходит. Тот же приём уже применён у "Как работает" */
@media (max-width: 700px) {
    #site-header {
        flex-wrap: wrap;
        gap: calc(var(--space) * 1.5);
    }
}

/* Общий отступ и разделительная линия для информационных
   блоков лендинга ("Как работает", "Что внутри" и т.д.).
   Те же значения, что у #history-section выше - чтобы блоки
   не слипались друг с другом. Класс, а не id, потому что
   таких блоков будет несколько */
.page-section {
    margin-top: var(--space-section);
    padding: calc(var(--space) * 6) var(--space-block-x);
    border-radius: var(--radius-large);
}

/* Выравнивание блоков по общей левой линии.
   Панели разделов имеют поля по 32px, и их содержимое из-за
   этого начиналось на 32px правее, чем первый экран и история,
   у которых полей не было. На глаз это читается как "колонки
   уже секции, справа пусто" - хотя сама сетка занимает всю
   доступную ширину, я это измерил.
   Даём те же поля первому экрану и истории - теперь текст
   всех блоков начинается и заканчивается на одной линии.
   Шапка (#site-header) стоит на этой же линии, но поля ей
   заданы в её собственном правиле выше: там к ним идёт
   отдельное пояснение про рамку снизу */
#hero,
#history-section {
    padding-left: var(--space-block-x);
    padding-right: var(--space-block-x);
}

/* Мягкий фон первого экрана. linear-gradient - плавный переход
   между цветами; "to bottom" - сверху вниз. Верхний цвет очень
   бледный, нижний - чистый белый, поэтому граница блока не видна
   и текст ни с чем не спорит.
   Смысл не в украшении: первый экран так отделяется от остальной
   страницы, оставаясь при этом её частью */
#hero {
    background: linear-gradient(to bottom, var(--color-hero-top), #FFFFFF);
    padding-top: calc(var(--space) * 4);
    padding-bottom: calc(var(--space) * 5);
    border-radius: var(--radius-large);
}

/* Чередование фонов. Заливку получает каждый второй блок:
   "Как работает" - серый, "Что внутри" - белый, вопросы -
   снова серый. Так соседние разделы не сливаются в сплошную
   простыню, и видно, где кончается один и начинается другой,
   даже не читая заголовков. Это и заменило разделительные
   линии, которые тут были раньше */
#how-it-works,
#faq {
    background: var(--color-surface);
}

/* ============================================================
   ИКОНКИ

   Все иконки нарисованы прямо в разметке тегом <svg> - без
   внешних библиотек и файлов-картинок. Значит: ни одного лишнего
   запроса к серверу, ничего не может не загрузиться, и иконка
   красится как обычный текст.

   stroke: currentColor - ключевая строка. currentColor означает
   "тот цвет, которым сейчас нарисован текст". Поэтому одна и та
   же иконка получается зелёной рядом с зелёным словом и серой
   рядом с серым - отдельных правил на каждый случай не нужно.

   fill: none - внутренность не заливаем, рисуем только линии
   ============================================================ */

.icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    /* Скругляем концы и стыки линий - иначе на местах изломов
       получаются острые заусенцы */
    stroke-linecap: round;
    stroke-linejoin: round;

    /* Выравнивание по тексту: по умолчанию картинка стоит
       на базовой линии, как буква, и "проваливается" вниз */
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================================
   "КАК РАБОТАЕТ" - ТРИ КОЛОНКИ
   ============================================================ */

/* display: grid раскладывает содержимое по сетке.
   grid-template-columns: repeat(3, 1fr) - три колонки, каждая
   шириной 1fr, то есть по одной равной доле свободного места.
   gap - расстояние между колонками */
#how-it-works ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--space) * 4);

    /* Убираем стандартные цифры списка и его левый отступ:
       номера мы нарисуем сами, крупно (правило ниже) */
    list-style: none;
    padding: 0;
    margin: 0;

    /* counter-reset заводит счётчик с именем step и обнуляет его */
    counter-reset: step;
}

#how-it-works li {
    /* Увеличиваем счётчик на единицу для каждого пункта */
    counter-increment: step;
}

/* ::before рисует содержимое ПЕРЕД пунктом. counter(step) -
   текущее значение счётчика, то есть 1, 2, 3. Так номера
   шагов вернулись, но теперь ими можно управлять как обычным
   текстом: сделать крупными и акцентными */
#how-it-works li::before {
    content: counter(step);
    display: block;
    margin-bottom: var(--space);

    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    line-height: 1;
}

/* Узкий экран (телефон): три колонки рядом не помещаются -
   каждая была бы шириной в пару слов. @media - правило
   "применять только если условие верно". Здесь условие:
   ширина окна 700 пикселей или меньше */
@media (max-width: 700px) {
    #how-it-works ol {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ЧАСТЫЕ ВОПРОСЫ - СВОРАЧИВАЮЩИЕСЯ БЛОКИ
   ============================================================ */

/* <details> с <summary> внутри - встроенный в браузер
   сворачивающийся блок. Виден только заголовок, по клику
   раскрывается остальное. JavaScript не нужен вовсе */
#faq details {
    border-bottom: 1px solid var(--color-border);
}

/* Вопрос - то, что видно в свёрнутом виде */
#faq summary {
    padding: calc(var(--space) * 2) 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

@media (hover: hover) {
    #faq summary:hover {
        color: var(--color-accent);
    }
}

/* Вопрос - это <h3> внутри <summary>. Заголовок нужен, чтобы
   вопросы остались в структуре страницы: по заголовкам строится
   её оглавление, им пользуются программы чтения с экрана.
   Но <h3> - блочный элемент со своими отступами: без правки
   он встал бы на строку НИЖЕ треугольника-указателя и раздвинул
   бы вопросы. display: inline возвращает его в одну строку
   с указателем, а размер и насыщенность он наследует у summary,
   где они уже заданы - поэтому вид остаётся прежним */
#faq summary h3 {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* Ответ. Отступ снизу - чтобы раскрытый текст не прилипал
   к следующему вопросу */
#faq details p {
    margin-top: 0;
    margin-bottom: calc(var(--space) * 2);
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */

#footer {
    margin-top: var(--space-section);
    padding-top: calc(var(--space) * 4);
    border-top: 1px solid var(--color-border);

    /* Подвал - служебная часть страницы, а не содержание.
       Поэтому текст тише и мельче: он не должен спорить
       за внимание с тем, ради чего человек пришёл */
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

/* Заголовок подвала - обычного размера, а не 30px, как
   у разделов: это не самостоятельный раздел, а подпись
   к короткому списку */
#footer h2 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space);
}

#footer ul {
    list-style: none;
    padding: 0;
}

#footer li {
    margin-bottom: calc(var(--space) * 0.5);
}

/* Почта отделена от списка документов отступом побольше:
   это строка другого смысла, а не третий пункт того же списка */
#footer-contact {
    margin-top: calc(var(--space) * 2);
    margin-bottom: 0;
}

/* Почта - единственное, на что в подвале нажимают, и она была
   самой мелкой целью на странице: 128x17px. По высоте это втрое
   меньше пальца.
   inline-flex + align-items: center делают из ссылки блок
   заданной высоты, внутри которого текст стоит по центру.
   Обычный inline-block с min-height так не умеет - текст
   прижался бы к верху и цель оказалась бы смещена относительно
   того, что видно.
   Ширина остаётся по длине адреса: удлинять её не нужно,
   128px по горизонтали пальцу хватает с запасом */
@media (max-width: 700px) {
    #footer-contact a {
        display: inline-flex;
        align-items: center;
        min-height: var(--size-tap-target);
    }
}

/* Заглушки документов - это теги <a> БЕЗ адреса. Общее правило
   красит все ссылки акцентным цветом, и они выглядели бы
   нажимаемыми, хотя никуда не ведут. Здесь возвращаем им
   обычный цвет текста: :not([href]) значит "только те, у кого
   нет адреса" - когда документы появятся и адрес допишут,
   ссылки автоматически станут синими */
#footer a:not([href]) {
    color: inherit;
}

/* ============================================================
   СТРАНИЦЫ ДОКУМЕНТОВ (/privacy и /terms)

   Политика конфиденциальности и пользовательское соглашение -
   это сплошной текст, который читают подряд, а не интерфейс.
   Поэтому правил здесь мало: ширина строки, воздух вокруг
   заголовков и одна таблица.
   ============================================================ */

/* Ширина текста, а не блока. Причина - та же, что у ограничений
   и предупреждения на главной (объяснение выше, у правила
   #upload-limits): дочитав длинную строку до конца, глаз должен
   вернуться в начало следующей и не промахнуться. В юридическом
   тексте, который и так читается тяжело, это особенно важно */
.doc {
    max-width: var(--width-text);
}

/* На этих страницах логотип в шапке - ссылка на главную (на самой
   главной он обычным текстом, вести с неё некуда). Общее правило
   красит любую ссылку акцентным синим и браузер добавляет
   подчёркивание - здесь возвращаем логотипу его обычный вид:
   он должен выглядеть так же, как на главной, а не как ссылка
   посреди шапки. color: inherit значит "взять цвет у родителя" */
a#site-name,
a#site-name:visited {
    color: inherit;
    text-decoration: none;
}

/* Строка под названием документа: сервис и дата редакции.
   Тише основного текста - это служебная пометка, а не часть
   самого документа */
.doc-meta {
    color: var(--color-text-muted);
}

/* Заголовки разделов. Сверху воздуха заметно больше, чем снизу, -
   так заголовок принадлежит тексту ПОД ним, а не над. Без этого
   он висит ровно посередине между двумя разделами, и с одного
   взгляда не видно, к какому относится */
.doc h2 {
    margin-top: calc(var(--space) * 5);
}

.doc h3 {
    margin-top: calc(var(--space) * 4);
}

/* Разделители между разделами - это горизонтальные черты (---)
   из исходного текста документа. Браузерная черта нарисована
   объёмной рамкой и выглядит устаревшей, поэтому убираем рамку
   целиком и рисуем заново одной тонкой линией нашего цвета */
.doc hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: calc(var(--space) * 5) 0;
}

/* Пункты списков раздвигаем: в юридическом тексте пункт часто
   занимает две-три строки, и без отступа список читается
   сплошной стеной */
.doc li {
    margin-bottom: var(--space);
}

/* Единственная таблица во всех документах - цели обработки данных
   в политике. border-collapse: collapse убирает двойные линии
   между ячейками: без него у каждой ячейки своя рамка, и на стыке
   их получается две */
.doc table {
    border-collapse: collapse;
    width: 100%;
    margin: calc(var(--space) * 2) 0;
}

/* vertical-align: top - текст в ячейках начинается сверху.
   По умолчанию браузер ставит его по середине высоты, и если
   в одной ячейке строка, а в соседней три, короткая повисает
   в воздухе напротив середины длинной */
.doc th,
.doc td {
    text-align: left;
    vertical-align: top;
    padding: var(--space);
    border-bottom: 1px solid var(--color-border);
}

/* Шапка таблицы: линия под ней заметнее, чем между строками -
   она отделяет названия столбцов от содержимого */
.doc th {
    border-bottom: 2px solid var(--color-border);
}

/* Название cookie (session_token) в тексте политики. Моноширинный
   шрифт показывает, что это не слово, а точное техническое имя -
   его можно сверить с тем, что видно в настройках браузера.
   Размер чуть меньше: моноширинные буквы шире обычных и в строке
   выглядят крупнее соседнего текста при том же кегле */
.doc code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 0.9em;
}


/* ============================================================
   УВЕДОМЛЕНИЕ О COOKIE

   Разметку собирает static/banner.js, здесь только внешний вид.
   ============================================================ */

/* position: fixed прибивает баннер к низу ОКНА, а не страницы:
   он остаётся на месте при прокрутке. Иначе уведомление лежало бы
   в самом низу документа, и до него никто бы не долистал - то есть
   не увидел бы вовсе.

   left и right по нулям растягивают его на всю ширину окна: у fixed
   элемента ширина по умолчанию считается по содержимому.

   z-index задаёт, что окажется сверху при наложении. Это единственное
   место в проекте, где он вообще нужен: остальная страница ни на что
   не накладывается. Значение маленькое намеренно - чтобы, когда
   появится что-то ещё, его можно было положить выше, не переписывая
   это правило */
#cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;

    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: calc(var(--space) * 2) var(--space-block-x);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space) * 3);

    font-size: var(--font-size-small);

    /* Переход - для закрытия. Названы оба свойства, которые меняет
       класс is-closing: прозрачность и сдвиг. Просто "all" писать
       не стоит - тогда браузер анимирует и то, что меняется
       по другим причинам, например высоту при повороте телефона */
    transition: opacity 200ms, transform 200ms;
}

/* Текст внутри баннера: ширину ограничиваем по той же причине, что
   и везде (длинная строка теряется при переходе на следующую),
   а margin: 0 убирает браузерный отступ у абзаца - здесь он лишний,
   расстояния задаёт сам баннер */
#cookie-notice p {
    max-width: var(--width-text);
    margin: 0;
}

/* Состояние закрытия: баннер уезжает вниз и растворяется.
   translateY(100%) - сдвинуть вниз на свою собственную высоту,
   то есть ровно за край окна, при любой высоте баннера.
   pointer-events: none - "не реагировать на мышь и касания":
   пока идут эти доли секунды, уже невидимый баннер не должен
   перехватывать нажатия по тому, что под ним */
#cookie-notice.is-closing {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* Уважаем системную настройку "уменьшить движение". Её включают
   не из вкусовых соображений: у части людей анимация вызывает
   головокружение и тошноту (вестибулярные расстройства).
   Баннер при этом не ломается - он просто исчезает сразу,
   без переезда. Скрипт это предусматривает: убирает баннер
   по таймеру, а не по событию окончания перехода, которого
   в этом случае не будет */
@media (prefers-reduced-motion: reduce) {
    #cookie-notice {
        transition: none;
    }
}

/* На узком экране текст и кнопка в одну строку не помещаются:
   кнопка сжимается в узкий столбик из букв. Ставим их друг
   под другом, кнопку - во всю ширину и высотой в размер цели
   для пальца */
@media (max-width: 700px) {
    #cookie-notice {
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--space) * 1.5);
    }

    #cookie-notice-button {
        width: 100%;
        min-height: var(--size-tap-target);
    }
}