/* Погода: страница для того, кто зашёл узнать, брать ли зонт.
 *
 * Всё главное видно сразу и ничего не спрятано под свайп - за это чужие
 * приложения и ругают. Никакой рекламы, ни одного внешнего запроса, шрифты
 * системные: страница обязана появляться мгновенно на любом телефоне.
 */

:root {
  color-scheme: dark;
  --фон: #0d1015;
  --карточка: #151a21;
  --линия: rgba(255,255,255,.10);
  --текст: #e8ecf2;
  --тихо: #8892a0;
  --синий: #5b9dff;
  --тревога: #e5934b;
  font: 16px/1.5 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Палитра температуры: не радуга.
 *
 * Радуга читается только с легендой, а тут её нет. Взята одна ось - от
 * холодного синего через нейтральный к тёплому красному, и все ступени
 * проверены на контраст к тёмному фону (не ниже 4.5:1) и на различимость при
 * дальтонизме: синий и красный различают все три вида, а зелёный с красным
 * путает каждый двадцатый мужчина, поэтому зелёного в шкале нет вовсе. */
.t-мороз  { color: #7fb0ff; }
.t-холод  { color: #a9c6f0; }
.t-ноль   { color: #d7dde6; }
.t-тепло  { color: #f0b98a; }
.t-жара   { color: #ff8a5c; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--фон); color: var(--текст); }
main { max-width: 720px; margin: 0 auto; padding: 16px 14px 40px; }
h2 { font-size: 15px; font-weight: 600; color: var(--тихо); margin: 22px 0 8px; }
a { color: var(--синий); }

.шапка { display: grid; gap: 10px; }
.место { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.имя-места { font-size: 15px; color: var(--тихо); }
.кнопка {
  font: inherit; font-size: 14px; color: var(--текст); background: var(--карточка);
  border: 1px solid var(--линия); border-radius: 9px; padding: 7px 12px;
  cursor: pointer;
}
.кнопка:active { background: rgba(255,255,255,.10); }
.города { display: flex; gap: 6px; flex-wrap: wrap; }
.города button {
  font: inherit; font-size: 13px; color: var(--тихо); background: none;
  border: 1px solid var(--линия); border-radius: 20px; padding: 4px 10px;
  cursor: pointer;
}
.города button.выбран { color: var(--текст); border-color: var(--синий); }

.сейчас {
  margin-top: 16px; background: var(--карточка); border: 1px solid var(--линия);
  border-radius: 14px; padding: 16px;
}
.градусы { display: flex; align-items: baseline; gap: 14px; }
/* Знак плюса не убираем: без него плюс от минуса отличается одной чёрточкой,
   и в мороз это стоит ошибки. */
.темп { font-size: 56px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.слова { font-size: 17px; }
.тихо { color: var(--тихо); font-size: 14px; }

/* Измеренное отделено чертой от посчитанного - это разные вещи, и человек
   вправе видеть, что именно ему показывают. */
.радар {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--линия);
  font-size: 15px;
}
.радар .метка, .фронт .метка {
  display: inline-block; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--тихо);
  /* Отбивка нужна и справа, и как воздух вокруг: метка стоит вплотную к
     тексту, а читается она как отдельная подпись. */
  margin-right: 8px; padding-right: 2px;
}
.радар.идёт { color: var(--синий); }
.фронт { margin-top: 10px; font-size: 14px; color: var(--тихо); }
.фронт b { color: var(--текст); font-weight: 600; }

.подробности {
  margin-top: 14px; display: grid; gap: 6px 18px; font-size: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); color: var(--тихо);
}
.подробности b { color: var(--текст); font-weight: 600; }

/* Часы: строка с прокруткой. Температура, осадки и ветер видны разом -
   именно их прячут под свайп в чужих приложениях. */
.часы { display: flex; gap: 0; overflow-x: auto; padding-bottom: 6px; }
.час {
  flex: 0 0 auto; width: 58px; text-align: center; padding: 8px 0;
  border-right: 1px solid var(--линия);
}
.час:last-child { border-right: 0; }
.час .время { font-size: 12px; color: var(--тихо); }
.час .град { font-size: 16px; font-variant-numeric: tabular-nums; }
.час .осадки { font-size: 11px; color: var(--синий); min-height: 14px; }
.час .ветрок { font-size: 11px; color: var(--тихо); }
.час.ночь { background: rgba(255,255,255,.03); }
/* Столбик осадков: высота говорит сама, число рядом - для точности. */
.полоска { height: 26px; display: flex; align-items: flex-end; justify-content: center; }
.полоска i { display: block; width: 10px; background: var(--синий); border-radius: 2px 2px 0 0; }

/* Карта: холст во всю ширину карточки. Высота считается от ширины в
   скрипте - так картинка остаётся одной и той же формы на любом экране. */
.карта-блок { margin-top: 22px; }
.карта-шапка { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.карта-шапка h2 { margin: 0; }
.кнопка.малая { font-size: 12px; padding: 5px 10px; }
.карта {
  width: 100%; height: 300px; margin-top: 8px; border-radius: 12px;
  background: #0a0e14; border: 1px solid var(--линия); overflow: hidden;
}
/* Подложка обесцвечивается **полностью**, и это правило, а не вкус: на этой
   странице цвет значит данные.
   При grayscale(.9) карта сохраняла десятую долю цвета, и подкрашенными
   оставались 1.8% пикселей - леса и вода. На тёмной странице они читались
   как осадки: сыпь бледных пятен по всей карте там, где радар показывал
   сухо. Замерено на живом тайле: при grayscale(1) подкрашенных пикселей 0%.
   Контраст сбавлен по той же причине: перепад светлого и тёмного в подложке
   не должен спорить с полосой дождя. */
.карта .leaflet-tile-pane { filter: grayscale(1) brightness(.62) contrast(.82); }
.карта .leaflet-container { background: #0a0e14; font: inherit; }
.карта .leaflet-control-attribution {
  background: rgba(13,16,21,.75); color: var(--тихо); font-size: 10px;
}
.карта .leaflet-control-attribution a { color: var(--тихо); }
/* Осадки рисуются плавно. Растянуты и сглажены они ещё до раскраски - в
   значениях, а не в цветах, - а браузеру остаётся дотянуть остаток; ступеньки
   по два километра тут были бы следом сетки, а не измерением. */
.карта .leaflet-image-layer { image-rendering: auto; }
#карта-подпись { margin-top: 6px; font-size: 12px; }

.дни { display: grid; gap: 8px; }
.день {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px;
  align-items: center; background: var(--карточка); border: 1px solid var(--линия);
  border-radius: 11px; padding: 10px 12px; font-size: 14px;
}
.день .дата { color: var(--тихо); }
.день .числа { font-variant-numeric: tabular-nums; white-space: nowrap; }

.беда { color: var(--тревога); font-size: 14px; }
/* Ответ по новому месту не пришёл, а на экране числа прошлого: приглушаем их,
   чтобы их не прочли как погоду под новым названием. */
main.старое .сейчас, main.старое .карта-блок, main.старое .карта-часов,
main.старое .дни-блок { opacity: .4; }
.низ { margin-top: 26px; color: var(--тихо); font-size: 12px; line-height: 1.5; }
.низ p { margin: 6px 0; }
.откуда { color: var(--тихо); }

@media (max-width: 420px) {
  .темп { font-size: 46px; }
  main { padding: 12px 11px 32px; }
}