/* ============================================================
   ТОПЫ — три реестра гильдии
   ============================================================
   Разбор аналогов (osu! rankings, chess.com, Duolingo Leagues, AniList
   Top-100, правила Yu-kai Chou) дал три устойчивых вывода:

   • ЛАДДЕР ЛЮДЕЙ — это ТАБЛИЦА, а не сетка карточек. Ценность строки в
     сравнении, сравнение требует выровненных колонок и моноширинных цифр.
     Ни у osu!, ни у chess.com нет ни подиума, ни медалей — место говорит
     номер. У нас металл уже занят под ранг гильдии, поэтому золото/серебро
     за место было бы вторым значением того же материала: запрещено.
   • КОНТЕНТНЫЙ ТОП — сетка обложек, номер приколот к углу (AniList). Арт
     работает сам, номер не спорит с ним за место.
   • СВОЯ ПОЗИЦИЯ — всегда отдельным блоком сверху, и сравнение обязано быть
     подписано: с кем именно сравнивают (Duolingo Leagues → сегментация по
     рангу; глобальный ладдер мотивирует единицы и гасит остальных).

   Материалы отсюда же: тёмное — помещение, светлое — предмет в руках,
   латунь = интеракция, металл = ранг. Перепись гильдии рисуется её же
   металлами (--plate-*): состав пула виден одним взглядом.
   Зависит от tokens.css + components.css (.filter-chip, .paper, .button).
   ============================================================ */

.tops-page {
  padding-bottom: var(--s-20);
}


/* ── Колонтитул раздела ─────────────────────────────────────────────────────
   Это заголовок документа, а не панель сайта: ни липкости, ни лака. */
.tops-mast {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-14) 0 var(--s-8);
  text-align: center;
}
.tops-mast__seal {
  display: block;
  width: var(--s-10);
  height: var(--s-10);
  color: var(--brass);
  opacity: 0.75;
}
.tops-mast__seal svg { width: 100%; height: auto; display: block; fill: currentColor; }
.tops-mast__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-5);
  font-weight: var(--w-normal);
  line-height: var(--lh-tight);
}
.tops-mast__lede {
  margin: 0;
  max-width: 54ch;
  font-size: var(--t-1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* ── Переключатель реестров ────────────────────────────────────────────────
   За раз виден один реестр (решение GDD): три рейтинга стопкой — это не
   страница, а свалка. Примитив тот же, что у фильтров Хроник. */

.regs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-subtle);
}

/* ⚠️ Явный display перебивает [hidden] из UA-таблицы: без этого правила все
   три реестра видны сразу, стопкой (та же грабля уже ловилась в архиве). */
.register[hidden] { display: none; }
.register { display: grid; gap: var(--s-10); }

.register__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-3);
  font-weight: var(--w-normal);
  line-height: var(--lh-snug);
}
.register__note {
  margin: var(--s-2) 0 0;
  max-width: 62ch;
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.register__empty {
  margin: 0;
  padding: var(--s-8) var(--s-6);
  text-align: center;
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-3);
  background: var(--bg-panel);
  border: 1px solid var(--line-subtle);
}

/* ── Своя позиция ──────────────────────────────────────────────────────────
   Отдельным блоком сверху и всегда: правило всех разобранных ладдеров.
   Здесь же подписано, с кем идёт сравнение — иначе число места не значит
   ничего. */

.own {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
}
.own[hidden] { display: none; }
.own__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.own__where {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t--1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.own--guest {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* ── Перепись гильдии ──────────────────────────────────────────────────────
   Не рейтинг: состав пула. Доля ранга залита ЕГО ЖЕ металлом — так шкала
   читается составом гильдии, а не абстрактной диаграммой. */

.census {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-1);
}
.census__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--bg-panel);
  border-left: 2px solid transparent;
}
.census__row--you {
  background: var(--bg-hover);
  border-left-color: var(--accent);
}
.census__body { display: grid; gap: var(--s-2); min-width: 0; }
.census__name {
  font-size: var(--t-0);
  line-height: var(--lh-flat);
  color: var(--ink-2);
}
.census__you {
  margin-left: var(--s-2);
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
.census__bar {
  display: block;
  height: var(--s-1);
  background: var(--bg-inset);
}
.census__fill {
  display: block;
  height: 100%;
  min-width: 1px;
  background-image: var(--plate-g);
}
.census__row[data-rank="F"] .census__fill { background-image: var(--plate-f); }
.census__row[data-rank="E"] .census__fill { background-image: var(--plate-e); }
.census__row[data-rank="D"] .census__fill { background-image: var(--plate-d); }
.census__row[data-rank="C"] .census__fill { background-image: var(--plate-c); }
.census__row[data-rank="B"] .census__fill { background-image: var(--plate-b); }
.census__row[data-rank="A"] .census__fill { background-image: var(--plate-a); }
.census__row[data-rank="S"] .census__fill { background-image: var(--plate-s); }
.census__n {
  font-size: var(--t-1);
  line-height: var(--lh-flat);
  color: var(--ink);
}
/* Пустой ранг — это ноль, а не «чуть-чуть»: полоску убираем совсем, иначе
   min-width сливы рисует засечку и ранг выглядит занятым. */
.census__row--zero .census__n { color: var(--ink-4); }
.census__row--zero .census__fill { display: none; }

/* ── Пояснение метрики ─────────────────────────────────────────────────────
   Игрок не обязан догадываться, что именно считают и что за это будет.
   Врезка на латунной кромке — та же деталь, что по краю стойки в зале. */

.notice {
  padding: var(--s-5) var(--s-6);
  background: var(--bg-raised);
  box-shadow: var(--sh-brass-rule);
}
.notice__row {
  margin: 0;
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.notice__row + .notice__row { margin-top: var(--s-3); }
.notice__key {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ── Лидер реестра: лист охоты ─────────────────────────────────────────────
   Единственное место страницы, где арт крупный. Портрет врезан золочёной
   нитью (--sh-gilt), номер — оттиск в углу листа. Баннера со свечением тут
   нет намеренно: это учётный документ, а не афиша. */

.leader {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-8);
  width: min(880px, 100%);
  margin-inline: auto;
  padding: var(--s-8);
  clip-path: var(--clip-leaf);
  /* Диагональной «полосы блеска» из листка главной здесь НЕТ намеренно: на
     широком и низком листе она читается брашированным металлом, а не
     бумагой. Остаются свет от лампы сверху-слева и тон бумаги. */
  background:
    radial-gradient(130% 100% at 12% -16%, var(--leaf-hi) 0%, rgba(246,236,211,0) 56%),
    linear-gradient(154deg, var(--leaf) 0%, #d3c4a0 54%, var(--leaf-lo) 100%);
  filter: var(--sh-leaf);
}
.leader__art {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: var(--sh-gilt);
  background: var(--wall-deep);
}
.leader__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.leader__kick {
  display: block;
  font-size: var(--t--2);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--leaf-ink-3);
}
.leader__name {
  margin: var(--s-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-4);
  font-weight: var(--w-normal);
  line-height: var(--lh-tight);
}
.leader__sub {
  margin: var(--s-2) 0 0;
  font-size: var(--t-0);
  line-height: var(--lh-body);
  color: var(--leaf-ink-2);
}
.leader__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--leaf-line);
}
.leader__fact { margin: 0; }
.leader__fact dt {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--leaf-ink-3);
}
.leader__fact dd {
  margin: var(--s-1) 0 0;
  font-size: var(--t-2);
  line-height: var(--lh-flat);
  color: var(--leaf-ink);
}
.leader__no {
  position: absolute;
  top: var(--s-5);
  right: var(--s-6);
  font-size: var(--t-3);
  line-height: var(--lh-flat);
  color: var(--leaf-ink-3);
}
.leader__go { margin-top: var(--s-6); }

/* ── Реестр строк ──────────────────────────────────────────────────────────
   Имя из словаря компонентов (`.roster`): порядковый моно + миниатюра +
   тело. Строка, а не карточка: при трёх записях сетка карточек читается
   тремя пустыми местами, а реестр из трёх строк — реестром из трёх строк. */

.roster {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  border-block: 1px solid var(--line-subtle);
}
/* Разделитель — граница строки, а не зазор сетки: волосяной gap токеном не
   выражается (шкала отступов начинается с 4px), а рисовать его подложкой
   значит городить фон ради одной линии. */
.roster > li + li { border-top: 1px solid var(--line-subtle); }
.roster__row {
  display: grid;
  grid-template-columns: var(--s-8) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--bg-panel);
  text-decoration: none;
  border-left: 2px solid transparent;
}
/* У автора вместо миниатюры — жетон: ранг приходит в ответе /tops/authors,
   значит оправа не выдумана (правило словаря компонентов). */
.roster--people .roster__row { grid-template-columns: var(--s-8) auto minmax(0, 1fr) auto; }
.roster__row--you { border-left-color: var(--accent); background: var(--bg-hover); }
@media (hover: hover) {
  a.roster__row:hover { background: var(--bg-hover); }
}
.roster__n {
  font-size: var(--t-0);
  line-height: var(--lh-flat);
  color: var(--ink-4);
  text-align: right;
}
.roster__thumb {
  width: var(--s-10);
  height: var(--s-14);
  overflow: hidden;
  background: var(--wall-deep);
  box-shadow: var(--sh-cell);
}
.roster__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.roster__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-1);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.roster__meta {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t--1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.roster__n-side {
  display: grid;
  justify-items: end;
  gap: var(--s-1);
}
.roster__value {
  font-size: var(--t-2);
  line-height: var(--lh-flat);
  color: var(--ink);
}
.roster__unit {
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
/* Отметка редакции — словом, без глифа: значок на этом кегле читался пятном
   (поймано на бейдже в архиве). */
.roster__pick {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-label);
  font-size: var(--t--2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

@media (max-width: 760px) {
  .leader {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    padding: var(--s-6);
  }
  .leader__art { width: min(200px, 60%); }
  .leader__no { top: var(--s-3); right: var(--s-4); }
  /* Обе разновидности строк — три колонки: номер, знак (миниатюра или
     жетон), тело. Числовая колонка уходит ПОД тело второй строкой: рядом с
     именем на 360px она не помещается, а перенос по буквам читается хуже. */
  .roster__row,
  .roster--people .roster__row {
    grid-template-columns: var(--s-6) auto minmax(0, 1fr);
    gap: var(--s-3);
  }
  .roster__n-side {
    grid-column: 3 / -1;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    align-items: baseline;
    gap: var(--s-2);
  }
  .roster__pick { margin-top: var(--s-0); }
  .roster__thumb { width: var(--s-8); height: var(--s-10); }
  .own { grid-template-columns: auto minmax(0, 1fr); }
}