:root{
  --bg-0: #06080c;
  --bg-1: #0a0d13;
  --panel: rgba(255,255,255,0.045);
  --panel-2: rgba(255,255,255,0.022);
  --panel-border: rgba(255,255,255,0.08);
  --panel-border-strong: rgba(255,255,255,0.16);
  --ink: #F2F4F7;
  --ink-dim: #8B96A5;
  --ink-faint: #545E6B;
  --amber: #F5A623;
  --amber-dim: rgba(245,166,35,0.14);
  --sky: #4EA8FF;
  --frost: #CFE3F2;
  --wind: #5FC7A6;
  --flag-red: #E5484D;
  --line: var(--panel-border);
  --line-strong: var(--panel-border-strong);
  --radius: 18px;
  --gap: 14px;
  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; padding:0; }
html{ background: var(--bg-0); }
body{
  background:
    radial-gradient(ellipse 70% 50% at 22% -10%, rgba(78,168,255,0.10), transparent 60%),
    var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
button{ font-family: inherit; }

/* Боковой отступ страницы одинаков для ВСЕГО контента (шапка, карточки,
   ошибка) — это и есть общая левая граница "полотна" сайта. Он же на десктопе/
   планшете служит "карманом" для круглых стрелок-кнопок (см. .days-nav__btn
   ниже) — единственного элемента, которому разрешено вылезать за эту границу.
   На ширинах, где кнопок уже нет (см. --cards:1 ниже), отступ снова маленький
   — там ширина карточки важнее свободного кармана. */
.page{ max-width: 1180px; margin: 0 auto; padding: 26px 64px 40px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
@media (max-width: 1080px){ .page{ padding: 24px 52px 34px; } }
@media (max-width: 520px){ .page{ padding: 18px 14px 32px; } }

/* Шапка — просто название города, всегда прижато к той же левой границе,
   что и первая карточка ниже (оба — прямые дети .page с одинаковым
   padding-left, никакого отдельного выравнивания не требуется). */
.hero{ margin: 2px 0 26px; }
.hero__city{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 40px);
  margin: 0; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink);
}

.error-box{ background: var(--amber-dim); border: 1px solid rgba(245,166,35,0.32); border-radius: 14px; padding: 16px 18px; margin: 14px 0 26px; }
.error-box p{ margin:0; }

/* ===== Карусель дней =====
   Ширина карточки — процент от РЕАЛЬНОЙ ширины ленты (.days-grid), посчитанный
   так, чтобы ЦЕЛОЕ число карточек (--cards) укладывалось ровно в 100% без
   остатка: следующая карточка либо видна целиком, либо не видна вовсе —
   обрезанного "хвоста"/подглядывающей половины быть не может в принципе, при
   любой ширине окна.

   Стрелки-кнопки — position:absolute, вынесены ЗА пределы .days-grid в боковой
   padding самой .page (см. .page выше) — это единственный элемент на сайте,
   которому разрешено вылезать за общую левую/правую границу "полотна". Ленте
   (.days-grid) они места не занимают вообще: у неё нет ни flex-соседей, ни
   собственного бокового padding под кнопки — значит первая карточка всегда
   начинается ровно на той же границе, что и название города в шапке (оба —
   просто padding-left самой .page). Раньше пробовали резервировать место под
   кнопки padding'ом на самой .days-grid — но asymmetric padding на
   скролл-контейнере ломает scroll-snap (браузер после снапа "проглатывает"
   часть padding через автоскролл), поэтому от этого отказались. */
.days-nav{ position: relative; margin: 0 0 22px; }
.days-nav__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px;
  background: var(--panel); border:1px solid var(--panel-border); color: var(--ink-dim);
  border-radius: 50%; font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.days-nav__btn--prev{ left: -54px; }
.days-nav__btn--next{ right: -54px; }
.days-nav__btn:hover{ border-color: var(--panel-border-strong); color: var(--ink); background: var(--panel-2); }
.days-nav__btn:disabled{ opacity:0.3; cursor:default; }
.days-nav__btn:disabled:hover{ border-color: var(--panel-border); color: var(--ink-dim); background: var(--panel); }
@media (max-width: 1080px){
  .days-nav__btn{ width:36px; height:36px; font-size:16px; }
  .days-nav__btn--prev{ left: -44px; }
  .days-nav__btn--next{ right: -44px; }
}
/* На однокарточном виде (одна полноэкранная карточка) стрелки скрыты —
   пролистывание там жестом-свайпом, а .page на этой ширине уже не резервирует
   для кнопок увеличенный боковой padding (см. .page выше). */
@media (max-width: 520px){ .days-nav__btn{ display:none; } }

.days-grid{
  --cards: 5;
  display:flex; gap: var(--gap); overflow-x:auto; padding: 4px 0 20px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* pan-x — явная подсказка браузеру, что горизонтальный свайв здесь
     приоритетнее вертикального скролла страницы, чтобы палец не "промахивался"
     мимо ленты карточек на телефоне. */
  touch-action: pan-x;
  scrollbar-width: auto; scrollbar-color: var(--panel-border-strong) transparent;
}
@media (max-width: 1400px){ .days-grid{ --cards: 4; } }
@media (max-width: 1080px){ .days-grid{ --cards: 3; } }
@media (max-width: 760px){ .days-grid{ --cards: 2; } }
/* На однокарточном режиме сама карточка растягивается на всю ширину .days-grid
   без ограничений — на узких телефонах (330-365px) это нормально, но на более
   широких (400-490px, например iPhone Pro Max) карточка становится неприлично
   широкой: ряд делений (.tick, высота 11px, style.css ниже) при этом растягивается
   по ширине вместе с колонками грида и превращается в плоские широкие "таблетки",
   а ряд иконок (не растягивается, прижат к левому краю) оставляет неадекватно
   большой пустой хвост справа. max-width ограничивает карточку сверху уже здесь —
   на более узких телефонах, где карточка итак уже max-width, ничего не меняется.
   Раньше здесь стоял justify-content:center на .days-grid — сломано: в ленте
   всегда лежат ВСЕ дни (скроллящееся содержимое), а не одна карточка, и
   center на переполненном flex-контейнере сдвигает нулевую позицию скролла
   куда-то в середину списка (обнаружено багом — при сжатии до одной карточки
   открывался день на неделю вперёд, а прокрутить назад к сегодня было нельзя,
   потому что "сегодня" физически оказывался ДО нулевой позиции скролла).
   Вместо этого — scroll-padding у контейнера + scroll-snap-align:center у
   самой карточки: это резервирует место ДО первой и ПОСЛЕ последней карточки
   (а не пытается центрировать весь ряд), поэтому scrollLeft:0 по-прежнему
   означает "первая карточка", просто она сама теперь по центру вьюпорта. */
@media (max-width: 520px){
  .days-grid{ --cards: 1; scroll-padding-inline: calc((100% - 400px) / 2); }
  .day-card{ max-width: 400px; scroll-snap-align: center; }
}
/* Широкая, явно "хватательная" полоса-скроллбар вместо тонкой техничной
   полоски — её удобно взять курсором и потянуть, как ползунок. Убираем
   маленькие стрелки-кнопки прокрутки по краям, которые по умолчанию рисует
   Chrome/Edge на Windows поверх кастомного скроллбара — они здесь лишние,
   пролистывание и так уже есть (круглые кнопки сверху + свайп/протяжка
   самой полосы). */
.days-grid::-webkit-scrollbar{ height:14px; }
.days-grid::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.days-grid::-webkit-scrollbar-track{ background: var(--panel-2); border-radius:999px; }
.days-grid::-webkit-scrollbar-thumb{ background: var(--panel-border-strong); border-radius:999px; border: 3px solid var(--bg-0); background-clip: padding-box; }
.days-grid::-webkit-scrollbar-thumb:hover{ background: var(--ink-faint); background-clip: padding-box; }

.day-card{
  position: relative;
  flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
  scroll-snap-align: start; scroll-snap-stop: always;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
  padding: 18px 14px 16px; display:flex; flex-direction:column; gap:8px;
  transition: border-color 0.2s ease;
}
.day-card:hover{ border-color: var(--panel-border-strong); }
/* Тонкая полоска сверху — НЕ про погоду, а про календарь: выходные (сб/вс) и
   официальные нерабочие праздничные дни РФ подсвечиваются одним и тем же
   классическим "красным" цветом, как в обычных календарях. У будних дней
   полоски нет вовсе (см. isWeekendOrHoliday() в app.js). */
.day-card--holiday::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:2px; border-radius:0 0 2px 2px;
  background: var(--flag-red);
}
.day-card__top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.day-card__eyebrow{ font-family: var(--font-mono); font-size: 11px; letter-spacing:0.1em; text-transform: uppercase; color: var(--sky); }
/* Цвет надписи дня недели повторяет цвет овалов-делений в ряду под карточкой
   (см. .tick--rain/.tick--snow) — в снежные дни (day.dominantPhase === 'snow')
   такой же --frost, как у tick--snow, вместо дефолтного --sky (= tick--rain). */
.day-card__eyebrow--snow{ color: var(--frost); }
.day-card__relbadge{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:0.06em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-dim);
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.day-card__date{ font-size:12.5px; color: var(--ink-faint); margin-top:-2px; }
/* Три отдельные иконки (облачность / осадки / ветер) в ряд вместо одной общей.
   Каждая — самостоятельный «счётчик» из ярких + приглушённых делений (как индикатор
   сигнала), и у каждой своя подсказка при наведении — см. setupHoverTooltips().
   Крупнее, чем раньше (было 40×36) — в ряду оставался запас по ширине, а более
   крупному холсту анимации ниже (сияние/полёт/падение/поток) есть, где разыграться. */
/* align-items: flex-start (было center) — иначе % (осадки) и м/с (ветер) не встанут
   вровень: обёртка ветра теперь выше обёртки осадков (см. ниже), и при центрировании
   их подписи оказались бы на разной высоте. При flex-start все три колонки (облачность/
   осадки/ветер) прижаты к верху ряда, а высота ряда по-прежнему определяется самой
   высокой из них — сейчас это колонка ветра. */
.day-card__icons{ display:flex; align-items:flex-start; gap:6px; margin: 6px 0 0; }
.wx-icon{ cursor: default; line-height:0; border-radius:8px; }
/* Обёртка иконки облачности: снизу — сам % облачности (тот же приём, что и у
   осадков/ветра — подпись как отдельный текст под картинкой). Верхнего текста
   у облачности нет (в отличие от осадков/ветра), поэтому у неё нет и той же
   "фора" по высоте перед иконкой — это учтено увеличенным gap ниже, а не
   лишним отступом на самой иконке.
   viewBox иконки теперь обрезан индивидуально под каждое состояние прямо в
   cloudIcon() (см. CLOUD_TIER_TOP в app.js) — верх картинки везде совпадает
   с верхом самой нарисованной фигуры (а не пустого поля вокруг неё), поэтому
   никакого margin-top тут больше не нужно: раньше он был отрицательным и
   разным на каждое состояние, но у иконки при этом оставалась общая высота
   45px с кучей прозрачного поля СНИЗУ (там, где раньше был верх, до сдвига)
   — из-за этого "%" уезжал вниз на разную высоту у разных состояний (то,
   что и было замечено — "21%" стоял ощутимо ниже, чем "6%" у осадков).
   Теперь высота иконки (27px, см. .wx-icon-cloud .wicon) — это ровно
   отмасштабированное окно обрезки (24 unit × 1.125), одинаковое для всех
   трёх состояний, без лишнего прозрачного хвоста — поэтому "%" everywhere
   на одной и той же высоте. */
.wx-icon-cloud{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:default; position:relative; top:1px; }
.wx-icon-cloud__pct{ font-family: var(--font-mono); font-size:11px; line-height:1.1; color: var(--ink-dim); white-space:nowrap; position:relative; top:-1px; }
/* Обёртка иконки осадков: сверху — количество мм/см, снизу — процент вероятности,
   отступы от иконки увеличены и одинаковые с обеих сторон (gap контейнера, без
   отдельных margin на подписях — раньше margin-bottom просто переезжал вместе с
   текстом при перестановке мм/% местами, и ритм отступов оставался прежним).
   Облачность остаётся простым span'ом, ветер — такая же обёртка (см. ниже). */
.wx-icon-precip{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:default; }
.wx-icon-precip__pct{ font-family: var(--font-mono); font-size:11px; line-height:1.1; color: var(--sky); white-space:nowrap; }
/* Цвет "%" вероятности осадков повторяет цвет овалов-делений (см. .tick--rain/
   .tick--snow) — в снежные дни --frost вместо дефолтного --sky, тем же
   модификатором --snow, что уже стоит на обёртке (см. renderCard() в app.js). */
.wx-icon-precip--snow .wx-icon-precip__pct{ color: var(--frost); }
.wx-icon-precip__mm{ font-family: var(--font-mono); font-size:10px; line-height:1.1; color: var(--ink-dim); }
/* Капля и снежинка живут в одном общем viewBox иконки (см. precipIcon() ниже) —
   он подогнан под БОЛЕЕ высокую снежинку, поэтому у капли (она рисуется в верхней
   части этого поля) под ней остаётся заметно больше пустого места, чем над ней:
   реальный отступ по факту нарисованного — 1 unit сверху и 5.3 unit снизу при
   общей высоте viewBox 15 unit. Из-за этого при равном gap визуально промежуток
   между иконкой и "%" получается ощутимо больше, чем между "мм" и иконкой. У
   снежинки эта асимметрия почти незаметна (см. .wx-icon-precip--snow ниже) —
   поэтому компенсация применена только к варианту с каплей (без модификатора
   --snow), а не как общий сдвиг всех процентов. */
.wx-icon-precip:not(.wx-icon-precip--snow) .wx-icon-precip__pct{ margin-top: -4.84px; }
/* Обёртка иконки ветра: сверху — скорость в м/с (без слова «ветер»), той же формы,
   что и подпись над осадками — чтобы обе подписи стояли вровень (см.
   align-items:flex-start у .day-card__icons выше). Цвет — --wind, в тон
   самой иконке (а не --sky, как у осадков), чтобы подпись читалась как часть той же
   по смыслу картинки. */
.wx-icon-wind{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:default; }
.wx-icon-wind__mps{ font-family: var(--font-mono); font-size:11px; line-height:1.1; color: var(--wind); white-space:nowrap; }
.wx-icon .wicon{ width:50px; height:45px; display:block; overflow: visible; }
/* Только у иконки осадков и ветра viewBox обрезан по факту нарисованного — у осадков
   капля/снежинка не занимают весь холст 44×40 (см. precipIcon), у ветра три потока
   тоже не доходят ни до верха, ни до низа канвы (см. windIcon). Обрезка убирает лишнее
   пустое поле: у осадков — перед подписью "X мм", у ветра — чтобы нижний (самый
   длинный) поток лёг ближе к ряду делений-«таблеток» под иконками, а не парил
   посередине с зазором. */
.wx-icon-precip .wicon{ height:16.9px; }
.wx-icon-wind .wicon{ height:15.8px; }
/* Единая высота для всех трёх состояний облачности — ровно отмасштабированное
   окно обрезки viewBox (24 unit × 1.125, см. CLOUD_TIER_TOP/cloudIcon() в
   app.js), без лишнего прозрачного поля снизу. */
.wx-icon-cloud .wicon{ height:27px; }
.wicon .cloud{ fill: var(--ink-dim); transform-box: fill-box; transform-origin: center; }
.wicon .sun-core{ fill: var(--amber); }
.wicon .sun-ray{ stroke: var(--amber); stroke-width:2.4; stroke-linecap:round; transform-box: fill-box; transform-origin: center; }
/* Активное деление (идёт дождь/снег/ветер такой силы) — насыщенный цвет. */
.wicon .drop{ fill: var(--sky); transform-box: fill-box; transform-origin: center; }
.wicon .flake{ stroke: var(--frost); stroke-width:1.8; stroke-linecap:round; transform-box: fill-box; transform-origin: center; }
.wicon .gust-line{ stroke: var(--wind); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; fill:none; transform-box: fill-box; transform-origin: center; }
/* Неактивное (погашенное) деление — то же деление, но тускло: показывает, что
   шкала трёхступенчатая, даже когда зажжена только часть делений. Неактивные деления
   всегда статичны (см. правила анимации ниже: анимация вешается только на класс без
   модификатора --off), даже при наведении — им нечему «капать», «сыпать» или «дуть». */
.wicon .drop--off{ fill: var(--ink-faint); opacity:0.4; }
.wicon .flake--off{ stroke: var(--ink-faint); stroke-width:1.3; stroke-linecap:round; opacity:0.4; }
.wicon .gust-line--off{ stroke: var(--ink-faint); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:0.4; }

/* ===== Анимация иконок при наведении =====
   В состоянии покоя всё статично; при наведении срабатывает анимация, привязанная
   к смыслу картинки — лучи сияют, тучка плывёт, снег падает, дождь капает, ветер дует.
   Технически важно: анимируется НЕ тот элемент, у которого уже стоит SVG-атрибут
   transform="translate(...)" (позиционирование слота) — CSS-анимация transform
   полностью перекрывает такой атрибут и «телепортирует» фигуру в угол. Поэтому у
   капель/снежинок есть обёртка-<g> только с позиционированием, а анимируется вложенный
   элемент без собственного transform-атрибута (у потоков ветра координаты и так заданы
   напрямую в path, без transform-атрибута, поэтому обёртка им не нужна). */
@keyframes wx-sun-shine{ 0%, 100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.22); opacity: .55; } }
@keyframes wx-sun-glow{ 0%, 100%{ filter: drop-shadow(0 0 0 var(--amber)); } 50%{ filter: drop-shadow(0 0 3.5px var(--amber)); } }
@keyframes wx-cloud-fly{ 0%, 100%{ transform: translate(0,0); } 50%{ transform: translate(4px,-1.5px); } }
@keyframes wx-rain-fall{ 0%{ transform: translateY(-7px); opacity:0; } 25%{ opacity:1; } 70%{ opacity:1; } 100%{ transform: translateY(9px); opacity:0; } }
@keyframes wx-snow-fall{ 0%{ transform: translate(-1px,-7px) rotate(0deg); opacity:0; } 25%{ opacity:1; } 70%{ opacity:1; } 100%{ transform: translate(1px,8px) rotate(70deg); opacity:0; } }
@keyframes wx-wind-blow{ 0%{ transform: translateX(-5px); opacity:0; } 25%{ opacity:1; } 70%{ opacity:1; } 100%{ transform: translateX(6px); opacity:0; } }

/* Триггер — .wx-icon-cloud:hover (вся колонка целиком: и картинка, и % под ней),
   а не просто .wx-icon, чтобы анимация запускалась и при наведении на "%"
   облачности — так же, как у осадков (см. .wx-icon-precip:hover ниже). */
.wx-icon:hover .sun-ray, .wx-icon-cloud:hover .sun-ray{ animation: wx-sun-shine 1.1s ease-in-out infinite; }
.wx-icon:hover .sun-core, .wx-icon-cloud:hover .sun-core{ animation: wx-sun-glow 1.1s ease-in-out infinite; }
.wx-icon:hover .cloud, .wx-icon-cloud:hover .cloud{ animation: wx-cloud-fly 2.4s ease-in-out infinite; }
/* :not(.drop--off) и т.п. — двигаются только «зажжённые» деления; погашенные (серые)
   всегда остаются на месте, даже при наведении на активную часть той же иконки.
   Триггер — .wx-icon-precip:hover / .wx-icon-wind:hover (вся колонка целиком: %/м-с,
   сама иконка и мм), а не просто .wx-icon, чтобы анимация запускалась и при наведении
   на подпись сверху (или мм снизу у осадков), а не только на саму картинку. */
.wx-icon-precip:hover .drop:not(.drop--off){ animation: wx-rain-fall .85s ease-in infinite; }
.wx-icon-precip:hover .flake:not(.flake--off){ animation: wx-snow-fall 1.6s ease-in-out infinite; }
.wx-icon-wind:hover .gust-line:not(.gust-line--off){ animation: wx-wind-blow .9s ease-in-out infinite; }
/* Деления запускаются не синхронно, а внахлёст — читается как «прошло облако
   капель/снега», а не как мигание одинаковых точек разом. Для ветра — снизу вверх,
   как будто порыв идёт по всем трём потокам подряд. */
.wicon > g:nth-of-type(1) .drop, .wicon > g:nth-of-type(1) .flake, .wicon > g:nth-of-type(1) .gust-line{ animation-delay: 0s !important; }
.wicon > g:nth-of-type(2) .drop, .wicon > g:nth-of-type(2) .flake, .wicon > g:nth-of-type(2) .gust-line{ animation-delay: .18s !important; }
.wicon > g:nth-of-type(3) .drop, .wicon > g:nth-of-type(3) .flake, .wicon > g:nth-of-type(3) .gust-line{ animation-delay: .36s !important; }
.day-card__temps{ font-family: var(--font-mono); display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.day-card__temps .t-max{ font-size:22px; font-weight:700; color: var(--ink); }
.day-card__temps .t-min{ font-size:15px; color: var(--ink-faint); }
.day-card__ticks{ display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; margin: 10px 0 4px; }
.tick{ height:11px; border-radius:999px; background: var(--panel-border-strong); cursor:pointer; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
/* Раньше тут был один общий .tick:hover{ filter: brightness(1.5) } на всех —
   умножение яркости несправедливо к разной базе: тёмный "сухо" (--line, 10%
   прозрачности) от умножения на 1.5 почти не меняется (тёмное*1.5 всё ещё
   тёмное), а светлый "снег" (--frost, почти белый) от того же множителя
   улетает в чистый белый и теряет цвет. Исправлено на два независимых слоя:
   1) кольцо box-shadow + небольшой вертикальный рост — одинаковый сигнал
      "наведено" независимо от цвета деления;
   2) filter: brightness(...) — подобран отдельно под каждый тип, чтобы
      ПРИРОСТ яркости ощущался одинаково, а не был одним числом на всех. */
.tick:hover{ transform: scaleY(1.3); box-shadow: 0 0 0 1.5px rgba(242,244,247,0.4); }
.tick--rain{ background: var(--sky); }
.tick--rain:hover{ filter: brightness(1.2); }
.tick--snow{ background: var(--frost); }
.tick--snow:hover{ filter: brightness(1.05); }
.tick--dry{ background: rgba(255,255,255,0.14); }
.tick--dry:hover{ filter: brightness(2.4); }
.tick--na{ background: transparent; border: 1px dashed var(--panel-border-strong); }
.tick--na:hover{ border-color: var(--ink-dim); box-shadow: 0 0 0 1.5px rgba(242,244,247,0.25); }
.tick--partial{ background: transparent; border: 1.5px solid var(--panel-border); }
.tick--partial:hover{ border-color: var(--ink-dim); box-shadow: 0 0 0 1.5px rgba(242,244,247,0.25); }
/* Всплывающая подсказка при наведении на иконку или на точку-осадок */
.tick-tip{
  position: fixed; z-index: 60; pointer-events: none;
  background: #10141c; border: 1px solid var(--panel-border-strong); border-radius: 12px;
  padding: 9px 12px; font-size: 12px; line-height: 1.45; max-width: 190px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.tick-tip[hidden]{ display:none; }
.tick-tip__name{ font-weight:700; color: var(--ink); font-size:12.5px; }
.tick-tip__org{ font-weight:400; color: var(--ink-faint); font-size:10.5px; margin: 1px 0 6px; }
.tick-tip__temp{ font-family: var(--font-mono); color: var(--ink); margin-bottom:2px; }
.tick-tip__meta{ font-family: var(--font-mono); color: var(--ink-dim); font-size:11px; margin-top:3px; }
.tick-tip__precip{ font-family: var(--font-mono); font-size:11.5px; }
.tick-tip__precip.is-rain{ color: var(--sky); }
.tick-tip__precip.is-snow{ color: var(--frost); }
.tick-tip__precip.is-dry{ color: var(--ink-faint); }
.tick-tip__empty{ font-style: italic; color: var(--ink-faint); font-size:11.5px; }

/* Compare section */
.compare{ margin: 18px 0 6px; }
.compare__hint{ color: var(--ink-dim); margin:0 0 14px; font-size:14px; }
.compare__grid{ display:flex; flex-wrap:wrap; gap:8px; }
.source-link{
  display:inline-flex; align-items:center; padding:9px 14px;
  background: var(--panel); border:1px solid var(--panel-border); border-radius:8px;
  text-decoration:none; color: var(--ink-dim); font-weight:500; font-size:12.5px;
  white-space:nowrap;
  transition: border-color 0.2s ease;
}
.source-link:hover{ border-color: var(--panel-border-strong); color: var(--ink); }

a:focus-visible, button:focus-visible{ outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce){
  .day-card{ transition:none !important; }
  .days-grid{ scroll-snap-type: none; }
}