/*
  ЖИВ — оформление приложения. Направление «Олимпийка», выбрано Павлом 13.10.2026.

  Приложение одето в форму тренера. У Леонидыча это красная олимпийка с белым
  кантом: красный, кремовый, тёмно-синий, буквы как на спортивной форме и
  табло. Кант — две светлые полосы по красному — открывает каждый экран.
  Полосы работают, а не украшают: ими нарисованы минуты тренировки, дни недели
  и шкала самочувствия.

  Таймер — единственный тёмный экран: телефон лежит на скамейке в двух метрах,
  и «что я делаю прямо сейчас» должно читаться оттуда. Название и счёт
  занимают экран, остальное мелко.

  Форма у каждого тренера своя. Цвета ниже — форма Леонидыча; когда в
  приложении появится Леночка, её цвета лягут тем же набором имён под
  [data-trainer="lena"], и ни одно правило ниже менять не придётся.
*/

:root {
  --red: #c8102e;        /* олимпийка */
  --cream: #f4efe4;      /* кант и бумага */
  --paper: #fbf8f1;      /* поля ввода и плашки на бумаге */
  --navy: #121b36;       /* буквы и ночь таймера */
  --navy-2: #24305a;
  --soft: #55607f;       /* подписи на бумаге */
  --night-soft: #a9b3d6; /* подписи на ночи */
  --night-stop: #ff8fa0;

  --display: "Russo One", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --label: "Oswald", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gap: 14px;
  --side: 18px;
  color-scheme: light;
}

/* Форма Леночки: сиреневый топ вместо красной олимпийки, ночь — сливовая. */
:root[data-trainer="lena"] {
  --red: #7d55c7;
  --navy: #241733;
  --navy-2: #3b2a52;
  --soft: #6b5f7d;
  --night-soft: #cbbfe0;
  --night-stop: #ff8fb8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--cream);
  color: var(--navy);
  font: 500 17px/1.4 var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* Быстрые нажатия подряд не должны увеличивать экран: браузер принимал их за
     двойное касание. Щипок для увеличения при этом остаётся. */
  touch-action: manipulation;
}

#screen {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--side) calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

h1, h2, p, dl, ol { margin: 0; }

h1 {
  font: 400 30px/1 var(--display);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h2, .label {
  font: 600 13px/1.25 var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.hint { color: var(--soft); font-size: 15px; }
.lead { white-space: pre-line; }
.note { font-size: 15px; }
.pick { font-weight: 800; font-size: 20px; line-height: 1.2; white-space: pre-line; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }

/* --- форма: красное поле и кант ------------------------------------------------- */

.flag {
  margin: 0 calc(-1 * var(--side));
  padding: calc(20px + env(safe-area-inset-top)) var(--side) 16px;
  background: var(--red);
  color: var(--cream);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.flag span {
  display: block; margin-bottom: 8px; opacity: 0.88;
  font: 600 12px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase;
}
.flag b { display: block; font: 400 clamp(40px, 15vw, 58px)/0.86 var(--display); letter-spacing: 0.01em; }
.flag img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cream); flex: none; }

.pipe {
  flex: none; height: 15px; margin: 0 calc(-1 * var(--side));
  background: linear-gradient(to bottom,
    var(--red) 0 3px, var(--cream) 3px 7px, var(--red) 7px 10px, var(--cream) 10px 14px, var(--red) 14px 15px);
}
.flag + .pipe { margin-top: calc(-1 * var(--gap)); }
/* Экран без красного поля: кант идёт от самого верха, под вырезом телефона — красный. */
.pipe:first-child { box-sizing: content-box; border-top: env(safe-area-inset-top, 0px) solid var(--red); }
.pipe:first-child + * { margin-top: 4px; }

/* --- кто сегодня ведёт ------------------------------------------------------------ */

.who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.who button { border-left-width: 2px; padding: 10px 12px; min-height: 0; font-weight: 800; }
.who button small { margin-top: 2px; }
.who button.on { border-left-width: 10px; }
.who button.on small { color: var(--cream); opacity: 0.8; }

/* --- кнопки --------------------------------------------------------------------- */

button {
  font: 600 16px/1.25 var(--text);
  color: var(--navy);
  background: transparent;
  border: 2px solid var(--navy);
  border-left-width: 10px;
  border-radius: 0;
  padding: 13px 14px;
  min-height: 56px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, transform 0.06s;
}
button:active { transform: translateY(1px); background: rgba(18, 27, 54, 0.08); }
button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
button[disabled] { opacity: 0.5; cursor: default; }

button.primary {
  background: var(--navy); color: var(--cream); border-color: var(--navy);
  border-left-color: var(--red);
  font: 400 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 18px 16px 17px; min-height: 62px;
}
button.primary:active { background: var(--navy-2); }
button.on { background: var(--navy); color: var(--cream); border-left-color: var(--red); }
button.center { text-align: center; }
button.danger { color: var(--red); border-color: var(--red); }
button small { display: block; margin-top: 4px; font: 500 13px/1.3 var(--text); color: var(--soft); text-transform: none; letter-spacing: 0; }
button.link {
  border: 0; background: none; min-height: 0; width: auto; padding: 8px 0;
  color: var(--soft); font-weight: 500; font-size: 15px; text-decoration: underline;
}

input {
  font: inherit; width: 100%; min-height: 56px; padding: 14px;
  color: var(--navy); background: var(--paper);
  border: 2px solid var(--navy); border-radius: 0;
}
input:focus { outline: 3px solid var(--red); outline-offset: 1px; }

/* Код из письма — крупно и вразрядку, как номер на спине. */
input.code {
  font: 400 34px/1 var(--display); letter-spacing: 0.22em; text-align: center;
  font-variant-numeric: tabular-nums; min-height: 72px;
}
input.code::placeholder { color: var(--soft); opacity: 0.45; }

/* Галочка с подписью: согласия, «без срока». */
.tick { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.tick input {
  flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; margin: 1px 0 0;
  accent-color: var(--red);
}
.tick span { flex: 1; min-width: 0; }

a { color: inherit; }
a.button {
  display: block; text-decoration: none; text-align: center;
  background: var(--red); color: var(--cream);
  font: 400 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 18px 16px 17px;
}
a.button:active { transform: translateY(1px); }
a.button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.error { color: var(--red); font-weight: 600; min-height: 1.4em; }

/* --- плашки и табло --------------------------------------------------------------- */

.card { border: 2px solid var(--navy); padding: 12px 14px; }

/* Доступ закрыт: как его открыть. */
.pay { display: flex; flex-direction: column; gap: 10px; border-left: 10px solid var(--red); }
.pay b { font-weight: 800; font-size: 18px; }

/* Экран «Люди»: человек, его срок и кнопки. */
.person { display: flex; flex-direction: column; gap: 4px; }
.person b { font-weight: 800; overflow-wrap: anywhere; }
.person small { color: var(--soft); font-size: 14px; }
.person.shut { border-style: dashed; }
.person .row { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.person .row button {
  flex: 1 1 40%; min-height: 44px; padding: 8px 10px; font-size: 14px;
  border-left-width: 2px; text-align: center;
}

.facts { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 0; border-width: 0; padding: 0; }
.facts dt, .facts dd { padding: 10px 0; border-bottom: 2px solid var(--navy); margin: 0; }
.facts dt { padding-right: 14px; font: 600 13px/1.5 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.facts dd { text-align: right; font-weight: 600; }

.board { display: flex; flex-direction: column; }
.board div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--navy); }
.board span { font: 600 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.board b { font: 400 34px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board small { font: 600 13px/1 var(--label); letter-spacing: 0.1em; color: var(--soft); }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.three button {
  border-left-width: 2px; text-align: center; padding: 14px 4px; min-height: 64px;
  font: 600 13px/1.25 var(--label); letter-spacing: 0.06em; text-transform: uppercase;
}
.three button:nth-child(2) { background: var(--navy); color: var(--cream); }
.three button:nth-child(3) { background: var(--red); border-color: var(--red); color: var(--cream); }

/* --- главная: неделя дорожками ------------------------------------------------------ */

.lanes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 74px; }
.lanes div {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%;
  font: 600 12px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft);
}
.lanes i { width: 100%; height: 16%; border: 2px solid var(--navy); }
.lanes .done i { background: var(--red); border-color: var(--red); }
.lanes .now { color: var(--navy); font-weight: 700; }

/* --- опрос: самочувствие шкалой ------------------------------------------------------ */

.big { display: flex; align-items: flex-end; gap: 12px; font: 400 clamp(120px, 42vw, 170px)/0.8 var(--display); color: var(--red); }
.big b { font-weight: 400; font-variant-numeric: tabular-nums; }
.big small { font: 600 14px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); padding-bottom: 10px; }
/* По шкале ведут пальцем, как по ползунку: страница под ним не едет. */
.scale {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 120px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.scale button { min-height: 0; padding: 0; border: 2px solid var(--navy); background: transparent; }
.scale button.on { background: var(--red); border-color: var(--red); }
.scale button { pointer-events: none; }
button.step { border-left-width: 2px; font: 400 26px/1 var(--display); min-height: 54px; padding: 8px 0; }

/* --- план ----------------------------------------------------------------------------- */

.segment { display: flex; flex-direction: column; gap: 6px; }
.segment .when { font: 400 17px/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
.segment .title { font-weight: 800; }
.segment .rounds { font: 600 12px/1.4 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.segment ol { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.segment li { display: flex; justify-content: space-between; gap: 12px; }
.segment li .how-much { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.segment .names { color: var(--soft); }

/* --- таймер: ночь ----------------------------------------------------------------------- */

#screen.timer {
  background: var(--navy); color: var(--cream);
  padding-top: calc(18px + env(safe-area-inset-top));
  max-width: none;
}
#screen.timer > * { width: 100%; max-width: 524px; margin-inline: auto; }
body:has(#screen.timer) { background: var(--navy); }

.t-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 600 14px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-soft);
}
.t-head .now { font: 400 34px/1 var(--display); color: var(--cream); letter-spacing: 0; }

.t-min { display: grid; gap: 2px; height: 26px; }
.t-min i { background: var(--navy-2); }
.t-min i.on { background: var(--red); }
.t-min i.now { background: var(--cream); }
.t-bar { height: 3px; background: var(--navy-2); margin-top: -8px; }
.t-bar i { display: block; height: 100%; width: 0; background: var(--cream); }

.t-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 6px 0; }
.t-title {
  font: 400 clamp(40px, 13.5vw, 72px)/0.94 var(--display); text-transform: uppercase;
  overflow-wrap: anywhere; text-wrap: balance;
}
.t-title.mid { font-size: clamp(34px, 11vw, 60px); }
.t-title.long { font-size: clamp(28px, 8.6vw, 46px); }
.t-count {
  align-self: flex-start; max-width: 100%;
  background: var(--cream); color: var(--red);
  font: 400 clamp(38px, 12.5vw, 64px)/1 var(--display); padding: 12px 14px 10px;
  font-variant-numeric: tabular-nums;
}
.t-count:empty { display: none; }
.t-note, .t-next { font: 600 14px/1.3 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-soft); }
.t-caption { font-weight: 800; font-size: 18px; }
.t-caption:empty, .t-note:empty { display: none; }
.t-clock {
  font: 400 26px/1 var(--display); color: var(--night-soft); min-height: 104px;
  display: flex; align-items: center; font-variant-numeric: tabular-nums;
}
.t-clock.count { color: var(--cream); font-size: 104px; }
.t-clock.paused { font: 800 19px/1.25 var(--text); color: var(--cream); }
.t-next { text-wrap: balance; }

.t-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.t-keys button {
  border: 2px solid var(--navy-2); color: var(--cream); text-align: center; padding: 14px 2px; min-height: 60px;
  font: 600 12px/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase;
}
.t-keys button:active { background: var(--navy-2); }
.t-keys button.stop { border-color: var(--red); color: var(--night-stop); }
.t-keys button:focus-visible { outline-color: var(--cream); }

/* --- карточки подходов: зал ---------------------------------------------------------- */

.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pairs button { text-align: center; border-left-width: 2px; }

.t-rest { display: flex; align-items: baseline; gap: 10px; min-height: 40px; color: var(--night-soft); }
.t-rest b { font: 400 30px/1 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; }
.t-rest span { font: 600 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; }

.c-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-keys button {
  border: 2px solid var(--navy-2); color: var(--cream); text-align: center; padding: 14px 2px; min-height: 58px;
  font: 600 13px/1.2 var(--label); letter-spacing: 0.1em; text-transform: uppercase;
}
.c-keys button:active { background: var(--navy-2); }
.c-keys button:focus-visible { outline-color: var(--cream); }
.c-keys button.done {
  grid-column: 1 / -1; min-height: 72px; background: var(--cream); border-color: var(--cream); color: var(--navy);
  font: 400 22px/1 var(--display); letter-spacing: 0.04em;
}
.c-keys button.done:active { background: var(--paper); transform: translateY(1px); }
.c-keys button.stop { border-color: var(--night-stop); color: var(--night-stop); }

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

.sheet-back {
  position: fixed; inset: 0; background: rgba(10, 15, 32, 0.66);
  display: flex; align-items: flex-end; justify-content: center; z-index: 10;
}
.sheet {
  width: 100%; max-width: 560px; background: var(--cream); color: var(--navy);
  border-top: 10px solid var(--red);
  padding: 22px var(--side) calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--gap);
}

#toast {
  position: fixed; left: 16px; right: 16px; margin-inline: auto; width: fit-content;
  transform: translateY(20px);
  bottom: calc(22px + env(safe-area-inset-bottom));
  max-width: min(calc(100vw - 32px), 520px); padding: 12px 16px;
  background: var(--navy); color: var(--cream); border-left: 10px solid var(--red);
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 20;
}
#toast.show { opacity: 1; transform: translateY(0); }
/* На тёмных экранах кнопки внизу — под рукой, и подсказка их не закрывает: она сверху. */
body:has(#screen.timer) #toast {
  background: var(--cream); color: var(--navy);
  bottom: auto; top: calc(16px + env(safe-area-inset-top)); transform: translateY(-20px);
}
body:has(#screen.timer) #toast.show { transform: translateY(0); }

/* --- нижнее меню --------------------------------------------------------------------------- */

#screen.with-tabs { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
#screen.with-tabs ~ #toast { bottom: calc(86px + env(safe-area-inset-bottom)); }

nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: center;
  background: var(--cream); border-top: 3px solid var(--navy);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs button {
  flex: 1; max-width: 190px; min-height: 56px; padding: 8px 4px; border: 0; text-align: center;
  font: 600 13px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft);
}
nav.tabs button.on { background: var(--navy); color: var(--cream); }

/* --- история --------------------------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { border: 2px solid var(--navy); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile b { font: 400 28px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.tile span { font: 600 12px/1.2 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.tile small { color: var(--soft); font-size: 12px; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font: 400 18px/1 var(--display); text-transform: uppercase; }
.cal-head button.step { width: 52px; border-left-width: 2px; min-height: 44px; font-size: 22px; padding: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.cal-grid .wd { font: 600 11px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); text-align: center; }
.cal-grid .day {
  aspect-ratio: 1; width: 100%; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; background: none;
  color: var(--soft); font: 600 15px/1 var(--text); font-variant-numeric: tabular-nums;
}
.cal-grid .day.full { background: var(--red); border-color: var(--red); color: var(--cream); font-weight: 800; }
.cal-grid .day.part { border-color: var(--red); color: var(--navy); font-weight: 800; }
.cal-grid .day.planned { border: 2px dashed var(--soft); }
.cal-grid .day.today:not(.full) { color: var(--navy); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

button.row-card { display: flex; align-items: center; gap: 12px; }
button.row-card .when { font: 400 17px/1 var(--display); color: var(--red); font-variant-numeric: tabular-nums; }
button.row-card .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
button.row-card .what b { font-weight: 800; overflow-wrap: anywhere; }
button.row-card small { margin: 0; }
button.row-card .said { color: var(--soft); font-size: 14px; white-space: nowrap; }
button.row-card.faint { border-style: dashed; }
button.row-card.faint .when, button.row-card.faint .what b { color: var(--soft); }
button.back { align-self: flex-start; text-decoration: none; font-size: 16px; }

.moves { display: flex; flex-direction: column; gap: 12px; }
.move { display: flex; flex-direction: column; gap: 2px; }
.move b { font-weight: 800; }
.move small { color: var(--soft); font-size: 14px; }
.move small.did { color: var(--navy); }
.move small.skipped { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}