/*
 * content.css — блоки внутренней страницы материала: контентный блок, актёры,
 * описание, дополнительная информация, плеер, селекторы сезонов и серий,
 * статусы просмотра, франшиза, факты и рекомендации.
 *
 * Порядок и оформление блоков — MASTER ТЗ №3 (п.57–84, 142–145) и референсы
 * 2.png / 3.png. Значения — только из UI_TOKENS.css.
 */

/* ── Общий контейнер блока контентной колонки ─────────────────────────────── */

/*
 * Секция внутренней страницы. Собственного фона, рамки и скругления у неё
 * нет: по референсу 2.png колонка — один лист, а секции в нём разделены
 * врезанной линией. Отступы и разделитель ставит `.content-column`.
 */
.content-block {
    padding: var(--space-4) var(--space-5);
}

/*
 * Исключение — секция, залитая цветом сайдбара целиком: ряд актёров и
 * справочная приписка с подборками и устройствами (замечание заказчика).
 * Заливка ставится на саму секцию, поэтому закрывает её всю — и по ширине
 * листа, и по высоте вместе с полями, а не только полосу под текстом.
 *
 * Селектор с родителем нужен по весу: общее `.content-column > *` снимает
 * у секций собственный фон, и правило в один класс ему проигрывает.
 */
.content-column > .content-block--filled {
    background: var(--sidebar-bg);
}

.content-block__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.content-block__extra {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.content-block__extra:hover {
    color: var(--accent);
}

/* ── Шапка материала: заголовок, оценки, постер, метаданные ───────────────── */

.content-main {
    padding: var(--space-4) var(--space-5);
}

.content-main__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-3);
}

.content-main__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
}

.content-main__title {
    font-size: var(--font-size-h1);

    /*
     * `break-word`, а не `anywhere`. Разница видна только на узком экране,
     * зато сразу: `anywhere` разрешает браузеру считать минимальной шириной
     * блока ширину одной буквы, и на 390px заголовок сжимался в колонку с
     * разрывами посреди слов — «Севе / рный / маяк». `break-word` переносит
     * по словам и рвёт слово только тогда, когда оно одно не помещается
     * в строку целиком (ТЗ №10, п.414: длинное название переносится
     * аккуратно). Найдено визуальной проверкой на восьми ширинах, этап 36.
     */
    overflow-wrap: break-word;
}

/*
 * Бейдж последнего обновления сериала (ТЗ №3, п.93).
 *
 * Три части в одной плашке, разделённые точками-разделителями: повод
 * («Обновлено») акцентом, номера серии — основным цветом, озвучка —
 * приглушённой. Раньше всё шло одной серой строкой с тире, и «5 серия»
 * терялась ровно посередине (замечание заказчика).
 *
 * Плашка переносится по словам, а не держится в одну строку: «Многоголосый
 * закадровый» на телефоне не помещается никуда, и `nowrap` заставлял её
 * распирать шапку карточки.
 */
.update-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    max-width: 100%;
    padding: 3px var(--space-3);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.update-badge__label {
    color: var(--accent);
    font-weight: var(--font-weight-semibold);
}

.update-badge__episode {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.update-badge__translation {
    color: var(--text-muted);
}

/*
 * Разделитель — псевдоэлемент, а не символ в разметке: точка между частями
 * принадлежит оформлению, и в `title`, в поиске по странице и в озвучке
 * скринридера ей делать нечего. У первой части его нет.
 */
.update-badge__episode::before,
.update-badge__translation::before {
    content: '·';
    margin-right: var(--space-2);
    color: var(--text-muted);
}

.content-main__marks {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex: none;
}

.content-main__body {
    display: grid;
    grid-template-columns: var(--poster-content-width) 1fr;
    gap: var(--space-6);
    padding-top: var(--space-4);
}

/*
 * Бейджи КП и IMDb лежат в правом нижнем углу обложки (2.png), а не строкой
 * под ней: там они и на референсе, и место в колонке не тратят.
 */
.content-main__poster {
    position: relative;
    /*
     * Колонка обложки не тянется по высоте соседней. Бейджи КП и IMDb
     * прижаты к её нижнему краю, и у растянутой колонки этот край — низ
     * длинного списка метаданных: на телефоне бейджи уезжали на две сотни
     * пикселей ниже картинки и висели на пустом месте.
     */
    align-self: start;
}

.content-main__poster .rating-badges--stack {
    position: absolute;
    right: 0;
    bottom: var(--space-3);
    gap: 2px;
    width: 108px;
}

.content-main__poster .rating-badges--stack .rating-badge {
    padding: 2px var(--space-3);
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    font-size: var(--font-size-meta);
}

.content-main__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    /* Метаданные материала — основной читаемый слой карточки (2.png). */
    font-size: var(--font-size-base);
}

.content-main__info .meta-list {
    gap: var(--space-1);
    font-size: var(--font-size-base);
}

/* ── Действия под метаданными ─────────────────────────────────────────────── */

/*
 * «Смотреть онлайн» и «Комментарии (N)» отделены от метаданных тонкой линией
 * и уходят вниз колонки (2.png): это не продолжение списка фактов, а строка
 * переходов. `margin-top: auto` прижимает её к низу постера, когда фактов
 * мало, — на референсе она стоит вровень с нижним краем обложки.
 */
.action-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--font-size-base);
}

/* На референсе это спокойные светлые ссылки, а не оранжевые кнопки. */
.action-links__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--link);
}

.action-links__item svg {
    color: var(--text-muted);
}

.action-links__item:hover,
.action-links__item:hover svg {
    color: var(--accent);
}

/* ── Актёры ───────────────────────────────────────────────────────────────── */

/*
 * Ряд состава — сетка ровно на восемь долей во всю ширину контентной колонки
 * (2.png), а не лента карточек фиксированной ширины. Разница принципиальная:
 * при фиксированных 70px восемь карточек не добирали до правого края добрую
 * сотню пикселей, а девятая — если бы состав отдал девять — торчала бы из-под
 * обреза. Доля ширины подстраивается сама, и сколько бы карточек ни пришло,
 * ряд остаётся ровным по краю листа. Число долей совпадает с `cast_limit`
 * в `config/content.php`: меняются они вместе.
 */
.actor-row__list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-3);
}

.actor-row__item {
    min-width: 0;
}

.actor-card {
    display: block;
    text-align: center;
}

.actor-card__photo {
    width: 100%;
    /* 68x88 на референсе — чуть выше квадрата, а не постер 2:3. */
    aspect-ratio: 1 / 1.29;
    height: auto;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.actor-card__name {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

a.actor-card:hover .actor-card__name {
    color: var(--link-hover);
}

.actor-card__character {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

/* ── Описание и дополнительная информация ─────────────────────────────────── */

.description__text {
    /*
     * Описание занимает всю ширину контентной колонки. Ограничение по длине
     * строки здесь было лишним: рядом с ним лежат таблица метаданных и лента
     * рекомендаций во всю ширину, и обрубленный на две трети абзац читался
     * не как «комфортная строка», а как недогруженный текст.
     */
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.description__text p + p {
    margin-top: var(--space-3);
}

/*
 * Слоган, подборки и список устройств идут сразу под описанием и продолжают
 * его: размер шрифта здесь тот же, что у `.description__text`. На мелком
 * `--font-size-sm` блок читался как сноска и разрывал абзац с текстом.
 */
.additional-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.additional-info__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.additional-info__label {
    color: var(--text-muted);
}

.additional-info__devices {
    color: var(--accent-yellow);
    font-style: italic;
}

/* ── Плеер ────────────────────────────────────────────────────────────────── */

/*
 * Полоса вкладок и поле плеера идут от края до края листа (2.png), поэтому
 * боковые отступы секции снимаются, а шапка блока задаёт их себе сама.
 */
.content-column > .player {
    padding: 0;
}

.player__head {
    padding: var(--space-4) var(--space-5) var(--space-3);
}

.player__head > :last-child {
    margin-bottom: 0;
}

/*
 * Полоса вкладок (2.png): слева источники, справа оценка. Текущая вкладка
 * врезана в лист тёмным прямоугольником и стыкуется с чёрным полем плеера —
 * между полосой и полем щели нет, поэтому ни отступа, ни рамки снизу.
 */
.player__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-3);
    padding-right: var(--space-5);
    background: var(--sheet-bg);
}

.player__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.player__tab {
    padding: var(--space-3) var(--space-5);
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.player__tab:hover {
    color: var(--link-hover);
}

.player__tab.is-current {
    background: var(--player-tab-active);
    color: var(--text-primary);
}

/* Оценка в полосе — одной строкой: звёзды и подпись рядом, а не друг под другом. */
.player__rating {
    display: flex;
    align-items: center;
}

.player__rating .rating-stars {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

.player__rating .rating-stars__summary {
    white-space: nowrap;
}

.player__translation {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.player__translation-label {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.player__translation-select {
    width: auto;
    min-width: 180px;
}

/*
 * Место под плеер зарезервировано заранее — запуск не сдвигает вёрстку.
 * Ни рамки, ни скругления: поле стыкуется с полосой вкладок над ним и
 * занимает лист во всю ширину (2.png).
 */
.player__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: var(--sheet-edge);
}

.player__frame iframe,
.player__frame video {
    width: 100%;
    height: 100%;
    border: 0;
}

.player__poster,
.player__state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.player__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

.player__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    background: var(--overlay-strong);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-avatar);
    color: var(--accent);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.player__play:hover {
    border-color: var(--accent);
    color: var(--accent-hover);
}

.player__state {
    background: var(--overlay-strong);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.player__state[hidden] {
    display: none;
}

.player__error-title {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.player__error-text {
    max-width: 46ch;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.player__error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

/*
 * Жалоба на плеер (ТЗ №5, п.170–172). Строка мелкая и приглушённая: это
 * запасной выход, а не действие, которое надо предлагать вместо просмотра.
 * Появляется только после запуска — жаловаться на неоткрытый плеер не на что.
 */
.player__report {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    /* Секция отступов не даёт — строка задаёт их себе сама. */
    padding: var(--space-3) var(--space-5);
}

.player__report[hidden] {
    display: none;
}

.player__report-toggle {
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.player__report-toggle:hover {
    color: var(--link-hover);
}

.player__report-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.player__report-reasons[hidden] {
    display: none;
}

.player__report-reason {
    padding: 3px var(--space-2);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.player__report-reason:hover {
    background: var(--surface-4);
    color: var(--link-hover);
}

/* ── Сезоны и серии ───────────────────────────────────────────────────────── */

/*
 * Вложенная панель на листе (2.png): темнее фона колонки и с тонкой рамкой.
 * Секции листа своей подложки не имеют, а вот блок внутри секции —
 * единственный способ отделить выбор серии от плеера под ним.
 */
.season-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--sheet-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}

.season-selector__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.season-selector__label {
    flex: none;
    min-width: 52px;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.season-selector__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/*
 * Списков серий на странице столько же, сколько сезонов: сезон переключается
 * вкладкой, и невыбранные списки просто скрыты. `display: flex` выше
 * перебивает браузерное `[hidden] { display: none }`, поэтому скрытие
 * приходится задавать явно — иначе на экране лежат все сезоны разом.
 */
.season-selector__list[hidden] {
    display: none;
}

/*
 * Подпись выбранной серии, дата следующей и шаги «предыдущая/следующая»
 * (ТЗ №3, п.75; №5, п.290, 303). Строка одна: под селектором и над плеером,
 * чтобы запуск просмотра не сдвигал вёрстку.
 */
.season-selector__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.season-selector__current {
    color: var(--text-secondary);
}

.season-selector__upcoming {
    color: var(--accent-yellow);
}

.season-selector__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-left: auto;
}

.season-selector__step {
    color: var(--link);
}

.season-selector__step[hidden] {
    display: none;
}

.season-selector__step:hover {
    color: var(--accent);
}

/* ── Статус просмотра ─────────────────────────────────────────────────────── */

/*
 * Пять статусов занимают всю ширину листа равными долями (2.png): это ряд
 * переключателей под плеером, а не горсть кнопок у левого края. Отсюда сетка
 * с равными колонками, а не флексбокс по содержимому — «Не смотрел» и «Буду»
 * иначе получают разную ширину и ряд читается ступенькой.
 */
.watch-status {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/*
 * Секция живёт по общим полям листа, как «Расписание», «Рекомендации» и всё
 * остальное в колонке: собственного правила `padding: 0` у неё больше нет.
 * Раньше ряд шёл от края до края и один во всей колонке упирался в границу
 * листа — на глаз это читалось как вставленный чужой блок (замечание заказчика).
 */

/*
 * Ряд «В список» / «Следить» и строка прогресса. Поля даёт секция, поэтому
 * своих у строки нет — иначе они сложились бы с общими и удвоились.
 */
.watch-status__personal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.watch-status__personal:empty {
    display: none;
}

.watch-status__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Ряд прижат вправо и тогда, когда строки прогресса слева нет. */
    margin-left: auto;
}

/*
 * Полоса статусов — пять равных плашек в ряд.
 *
 * Чёрной подложки под ними больше нет (замечание заказчика): она была
 * единственным местом на листе, где фон уходил в ноль, и полоса вываливалась
 * из общего серого строя. Границы между «Смотрел» и «Буду» это не стоило —
 * их и так держит просвет: кнопки темнее листа, и щели в 2px читаются
 * светлыми линиями сами по себе.
 */
.watch-status__buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
}

/*
 * Высота 30px — как на 2.png. Ряд подписей под плеером обязан читаться
 * полосой, а не пятью крупными кнопками: он служебный, и вес в макете у него
 * меньше, чем у самого плеера над ним.
 */
.watch-status__button {
    min-width: 0;
    height: 30px;
    padding: 0 var(--space-2);
    overflow: hidden;
    background: var(--surface-3);
    border: 0;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.watch-status__button:hover {
    background: var(--surface-4);
    color: var(--link-hover);
}

/*
 * Активный статус — основным акцентом (ТЗ п.76 разрешает teal либо акцент;
 * второй функциональный цвет ради одной кнопки палитру бы раздул).
 */
.watch-status__button.is-active {
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: var(--font-weight-semibold);
}

.watch-status__progress {
    color: var(--accent);
    font-size: var(--font-size-sm);
}

/* ── Подписи под плеером ──────────────────────────────────────────────────── */

.player-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.player-notes__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
}

.player-notes__text {
    max-width: 60ch;
    color: var(--text-secondary);
}

.player-notes__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--link);
    white-space: nowrap;
}

.player-notes__link:hover {
    color: var(--link-hover);
}

.player-notes__glyph {
    fill: var(--surface-1);
}

.player-notes__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--accent-yellow);
}

.player-notes__icon {
    flex: none;
}

.player-notes__notice .player-notes__icon {
    margin-top: 2px;
}

/* ── График выхода серий ──────────────────────────────────────────────────── */

/*
 * Расписание сериала (2.png): врезанная в лист тёмная панель. Сезон —
 * раскрывающийся `<details>` с пунктирной рамкой, строки идут через одну,
 * справа — счётчик дней до эфира либо отметка о выходе.
 */
.schedule__season {
    background: var(--site-bg);
    border: 1px solid var(--sheet-edge);
    border-radius: var(--radius-xs);
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}

.schedule__season + .schedule__season {
    margin-top: var(--space-3);
}

/* Пунктирная рамка вокруг названия сезона — так на 2.png. */
.schedule__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    list-style: none;
}

/* Свой маркер вместо браузерного треугольника. */
.schedule__summary::-webkit-details-marker {
    display: none;
}

.schedule__summary:hover {
    color: var(--accent);
}

.schedule__chevron {
    flex: none;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

/* Свёрнутый сезон — стрелка вниз, раскрытый — вверх. */
.schedule__season:not([open]) .schedule__chevron {
    transform: rotate(180deg);
}

.schedule__list {
    /* Строки идут сразу под рамкой сезона — второй линии между ними не нужно. */
    border-top: 0;
}

.schedule__row {
    display: grid;
    grid-template-columns: minmax(0, 130px) minmax(0, 1fr) minmax(0, 96px) 44px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
}

/* Серия без названия: колонку под него не резервируем. */
.schedule__row.is-untitled {
    grid-template-columns: minmax(0, 1fr) minmax(0, 96px) 44px;
}

.schedule__row:nth-child(even) {
    background: var(--surface-1);
}

.schedule__row + .schedule__row {
    border-top: 1px solid var(--sheet-rule);
}

.schedule__row[hidden] {
    display: none;
}

.schedule__episode {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.schedule__title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Серия, которой ещё нет на сайте: график её показывает, но приглушённо. */
.schedule__row.is-pending .schedule__title {
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.schedule__date {
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.schedule__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 var(--space-2);
    background: var(--surface-3);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* Счётчик до эфира — единственное «живое» число блока, отсюда акцент. */
.schedule__mark--countdown {
    background: var(--surface-4);
    color: var(--accent);
    font-weight: var(--font-weight-semibold);
}

.schedule__more {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: none;
    border: 0;
    border-top: 1px solid var(--sheet-rule);
    color: var(--link);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.schedule__more:hover {
    color: var(--accent);
}

/* ── Франшиза ─────────────────────────────────────────────────────────────── */

/*
 * Тёмная таблица частей (3.png): список — врезанная в лист панель почти
 * чёрного тона, строки идут через одну и разделены линией, текущая часть
 * подсвечена во всю ширину и вместо номера получает треугольник «вы здесь».
 */
/*
 * Заголовок блока франшизы: значок списка вплотную к тексту, ссылка на всю
 * франшизу — у правого края. `content-block__title` разносит свои элементы
 * по краям, поэтому значок и текст склеены в одну группу разметкой ниже.
 */
.franchise__heading {
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
}

.franchise__icon {
    flex: none;
    color: var(--text-muted);
}

.franchise__all {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
}

.franchise__all:hover {
    color: var(--accent);
}

.franchise__list {
    background: var(--site-bg);
    border: 1px solid var(--sheet-edge);
    border-radius: var(--radius-xs);
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}

.franchise__row {
    display: grid;
    grid-template-columns: 26px 1fr 72px 56px 40px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
}

.franchise__row:nth-child(even) {
    background: var(--surface-1);
}

.franchise__row + .franchise__row {
    border-top: 1px solid var(--sheet-rule);
}

.franchise__row:hover {
    background: var(--surface-2);
}

.franchise__row.is-current,
.franchise__row.is-current:hover {
    background: var(--row-current);
}

/*
 * Открытая часть — серая подпись, а не ссылка (см. `franchise-list.php`).
 * Название держит тон обычного текста, остальные колонки остаются
 * приглушёнными: строка и так выделена фоном.
 */
.franchise__row.is-current .franchise__title--current {
    color: var(--text-secondary);
    cursor: default;
}

.franchise__row.is-current .franchise__type,
.franchise__row.is-current .franchise__year {
    color: var(--text-muted);
}

.franchise__row[hidden] {
    display: none;
}

.franchise__number {
    color: var(--text-muted);
    text-align: center;
}

/* Треугольник вместо номера у текущей части — как на 3.png. */
.franchise__here {
    display: flex;
    justify-content: center;
    color: var(--text-primary);
}

.franchise__title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.franchise__title:hover {
    color: var(--accent);
}


.franchise__type,
.franchise__year {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.franchise__rating {
    justify-self: end;
    padding: 0 var(--space-2);
    /* Оценка — маленький зелёный бейдж (ТЗ №3, п.79). */
    background: var(--success);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.franchise__rating:empty {
    background: none;
}

.franchise__more,
.facts__more {
    margin-top: var(--space-3);
}

/* ── Факты ────────────────────────────────────────────────────────────────── */

.facts__item {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.facts__item + .facts__item {
    border-top: 1px solid var(--border);
}

.facts__item[hidden] {
    display: none;
}

.facts__marker {
    flex: none;
    color: var(--accent);
    font-weight: var(--font-weight-bold);
}

/* ── Рекомендации ─────────────────────────────────────────────────────────── */

/*
 * Пять равных колонок (2.png). Ячейки одинаковой ширины и — благодаря
 * пропорции на самом `.poster` — одинаковой высоты: раньше высоту задавала
 * загруженная картинка, и ряд получался «лесенкой» из разных размеров.
 */
/*
 * `minmax(0, 1fr)`, а не `1fr`: минимум колонки по умолчанию — `auto`, то есть
 * ширина самого длинного неразрывного содержимого. Подзаголовок «2010 • США,
 * Великобритания» стоит в `white-space: nowrap`, и его max-content раздувал
 * свою колонку за счёт соседних — ряд рекомендаций выходил из разноразмерных
 * обложек. Нулевой минимум возвращает колонкам равную ширину.
 */
.recommendations__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

.recommendations__item {
    min-width: 0;
}

.recommendations__link {
    display: block;
}

.recommendations__frame {
    display: block;
}

.recommendations__title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.recommendations__link:hover .recommendations__title {
    color: var(--accent);
}

.recommendations__subtitle {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Адаптив внутренней страницы ──────────────────────────────────────────── */

@media (max-width: 1100px) {
    .content-main__body {
        grid-template-columns: 240px 1fr;
        gap: var(--space-5);
    }

    .recommendations__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Колонка сузилась — восемь портретов в ней уже нечитаемы, ставим шесть. */
    .actor-row__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /*
     * Заголовок и блок оценки перестают делить одну строку: на 390px их
     * сумма шире экрана, и без переноса заголовок сжимался бы в узкую
     * колонку (этап 36, визуальная проверка на восьми ширинах).
     */
    .content-main__head {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /*
     * Постер остаётся слева, метаданные — справа, только уже (ТЗ №3, п.141:
     * крошечный постер запрещён, 140px читается). Так же ведёт себя карточка
     * ленты на этой ширине, и два главных экрана сайта не расходятся.
     *
     * Раньше здесь стояло `grid-template-columns: 1fr`, и колонки вставали
     * друг под друга. Постер при этом оставался шириной 210px в колонке на
     * весь экран: справа от него зияла пустая половина листа, а бейджи КП и
     * IMDb, прижатые к правому краю колонки, улетали от обложки на 150px
     * и висели в воздухе (замечание заказчика).
     */
    .content-main__body {
        grid-template-columns: 140px 1fr;
        gap: var(--space-4);
    }

    .content-main__poster .poster--content {
        width: 140px;
    }

    /*
     * Бейджи рейтингов сужаются вместе с обложкой: полоса в 108px на
     * 140px-постере занимала бы почти всю его ширину.
     */
    .content-main__poster .rating-badges--stack {
        width: 92px;
    }

    .content-main__title {
        font-size: 21px;
    }

    .recommendations__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .franchise__row {
        grid-template-columns: 22px 1fr 46px 38px;
    }

    .franchise__type {
        display: none;
    }

    /*
     * На 390px пять подписей в строку не помещаются — ряд встаёт в две
     * колонки. Ширина остаётся равной, просто долей теперь две.
     */
    .watch-status__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * Статусов нечётное число, и последний занимает обе доли: иначе в углу
     * ряда остаётся пустая дыра размером с кнопку.
     */
    .watch-status__button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .watch-status__button {
        height: 34px;
    }

    /*
     * Расписание на узком экране. Четыре колонки в 390px не помещаются, и
     * строка перестраивается в две: слева столбиком номер серии, название и
     * дата, справа — отметка о выходе на всю высоту строки.
     *
     * Раньше здесь было `grid-column: 1 / -1` у одного только номера серии:
     * остальные три подписи съезжали в следующий ряд по чужим колонкам, дата
     * оказывалась прижата к середине, а отметка растягивалась на пол-экрана.
     * Селектор с `.is-untitled` нужен: у правила с двумя классами вес выше,
     * и без него серия без названия сохраняла бы десктопную сетку.
     */
    .schedule__row,
    .schedule__row.is-untitled {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-3);
        row-gap: 2px;
        padding: var(--space-3);
    }

    .schedule__episode {
        grid-column: 1;
        grid-row: 1;
    }

    .schedule__title {
        grid-column: 1;
        grid-row: 2;
        /* Место есть только по вертикали: название переносится, а не режется. */
        overflow: visible;
        white-space: normal;
    }

    .schedule__date {
        grid-column: 1;
        grid-row: 3;
        text-align: left;
    }

    /* У серии без названия второй строки нет — дата поднимается на её место. */
    .schedule__row.is-untitled .schedule__date {
        grid-row: 2;
    }

    .schedule__mark {
        grid-column: 2;
        grid-row: 1 / -1;
        justify-self: end;
        align-self: center;
    }

    .schedule__summary {
        margin: var(--space-2);
        padding: var(--space-3);
    }

    .player__tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }

    .player__bar {
        padding-right: var(--space-4);
    }
}

@media (max-width: 480px) {
    .recommendations__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * На телефоне восемь портретов в ряд превращаются в марки: доля колонки
     * там около 40px, а под ней ещё имя и роль. Ряд становится лентой с
     * прокруткой по горизонтали — карточка снова читаемого размера, а весь
     * состав по-прежнему доступен, только пролистыванием.
     */
    .actor-row__list {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        /*
         * То же, что у карусели: рядом с `overflow-x: auto` вертикаль
         * вычисляется в `auto`, и лента портретов начинала ездить вверх-вниз
         * внутри себя, съедая вертикальный свайп у страницы.
         */
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        padding-bottom: var(--space-2);
        scrollbar-width: thin;
        /* Карточка не режется краем экрана: лента встаёт по границам карточек. */
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .actor-row__item {
        flex: none;
        width: var(--actor-photo-width);
        scroll-snap-align: start;
    }
}

/* ── Личные действия зрителя: «В список» (ТЗ №10, п.39) ───────────────────── */

.list-picker {
    position: relative;
}

/* Метрику даёт `.action-button`; здесь — только то, что нужно `<summary>`. */
.list-picker__toggle {
    list-style: none;
}

.list-picker__toggle::-webkit-details-marker {
    display: none;
}

/* Раскрытый список — состояние кнопки, а не «наведение навсегда». */
.list-picker[open] .list-picker__toggle {
    background: var(--surface-4);
    border-color: var(--accent);
    color: var(--accent);
}

.list-picker__body {
    position: absolute;
    right: 0;
    z-index: var(--z-nav);
    min-width: 200px;
    max-height: 240px;
    margin-top: var(--space-2);
    padding: var(--space-3);
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}

.list-picker__hint {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.list-picker__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.list-picker__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
}

.list-picker__checkbox {
    accent-color: var(--accent);
}