@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Авторские правила display перебивают браузерное [hidden]{display:none}:
   .btn{display:block} и .mid{display:flex} показывали скрытые блоки.
   Ловится только глазами — разметка при этом валидна. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Каркас экрана: прокрутка сверху, действие снаружи прокрутки внизу.
     Кнопка обязана оставаться в зоне большого пальца на любой длине. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.foot { flex: none; padding-bottom: max(0.35rem, env(safe-area-inset-bottom)); }

.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(1.35rem + env(safe-area-inset-top)) var(--pad) 0;
}
.top-date {
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); letter-spacing: 0.08em;
  color: var(--bone-dim); text-transform: uppercase;
}

h1 {
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.12; margin: 1.5rem var(--pad) 0; text-wrap: balance;
}

.lead { font-size: var(--fs-base); color: var(--bone-dim); margin: 0.7rem var(--pad) 0; }
.mid { flex: 1; display: flex; flex-direction: column; justify-content: center;
       gap: 1rem; padding: 0 var(--pad); min-height: 0; }

.cap {
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--brass);
}

.btn-wrap { padding: 0.6rem var(--pad) 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.btn {
  display: block; width: 100%; text-align: center; font-family: inherit;
  text-decoration: none;   /* кнопкой бывает и ссылка — подчёркивание лишнее */
  font-size: var(--fs-md); font-weight: 600; padding: 1.05rem 1rem;
  border: 0; border-radius: var(--r-md);
  background: var(--brass); color: var(--on-brass);
  /* Отклик на нажатие — единственное движение в приложении, кроме награды. */
  transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--quiet { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--hair); }

.steps { margin-top: 1.5rem; }
.step {
  display: grid; grid-template-columns: 26px 1fr; gap: 0.85rem;
  align-items: start; padding: 1rem var(--pad);
}
.step + .step { border-top: 1px solid var(--hair); }
.step .num {
  width: 26px; height: 26px; border-radius: var(--r-round);
  box-shadow: inset 0 0 0 1.5px var(--brass);
  display: grid; place-items: center;
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-sm); color: var(--brass);
}
.step .txt { font-size: var(--fs-base); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: var(--r-hair); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ── лента дней программы ─────────────────────────────────────────────── */
/* Дни программы, а не календарная неделя: программа тридцатидневная,
   и «воскресенье» в ней ничего не значит. */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 1.1rem var(--pad) 0; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.wd b {
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-sm); font-weight: 400; color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.wd em { width: 7px; height: 7px; border-radius: var(--r-round); background: #33363c;
         display: block; margin-top: 0.2rem; font-style: normal; }
.wd.done b { color: var(--bone); } .wd.done em { background: var(--brass); }
.wd.now b { color: var(--brass); font-weight: 500; }
.wd.now em { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brass); }
/* Пропуск виден формой, а не словами: пустое кольцо вместо строки-упрёка. */
.wd.miss em { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(201, 88, 74, 0.65); }
.wd.fut b { opacity: 0.45; } .wd.fut em { background: #22252a; }

/* ── список дня ───────────────────────────────────────────────────────── */
.list { margin-top: 1.1rem; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem;
  align-items: center; padding: 0.95rem var(--pad); min-height: 60px;
  color: inherit; text-decoration: none;
}
.row + .row, .more { border-top: 1px solid var(--hair); }
.tick {
  width: 21px; height: 21px; border-radius: var(--r-round); flex: none;
  box-shadow: inset 0 0 0 1.5px var(--hair); display: grid; place-items: center;
  font-size: var(--fs-xs); color: transparent;
}
.tick--done { background: var(--brass); box-shadow: none; color: var(--on-brass); }
.tick--now { box-shadow: inset 0 0 0 1.5px var(--brass); }
.name { font-size: var(--fs-md); font-weight: 500; }
.sub { font-size: var(--fs-sm); color: var(--bone-dim); display: block; margin-top: 0.05rem; }
.right {
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-sm); color: var(--bone-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.more {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.95rem var(--pad); font-size: var(--fs-base); color: var(--bone-dim);
  text-decoration: none;
}
.more b { font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
          font-weight: 400; font-variant-numeric: tabular-nums; }

/* ── карточка упражнения ──────────────────────────────────────────────── */
.back { text-decoration: none; }
.capline { padding: 0.5rem var(--pad) 0; }
.doc { display: flex; flex-direction: column; gap: 1.15rem; padding: 1.35rem var(--pad) 0; }
/* Капс живёт только на 11px — правило системы. На 9px подпись для глаза
   55+ просто отсутствует, а это единственное объяснение упражнения. */
.doc .lb {
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--brass); display: block; margin-bottom: 0.35rem;
}
.doc p { font-size: var(--fs-base); line-height: 1.5; color: var(--bone); }
.doc p.mono { font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
              font-variant-numeric: tabular-nums; }

/* ── экран подхода ────────────────────────────────────────────────────── */
/* Кольцо без трека: одна латунная дуга на голой земле даёт 8,53:1, а две
   дуги между собой — 2,95:1 при пороге 3:1 для графики. */
.ring {
  width: 72%; aspect-ratio: 1; border-radius: var(--r-round);
  position: relative; display: grid; place-items: center; margin: 0 auto;
  background: conic-gradient(from -90deg,
    var(--brass) 0 var(--ring-done, 0%), transparent var(--ring-done, 0%) 100%);
}
.ring { transition: --ring-done 0s linear; }
@property --ring-done { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
/* До старта заливки нет вовсе (--ring-done: 0%), и кольцо было бы просто
   невидимым — экран открывался пустым. Пока не нажали «Начать», рисуем
   контур: это граница объекта, а не трек прогресса. */
.ring--idle { box-shadow: inset 0 0 0 2px var(--brass-dim); }
.ring::after { content: ""; position: absolute; inset: 13%;
               border-radius: var(--r-round); background: var(--ground); }
.ring-cue { position: relative; z-index: 1; font-size: var(--fs-lg);
            font-weight: 600; color: var(--bone); }
.remain {
  font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-lg); color: var(--bone-dim);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.hint { font-size: var(--fs-base); color: var(--bone-dim); text-align: center; }
.btn--link { background: transparent; color: var(--bone-dim); box-shadow: none;
             font-weight: 400; padding: 0.7rem 1rem; font-size: var(--fs-base); }