/* Погода. Тёмная всегда — светлой версии нет намеренно: приложение открывают
   в неудобные моменты, и лишний свет в лицо тут ни к чему.

   Поле нейтральное. Красить его по осям (тёплое справа, холодное слева) —
   соблазн, но цвет подсказывает ответ: от красного угла рука уходит сама,
   и замер начинает мерить оформление. Цвет здесь ровно один — золото точки,
   в системе оно значит «сейчас». */
:root {
  --bg: #1c1c1a;
  --fg: #E5E4DF;
  --muted: #8B8A83;
  --faint: #4A4944;
  --pad: #262624;
  --edge: #333330;
  --now: #c98500;
}

* { box-sizing: border-box; }
/* Своё правило для hidden: у браузерного `[hidden] { display: none }` та же
   специфичность, что у класса, и любой `.foo { display: flex }` его перебивает —
   элемент получает атрибут, но остаётся на экране. */
[hidden] { display: none !important; }
html { color-scheme: dark; height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Вкладки прибиты к верху, подпись — к низу, а содержимое экрана стоит по
   центру между ними: приложение открывают на секунду, и блок, прижатый к
   верхнему краю, оставлял бы полтелефона пустоты под большим пальцем. Центр
   считается для каждого экрана отдельно, поэтому вкладки не прыгают, когда
   короткий экран сна сменяет высокое поле. */
main {
  width: 100%;
  max-width: 520px;
  flex: 1;
  min-height: 0;
  margin: 0 auto;
  padding: 18px 18px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── вкладки и экраны ─────────────────────────────────────────────────── */

/* Плоские, как на дашборде: серые слова, активное — светлое с золотой чертой.
   Без рамок и пилюль: контейнер в контейнере тут ни к чему. */
.tabs { display: flex; gap: 22px; padding: 0 4px; user-select: none; }
.tab {
  padding: 6px 0 8px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  transition: color .15s;
}
.tab.on { color: var(--fg); border-bottom-color: var(--now); }

.screen { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }

/* ── поле ─────────────────────────────────────────────────────────────── */

.pad {
  position: relative;
  aspect-ratio: 1;
  max-height: 62vh;
  margin: 0 auto;
  width: 100%;
  background: var(--pad);
  border: 1px solid var(--edge);
  border-radius: 18px;
  touch-action: manipulation;
  user-select: none;
  overflow: hidden;
}
/* Крест едва виден: он нужен, чтобы найти середину, а не чтобы делить поле
   на четыре ящика — состояние живёт между ними. */
.cross-v, .cross-h { position: absolute; background: var(--faint); opacity: .5; }
.cross-v { left: 50%; top: 14%; bottom: 14%; width: 1px; }
.cross-h { top: 50%; left: 14%; right: 14%; height: 1px; }

.axis {
  position: absolute;
  color: var(--muted);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  pointer-events: none;
}
.axis-left   { left: 12px; top: 50%; transform: translateY(-50%); }
.axis-right  { right: 12px; top: 50%; transform: translateY(-50%); }
.axis-top    { top: 14px; left: 50%; transform: translateX(-50%); }
.axis-bottom { bottom: 14px; left: 50%; transform: translateX(-50%); }

/* ── точка ────────────────────────────────────────────────────────────── */

.dot {
  position: absolute;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--now);
}
/* Первая точка появляется на месте, поправка — переезжает: видно, что это
   та же запись, а не новая. */
.dot.ready { transition: left .28s cubic-bezier(.2,.8,.3,1), top .28s cubic-bezier(.2,.8,.3,1); }
.dot.pulse { animation: land .26s cubic-bezier(.2,.9,.3,1); }
@keyframes land {
  from { transform: scale(.4); opacity: .5; }
  60%  { transform: scale(1.12); opacity: 1; }
  to   { transform: scale(1); }
}

/* Кольцо расходится один раз — это и есть «записалось». Отдельной надписи
   не нужно: подтверждение должно быть на том же месте, куда смотрит глаз. */
.ring {
  position: absolute;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1.5px solid var(--now);
  opacity: 0;
  pointer-events: none;
}
.ring.pulse { animation: spread .6s ease-out; }
@keyframes spread {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dot.ready, .dot.pulse, .ring.pulse, .nt.pulse { transition: none; animation: none; }
}

/* ── заметка, фиксация и подпись ──────────────────────────────────────── */

.note {
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  background: var(--pad);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: 14px;
  font: inherit;
  resize: none;
}
.note::placeholder { color: var(--muted); }
.note:focus { outline: none; border-color: var(--faint); }

/* Одна кнопка на все состояния. Пока фиксировать нечего — тёмная и глухая;
   поставил точку — загорается золотом (золото в системе значит «сейчас», и
   незакрытый замер это ровно оно); зафиксировал — гаснет до тихого «нового».
   Тихого намеренно: сразу после фиксации палец ещё над кнопкой, и звать его
   второй раз незачем. Заливки нет ни в одном состоянии: залитая кнопка
   перетянула бы взгляд с поля, а решение принимают там, а не здесь. */
.fix {
  width: 100%;
  padding: 14px;
  background: none;
  color: var(--faint);
  border: 1px solid var(--edge);
  border-radius: 14px;
  font: 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  transition: color .15s, border-color .15s;
}
.fix.on { color: var(--now); border-color: var(--now); }
.fix.new { color: var(--muted); border-color: var(--edge); }
.fix:not(:disabled):active { background: var(--edge); }

.foot { display: flex; align-items: baseline; gap: 12px; }
.build { margin-left: auto; }
.status, .build {
  color: var(--muted);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.build { color: var(--faint); }

/* ── сон ──────────────────────────────────────────────────────────────── */

/* Строка ночи — подтверждение и вся история разом: последняя ночь, две
   отметки. Больше ничего: длина сна и ряды по дням — статистика, а она
   живёт дома. Высота задана, чтобы экран не прыгал с первой записью. */
.night {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.night-label {
  color: var(--muted);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}
.night-line {
  display: flex;
  gap: 10px;
  color: var(--fg);
  font: 17px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nt { display: inline-block; }
.nt-sep { color: var(--faint); }
/* Записанная отметка садится с тем же подскоком, что точка на поле:
   подтверждение там, куда смотрит глаз. */
.nt.pulse { animation: land .26s cubic-bezier(.2,.9,.3,1); }

/* Две кнопки одного веса, крупные: их нажимают в полусне. Выбранная светлеет,
   но не золотится — золото уходит «зафиксировать», как и на поле. */
.kinds { display: flex; gap: 12px; user-select: none; }
.kind {
  flex: 1;
  padding: 26px 0;
  background: var(--pad);
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: 14px;
  font: 17px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: color .15s, border-color .15s;
}
.kind.on { color: var(--fg); border-color: var(--faint); }
.kind:active { background: var(--edge); }

/* Время — сейчас, но его можно подвинуть: колёсико штатное, отметка задним
   числом в пределах суток. Пока вид не выбран, поле глухое и пустое. */
.when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.when-label {
  color: var(--muted);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}
.when-input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 128px;
  padding: 10px 14px;
  background: var(--pad);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: 14px;
  font: 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}
.when-input:disabled { color: var(--faint); background: none; }
.when-input:focus { outline: none; border-color: var(--faint); }

/* ── приглашение поставить на экран ───────────────────────────────────── */

/* Полоса над всем и на всю ширину: за ней в настройки никто не пойдёт, а
   открыть в браузере нужно ровно один раз. После установки исчезает навсегда. */
.install {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top));
  background: var(--pad);
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
}
.install-btn {
  flex: none;
  padding: 8px 14px;
  background: none;
  color: var(--fg);
  border: 1px solid var(--faint);
  border-radius: 10px;
  font: inherit;
}
.install-btn:active { background: var(--edge); }
.install-close {
  flex: none;
  width: 32px; height: 32px;
  padding: 0;
  background: none;
  color: var(--muted);
  border: 0;
  font-size: 22px;
  line-height: 1;
}