/*
  Оформление приложения. Токены и правила — docs/pwa/design-system.md,
  вид — docs/pwa/mockups.html. Здесь только то, что нужно живым экранам.

  Тема одна, светлая: экран открывают утром и вечером, тёмная отложена
  осознанно. Когда дойдут руки — переопределять токены, а не цвета в
  компонентах, поэтому цвет в правилах ниже задаётся только переменной.
*/

:root{
  color-scheme: light;
  --bg:#F8FAF9;
  --surface:#FFFFFF;
  --ink:#14201B;
  --muted:#68776F;
  --faint:#93A09A;
  --line:#E4EAE6;
  --accent:#0E6B4F;
  --accent-soft:#E6F1EC;
  --warn:#A8531F;
  --warn-soft:#F8EDE4;

  --sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,"Cascadia Mono",monospace;

  --pad:18px;                      /* поля экрана */
  --nav:64px;                      /* высота нижней панели без безопасной зоны */
  --safe:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Двойной тап масштабирует страницу и мешает отмечать дела. */
  touch-action:manipulation;
}
.sprite{position:absolute}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.02em}

/* Высота — 100dvh, никогда 100vh: адресная строка мобильного браузера
   съедает разницу, и нижняя панель уезжает за экран. */
.app{
  min-height:100dvh;display:flex;flex-direction:column;
  padding-bottom:calc(var(--nav) + var(--safe));
}
/* Снизу — место под круглую кнопку: без него она накрывает последнюю
   строку списка, а накрывает она именно ту, до которой человек дочитал. */
.view{flex:1;padding:6px var(--pad) 78px;display:flex;flex-direction:column;gap:14px;outline:none}
.view:focus-visible{outline:none}

/* ------------------------------------------------------------- шапка */

.appbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.appbar h1{font-size:19px;line-height:23px}
.appbar p{margin:1px 0 0;font-size:11.5px;color:var(--faint);font-family:var(--mono)}
.ghost{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--muted);flex:none;
}
.ghost:active{transform:scale(.96)}

/* полоса связи */
.banner{
  margin:8px var(--pad) -6px;padding:8px 11px;border-radius:12px;
  background:var(--warn-soft);color:var(--warn);font-size:11.5px;line-height:1.4;
}
.banner.calm{background:var(--accent-soft);color:var(--accent)}

/* ------------------------------------------------- лента времени и дела */

.rail{display:grid;grid-template-columns:52px 1fr;column-gap:12px;align-items:start}
.rail > .t{
  font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:12px;
  text-align:right;font-variant-numeric:tabular-nums;
}
.rail > .t.free{color:var(--faint)}
.rail > .t.late{color:var(--warn)}
.item{
  border-top:1px solid var(--line);padding:9px 0 11px;
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
}
.rail > .item:first-of-type{border-top:0}
.item h4{font-size:14px;font-weight:450;line-height:1.35;letter-spacing:-.01em}
.item p{margin:3px 0 0;font-size:11.5px;color:var(--faint)}
.item .grow{flex:1;min-width:0}
.item.done h4{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line)}

.who{
  font-family:var(--mono);font-size:10.5px;color:var(--accent);background:var(--accent-soft);
  padding:2px 6px;border-radius:6px;white-space:nowrap;align-self:center;
}
.who.b{color:var(--warn);background:var(--warn-soft)}

/* Цель нажатия — 44×44 при видимом квадрате 21: пальцем в двадцать один
   пиксель не попасть, а отметка — главное действие экрана. */
.check{
  width:44px;height:44px;margin:-11px -11px -11px -11px;flex:none;
  display:grid;place-items:center;
}
.check i{
  width:21px;height:21px;border-radius:7px;border:1.5px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.check[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent);color:#fff}

.label{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);
}
.label.warn{color:var(--warn)}
.divider{display:flex;align-items:center;gap:8px}
.divider span:last-child{flex:1;height:1px;background:var(--line)}

/* ------------------------------------------------------------ блоки */

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 15px}
.card.flat{border-radius:16px;padding:12px 14px}
.card.soft{background:var(--accent-soft);border-color:#CFE3D9}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.small{font-size:11.5px;line-height:1.5}
.stack{display:grid;gap:8px}
.grow{flex:1;min-width:0}
.push-down{margin-top:auto}

.btn{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;
  border-radius:14px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:450;
  min-height:44px;width:100%;
}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.warn{color:var(--warn)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5}
.row-btns{display:flex;gap:8px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:11.5px;padding:6px 9px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;gap:5px;
}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip b{font-weight:500;color:var(--ink);font-family:var(--mono);font-size:11px}

.tabs{display:flex;gap:4px;padding:3px;background:#EDF1EF;border-radius:12px}
.tabs a{
  flex:1;text-align:center;padding:7px 0;font-size:12px;border-radius:9px;color:var(--muted);
}
.tabs a.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(20,32,27,.07)}

textarea.phrase{
  width:100%;min-height:96px;resize:none;border:1px solid var(--line);border-radius:13px;
  background:var(--surface);color:var(--ink);padding:13px 14px;font-size:14.5px;line-height:1.5;
  font-family:var(--sans);
}
textarea.phrase:focus{outline:none;border-color:var(--accent)}

/* --------------------------------------------------------- месяц */

.month{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.month span{font-family:var(--mono);font-size:9.5px;color:var(--faint);padding-bottom:4px}
.month button{
  font-family:var(--mono);font-size:12px;aspect-ratio:1;display:grid;place-items:center;
  border-radius:9px;position:relative;color:var(--ink);width:100%;
}
.month button.has::after,.month button.late::after{
  content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;
  background:var(--accent);
}
.month button.late::after{background:var(--warn)}
.month button.now{background:var(--ink);color:#fff}
.month button.pick{background:var(--accent-soft);color:var(--accent)}
.month button.out{color:#C3CCC7}

/* ------------------------------------------------- панель и кнопка */

.fab{
  position:fixed;right:var(--pad);bottom:calc(var(--nav) + var(--safe) + 14px);
  width:50px;height:50px;border-radius:17px;background:var(--accent);color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 24px -10px rgba(14,107,79,.6);
}
.fab:active{transform:scale(.96)}
.fab[hidden]{display:none}

.navbar{
  position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  padding:10px 12px calc(10px + var(--safe));border-top:1px solid var(--line);
  background:var(--surface);color:var(--faint);
}
.navbar a{
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;
  font-family:var(--mono);letter-spacing:.04em;padding:2px 10px;min-width:56px;
}
.navbar a.on{color:var(--accent)}

/* ---------------------------------------------- программа занятий */

/* Ядро дня — единственный блок, залитый акцентом целиком. Так и задумано:
   экран отвечает на вопрос «что обязательно» за секунду. */
.core{background:var(--accent);color:#fff;border-radius:20px;padding:16px;display:grid;gap:9px}
.core .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.core h2{font-size:22px;line-height:26px}
.core p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.core .reps{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.78)}

.q{display:grid;gap:8px}
.opt{
  border:1px solid var(--line);background:var(--surface);border-radius:13px;
  padding:13px;font-size:13.5px;display:flex;justify-content:space-between;
  align-items:center;width:100%;text-align:left;min-height:44px;
}
.opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:500}
.opt:active{transform:scale(.99)}
.prog{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);transition:width .22s ease}

/* Плитки — только здесь: три числа недельного отчёта действительно
   однородны. В остальных местах ряд из трёх плиток запрещён. */
.stat{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:16px;overflow:hidden;
}
.stat > div{background:var(--surface);padding:11px 12px}
.stat b{display:block;font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em}
.stat span{font-size:10.5px;color:var(--faint)}

.bars{display:flex;align-items:flex-end;gap:5px;height:56px}
.bars i{flex:1;background:var(--accent-soft);border-radius:4px 4px 2px 2px}
.bars i.hi{background:var(--accent)}
.bars i.zero{background:var(--line);height:3px !important}
.barlab{display:flex;gap:5px;font-family:var(--mono);font-size:9px;color:var(--faint);text-align:center}
.barlab span{flex:1}

/* переключатель повода уведомлений */
.sw{width:40px;height:23px;border-radius:12px;background:var(--accent);position:relative;flex:none}
.sw::after{
  content:"";position:absolute;top:2px;right:2px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.sw.off{background:#DCE3DF}
.sw.off::after{right:auto;left:2px}
.row-toggle:first-child{border-top:0 !important}
input[type="time"]{border:1px solid var(--line);background:var(--surface);color:var(--ink)}

/* ------------------------------------------------- лист, подсказка */

.scrim{position:fixed;inset:0;background:rgba(20,32,27,.32)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0;
  padding:16px var(--pad) calc(16px + var(--safe));display:grid;gap:10px;
  max-height:86dvh;overflow:auto;
}
.sheet h3{font-size:17px}
.sheet[hidden],.scrim[hidden]{display:none}

.toast{
  position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--nav) + var(--safe) + 14px);
  background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;font-size:12.5px;
}
.toast[hidden]{display:none}
.toast button{color:#8FD3B8;font-size:12.5px;font-weight:500;white-space:nowrap}

/* ------------------------------------------------- пусто и загрузка */

.empty{display:grid;gap:10px;justify-items:start;padding:18px 0}
.empty h3{font-size:16px}
.empty p{margin:0;color:var(--muted);font-size:13px}

.skeleton{
  display:inline-block;width:100%;border-radius:7px;background:var(--line);
  color:transparent;user-select:none;
}
.w-6{width:60%}
.w-7{width:70%}
.w-9{width:90%}

/* ----------------------------------------------------------- движение */

/* Появление списка — каскад по 40мс, один раз при открытии. Анимируются
   только transform и opacity: всё остальное дёргает раскладку. */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.enter > *{animation:rise .22s ease both}
.enter > *:nth-child(2){animation-delay:.04s}
.enter > *:nth-child(3){animation-delay:.08s}
.enter > *:nth-child(4){animation-delay:.12s}
.enter > *:nth-child(5){animation-delay:.16s}
.enter > *:nth-child(n+6){animation-delay:.2s}

@media (prefers-reduced-motion: reduce){
  /* Выключается всё, кроме смены состояний: отметка обязана оставаться
     заметной, а вот появление списка — нет. */
  .enter > *{animation:none}
  .btn:active,.fab:active,.ghost:active{transform:none}
}