/* ============================================================
   Опрос «Кто победит» + комментарии — вариант 3 (Swiss / светлый).
   Плоско, тонкие волоски, один зелёный акцент, табличные числа.
   Разметку опроса и комментариев генерирует роутер — здесь только стили.
   Палитра берётся из styles.css: --ink, --bg, --line, --green*.
   ============================================================ */

/* ---------- Опрос ---------- */
.poll-section { padding: 56px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.poll-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  padding: 32px 32px 28px;
}
.poll-title {
  margin: 0 0 24px;
  text-align: center;
  max-width: none;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.poll-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.poll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 15px/1 var(--font);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 12px;
  min-height: 52px;
  cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.poll-btn:hover:not(:disabled) { border-color: var(--ink); }
.poll-btn:disabled { cursor: default; }
.poll-btn--fr.voted,
.poll-btn--en.voted {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
  color: var(--ink);
}
.poll-btn .flag--sm { width: 24px; height: 16px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }

.poll-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  background: var(--line-2);
  border: 1px solid var(--line);
}
.poll-fill { height: 100%; min-width: 0; transition: width .7s cubic-bezier(.4,0,.2,1); }
.poll-fill--fr { background: linear-gradient(to right, #0a7a43, #0b8f4e); }
.poll-fill--en { background: repeating-linear-gradient(45deg, #0b8f4e 0 6px, #0e9d57 6px 12px); }

.poll-legend { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; }
.poll-leg { font-size: 14px; color: var(--ink-2); font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.poll-leg--fr { text-align: left; }
.poll-leg--en { text-align: right; flex-direction: row-reverse; }
.poll-pct--fr, .poll-pct--en {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green-ink);
  font-variant-numeric: tabular-nums;
}
.poll-total {
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---------- Комментарии ---------- */
.comments-section { padding: 64px 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.comments-section > .wrap,
.comments-section .wrap--narrow { max-width: 760px; }
.comments-section h2 { margin-bottom: 24px; }
.cm-count { color: var(--green-ink); font-weight: 800; font-size: .85em; font-variant-numeric: tabular-nums; }

.cm-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  padding: 22px 22px 24px;
}
.cm-form input, .cm-form textarea {
  font: 15.5px/1.5 var(--font);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 14px;
  width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
.cm-form input::placeholder, .cm-form textarea::placeholder { color: var(--ink-3); }
.cm-form input:focus, .cm-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.cm-name { max-width: 320px; }
.cm-body { resize: vertical; min-height: 104px; }
.cm-form textarea { resize: vertical; min-height: 104px; }
.cm-form-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cm-submit {
  align-self: flex-start;
  font: 700 15px/1 var(--font);
  color: #fff;
  background: var(--green-dark);
  border: 0;
  border-radius: 0;
  padding: 14px 34px;
  min-height: 48px;
  cursor: pointer;
  transition: background .14s;
}
.cm-submit:hover { background: #086437; }
.cm-submit:disabled { opacity: .5; cursor: default; }
.cm-msg { font-size: 14px; color: var(--green-ink); font-weight: 600; }
.cm-msg.err { color: #c0392b; }

.cm-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.cm-item {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 18px 2px;
  animation: cmIn .3s ease;
}
@keyframes cmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.cm-author {
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cm-author::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  flex: none;
}
.cm-time { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-text { color: var(--ink-2); white-space: pre-line; word-wrap: break-word; line-height: 1.6; }

@media (max-width: 520px) {
  .poll-card { padding: 24px 18px 20px; }
  .poll-buttons { grid-template-columns: 1fr; }
  .cm-submit { width: 100%; text-align: center; }
}

/* ==== Переключатель плееров (кнопки над плеером) ==== */
.pl-tabs{display:flex;gap:8px;justify-content:center;margin:0 0 12px;flex-wrap:wrap}
.pl-tab{display:inline-block;font:700 14.5px/1 inherit;text-decoration:none;
  color:#0f1512;background:#fff;border:1px solid #e6e9e6;border-radius:8px;
  padding:11px 20px;transition:.12s}
.pl-tab:hover{border-color:#0b8f4e;background:#e8f6ee;color:#0a7a43;text-decoration:none}
.pl-tab.is-on{background:#0a7a43;border-color:#0a7a43;color:#fff}

/* ==== Обратный отсчёт до трансляции ==== */
.cd-wrap{max-width:1000px;margin:12px auto 0;text-align:center}
.cd-box{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:#e8f6ee;border:1px solid #cfe6d9;border-radius:10px;padding:12px 22px}
.cd-label{font:700 13px/1 inherit;color:#5b6560;text-transform:uppercase;letter-spacing:.08em}
.cd-time{font:800 26px/1 inherit;color:#0a7a43;font-variant-numeric:tabular-nums}
.cd-at{font:600 13.5px/1 inherit;color:#6c746f}
.cd-box.is-live{background:#eef7f1;border-color:#0a7a43}
.cd-box.is-live .cd-time{font-size:20px}

/* ==== Преролл-заслонка перед плеером ==== */
.pg-gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.pg-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pg-play{position:relative;z-index:3;display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font:800 17px/1 inherit;color:#fff;background:rgba(192,57,43,.96);border:0;border-radius:999px;
  padding:18px 34px;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .12s,background .12s}
.pg-play:hover{background:#d8442f;transform:scale(1.04)}
.pg-play svg{width:22px;height:22px;flex:none}
.pg-ad{position:absolute;inset:0;z-index:4;background:#000}
/* внутренности IMA не трогаем — свои размеры вызывали дёрганье */
.pg-ad{contain:layout size}
.pg-note{position:absolute;left:0;right:0;bottom:10px;z-index:5;text-align:center;
  font:600 13px/1.3 inherit;color:#e8eaed;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
@media(max-width:520px){.pg-play{font-size:15px;padding:14px 24px}}

/* ==== Продающая надпись над плеером ==== */
.promo{display:flex;align-items:center;gap:14px;max-width:1000px;margin:0 auto 12px;
  background:#e8f6ee;border:1px solid #bfe3ce;border-left:5px solid #0a7a43;
  border-radius:12px;padding:15px 20px}
.promo-ico{flex:none;width:26px;height:26px;color:#0a7a43}
.promo-ico svg{width:100%;height:100%;display:block}
.promo-text{font:600 16.5px/1.45 inherit;color:#0f1512}
.promo-price{display:inline-block;font-weight:800;font-size:1.22em;color:#fff;
  background:#0a7a43;border-radius:8px;padding:2px 10px;margin:0 2px;white-space:nowrap}
@media(max-width:560px){.promo{padding:13px 15px;gap:11px}.promo-text{font-size:15px}}