@charset "UTF-8";
/*
 * responsive.css — адаптивный слой поверх base_style.min.css
 *
 * ВАЖНО: @charset "UTF-8" обязателен — без него браузер видит этот файл
 * в той же кодировке что HTML (windows-1251), и UTF-8 русские строки
 * в селекторах вида [data-label="Осадки"] декодируются как мусор и
 * не матчатся с DOM-атрибутами (которые в Unicode после парсинга
 * cp1251 HTML).
 * Подключается после base_style.min.css в header.tpl.
 *
 * Стратегия:
 *  - На широких экранах (≥1230px) — НИЧЕГО не меняем, всё как было.
 *  - На узких экранах (<1230px) — переопределяем layout: три колонки складываются
 *    в одну, фикс-ширины растягиваются, элементы перестают флоатиться.
 *
 * Порядок в одноколоночной раскладке (через CSS order):
 *   1. center (основной контент: прогноз)
 *   2. right (Сейчас за окном, опрос, список городов)
 *   3. left (новости, баннеры)
 *
 * Что осознанно НЕ трогаем на этом шаге (это будут отдельные итерации):
 *  - внутренности виджетов в колонках (там много фикс-ширин 250-300px,
 *    они частично могут переполнять)
 *  - адаптация баннеров (разные размеры для разных ширин)
 *  - адаптация шапки (часы, информер) — кроме base layout
 *  - таблицы прогноза — превратить в карточки на узких
 */

/* Базовая защита от горизонтального скролла */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Шапка (.bg_header) ---
   Раньше эти правила лежали inline в header.tpl и переопределяли responsive.css
   из-за порядка в head. Перенесены сюда. На десктопе 250px резервируют место
   под фоновую картинку (которая выключена), на узких — высота по содержимому. */
.bg_header {
    margin: 0 auto;
    background: none no-repeat center center transparent;
    height: 250px;
}

/* ===== Адаптивный layout: < 1230px ===== */
@media (max-width: 1229px) {

    /* --- Контейнеры верхнего уровня ---
       base_style: .header,.footer{width:1230px}, #content{width:1230px}.
       #content имеет ID-специфичность, поэтому пишем его явно.
       Padding — vw чтобы тоже масштабировался. */
    .header,
    .footer,
    #content,
    div.content {
        width: auto;
        max-width: 100%;
        padding-left: clamp(6px, 2vw, 14px);
        padding-right: clamp(6px, 2vw, 14px);
        box-sizing: border-box;
    }

    /* --- Шапка (.bg_header) ---
       base_style: .bg_header{height:250px} — резервирует место под фон.
       Раз фона нет, высоту считаем по содержимому. */
    .bg_header {
        height: auto;
        background: none;
    }

    /* Шапка: на узких сохраняем горизонтальный layout — лого слева,
       .topright (часы + дата + кнопка «Размести информер») справа.

       Паттерн «space-between → wrap-center» через margin:auto:
       - В одной строке: margin-right:auto у лого + margin-left:auto у topright
         расталкивают их к краям (как justify-content:space-between).
       - При flex-wrap: каждый элемент в своей строке, margin:auto автоматически
         центрирует элемент в строке.

       (Если бы использовали justify-content:center + flex-grow на topright,
       второй элемент растягивался на 100% и нарушал визуальный порядок.) */
    .header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .topleft {
        width: auto;
        max-width: 100%;
        float: none;
        height: auto;
        text-align: left;
        flex: 0 0 auto;
        margin-right: auto;
    }
    .topright {
        width: auto;
        max-width: 100%;
        float: none;
        height: auto;
        text-align: right;
        flex: 0 0 auto;
        min-width: 0;
        margin-left: auto;
        color: #fff;
    }

    /* Декоративные градиенты по краям шапки */
    .fade_left,
    .fade_right {
        display: none;
    }

    /* Логотип pogodavtomske.ru (222×164). Fluid от 80 до 200 по ширине окна. */
    .topleft .main img {
        margin-top: 6px !important;
        max-width: clamp(80px, 20vw, 200px);
        width: auto;
        height: auto;
    }

    /* Clear-фикс <div style="clear:both">&nbsp;</div>: в одном из них ещё
       margin-bottom:100px торчит между блоками — скрываем. */
    .bg_header > div[style*="clear"],
    #content > div[style*="clear"] {
        display: none;
    }

    /* min-height:260px у первого blockm — резерв под уголковый баннер десктопа */
    #content > .blockm[style*="min-height"] {
        min-height: 0 !important;
    }

    /* base_style: .headblock{width:600px; height:150px; margin-top:76px} —
       контейнер часов/даты/кнопки. На узких это единая сущность —
       внутри выравнивание по левому краю (как на десктопе),
       сам блок выровнен правым краем .topright (text-align:right у родителя). */
    .headblock {
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
        display: inline-block;
        text-align: left;
    }

    /* Часы: эффект тени через .timeshadow на мобильном лишний шум */
    .timeblock {
        float: none;
        margin: 0;
        text-align: left;
        display: inline-block;
    }
    .topright .timeshadow,
    .topright .dateshadow {
        display: none;
    }
    .topright .time {
        margin: 0;
    }
    /* Часы fluid 18-32 (на десктопе 36). На десктопе td chcolor:#000
       работают как тень под .timeshadow — у нас она отключена, поэтому белый. */
    .topright .time tr td {
        font-size: clamp(18px, 4vw, 32px);
        color: #fff;
    }
    .topright .date {
        margin: 4px 0 0;
        text-align: left;
        position: static;
        /* На узких уменьшаем шрифт даты (14px → 11-13 по vw) чтобы headblock
           помещался рядом с лого на нормальных мобилках 360+ */
        font-size: clamp(11px, 3.2vw, 14px);
    }

    /* «Размести информер»: на узких показываем только иконку-кнопку.
       КЛЮЧЕВОЕ: в base_style `div.logo1 { width: 250px }` — это
       реально держало всю шапку в 250px (через max-content родителей).
       Сбрасываем width на auto.
       font-size:0 убирает текстовую подпись «Размести информер на своём сайте»,
       чтобы не растягивала контейнер. */
    .topright .logo1 {
        margin-top: 6px;
        font-size: 0;
        line-height: 0;
        display: inline-block;
        width: auto;
    }
    .topright .logo1 a {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        line-height: normal;
    }
    .topright .logo1 .informer_but {
        display: inline-block;
        vertical-align: middle;
    }

    /* Топ-баннер 1000×100 не помещается. Подмену на мобильные форматы — отдельно. */
    .top_full,
    .top_full_block,
    .big_top_full,
    .small_top_full {
        display: none;
    }

    /* Каркас колонок: снимаем float у всех. Сами раскладки ниже —
       отдельными media (768-1229 grid / ≤767 stack). */
    .left,
    .center,
    .right,
    #center,
    .subcenter,
    #rightsubcenter {
        float: none;
        margin: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* На совсем узких — компенсация для лого (clamp от vw на 320 даёт ~64px). */
@media (max-width: 480px) {
    .topleft .main img {
        max-width: clamp(110px, 30vw, 200px);
    }
    /* На очень узких (≤359) даём дате nowrap — иначе при wrap pipe `|`
       может висеть в конце строки. На 360+ разрешаем перенос — это даёт
       max-content date == ширина одного слова (~80px вместо 250px) и
       шапка помещается рядом с лого в одной строке. */
}

/* === Промежуточная раскладка 900-1229: 2 колонки ===
   Раньше брал с 768, но на 768-899 центр выходил уже 470px, а таблица прогноза
   .whdisplay имеет фиксированную минимальную ширину ~660px (7 колонок по 50-120px)
   и выпадала за грид → sidebar уезжал вправо за viewport. Поднял до 900,
   чтобы у центра было ~600px минимум.

   Слева центр, справа объединённый sidebar (правая колонка сверху, левая снизу). */
@media (min-width: 900px) and (max-width: 1229px) {
    div.content,
    #content {
        display: grid;
        /* minmax(0, 1fr) — критично: иначе центр не сможет shrink ниже intrinsic
           min-content и выпадет sidebar. С 0 grid позволяет таблице получить
           любую ширину, table-layout/max-width дальше регулируется */
        grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 320px);
        grid-template-areas:
            "center   right"
            "center   left";
        gap: 12px;
    }
    #center, .center { grid-area: center; }
    .right           { grid-area: right; }
    .left            { grid-area: left; }
    .left, .center, .right, #center {
        width: auto;
        display: flex;
        flex-direction: column;
        min-width: 0; /* чтобы вложенные таблицы не растягивали grid-track */
    }
    .subcenter, #rightsubcenter { width: auto; min-width: 0; }

    /* Таблица прогноза .whdisplay по умолчанию имеет ширину по содержимому
       и прилипает к левому краю центра. Растягиваем на всю ширину блока.

       Селектор именно table.whdisplay: в base_style.css у неё жёстко
       width: 653px, и правило с меньшей специфичностью проигрывает.
       table-layout: fixed обязателен — у центра тут ~575px, а min-content
       таблицы (6-7 колонок с заданными width) те же 653px. */
    table.whdisplay {
        width: 100%;
        margin-left: 0;
        table-layout: fixed;
    }
    /* При table-layout: fixed браузер всё равно раздвинет таблицу до суммы
       px-ширин колонок из первой строки (они прописаны инлайном в шаблонах),
       поэтому ширины сбрасываем — колонки делятся поровну. */
    table.whdisplay td {
        width: auto !important;
        overflow-wrap: break-word;
    }

    /* Таблица показаний на странице фактической погоды: width="640" атрибутом. */
    table.current-table {
        width: 100%;
    }
}

/* === Раскладка ≥481 ≤767 (узкий планшет / альбомная ориентация мобильника) ===
   Один столбец, но баннеры в .bannerbox и .adsbox идут флексом по 2 в ряд
   (полная ширина для одного баннера 250×100 — много пустоты). */
@media (min-width: 481px) and (max-width: 899px) {
    .bannerbox,
    .adsbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .bannerbox > .banner,
    .adsbox > .banner {
        flex: 0 1 250px;
        margin: 0;
    }
    /* Заголовок «Ненавязчивая реклама» — на всю ширину над сеткой */
    .bannerbox > h2,
    .adsbox > h2 {
        flex: 1 1 100%;
    }
}

/* === Узкая раскладка ≤899: один столбец стопкой ===
   Покрывает мобильные (≤480), узкие планшеты (481-767) и крупные планшеты
   до 899 (где двух-колоночный grid ещё не помещается из-за минимальной
   ширины таблицы прогноза). */
@media (max-width: 899px) {
    div.content,
    #content {
        display: flex;
        flex-direction: column;
    }
    .left, .center, .right, #center,
    .subcenter, #rightsubcenter {
        width: 100%;
    }
    /* Порядок: центр сверху → правая (с «Сейчас за окном») → левая (новости/баннеры) */
    .center, #center { order: 1; }
    .right            { order: 2; }
    .left             { order: 3; }
}

/* ===== Тонкая адаптация для совсем узких (мобильные ≤480) =====
   Пока минимум — большую работу делаем отдельными итерациями. */
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }
}

/* ===== Panel (кнопки прогнозов) =====
   В forecast.tpl панель под прогнозом — layout-таблица 3 ячейки:
     [прогноз на 10 дней] | [достоверность | версия для печати] | [прогноз на 3 дня]
   На узких 3 ячейки не помещаются — превращаем в вертикальный стек:
   2 большие кнопки (на 10/на 3) сверху, текстовые ссылки между ними. */
@media (max-width: 768px) {
    .panel table,
    .panel tbody,
    .panel tr,
    .panel td {
        display: block;
        width: auto !important;
        height: auto !important;
        text-align: center !important;
        padding: 0;
    }
    .panel td {
        margin: 6px 0;
    }
    /* Большие кнопки .btn — на всю ширину блока (но не шире 280) */
    .panel a.btn {
        width: auto !important;
        max-width: 280px;
        margin: 0 auto;
        display: block;
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Текстовые ссылки в центральной ячейке (достоверность / печать) —
       inline-block, чтобы помещались рядом если хватает места, иначе wrap */
    .panel td a:not(.btn) {
        display: inline-block;
        margin: 4px 8px;
        white-space: nowrap;
    }
    .panel td a:not(.btn) img {
        vertical-align: middle;
        margin-right: 3px;
    }
}

/* ===== Баннеры: центрирование внутри блока на узких =====
   base_style: .banner{ width:252px } прижимал баннер к левому краю блока
   (margin-left:3px). На узких блок растянут на 100%, баннер 252px торчит
   слева — некрасиво. Центрируем. */
@media (max-width: 1229px) {
    .banner {
        width: auto;
        max-width: 100%;
        margin: 6px auto;
        text-align: center;
    }
    /* Иконки и изображения внутри баннеров */
    .banner img,
    .banner span object,
    .banner span object embed {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
    /* «Ненавязчивая реклама» — обёртка .bannerbox в .left и .adsbox в .right.
       Их дочерние баннеры тоже центрируем. */
    .bannerbox,
    .adsbox {
        text-align: center;
    }
    /* JS-baннеры от i.solo.rde.ru вставляют <iframe> или <span class="bplace">
       — пусть тоже не торчат влево */
    .bplace,
    [id^="bannerplace_"],
    [class*="banner"] iframe {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== Список городов Томской области (right.tpl, .cities-list) =====
   19 ссылок столбиком — на узких слишком длинно. На ≤1229px разбиваем
   в 2 колонки через CSS columns (нативное, без правки HTML).
   На самых узких (≤360) — оставляем одну колонку, читаемее. */
@media (max-width: 1229px) and (min-width: 361px) {
    .cities-list {
        column-count: 2;
        column-gap: 14px;
    }
    .cities-list a {
        display: inline-block;
        width: 100%;
        line-height: 1.5;
        /* избегаем разрыва ссылки между колонками */
        break-inside: avoid;
    }
    .cities-list br {
        display: none;
    }
}

/* ===== Гороскоп (modules/horoscopes.tpl) =====
   Десктоп: одна картинка /images/horo.png 263×62 с HTML image-map (кликабельные
   области по pixel-координатам). На узких картинку нельзя масштабировать —
   image-map поломается. Поэтому показываем альтернативную сетку с символами
   зодиака. На десктопе она скрыта. */

/* По умолчанию — сетка спрятана, видна только картинка с map */
.horo-grid {
    display: none;
}

@media (max-width: 1229px) {
    /* На узких — скрываем картинку с image-map, показываем сетку */
    .horo-img {
        display: none;
    }
    .horo-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin: 6px 0 4px;
    }
    .horo-grid a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 4px;
        background: #161616;
        border-radius: 4px;
        text-decoration: none;
        color: #aaa;
        font-size: clamp(10px, 2.5vw, 12px);
        line-height: 1.2;
    }
    .horo-grid a:hover {
        background: #1c1c1c;
        color: #fff;
    }
    .horo-symbol {
        font-size: clamp(18px, 5vw, 26px);
        color: #FCC600;
        line-height: 1;
    }
}

/* ===== «Сейчас за окном» (modules/current.tpl) на узких — узнаваемо как в старой
   m.pogodavtomske.ru: крупная иконка слева, очень крупная температура справа,
   ниже компактно ветер/давление/восход. */
@media (max-width: 899px) {
    /* Главный блок (.blockm, перенесённый в #content или внутри .right) */
    #content > .blockm > table[style*="min-height"] {
        min-height: 0;
        padding-top: 0 !important;
    }
    /* Иконка погоды в первой ячейке — крупная */
    #content > .blockm > table img[src*="cur_weather"] {
        width: clamp(70px, 22vw, 110px);
        height: auto;
    }
    /* Температура «12.8°c» в первой строке — inline-style font-size:30px,
       перебиваем на 40-52px (max шире чем экран не растягиваем) */
    #content > .blockm #temp,
    #content > .blockm > table td p .yellow[style*="font-size"] {
        font-size: clamp(36px, 11vw, 52px) !important;
        line-height: 1;
    }
    /* «Ощущается как» — мельче */
    #content > .blockm > table td p .yellow:not([style]) {
        font-size: clamp(14px, 4vw, 18px);
    }
}

/* ===== Прогноз 3 дня (forecast.tpl, .whdisplay) → карточки на ≤768px =====
   На ≥769 — оставляем исходную 7-колоночную таблицу.
   На ≤768 каждая tr.forecast-row становится карточкой с осмысленным
   2-колоночным layout (по образцу старой m.pogodavtomske.ru):

   ┌──────────────────────────────────┐
   │ ☁️ icon │ Сегодня, 25 мая, пнд   │
   │ погода  │ День: 12°c  крупно    │
   ├─────────┴────────────────────────┤
   │ Ветер: 6 м/с ю-з                  │
   │ Давление: 754                     │
   │ Солнце: ☀ 4:48 / 21:47 / 16:59    │
   │ Луна:   🌙 14:56 / 2:47            │
   └──────────────────────────────────┘
   Экстремумы — мелкой строкой под карточкой.

   Каждый <td> позиционируется через grid-area по data-label. */
@media (max-width: 768px) {
    .whdisplay,
    .whdisplay tbody {
        display: block;
        width: auto !important;
        height: auto !important;
    }
    /* Шапка таблицы — заменяется на data-label у каждой ячейки, скрываем. */
    .whdisplay tr:first-child {
        display: none;
    }
    /* Строка с экстремумами (colspan=7) — мелким текстом под карточкой */
    .whdisplay tr td[colspan] {
        display: block;
        background: transparent !important;
        text-align: center;
        font-size: 11px;
        padding: 4px 0 10px;
        color: #888;
        width: auto !important;
        height: auto !important;
    }

    /* Карточка: одна tr.forecast-row = одна дата.
       Grid: слева иконка погоды + текст погоды; справа дата сверху, температура
       снизу. Под этой шапкой — ветер/давление/солнце/луна в один столбец. */
    .whdisplay .forecast-row {
        display: grid;
        grid-template-columns: clamp(80px, 25vw, 110px) 1fr;
        grid-template-areas:
            "icon  date"
            "icon  temp"
            "wind     wind"
            "pressure pressure"
            "sun      sun"
            "moon     moon";
        column-gap: 12px;
        row-gap: 4px;
        background: #161616;
        border-radius: 6px;
        margin: 0 0 8px;
        padding: 10px 12px;
        width: auto !important;
        height: auto !important;
    }
    .whdisplay .forecast-row td {
        display: block;
        border: none !important;
        padding: 0;
        background: transparent !important;
        font-size: 13px;
        line-height: 1.4;
        width: auto !important;
        height: auto !important;
    }
    /* Привязка td к grid-areas через data-label */
    .whdisplay .forecast-row td[data-label="Осадки"]      { grid-area: icon;     text-align: center; }
    .whdisplay .forecast-row td[data-label="Дата"]        { grid-area: date;     font-size: 15px; }
    .whdisplay .forecast-row td[data-label="Температура"] { grid-area: temp; }
    .whdisplay .forecast-row td[data-label="Ветер"]       { grid-area: wind; }
    .whdisplay .forecast-row td[data-label="Давление"]    { grid-area: pressure; }
    .whdisplay .forecast-row td[data-label="Солнце"]      { grid-area: sun; }
    .whdisplay .forecast-row td[data-label="Луна"]        { grid-area: moon; }

    /* Гасим наследуемый от таблицы text-align:center — в карточке всё слева */
    .whdisplay .forecast-row td {
        text-align: left;
    }

    /* Строки характеристик: подпись и значение — две колонки, значения всех
       строк выровнены по одной вертикали. Подписи только здесь: в шапке
       карточки (дата/иконка/температура) они не нужны. */
    .whdisplay .forecast-row td[data-label="Ветер"],
    .whdisplay .forecast-row td[data-label="Давление"],
    .whdisplay .forecast-row td[data-label="Солнце"],
    .whdisplay .forecast-row td[data-label="Луна"] {
        position: relative;
        padding-left: 92px;
        min-height: 18px;
    }
    .whdisplay .forecast-row td[data-label="Ветер"]::before,
    .whdisplay .forecast-row td[data-label="Давление"]::before,
    .whdisplay .forecast-row td[data-label="Солнце"]::before,
    .whdisplay .forecast-row td[data-label="Луна"]::before {
        content: attr(data-label) ":";
        position: absolute;
        left: 0;
        top: 0;
        color: #888;
    }

    /* Сбрасываем float:right у времени восхода/заката (base_style.css:368):
       в узкой колонке таблицы он прижимал значение к правому краю, в карточке
       это давало разрыв через пол-экрана. */
    .whdisplay .forecast-row td.orign p {
        padding: 0;
        text-align: left;
    }
    .whdisplay .forecast-row td.orign p span {
        float: none;
        color: #ccc;
        margin-left: 4px;
    }
    .whdisplay .forecast-row td .yellow,
    .whdisplay .forecast-row td p {
        display: inline;
    }
    /* Иконка погоды в шапке карточки — крупная */
    .whdisplay .forecast-row td[data-label="Осадки"] img {
        max-width: 100%;
        max-height: clamp(60px, 18vw, 90px);
        height: auto;
        display: block;
        margin: 0 auto;
    }
    /* Описание погоды (текст под иконкой) — мельче, сразу под картинкой */
    .whdisplay .forecast-row td[data-label="Осадки"] {
        font-size: 11px;
        color: #aaa;
        line-height: 1.2;
    }
    /* Температура — крупнее, как в старой mobile */
    .whdisplay .forecast-row td[data-label="Температура"] .yellow {
        font-size: clamp(24px, 7vw, 36px);
        font-weight: bold;
        line-height: 1;
    }
    .whdisplay .forecast-row td[data-label="Температура"] {
        font-size: 14px;
    }
    /* Иконка фазы луны — вплотную к подписи, а не отдельной строкой:
       в разметке она идёт перед <br>, поэтому выносим её из потока. */
    .whdisplay .forecast-row td[data-label="Луна"] img {
        position: absolute;
        left: 52px;
        top: 1px;
        max-height: 16px;
        margin: 0;
    }
    /* <br> после иконки оставлял пустую строку — время восхода поднимаем к подписи */
    .whdisplay .forecast-row td[data-label="Луна"] br {
        display: none;
    }
}

/* ===== Карточки прогноза для телефона (.mcard) =====
   Разметка в forecast.tpl повторяет боевую m.pogodavtomske.ru, размеры и цвета
   перенесены из mobile/style/default.css. Классы с префиксом mc- намеренно:
   имена вроде .right/.b/.block заняты десктопом, и адаптивные правила для
   правой колонки (.right{float:none}) ломали раскладку внутри карточки. */
.mcard {
    display: none;
}

@media (max-width: 768px) {
    .mcard {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        overflow: hidden;
        background: #1c1c1c;
        border: 2px solid #191919;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
        font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #aaa;
        box-sizing: border-box;
    }
    .mcard .mc-col {
        min-width: 0;
    }
    .mcard .mc-day {
        width: 35%;
    }
    .mcard .mc-temp {
        width: 30%;
        text-align: right;
    }
    .mcard .mc-sun {
        width: 35%;
        margin-left: auto;
    }

    .mcard .mc-date {
        margin-bottom: 20px;
        line-height: 17px;
        white-space: nowrap;
    }
    .mcard .mc-day img {
        margin-left: 10px;
        max-width: 100%;
        height: auto;
    }

    .mcard .mc-day-temp {
        margin: 20px 0 16px;
        white-space: nowrap;
    }
    .mcard .mc-t28 {
        font-size: 28px;
        color: #FCC600;
    }
    .mcard .mc-sign {
        font-size: 20px;
        color: #FCC600;
    }
    .mcard .mc-night {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 4px;
    }
    .mcard .mc-night-label {
        color: #aaa;
    }
    .mcard .mc-night-val {
        font-size: 16px;
        font-weight: bold;
        color: #aaa;
        white-space: nowrap;
    }
    .mcard .mc-sign16 {
        font-size: 12px;
    }

    .mcard .mc-row {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        color: #FCC600;
        line-height: 1.25;
    }
    .mcard .mc-row-gap {
        margin-bottom: 20px;
    }
    .mcard .mc-lbl,
    .mcard .mc-val {
        white-space: nowrap;
    }
    .mcard .mc-val {
        margin-left: auto;
        text-align: right;
    }
    .mcard .mc-strong {
        font-weight: bold;
        white-space: normal;
    }

    .mcard-today {
        display: none;
    }

    .has-mcards .whdisplay {
        display: none;
    }
    .block:has(.mcard) {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .blockm[style*="min-height"] {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 14px;
    }
    .footer .left,
    .footer .center {
        float: none;
        width: auto;
        margin: 0;
        text-align: center;
    }
    .footer .left {
        order: 0;
    }
    .footer .center {
        order: 1;
    }
    .footer .right {
        display: contents;
    }
    .footer .counter,
    .footer .center {
        display: inline-block;
    }
    .footer .counter a,
    .footer .center a,
    .footer .center a:first-child {
        display: inline-block;
        margin: 0;
    }
    .footer .left > div[style*="clear"],
    .footer .banner:empty,
    .footer .cfx {
        display: none;
    }
    .footer .right p {
        margin: 0;
    }
    .footer .right p:first-of-type {
        order: 2;
    }
    .footer .right p:not(:first-of-type) {
        width: 100%;
        order: 3;
        text-align: center;
        margin: 3px 0;
    }
    .footer .right img {
        width: 48px;
        height: auto;
        vertical-align: middle;
    }
    .footer .right p a {
        font-size: 13px;
    }
    .footer-bottom {
        width: 100%;
        order: 4;
        text-align: center;
        padding: 4px 0 14px;
        margin: 4px 0 0;
    }
    .footer-bottom p {
        margin: 0 0 6px;
    }
}

@media (max-width: 768px) {
    .nav {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        margin-bottom: 12px;
        padding-bottom: 2px;
        text-align: left;
        font-size: 0;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
    .nav.scroll-right {
        -webkit-mask-image: linear-gradient(to right, #000 78%, rgba(0, 0, 0, 0.12));
        mask-image: linear-gradient(to right, #000 78%, rgba(0, 0, 0, 0.12));
    }
    .nav.scroll-left {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12), #000 18%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12), #000 18%);
    }
    .nav.scroll-left.scroll-right {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12), #000 18%, #000 78%, rgba(0, 0, 0, 0.12));
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12), #000 18%, #000 78%, rgba(0, 0, 0, 0.12));
    }
    .nav a,
    .nav .active {
        flex: 0 0 auto;
        font-size: 12px;
        line-height: 1;
        padding: 7px 10px;
        border-radius: 6px;
        background: #1c1c1c;
        border: 1px solid #262626;
        text-decoration: none;
    }
    .nav .active {
        background: #2b2b2b;
        border-color: #3a3a3a;
        color: #FCC600;
    }

    .panel table {
        display: block;
        width: 100% !important;
    }
    .panel tbody {
        display: block;
    }
    .panel tr {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .panel td {
        display: block;
        width: auto !important;
        box-sizing: border-box;
        min-width: 0;
        flex: 1 1 0;
    }
    .panel td:nth-child(2) {
        order: 3;
        flex: 1 1 100%;
        text-align: center;
        margin-top: 2px;
    }
    .panel a.btn {
        width: 100% !important;
        font-size: 13px;
    }
    .panel td:nth-child(2) a {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .mcard .mc-range {
        font-size: 22px;
        white-space: nowrap;
    }
    .mcard .mc-range .mc-sign {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .mcard {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        padding: 13px 14px;
        background: #141414;
        border: 1px solid #242424;
        border-radius: 12px;
        margin-bottom: 8px;
        font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
        color: #9a9a9a;
        font-size: 13px;
        overflow: visible;
    }
    .mcard .mc-head {
        display: flex;
        align-items: baseline;
        gap: 7px;
    }
    .mcard .mc-tag {
        font-size: 10px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #FCC600;
    }
    .mcard .mc-when {
        color: #e8e8e8;
        font-size: 13px;
    }
    .mcard .mc-body {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mcard .mc-icon {
        width: 52px;
        height: auto;
        flex: 0 0 auto;
    }
    .mcard .mc-desc {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        line-height: 1.3;
        color: #7d7d7d;
    }
    .mcard .mc-temps {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex: 0 0 auto;
        margin-left: auto;
        line-height: 1;
    }
    .mcard .mc-t-day {
        font-size: 34px;
        color: #FCC600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }
    .mcard .mc-deg {
        font-size: 22px;
        vertical-align: top;
        line-height: 1.2;
    }
    .mcard .mc-t-night {
        margin-top: 5px;
        font-size: 12px;
        color: #8a8a8a;
        font-variant-numeric: tabular-nums;
    }
    .mcard .mc-meta {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid #232323;
        font-size: 12px;
        color: #8f8f8f;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .mcard.mcard-today {
        display: none;
    }
    .mcard .mc-meta {
        justify-content: flex-start;
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .mcard .mc-t-range {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .mcard .mc-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        justify-content: initial;
    }
    .mcard .mc-meta-item {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mcard .mc-meta-item:nth-child(2) {
        text-align: center;
    }
    .mcard .mc-meta-item:nth-child(3) {
        text-align: right;
    }
}

.mcur {
    display: none;
}

@media (max-width: 768px) {
    .mcard.mcur {
        display: flex;
        background: #161616;
        border-color: #2b2b2b;
        margin-bottom: 12px;
    }
    .mcard.mcur .mc-icon {
        width: 66px;
    }
    .mcard.mcur .mc-t-day {
        font-size: 40px;
    }
    .mcard.mcur .mc-deg {
        font-size: 25px;
    }
    .mcard.mcur .mc-t-night {
        margin-top: 6px;
        font-size: 12px;
    }
}

.cwm {
    display: none;
}

/* Выбор информера (export.tpl). Раньше — таблицы с распорками по 20px,
   на телефоне они не переносились и вылезали за экран. Флекс даёт тот же
   ряд на десктопе и перенос на узких. */
.inf-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    margin: 0 0 14px;
}

.inf-item {
    display: block;
    max-width: 100%;
    text-align: center;
    cursor: pointer;
}

.inf-pic {
    display: block;
}

.inf-pic img {
    max-width: 100%;
    height: auto;
}

.inf-cap {
    display: block;
    padding: 6px 0 2px;
}

.inf-locality select {
    max-width: 100%;
}

.cw-graphs {
    display: block;
}

.cw-graph {
    margin: 0;
}

.cw-graphs-hint {
    display: none;
}

@media (max-width: 768px) {
    .cw-bare {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    .cw-bare .current-table {
        display: none;
    }

    .cwm {
        display: block;
        font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    .cw-card {
        box-sizing: border-box;
        background: #141414;
        border: 1px solid #242424;
        border-radius: 12px;
        padding: 13px 14px;
        margin-bottom: 8px;
        color: #9a9a9a;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
    }

    .cw-now {
        background: #161616;
        border-color: #2b2b2b;
    }

    .cw-head {
        display: flex;
        align-items: baseline;
        gap: 7px;
    }
    .cw-tag {
        flex: 0 0 auto;
        font-size: 10px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #FCC600;
    }
    .cw-when {
        min-width: 0;
        color: #e8e8e8;
        font-size: 13px;
    }

    .cw-body {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 9px;
    }
    .cw-icon {
        flex: 0 0 auto;
        width: 62px;
        height: auto;
    }
    .cw-desc {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        line-height: 1.3;
        color: #7d7d7d;
    }
    .cw-temps {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-end;
        margin-left: auto;
        line-height: 1;
        text-align: right;
    }
    .cw-t {
        font-size: clamp(34px, 11vw, 44px);
        color: #FCC600;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }
    .cw-deg {
        font-size: 0.58em;
        vertical-align: top;
        line-height: 1.15;
    }
    .cw-feels {
        margin-top: 6px;
        font-size: 12px;
        color: #8a8a8a;
        white-space: nowrap;
    }

    .cw-wind {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        margin-top: 9px;
        padding-top: 8px;
        border-top: 1px solid #232323;
        font-size: 12px;
        color: #8f8f8f;
    }
    .cw-wind-main {
        display: flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
    }
    .cw-wind-gust {
        flex: 0 0 auto;
        margin-left: auto;
        white-space: nowrap;
    }
    .cw-num {
        color: #cfcfcf;
        font-weight: bold;
    }

    .cw-arrow {
        flex: 0 0 auto;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 8px solid #8f8f8f;
        transform: rotate(var(--cw-wd, 0deg));
    }
    .cw-arrow--1 { --cw-wd: 0deg; }
    .cw-arrow--2 { --cw-wd: 45deg; }
    .cw-arrow--3 { --cw-wd: 90deg; }
    .cw-arrow--4 { --cw-wd: 135deg; }
    .cw-arrow--5 { --cw-wd: 180deg; }
    .cw-arrow--6 { --cw-wd: 225deg; }
    .cw-arrow--7 { --cw-wd: 270deg; }
    .cw-arrow--8 { --cw-wd: 315deg; }
    .cw-arrow--9 { display: none; }

    .cw-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 8px;
    }
    .cw-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cw-cell {
        min-width: 0;
    }
    .cw-cell-lbl {
        display: block;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6f6f6f;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .cw-cell-val {
        display: block;
        margin-top: 3px;
        font-size: clamp(15px, 4.4vw, 17px);
        line-height: 1.1;
        color: #dcdcdc;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }
    .cw-cell-unit {
        margin-left: 3px;
        font-size: 10px;
        letter-spacing: 0;
        color: #7d7d7d;
    }
    .cw-cell--wide {
        grid-column: 1 / -1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-top: 1px;
        padding-top: 10px;
        border-top: 1px solid #232323;
    }
    .cw-cell--wide .cw-cell-lbl {
        overflow: visible;
    }
    .cw-cell--wide .cw-cell-val {
        margin-top: 0;
    }

    .cw-astro {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .cw-astro-col {
        min-width: 0;
        padding-right: 12px;
    }
    .cw-astro-col + .cw-astro-col {
        padding-right: 0;
        padding-left: 12px;
        border-left: 1px solid #232323;
    }
    .cw-astro-h {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6f6f6f;
    }
    .cw-astro-time {
        display: block;
        margin-top: 6px;
        font-size: 14px;
        color: #dcdcdc;
        white-space: nowrap;
    }
    .cw-astro-arr {
        margin: 0 3px;
        color: #5c5c5c;
    }
    .cw-astro-sub {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: #7d7d7d;
    }
    .cw-sun-dot {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #FCC600;
        opacity: 0.55;
    }
    .cw-moon {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
    }

    .cw-graphs {
        display: flex;
        gap: 8px;
        margin: 0 0 6px;
        padding-bottom: 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cw-graphs::-webkit-scrollbar {
        display: none;
    }
    .cw-graph {
        box-sizing: border-box;
        flex: 0 0 88%;
        scroll-snap-align: start;
        background: #141414;
        border: 1px solid #242424;
        border-radius: 12px;
        padding: 11px 12px;
    }
    .cw-graph .lable_title {
        display: inline;
        font-size: 11px;
        line-height: 1.3;
        font-weight: normal;
        color: #8f8f8f;
    }
    .cw-graph h2 {
        margin: 0 0 8px;
        padding: 0;
        background: none;
    }
    .cw-graph a,
    .cw-graph img {
        display: block;
    }
    .cw-graph img {
        width: 100%;
        height: auto;
        border-radius: 6px;
    }
    .cw-graphs-hint {
        display: block;
        margin: 0 0 12px;
        font-size: 11px;
        color: #6f6f6f;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .cw-graphs,
    .nav {
        cursor: grab;
    }
    .cw-graphs.is-dragging,
    .nav.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }
    .cw-graphs.is-dragging img,
    .cw-graphs.is-dragging a {
        pointer-events: none;
    }
}

@media (max-width: 768px) {
    .cw-graphs a,
    .cw-graphs img,
    .nav a {
        -webkit-user-drag: none;
        user-select: none;
    }
    .cw-graphs.scroll-right {
        -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15));
        mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15));
    }
    .cw-graphs.scroll-left {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), #000 12%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), #000 12%);
    }
    .cw-graphs.scroll-left.scroll-right {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), #000 12%, #000 88%, rgba(0, 0, 0, 0.15));
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15), #000 12%, #000 88%, rgba(0, 0, 0, 0.15));
    }
}

@media (max-width: 768px) {
    .mcard .mc-meta-2 {
        grid-template-columns: 1fr 2fr;
        margin-top: 5px;
        padding-top: 0;
        border-top: none;
    }
    .mcard .mc-meta-2 .mc-meta-item:nth-child(2) {
        text-align: right;
    }
    .mcard .mc-meta-moon {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
    }
    .mcard .mc-moon {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        flex: 0 0 auto;
    }
    .mcard .mc-extremes {
        margin-top: 7px;
        padding-top: 6px;
        border-top: 1px solid #1e1e1e;
        font-size: 11px;
        color: #6f6f6f;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 768px) {
    .mcard .mc-arrow {
        display: inline-block;
        width: 0;
        height: 0;
        margin-right: 5px;
        vertical-align: 1px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 7px solid #8f8f8f;
        transform: rotate(var(--mc-wd, 0deg));
    }
    .mcard .mc-arrow[data-calm] {
        display: none;
    }
}