/* Дополнения к вёрстке макета (preview/html/css), нужные только живому сайту.
Правила макета не переопределяем — только добавляем то, чего в макете нет. */
/* Шрифт: в base.css макета font-display:swap — текст сначала рисуется системным
шрифтом, потом перерисовывается PT Sans, и страница дёргается. Повторяем
объявления с font-display:block (позднее объявление с теми же дескрипторами
заменяет прежнее): текст ждёт шрифт (до 3 с), а он предзагружен в и
закэширован навсегда, так что ожидание — доли секунды при первом визите */
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:block;src:url("../fonts/pt-sans-regular.ec84922bc913.ttf") format('truetype')}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:block;src:url("../fonts/pt-sans-bold.7c7b7ca4398e.ttf") format('truetype')}
/* Форма переключения языка в шапке: обёртка вокруг кнопки-флага не должна ломать ряд действий */
.language-form{display:flex;margin:0}
/* Кнопка «Выйти» в меню пользователя: выход — POST-форма, поэтому это ,
а не ; повторяем оформление .user-menu a из source.css */
.user-menu form{margin:0}
.user-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border-radius:var(--border-radius-m);font-size:15px;font-weight:400;color:var(--bp-ink-2);text-align:left;transition:background .14s var(--ease),color .14s var(--ease)}
.user-menu button:hover{background:var(--bp-hover);color:var(--text-purple)}
.user-menu button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* Аватар канала в рейтинге и в «ТОП MAX» может быть картинкой (макет знал только буквы-заглушки) */
img.rating-avatar,img.rv-avatar{object-fit:cover}
/* Многоточие между номерами страниц рейтинга (в макете были все номера подряд) */
.rating-pagination__gap{min-width:24px;text-align:center;color:var(--bp-muted);user-select:none}
/* Список показателей в описании индекса качества под таблицей (в макете были только абзацы) */
.rating-quality-note ul{margin:0 0 7px;padding-left:18px}
.rating-quality-note li{margin:0 0 3px}
/* Уведомления django.contrib.messages (после действий allauth и т. п.), пока на витрине
их выводят только страницы ошибок и вход/выход — цвета по уровню на переменных темы макета */
.dt-messages{margin:24px auto 0;display:flex;flex-direction:column;gap:8px}
.dt-alert{border-radius:var(--border-radius-m);padding:12px 16px;font-size:var(--font-size-14);border:1px solid var(--line);background:var(--bp-surface-2);color:var(--bp-ink)}
.dt-alert--success{border-color:var(--text-green-light);background:var(--text-green-light);color:var(--text-green-dark)}
.dt-alert--error{border-color:var(--text-red-light);background:var(--text-red-light);color:var(--text-red-dark)}
.dt-alert--warning{border-color:var(--text-yellow-light);background:var(--text-yellow-light);color:var(--text-yellow-dark)}
/* Страницы 403/404: код ошибки, заголовок, текст и кнопка «На главную» (класс .cta — из source.css) */
.dt-error{max-width:32rem;margin:64px auto 96px;padding:0 20px;text-align:center}
.dt-error__code{font-size:var(--font-size-64);font-weight:700;color:var(--brand)}
.dt-error__title{margin-top:16px;font-size:var(--font-size-24);font-weight:700}
.dt-error__text{margin-top:8px;color:var(--bp-muted)}
.dt-error__cta{margin-top:24px}
/* --- Страницы allauth (вход, регистрация, сброс пароля, управление учёткой) ---
Макета для них в preview/ нет, поэтому оформление собрано из элементов макета:
карточка на поверхности --bp-surface с рамкой --line, поля как в диалоге поиска
(search.css: фон --bs-input-bg, скруглённая рамка), основная кнопка — .cta.
Все цвета — переменные темы макета, тёмная тема приходит сама через data-bs-theme.
Разметка — templates/allauth/layouts/*.html и templates/allauth/elements/*.html */
.dt-auth{max-width:28rem;margin:48px auto 96px}
.dt-auth--wide{max-width:44rem}
.dt-auth__card{padding:32px;border:1px solid var(--line);border-radius:var(--border-radius-l);background:var(--bp-surface);box-shadow:var(--bp-shadow)}
@media(max-width:576px){.dt-auth{margin-top:24px}.dt-auth__card{padding:22px 18px}}
/* Ссылка «← В кабинет» над карточкой управления учёткой */
.dt-auth__back{display:inline-block;margin-bottom:14px;font-size:var(--font-size-14);color:var(--bp-muted)}
.dt-auth__back:hover{color:var(--brand)}
.dt-auth__title{margin:0;font-size:var(--font-size-24);font-weight:700;line-height:1.2}
.dt-auth__subtitle{margin:32px 0 0;font-size:var(--font-size-18);font-weight:700}
.dt-auth__text{margin:12px 0 0;font-size:var(--font-size-14);color:var(--bp-muted);line-height:1.5}
/* Ссылки в пояснениях приходят из переводов allauth готовыми — красим через родителя */
.dt-auth__text a{color:var(--brand);text-decoration:underline}
.dt-auth__text a:hover{color:var(--brand-dark)}
.dt-auth__hr{margin:24px 0;border:0;border-top:1px solid var(--line)}
.dt-auth__form{margin-top:24px}
.dt-auth__alert{margin:16px 0}
/* Ряд кнопок: в строку с переносом; вариант vertical — в столбик (список способов входа) */
.dt-auth__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.dt-auth__actions--vertical{flex-direction:column;align-items:stretch}
/* Поле формы: подпись сверху, поле во всю ширину, подсказка и ошибка под ним */
.dt-field{margin-bottom:16px}
.dt-field__label{display:block;margin-bottom:6px;font-size:var(--font-size-14);font-weight:700}
.dt-field__input{width:100%;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:var(--border-radius-m);background:var(--bs-input-bg);color:var(--bp-ink);font:inherit;font-size:var(--font-size-16);outline:0;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.dt-field__input::placeholder{color:var(--bp-muted)}
.dt-field__input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--bp-hover)}
.dt-field__input--error{border-color:var(--text-red-dark)}
.dt-field__help{margin-top:6px;font-size:var(--font-size-13);color:var(--bp-muted)}
/* Подсказка к паролю от Django — список требований */
.dt-field__help ul{margin:4px 0 0;padding-left:18px}
.dt-field__help a{color:var(--brand);text-decoration:underline}
.dt-field__error{margin:-10px 0 16px;font-size:var(--font-size-14);color:var(--text-red-dark)}
/* Чекбокс и радио: квадратик слева, подпись справа */
.dt-field--check{display:flex;align-items:flex-start;gap:10px;font-size:var(--font-size-14)}
.dt-field__check{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--brand)}
.dt-field__check-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;cursor:pointer}
/* Кнопки, кроме основной (.cta — из макета): красная, серая, с рамкой, текстовая ссылка */
.dt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border:1px solid transparent;border-radius:var(--border-radius-m);font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.dt-btn--cta{border:0;font:inherit;font-size:15px;cursor:pointer}
.dt-btn--danger{background:var(--bg-red);color:#fff}
.dt-btn--danger:hover{background:var(--bg-red-dark)}
.dt-btn--secondary{background:var(--bp-surface-2);color:var(--bp-ink)}
.dt-btn--secondary:hover{background:var(--bp-hover)}
.dt-btn--outline{border-color:var(--brand);color:var(--brand);background:transparent}
.dt-btn--outline:hover{background:var(--bp-hover)}
.dt-btn--link{padding:11px 8px;background:transparent;color:var(--bp-muted);font-weight:400;text-decoration:underline}
.dt-btn--link:hover{color:var(--brand)}
/* Метки у адресов email на странице управления учёткой: подтверждён / не подтверждён / основной */
.dt-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:var(--font-size-12);line-height:1.5}
.dt-badge--success{background:var(--text-green-light);color:var(--text-green-dark)}
.dt-badge--warning{background:var(--text-yellow-light);color:var(--text-yellow-dark)}
.dt-badge--brand{background:var(--bp-brand-soft);color:var(--brand)}
/* Карточка раздела на страницах управления учёткой (email, пароль) */
.dt-panel{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--border-radius-m)}
.dt-panel__title{margin:0;font-size:var(--font-size-18);font-weight:700}
.dt-panel__body{margin-top:8px;font-size:var(--font-size-14);color:var(--bp-muted);line-height:1.5}
/* --- Страницы витрины без макета: каталог каналов, карточка канала, поиск по постам ---
(templates/channels/catalog.html, channel_detail.html, posts.html, _post.html,
_pagination.html). Макетов для них в preview/ ещё нет, поэтому оформление —
переходное, из тех же элементов макета, что и страницы allauth: переменные темы
(--line, --bp-muted, --bp-surface…), поле как в диалоге поиска, кнопка .cta.
Когда появятся макеты, эти страницы верстаются по ним, а блок ниже удаляется.
Ширина колонки — класс .wrap макета (1340 px + поля 20 px). */
.dt-page{margin:32px auto 96px}
.dt-page__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.dt-page__title{margin:0;font-size:var(--font-size-24);font-weight:700;line-height:1.2}
/* Публичное @имя рядом с названием канала — мельче и серым */
.dt-page__title small{font-size:var(--font-size-16);font-weight:400;color:var(--bp-muted)}
.dt-page__lead{margin:8px 0 0;font-size:var(--font-size-14);color:var(--bp-muted);line-height:1.5}
/* Форма в одну строку (ссылка + кнопка «Добавить канал») */
.dt-inline-form{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.dt-form{margin-top:16px}
/* Поле ввода без подписи: то же оформление, что у .dt-field__input, но ниже (44 px) */
.dt-input{height:44px;min-width:16rem;padding:0 14px;border:1px solid var(--line);border-radius:var(--border-radius-m);background:var(--bs-input-bg);color:var(--bp-ink);font:inherit;font-size:var(--font-size-16);outline:0;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.dt-input--full{width:100%;min-width:0}
.dt-input::placeholder{color:var(--bp-muted)}
.dt-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--bp-hover)}
.dt-hint{margin:6px 0 0;font-size:var(--font-size-13);color:var(--bp-muted)}
/* Таблица: заголовки серым, строки разделены линией темы */
.dt-table{width:100%;margin-top:24px;border-collapse:collapse;font-size:var(--font-size-14)}
.dt-table th{padding:8px 12px 8px 0;text-align:left;font-weight:400;color:var(--bp-muted);border-bottom:1px solid var(--line)}
.dt-table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.dt-table a{color:inherit}
.dt-table a:hover{color:var(--brand)}
/* Компактная таблица внутри раскрывающихся блоков (история подписчиков, состав ИК) */
.dt-table--compact{width:auto;margin-top:8px;font-size:var(--font-size-13)}
.dt-table--compact th,.dt-table--compact td{padding:4px 16px 4px 0;border:0}
.dt-muted{color:var(--bp-muted)}
.dt-small{font-size:var(--font-size-13)}
.dt-right{text-align:right}
.dt-link{color:var(--brand)}
.dt-link:hover{text-decoration:underline}
/* Канал в строке таблицы: аватар и название рядом */
.dt-channel{display:flex;align-items:center;gap:10px}
.dt-avatar{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;background:var(--bp-surface-2)}
.dt-avatar--lg{width:64px;height:64px}
/* Шапка карточки канала: крупный аватар слева, название и цифры справа */
.dt-channel-head{display:flex;align-items:flex-start;gap:16px}
/* Служебные строки под названием: предупреждение (закрытый канал) и ошибка проверки */
.dt-note{margin:8px 0 0;font-size:var(--font-size-13);line-height:1.5}
.dt-note--warning{color:var(--text-yellow-dark)}
.dt-note--error{color:var(--text-red-dark)}
/* Раскрывающиеся блоки : заголовок серым, при наведении — фирменным */
.dt-details{margin-top:24px}
.dt-details summary{cursor:pointer;font-size:var(--font-size-14);color:var(--bp-muted)}
.dt-details summary:hover{color:var(--brand)}
/* Лента постов: карточки на поверхности темы с рамкой */
.dt-posts{margin-top:32px}
.dt-post{padding:16px;border:1px solid var(--line);border-radius:var(--border-radius-m);background:var(--bp-surface)}
.dt-post+.dt-post{margin-top:16px}
.dt-post__meta{font-size:var(--font-size-13);color:var(--bp-muted)}
.dt-post__meta a{color:inherit}
.dt-post__meta a:hover{color:var(--brand)}
/* Вложения: горизонтальная лента превью 96×96, у видео поверх — значок play */
.dt-post__media{display:flex;gap:8px;overflow-x:auto;margin-top:12px}
.dt-post__thumb{position:relative;display:block;flex:none}
.dt-post__thumb img{display:block;width:96px;height:96px;border-radius:var(--border-radius-m);object-fit:cover;background:var(--bp-surface-2)}
.dt-post__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px}
.dt-post__file{align-self:center;font-size:var(--font-size-13);color:var(--bp-muted)}
/* Текст поста: переносы строк сохраняются (pre-line), длинные слова переносятся */
.dt-post__text{margin-top:12px;font-size:var(--font-size-14);line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.dt-empty{margin-top:24px;color:var(--bp-muted)}
/* Постраничная навигация «← Назад · 2 / 10 · Вперёд →» */
.dt-pagination{display:flex;align-items:center;gap:16px;margin-top:24px;font-size:var(--font-size-14)}
.dt-pagination a{color:var(--brand)}
.dt-pagination a:hover{text-decoration:underline}