/*
 * Discover Intelligence (2.txt §52–§58, §66–§71).
 * Экран плотный по данным, но светлый: тёмный только верхний баннер,
 * ниже — белые панели на очень светлом фоне. HEX здесь нет, всё из токенов.
 */

/* --- Баннер --- */

.dhero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 96px;
    background: var(--brand-900);
    color: var(--text-on-brand);
}

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

.dhero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(26, 44, 114, .95) 0%,
        rgba(26, 44, 114, .86) 42%,
        rgba(26, 44, 114, .46) 78%,
        rgba(26, 44, 114, .22) 100%);
}

.dhero__inner {
    position: relative;
}

.dhero__kicker {
    color: var(--cyan-300);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dhero__title {
    margin-top: 10px;
    color: var(--text-on-brand);
}

.dhero__text {
    margin-top: 14px;
    max-width: 68ch;
    color: var(--text-on-brand-muted);
    font-size: var(--fs-body);
}

.dhero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    color: var(--text-on-brand-muted);
    font-size: var(--fs-xs);
}

.dhero__meta span + span::before {
    content: '·';
    margin-right: 20px;
}

/* --- Каркас страницы --- */

.discover {
    padding-bottom: var(--section-gap);
}

/* KPI наезжают на баннер — как ряд карточек на главной. */
.discover__kpi {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: -56px;
}

.discover__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--gap);
    margin-top: var(--gap);
}

.discover__panel {
    padding: var(--card-pad);
}

.discover__panel + .discover__panel {
    margin-top: var(--gap);
}

.discover__grid .discover__panel + .discover__panel {
    margin-top: 0;
}

.discover__panel h2 {
    font-size: var(--fs-h3);
}

.discover__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm);
}

.discover__note {
    margin-top: 6px;
    max-width: 78ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.discover__hint {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

/* --- Таблица жанров --- */

.gtable {
    margin-top: 16px;
}

.gtable__head,
.gtable__row {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.4fr) minmax(90px, 1.6fr) 92px 92px 88px 108px 84px;
    align-items: center;
    gap: 12px;
}

.gtable__head {
    padding: 0 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.gtable__row {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.gtable__row:last-child {
    border-bottom: 0;
}

.gtable__row:hover {
    background: var(--bg-soft);
    border-radius: var(--radius-xs);
}

.gtable__num {
    text-align: right;
    justify-self: end;
}

.gtable__genre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.gtable__genre a:hover {
    color: var(--primary);
}

.gtable__track {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    overflow: hidden;
}

.gtable__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary);
}

.gtable__value {
    font-weight: 700;
}

.gtable__pair,
.gtable__comp {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

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

/* Подпись ячейки нужна только там, где шапка таблицы скрыта. */
.gtable__cap {
    display: none;
}

.gtable__row .is-up { color: var(--success); font-weight: 700; }
.gtable__row .is-down { color: var(--danger); font-weight: 700; }

/* --- Кольцо --- */

/* Кольцо короче таблицы жанров — держим его в поле зрения при прокрутке. */
.discover__panel--side {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 16px);
}

.discover__donut {
    display: flex;
    justify-content: center;
    margin: 18px 0 4px;
}

.donut {
    width: 200px;
    height: 200px;
}

.donut__arc {
    fill: none;
}

.donut__arc--1 { stroke: var(--primary); }
.donut__arc--2 { stroke: var(--purple); }
.donut__arc--3 { stroke: var(--cyan); }
.donut__arc--4 { stroke: var(--danger); }
.donut__arc--5 { stroke: var(--warning); }
.donut__arc--rest { stroke: var(--border); }

.legend {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.legend__item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.legend__item:last-child {
    border-bottom: 0;
}

.legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend__dot.donut__arc--1 { background: var(--primary); }
.legend__dot.donut__arc--2 { background: var(--purple); }
.legend__dot.donut__arc--3 { background: var(--cyan); }
.legend__dot.donut__arc--4 { background: var(--danger); }
.legend__dot.donut__arc--5 { background: var(--warning); }
.legend__dot.donut__arc--rest { background: var(--border); }

.legend__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.legend__label a:hover {
    color: var(--primary);
}

.legend__value {
    font-weight: 700;
}

/* --- Концентрация рынка --- */

.share {
    display: flex;
    height: 14px;
    margin-top: 18px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--bg-soft);
}

.share__part {
    display: block;
    height: 100%;
}

.share__part--top10 { background: var(--primary); }
.share__part--mid { background: var(--cyan); }
.share__part--tail { background: var(--bg-active); }

.share__legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-sm);
    margin-top: 16px;
}

.share__stat {
    display: grid;
    grid-template-columns: 10px auto;
    align-items: center;
    gap: 6px 10px;
}

.share__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.share__value {
    font-size: 22px;
    font-weight: 800;
}

.share__label {
    grid-column: 2;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* --- Прорывы --- */

.breakouts {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.breakout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 140px;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
}

.breakout:last-child {
    border-bottom: 0;
}

.breakout__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.breakout__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.breakout__title:hover {
    color: var(--primary);
}

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

.breakout__meta a:hover {
    color: var(--primary);
}

.breakout__growth {
    text-align: right;
    font-size: var(--fs-body);
    font-weight: 800;
}

.breakout__growth.is-up { color: var(--success); }

.breakout__peak {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 700;
}

/* --- Как мы считаем --- */

.discover__method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: 16px;
}

.discover__method-grid h3 {
    font-size: var(--fs-sm);
    font-weight: 800;
}

.discover__method-grid p {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* --- Страница жанра --- */

/* У жанра нет тёмного баннера, наезжать KPI не на что. */
.discover--genre .discover__kpi {
    margin-top: var(--gap);
}

.ghero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--gap);
    margin-top: 8px;
}

.ghero__title {
    margin-top: 12px;
    font-size: var(--fs-h1);
    line-height: 1.1;
}

.ghero__lead {
    margin-top: 12px;
    max-width: 62ch;
    color: var(--text-secondary);
    line-height: 1.65;
}

.ghero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.ghero__info {
    padding: var(--card-pad);
}

/* Топ островов — та же строка, что и в прорывах, плюс место. */
.breakout--ranked {
    grid-template-columns: 32px minmax(0, 1fr) 110px 140px;
}

.breakout__rank {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 800;
}

/* --- Авторы жанра --- */

.gcrew {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.gcrew__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.gcrew__item:last-child {
    border-bottom: 0;
}

.gcrew__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.gcrew__name:hover {
    color: var(--primary);
}

.gcrew__meta {
    grid-column: 1;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.gcrew__value {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    font-weight: 800;
}

/* --- Как в жанре играют --- */

.discover__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* --- Конкуренция --- */

.gscore {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 18px;
}

.gscore__value {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-900);
}

.gscore__label {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.factors {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.factor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0;
}

.factor__title {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.factor__value {
    grid-row: 1 / span 2;
    grid-column: 2;
    text-align: right;
    font-weight: 700;
    font-size: var(--fs-sm);
}

.factor .gtable__track {
    grid-column: 1;
}

/* --- Другие жанры --- */

.gchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.gchips__num {
    color: var(--text-muted);
    font-weight: 700;
}

/* --- Адаптив --- */

@media (max-width: 1200px) {
    .ghero {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .discover__grid .discover__panel + .discover__panel {
        margin-top: var(--gap);
    }

    .discover__panel--side .discover__donut {
        margin-top: 8px;
    }
}

@media (max-width: 1024px) {
    .discover__kpi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: -40px;
    }

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

    .ghero__title {
        font-size: var(--fs-h2);
    }
}

@media (max-width: 768px) {
    .dhero {
        padding: 32px 0 72px;
    }

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

    /* Таблица жанров превращается в карточки (2.txt §204). */
    .gtable__head {
        display: none;
    }

    /* Явная сетка: имя и аудитория в первой строке, полоса во второй,
       четыре показателя с подписями — сами по две в ряд. */
    .gtable__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 12px;
        padding: 16px 4px;
    }

    .gtable__genre {
        grid-row: 1;
        grid-column: 1;
        font-size: var(--fs-body);
    }

    .gtable__value {
        grid-row: 1;
        grid-column: 2;
        font-size: var(--fs-body);
    }

    .gtable__bar {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .gtable__row > .gtable__num:not(.gtable__value) {
        justify-self: start;
        text-align: left;
    }

    .gtable__pair,
    .gtable__comp {
        align-items: flex-start;
    }

    .gtable__cap {
        display: block;
        color: var(--text-muted);
        font-size: var(--fs-xs);
        font-weight: 600;
    }

    .share__legend {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .breakout {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }

    .breakout__peak {
        grid-column: 2;
        flex-direction: row;
        gap: 6px;
        align-items: baseline;
        font-size: var(--fs-sm);
    }

    .discover__method-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    /* Строка топа островов складывается так же, как строка прорыва. */
    .breakout--ranked {
        grid-template-columns: 24px minmax(0, 1fr) auto;
    }

    .breakout--ranked .breakout__peak {
        grid-column: 2 / -1;
    }

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

    .factor {
        grid-template-columns: minmax(0, 1fr) 96px;
    }
}