/* ==========================================================================
 * Погодний шар поверх дизайн-системи теми «mycities».
 *
 * Звідки що береться:
 *   · токени, ресет, шрифти — з бандла хрому (`chrome.<ver>.css`), який
 *     лінкується ПЕРЕД цим файлом. Їх тут не копіюють і не перевизначають.
 *   · своє — лише те, чого в темі немає й бути не може: холодні акценти,
 *     статуси якості повітря, температурна рампа, стрічка 24 годин, шкала діб,
 *     сонячна дуга, шкала надійності прогнозу.
 *
 * Головне правило верстки: **один піднятий обʼєкт на сторінку**. Герой «зараз»
 * має тінь і градієнт; усе інше — волосінь і повітря. Коли підняте все, не
 * підняте ніщо, і сторінка перетворюється на купу карток.
 *
 * Фолбеки в var() не косметика: якщо хром не приїхав (мережа лягла, кеш
 * порожній), сторінка мусить лишитись читабельною, а не білим по білому.
 * ========================================================================== */

/* ============================ 1. ТОКЕНИ ==================================== */

:root {
  /* Погодний шар: приглушені відтінки, щоб не сперечались із папером теми. */
  --sky: #2f6fa8;          /* холод, опади, «мокрі» акценти */
  --sky-soft: #e3ecf3;     /* заливка під небо в героєві */
  --sky-line: #c3d6e4;
  --frost: #7fb0cf;        /* сніг */
  --night-wash: rgba(58, 65, 82, .09);

  /* Статуси якості повітря (European AQI). Окремі від акценту: це стан, не серія. */
  --aqi-1: #2a7b3a;  --aqi-2: #77a32b;  --aqi-3: #e0b020;
  --aqi-4: #e07f22;  --aqi-5: #e5322a;

  /* Надійність прогнозу. Три рівні, і третій навмисно сірий, а не червоний:
     «моделі розійшлись» означає «невідомо», а не «буде погано». */
  --rel-high: #2a7b3a;
  --rel-mid: #e0b020;
  --rel-low: #b9b2a4;
}

/*
 * Токенів теми тут НЕ перевизначають, і це не лінощі.
 *
 * Перша версія намагалась дати їм фолбеки прямо в :root:
 *
 *     --paper: var(--paper, #faf7f0);
 *
 * Змінна, яка посилається сама на себе, за специфікацією стає недійсною на
 * етапі обчислення значення. Оскільки цей файл лінкується ПІСЛЯ бандла хрому,
 * зламане оголошення вигравало каскад і знищувало токен для всієї сторінки:
 * `color: var(--paper)` на активній вкладці переставав працювати, і чорний
 * текст лягав на чорний фон. На вигляд це було «пігулка без підпису», а не
 * помилка CSS.
 *
 * Тому фолбеки стоять там, де токен вживається: `var(--radius, 16px)`.
 */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================ 2. КАРКАС ==================================== */

.ph-main { padding-block: 16px 52px; }

.crumbs { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  margin: 0; padding: 0; font-size: 12.5px; color: var(--muted);
}
.crumbs .lang {
  flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--ink-2); background: var(--paper);
}
.crumbs .lang:hover { border-color: var(--line-strong); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .45; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--red-deep); }

/* minmax(0,…) в обох станах: інакше стрічка 24 годин (1536px) розсуває
   grid-колонку і вся сторінка їде горизонтально на телефоні. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.layout > * { min-width: 0; }
@media (max-width: 1040px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ============================ 3. ГЕРОЙ «ЗАРАЗ» ============================= */

.now {
  border: 1px solid var(--line); border-radius: var(--radius-lg, 22px);
  background:
    radial-gradient(120% 120% at 88% -20%, var(--sky-soft) 0%, transparent 62%),
    var(--paper);
  box-shadow: var(--shadow-2, 0 4px 18px rgba(14, 14, 15, .08));
  overflow: hidden;
}

.now-top { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 24px 26px 20px; }
@media (max-width: 640px) { .now-top { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px 18px; } }

.now-city { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.now-city h1 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 800;
  font-size: clamp(22px, 3vw, 32px); letter-spacing: -.025em; margin: 0; line-height: 1.08;
  text-wrap: balance;
}
/* Кваліфікатор області в H1: у розмітці частина заголовка, на вигляд — підпис
   під ним. Робити його окремим елементом поза h1 не можна: сенс правки саме в
   тому, щоб слова «Харківська область» були в заголовку сторінки. */
.now-city h1 .h1-obl {
  display: block; font-family: inherit; font-weight: 600;
  font-size: .46em; letter-spacing: -.01em; color: var(--muted); margin-top: 4px;
}
.now-city .date { font-size: 13px; color: var(--muted); font-weight: 600; }
.now-city .upd {
  margin-left: auto; font-size: 11.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.now-city .upd .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ph-pulse 1.6s infinite; }
@keyframes ph-pulse { 50% { opacity: .35; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .now-city .upd .d { animation: none; } }

.now-temp { display: flex; align-items: center; gap: 16px; }
.now-temp .big {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 800;
  font-size: clamp(60px, 9vw, 88px); line-height: .86; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.now-temp .wi { width: 70px; height: 70px; flex-shrink: 0; }

.now-side { display: flex; flex-direction: column; gap: 9px; justify-content: center; min-width: 0; }
.now-side .cond { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.now-side .feels { font-size: 14px; color: var(--ink-3); }
.now-hilo { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; }
.now-hilo .hi { color: var(--red-deep); }
.now-hilo .lo { color: var(--sky); }

.aqi-chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700;
}
.aqi-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--aqi-3); }
.aqi-chip.is-good .dot, .aqi-chip.is-fair .dot { background: var(--aqi-1); }
.aqi-chip.is-moderate .dot { background: var(--aqi-3); }
.aqi-chip.is-poor .dot { background: var(--aqi-4); }
.aqi-chip.is-very-poor .dot, .aqi-chip.is-extreme .dot { background: var(--aqi-5); }
.aqi-chip .lbl { color: var(--muted); font-weight: 600; }

/* Найближча година: рядок, заради якого сторінку відкривають, коли за вікном
   збирається на дощ. Тому він у героєві, а не в списку блоків нижче. */
.nowcast {
  display: flex; align-items: center; gap: 9px;
  margin: 0 26px 18px; padding: 10px 14px; border-radius: var(--radius-sm, 10px);
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
}
.nowcast.is-start { background: color-mix(in srgb, var(--sky) 12%, transparent); color: var(--sky); }
.nowcast.is-stop { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
@media (max-width: 640px) { .nowcast { margin: 0 18px 16px; } }

/* Попередження: червоне, і тільки коли є що сказати. Розмітка, яка кричить
   щодня, перестає означати будь-що. */
.warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 26px 18px; padding: 11px 14px; border-radius: var(--radius-sm, 10px);
  background: var(--red-soft); color: var(--red-deep);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.warn svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 640px) { .warn { margin: 0 18px 16px; } }

/* ============================ 4. СТРІЧКА 24 ГОДИН ========================== */

.hours { border-top: 1px solid var(--line); background: color-mix(in oklab, var(--paper) 82%, transparent); }
.hours-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 26px 2px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.hours-head .legend { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; }
.hours-head .legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  background: var(--night-wash); border: 1px solid var(--sky-line);
  vertical-align: -1px; margin-right: 5px;
}
@media (max-width: 640px) { .hours-head { padding: 12px 18px 2px; } .hours-head .legend { display: none; } }

.hours-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 26px 16px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .hours-scroll { padding: 4px 18px 14px; } }
.hours-track { position: relative; height: 176px; }

.hours-cols { position: absolute; inset: 0; display: flex; z-index: 2; }
.hours-cols .h { width: 64px; flex: 0 0 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; }
.hours-cols .h .tm { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hours-cols .h.now-col .tm { color: var(--ink); }
.hours-cols .h.now-col .tm::after { content: ""; display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--yellow-deep); margin: 3px auto 0; }
.hours-cols .h .wi { width: 24px; height: 24px; }
.hours-cols .h .pop { font-size: 10.5px; font-weight: 800; color: var(--sky); font-variant-numeric: tabular-nums; min-height: 14px; }

.hours-chart { position: absolute; left: 0; bottom: 0; z-index: 1; }
.hours-chart .area { fill: url(#tempFill); }
.hours-chart .line { fill: none; stroke: var(--yellow-deep); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hours-chart .night { fill: var(--night-wash); }
.hours-chart .dot { fill: var(--paper); stroke: var(--yellow-deep); stroke-width: 2; }
.hours-chart .val { font-size: 12px; font-weight: 800; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.hours-chart .sun-rule { stroke: var(--sky-line); stroke-width: 1; stroke-dasharray: 3 3; }
.hours-chart .sun-label { font-size: 10px; font-weight: 700; fill: var(--muted); text-anchor: middle; }
.hours-chart .base { stroke: var(--line); stroke-width: 1; }

/* ============================ 5. ПОКАЗНИКИ ================================= */

/* Не картки, а сітка пар «підпис / значення» на волосіні: картка всередині
   картки-героя зробила б два рівні підняття там, де потрібен один. */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius, 16px); overflow: hidden;
  background: var(--paper); margin-top: 18px;
}
.metrics .m { padding: 13px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.metrics .m:nth-child(4n) { border-right: 0; }
.metrics .m:nth-last-child(-n+4) { border-bottom: 0; }
.metrics .m .k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.metrics .m .v { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metrics .m .s { font-size: 11.5px; color: var(--muted); }

@media (max-width: 860px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics .m:nth-child(4n) { border-right: 1px solid var(--line); }
  .metrics .m:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .metrics .m:nth-child(2n) { border-right: 0; }
  .metrics .m:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ============================ 6. ВКЛАДКИ =================================== */

/* Це справжні адреси, а не JS-таби: кожна вкладка — окрема сторінка з власним
   заголовком, описом і місцем у сайтмапі. */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; margin: 24px 0 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
  background: var(--paper); text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tab:hover { border-color: var(--line-strong); background: var(--paper-2); }
.tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ============================ 7. ШКАЛА ДІБ ================================= */

/* Range-plot: усі доби на одній шкалі, тому смуги порівнянні між рядками.
   Заливка смуги — зріз температурної рампи, легенда під заголовком. */
.days { border: 1px solid var(--line); border-radius: var(--radius, 16px); overflow: hidden; background: var(--paper); }
.days-scale {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); background: var(--paper-2);
  font-size: 11.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums;
}
.days-scale .cap { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.days-scale .ramp {
  flex: 1; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #7dabca, #b6b3ab, #f0bd5a, #e8752e, #e5322a);
}

.day { display: block; border-bottom: 1px solid var(--line); }
.day:last-child { border-bottom: 0; }

summary.day-row { cursor: pointer; list-style: none; }
summary.day-row::-webkit-details-marker { display: none; }
summary.day-row::marker { content: ""; }

.day-row {
  width: 100%; display: grid; align-items: center; gap: 12px;
  grid-template-columns: 104px 30px 44px 46px minmax(90px, 1fr) 46px 20px;
  padding: 11px 18px; text-align: left; transition: background .15s;
}
.day-row:hover { background: var(--paper-2); }
.day[open] .day-row { background: var(--paper-2); }
.day-row .d { min-width: 0; }
.day-row .d b { display: block; font-size: 14px; font-weight: 800; }
.day-row .d span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-row .wi { width: 26px; height: 26px; margin: 0 auto; }
.day-row .pop { font-size: 11.5px; font-weight: 800; color: var(--sky); font-variant-numeric: tabular-nums; text-align: center; }
.day-row .pop.none { color: var(--line-strong); }
.day-row .t { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.day-row .t.lo { color: var(--muted); text-align: right; }
.day-row .t.hi { text-align: left; }
.day-row .rng { position: relative; height: 8px; border-radius: 999px; background: var(--paper-3); }
.day-row .rng .bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.day-row .chev { color: var(--muted); transition: transform .18s; justify-self: end; }
.day[open] .day-row .chev { transform: rotate(180deg); color: var(--ink); }

.day-body { padding: 2px 18px 16px; border-top: 1px dashed var(--line); background: var(--paper-2); }
.day-body p { margin: 12px 0 12px; font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 70ch; }
.day-body .day-meta { font-size: 12.5px; color: var(--muted); margin: 12px 0 8px; }
/* padding, а не розмір шрифту: 13px тут дає рядок 18px заввишки, а це нижче
   за мінімальний тап-таргет 24px (WCAG 2.5.8), і таких посилань на сторінці
   доби шістнадцять. */
.day-body .day-link { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 4px 0; }

.day-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.day-part { padding: 9px 11px; border-radius: var(--radius-sm, 10px); background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.day-part .wi { width: 22px; height: 22px; flex-shrink: 0; }
.day-part b { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.day-part span { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .day-row { grid-template-columns: 78px 24px 30px 32px minmax(36px, 1fr) 34px 16px; gap: 7px; padding: 11px 14px; }
  .day-row .d b { font-size: 13px; }
  .day-row .wi { width: 22px; height: 22px; }
  .day-body { padding: 2px 14px 14px; }
  .days-scale { padding: 9px 14px; }
}

/* ============================ 8. БІЧНА КОЛОНКА ============================= */

.aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--chrome-h, 120px) + 16px); }
@media (max-width: 1040px) { .aside { position: static; } }

.panel { border: 1px solid var(--line); border-radius: var(--radius, 16px); background: var(--paper); padding: 17px; }
.panel > h3 { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 13px; }

/* Сонячна дуга */
.sun { display: flex; flex-direction: column; gap: 8px; }
.sun svg { width: 100%; height: auto; display: block; }
.sun .arc { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 5; opacity: .55; }
.sun svg.is-night .arc, .sun svg.is-dusk .arc, .sun svg.is-dawn .arc { opacity: .3; }
.sun .ball.is-down { fill: var(--paper-3); stroke: var(--line-strong); }
.sun .ball.is-edge { fill: var(--yellow); stroke: var(--yellow-deep); opacity: .75; }
.sun-status { margin: 0; font-size: 13px; font-weight: 700; text-align: center; color: var(--ink-2); }
.sun .arc-done { fill: none; stroke: var(--yellow-deep); stroke-width: 3; stroke-linecap: round; }
.sun .ball { fill: var(--yellow); stroke: var(--yellow-deep); stroke-width: 2; }
.sun .ground { stroke: var(--line-strong); stroke-width: 1; }
.sun-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; }
.sun-times b { display: block; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink); font-weight: 800; }
.sun-len { font-size: 12px; color: var(--muted); text-align: center; margin: 0; line-height: 1.45; }

/* Метр AQI: стан, не серія, тому колір плюс число плюс слово. */
.aqi-meter { display: flex; flex-direction: column; gap: 9px; }
.aqi-meter .v { display: flex; align-items: baseline; gap: 8px; }
.aqi-meter .v b {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-size: 30px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.aqi-meter .v span { font-size: 13.5px; font-weight: 700; }
.aqi-meter.is-good .v span, .aqi-meter.is-fair .v span { color: var(--aqi-1); }
.aqi-meter.is-moderate .v span { color: var(--aqi-3); }
.aqi-meter.is-poor .v span { color: var(--aqi-4); }
.aqi-meter.is-very-poor .v span, .aqi-meter.is-extreme .v span { color: var(--aqi-5); }
.aqi-meter .bar { display: flex; gap: 2px; height: 8px; }
.aqi-meter .bar i { flex: 1; border-radius: 2px; opacity: .26; }
.aqi-meter .bar i.on { opacity: 1; }
.aqi-meter .bar i:nth-child(1) { background: var(--aqi-1); }
.aqi-meter .bar i:nth-child(2) { background: var(--aqi-2); }
.aqi-meter .bar i:nth-child(3) { background: var(--aqi-3); }
.aqi-meter .bar i:nth-child(4) { background: var(--aqi-4); }
.aqi-meter .bar i:nth-child(5) { background: var(--aqi-5); }
.aqi-meter .note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.aqi-meter .note a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Надійність прогнозу: єдиний блок, який говорить про власний прогноз погано. */
.rel { display: flex; flex-direction: column; gap: 11px; }
.rel-big { display: flex; align-items: baseline; gap: 9px; }
.rel-big b {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-size: 30px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--rel-high);
}
.rel-big span { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.rel-scale { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.rel-scale li {
  flex: 1; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
.rel-scale li.is-high { background: var(--rel-high); }
.rel-scale li.is-medium { background: var(--rel-mid); }
.rel-scale li.is-low { background: var(--rel-low); }
.rel .note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }

/* Список посилань у панелі */
.plist { display: flex; flex-direction: column; }
.plist a {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600;
  text-decoration: none; color: inherit;
}
.plist a:last-child { border-bottom: 0; }
.plist a:hover { color: var(--red-deep); }
.plist a .t { margin-left: auto; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.plist a .wi { width: 20px; height: 20px; flex-shrink: 0; }
.plist a.is-high .t, .plist a.is-very-high .t { color: var(--aqi-4); }

.kp-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.kp-row .wi { width: 34px; height: 34px; flex-shrink: 0; }
.kp-row b { font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.kp-row span { font-size: 13px; color: var(--muted); font-weight: 600; }
.kp-row.is-quiet b { color: var(--aqi-1); }
.kp-row.is-unsettled b { color: var(--aqi-3); }
.kp-row.is-g1 b, .kp-row.is-g2 b { color: var(--aqi-4); }
.kp-row.is-g3 b, .kp-row.is-g4 b, .kp-row.is-g5 b { color: var(--aqi-5); }

/* Кольорова панель у сайдбарі одна. Друга перестала б бути акцентом. */
.cta-panel {
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%); color: #fff;
  border-radius: var(--radius, 16px); padding: 17px; display: flex; flex-direction: column; gap: 9px;
}
.cta-panel b { font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.cta-panel p { margin: 0; font-size: 13px; opacity: .93; line-height: 1.45; }
.cta-panel a { align-self: flex-start; background: #fff; color: #1b8fc4; padding: 8px 14px; border-radius: 9px; font-weight: 800; font-size: 13px; text-decoration: none; }

/* --- Сторінка періоду ----------------------------------------------------- */
/* Головним тут стає список діб, тому «зараз» стискається до одного рядка. */

.period-h1 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 800;
  font-size: clamp(24px, 3.4vw, 36px); line-height: 1.07; letter-spacing: -.03em;
  margin: 0 0 14px; text-wrap: balance;
}

.now-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius, 16px);
  background:
    radial-gradient(120% 160% at 92% -30%, var(--sky-soft) 0%, transparent 60%),
    var(--paper);
}
.now-strip .wi { width: 40px; height: 40px; flex-shrink: 0; }
.now-strip .t {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.now-strip .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.now-strip .txt b { font-size: 14.5px; }
.now-strip .txt span { font-size: 12.5px; color: var(--muted); }
.now-strip .sec-more { margin: 0 0 0 auto; }

/* ============================ 9. СЕКЦІЇ ==================================== */

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 30px 0 12px; }
.sec-head h2 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.sec-head a { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; text-decoration: none; }
.sec-head a:hover { color: var(--red-deep); }
.sec-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); }
.sec-more:hover { color: var(--red-deep); }

.seo-text { max-width: 72ch; }
.seo-text h2 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: -.015em; margin: 26px 0 10px;
}
.seo-text p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-3); line-height: 1.65; }
.seo-text a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.seo-text .src { font-size: 12px; color: var(--muted); }

.faq { max-width: 72ch; }
.faq h2 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.02em; margin: 30px 0 12px;
}
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin: 0 0 8px; overflow: hidden; }
.faq-item summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 13px 15px; font-weight: 700; font-size: 15px; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { background: var(--paper-2); }
.faq-item[open] summary { background: var(--paper-2); }
.faq-item .chev { margin-left: auto; flex: 0 0 auto; color: var(--muted); transition: transform .18s; }
.faq-item[open] .chev { transform: rotate(180deg); color: var(--ink); }
.faq-item p { margin: 0; padding: 0 15px 15px; font-size: 14.5px; line-height: 1.65; color: var(--ink-3); }

/* Чипи міст */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: inherit; background: var(--paper);
}
.chips a:hover { border-color: var(--line-strong); }
.chips a b, .chips span b { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Чіпи без посилання: райони Харкова сторінок не мають, і робити їх схожими
   на посилання означало б обіцяти клік, якого немає. */
.chips-static span {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; background: var(--paper);
}

/* ============================ 10. ПОШУК ==================================== */

.citysearch { position: relative; margin-bottom: 18px; }
.citysearch input {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 12px;
  font-size: 16px; background: var(--paper); color: var(--ink); font-family: inherit;
}
.citysearch input:focus { outline: 2px solid var(--yellow-deep); outline-offset: -1px; border-color: transparent; }
.citysearch-results {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px; max-height: 320px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-2, 0 4px 18px rgba(14, 14, 15, .08));
}
.citysearch-results li a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: inherit; font-size: 14.5px; }
.citysearch-results li a:hover, .citysearch-results li[aria-selected="true"] a { background: var(--paper-2); }
.citysearch-results small { color: var(--muted); }

/* ============================ 11. ГОЛОВНА ================================== */

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.tiles a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px 8px; border: 1px solid var(--line); border-radius: var(--radius, 16px);
  text-decoration: none; color: inherit; background: var(--paper);
}
.tiles a:hover { border-color: var(--line-strong); }
.tiles b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tiles span { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.3; }
.tiles .wi { width: 28px; height: 28px; }

.catalog details { border-bottom: 1px solid var(--line); }
.catalog summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none; }
.catalog summary::-webkit-details-marker { display: none; }
.catalog summary i { font-style: normal; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.catalog ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; }
.catalog li a { display: block; padding: 5px 0; font-size: 14px; text-decoration: none; color: inherit; }
.catalog li a:hover { color: var(--red-deep); }

.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px; font-weight: 700; text-decoration: none; color: inherit; background: var(--paper);
}
.topics a:hover { border-color: var(--line-strong); }

/* ============================ 12. РАДАР ==================================== */

/* Контейнер карти ізолюється в окремий стековий контекст: панелі Leaflet мають
   z-index 200-700 і без цього спливають у кореневий контекст, накриваючи
   мега-меню теми. Це вже ламалось у сервісі тривог. */
.radar {
  position: relative; isolation: isolate; height: 340px;
  border-radius: var(--radius, 16px); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
}
.radar.is-full { height: min(70vh, 640px); }
.radar .leaflet-pane, .radar .leaflet-control { z-index: auto; }
.radar-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(6px);
}
.radar-bar button { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 13px; }
.radar-bar input { flex: 1; accent-color: var(--yellow-deep); }
.radar-time { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }

/* ============================ 13. ТЕМАТИЧНІ ================================ */

.lede { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; max-width: 68ch; }
.lede.is-warn { padding-left: 14px; border-left: 3px solid var(--yellow-deep); }
.empty { padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius, 16px); color: var(--muted); font-size: 14.5px; }
.src { font-size: 12px; color: var(--muted); }

.pollen-list, .water-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pollen-list li, .water-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 14.5px;
}
.pollen-list li b, .water-list li b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pollen-list li i, .water-list li i { font-style: normal; font-size: 12px; color: var(--muted); }
.pollen-list li.is-low { border-left: 3px solid var(--aqi-1); }
.pollen-list li.is-moderate { border-left: 3px solid var(--aqi-3); }
.pollen-list li.is-high { border-left: 3px solid var(--aqi-4); }
.pollen-list li.is-very-high { border-left: 3px solid var(--aqi-5); }

.kp-scale { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; align-items: flex-end; height: 160px; overflow-x: auto; }
.kp-scale li { flex: 0 0 38px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 10px; gap: 3px; }
.kp-scale li span { width: 100%; background: var(--aqi-1); border-radius: 4px 4px 0 0; }
.kp-scale li.is-unsettled span { background: var(--aqi-3); }
.kp-scale li.is-g1 span, .kp-scale li.is-g2 span { background: var(--aqi-4); }
.kp-scale li.is-g3 span, .kp-scale li.is-g4 span, .kp-scale li.is-g5 span { background: var(--aqi-5); }
.kp-scale li i { font-style: normal; color: var(--muted); writing-mode: vertical-rl; margin-top: 5px; }
.kp-scale li b { font-size: 11px; font-weight: 800; }

.means { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.means li { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; background: var(--paper); }
.means li i { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }
.means li b { font-weight: 800; font-variant-numeric: tabular-nums; }
.means li.is-cold { border-left: 3px solid var(--sky); }
.means li.is-warm { border-left: 3px solid var(--yellow-deep); }

.big-answer { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius, 16px); background: var(--paper); box-shadow: var(--shadow-1); }
.big-answer b { display: block; font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 4px; }
.big-answer .kp-big.is-quiet { color: var(--aqi-1); }
.big-answer .kp-big.is-unsettled { color: var(--aqi-3); }
.big-answer .kp-big.is-g1, .big-answer .kp-big.is-g2 { color: var(--aqi-4); }
.big-answer .kp-big.is-g3, .big-answer .kp-big.is-g4, .big-answer .kp-big.is-g5 { color: var(--aqi-5); }
.big-answer span { color: var(--muted); font-size: 14px; }

/* Конструктор віджета */
.widget-form { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.widget-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.widget-form select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--paper); color: var(--ink); font-family: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; }
.widget-preview iframe { border: 1px solid var(--line); border-radius: var(--radius, 16px); background: var(--paper); }
.widget-code textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--paper); color: var(--ink); resize: vertical; }
.widget-code button { margin-top: 8px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }

/* ============================ 14. 404 ====================================== */

.e404 { text-align: center; padding: 48px 0 16px; max-width: 760px; margin: 0 auto; }
.e404 h1 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 800;
  font-size: clamp(26px, 4.2vw, 40px); letter-spacing: -.03em; margin: 0 0 12px; text-wrap: balance;
}
.e404 p { max-width: 52ch; margin: 0 auto 22px; font-size: 16px; color: var(--ink-3); line-height: 1.6; }
.e404 .citysearch { text-align: left; }

/* ============================ 15. РЕКЛАМА ================================== */

/* Слот без коду не малюється взагалі, тож `:empty` тут не потрібен: діра на
   280px між блоками виглядає як поламана сторінка, а не як вільне місце. */
.ph-ad { display: block; margin: 26px 0; }

/* ============================ 16. ІКОНКИ =================================== */

.wi { display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wi .wi-sun { fill: var(--yellow); stroke: none; }
.wi .wi-rays { stroke: var(--yellow-deep); }
.wi .wi-moon { fill: var(--muted-2); stroke: none; }
.wi .wi-cloud { fill: var(--paper-3); stroke: var(--line-strong); }
.wi .wi-cloud2 { stroke: var(--line-strong); }
.wi .wi-drops { stroke: var(--sky); stroke-width: 2.2; }
.wi .wi-flakes { stroke: var(--frost); stroke-width: 1.8; }
.wi .wi-fog-lines { stroke: var(--muted-2); stroke-width: 2.2; }
.wi .wi-bolt { fill: var(--yellow); stroke: var(--yellow-deep); stroke-width: 1; }

/* ============================ 17. ДРУК ===================================== */

@media print {
  .ph-ad, .radar, .citysearch, .tabs, .aside, .cta-panel { display: none; }
  .now { box-shadow: none; }
}