/* Публичный дашборд (web/index.html, web/person/*, web/shows/*). Подключается
   поверх base.css — правь свободно, страниц админки эти правила не касаются. */

/* Sticky footer: подвал (.site-footer) всегда прижат к низу окна, даже если
   контента на странице мало — без position: fixed (это ломало бы скролл
   длинных страниц и могло перекрывать контент). Приём — html/body растянуты
   на всю высоту вьюпорта, body — flex-колонка (#site-header, main,
   #site-footer как по порядку идут в body), а main забирает всё свободное
   место (flex: 1 0 auto) и дожимает footer вниз. */
html {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    /* width: 100% явно, иначе main как flex-элемент body (см. выше) сжимается
       по своему контенту (margin: 0 auto из base.css в связке с flex гасит
       stretch), а не тянется на всю доступную ширину до max-width. */
    flex: 1 0 auto;
    width: 100%;
}

.header-inner {
    padding: 24px 32px;
    max-width: var(--content-width-sm);
    margin: 0 auto;
}

@media (min-width: 900px) {
    .header-inner {
        max-width: var(--content-width-md);
    }
}

@media (min-width: 1400px) {
    .header-inner {
        max-width: var(--content-width-lg);
    }
}

.brand {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.site-nav {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.site-nav-inner {
    max-width: var(--content-width-sm);
    margin: 0 auto;
    padding: 14px 32px;
}

/* Планшет и выше (>=768px) — горизонтальное меню в одну строку; на узких
   экранах оно сворачивается за кнопку-«бутерброд» (см. блок ниже). */
.site-menu {
    display: flex;
    gap: 32px;
}

.site-burger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.site-burger svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 767px) {
    .site-nav-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 24px;
    }

    .site-burger {
        display: flex;
    }

    .site-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        margin-top: 8px;
    }

    .site-nav-open .site-menu {
        display: flex;
    }

    .site-menu > .site-menu-link,
    .site-menu-group > .site-menu-link {
        padding: 12px 0;
    }

    .site-menu > .site-menu-link,
    .site-menu-group {
        border-top: 1px solid var(--border);
    }

    /* В свёрнутом меню подпункты всегда раскрыты под «Аналитикой» — отдельная
       кнопка-шеврон и fixed-позиционирование не нужны. */
    .site-menu-group {
        flex-wrap: wrap;
    }

    .site-menu-group > .site-menu-link {
        flex: 1;
    }

    .site-menu-group .site-menu-toggle {
        display: none;
    }

    .site-menu-group .site-submenu,
    .site-menu-group .site-submenu[hidden] {
        position: static;
        display: flex;
        flex-basis: 100%;
        min-width: 0;
        padding: 0 0 8px 26px;
        border: 0;
        box-shadow: none;
        background: none;
    }
}

@media (min-width: 900px) {
    .site-nav-inner {
        max-width: var(--content-width-md);
    }
}

@media (min-width: 1400px) {
    .site-nav-inner {
        max-width: var(--content-width-lg);
    }
}

.site-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    flex-shrink: 0;
}

.site-menu-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.site-menu-link:visited {
    color: var(--text-secondary);
}

.site-menu-link:hover,
.site-menu-link:focus-visible,
.site-menu-link:visited:hover {
    color: var(--series-1);
    text-decoration: none;
}

.site-menu-link[aria-current="page"],
.site-menu-link[aria-current="page"]:visited {
    color: var(--text-primary);
}

.site-menu-link[aria-current="page"]:hover {
    color: var(--series-1);
}

/* Выпадающее подменю (web/js/common.js: initSiteMenu и др.). Группа =
   ссылка пункта + кнопка-шеврон; подменю fixed (координаты ставит JS), потому
   что .site-nav-inner скроллится и обрезал бы absolute-блок. */
.site-menu-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.site-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
}

.site-menu-toggle:hover,
.site-menu-toggle[aria-expanded="true"] {
    color: var(--text-primary);
}

.site-menu-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s;
}

.site-menu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.site-submenu {
    position: fixed;
    z-index: 20;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.site-submenu[hidden] {
    display: none;
}

.site-submenu-link {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.site-submenu-link:visited {
    color: var(--text-secondary);
}

.site-submenu-link:hover,
.site-submenu-link:focus-visible,
.site-submenu-link:visited:hover {
    color: var(--series-1);
    text-decoration: none;
    background: var(--series-1-track);
}

/* Текущая страница отличается от hover: без фона, тёмным текстом и акцентной
   полоской слева — иначе она выглядит как «застрявшее» наведение. */
.site-submenu-link[aria-current="page"],
.site-submenu-link[aria-current="page"]:visited {
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--series-1);
}

.site-submenu-link[aria-current="page"]:hover {
    color: var(--series-1);
    background: var(--series-1-track);
}

/* main.padding-top уже даёт 32px от меню — чтобы итоговый зазор был 12px,
   а не 32px, тянем крошки вверх отрицательным margin-top (32 - 20 = 12). */
.breadcrumbs {
    margin-top: -20px;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    color: var(--text-muted);
}

.breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.breadcrumbs li[aria-current="page"] {
    color: var(--text-primary);
}

.page-intro h1,
.page-intro h2 {
    margin: 0;
    font-size: 22px;
    color: var(--text-primary);
}

.page-intro .subtitle {
    margin: 4px 0 0;
}

/* Ссылка «Открыть на VK Видео» на странице шоу (web/shows/show.html) —
   визуально полноценная кнопка, а не текстовая ссылка, т.к. это основной
   призыв к действию на странице. */
.button-link {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--series-1);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.button-link:visited {
    color: #fff;
}

.button-link:hover,
.button-link:focus-visible {
    filter: brightness(1.08);
    text-decoration: none;
}

.show-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.show-description,
.person-description {
    margin: 20px 0 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-line;
}

/* Show page redesign: hero, section headers and KPI groups scoped to
   show.html/show.js only (via show-hero/show-section/show-summary/
   summary-group classes), so the shared .page-intro/.card h2/.summary/
   .stat-tile styles used by person.html stay untouched. */

.show-hero h1 {
    font-size: 28px;
    font-weight: 700;
    border-left: 3px solid var(--series-1);
    padding-left: 14px;
}

.person-hero h1 {
    border-left: 3px solid var(--series-1);
    padding-left: 14px;
}

.show-hero .show-meta {
    margin-top: 12px;
}

.show-hero .show-description {
    max-width: 65ch;
}

/* Hero-сетка (web/shows/show.html): текст+summary слева, постер справа —
   пропорция 55/45 (minmax(0, 11fr) minmax(0, 9fr), а не проценты напрямую —
   fr сам вычитает gap перед делением, проценты пришлось бы считать вручную).
   Т.к. main капается на --content-width-lg: 1600px (base.css) и дальше не
   растёт независимо от ширины монитора, постер физически не превышает
   ~677px даже на 4K/8K (1600 - 64 padding - 32 gap = 1504, 45% = ~677px);
   max-width ниже на .show-poster — не для текущего рендера (677 < 720
   всегда при нынешней системе), а страховка на случай будущего роста
   --content-width-lg/нового xl-брейкпоинта. Левая колонка забирает всё
   оставшееся пространство. На узких экранах и когда постера нет — один
   столбец (см. .has-poster ниже и show.js:renderPoster). */
.show-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    /* Доп. отступ сверх gap:24px у main (base.css) — визуально отделяет Hero
       от остальных карточек страницы. */
    margin-bottom: 24px;
}

.show-hero-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Брейкпоинт поднят с 900px до 1024px: на 900-1023px двум колонкам (текст +
   постер 55/45) уже не хватало комфортной ширины под текст. */
@media (min-width: 1024px) {
    .show-hero-grid.has-poster {
        grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
        gap: 32px;
        /* align-items: start — иначе grid растягивает картинку на всю высоту
           строки (по умолчанию stretch), что не даёт aspect-ratio держать
           честные 16:9: высота колонки с постером зависит только от её
           собственной ширины, а не от высоты текстовой колонки слева. */
        align-items: start;
    }

    .show-hero-grid.has-poster .show-hero-left {
        grid-column: 1;
    }

    .show-hero-grid.has-poster .show-poster {
        grid-column: 2;
        grid-row: 1;
        max-width: 720px;
    }
}

/* Постер шоу (16:9, см. server/moderation.py:set_show_poster) — img остаётся
   hidden, если show.poster_updated_at пуст (см. show.js:main), тогда и
   .has-poster на .show-hero-grid не выставляется, чтобы не резервировать
   пустую вторую колонку под картинку, которой нет. */
.show-poster {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--gridline);
    background: var(--surface-1);
}

.show-poster[hidden] {
    display: none;
}

.button-link {
    padding: 10px 20px;
    font-size: 15px;
}

.show-section h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

main.dashboard-main {
    display: grid;
    grid-template-columns: 1fr;
}

/* Грид-элементы по умолчанию имеют min-width: auto и не сжимаются меньше
   min-content своего содержимого (например, таблицы) — на мобильном это
   раздувает всю сетку dashboard-main шире экрана, и margin: 0 auto
   центрирует уже раздутый блок так, что видна только часть слева, а справа
   контент срезан. min-width: 0 разрешает карточкам сжиматься до ширины
   трека сетки; overflow-x — запасной вариант, если таблица внутри всё
   равно не помещается (тогда скроллится сама карточка, а не вся страница). */
main.dashboard-main > * {
    min-width: 0;
    overflow-x: auto;
}

.full-span {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    main.dashboard-main {
        max-width: var(--content-width-md);
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1400px) {
    main.dashboard-main {
        max-width: var(--content-width-lg);
    }
}

/* Summary */

.summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.stat-tile {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
}

.stat-tile .stat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6em;
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-secondary);
    text-align: center;
}

.stat-tile .stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 28px;
    font-weight: 600;
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
}

.stat-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--series-1);
}

/* .show-summary переопределяет display: grid у общего .summary тем же по
   специфичности классом (0-1-0) — правило работает только потому, что стоит
   позже в файле, чем .summary/.stat-tile выше; не переноси его раньше них. */
.show-summary {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.summary-group-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.summary-group-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
}

.summary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.summary-item:not(:last-child)::after {
    content: "·";
    margin-left: 10px;
    color: var(--text-muted);
}

.summary-item-value {
    font-weight: 700;
}

.show-summary .stat-icon {
    width: 16px;
    height: 16px;
}

/* Views chart: столбики просмотров по выпускам в хронологическом порядке
   (web/shows/show.html). Лёгкий inline-SVG вместо библиотеки графиков —
   viewBox с preserveAspectRatio="none" растягивает график на всю ширину
   карточки при любом числе столбиков, от одного выпуска до нескольких сотен.
   Подпись максимума и крайние даты — минимальные оси, чтобы график был
   читаем без наведения курсора на конкретный столбик. */

.views-chart-container {
    position: relative;
    padding-top: 20px;
}

.views-chart-max {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.views-chart {
    width: 100%;
    height: 160px;
}

.views-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.views-chart-bar {
    fill: var(--series-1);
}

.views-chart-bar-missing {
    fill: var(--gridline);
}

.views-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Chart: horizontal bars, two metrics per guest (episodes + show coverage) */

.chart-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: -8px 0 14px;
}

.chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bar-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    outline: none;
}

.bar-label {
    grid-row: 1 / span 2;
    font-size: 14px;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-line {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 8px;
}

.metric-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
}

.bar-track {
    background: var(--series-1-track);
    border-radius: 0 4px 4px 0;
    height: 16px;
    display: flex;
    align-items: center;
    position: relative;
}

.bar-fill {
    background: var(--series-1);
    height: 16px;
    border-radius: 0 4px 4px 0;
    min-width: 2px;
}

.bar-fill.coverage-fill {
    background: var(--series-1-secondary);
}

.bar-row:focus .bar-fill,
.bar-row:hover .bar-fill {
    filter: brightness(1.1);
}

.bar-value {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table-view-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.table-view-link[hidden] {
    display: none;
}

.card h2 + .table-view-link {
    margin-top: 0;
}

.two-col-tables {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 900px) {
    .two-col-tables {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* Заголовок раздела + пояснение, вынесенные из .card — используется на
   /analytics/, чтобы отделить смысловой блок от таблиц с данными. */
.section-intro {
    margin: 40px 0 16px;
}

.section-intro h2 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--text-primary);
}

.section-intro .chart-hint {
    margin: 0;
}

.section-intro:first-child {
    margin-top: 0;
}

/* Tooltip */

.tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--text-primary);
    color: var(--surface-1);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    max-width: 240px;
    z-index: 10;
}

/* Категории шоу (web/js/common.js:SHOW_CATEGORIES) — свой цвет на каждую,
   чтобы категории считывались с первого взгляда в таблице и на карточке шоу. */

.badge-category-original {
    background: rgba(106, 27, 154, 0.12);
    color: #6a1b9a;
}

.badge-category-medium-quality {
    background: var(--series-1-track);
    color: var(--series-1);
}

.badge-category-tv-special {
    background: rgba(191, 111, 0, 0.14);
    color: #8a5000;
}

.badge-category-blogger {
    background: rgba(46, 125, 50, 0.14);
    color: #2e7d32;
}

.badge-age-rating {
    background: var(--gridline);
    color: var(--text-secondary);
    font-weight: 600;
}

.badge-release-year {
    background: var(--gridline);
    color: var(--text-secondary);
}

.overlap-guests {
    padding: 4px 0;
    line-height: 1.8;
}

/* Кнопка "Показать гостей" — последняя колонка таблицы пересечений, без
   этого правила растягивалась бы по ширине своей колонки и повисала слева
   от неё, а не у правого края таблицы. */
.overlap-action {
    text-align: right;
}

/* Раскрытая строка со списком общих гостей (.panel-row, см. base.css) в этой
   таблице визуально сливалась с обычными строками — заметный акцентный фон
   и полоса слева читаются как отдельная деталь-панель, а не ещё одна строка
   шоу. Стиль скопирован только для этой таблицы, чтобы не менять вид
   .panel-row в админских справочниках. */
#overlaps-table .panel-row td {
    background: var(--series-1-track);
    border-left: 3px solid var(--series-1);
}

/* Подвал (web/js/common.js:renderSiteFooter) — тёмный фон, три колонки ссылок
   (заголовок + ссылки), прижатые к левому краю контейнера, и служебная строка
   под ними. На узких экранах колонки переносятся. */
.site-footer {
    background: #37404a;
    color: #c3c9d1;
}

.site-footer-inner {
    max-width: var(--content-width-sm);
    margin: 0 auto;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    gap: 38px;
    font-size: 13px;
}

.site-footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 24px 100px;
}

.site-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.site-footer-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ced4da;
    margin-bottom: 2px;
}

.site-footer-column a {
    font-size: 0.875rem;
    color: #aab8c5;
    text-decoration: none;
}

.site-footer-column a:hover {
    color: #ced4da;
}

.site-footer-meta {
    color: #aab8c5;
}

/* Узкие экраны: промежуток между колонками меньше, чтобы они реже переносились. */
@media (max-width: 757px) {
    .site-footer-columns {
        gap: 24px 32px;
    }
}

/* Мобильные: колонки друг под другом по центру контейнера. */
@media (max-width: 600px) {
    .site-footer-columns {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .site-footer-column {
        align-items: center;
        text-align: center;
    }

    .site-footer-meta {
        text-align: center;
    }
}

@media (min-width: 900px) {
    .site-footer-inner {
        max-width: var(--content-width-md);
    }
}

/* Текст справа от колонок — только когда места хватает на все три колонки и
   сам текст; уже этого — текст под колонками (как на 768/1024). */
@media (min-width: 1280px) {
    .site-footer-inner {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }
}

@media (min-width: 1400px) {
    .site-footer-inner {
        max-width: var(--content-width-lg);
    }
}

/* Страница /analytics/episodes/: выбор шоу/выпуска и график замеров просмотров
   (web/js/analytics-episodes.js). Inline-SVG в пикселях текущей ширины
   контейнера — перерисовывается при ресайзе, поэтому подписи не масштабируются
   вместе с графиком и читаемы на мобильных. */

.episode-picker label {
    flex: 1 1 280px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.episode-picker select {
    width: 100%;
    min-width: 0;
}

.episode-picker select:disabled {
    opacity: 0.6;
}


.episode-heading h2 {
    margin: 0;
    font-size: 24px;
    overflow-wrap: anywhere;
}

/* Обёртки блоков на новых страницах аналитики: main — flex-колонка с gap 24px,
   но карточки лежат на уровень глубже, поэтому повторяем тот же ритм. */
#compare-result,
#episode-analytics,
#episode-history {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#compare-result[hidden],
#episode-analytics[hidden],
#episode-history[hidden] {
    display: none;
}

.stat-tile .stat-value.stat-value-small {
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
}

.snapshot-chart {
    position: relative;
    width: 100%;
}

.snapshot-chart-svg {
    display: block;
    max-width: 100%;
    touch-action: pan-y;
}

.snapshot-grid {
    stroke: var(--gridline);
    stroke-width: 1;
}

.snapshot-axis-label {
    fill: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.snapshot-line {
    fill: none;
    stroke: var(--series-1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.snapshot-point {
    fill: var(--series-1);
    stroke: var(--surface-1);
    stroke-width: 1.5;
}

.snapshot-point-active {
    stroke: var(--series-1);
    fill: var(--surface-1);
    stroke-width: 2.5;
}

.snapshot-tooltip {
    position: absolute;
    pointer-events: none;
    white-space: nowrap;
    background: var(--text-primary);
    color: var(--surface-1);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 10;
}

.snapshot-tooltip[hidden] {
    display: none;
}

.snapshot-table-scroll {
    max-height: 420px;
    overflow: auto;
}

/* Страница /analytics/compare/ (web/js/analytics-compare.js). */

.compare-show-head {
    white-space: normal;
}

.compare-similarity-value {
    font-size: 28px;
    font-weight: 600;
}

.compare-similarity .chart-hint {
    margin: 4px 0 12px;
}

.compare-shared-list {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.compare-metric {
    margin-bottom: 18px;
}

/* Заголовок группы полос («Среднее на выпуск» и т.д.) должен отличаться от
   названий шоу в строках ниже: крупнее, жирнее и основным цветом текста
   (названия шоу — 13px обычным весом), плюс разделитель между группами. */
.compare-metric-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.compare-metric + .compare-metric {
    padding-top: 14px;
    border-top: 1px solid var(--gridline);
}

.compare-metric:last-child {
    margin-bottom: 0;
}

.compare-bar-line {
    display: grid;
    grid-template-columns: minmax(80px, 200px) 1fr minmax(80px, auto);
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 13px;
}

.compare-bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-bar-track {
    display: block;
    height: 10px;
    background: var(--series-1-track);
    border-radius: 5px;
    overflow: hidden;
}

.compare-bar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.compare-bar-1 {
    background: var(--series-1);
}

.compare-bar-2 {
    background: var(--series-1-secondary);
}

.compare-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .compare-bar-line {
        grid-template-columns: 1fr minmax(70px, auto);
    }

    .compare-bar-name {
        grid-column: 1 / -1;
    }
}

/* Юридические документы (web/legal/*): длинный текст — читаемый размер,
   интервал между абзацами, заголовки разделов заметнее, чем у h2 карточек. */
.legal-document {
    font-size: 15px;
    line-height: 1.6;
}

.legal-document p {
    margin: 0 0 12px;
}

.legal-document .legal-meta {
    color: var(--text-secondary);
}

.legal-document section {
    margin-top: 24px;
}

.legal-document h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--text-primary);
}

.legal-document > :last-child,
.legal-document section > :last-child {
    margin-bottom: 0;
}

.legal-document h3 {
    margin: 20px 0 8px;
    font-size: 15px;
    color: var(--text-primary);
}

.legal-document ul,
.legal-document ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.legal-document li {
    margin-bottom: 4px;
}