/* TVGuide — оформление раздела /tv/.
   Ориентир — сетки телепрограмм у конкурентов, а не блочные страницы GeoAstro:
   карточка канала с крупным логотипом в шапке, компактный список передач,
   тонкая полоса под идущей передачей, ссылка «Программа на весь день» внизу.
   Без эмодзи в заголовках и без абзацев-лидов: интент смотровой. */

:root{
  /* Контраст. Время передачи — главная цифра на странице, а она была самой
     бледной: 13px цветом #8b93a5 это 3,1:1 к белому при норме AA 4,5:1, у
     прошедших 2,2:1. Аудитория телепрограммы — не двадцатилетние, читать
     это невозможно. Приглушение осталось, но в рамках нормы: mut 5,4:1,
     past 4,7:1, время передачи отдельным тоном 9,5:1. */
  --tvg-line:#e6e9f0; --tvg-panel:#fff; --tvg-mut:#606a7d; --tvg-acc:#1565c0;
  --tvg-ink:#1b2331; --tvg-zebra:#f7f9fc; --tvg-now:#12a07a; --tvg-past:#6b7488;
  /* Время в сетке и метка жанра — свои токены: полоса прогресса остаётся
     ярко-зелёной (это не текст), а надпись «прямой эфир» тем же зелёным
     давала 3,3:1. */
  --tvg-time:#3d4657; --tvg-tag-ink:#0b7a5e;
  /* Красный выходного. #c62828, а не алый: на белом это 5,9:1, то есть
     проходит AA для текста, а привычный #f00 даёт 4,0 и не проходит. */
  --tvg-we:#c62828; --tvg-we-soft:#fdeaea; --tvg-we-line:#f2c4c4;
  /* --tvg-dim в файле использовался, но нигде не задавался: цвет молча
     наследовался от темы. Теперь это синоним приглушённого. */
  --tvg-dim:#606a7d;
  /* Мягкая заливка под активные состояния. Раньше активный день и активная
     тематика заливались цветом чернил (#1b2331) — на светлой странице это
     читалось как чёрная плашка и тянуло на себя весь взгляд. У Рамблера
     активный день это просто синий текст, у teleprogramma — светлая пилюля;
     берём середину: светлая заливка, акцентная обводка, акцентный текст. */
  --tvg-acc-soft:#eaf2fc; --tvg-acc-line:#b9d3ee;
}

.tvg-wrap{max-width:1240px;margin:0 auto;padding:18px 16px 56px}
.tvg-wrap h1{font-size:23px;line-height:1.25;margin:.1em 0 .3em;color:var(--tvg-ink)}
.tvg-lede{color:var(--tvg-mut);font-size:14px;margin:0 0 14px}
.tvg-note{color:var(--tvg-mut);font-size:13px;margin:8px 0 4px}
.tvg-foot{max-width:1240px;margin:0 auto;padding:18px 16px;color:var(--tvg-mut);
  font-size:12px;border-top:1px solid var(--tvg-line)}

/* хлебные крошки */
.tvg-crumbs{font-size:13px;color:var(--tvg-mut);margin-bottom:6px}
.tvg-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
/* Тема отбивает списки и абзацы в статьях пустым блоком в 10em перед первой
   строкой. Во флекс-контейнере он превращается в полноценный элемент и
   сдвигает крошки на 130 px вправо. Класс на <ol> уводит из-под селектора
   темы, но правило страхует нас и от её будущих версий. */
.tvg-crumbs ol::before,.tvg-crumbs ol::after{content:none;display:none}
.tvg-crumbs li+li:before{content:"\203A";margin-right:6px;color:var(--tvg-past)}
.tvg-crumbs a{color:var(--tvg-acc);text-decoration:none}

/* панель управления */
.tvg-pagenav{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.tvg-pn{display:inline-block;background:#eef3f9;color:var(--tvg-acc);border:1px solid #dde6f1;
  border-radius:999px;padding:5px 12px;font-size:13px;text-decoration:none}
.tvg-pn:hover{background:#e3ecf7}

/* Дни одной строкой с горизонтальной прокруткой. Переносом на телефоне
   получалось три ряда плашек (150 px) — сетка уезжала за нижний край
   экрана, и человек видел первый экран без единой передачи. */
.tvg-daybar{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 12px;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  padding-bottom:2px}
.tvg-daybar::-webkit-scrollbar{height:4px}
.tvg-daybar::-webkit-scrollbar-thumb{background:#d7dde7;border-radius:99px}
.tvg-day{scroll-snap-align:start}
.tvg-day{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 14px;
  border:1px solid var(--tvg-line);border-radius:8px;background:var(--tvg-panel);color:#2a3344;
  text-decoration:none;white-space:nowrap;line-height:1.2}
.tvg-day b{font-size:14px;font-weight:600}
.tvg-day i{font-style:normal;font-size:12px;color:var(--tvg-mut)}
.tvg-day-on{background:var(--tvg-acc-soft);border-color:var(--tvg-acc);color:var(--tvg-acc);font-weight:700}
.tvg-day-on i{color:var(--tvg-acc);opacity:.75}
.tvg-day:hover{border-color:#b9c6d8}
/* Выходные красным. Правила стоят ПОСЛЕ .tvg-day-on намеренно: у них та же
   специфичность, и выбранная суббота обязана остаться красной — иначе
   единственный день, который человек ищет чаще прочих, теряет метку ровно
   в тот момент, когда на него нажали. Фон и рамка при этом остаются от
   выбранного состояния, так что видно и «выходной», и «я здесь». */
.tvg-day-we b,.tvg-day-we i{color:var(--tvg-we)}
.tvg-day-we{border-color:var(--tvg-we-line)}
.tvg-day-we.tvg-day-on{background:var(--tvg-we-soft);border-color:var(--tvg-we)}
/* «На неделю» — та же плашка, что у дней, но с левым отбивом и своей
   рамкой: это переход в другой вид, а не восьмой день. */
.tvg-day-week{margin-left:6px;border-style:dashed}
.tvg-day-week.tvg-day-on{border-style:solid}
.tvg-pn-we{color:var(--tvg-we);border-color:var(--tvg-we-line);background:var(--tvg-we-soft)}
.tvg-pn-we:hover{background:#fbdede}

.tvg-genres{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.tvg-genres a{background:#fff;border:1px solid var(--tvg-line);border-radius:999px;padding:5px 13px;
  text-decoration:none;color:#2a3344;font-size:14px}
.tvg-genres a:hover{border-color:#b9c6d8}

/* карточка раздела */
.tvg-card{background:var(--tvg-panel);border:1px solid var(--tvg-line);border-radius:12px;
  padding:14px 16px;margin:12px 0;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.tvg-card h2{font-size:17px;margin:0 0 10px;color:var(--tvg-ink);font-weight:700}
/* Заголовок дня выходного — красным, как и его плашка в ленте. */
.tvg-card h2.tvg-h-we{color:var(--tvg-we)}

/* ============ сетка каналов ============ */
.tvg-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.tvg-col{background:#fff;border:1px solid var(--tvg-line);border-radius:12px;padding:0;
  box-shadow:0 1px 3px rgba(20,30,60,.05);display:flex;flex-direction:column}
/* margin с !important — не прихоть. В «Дополнительных стилях» сайта живёт
   правило h3{margin-top:40px !important;margin-bottom:5px !important} — отбивка
   подзаголовков в статьях. Шапка карточки канала это тоже h3, и она получала
   сорок пикселей пустоты над логотипом в каждой из тридцати карточек сетки.
   Обычный margin:0 против !important не работает, а трогать пользовательский
   CSS ради нашей сетки значит менять вид всего блога. */
.tvg-col h3{margin:0 !important;padding:12px 14px 10px;border-bottom:1px solid var(--tvg-line);font-size:16px}
.tvg-col h3 a{display:flex;align-items:center;gap:10px;color:var(--tvg-ink);text-decoration:none;font-weight:600}
.tvg-col h3 a:hover{color:var(--tvg-acc)}
.tvg-col .tvg-grid{padding:6px 14px 4px;flex:1 1 auto}

/* строка передачи */
.tvg-grid{list-style:none;padding:0;margin:0}
.tvg-p{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;padding:7px 0}
.tvg-p time{flex:0 0 44px;color:var(--tvg-time);font-variant-numeric:tabular-nums;font-size:14px;line-height:1.35}
/*
 * flex-basis:0 обязателен. Строка передачи — flex с переносом (перенос нужен
 * полосе прогресса, она занимает всю ширину). При basis:auto длинное название
 * («Футбол. Кубок России. Крылья Советов (Самара) – Зенит (Санкт-Петербург)»)
 * не помещалось рядом со временем и по правилам flexbox уезжало на следующую
 * строку целиком — время оставалось висеть в пустой строке над названием.
 * Сжатие в таком случае не срабатывает: перенос происходит раньше него.
 */
.tvg-t{flex:1 1 0;min-width:0;font-size:14px;line-height:1.35;color:var(--tvg-ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tvg-p-past .tvg-t,.tvg-p-past time{color:var(--tvg-past)}
.tvg-p-now .tvg-t{font-weight:700}
.tvg-p-now time{color:var(--tvg-ink);font-weight:600}

/* индикатор идущей передачи — отдельной строкой во всю ширину карточки */
.tvg-pbar{flex:1 0 100%;height:3px;background:#e3e8f0;border-radius:99px;overflow:hidden;margin:2px 0 0}
.tvg-pbar i{display:block;height:100%;background:var(--tvg-now)}

.tvg-tag,.tvg-age{font-style:normal;font-size:12px;color:var(--tvg-tag-ink);white-space:nowrap;margin-left:5px}
.tvg-age{color:var(--tvg-past)}
.tvg-carry{display:block;font-style:normal;font-size:10px;color:var(--tvg-past);line-height:1}
.tvg-empty{color:var(--tvg-mut);font-size:13px;margin:6px 0 10px}

.tvg-more{display:block;text-align:center;padding:10px 14px;border-top:1px solid var(--tvg-line);
  font-size:13px;color:var(--tvg-mut);text-decoration:none}
.tvg-more:hover{color:var(--tvg-acc);background:var(--tvg-zebra)}

/* ============ сейчас в эфире ============ */
.tvg-nowlist{list-style:none;padding:0;margin:0}
.tvg-nowlist li{display:grid;grid-template-columns:190px 1fr 110px 62px;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--tvg-zebra)}
.tvg-nowlist li:last-child{border-bottom:none}
.tvg-nch{display:flex;align-items:center;gap:9px;color:var(--tvg-ink);text-decoration:none;font-weight:600;font-size:14px}
.tvg-nch:hover{color:var(--tvg-acc)}
.tvg-ntitle{font-size:14px;color:var(--tvg-ink)}
.tvg-bar{display:block;height:4px;background:#e3e8f0;border-radius:99px;overflow:hidden}
.tvg-bar i{display:block;height:100%;background:var(--tvg-now)}
.tvg-nstart{color:var(--tvg-mut);font-size:12px;text-align:right}

/* ============ логотипы ============ */
/* Логотип без плашки и рамки: тёмный прямоугольник вокруг каждой иконки
   рябит в сетке из тридцати карточек. Прозрачные picons остаются читаемыми
   за счёт лёгкого серого фона. */
.tvg-logo{display:inline-block;vertical-align:middle;border-radius:6px;object-fit:contain;
  background:#e8ecf3;flex:0 0 auto;box-sizing:border-box}
/* Picons рисуют под тёмные интерфейсы плееров: у половины каналов логотип —
   белый контур на прозрачном фоне, и на светлой плашке его просто нет.
   Одноцветные из них перекрашены в чернильный тон (TVG_Logo::ink_mono), где
   нашёлся цветной оригинал у оператора — заменены целиком (_tvlogos-op.php).
   Остаток — цветные светлые логотипы: у «Ю» или СТС цвет и есть знак,
   перекрасить значит стереть бренд, а на светлой плашке их не видно.
   Замер 20.08: из 440 таких у 423 контраст к #e8ecf3 ниже 1.8 — то есть белая
   или светлая подложка их прячет, это не вопрос вкуса. На синей #1a4b8c ни
   один не опускается ниже 4.3. Синий взят глубокий, а не акцентный #1565c0:
   плашек в сетке четыре сотни, и акцентным тоном они начали бы спорить
   с кнопками и ссылками. */
.tvg-logo-dark{background:#1a4b8c;padding:2px}
/* user-select:none — чтобы буквы заглушки не приклеивались к названию при
   копировании: «РРРусский роман», «ДОДоверие». Для скринридера она и так
   закрыта aria-hidden. */
.tvg-badge{color:#fff;font-weight:700;text-align:center;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;letter-spacing:-.02em;user-select:none;-webkit-user-select:none}
.tvg-wrap h1 .tvg-logo{margin-right:10px;vertical-align:-8px}

/* ============ списки ссылок ============ */
.tvg-sum{margin:0;font-size:14px;color:var(--tvg-ink)}
.tvg-links{display:flex;flex-wrap:wrap;gap:7px}
.tvg-links a{display:inline-flex;align-items:center;gap:7px;background:#f4f7fb;
  border:1px solid var(--tvg-line);border-radius:8px;padding:5px 11px;font-size:14px;
  color:var(--tvg-ink);text-decoration:none}
.tvg-links a:hover{border-color:#b9c6d8;color:var(--tvg-acc)}
.tvg-links-dense a{font-size:13px;padding:4px 9px}

/* ============ FAQ ============ */
.tvg-faq-item{border-top:1px solid var(--tvg-line);padding:9px 0}
.tvg-faq-item:first-of-type{border-top:none}
.tvg-faq-item summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--tvg-ink)}
.tvg-faq-item p{margin:8px 0 2px;color:#424c60;font-size:14px}

/* ============ мобильные ============ */
@media (max-width:760px){
  .tvg-nowlist li{grid-template-columns:1fr;gap:3px;padding:10px 0}
  .tvg-nstart{text-align:left}
  .tvg-bar{max-width:200px}
}
@media (max-width:560px){
  .tvg-wrap{padding:14px 12px 40px}
  .tvg-wrap h1{font-size:20px;margin-bottom:.25em}
  .tvg-cols{grid-template-columns:1fr}
  /* Первый экран телефона: до сетки было 723 px — лид на пять строк, три
     ряда дней и три ряда управления. Подпись «Телепрограмма —» повторяет
     H1, поле поиска забирает свою строку, списки ужимаются: всё
     управление умещается в две строки, и передачи видно без прокрутки. */
  .tvg-controls{gap:6px;margin:0 0 10px}
  .tvg-controls-label{display:none}
  .tvg-sel{font-size:14px;padding:6px 26px 6px 11px}
  .tvg-search{flex:1 1 100%;max-width:none;order:9}
  .tvg-hints{min-width:0;left:0;right:0;max-width:none}
  .tvg-card{padding:12px 12px 14px}
}

/* тематики телеканалов */
.tvg-cats{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.tvg-cats a{background:#fff;border:1px solid var(--tvg-line);border-radius:999px;padding:5px 13px;
  text-decoration:none;color:#2a3344;font-size:14px}
.tvg-cats a:hover{border-color:#b9c6d8;color:var(--tvg-acc)}
.tvg-cats .tvg-cat-on{background:var(--tvg-acc-soft);border-color:var(--tvg-acc);color:var(--tvg-acc);font-weight:600}
.tvg-cats a i{font-style:normal;font-size:12px;color:var(--tvg-mut);margin-left:3px}
.tvg-cats .tvg-cat-on i{color:#c8d2e2}

/* Кнопка догрузки каналов на тематической странице. Она же — обычная ссылка
   на следующую порцию, если скрипт не отработал. */
.tvg-loadmore{display:block;appearance:none;font:inherit;cursor:pointer;margin:14px auto 0;max-width:340px;text-align:center;
  padding:12px 18px;border:1px solid var(--tvg-line);border-radius:10px;background:#fff;
  color:var(--tvg-ink);text-decoration:none;font-weight:600}
.tvg-loadmore:hover{border-color:var(--tvg-acc);color:var(--tvg-acc);background:var(--tvg-zebra)}
.tvg-loadmore.tvg-loading{opacity:.6;pointer-events:none}
.tvg-next{display:none}

/* Вечерний блок: канал приписан справа от названия передачи. */
.tvg-evening{padding:4px 0 0}
.tvg-ev-ch{font-style:normal;font-size:13px;color:var(--tvg-dim)}
.tvg-ev-ch a{color:var(--tvg-dim);text-decoration:none;border-bottom:1px dotted currentColor}
.tvg-ev-ch a:hover{color:var(--tvg-acc)}


/* Поиск по каналам и передачам. */
.tvg-search{display:flex;gap:6px;margin:0;flex:1 1 260px;max-width:340px}
.tvg-search input{flex:1 1 auto;padding:6px 13px;border:1px solid var(--tvg-line);border-radius:999px;font-size:15px;
  font:inherit;background:#fff;color:var(--tvg-ink)}
.tvg-search input:focus{outline:none}
.tvg-wrap .tvg-search button{padding:6px 15px;border:1px solid var(--tvg-acc-line);border-radius:999px;
  font-size:15px;background:var(--tvg-acc-soft);color:var(--tvg-acc);font-family:inherit;
  font-weight:600;cursor:pointer;text-shadow:none}
.tvg-wrap .tvg-search button:hover{background:#dfeafa;border-color:var(--tvg-acc)}
.tvg-found time{white-space:nowrap}

/* Строка управления: компактные списки в одну строку, как у teleprogramma.
   Имя .tvg-bar занято полосой прогресса передачи (height:4px, overflow:hidden)
   — контейнер под неё схлопывался в четыре пикселя, поэтому .tvg-controls. */
.tvg-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.tvg-controls-label{font-weight:600;color:var(--tvg-ink);font-size:17px}
.tvg-sel{appearance:none;font:inherit;font-size:15px;padding:6px 30px 6px 13px;cursor:pointer;
  border:1px solid var(--tvg-line);border-radius:999px;background:#fff;color:var(--tvg-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.tvg-sel:hover{border-color:var(--tvg-acc)}
.tvg-sel:focus{outline:none}

/* Зона автоподгрузки: круглый значок вместо кнопки с подписью. */
.tvg-more-zone{display:flex;justify-content:center;padding:18px 0 4px}
.tvg-more-zone[hidden]{display:none}
.tvg-loadmore{appearance:none;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--tvg-line);background:#fff;display:flex;align-items:center;justify-content:center}
.tvg-loadmore:hover{border-color:var(--tvg-acc)}
.tvg-spin{display:block;width:18px;height:18px;border:2px solid var(--tvg-line);
  border-top-color:var(--tvg-acc);border-radius:50%}
.tvg-more-zone.tvg-loading .tvg-spin{animation:tvg-rot .8s linear infinite}
@keyframes tvg-rot{to{transform:rotate(360deg)}}
.tvg-more-link{display:inline-block;padding:10px 18px;border:1px solid var(--tvg-line);border-radius:10px}
.tvg-busy{opacity:.55;transition:opacity .15s}
.tvg-nolink{color:var(--tvg-dim)}

/* Кнопка города выглядит как остальные списки строки управления. */
button.tvg-city-btn{appearance:none;font:inherit;font-size:15px;cursor:pointer;text-align:left}

/* Окно выбора города: закреплённые сверху, дальше алфавит с буквами слева. */
.tvg-modal{position:fixed;inset:0;z-index:9999;background:rgba(18,24,34,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.tvg-modal[hidden]{display:none}
.tvg-modal-box{position:relative;background:#fff;border-radius:14px;max-width:720px;width:100%;
  padding:22px 26px 26px;box-shadow:0 18px 60px rgba(18,24,34,.28)}
.tvg-modal-box h2{margin:0 0 16px;font-size:20px}
.tvg-modal-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;
  line-height:1;color:var(--tvg-dim);cursor:pointer;padding:4px 8px}
.tvg-modal-close:hover{color:var(--tvg-ink)}
.tvg-modal-body a{color:var(--tvg-ink);text-decoration:none}
.tvg-modal-body a:hover{color:var(--tvg-acc);text-decoration:underline}
.tvg-cities-pin{display:flex;flex-direction:column;gap:6px;padding:0 0 14px;margin:0 0 12px;
  border-bottom:1px solid var(--tvg-line);font-size:17px}
.tvg-abc-row{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--tvg-line)}
.tvg-abc-row:last-child{border-bottom:0}
.tvg-abc-l{flex:0 0 20px;color:var(--tvg-dim);font-weight:700}
.tvg-abc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;flex:1 1 auto}
body.tvg-modal-open{overflow:hidden}

/* Подсказки поиска: попап под полем, каналы и передачи двумя секциями. */
.tvg-search{position:relative}
.tvg-hints{position:absolute;top:calc(100% + 6px);left:0;min-width:320px;max-width:420px;z-index:60;
  background:#fff;border:1px solid var(--tvg-line);border-radius:12px;box-shadow:0 12px 34px rgba(18,24,34,.16);
  max-height:60vh;overflow:auto;padding:6px 0}
.tvg-hints[hidden]{display:none}
.tvg-hint-title{padding:8px 14px 4px;font-size:13px;color:var(--tvg-dim);text-transform:uppercase;letter-spacing:.03em}
.tvg-hint-ch{display:flex;align-items:center;gap:10px;padding:7px 14px;color:var(--tvg-ink);text-decoration:none}
.tvg-hint-p{display:block;padding:7px 14px;color:var(--tvg-ink);text-decoration:none}
.tvg-hint-ch:hover,.tvg-hint-p:hover,.tvg-hint-all:hover{background:var(--tvg-zebra)}
.tvg-hint-t{display:block;font-size:15px}
.tvg-hint-m{display:block;font-size:13px;color:var(--tvg-dim);margin-top:1px}
.tvg-hint-all{display:block;padding:9px 14px;margin-top:4px;border-top:1px solid var(--tvg-line);
  color:var(--tvg-acc);text-decoration:none;font-size:14px}
.tvg-hint-empty{padding:12px 14px;color:var(--tvg-dim)}

/* Свёрнутые прошедшие передачи в карточке канала — как у Рамблера. */
.tvg-fold{display:flex;align-items:center;gap:7px;width:100%;appearance:none;border:0;
  border-bottom:1px solid var(--tvg-line);background:none;font:inherit;font-size:13px;
  color:var(--tvg-mut);cursor:pointer;padding:8px 14px;text-align:left}
.tvg-fold:hover{color:var(--tvg-acc);background:var(--tvg-zebra)}
.tvg-fold-arrow{width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.tvg-fold-open .tvg-fold-arrow{transform:rotate(90deg)}
.tvg-fold-n{margin-left:auto;font-size:12px;color:var(--tvg-past)}
.tvg-fold-body[hidden]{display:none}
.tvg-fold-body .tvg-grid{padding-bottom:0}

/*
 * Сброс тем оформления под наши кнопки.
 *
 * Плагин рисуется внутри чужой темы, а темы стилизуют голый `button`.
 * Twenty Twenty-One, например, красит его правилом
 * `button:not(:hover):not(:active):not(.has-background)` — специфичность выше
 * нашего одиночного класса, и «Прошедшие передачи» с «Искать» приезжали
 * чёрными плашками поверх светлой страницы. Перебить это разумной
 * специфичностью нельзя (тема добавит ещё один :not), поэтому здесь —
 * единственное место в файле, где стоит !important, и только на кнопках,
 * которые рисуем мы сами.
 */
.tvg-wrap button.tvg-fold,
.tvg-wrap button.tvg-sel,
.tvg-wrap button.tvg-citylink,
.tvg-wrap .tvg-search button,
.tvg-wrap button.tvg-loadmore,
.tvg-wrap button.tvg-chk-reset,
.tvg-modal button.tvg-modal-close{
  background-color:transparent !important;
  background-image:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-size:inherit;
}
.tvg-wrap button.tvg-fold{color:var(--tvg-mut) !important;font-size:13px}
.tvg-wrap button.tvg-fold:hover{color:var(--tvg-acc) !important;background-color:var(--tvg-zebra) !important}
.tvg-wrap button.tvg-sel{color:var(--tvg-ink) !important;background-color:#fff !important;font-size:15px}
.tvg-wrap .tvg-search button{color:var(--tvg-acc) !important;background-color:var(--tvg-acc-soft) !important;font-size:15px}
.tvg-wrap .tvg-search button:hover{background-color:#dfeafa !important}
.tvg-wrap button.tvg-loadmore{background-color:#fff !important}
/* Тема красит голый button чёрной плашкой — «Выбрать свой город» приезжал
   чёрным прямоугольником поверх светлой полосы. Тот же случай, что с
   «Прошедшими передачами»: перебить разумной специфичностью нельзя. */
.tvg-wrap button.tvg-citylink{color:var(--tvg-acc) !important;font-size:14px;padding:0 !important}
.tvg-wrap button.tvg-citylink:hover{color:#0d47a1 !important}
.tvg-modal button.tvg-modal-close{color:var(--tvg-mut) !important;font-size:26px}


/* ============ город человека ============ */
/*
 * Город не запоминался вовсе: ни cookie, ни localStorage. Каждый заход
 * начинался с московского времени, и на странице канала об этом не было
 * сказано ни слова — только в meta description, то есть в выдаче.
 * Полоса ниже показывает часовой пояс словами и даёт перейти к своей версии
 * страницы; выбранный город запоминается на год.
 */
.tvg-tznote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;
  padding:8px 12px;border:1px solid var(--tvg-acc-line);border-radius:10px;
  background:var(--tvg-acc-soft);font-size:14px;color:#2a3344}
.tvg-tznote b{font-weight:600}
.tvg-tznote a{color:var(--tvg-acc);text-decoration:none;font-weight:600}
.tvg-tznote a:hover{text-decoration:underline}
.tvg-wrap button.tvg-citylink{appearance:none;border:0;background:none;font:inherit;font-size:14px;
  color:var(--tvg-acc);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.tvg-wrap button.tvg-citylink:hover{color:#0d47a1}
.tvg-tznote-quick{display:flex;flex-wrap:wrap;gap:6px}
.tvg-tznote-quick a{background:#fff;border:1px solid var(--tvg-acc-line);border-radius:999px;
  padding:3px 11px;font-weight:500}

/* Поле поиска в окне выбора города: триста городов алфавитом на телефоне
   пролистываются минуту. */
.tvg-city-find{width:100%;box-sizing:border-box;margin:0 0 14px;padding:9px 14px;font:inherit;
  font-size:15px;border:1px solid var(--tvg-line);border-radius:999px;background:#fff;color:var(--tvg-ink)}
.tvg-city-find:focus{outline:none}
.tvg-abc-row[hidden]{display:none}
.tvg-modal-body a[hidden]{display:none}

/* ============ поиск ============ */
/* Выдача делится на каналы, которые человек может смотреть, и всё остальное:
   без деления запрос «футбол» отдавал болгарские и киргизские каналы
   вперемешку с Матчем. */
.tvg-found-more{margin:10px 0 0}
.tvg-found-more summary{cursor:pointer;color:var(--tvg-acc);font-size:14px;padding:6px 0}
.tvg-found .tvg-p{align-items:flex-start}
.tvg-found time{flex:0 0 74px}
.tvg-city-hit{display:flex;align-items:center;gap:8px}


/* ============ обводка фокуса ============ */
/*
 * Twenty Twenty-One рисует на фокусе `outline: 2px dotted` — точечную рамку
 * поверх полей, кнопок и ссылок (её правила на строках 1173, 1246, 1634,
 * 1746, 1838 темы). В сетке телепрограммы это выглядит грязно, а появляется
 * ещё и от простого клика мышью.
 *
 * Убираем не обводку как таковую, а обводку от мыши: клавиатурный фокус
 * обязан оставаться видимым, иначе страницей нельзя пользоваться без мыши.
 * :focus-visible браузер зажигает только при работе с клавиатуры.
 * !important — потому что правила темы специфичнее наших классов, тот же
 * случай, что с чёрными плашками на кнопках.
 */
.tvg-wrap :focus,
.tvg-modal :focus{outline:none !important}
.tvg-wrap :focus-visible,
.tvg-modal :focus-visible{outline:2px solid var(--tvg-acc) !important;outline-offset:2px !important}

/* ============ азбука в списке каналов ============ */
/* Восемьсот ссылок без указателя — список, в котором свой канал ищут
   глазами. Строка букв ведёт к своей группе, поле над ней прячет лишние
   строки на месте. */
.tvg-abc-nav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px}
.tvg-abc-nav a{display:inline-block;min-width:26px;padding:4px 6px;text-align:center;
	border:1px solid var(--tvg-line);border-radius:6px;font-size:13px;font-weight:700;
	color:var(--tvg-ink);text-decoration:none;line-height:1.2}
.tvg-abc-nav a:hover{border-color:var(--tvg-acc);color:var(--tvg-acc)}
.tvg-abc-list a[hidden]{display:none}

.tvg-col{scroll-margin-top:12px}

/* Ссылки в азбуке каналов: заглушка логотипа отбивается от названия, иначе
   в списке читается «A2A2» и «БСБСТ». Тема по умолчанию красит их синим с
   подчёркиванием — для указателя на восемьсот строк это рябит. */
#tvg-ch-abc .tvg-abc-list a{display:inline-flex;align-items:center;gap:6px;
	text-decoration:none;color:var(--tvg-ink);line-height:1.25}
#tvg-ch-abc .tvg-abc-list a:hover{color:var(--tvg-acc);text-decoration:underline}

/* Переход на соседний день под списком передач. Доскроллив сутки до конца,
   человек хочет следующий день, а лента дней осталась наверху. */
.tvg-daynav{display:flex;justify-content:space-between;gap:10px;margin:12px 0 4px}
.tvg-daynav a{flex:0 1 auto;background:var(--tvg-panel);border:1px solid var(--tvg-line);
  border-radius:10px;padding:10px 16px;text-decoration:none;color:var(--tvg-acc);font-size:15px}
.tvg-daynav a:hover{border-color:var(--tvg-acc-line);background:var(--tvg-acc-soft)}
/* Единственная кнопка «вперёд» обязана стоять справа, а не слева: у неё
   flex:0 1 auto, и без этого она прилипала к левому краю там, где вчерашнего
   дня уже нет (первый день архива). */
.tvg-daynav-next:only-child{margin-left:auto}