/*
 * Чарт: оформление.
 *
 * Шрифты свои НЕ грузим — Bitter и Golos Text ставит модуль «Типографика».
 * Чужих адресов в этом файле нет ни одного (значки — свой SVG в разметке).
 *
 * ТЁМНОЕ ОФОРМЛЕНИЕ ИДЁТ ЗА ТЕМОЙ: единственный переключатель —
 * body[data-theme="dark"], так это делает Foxiz. Системную настройку читателя
 * здесь НЕ слушаем сознательно (объяснение — в шапке render.php): на теме без
 * тёмного оформления она перекрашивала текст блока в светлый, а страница
 * оставалась белой, и получалось 1,6:1.
 *
 * ЦВЕТА ПОСЧИТАНЫ, А НЕ ПОДОБРАНЫ НА ГЛАЗ (references/ui.md, порог 4,5:1 для
 * текста и 3:1 для нетекстового):
 *   чернила   #0E1F3A по бумаге #FAF7F0 — 14,3:1
 *   пригашено #5C6880 по бумаге         —  5,24:1   (не #6C7890: тот 4,15:1)
 *   золото-текст #7A5A1E по бумаге      —  5,93:1
 *   золото-линия #A87C33                —  3,51:1   (у заливки #B68A3E 2,93:1 —
 *                                                    для фигуры звезды мало)
 *   подпись по золотой заливке #B68A3E — чернилами, 5,25:1 (не белым: 3,14:1)
 */

.vfm-chart {
  --vfm-chart-paper: #faf7f0;
  --vfm-chart-panel: #fffdf8;
  --vfm-chart-ink: #0e1f3a;
  --vfm-chart-muted: #5c6880;
  --vfm-chart-line: #e2dbcd;
  --vfm-chart-gold-text: #7a5a1e;
  --vfm-chart-star-on: #a87c33;
  --vfm-chart-star-off: #5c6880;
  --vfm-chart-focus: #33619e;
  --vfm-chart-bad: #7a2233;

  box-sizing: border-box;
  margin: 0 0 2rem;
  padding: 1.25rem;
  background: var(--vfm-chart-paper);
  color: var(--vfm-chart-ink);
  border: 1px solid var(--vfm-chart-line);
  border-radius: 10px;
}

.vfm-chart *,
.vfm-chart *::before,
.vfm-chart *::after { box-sizing: border-box; }

.vfm-chart__head {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--vfm-chart-ink);
}

.vfm-chart__lead,
.vfm-chart__note {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--vfm-chart-muted);
}

.vfm-chart__note { color: var(--vfm-chart-bad); }

.vfm-chart__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vfm-chart__item {
  display: grid;
  /* minmax(0, 1fr), а не 1fr: иначе длинное слово в названии песни растягивает
     колонку и выдавливает сетку за карточку. */
  grid-template-columns: 2.75rem 120px minmax(0, 1fr);
  /* Звёзды и итог — СВОИ ячейки, а не часть колонки текста: ряд из пяти звёзд
     по 44 точки несжимаем (220 точек), и на узком экране он обязан встать
     строкой во всю ширину карточки. См. тот же разбор в render.php. */
  grid-template-areas:
    "place cover body"
    ".     .     stars"
    ".     .     score";
  column-gap: 1rem;
  row-gap: .15rem;
  align-items: start;
  padding: .9rem 0;
  border-top: 1px solid var(--vfm-chart-line);
}

.vfm-chart__place { grid-area: place; }
.vfm-chart__cover { grid-area: cover; }
.vfm-chart__body  { grid-area: body; }
.vfm-chart__stars { grid-area: stars; }
.vfm-chart__score { grid-area: score; }

.vfm-chart__item:first-child { border-top: 0; }

/* Перестановка строк заметна движением, но только если читатель этого не
   запрещал: уважение к «уменьшить анимацию» — правило references/ui.md. */
@media (prefers-reduced-motion: no-preference) {
  .vfm-chart__item { transition: background-color .2s ease; }
}

.vfm-chart__item.is-sending { background: var(--vfm-chart-panel); }

/* ── место ── */

.vfm-chart__place {
  display: block;
  text-align: right;
}

.vfm-chart__place-n {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--vfm-chart-gold-text);
  font-variant-numeric: tabular-nums;
}

/* ── обложка ── */

.vfm-chart__cover { display: block; }

.vfm-chart__cover img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--vfm-chart-panel);
}

/* «Нет обложки» — плашка того же размера со словами, а не серый прямоугольник:
   песня без картинки должна выглядеть такой же законченной. */
.vfm-chart__nocover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: .5rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--vfm-chart-muted);
  background: var(--vfm-chart-panel);
  border: 1px dashed var(--vfm-chart-line);
  border-radius: 6px;
}

/* ── текст ── */

.vfm-chart__body { display: block; min-width: 0; }

.vfm-chart__title {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.vfm-chart__title a {
  color: var(--vfm-chart-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.vfm-chart__title a:hover { color: var(--vfm-chart-gold-text); }

.vfm-chart__artist,
.vfm-chart__authors,
.vfm-chart__plays,
.vfm-chart__score {
  display: block;
  font-size: .9rem;
  line-height: 1.45;
}

.vfm-chart__artist { margin-top: .2rem; color: var(--vfm-chart-ink); }
.vfm-chart__authors,
.vfm-chart__plays { margin-top: .15rem; color: var(--vfm-chart-muted); }
.vfm-chart__plays { font-variant-numeric: tabular-nums; }

.vfm-chart__score {
  margin-top: .1rem;
  color: var(--vfm-chart-muted);
  font-variant-numeric: tabular-nums;
}

/* ── звёзды ── */

.vfm-chart__stars {
  display: flex;
  /* ПЕРЕНОС ОБЯЗАТЕЛЕН. Пять звёзд по 44 точки — это 220 точек, и ширина у них
     не сжимаемая: зону нажатия уменьшать нельзя (references/ui.md, аудитория
     пожилая). На телефоне колонка текста бывает уже, и без переноса ряд звёзд
     ВЫСТУПАЛ ЗА КАРТОЧКУ на 76 точек — замерено в браузере при ширине окна
     406: карточка кончалась на 331, звёзды тянулись до 407. Страница при этом
     вбок не прокручивалась (тело обрезало), то есть на глаз это читалось как
     «так и задумано». Перенос превращает худший случай в две строки звёзд
     вместо вылезшего ряда. */
  flex-wrap: wrap;
  gap: 0;
  margin: .4rem 0 .15rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Сам переключатель не прячем display:none — так он выпадает из обхода
   клавиатурой и из программы чтения с экрана. Прячем от глаз, оставляя на
   месте, а видимый кружок рисует подпись. */
.vfm-chart__star-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vfm-chart__star {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44×44 — зона нажатия из references/ui.md. Аудитория пожилая, и это не
     формальность: палец не попадает в 24 точки. */
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.vfm-chart__star-svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--vfm-chart-star-off);
  stroke-width: 1.6;
}

/* Видимый фокус — обязателен. Обводка на ПОДПИСИ, потому что сам
   переключатель спрятан от глаз и его обводки не видно. */
.vfm-chart__star-in:focus-visible + .vfm-chart__star {
  outline: 3px solid var(--vfm-chart-focus);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Выбранная звезда заливается — работает в любом браузере. */
.vfm-chart__star-in:checked + .vfm-chart__star .vfm-chart__star-svg {
  fill: var(--vfm-chart-star-on);
  stroke: var(--vfm-chart-star-on);
}

/* …и все, что левее неё. Отдельными правилами на каждую оценку: так порядок в
   разметке остаётся естественным (1→5 слева направо), и стрелки клавиатуры
   ходят туда, куда смотрит читатель. Браузер без :has() покажет залитой
   только выбранную звезду — смысл при этом не теряется, рядом всегда стоит
   число «4,6 из 5». */
.vfm-chart__stars:has(> .vfm-chart__star-in:nth-of-type(2):checked) > .vfm-chart__star:nth-of-type(-n+2) .vfm-chart__star-svg,
.vfm-chart__stars:has(> .vfm-chart__star-in:nth-of-type(3):checked) > .vfm-chart__star:nth-of-type(-n+3) .vfm-chart__star-svg,
.vfm-chart__stars:has(> .vfm-chart__star-in:nth-of-type(4):checked) > .vfm-chart__star:nth-of-type(-n+4) .vfm-chart__star-svg,
.vfm-chart__stars:has(> .vfm-chart__star-in:nth-of-type(5):checked) > .vfm-chart__star:nth-of-type(-n+5) .vfm-chart__star-svg {
  fill: var(--vfm-chart-star-on);
  stroke: var(--vfm-chart-star-on);
}

.vfm-chart__star:hover .vfm-chart__star-svg { stroke: var(--vfm-chart-star-on); }

/* ── ответ на голос ── */

.vfm-chart__say {
  margin: 1rem 0 0;
  min-height: 1.4em;
  font-size: .95rem;
  line-height: 1.45;
}

/* Не одним цветом: у отказа есть и слова, и знак. */
.vfm-chart__say.is-ok { color: var(--vfm-chart-gold-text); }
.vfm-chart__say.is-bad { color: var(--vfm-chart-bad); font-weight: 600; }

/* ── только для программ чтения с экрана ── */

.vfm-chart__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── узкий экран ── */

/* На телефоне звёзды и итог занимают ВСЮ ширину карточки: рядом с обложкой
   колонка текста даёт около 170 точек, а несжимаемому ряду звёзд нужно 220.
   Худший случай при совсем узком экране — перенос звёзд на две строки
   (объявлен выше), а не вылезший за карточку ряд. */
@media (max-width: 600px) {
  .vfm-chart { padding: 1rem .85rem; }
  .vfm-chart__item {
    grid-template-columns: 1.75rem 72px minmax(0, 1fr);
    grid-template-areas:
      "place cover body"
      "stars stars stars"
      "score score score";
    column-gap: .5rem;
    row-gap: .2rem;
  }
  .vfm-chart__cover img,
  .vfm-chart__nocover { width: 72px; height: 72px; }
  .vfm-chart__nocover { font-size: .7rem; }
  .vfm-chart__place-n { font-size: 1.3rem; }
  .vfm-chart__title { font-size: 1.05rem; }
  .vfm-chart__stars { margin-top: .3rem; }
}

/* ── тёмное оформление темы ── */

body[data-theme="dark"] .vfm-chart {
  --vfm-chart-paper: #141a24;
  --vfm-chart-panel: #1b222e;
  --vfm-chart-ink: #eef1f6;
  --vfm-chart-muted: #aab4c6;
  --vfm-chart-line: #2c3542;
  --vfm-chart-gold-text: #d6ab5e;
  --vfm-chart-star-on: #d6ab5e;
  --vfm-chart-star-off: #aab4c6;
  --vfm-chart-focus: #7aa7e0;
  --vfm-chart-bad: #e8899a;
}

/* ── узкое МЕСТО, а не узкое окно ───────────────────────────────────────
   07.10.2026 чарт встал в боковую колонку главной (34 % ширины), и там
   он поехал: при окне 1440 действует десктопная раскладка, а места под
   текст остаётся около 130 точек — название ломается на пять строк,
   несжимаемый ряд звёзд (220 точек) переносится на две, и одна песня
   занимает 458 точек по высоте. Замерено в браузере на живой странице.

   Media query тут бессилен: он мерит ОКНО, а беда от ширины КОЛОНКИ.
   Поэтому чарт объявлен своим контейнером и спрашивает о собственной
   ширине. Где контейнерных запросов нет (браузеры старше 2022 года),
   остаётся прежняя раскладка — она не красивее, но и не сломана.

   Авторы не прячутся: владелец просил их показывать. Они ограничены
   двумя строками — так строка остаётся, а высота перестаёт зависеть от
   того, сколько человек написало песню. */
.vfm-chart { container-type: inline-size; }

@container (max-width: 520px) {
  .vfm-chart__item {
    grid-template-columns: 1.6rem 64px minmax(0, 1fr);
    /* Звёзды — во всю ширину карточки, как и на узком экране: ряд из пяти
       целей по 44 точки в колонку текста не влезает никогда. */
    grid-template-areas:
      "place cover body"
      "stars stars stars"
      "score score score";
    column-gap: .55rem;
    row-gap: .2rem;
    padding: .7rem 0;
  }

  .vfm-chart__cover img,
  .vfm-chart__nocover { width: 64px; height: 64px; }
  .vfm-chart__nocover { font-size: .66rem; }
  .vfm-chart__place-n { font-size: 1.2rem; }
  .vfm-chart__title { font-size: .98rem; line-height: 1.3; }
  .vfm-chart__artist { font-size: .82rem; }

  .vfm-chart__authors {
    font-size: .76rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .vfm-chart__plays { font-size: .76rem; }
  .vfm-chart__stars { margin-top: .25rem; }
}

/* ── песня, за которую уже не проголосовать ──
   Голос в чарте один (решение владельца 07.10.2026). Когда он отдан,
   звёзды остальных песен заперты. Показываем это приглушением и курсором
   «нельзя», а не исчезновением: пропавший ряд звёзд читается как
   «сломалось», приглушённый — как «уже сделано». Сама песня, ссылка на
   неё и место в чарте остаются в полную силу. */
.vfm-chart__item.is-locked .vfm-chart__stars { opacity: .4; }
.vfm-chart__item.is-locked .vfm-chart__star { cursor: not-allowed; }