/* Публичная страница результатов — компоненты, которых нет больше нигде
   (в отличие от .card/.badge/.btn/table.sheet/.pill-row/.card-label — те уже
   в tokens.css, общие). Подключается ПОСЛЕ bracket.css — важно для
   .cat-bracket-body ниже, где сетка намеренно демотирована до второстепенной
   детали внутри карточки категории, и эти переопределения должны побеждать
   правила самого bracket.css при равной специфичности.

   Ничего здесь НЕ трогает admin/index.html — тот bracket.css подключает, но
   этот файл нет, поэтому демотирующие правила сюда, а не в bracket.css
   (см. bracket.css — там только правки читаемости, нужные и админке тоже). */

.page-results .container { max-width: 1180px; }

/* ===== Шапка турнира ===== */
.res-head { margin-bottom: var(--sp-2); }
.res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; color: var(--ink-soft); font-size: 0.92rem; margin: -0.3em 0 var(--sp-2); }
.res-meta .dot { opacity: 0.5; }
.res-actions { margin-top: var(--sp-2); }

/* ===== Командный зачёт клубов ===== */
#champions { margin: var(--sp-4) 0; }
/* Числовые колонки (#, медали, очки) — заголовки выравниваются так же, как
   сами числа под ними (найдено на превью: раньше заголовки были левым краем,
   цифры правым — колонки "съезжали" по вертикали). */
#champions table.sheet th.num, #champions table.sheet td.num { text-align: right; }
#champions .champ-club { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#champions .champ-medals { display: inline-flex; gap: 0.5em; white-space: nowrap; }

/* ===== Панель поиска и переходов по возрастным блокам ===== */
.cat-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-m);
  position: sticky; top: 68px; z-index: 10;
}
#catFilter { flex: 1 1 220px; min-width: 0; }
/* Базовое правило для input в tokens.css красит фон захардкоженным светлым
   (#fffdf9, не переменной) — тот же пробел уже был найден и починен для
   #searchInput на странице статистики тем же приёмом (id, не общий селектор:
   этого единственного инпута на странице достаточно). */
html[data-theme="dark"] #catFilter { background: #1c1c20; }
.cat-count { color: var(--ink-soft); font-size: 0.82rem; white-space: nowrap; margin: 0; }
.age-index { display: flex; flex-wrap: wrap; gap: 0.4em; width: 100%; }
.age-chip {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; padding: 0.3em 0.8em;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer;
}
.age-chip:hover, .age-chip:focus-visible { border-color: var(--shido); color: var(--shido); outline: none; }

/* ===== Группировка по возрастным блокам ===== */
.age-group-title {
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--ink);
  text-transform: none; margin: var(--sp-5) 0 var(--sp-2); padding-bottom: 0.3em;
  border-bottom: 2px solid var(--line-strong); scroll-margin-top: 130px;
}
.age-group-title:first-of-type { margin-top: var(--sp-3); }
.age-group-title[hidden] { display: none; }

.cat-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.cat-card { scroll-margin-top: 130px; }
.cat-card[hidden] { display: none !important; }
.cat-head { margin-bottom: var(--sp-2); }
.cat-title { font-family: var(--font-display); color: var(--mat); font-size: 1.2rem; font-weight: 500; margin: 0 0 0.15em; }
.cat-sub { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }

/* ===== Подиум — герой карточки категории =====
   Держится на четырёх каналах разом (см. план): размер/насыщенность шрифта,
   слоистость поверхности, семантический цвет медали, разделение ролей
   (имя — самое сильное, что есть на карточке; клуб — заведомо второстепенный). */
.podium { list-style: none; margin: 0 0 0.3em; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.podium-row { display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0.6em; border-radius: var(--radius-s); }
.podium-row.is-1 { background: var(--medal-1-bg); border-left: 3px solid var(--medal-1-line); }
.podium-row.is-2 { border-left: 3px solid var(--medal-2-line); }
.podium-row.is-3 { border-left: 3px solid var(--medal-3-line); }
.podium-place {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; flex-shrink: 0;
}
.is-1 .podium-place { background: var(--medal-1-bg); color: var(--medal-1-fg); border: 1.5px solid var(--medal-1-line); }
.is-2 .podium-place { background: var(--medal-2-bg); color: var(--medal-2-fg); border: 1.5px solid var(--medal-2-line); }
.is-3 .podium-place { background: var(--medal-3-bg); color: var(--medal-3-fg); border: 1.5px solid var(--medal-3-line); }
.podium-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5em; min-width: 0; }
.podium-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.is-1 .podium-name { font-weight: 700; font-size: 1.05rem; }
.is-2 .podium-name, .is-3 .podium-name { font-weight: 600; font-size: 0.92rem; }
.podium-club { font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.podium-rest { font-size: 0.78rem; color: var(--ink-soft); margin: 0.3em 0 0; }
.podium-pending { margin: 0 0 0.4em; }

/* ===== Сетка — демотирована до раскрывающейся детали =====
   <details> ставится ЗДЕСЬ, в results.js — намеренно не в самом
   bracket-render.js: печать протоколов в админке идёт через тот же общий
   модуль (public/admin/index.html, .brk-print-card), и закрытая <details>
   там просто не попала бы в печать. Это решение живёт только на публичной
   странице результатов. */
.cat-bracket { margin-top: var(--sp-2); }
.cat-bracket summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; padding: 0.3em 0;
}
.cat-bracket summary::-webkit-details-marker { display: none; }
.cat-bracket summary::before { content: '▸'; display: inline-block; transition: transform 150ms ease; font-size: 0.8em; }
.cat-bracket[open] summary::before { transform: rotate(90deg); }
.cat-bracket summary:hover { color: var(--shido); }
.cat-bracket summary:focus-visible { outline: 2px solid var(--shido); outline-offset: 3px; border-radius: 3px; }
.cat-bracket-body { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--sp-2); margin-top: var(--sp-1); }
@media (prefers-reduced-motion: no-preference) {
  .cat-bracket[open] .cat-bracket-body { animation: fade-in 140ms ease-out; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Внутри демотированной сетки заголовок и подиум самого bracket-render.js не
   рисуются (см. opts.header:false/podium:false в results.js) — на всякий
   случай подстраховка на CSS-уровне, если где-то забудут передать опцию. */
.cat-bracket-body > .brk-category > .brk-category-header,
.cat-bracket-body > .brk-category > .brk-podium { display: none; }

/* Подгруппы (пул A / пул Б) — в узкой панели-детали не помещаются рядом:
   таблица подгруппы (см. bracket.css, min-width:520px, 9 колонок) не
   влезает в половину и без демотирования и без того тесной панели детали —
   получался горизонтальный скролл (найдено пользователем на превью). Внутри
   этой панели раскладываем подгруппы одну под другой, каждая получает всю
   ширину панели. Админка (нет .cat-bracket-body) не затронута — там подгруппы
   по-прежнему рядом, места достаточно. */
.cat-bracket-body .brk-pools { flex-direction: column; }

@media (max-width: 640px) {
  .cat-toolbar { top: 56px; }
  #champions .champ-club { max-width: 90px; }
}