/* popularity.css — «Главное первым» (docs/studio-features/19-popularity-and-
   hidden-paths.md, §4): ★ 14 px в углу обложки, полоска 3 px под обложкой,
   переключатель порядка, легенда, строка LB карточки, «♪ самый слушаемый».
   Нет данных — нет ни ★, ни полоски, ни её дорожки (разметки нет вовсе).
   ★ — --accent-text на подложке карточки: контраст ≥ 4,5:1; полоска —
   сплошной --accent, без дорожки: 3,8:1 к карточке и 4,1:1 к странице (на
   60 % было 2,1:1 — меньше 3:1 для нетекстовых отметок, ревью 06.10).
   Ничего не анимируется.
   «Тайные тропы» — полка (4 колонки на десктопе, 2 на iPad, 1 на телефоне),
   значок «тропа» на плитке, строка карточки. */

/* Отметки поверх плитки: коробка — размер обложки плитки, сама не ловит нажатий. */
.pop-mk { position: absolute; pointer-events: none; }
.pop-star {
    position: absolute; top: 3px; left: 3px; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: 14px; line-height: 1;
    color: var(--accent-text); background: var(--bg-card); background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: 0 0 0 1px var(--accent-line, var(--border));
}
.pop-bar {
    position: absolute; left: 0; top: calc(100% + 2px); height: 3px; min-width: 2px; border-radius: 2px;
    background: var(--accent);
}

/* «По времени» и «Созвездие»: обложка 72 px (телефон — 56) с полями плитки 8 px (6). */
.tree-tile .pop-mk { left: 8px; top: 8px; width: 72px; height: 72px; }
.ti-cov .pop-mk { inset: 0; z-index: 2; }
.ti-cov .pop-bar { top: auto; bottom: 0; border-radius: 0; }
/* «Карьеры»: плитка 96 / 116 / 144 px, поле 4 px; телефон — строка с обложкой 72 / 96. */
.tc-tile .pop-mk { left: 4px; top: 4px; width: 96px; height: 96px; }
.tc-t-mid .tc-tile .pop-mk { width: 116px; height: 116px; }
.tc-t-big .tc-tile .pop-mk { width: 144px; height: 144px; }
.tc-tile .pop-bar { top: calc(100% + 0px); }
.tc-pli { position: relative; }
.tc-phone .tc-pli .pop-mk { left: 8px; top: 6px; width: 72px; height: 72px; }
.tc-phone .tc-pfew .tc-pli .pop-mk { width: 96px; height: 96px; }
/* У ★ карьер справа сверху уже значок вида — ★ слева. */

.pop-year { font-family: var(--font-mono); color: var(--text-mid, var(--text)); }
.tree-tiles.pop-grid { margin: 0 0 10px; }

/* Слот шапки: переключатель «По годам / Сначала главное» и легенда.
   flex-start — переключатель по своим кнопкам, а не пустая «таблетка» во
   всю ширину (ревью 06.10: 640–1 110 px при кнопках 83 + 131). */
.pop-slot:empty { display: none; }
.pop-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 8px; }
.pop-order { flex-wrap: wrap; }
.pop-legend-p { margin: 0; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.pop-legend a, .pop-lb a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Карточка древа: «ListenBrainz: 392 слушателя · 1 530 прослушиваний ↗». */
.pop-lb { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }

/* Страница человека: под карточкой работы — полоска своей строкой во всю
   ширину карточки (одна дорожка у всех карточек сетки: длиннее — значит
   слушали больше), под ней ★ словом и число. Высота строки держится с первой
   отрисовки — и у пустой .pop-work-empty, пока чисел нет: сетка не прыгает,
   подписи ролей на одной высоте (ревью 06.10); две строки подписи — на
   узкой карточке «★ главное» и число переносятся. */
.pop-person-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 10px; }
.pop-work {
    display: flex; flex-direction: column; gap: 4px; min-height: 43px; margin-top: 4px;
    font-size: 12px; line-height: 18px; color: var(--text-dim);
}
.pop-work .pop-bar-line { position: relative; display: block; flex: 0 0 auto; width: 100%; height: 3px; }
.pop-work .pop-bar { top: 0; }
.pop-work-t { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.pop-star-chip {
    padding: 0 6px; border: 1px solid var(--accent-line, var(--accent)); border-radius: var(--radius-pill);
    color: var(--accent-text); font-size: 11px; white-space: nowrap;
}
.pop-n { white-space: nowrap; }

/* Паспорт: «♪ самый слушаемый» в строке трека альбома каталога. */
.tr-pop { margin-top: 2px; font-size: 11px; color: var(--accent-text); }
.pop-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── «Тайные тропы» (§2, §4): полка под шапкой вида, 4 / 2 / 1 колонки. ── */
.trails {
    margin: 0 0 18px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); min-width: 0;
}
.trails-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.trails-title { margin: 0; font-size: 15px; color: var(--text-strong); }
.trails-fold {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0;
    background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.trails-arrow { color: var(--text-dim); }
.trails-n { color: var(--text-dim); font-family: var(--font-mono); font-weight: 400; font-size: 13px; }
.trails-radio { margin-left: auto; }
.trails-sub, .trails-mode, .trails-nb-sub { margin: 0; flex-basis: 100%; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.trails-mode { margin: 8px 0 0; color: var(--text-mid, var(--text)); }
.trails-list {
    list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trails-item { min-width: 0; }
.trails-card {
    display: flex; gap: 10px; align-items: flex-start; width: 100%; height: 100%; padding: 8px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
    color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.trails-card:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.trails-card:focus-visible, .trails-fold:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.trails-cover {
    width: 72px; height: 72px; flex: 0 0 72px; border-radius: var(--radius-sm); object-fit: cover;
    background: var(--bg-elev);
}
.trails-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 22px; }
.trails-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.trails-t { font-weight: 600; color: var(--text-strong); font-size: 14px; unicode-bidi: plaintext; }
.trails-a { color: var(--text-mid, var(--text)); font-size: 13px; unicode-bidi: plaintext; }
.trails-who, .trails-when { color: var(--text-dim); font-size: 12px; }
.trails-gap { color: var(--text); font-size: 12px; }
.trails-few {
    align-self: flex-start; margin-top: 2px; padding: 0 6px; border: 1px solid var(--border);
    border-radius: var(--radius-pill); font-size: 11px; color: var(--text-mid, var(--text)); white-space: nowrap;
}
.trails-more { margin-top: 8px; }
.trails-nb { margin-top: 12px; }
.trails-nb-h { margin: 0 0 4px; font-size: 14px; color: var(--text-strong); }
.trails-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.trails-chip {
    max-width: 100%; padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: 13px; overflow-wrap: anywhere;
}
.trails-src { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }
.trails-src a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.trails-wait { margin: 0 0 14px; font-size: 13px; color: var(--text-dim); }
.trails-card-line { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
/* Значок «тропа» на плитке вида — правый верхний угол обложки (слева — ★). */
.trails-mk {
    position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: 13px; line-height: 1;
    color: var(--accent-text); background: var(--bg-card); box-shadow: 0 0 0 1px var(--border);
}
.tree-tile .trails-mk { left: 57px; top: 11px; }
/* «Созвездие»: под ★ слева сверху — внизу слева бирка «продюсер», справа
   сверху ✓ ♥ (ревью 06.10: на обложке 84 px iPad ⤳ закрывал «р» бирки). */
.ti-cov .trails-mk { left: 3px; top: 26px; z-index: 2; }
.ti-trails, .trails-ti { margin: 0 0 16px; }

@media (max-width: 1179px) { .trails-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .trails-list { grid-template-columns: minmax(0, 1fr); }
    .trails-radio { width: 100%; margin-left: 0; order: 3; }
}
@media (max-width: 599px) {
    .tree-tile .pop-mk { left: 6px; top: 6px; width: 56px; height: 56px; }
    .pop-star { width: 18px; height: 18px; font-size: 13px; }
    .tree-tile .trails-mk { left: 41px; top: 9px; width: 18px; height: 18px; }
    .trails { padding: 10px; }
    .trails-cover { width: 56px; height: 56px; flex: 0 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .pop-mk, .pop-bar, .pop-star, .trails-card { transition: none; animation: none; }
}