/*
 * base.css — сброс, типографика и базовые примитивы (ссылки, кнопки, поля, панели).
 * Значения — только из UI_TOKENS.css. Компоновка страницы живёт в layout.css.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Плотность референса задаётся в px; rem не используем, чтобы шкала не «плыла». */
    background: var(--site-bg);
    -webkit-text-size-adjust: 100%;

    /*
     * Системные цвета браузера. Без этих трёх строк выделение текста, галочки,
     * переключатели и подсветка нажатия на телефоне приходят синими: это цвет
     * ОС, а не сайта, и на тёмной золотисто-серой странице он единственный
     * холодный. Задаётся один раз на корне и наследуется везде — раньше
     * `accent-color` дописывали покомпонентно, и каждый новый переключатель
     * снова оказывался синим, пока о нём не вспомнят.
     */
    accent-color: var(--accent);
    caret-color: var(--accent);
    -webkit-tap-highlight-color: rgba(230, 169, 43, .2);
}

::selection {
    background: var(--accent);
    color: var(--text-on-accent);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--site-bg);
    color: var(--text-primary);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

/*
 * Подчёркивания в оформлении нет ни у одной ссылки: на тёмном фоне линия
 * съедает и без того мелкий шрифт, а состояние ссылки в этой стилистике
 * показывает цвет (2.png, 3.png). Правило перечисляет все состояния явно —
 * иначе браузерное `underline` возвращается на :visited и внутри :hover.
 */
a {
    color: var(--link);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--link-hover);
}

/*
 * Только `text-decoration`, без `color`: если задать здесь ещё и цвет, любой
 * `.breadcrumbs__link` или `.card__title` окажется слабее по весу селектора
 * и все ссылки на сайте станут одинаковыми.
 */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/*
 * Поля ввода на сенсорных экранах — ровно 16px.
 *
 * Safari на iOS при фокусе на поле со шрифтом меньше 16px увеличивает всю
 * страницу и обратно её не отпускает: после первого касания поиска или поля
 * комментария сайт остаётся «зумнутым», а шапка уезжает за край. Запрещать
 * масштабирование через `maximum-scale=1` нельзя — это отнимает у зрителя
 * пинч-зум, то есть чинит одно за счёт другого. Рабочий способ ровно один:
 * не давать шрифту поля опускаться ниже порога.
 *
 * `:not([type='hidden'])` здесь не фильтр, а вес селектора. У `.field`,
 * `.auth-field__input` и `.comment-form__field` свой `font-size`, и правило
 * из одних имён тегов (0,0,1) им проиграло бы. Атрибут внутри `:not()`
 * поднимает вес до 0,1,1 — выше любого одиночного класса.
 *
 * Кнопочные типы исключены: они фокус-зума не вызывают, а подпись у них
 * должна остаться в размере остальных кнопок.
 */
@media (pointer: coarse) {
    input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='submit']):not([type='button']):not([type='reset']),
    select:not([hidden]),
    textarea:not([hidden]) {
        font-size: 16px;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Панель: базовый контейнер блоков сайдбара и контента ─────────────────── */

.panel {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/*
 * Высота шапки фиксирована токеном: она задаёт уровень первой врезанной линии
 * на фигуре «сайдбар + контент», и совпадать с крошками соседней колонки она
 * обязана точно, а не приблизительно.
 */
.panel__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--sheet-header-height);
    padding: var(--panel-padding);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.panel__title-extra {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

.panel__body {
    padding: var(--panel-padding);
}

/* ── Кнопки ───────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 7px 14px;
    background: var(--surface-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--link-hover);
}

.btn--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.btn--accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
}

.btn--icon {
    padding: 7px 9px;
}

/* ── Поля ─────────────────────────────────────────────────────────────────── */

.field {
    width: 100%;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.field::placeholder {
    color: var(--text-muted);
}

/*
 * Крестик очистки у `input[type=search]` рисует сам браузер, и рисует его
 * своим системным синим — на тёмной шапке он выделялся единственным холодным
 * пятном на всём сайте. Штатной кнопки WebKit тут нет вовсе: своя рисуется
 * маской из той же галочки-крестика и красится текущим цветом текста.
 */
.field::-webkit-search-decoration,
.field::-webkit-search-results-button,
.field::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background-color: var(--text-muted);
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.2 0L6 4.8 10.8 0 12 1.2 7.2 6l4.8 4.8-1.2 1.2L6 7.2 1.2 12 0 10.8 4.8 6 0 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.2 0L6 4.8 10.8 0 12 1.2 7.2 6l4.8 4.8-1.2 1.2L6 7.2 1.2 12 0 10.8 4.8 6 0 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.field::-webkit-search-cancel-button:hover {
    background-color: var(--accent);
}

.field:focus {
    border-color: var(--accent);
    outline: none;
}