/* ═══════════════════════════════════════════════════════════════════
   Стена отзывов на фильмы.

   Все классы с приставкой wl-. Приставка не украшение: в этом проекте уже
   один раз .card из общих стилей столкнулся с .card из покера, и текст
   разъезжался по всем экранам сразу. Своё пространство имён избавляет от
   целого класса таких вечеров.
   ═══════════════════════════════════════════════════════════════════ */

.wl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}

.wl-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── карточка отзыва ── */

.wl-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  padding: 14px; margin-bottom: 10px;
}

/* Колонка с текстом обязана уметь сжиматься. По умолчанию у элемента сетки
   min-width: auto, то есть он не станет уже своего содержимого — и одно
   длинное слово или вставленная ссылка выпихивают вправо и заголовок, и
   оценку. Это и есть то самое «текст съезжает»: причина не в тексте, а в
   колонке, которая отказывается сужаться. */
.wl-item > div { min-width: 0; }
.wl-head > div { min-width: 0; }

.wl-poster {
  width: 64px; height: 96px; border-radius: 10px; object-fit: cover;
  background: var(--surface-2); display: block;
}

/* Постера может не быть — у фильма, заведённого руками, его нет никогда.
   Вместо дыры в сетке показываем инициалы: карточка держит форму. */
.wl-poster-stub {
  width: 64px; height: 96px; border-radius: 10px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 700; color: var(--muted);
}

.wl-title { font-size: 15px; font-weight: 700; line-height: 1.25;
            overflow-wrap: anywhere; }
.wl-year { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.wl-score {
  flex: none;
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
}
.wl-score small { font-size: 11px; font-weight: 600; color: var(--muted); }

/* Оценка красит сама себя: девятку и двойку видно, не читая текст. */
.wl-score.high { border-color: var(--ok); color: var(--ok); }
.wl-score.mid  { border-color: var(--line); }
.wl-score.low  { border-color: var(--err); color: var(--err); }

.wl-by {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px; font-size: 12px; color: var(--muted);
}
.wl-ava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

.wl-text {
  margin-top: 8px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Длинный отзыв сворачивается: пять тысяч символов в ленте — это экран,
   который никто не пролистает до второго отзыва. */
.wl-text.clamp {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}

.wl-more {
  margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
}

/* Кнопок бывает четыре: полезно, ответы, фильм, править. В ширину экрана
   они не влезают, и без переноса последняя уезжает за край. */
.wl-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 10px;
}

.wl-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.wl-act.on { border-color: var(--accent); color: var(--accent); }
.wl-act:disabled { opacity: .45; cursor: default; }

.wl-mine {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent);
}

/* ── ответы ── */

.wl-replies { margin-top: 10px; display: grid; gap: 8px; }

.wl-reply {
  padding: 8px 11px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; line-height: 1.45;
}
.wl-reply b { font-size: 12px; color: var(--muted); display: block; margin-bottom: 2px; }

.wl-reply-form { display: flex; gap: 8px; margin-top: 8px; }
.wl-reply-form input { flex: 1; min-width: 0; }

/* ── форма отзыва ── */

.wl-search-row { display: flex; gap: 8px; }
.wl-search-row input { flex: 1; min-width: 0; }

.wl-results { display: grid; gap: 8px; margin-top: 10px; max-height: 320px; overflow-y: auto; }

.wl-result {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
  padding: 8px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid transparent; text-align: left;
}
.wl-result.on { border-color: var(--accent); }
.wl-result img, .wl-result .wl-poster-stub {
  width: 44px; height: 64px; border-radius: 8px; font-size: 14px;
}

/* Десять оценок — десять кнопок. Ползунок на телефоне промахивается, а
   выбор из десяти вариантов должен быть одним точным касанием. */
.wl-scores { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 10px 0; }
.wl-scores button {
  padding: 10px 0; border-radius: 9px; font-size: 13px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.wl-scores button.on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent, #0b0d13);
}

.wl-area {
  width: 100%; min-height: 190px; resize: vertical; line-height: 1.5;
  font-family: inherit; font-size: 14px;
}

.wl-counter {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.wl-counter .short { color: var(--err); }
.wl-counter .ready { color: var(--ok); }

/* ── карточка фильма ── */

.wl-movie { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.wl-movie img, .wl-movie .wl-poster-stub {
  width: 110px; height: 165px; border-radius: 12px; font-size: 26px;
}
.wl-avg { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* Распределение оценок. Средняя прячет разногласия: «семь» из десяток и
   двоек и «семь» у всех подряд — это два очень разных фильма. */
.wl-spread { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; align-items: end;
             height: 46px; margin-top: 12px; }
.wl-bar { background: var(--surface-2); border-radius: 3px 3px 0 0; min-height: 3px; }
.wl-bar.has { background: var(--accent); }
.wl-spread-legend { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
                    font-size: 9px; color: var(--muted); text-align: center; margin-top: 3px;
                    font-variant-numeric: tabular-nums; }

.wl-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }