/* Aegis component layer. Использует только токены из tokens.css.
   Компоненты покрывают все типы карточек с референсов:
   приоритет-задача, метрика-плитка, кольцо recovery, строка пайплайна, строка приема пищи,
   барабанный пикер, график прогресса, поле Ask Aegis, CTA-кнопка, нижний таб-бар. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* Страница сама НЕ прокручивается: прокручивается только .screen внутри
     каркаса. Иначе на iOS резинка тянет весь интерфейс, и нижняя панель
     ездит вверх-вниз (жалоба Ивана 05.08). */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Каркас: центрированная колонка под телефон. Высота фиксирована на 100dvh, скроллится
   ТОЛЬКО контент (.screen), а таб-бар с подписью закреплены снизу и не уезжают (BUG-1).
   min-height:0 у .screen обязателен: иначе flex-элемент не сжимается и раздувает всю страницу. */
.app {
  max-width: var(--app-max);
  margin: 0 auto;
  /* ПРИБИТ К ОКНУ (правка Ивана 05.08 «панель ездит вверх-вниз»): раньше высота
     считалась от 100dvh, а на iOS эта величина меняется на ходу - при прокрутке
     сворачивается панель браузера, при этом же меняется и env(safe-area-inset-
     bottom). Каркас дышал, и вместе с ним прыгал таб-бар. Теперь каркас
     прибит к окну, а под полоску iPhone используется ЗАМОРОЖЕННОЕ значение
     --sab (снимается один раз при старте, см. app.js). */
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  min-height: 0;
  /* Ужато 06.08 по правке Ивана: верх и низ экрана съедали полезную площадь.
     Отступ под челку (env safe-area-inset-top) убрать нельзя - под ним
     динамический остров, но собственный отступ сведен к минимуму. */
  padding: calc(var(--sp-2) + env(safe-area-inset-top, 0px)) var(--page-pad) var(--sp-2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Экран, у которого прокручивается только середина: шапка сверху и поле ввода
   снизу остаются на месте. Владельцу важно, чтобы «спросить Эгиду» было под рукой
   всегда, без пролистывания вниз. */
.screen:has(> .screen__scroll) { overflow: hidden; }
.screen__scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen__scroll::-webkit-scrollbar { display: none; }
.field--pinned { flex: none; margin-top: var(--sp-3); }

/* Экраны, которые рендерятся в контейнер (питание, календарь, тело): контейнер
   должен растягиваться на всю высоту, иначе закрепленный низ съезжает вверх. */
#fuel-view, #week-view, #body-view, #work-view {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}

/* --- Верхняя строка экрана: время + дата --- */
.topbar {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-2);
  font-size: var(--fs-body);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar .date { color: var(--text-2); }

/* --- Логотип и заголовки --- */
.headline {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  /* БЕЗ env(safe-area-inset-top): отступ под челку уже дает .screen, и в PWA
     с иконки он задваивался - «много пустого сверху» (правка Ивана 31.07).
     Отступ снизу ужат 06.08: шапка отъедала место у содержимого. */
  margin-bottom: var(--sp-2);
}
.headline .date { color: var(--text-2); font-size: var(--fs-body); }
.wordmark {
  flex: none;
  font-size: var(--fs-wordmark);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
.screen-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: var(--sp-3) 0 var(--sp-4);
}
.label {
  flex: none;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--text-2);
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
}
.label:first-of-type { margin-top: 0; }
.screen__scroll > .label:first-child { margin-top: 0; }
.label--row { display: flex; justify-content: space-between; align-items: baseline; }
.label__link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2);
}

/* История привычек: серия, лучшая серия, процент выполнения за окно */
.habit-stat { margin-bottom: var(--sp-2); }
.habit-stat__head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-2); }
.habit-stat__title { font-size: var(--fs-body); font-weight: 600; }
.habit-stat__pct { font-size: var(--fs-body); font-weight: 700; color: var(--accent); }
.habit-stat__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-2); }

/* Неделя кружками-отметками (TickTick): тап по дню - отметка */
.habit-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3); }
.habit-day { background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
.habit-day__wd { font-size: 10px; color: var(--text-3); text-transform: uppercase; }
.habit-day__dot {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  border: 1.5px solid var(--neutral-track); color: var(--cta-fg);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  transition: background var(--tap), border-color var(--tap);
}
.habit-day--done .habit-day__dot { background: var(--accent); border-color: var(--accent); }
.habit-day--future { opacity: 0.35; cursor: default; }

/* График выполнения по неделям месяца */
.habit-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  align-items: end; margin-bottom: var(--sp-2); }
.habit-weeks__col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.habit-weeks__track { width: 100%; height: 46px; border-radius: var(--r-sm);
  background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.habit-weeks__fill { width: 100%; background: var(--accent); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.habit-weeks__pct { font-size: 10px; color: var(--text-2); font-weight: 600; }
.habit-weeks__cap { font-size: 9px; color: var(--text-3); text-transform: uppercase; }

/* --- Базовая карточка --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  /* Ужато 06.08: было 16/12. Владелец просил больше содержимого на экран -
     карточки стали плотнее, но не липнут друг к другу. */
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}

/* ============ Три приоритета на главной ============ */
#priorities { border-top: 1px solid var(--border); }
.priority-row {
  border-bottom: 1px solid var(--border); padding: var(--sp-3) 0;
  min-height: 68px; cursor: pointer;
}
.priority {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}
.priority__mark {
  display: grid; place-items: center;
  min-height: 44px;
}
.ring {
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  border: 2px solid var(--neutral-track);
  display: grid; place-items: center;
  transition: border-color var(--tap);
}
.ring--done {
  border-color: var(--accent);
}
.ring--done::after {
  content: "";
  width: 12px; height: 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.priority__title {
  font-size: 17px; line-height: 1.28;
  font-weight: 600;
  color: var(--text);
}
.priority--done .priority__title {
  text-decoration: line-through;
  text-decoration-color: var(--text-2);
  color: var(--text);
}
.priority--empty {
  cursor: pointer;
}
.priority--empty .priority { grid-template-columns: 36px 1fr; }
.priority--empty .priority__title { color: var(--text-2); font-weight: 500; }
.priority__menu {
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: var(--text-2); font: 700 17px/1 var(--font); letter-spacing: 1px;
}
.card.is-done { background: var(--accent-wash); }

.home-date { font-size: 17px; font-weight: 700; margin: var(--sp-2) 0 var(--sp-3); }
.home-modes {
  flex: none; display: flex; align-items: stretch; gap: 0;
  min-height: 44px; margin-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.home-mode {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--sp-2);
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-2); font: 600 var(--fs-body)/1 var(--font);
}
.home-mode--active { color: var(--text); border-bottom-color: var(--text); }
.home-modes .compact-more { flex: none; border: 0; background: none; }

.priority-tracker { margin-top: var(--sp-5); }
.priority-tracker__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-body); margin-bottom: var(--sp-2);
}
.priority-tracker__head > span { font-weight: 700; }
.priority-tracker__head strong { font-size: var(--fs-body); font-weight: 600; }
.priority-tracker__progress {
  height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2);
}
.priority-tracker__progress span {
  display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent);
  transition: width 180ms ease-out;
}
.priority-tracker__week {
  height: 76px; display: grid; grid-template-columns: repeat(7, 1fr);
  align-items: end; gap: var(--sp-2); margin-top: var(--sp-4);
}
.priority-day { height: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.priority-day__track {
  flex: 1; width: 100%; max-width: 24px; display: flex; align-items: flex-end;
  border-radius: 5px; overflow: hidden; background: var(--surface-2);
}
.priority-day__bar { display: block; width: 100%; background: var(--text-2); border-radius: 5px; }
.priority-day--today .priority-day__bar { background: var(--accent); }
.priority-day__label { font-size: 12px; line-height: 1; color: var(--text-2); }
.priority-day--today .priority-day__label { color: var(--text); font-weight: 700; }
.day-brief { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }

/* ============ Плитка-метрика (Body: Sleep / HRV / Strain / RHR) ============ */
.tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.tile {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: var(--sp-4) var(--sp-3);
}
.tile:nth-child(odd) { border-right: 1px solid var(--border); }
.tile:nth-last-child(-n + 2) { border-bottom: 0; }
.tile__label { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: none; color: var(--text-2); }
.tile__value { font-size: var(--fs-num); font-weight: 700; margin-top: var(--sp-2); }
.tile__unit { font-size: var(--fs-sub); color: var(--text-2); margin-left: 4px; font-weight: 500; }

/* ============ Кольцо Recovery (большое, Body) ============ */
.recovery-ring {
  --pct: 85;               /* заполнение 0..100, задается инлайн */
  --ring-color: var(--accent);
  width: 190px; height: 190px;
  border-radius: var(--r-pill);
  margin: var(--sp-4) auto;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--bg) 84%, transparent 85% 100%),
    conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--neutral-track) 0);
}
.recovery-ring__value { font-size: var(--fs-num-lg); font-weight: 700; }
.recovery-ring__cap { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: none; color: var(--text-2); }

/* ============ Строка пайплайна с процентом (Work) ============ */
.pipeline-row { margin-bottom: var(--sp-4); }
.pipeline-row:last-child { margin-bottom: 0; }
.pipeline-row__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-2);
}
.pipeline-row__name { font-size: var(--fs-body); font-weight: 600; }
.pipeline-row__pct { font-size: var(--fs-sub); color: var(--text-2); }

/* ============ Прогресс-бар (тонкая шкала: FUEL, пайплайн, макросы) ============ */
.progress {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neutral-track);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--tap);
}
.progress--white .progress__fill { background: var(--text); }

/* Блок FUEL (Home): крупные цифры + процент + белая шкала */
.fuel__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-3);
}
.fuel__value { font-size: 26px; font-weight: 700; }
.fuel__unit { font-size: var(--fs-sub); color: var(--text-2); font-weight: 500; }
.card--tight { padding: var(--sp-3) var(--sp-4); }
.fuel__value .goal { color: var(--text-2); font-weight: 600; }
.fuel__pct { color: var(--text-2); font-size: var(--fs-body); }

/* ============ Строка приема пищи (Fuel) ============ */
.meal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.meal-row:last-child { border-bottom: 0; }
.meal-row__name { font-size: var(--fs-body); }
.meal-row__kcal { font-size: var(--fs-body); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ============ Барабанный пикер (Gym: Weight / Reps) ============ */
/* Две колонки (вес и повторы) на всю ширину карточки. Раньше блок был шире
   карточки, и правая колонка с кнопкой «+» уезжала за край экрана - повторы
   можно было только уменьшать. Grid не даст колонкам вылезти. */
.picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  align-items: start;
}
.stepper { min-width: 0; }
.picker__col {
  position: relative;
  height: 132px; width: 96px;
  overflow: hidden;
  text-align: center;
  -webkit-mask-image: linear-gradient(transparent, #000 34%, #000 66%, transparent);
          mask-image: linear-gradient(transparent, #000 34%, #000 66%, transparent);
}
.picker__item { height: 44px; line-height: 44px; font-size: var(--fs-title); color: var(--text-2); }
.picker__item--active { color: var(--text); font-weight: 700; }
.picker__caption { text-align: center; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-3); }

/* ============ График прогресса (Exercise: 1RM по сессиям) ============ */
.progress-graph { width: 100%; height: auto; aspect-ratio: 320 / 132; display: block; }
.progress-graph path.line { fill: none; stroke: var(--accent); stroke-width: 2; }
.progress-graph path.area { fill: var(--accent-wash); stroke: none; }
.progress-graph circle.dot { fill: var(--accent); }
/* шкала значений слева и тонкая сетка - чтобы по графику было видно «где я, где был» */
.progress-graph text.axis { fill: var(--text-3); font-size: 10px; }
.progress-graph line.grid { stroke: var(--border); stroke-width: 1; }
/* точки по дням и значения над ними - как в WHOOP */
.progress-graph circle.dot--past { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.5; }
.progress-graph text.pt { fill: var(--text-2); font-size: 10px; font-weight: 600; }
.progress-graph text.pt--last { fill: var(--accent); font-size: 11px; font-weight: 700; }
/* столбики недельного тренда; пропуск дня - тусклая подпись без столбика */
.progress-graph rect.bar { fill: var(--neutral-track); }
.progress-graph rect.bar--last { fill: var(--accent); }
.progress-graph text.axis--dim { opacity: 0.4; }

/* Листание дней на «Состоянии» */
.daynav { flex: none; margin-bottom: var(--sp-2); }
.daynav .cal__arrow:disabled { opacity: 0.3; }

/* Блок «Эта ночь»: фазы сна полосами */
.sleep-line { font-size: var(--fs-body); font-weight: 600; margin-bottom: var(--sp-3); }
.sleep-line--dim { font-weight: 400; font-size: var(--fs-sub); color: var(--text-2);
  margin: var(--sp-3) 0 0; }
.stage { display: grid; grid-template-columns: 74px 1fr auto; gap: var(--sp-3);
  align-items: center; margin-bottom: var(--sp-2); }
.stage__name { font-size: var(--fs-sub); color: var(--text-2); }
.stage__bar { height: 5px; }
.stage__val { font-size: var(--fs-sub); color: var(--text-2); white-space: nowrap; }
.range-toggle { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* ============ Поле "Ask Aegis" ============ */
.field {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-2);
  margin-top: var(--sp-5);
}
.field svg { width: 18px; height: 18px; flex: none; color: var(--text); }
.field input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-size: var(--fs-body); font-family: var(--font);
}
.field input::placeholder { color: var(--text-2); }

/* ============ CTA (белая кнопка действия) ============ */
.cta {
  display: block; width: 100%;
  background: var(--cta-bg); color: var(--cta-fg);
  border: 0; border-radius: var(--r-pill);
  padding: var(--sp-4);
  font-size: var(--fs-title); font-weight: 700; font-family: var(--font);
  cursor: pointer;
  transition: transform var(--tap), opacity var(--tap);
}
.cta:active { transform: scale(0.98); opacity: 0.92; }

/* ============ Нижний таб-бар: Сегодня / План / Тело / Календарь / Эгида ============ */
/* Не sticky: это обычный flex-элемент внизу .app (высота фиксирована), поэтому всегда виден.
   Safe-area (home indicator) резервируем на подписи-капшене - последнем элементе. */
.tabbar {
  flex: none;
  min-height: var(--tabbar-h);
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--bg);
  border-top: 1px solid var(--border);
  /* приподнято над полоской iPhone: подписи-капшена больше нет, резерв под
     home indicator держит сам таб-бар (правка Ивана 31.07) */
  padding-bottom: var(--sab);
}
.tab {
  /* 44px - нижняя граница удобного нажатия по гайдлайнам Apple. */
  background: none; border: 0; padding: 6px 2px 4px;
  position: relative;
  min-width: 60px; min-height: 52px;
  color: var(--text-3); cursor: pointer; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.tab svg { width: 22px; height: 22px; flex: none; }
.tab__label {
  font: 500 12px/1 var(--font);
  letter-spacing: -0.1px;
  white-space: nowrap;
}
/* Невидимый «язычок» нажатия: сама полоса низкая, но попасть по ней легко. */
.tab::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -6px; bottom: -6px;
}
.tab--active { color: var(--text); }
.tab--active .tab__label { font-weight: 700; }

/* Подпись под таб-баром ("TODAY"): в ней же резерв под home indicator (safe-area-inset-bottom) */
.tabbar-caption {
  flex: none;
  text-align: center; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-2);
  padding: var(--sp-2) 0 calc(var(--sp-3) + var(--sab));
}

/* ============ Body: заголовок-контекст, назад, сабтабы ============ */
.topbar__ctx { color: var(--text-2); font-size: var(--fs-body); }
.detail-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-5); }
.backbtn {
  background: none; border: 0; padding: var(--sp-1);
  min-width: 44px; min-height: 44px; margin-left: calc(var(--sp-2) * -1);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
}
.backbtn svg { width: 24px; height: 24px; }
.detail-head__title { font-size: var(--fs-h1); font-weight: 700; }

/* Сегмент-переключатель (Recovery/Sleep/Strain, Push/Pull/Legs) */
/* Равные колонки: три вкладки («Состояние - Тренировка - Питание») больше не
   выпирают вправо и не обрезаются - каждая занимает свою треть (правка 01.08) */
.subtabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-4);
}
/* Блоков тренировки может быть много (разминка + круги + заминка, правка
   06.08): не сжимаем подписи до многоточия, а даем листать вбок. */
.subtabs--scroll {
  display: flex; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subtabs--scroll::-webkit-scrollbar { display: none; }
.subtabs--scroll .subtab { flex: 0 0 auto; padding-inline: var(--sp-4); }
.subtab {
  background: none; border: 0; cursor: pointer;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--text-2); font-size: var(--fs-body); font-weight: 600; font-family: var(--font);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  transition: background var(--tap), color var(--tap), transform var(--tap);
}
.subtab--active { background: var(--cta-bg); color: var(--cta-fg); }
.subtab:active { transform: scale(0.97); }

/* Компактная внутренняя навигация: один выбор вместо рядов крупных плашек. */
.compact-toolbar {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  min-height: 44px; margin: 0 0 var(--sp-3);
}
.compact-select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; max-width: 180px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background-color: var(--surface-2); color: var(--text);
  font: 600 var(--fs-body)/1 var(--font);
  padding: 0 34px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.compact-more {
  width: 44px; height: 40px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--text);
  font: 700 17px/1 var(--font); letter-spacing: 1px;
}
.compact-menu .opt-list { margin-top: var(--sp-2); }
.work-head { align-items: center; margin-bottom: var(--sp-3); }
.work-head__controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.work-head__controls .compact-select { min-width: 0; max-width: 104px; padding-left: 11px; padding-right: 26px; background-position: right 7px center; }
.work-head__controls .goal__btn { flex: none; width: 44px; height: 44px; padding: 0; }
#body-view > .subtabs { margin-top: 0; margin-bottom: var(--sp-3); }

/* ============ Body/Recovery: гейдж-кольцо с зоной + Today's call ============ */
/* flex:none обязателен: внутри колонки-флекса кольцо сжималось по высоте и
   превращалось в овал (190x88 вместо 190x190) - именно это выглядело как
   «растянутая картинка» на телефоне с панелями Safari. */
.recovery-ring {
  flex: none;
  width: clamp(170px, 28vh, 230px); height: clamp(170px, 28vh, 230px);
  /* Тонкое кольцо со свечением - как на концепт-арте, а не жирная дуга */
  filter: drop-shadow(0 0 16px rgba(91, 191, 80, 0.28));
  cursor: pointer;
}
/* Крупная цифра и мелкая подпись - пропорции концепта photo507 */
.recovery-ring__value { font-size: clamp(52px, 9vh, 72px); line-height: 1; }
.recovery-ring__cap { margin-top: var(--sp-2); }
.recovery-ring[data-zone="green"] { --ring-color: var(--zone-green); }
.recovery-ring[data-zone="yellow"] { --ring-color: var(--zone-yellow); }
.recovery-ring[data-zone="red"] { --ring-color: var(--zone-red); }
.recovery-ring[data-zone="none"] { --ring-color: var(--neutral-track); }
/* нижний вырез гейджа (90°) - как на референсе; кольцо тоньше (89% выреза) */
.recovery-ring {
  background:
    radial-gradient(closest-side, var(--bg) 89%, transparent 90% 100%),
    conic-gradient(from 225deg,
      var(--ring-color) 0 calc(var(--pct) * 2.7deg),
      var(--neutral-track) calc(var(--pct) * 2.7deg) 270deg,
      transparent 270deg 360deg);
}
.recovery-ring__inner { display: grid; place-items: center; text-align: center; }
.callout { margin-top: var(--sp-4); }
.callout__cap { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2); }
.callout__text { font-size: var(--fs-title); line-height: var(--lh-body); }
.stub-note { font-size: var(--fs-sub); color: var(--text-3); margin-top: var(--sp-4); }
/* тоньше и воздушнее, как на концепте */
.tile__bar { margin-top: var(--sp-3); height: 4px; }

/* ============ Body: выбор группы мышц (карточки-силуэты) ============ */
.group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.group-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-2) var(--sp-2) var(--sp-2);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: border-color var(--tap);
}
.group-card:active { border-color: var(--text-2); }
.group-card__name { font-size: var(--fs-body); font-weight: 600; }
.group-card__count { font-size: var(--fs-sub); color: var(--text-2); }
.group-grid { gap: var(--sp-2); }
.group-card[data-empty="1"] { opacity: 0.45; }
/* Силуэт торса: серый контур, целевая группа подсвечена белым (data-group) */
.silhouette { width: 84px; height: 120px; display: block; }
.silhouette .body { fill: none; stroke: var(--text-3); stroke-width: 3; }
.silhouette .hi { fill: var(--text); opacity: 0; }
.silhouette .hi.on { opacity: 1; }

/* ============ Body: список упражнений группы ============ */
.ex-row {
  display: grid; grid-template-columns: 1fr 22px; align-items: center;
  gap: var(--sp-3); cursor: pointer;
}
.ex-row__name { font-size: var(--fs-title); font-weight: 600; }
.ex-row__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-1); }
.ex-row__trail { color: var(--text-2); display: grid; place-items: center; }
.ex-row__trail svg { width: 20px; height: 20px; }

/* ============ Exercise-detail: 1RM-герой + next set ============ */
.hero-1rm__cap { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3); }
.hero-1rm__value { font-size: var(--fs-num-lg); font-weight: 700; margin-top: var(--sp-2); }
.hero-1rm__value .u { font-size: var(--fs-title); color: var(--text-2); margin-left: 4px; }
.hero-1rm__delta { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-2); }
.hero-1rm__delta.up { color: var(--accent); }
.graph-caption { display: flex; justify-content: flex-end; font-size: var(--fs-sub);
  color: var(--accent); margin-bottom: var(--sp-1); }
.nextset { display: flex; align-items: baseline; gap: var(--sp-4); }
.nextset__big { font-size: var(--fs-num); font-weight: 700; }
.nextset__big .u { font-size: var(--fs-body); color: var(--text-2); margin-left: 2px; }
.nextset__x { color: var(--text-2); font-size: var(--fs-title); }
.nextset__set { margin-left: auto; font-size: var(--fs-sub); color: var(--text-2); }
.nextset__set svg { width: 20px; height: 20px; display: block; }
.card.nextset { cursor: pointer; }

/* ============ Log-set: выбор снаряда + пикеры ============ */
.equip {
  display: grid; grid-template-columns: 92px 1fr; align-items: center;
  gap: var(--sp-3); cursor: pointer;
}
.equip__pick { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.equip__icon { width: 44px; height: 44px; color: var(--text-2); }
.equip--active .equip__icon { color: var(--text); }
.equip__name { font-size: var(--fs-body); font-weight: 600; color: var(--text-2); }
.equip--active .equip__name { color: var(--text); }
.equip--active { border-color: var(--text-2); }
.equip__dash { color: var(--text-3); text-align: center; font-size: var(--fs-title); }

/* Степпер веса/повторов: −  значение  + */
.stepper { text-align: center; }
.stepper__ctl { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.stepper__btn {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 24px; line-height: 1; font-family: var(--font);
  cursor: pointer; display: grid; place-items: center;
  transition: transform var(--tap), background var(--tap);
}
.stepper__btn:active { transform: scale(0.92); background: var(--border); }
.stepper__val { min-width: 56px; font-size: var(--fs-title); font-weight: 700; }
.stepper__val .u { font-size: var(--fs-sub); color: var(--text-2); margin-left: 2px; font-weight: 500; }
.setsum { text-align: center; padding: var(--sp-4) 0 0; }
.setsum__line { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-2); }

/* CTA, закрепленная внизу экрана-флоу (над таб-баром) */
.screen-cta { margin-top: var(--sp-5); }

/* Утилиты */
.muted { color: var(--text-2); }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ============================================================
   Календарь: день / неделя / месяц (зеркало Google)
   ============================================================ */

.cal__nav {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--sp-2) 0 var(--sp-4);
}
.cal__period {
  background: none; border: 0; cursor: pointer; font-family: var(--font);
  color: var(--text); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em;
  min-height: 44px; padding: 0 var(--sp-2); text-align: center; flex: 1;
}
.cal__arrow {
  background: none; border: 0; color: var(--text); font-family: var(--font);
  font-size: 26px; line-height: 1; cursor: pointer;
  min-width: 48px; min-height: 44px;
  transition: opacity var(--tap), transform var(--tap);
}
.cal__arrow:active { transform: scale(0.88); opacity: 0.6; }

/* Список событий: полоска слева, название, под ним время и источник */
.cal__list { display: flex; flex-direction: column; }
.cal__dayhead {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-body); color: var(--text-2);
}
.cal__dayhead:first-child { margin-top: 0; }
.cal__dayhead.is-today { color: var(--text); font-weight: 700; }
.cal__daycount { color: var(--text-3); }

.ev {
  display: flex; align-items: stretch; gap: var(--sp-3);
  min-height: 56px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.ev__bar {
  width: 3px; flex: none; border-radius: var(--r-pill);
  background: var(--text-3);
}
.ev--training .ev__bar { background: var(--accent); }
.ev__main { min-width: 0; flex: 1; }
.ev__title {
  font-size: var(--fs-title); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev__meta { font-size: var(--fs-body); color: var(--text-2); margin-top: 3px; }
.ev.is-past { opacity: 0.55; }
.ev--open .ev__title { white-space: normal; overflow: visible; }
.cal__free {
  font-size: var(--fs-sub); color: var(--text-3);
  padding: var(--sp-2) 0 var(--sp-3) var(--sp-3);
}

.cal__empty { padding: var(--sp-6) 0; text-align: center; color: var(--text-2); font-size: var(--fs-body); }
.cal__empty-hint { font-size: var(--fs-sub); color: var(--text-3); margin-top: var(--sp-2); }

/* Месяц: сетка чисел с точками-событиями */
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__grid--head { margin-bottom: var(--sp-2); }
.cal__wd { text-align: center; font-size: var(--fs-sub); color: var(--text-3); }
.cal__cell {
  aspect-ratio: 1 / 0.82;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-body);
}
.cal__cell--empty { visibility: hidden; }
.cal__cell--has { color: var(--text); cursor: pointer; background: var(--surface); }
.cal__cell--today { background: var(--cta-bg); color: var(--cta-fg); font-weight: 700; }
.cal__cell--today .cal__dot { background: var(--cta-fg); }
.cal__num { line-height: 1; }
.cal__dots { display: flex; gap: 2px; height: 4px; }
.cal__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.cal__dot--training { background: var(--accent); }

/* ============================================================
   FUEL / питание (референс fuel-nutrition_today)
   ============================================================ */

.fuel__totals { margin-bottom: var(--sp-5); }
.fuel__count { font-size: var(--fs-h1); color: var(--text); font-weight: 700; letter-spacing: -0.01em; }
.progress--green .progress__fill { background: var(--accent); }

/* Три макроса под шкалой калорий */
.fuel__macros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.macro__val { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: var(--sp-2); }
.macro__unit { font-size: var(--fs-sub); color: var(--text-2); font-weight: 500; margin-left: 2px; }
.macro__label { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-2); }

/* Список приемов пищи */
.fuel__meals { margin-top: var(--sp-2); }
.meal {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--tap);
}
.meal:active { opacity: 0.6; }
.meal__main { flex: 1; min-width: 0; }
.meal__name {
  font-size: var(--fs-body); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meal__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: 2px; }
.meal__kcal { font-size: var(--fs-title); color: var(--text-2); flex: none; }
.meal:last-child { border-bottom: 0; }
.fuel__empty { padding: var(--sp-6) 0; text-align: center; color: var(--text-2); font-size: var(--fs-body); }
.fuel__empty-hint { font-size: var(--fs-sub); color: var(--text-3); margin-top: var(--sp-2); }
.fuel__status { padding: var(--sp-3) 0; color: var(--text-2); font-size: var(--fs-sub); }
.fuel__flash { margin-top: var(--sp-4); }

/* Столбики калорий по дням (Week/Month) */
/* Месяц - 30 столбиков: на узком экране не влезают, поэтому прокрутка вбок,
   а не сжатие до невидимости (сегодняшний столбик уезжал за край). */
.bars {
  display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: var(--sp-4);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.bars::-webkit-scrollbar { display: none; }
.bars__col {
  flex: 1 0 14px; display: flex; flex-direction: column; align-items: center; height: 100%;
}
.bars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bars__fill {
  width: 100%; min-height: 2px;
  background: var(--accent); border-radius: 3px 3px 0 0;
}
.bars__fill--over { background: var(--zone-yellow); }
.bars__fill--none { background: var(--neutral-track); min-height: 2px; }
.bars__day { font-size: 10px; color: var(--text-3); margin-top: var(--sp-2); }

/* Две кнопки ввода внизу экрана */
.fuel__actions {
  flex: none;
  display: flex; gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
}
.btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-field); border: 0; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-body); font-weight: 600;
  transition: transform var(--tap), opacity var(--tap);
}
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn--dark { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn--light { background: var(--cta-bg); color: var(--cta-fg); }
.btn__icon { display: inline-flex; width: 20px; height: 20px; flex: none; }
.btn__icon svg { width: 100%; height: 100%; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ Подходы за сегодня на карточке упражнения ============ */
.setrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); margin-bottom: var(--sp-2);
}
.setrow--empty { justify-content: center; color: var(--text-3); font-size: var(--fs-sub); }
.setrow__num {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--surface-2);
  font-size: 11px; color: var(--text-2);
}
.setrow__val { flex: 1; font-size: var(--fs-body); font-weight: 600; }
/* строка «по дням» в истории показателя: дата слева, значение справа */
.setrow__day { flex: 1; font-size: var(--fs-sub); color: var(--text-2); white-space: nowrap; }
.setrow__val--right { flex: none; text-align: right; }
.setrow__val .u { font-size: var(--fs-sub); color: var(--text-2); margin-left: 1px; font-weight: 500; }
.setrow__edit {
  background: none; border: 0; cursor: pointer; font-family: var(--font);
  color: var(--text-2); font-size: var(--fs-body);
  min-height: 44px; padding: 0 var(--sp-3);
}
.setrow__del {
  background: none; border: 0; cursor: pointer; font-family: var(--font);
  color: var(--text-3); font-size: 22px; line-height: 1;
  min-width: 44px; min-height: 44px;
}
.setrow__edit:active, .setrow__del:active { color: var(--text); }

/* ============ Иллюстрации зала (рисунки, не схемы) ============ */
/* У рисунков непрозрачный черный фон и узкая вертикальная рамка: если вписывать
   их целиком (contain), внутри светлой карточки торчит черный прямоугольник.
   Поэтому карточку красим в тот же черный - тогда рисунок можно вписывать целиком
   (contain), и шва не видно: фон рисунка сливается с подложкой карточки.
   Обрезать (cover) нельзя - у фигур отрезает голову и ступни. */
/* Рисунки теперь белый контур на прозрачном - подложка не нужна, карточка видна. */
/* Высота подобрана так, чтобы ВСЕ ШЕСТЬ карточек влезали в экран телефона
   с панелями Safari (рабочая высота около 745): три ряда без прокрутки. */
.group-art {
  width: 100%; height: clamp(74px, 11vh, 104px); display: block;
  object-fit: contain;
}
/* Карточка максимума: рисунок упражнения справа, цифры поверх слева - как на эталоне */
.hero-1rm { position: relative; overflow: hidden; }
.exercise-art {
  position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%);
  height: 88%; width: auto; max-width: 46%; object-fit: contain;
  opacity: 0.85; pointer-events: none;
}
.hero-1rm__cap, .hero-1rm__value, .hero-1rm__delta { position: relative; z-index: 1; }

/* Раздел, которого еще нет: честная заглушка вместо молчаливого показа главной */
.soon { flex: 1; display: grid; place-content: center; text-align: center; gap: var(--sp-3); padding: 0 var(--sp-4); }
.soon__title { font-size: var(--fs-h1); font-weight: 700; }
.soon__text { font-size: var(--fs-body); color: var(--text-2); max-width: 30ch; margin: 0 auto; }

/* ============ Барабаны выбора веса и повторов (как таймер на iPhone) ============ */
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip {
  min-height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 600; cursor: pointer;
}
.chip--active { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }

.wheels {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.wheel-col { min-width: 0; text-align: center; }
/* Центральная риска - подсвечивает выбранное значение, как в часах Apple */
.wheels__band {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 46px; margin-top: 12px;
  border-radius: var(--r-sm); background: var(--surface-2);
  pointer-events: none; z-index: 0;
}
.wheel {
  position: relative; z-index: 1;
  height: 184px;
  overflow-y: auto; overflow-x: hidden;
  /* Барабан крутится ТОЛЬКО вверх-вниз: touch-action убирает боковой люфт,
     из-за которого барабан «гулял» влево-вправо под пальцем. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel__pad { height: 69px; }            /* половина высоты минус пол-элемента */
.wheel__item {
  height: 46px; line-height: 46px;
  scroll-snap-align: center;
  /* Отсечка на каждом числе: барабан не пролетает мимо, а щелкает по значениям,
     как колесико Apple Watch. Без этого он «гладкий» и на нужном не остановишься. */
  scroll-snap-stop: always;
  font-size: 26px; font-weight: 600; color: var(--text-3);
  transition: color var(--tap), transform var(--tap);
  cursor: pointer;
}
.wheel__item--active { color: var(--text); font-weight: 700; transform: scale(1.06); }
.wheel__item .u { font-size: var(--fs-sub); color: var(--text-2); margin-left: 2px; }

/* Строка снаряда с барабанами (раскладка концепт-арта) */
.equip {
  display: grid; grid-template-columns: 96px 1fr; align-items: center;
  gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-3);
  margin-bottom: var(--sp-2); cursor: pointer;
}
.equip--active { border-color: var(--text-2); }
.equip .wheels { margin-bottom: 0; }
.equip .wheel { height: 138px; }
.equip .wheel__pad { height: 46px; }
.equip .wheel__item { font-size: 21px; }
.wheels--off { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); text-align: center; }

/* Неделя сеткой: семь колонок, события чипами внутри дня */
.wk { display: flex; flex-direction: column; min-height: 0; }
.wk__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--sp-2); }
.wk__day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--sp-2) 0; border-radius: var(--r-sm);
  color: var(--text-2); cursor: pointer; min-height: 44px;
}
.wk__day--today { background: var(--cta-bg); color: var(--cta-fg); }
.wk__wd { font-size: 11px; text-transform: uppercase; }
.wk__num { font-size: var(--fs-body); font-weight: 700; }
.wk__cols {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
}
.wk__cols::-webkit-scrollbar { display: none; }
.wk__col {
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px; border-left: 1px solid var(--border); min-height: 120px;
  /* Без min-width:0 длинное название события растягивает свою колонку на весь
     экран и остальные дни схлопываются в полоски. */
  min-width: 0; overflow: hidden;
}
.wk__col:last-child { border-right: 1px solid var(--border); }
.wk__col--today { background: rgba(255,255,255,0.04); }
.wk__none { color: var(--text-3); text-align: center; font-size: 12px; padding-top: var(--sp-2); }
.wk__ev {
  min-width: 0; max-width: 100%;
  background: var(--surface-2); border-radius: 4px; padding: 3px 2px;
  border-left: 2px solid var(--text-3); cursor: pointer; overflow: hidden;
}
.wk__ev--training { border-left-color: var(--accent); }
.wk__ev.is-past { opacity: 0.5; }
.wk__ev-time { display: block; font-size: 9px; color: var(--text-2); }
.wk__ev-title {
  display: block; font-size: 10px; line-height: 1.15; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk__more { font-size: 10px; color: var(--text-3); text-align: center; }

/* Пояснение под блоком: откуда берутся числа (владелец спрашивал про механику) */
.hint {
  font-size: var(--fs-sub); color: var(--text-3);
  line-height: 1.4; margin: var(--sp-2) 0 var(--sp-4);
}

/* --- экран «Дела»: цели --- */
.goal { margin-bottom: 12px; }
.goal__head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.goal__rank { font-size: 13px; opacity: .5; min-width: 22px; }
.goal__title { font-weight: 600; }
.goal__sub { font-size: 12px; opacity: .6; margin-top: 2px; }
.goal__bar { margin-top: 10px; }
.goal__bar-row { display: flex; justify-content: space-between; font-size: 12px; opacity: .7; margin-bottom: 4px; }
.goal__detail { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.goal__ms { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.goal__ms--done .goal__ms-title { opacity: .5; text-decoration: line-through; }
.goal__ms-sub { font-size: 11px; opacity: .5; }
.goal__add-ms { display: flex; gap: 8px; margin-top: 8px; }
/* текстовые поля обязаны ужиматься: у input есть внутренняя минимальная ширина,
   без min-width:0 строка «веха + дата + кнопка» вылезает за карточку на телефоне */
.goal__add-ms .goal__input { min-width: 0; }
.goal__input { flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; color: inherit; font-size: 14px; }
.goal__btn { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: inherit; padding: 10px 14px; font-size: 14px; cursor: pointer; }
.goal__btn--wide { width: 100%; margin-top: 4px; }
.goal__form .goal__input { width: 100%; margin-bottom: 8px; }

/* --- путь цели --- */
.goal__path-title { font-weight: 600; font-size: 18px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.goal__back { min-width: 44px; font-size: 20px; line-height: 1; }
.goal__path { display: flex; flex-direction: column; }
.goal__ms--next .goal__ms-title { color: var(--accent); }
.goal__ms-more { background: none; border: none; color: inherit; opacity: .5;
  font-size: 18px; padding: 4px 8px; cursor: pointer; }
.goal__ms-edit { display: flex; gap: 8px; margin: 4px 0 8px 30px; }
.goal__ms-edit .goal__input { flex: 1; min-width: 0; }
.goal__ms-criterion { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.goal__ms-progress { font-size: 12px; color: var(--accent); margin-top: 2px; }
.goal__btn--danger { border-color: rgba(229,72,77,.4); color: var(--danger); }
.goal__input--date { flex: 0 1 118px; min-width: 0; }

/* --- действия внутри вехи на пути цели --- */
.goal__actions { margin: 4px 0 8px 30px; }
.action-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.action-row--done .action-row__title { opacity: .5; text-decoration: line-through; }
.action-row__title {
  min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-row__body { flex: 1; min-width: 0; }
.action-row__done { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.action-check { display: block; margin: 2px 0 2px 28px; padding: 2px 0; border: 0;
  background: none; color: var(--text-2); font: inherit; font-size: 12px; text-align: left; }
.action-check--done { opacity: .55; text-decoration: line-through; }
.action-row__meta { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.goal__add-action { margin-left: 30px; flex-wrap: wrap; }
/* первая строка формы - название на всю ширину, ниже тип + минуты + кнопка в ряд */
.goal__add-action > .goal__input:first-child { flex: 1 1 100%; }
.goal__add-action select.goal__input { flex: 1 1 120px; min-width: 0; }
.goal__add-action input[type="number"] { flex: 0 1 64px; min-width: 0; }
.goal__input--select { flex: 1 1 120px; min-width: 0; }
.goal__input--est { flex: 0 1 64px; min-width: 0; }

/* --- утренняя сводка на главном (между строкой тела и тройкой приоритетов) ---
   ok - заголовок мелкими прописными + текст (длинный сворачиваем в 3-4 строки,
   разворот по тапу); pending - только приглушенный текст, без анимаций;
   failed/none - карточку прячет app.js целиком (hidden), сюда не доходит. */
.summary-card__head {
  font-size: var(--fs-label); letter-spacing: 0;
  color: var(--text); font-weight: 700; margin-bottom: var(--sp-2);
}
.summary-card__text {
  font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap;
}
.summary-card__text--muted { color: var(--text-2); }
/* длинный текст тапабелен целиком - и свернутый, и развернутый (второй тап сворачивает) */
.summary-card__text--tappable { cursor: pointer; }
.summary-card__text--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- строка тела на главном --- */
#body-line { cursor: pointer; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.summary-card:not([hidden]) { padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--border); }
.summary-card__head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.summary-card__head::after { content: "+"; color: var(--text-2); font-size: 20px; font-weight: 400; }
.summary-card__head[aria-expanded="true"]::after { content: "−"; }
.summary-card__head:not([role="button"])::after { content: ""; }
.body-line__advice { font-size: var(--fs-body); font-weight: 600; }
.body-line__phrase { font-size: var(--fs-sub); color: var(--text-2); margin-top: 4px; }

/* --- привычки на главном --- */
.habit-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.habit-chip {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: 13px; color: inherit; cursor: pointer;
}
.habit-chip--done { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.habit-chip--add { color: var(--text-2); border-style: dashed; }
.habit-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); align-items: center; }
.habit-form .goal__input { min-width: 0; flex: 1 1 140px; }
.habit-form__toggle {
  display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.habit-form__opt {
  background: var(--surface); border: none; color: var(--text-2);
  padding: 10px 12px; font-size: 13px; cursor: pointer;
}
.habit-form__opt--active { background: var(--cta-bg); color: var(--cta-fg); }

/* ============ Календарь: неделя по часам, как в Google ============ */
.tg { display: flex; flex-direction: column; }
.tg__head, .tg__allday {
  display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 2px;
}
.tg__gutter { width: 30px; }
.tg__day {
  text-align: center; padding: 4px 0; border-radius: var(--r-sm); cursor: pointer;
}
.tg__wd { display: block; font-size: 10px; text-transform: uppercase;
  color: var(--text-3); letter-spacing: 0.06em; }
.tg__num { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.tg__day--today .tg__num {
  background: var(--cta-bg); color: var(--cta-fg); border-radius: 50%;
  width: 24px; height: 24px; line-height: 24px; margin: 2px auto 0;
}
.tg__allday { margin: 2px 0; }
.tg__allday-ev {
  font-size: 9px; line-height: 1.2; padding: 2px 3px; margin-bottom: 2px;
  border-radius: 4px; background: var(--surface-2); color: var(--text-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.tg__body {
  position: relative;
  display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 2px;
  margin-top: var(--sp-2);
}
.tg__axis { position: relative; }
.tg__hour {
  position: absolute; right: 4px; transform: translateY(-50%);
  font-size: 9px; color: var(--text-3);
}
.tg__col {
  position: relative; border-left: 1px solid var(--border);
  /* часовые линии: одна на 48px (час при 0.8px/мин) */
  background: repeating-linear-gradient(
    to bottom, var(--border) 0 1px, transparent 1px 48px);
}
.tg__col--today { background-color: var(--surface); }
.tg__ev {
  position: absolute; box-sizing: border-box;
  border-radius: 4px; padding: 2px 3px; overflow: hidden;
  background: var(--surface-2); border-left: 2px solid var(--text-2);
  cursor: pointer;
}
.tg__ev--training { background: var(--accent-wash); border-left-color: var(--accent); }
.tg__ev.is-past { opacity: 0.45; }
.tg__ev-title {
  font-size: 9px; line-height: 1.15; font-weight: 600; color: var(--text);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tg__ev-time { font-size: 8px; color: var(--text-2); margin-top: 1px; }

/* ============ Привычки списком (TickTick) и экран «Прогресс» ============ */
.habit-row {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2); cursor: pointer; text-align: left;
  color: var(--text); font-family: var(--font); font-size: var(--fs-body);
}
.habit-row__box {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  border: 1.5px solid var(--neutral-track); color: var(--cta-fg);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  transition: background var(--tap), border-color var(--tap);
}
.habit-row--done .habit-row__box { background: var(--accent); border-color: var(--accent); }
.habit-row__title { flex: 1; font-weight: 600; }
.habit-row--done .habit-row__title {
  text-decoration: line-through; text-decoration-color: var(--text-2);
  color: var(--text-2);
}
.habit-row__streak { flex: none; font-size: var(--fs-sub); color: var(--text-2); }
.habit-add {
  width: 100%; background: none; border: 1px dashed var(--neutral-track);
  border-radius: var(--r-sm); padding: var(--sp-3); margin-top: var(--sp-2);
  color: var(--text-2); font-family: var(--font); font-size: var(--fs-body);
  cursor: pointer;
}
/* белая кнопка «Прогресс» - видно, что кликабельная (правка Ивана) */
.habit-progress-btn {
  background: var(--cta-bg); color: var(--cta-fg); border: none;
  border-radius: var(--r-pill); padding: 6px 14px;
  font-family: var(--font); font-size: var(--fs-sub); font-weight: 600;
  cursor: pointer; text-transform: none; letter-spacing: normal;
}
/* сетка месяца одной привычки: 5 строк-недель, тап по дню - отметка */
.habit-month__row { display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-2); }
.habit-month__cell {
  aspect-ratio: 1; border-radius: var(--r-pill);
  border: 1.5px solid var(--neutral-track); background: none;
  color: var(--text-2); font-family: var(--font); font-size: 12px; cursor: pointer;
}
.habit-month__cell--done { background: var(--accent); border-color: var(--accent);
  color: var(--cta-fg); font-weight: 700; }

/* Привычки: плашки крупнее (правка Ивана 31.07 ночь) + режим правки */
.label__actions { display: flex; gap: var(--sp-3); align-items: center; }
.habit-row { padding: var(--sp-4) var(--sp-4); font-size: var(--fs-title); }
.habit-row__box { width: 30px; height: 30px; font-size: 17px; }
.habit-row__title { font-size: var(--fs-title); }
.habit-row--edit { cursor: default; }
.habit-row__minus {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-pill);
  border: none; background: var(--danger); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; font-family: var(--font);
}
.habit-row__handle {
  flex: none; color: var(--text-3); font-size: 22px; padding: 0 var(--sp-2);
  cursor: grab; user-select: none;
}
.habit-row--drag { opacity: 0.85; border-color: var(--accent); }

/* ============ Режим тренировки ============ */
.plan-card { cursor: pointer; }
.plan-card__cap { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3); }
.plan-card__title { font-size: var(--fs-title); font-weight: 700; margin-top: var(--sp-2); }
.plan-card__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-1); }
.plan-card__cta { margin-top: var(--sp-3); }
.wo-week-summary { margin: 0 2px var(--sp-3); }
.wo-week-summary__label { color: var(--text-2); font-size: var(--fs-sub);
  font-weight: 600; margin-bottom: var(--sp-2); }
.wo-week-summary .progress { margin-top: var(--sp-2); }
.plan-card--primary { padding: var(--sp-4); }
.plan-card--repeat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4);
}
.plan-card--repeat .plan-card__title { margin-top: 3px; }
.plan-card--repeat .goal__btn { flex: none; min-height: 40px; padding: 0 var(--sp-4); }
.workout-preview { margin-top: var(--sp-4); }
.workout-preview__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 0; background: none; color: var(--text); padding: var(--sp-2) 2px;
  font: 700 var(--fs-title)/1.2 var(--font); text-align: left;
}
.workout-preview__head span:last-child { color: var(--text-2); font-size: var(--fs-sub); font-weight: 500; }
.workout-preview .wo-plan-row { padding: var(--sp-3); }
.workout-preview .setrow { padding-block: var(--sp-3); }

.fuel-trend-link {
  display: block; margin: var(--sp-4) 0 0 auto; padding: var(--sp-2) 0;
  border: 0; background: none; color: var(--text-2);
  font: 600 var(--fs-sub)/1.2 var(--font); cursor: pointer;
}
.wo-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); }
.wo-row--done { opacity: 0.55; }
.wo-row__main { min-width: 0; }
.wo-row__title { font-size: var(--fs-title); font-weight: 600; }
.wo-row__val { background: none; border: none; padding: var(--sp-1) 0;
  color: var(--text-2); font-family: var(--font); font-size: var(--fs-body);
  cursor: pointer; text-align: left; }
.wo-row__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.wo-swap { background: none; border: none; color: var(--text-3);
  font-family: var(--font); font-size: var(--fs-sub); cursor: pointer; }
.wo-done {
  min-width: 76px; min-height: 44px; border-radius: var(--r-pill);
  border: 1.5px solid var(--neutral-track); background: none; color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 600; cursor: pointer;
}
.wo-done--on { background: var(--accent); border-color: var(--accent); color: var(--cta-fg); }
/* полоса таймера отдыха над кнопкой завершения */
.rest-bar {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-2); border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
}
.rest-bar__label { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3); }
.rest-bar__time { font-size: var(--fs-num); font-weight: 700; margin-left: auto; }
.rest-bar__skip { background: none; border: none; color: var(--text-2);
  font-family: var(--font); font-size: var(--fs-sub); cursor: pointer; }
/* ползунки оценок 0-10 */
.slider-row { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.slider { flex: 1; accent-color: var(--accent); height: 32px; }
.slider__val { font-size: var(--fs-num); font-weight: 700; min-width: 48px; text-align: right; }
/* выбор замены упражнения */
.pick-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: grid; place-items: end center; z-index: 50; }
.pick-sheet { width: 100%; max-width: var(--app-max); background: var(--bg);
  border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card);
  padding: var(--sp-4) var(--page-pad) calc(var(--sp-4) + var(--sab));
  max-height: 76vh; display: flex; flex-direction: column; }
.pick-list { overflow-y: auto; margin-bottom: var(--sp-3); }
.pick-row { display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  color: var(--text); font-family: var(--font); font-size: var(--fs-body); cursor: pointer; }

/* Обзор тренировок */
.wo-goal { display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--sp-2) 0 var(--sp-3); }
.wo-goal__val { font-size: var(--fs-num); font-weight: 700; }
.wo-goal__pct { font-size: var(--fs-title); font-weight: 700; color: var(--accent); }
.setrow__val .u.up { color: var(--accent); }

/* ============ Календарь: месяц как в Google (правка Ивана 01.08) ============
   Сетка на всю доступную высоту, от края до края экрана (гасим боковой отступ
   страницы отрицательными полями - у Google сетка упирается в обе стороны). */
.cal__body { display: flex; flex-direction: column; min-height: 0; }
/* Сетка от края до края БЕЗ отрицательных полей: они вылезали из скролл-
   контейнера и левый столбец обрезался (правка Ивана 03.08 «месяц обрезается
   с краев»). Вместо этого у экрана календаря нет боковых полей, а отступы
   возвращаются переключателю и стрелкам. */
#screen-calendar { padding-left: 0; padding-right: 0; }
#week-view > .subtabs, #week-view > .cal__nav { margin-left: var(--page-pad);
  margin-right: var(--page-pad); }
.mg { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* minmax(0,1fr): длинный чип события не распирает колонку - сетка месяца
   не обрезается по краям (правка Ивана 03.08) */
.mg__head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0 var(--sp-1) var(--sp-2); }
.mg__wd { text-align: center; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3); }
.mg__grid { flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.mg__cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 3px 3px 0; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: background var(--tap);
}
.mg__cell:nth-child(7n) { border-right: none; }
.mg__cell:active { background: var(--surface); }
.mg__cell--out { opacity: 0.35; }
.mg__num { font-size: 12px; color: var(--text-2); text-align: center; }
.mg__cell--today .mg__num {
  background: var(--cta-bg); color: var(--cta-fg); border-radius: var(--r-pill);
  width: 22px; height: 22px; line-height: 22px; margin: 0 auto; font-weight: 700;
}
.mg__ev {
  font-size: 8px; line-height: 1.25; padding: 1px 3px; border-radius: 3px;
  background: var(--surface-2); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg__ev--training { background: var(--accent-wash); }
.mg__ev.is-past { opacity: 0.5; }
.mg__more { font-size: 8px; color: var(--text-3); padding-left: 3px; }

/* День: часы 00:00-24:00 с прокруткой и линией «сейчас» */
.tg--day { flex: 1; min-height: 0; }
.tg__allday--day { grid-template-columns: 44px 1fr; padding: 0 var(--sp-2); }
.tg__allday-empty { font-size: var(--fs-sub); color: var(--text-3); padding: 2px 4px; }
.tg__dayscroll { flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tg__dayscroll::-webkit-scrollbar { display: none; }
.tg__body--day { grid-template-columns: 44px 1fr; margin-top: 0; padding: 0 var(--sp-2); }
.tg__col--day {
  background: repeating-linear-gradient(
    to bottom, var(--border) 0 1px, transparent 1px 60px);
}
.tg__ev--day { padding: 3px 6px; }
.tg__ev--day .tg__ev-title { font-size: 11px; -webkit-line-clamp: 2; }
.tg__ev--day .tg__ev-time { font-size: 10px; }
/* линия «сейчас» - в цвет акцента приложения (правка Ивана 03.08: была красной) */
.tg__now { position: absolute; left: 0; right: 0; height: 2px;
  background: var(--accent); border-radius: 2px; }
.tg__now::before { content: ""; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* «+» новое событие - плавающая кнопка, как в Google */
.cal__add {
  position: absolute; right: var(--page-pad);
  bottom: calc(var(--tabbar-h) + var(--sp-3) + var(--sab));
  /* компактнее: большая кнопка перекрывала таб-бар и мешала попасть в «Эгиду»
     (правка Ивана 02.08) */
  width: 38px; height: 38px; border-radius: 12px; border: none;
  background: var(--cta-bg); color: var(--cta-fg);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform var(--tap);
}
.cal__add:active { transform: scale(0.92); }

/* Яркие цвета событий как в Google (правка Ивана 03.08): фон красится инлайном,
   текст на цветном блоке - белый (или темный на светлых цветах). */
.gc-colored, .gc-colored .tg__ev-title, .gc-colored .tg__ev-time { color: #fff; }
.gc-colored--dark, .gc-colored--dark .tg__ev-title,
.gc-colored--dark .tg__ev-time { color: #14210f; }

/* ручка растягивания события в дне (шаг 15 минут) */
.tg__ev-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  cursor: ns-resize; }
.tg__ev-grip::after { content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 26px; height: 3px; margin-left: -13px; border-radius: 2px;
  background: rgba(255,255,255,0.55); }

/* Конструктор события - как в Google, основные поля (правка Ивана 03.08) */
.gc__head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-3); }
.gc__close { width: 36px; height: 36px; border-radius: var(--r-pill); border: none;
  background: var(--surface-2); color: var(--text); font-size: 20px; cursor: pointer; }
.gc__save { width: auto; padding: 10px 22px; }
.gc__title { width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: var(--font); font-size: 22px; font-weight: 600;
  padding: var(--sp-2) 0 var(--sp-3); margin-bottom: var(--sp-3); outline: none; }
.gc__title::placeholder { color: var(--text-3); }
.gc__row { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-body); }
/* дата на всю строку, времена «с - до» делят остаток: не вылезает за экран */
#gc-times { justify-content: flex-start; }
#gc-times #gc-date { flex: 1 1 100%; min-width: 0; }
#gc-times #gc-from, #gc-times #gc-to { flex: 1 1 0; min-width: 0; }
.gc__row--col { flex-direction: column; align-items: flex-start; border-bottom: none; }
.gc__field { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text); font-family: var(--font);
  font-size: var(--fs-body); padding: var(--sp-2) var(--sp-3); }
.gc__field:disabled { opacity: 0.4; }
.gc__toggle { position: relative; width: 50px; height: 30px; border-radius: var(--r-pill);
  border: none; background: var(--neutral-track); cursor: pointer;
  transition: background var(--tap); }
.gc__toggle::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: var(--r-pill); background: #fff;
  transition: transform var(--tap); }
.gc__toggle--on { background: var(--accent); }
.gc__toggle--on::after { transform: translateX(20px); }
.gc__colors { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gc__colors .swatch { width: 30px; height: 30px; }

/* ============ Плавность: тап-отклик и мягкие появления (правка Ивана 01.08) ============
   Анимируем только transform и opacity - их считает композитор, поэтому
   движение идет на полной частоте экрана (120 Гц на iPhone Pro). */
.card, .tile, .habit-row, .group-card, .setrow, .plan-card, .wo-done, .tab, .cta {
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1),
              background-color 160ms ease-out, opacity 160ms ease-out;
}
.card:active, .tile:active, .habit-row:active, .group-card:active,
.plan-card:active, .wo-done:active, .cta:active { transform: scale(0.985); }
.tab:active { transform: scale(0.9); }
.screen:not([hidden]) { animation: screen-in 190ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.screen__scroll { scroll-behavior: smooth; overscroll-behavior: contain; }
/* мгновенный отклик на тап: без ожидания двойного касания */
button, .card, .tile, .habit-row, .group-card, .setrow, [role="button"] {
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--sab) + var(--sp-4));
  transform: translateX(-50%); z-index: 100; max-width: min(340px, calc(100vw - 32px));
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill);
  background: var(--text); color: var(--bg); font-size: var(--fs-body); font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ============ Настройки (шестеренка в шапке) ============ */
.headline__actions { display: flex; align-items: center; gap: var(--sp-3); }
.icon-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--text-2); font-size: 20px; line-height: 1;
  transition: transform var(--tap), color var(--tap);
}
.icon-btn:active { transform: scale(0.9); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; display: block; }
.chat-input__att svg { width: 20px; height: 20px; display: block; margin: 0 auto; }
.settings-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: grid; place-items: end center; z-index: 60;
  box-sizing: border-box; padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-2)); }
:root[data-theme="light"] .settings-sheet { background: rgba(0,0,0,0.35); }
.settings-sheet__inner {
  width: 100%; max-width: var(--app-max); background: var(--bg);
  max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card);
  padding: var(--sp-4) var(--page-pad) calc(var(--sp-5) + var(--sab));
  animation: sheet-up 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Две кнопки подряд («Обновить приложение» и «Готово») слипались в одну
   плашку - разводим (правка Ивана 06.08). */
.settings-sheet__inner .cta + .cta { margin-top: var(--sp-3); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.swatches { display: flex; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-4); }
.swatch { width: 38px; height: 38px; border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform var(--tap), border-color var(--tap); }
.swatch:active { transform: scale(0.9); }
.swatch--on { border-color: var(--text); }

/* Счетчик спринта в строке тела (решение Ивана 03.08) */
.body-line__sprint { font-size: var(--fs-sub); color: var(--accent); font-weight: 600;
  margin-top: var(--sp-1); }

/* Roadmap цели в списке «Дела > Цели» (правка Ивана 03.08): лента этапов */
.rm { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.rm__row { display: flex; align-items: baseline; gap: var(--sp-2);
  padding: 3px 0; position: relative; }
.rm__dot { flex: none; width: 18px; height: 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--neutral-track); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; color: var(--cta-fg); align-self: center; }
.rm__row--done .rm__dot { background: var(--accent); border-color: var(--accent); }
.rm__row--next .rm__dot { border-color: var(--accent); }
.rm__title { flex: 1; font-size: var(--fs-sub); color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm__row--done .rm__title { color: var(--text-2); text-decoration: line-through; }
.rm__row--next .rm__title { font-weight: 600; }
.rm__due { flex: none; font-size: 11px; color: var(--text-3); }

/* Пайплайн целей на главном: проценты достижения (правка Ивана 02.08) */
.pipe { margin-bottom: var(--sp-3); cursor: pointer; }
.pipe__head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-2); }
.pipe__title { font-size: var(--fs-body); font-weight: 600; }
.pipe__pct { font-size: var(--fs-body); font-weight: 700; color: var(--accent); }

/* Таск-трекер (третья вкладка) */
.task-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: var(--sp-4) var(--sp-1);
  margin: 0; min-height: 60px; cursor: pointer;
}
.task-row__box {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--neutral-track); color: var(--cta-fg);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.task-row--done .task-row__box { background: var(--accent); border-color: var(--accent); }
.task-row--done .task-row__title { text-decoration: line-through; color: var(--text-2); }
.task-row__title { flex: 1; font-size: var(--fs-body); }
.task-row__del { background: none; border: none; color: var(--text-3);
  font-size: 18px; cursor: pointer; padding: 0 var(--sp-2); }
.task-row__meta { flex: none; font-size: 11px; color: var(--text-3); }
.task-progress { margin-bottom: var(--sp-3); }
.task-list { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.task-list .task-row:last-child { border-bottom: 0; }
.task-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.task-toolbar__filters { display: flex; gap: var(--sp-1); }
.task-filter, .list-edit {
  min-height: 44px; border: 0; border-radius: var(--r-pill); padding: 0 var(--sp-4);
  background: transparent; color: var(--text-2); font: 600 var(--fs-body)/1 var(--font);
}
.task-filter--active { background: var(--surface-2); color: var(--text); }
.row-action { width: 44px; height: 44px; border: 0; background: none; color: var(--danger);
  font: 600 var(--fs-body)/1 var(--font); }
.task-summary { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.task-summary__value { font-size: var(--fs-h1); font-weight: 700; }
.task-summary__label { font-size: var(--fs-body); color: var(--text-2); }

/* Разминка и указания тренера в плане/старте (правка Ивана 03.08) */
.wo-note { margin-bottom: var(--sp-3); }
.wo-note__text { font-size: var(--fs-sub); color: var(--text-2);
  white-space: pre-wrap; margin-top: var(--sp-2); line-height: 1.45; }

/* Список предстоящих тренировок (правка Ивана 03.08) */
.wo-plan-row { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); cursor: pointer; }
.wo-plan-row__main { flex: 1; min-width: 0; }
.wo-plan-row__day { font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); font-weight: 700; }
.wo-plan-row__title { font-size: var(--fs-body); font-weight: 600; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-plan-row__go { color: var(--text-3); font-size: 20px; }

/* Обзор тренировки: две кнопки в строке и приглушенная вторая */
.wo-cta-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.wo-cta-row .cta { flex: 1; }
.cta--ghost { background: var(--surface-2); color: var(--text); }
.wo-goal__val .u { font-size: var(--fs-sub); color: var(--text-2); font-weight: 500; }

/* ============ Чаты с Эгидой в приложении (правка Ивана 02.08) ============ */
#chat-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-list { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.chat-item { display: flex; align-items: center; gap: var(--sp-3);
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; margin: 0; padding: var(--sp-4) var(--sp-1); min-height: 60px; }
.chat-list .chat-item:last-child { border-bottom: 0; }
.chat-item__main { flex: 1; min-width: 0; }
.chat-item__title { font-size: var(--fs-title); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: var(--sp-1); }
.chat-item__del { background: none; border: none; color: var(--text-3);
  font-size: 20px; cursor: pointer; padding: 0 var(--sp-2); }
.chat-more { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text); font: 700 16px/1 var(--font); }
.limits { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.limits__box { flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-3); }
.limits__cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); }
.limits__val { font-size: var(--fs-title); font-weight: 700; margin-top: 2px; }
.limits__sub { font-size: 10px; color: var(--text-3); }
.msg { max-width: 86%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card);
  margin-bottom: var(--sp-2); white-space: pre-wrap; word-wrap: break-word;
  font-size: var(--fs-body); line-height: var(--lh-body); }
.msg--user { margin-left: auto; background: var(--cta-bg); color: var(--cta-fg); }
.msg--bot { margin-right: auto; background: var(--surface); border: 1px solid var(--border); }
.msg--pending { color: var(--text-3); font-style: italic; }
.msg__media { display: block; max-width: 180px; border-radius: var(--r-sm);
  margin-bottom: var(--sp-2); }
.chat-input { flex: none; display: flex; align-items: flex-end; gap: var(--sp-2);
  padding-top: var(--sp-2); }
.chat-input__field { flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-field); padding: var(--sp-3) var(--sp-4); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); min-height: 44px; }
/* композер - textarea: Enter дает перенос строки, растет до 120px (правка 03.08) */
textarea.chat-input__field { resize: none; line-height: var(--lh-body);
  max-height: 120px; overflow-y: auto; }

/* Режим открытого чата: нижней навигации нет, композер прижат к низу с резервом
   под полоску iPhone (правка Ивана 03.08 - «навигация нужна вне чата»). */
.chat-open .tabbar { display: none; }
.chat-open #screen-chat { padding-bottom: calc(var(--sp-2) + var(--sab)); }
/* клавиатура открыта: резерв под полоску не нужен (клавиатура выше нее),
   композер садится вплотную (правка Ивана 03.08 «высоковато от клавиатуры») */
.chat-open.kb-open #screen-chat {
  padding-bottom: 4px;
  padding-top: calc(var(--sp-2) + env(safe-area-inset-top, 0px));
}

/* шапка чата компактная: максимум места переписке (правка Ивана 03.08) */
.detail-head--chat { margin: var(--sp-1) 0 var(--sp-2); }
.detail-head--chat .detail-head__title { font-size: var(--fs-title); }
.chat-head__main { flex: 1; min-width: 0; }
.chat-head__main .detail-head__title { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chat-chip { display: inline-block; margin-top: 2px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-2);
  font-size: var(--fs-sub); padding: 3px 10px; cursor: pointer; }
.chat-ctx { flex: none; font-size: var(--fs-sub); color: var(--text-3); }

/* превью вложений над композером: миниатюры с крестиком, подпись - в поле */
.chat-attach-row { flex: none; display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding-top: var(--sp-2); }
.chat-attach { position: relative; width: 56px; height: 56px; }
.chat-attach__img { width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border); }
.chat-attach__file { width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 22px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); }
.chat-attach__x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: var(--r-pill); border: none; background: var(--cta-bg); color: var(--cta-fg);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }

/* список моделей в шите - как Select model у Claude (правка Ивана 03.08) */
.opt-list { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--sp-2); }
.opt-row { display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; gap: var(--sp-3); background: none; border: none;
  border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4);
  color: var(--text); cursor: pointer; font-family: var(--font); }
.opt-row:last-child { border-bottom: none; }
.opt-row__name { font-size: var(--fs-body); font-weight: 600; }
.opt-row__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: 2px; }
.opt-row__check { color: var(--accent); font-weight: 700; visibility: hidden; }
.opt-row--on .opt-row__check { visibility: visible; }
.chat-input__btn { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  border: none; background: var(--cta-bg); color: var(--cta-fg); font-size: 18px;
  cursor: pointer; }
.chat-input__mic { touch-action: none; user-select: none; -webkit-user-select: none;
  display: grid; place-items: center; }
.chat-input__mic svg { width: 21px; height: 21px; pointer-events: none; }
.chat-input__mic--active { background: var(--danger); color: #fff; }
.chat-input__att { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: 18px; cursor: pointer; }
.chat-new-btn { width: 52px; height: 52px; min-height: 52px; padding: 0;
  display: grid; place-items: center; font-size: 24px; touch-action: manipulation; }
.chat-new-btn:disabled { opacity: 0.65; }
.chat-meta { font-size: var(--fs-sub); color: var(--text-3); margin-bottom: var(--sp-2); }

/* Голосовое в чате: одна компактная строка, без модального окна. */
.chat-voice { flex: none; display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; margin-top: var(--sp-2); padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-field);
  background: var(--surface-2); color: var(--text); }
.chat-voice[hidden] { display: none; }
.chat-voice--held, .chat-voice--locked, .chat-voice--preview,
.chat-voice--sending { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.chat-voice__dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--danger); animation: voice-pulse 1.1s ease-in-out infinite; }
.chat-voice__time { flex: none; min-width: 3.5ch; font-size: var(--fs-body);
  font-variant-numeric: tabular-nums; font-weight: 600; }
.chat-voice__hint { flex: 1; min-width: 0; color: var(--text-2);
  font-size: var(--fs-sub); text-align: center; }
.chat-voice__action { flex: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: 600 17px/1 var(--font); cursor: pointer; }
.chat-voice__delete { color: var(--danger); font-size: 23px; }
.chat-voice__stop { background: var(--danger); border-color: var(--danger); color: #fff; }
.chat-voice__send { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.chat-voice__audio { flex: 1; min-width: 0; height: 34px; }
.msg__audio { display: block; width: min(260px, 68vw); height: 36px; }
@keyframes voice-pulse { 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) {
  .chat-voice__dot { animation: none; }
}

/* ============================================================
   Питание: листание дней (правка Ивана 04.08)
   Стрелки ‹ дата › переиспользуют .cal__nav.daynav с «Состояния» -
   здесь только пометка архива, подпись под кнопками и тап по столбику.
   ============================================================ */
.fuel__archive {
  margin-left: var(--sp-2); padding: 2px 6px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--text-3); font-size: 10px; font-weight: 600;
}
.fuel__daynote {
  flex: none; padding-top: var(--sp-2);
  color: var(--text-3); font-size: var(--fs-sub); text-align: center;
}
.bars__col--tap { cursor: pointer; transition: opacity var(--tap); }
.bars__col--tap:active { opacity: 0.55; }

/* ============ Правки Ивана 05.08: тренировка ============ */
/* Кнопка «+ упражнение» в круге: тот же ритм, что у карточек упражнений,
   но пунктиром - это действие, а не запись. */
.wo-add {
  width: 100%;
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-2);
  font: inherit;
  padding: var(--sp-3);
  text-align: center;
  cursor: pointer;
  transition: transform var(--tap), color var(--tap);
}
.wo-add:active { transform: scale(0.98); color: var(--text); }

/* Барабаны веса/повторов внутри модального шита правки упражнения */
.pick-sheet .wheels { margin: var(--sp-3) 0; }
.pick-sheet .cta { width: 100%; margin-bottom: var(--sp-2); }
/* Метрики прошедшей тренировки под названием (подходы · кг · время) */
.wo-plan-row__meta {
  color: var(--text-2);
  font-size: var(--fs-label);
  margin-top: 2px;
}

/* ============ Пустой раздел «Цели» (правка Ивана 06.08) ============ */
/* Раньше здесь была одинокая строка посреди черноты. Теперь - объяснение,
   кнопка действия и подсказка про второй вход (разговор с Эгидой). */
.soon .cta { margin-top: var(--sp-5); min-width: 200px; }
.soon__hint {
  margin-top: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-sub);
  line-height: var(--lh-body);
  max-width: 320px;
}
/* Пустое состояние, прижатое кверху (раздел «Цели»): по центру экрана текст
   выглядел потерянным в черноте. */
.soon--top { place-content: start center; padding-top: var(--sp-5); }

/* ============ Оценка круга и подсказка по весу (правка Ивана 06.08) ============ */
.wo-ask { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.wo-ask__label { font-weight: 600; }
.wo-ask__chips { margin: 0; }
.wo-ask .chip { min-height: 40px; }
/* Подсказка не кричит: это предложение, а не ошибка - потому обычная карточка
   с акцентной рамкой, без красного и без модального окна. */
.wo-hint {
  border-color: var(--accent-dim);
  background: var(--accent-wash);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.wo-hint__text { flex: 1; min-width: 180px; }
.wo-hint .cta { min-height: 40px; padding: 0 var(--sp-4); }

/* Диагностика сборки в настройках (06.08): видно, дошла ли правка до телефона */
.settings-diag {
  color: var(--text-2); font-size: var(--fs-sub); line-height: 1.6;
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.settings-diag b { color: var(--text); }

/* ============ Переключатели настроек (правка Ивана 06.08) ============ */
.switches { margin-bottom: var(--sp-4); }
.switch-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row__text { flex: 1; min-width: 0; }
.switch-row__title { font-size: var(--fs-body); font-weight: 600; }
.switch-row__hint { font-size: var(--fs-sub); color: var(--text-2); margin-top: 2px; }
/* Тумблер как системный: дорожка и кружок, состояние читается без подписи. */
.switch {
  flex: none; width: 50px; height: 30px; border-radius: var(--r-pill);
  background: var(--neutral-track); border: 0; cursor: pointer;
  position: relative; transition: background var(--tap);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform var(--tap);
}
.switch--on { background: var(--accent); }
.switch--on::after { transform: translateX(20px); }

/* ============ Строки-входы и план одной строкой (правка Ивана 07.08) ============ */
/* Вместо стены одинаковых плашек - короткая строка со стрелкой: содержимое
   живет на своем экране, а здесь только вход в него. */
.drill {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); cursor: pointer;
  transition: transform var(--tap);
}
.drill:active { transform: scale(0.99); }
.drill__main { flex: 1; min-width: 0; }
.drill__title { font-size: var(--fs-body); font-weight: 600; }
.drill__sub { font-size: var(--fs-sub); color: var(--text-2); margin-top: 2px; }
.drill__go { color: var(--text-3); font-size: 20px; }
/* План: упражнение сверху, цепочка кругов под ним */
.plan-row__title { font-size: var(--fs-body); font-weight: 600; }
.plan-row__sets {
  margin-top: 4px; color: var(--text-2); font-size: var(--fs-sub);
  font-variant-numeric: tabular-nums;
}
.setrow__delta { margin-left: 6px; font-size: var(--fs-sub); }
.setrow__delta.up { color: var(--accent); }
.setrow__delta.down { color: var(--text-3); }

/* ============ Недельная полоска дней (правка Ивана 07.08) ============ */
/* Семь дней одной строкой вместо стрелок и переключателя периодов:
   и навигация, и мини-история недели сразу. */
.weekstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-3);
}
.weekstrip__day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) 0; min-height: 52px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text-2); cursor: pointer; font-family: var(--font);
  transition: background var(--tap), color var(--tap);
}
.weekstrip__wd { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.weekstrip__num { font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.weekstrip__day--on { background: var(--surface-2); }
.weekstrip__day--on .weekstrip__wd { color: var(--accent); }

/* ============ Приемы пищи группами (правка Ивана 07.08) ============ */
/* Заголовок группы несет промежуточный итог: сколько набрано за завтрак,
   обед, перекус, ужин - без захода в каждую запись. */
.slot-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-2);
}
.slot-head__name {
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-3);
}
.slot-head__sum {
  font-size: var(--fs-body); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.slot-head--empty .slot-head__sum { color: var(--text-3); font-weight: 400; }
.fuel__meals--inner { margin-bottom: var(--sp-2); }

/* ============ ЕДИНАЯ ОБОЛОЧКА СТРОКИ СПИСКА (этап 1, 07.08) ============
   Замечание со стороны: «все плашки разного размера и оформления - винегрет».
   Так и было: одну и ту же по смыслу строку приложение рисовало одиннадцатью
   способами, высоты гуляли от 46 до 87 точек, скругления от 10 до 16, а
   название упражнения было 19px белым в плане и 13px серым в рекордах.
   Здесь задается ОДНА оболочка сразу для всех: имена классов не трогаем,
   чтобы не переписывать 70 мест в коде экранов - блок идет последним в файле
   и перекрывает прежние значения. */
.setrow,
.habit-row,
.wo-row,
.wo-plan-row,
.ev,
.meal,
.pick-row,
.plan-row,
.drill,
.ex-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  width: 100%;
}

/* Заголовок строки - один размер везде. */
.setrow__day,
.habit-row__title,
.task-row__title,
.wo-row__title,
.wo-plan-row__title,
.plan-row__title,
.drill__title,
.meal__name,
.ev__title,
.chat-item__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-body);
}

/* Подпись под заголовком - тоже одна. */
.wo-plan-row__day,
.plan-row__sets,
.drill__sub,
.meal__sub,
.ev__sub,
.task-row__sub,
.chat-item__sub {
  font-size: var(--fs-sub);
  font-weight: 400;
  color: var(--text-2);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: normal;
}

/* Значение справа (вес, калории, время) - по цифрам. */
.setrow__val,
.meal__kcal,
.drill__value {
  font-size: var(--fs-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ПРАВИЛО ЧИТАЕМОСТИ: стрелка только у строк, ведущих на другой экран.
   Ни стрелки, ни отметки - строка справочная, нажимать бесполезно. */
.drill__go,
.wo-plan-row__go {
  flex: none;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
}
.drill:active,
.wo-plan-row:active,
.ev:active,
.meal:active,
.chat-item:active,
.ex-row:active,
.pick-row:active { transform: scale(0.99); }

/* Стрелка приоритета - отдельная мишень: тап по плашке отмечает выполнение,
   а провалиться внутрь можно только ею (правка Ивана 07.08). */
.priority__trail--go {
  padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3);
  margin: calc(var(--sp-2) * -1) 0;
  cursor: pointer;
}
.priority__trail--go:active { opacity: 0.6; }

/* Строка остатка по калориям вместо перечисления пустых приемов (07.08).
   Воздух вокруг: это итог дня, а не очередная плашка. */
.fuel__left {
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 0 var(--sp-1);
  color: var(--text-2);
  font-size: var(--fs-sub);
  text-align: center;
}
/* Заголовок приема пищи: воздуха больше, чем было - группы не слипаются. */
.slot-head { margin: var(--sp-4) 0 var(--sp-2); }
.slot-head:first-child { margin-top: var(--sp-2); }

/* ============ Пикер упражнений и правка (09.08) ============ */
.pick-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pick-head .label { margin: 0; }
.pick-row--group { display: flex; justify-content: space-between; align-items: center; }
.sheet-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.sheet-row .goal__btn { flex: 1; }
.goal__btn--danger { color: var(--danger); }
.plan-move { width: 100%; margin-top: var(--sp-2); }

/* Свои диалоги (10.08): текст и поле ввода в шите */
.ui-msg { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--sp-4); }
.ui-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font: inherit; font-size: 16px;   /* 16px - iOS не приближает экран при фокусе */
  padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.pick-sheet .cta { width: 100%; }
.pick-sheet .cta + .goal__btn { margin-top: var(--sp-2); width: 100%; }

/* Стрелка «назад» из дня в месяц/неделю (10.08) */
.cal__back { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cal__back-label { font-size: var(--fs-body); font-weight: 600; }

/* ============ ЭТАПЫ 2-4 РАЗБОРА «ВИНЕГРЕТА» (10.08) ============
   Этап 2 - чипы и переключатели: было 5 исполнений (капсулы, скругление 10,
   разные шрифты 13/15, у одних рамка, у других нет). Стало одно правило:
   капсула, шрифт 15/600, покой - прозрачный серый, выбран - белая заливка
   с черным текстом. Исключение по смыслу: «привычка выполнена» остается
   зеленой - это состояние данных, а не выбор вида. */
.subtab,
.chip,
.habit-chip,
.habit-form__opt {
  border-radius: var(--r-pill);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: var(--font);
  background: none;
  border: 1px solid transparent;
  color: var(--text-2);
  cursor: pointer;
}
.subtab--active,
.chip--active,
.habit-form__opt--active {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-color: var(--cta-bg);
}
.subtab { padding-inline: var(--sp-2); font-size: var(--fs-label); }
.habit-chip { border-color: var(--border); min-height: 40px; }
.habit-chip--done { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.habit-chip--add { border-style: dashed; color: var(--text-2); }
/* Недельная полоска питания: выбранный день - как активный чип везде,
   а не отдельный серый квадрат с зеленой подписью. */
.weekstrip__day { border-radius: var(--r-sm); }
.weekstrip__day--on { background: var(--cta-bg); }
.weekstrip__day--on .weekstrip__wd,
.weekstrip__day--on .weekstrip__num { color: var(--cta-fg); }

/* Этап 3 - кнопки: было 8 исполнений (капсулы, прямоугольники 14, квадраты 12,
   темные и белые для одного действия). Стало: любая кнопка - капсула;
   главная - белая (.cta), второстепенная - серая. */
.btn { border-radius: var(--r-pill); }
.goal__btn {
  border-radius: var(--r-pill);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
  border: 0;
}
.goal__btn--danger { color: var(--danger); }
.habit-progress-btn { font-size: var(--fs-body); min-height: 40px; }
/* Кнопка «+» одна на все приложение: белая капсула 44х44 (в календаре была
   белым квадратом 38, в делах - темной таблеткой). */
.cal__add {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  font-size: 22px;
}

/* Этап 4 - отметка «сделано»: было 7 исполнений (круги 30/18, квадраты 30/22
   со скруглением 6, капсула). Стало: круг - главный знак приложения (кольцо
   восстановления, кольца приоритетов). Капсула «сделал» в режиме тренировки
   оставлена сознательно: крупная мишень под мокрые руки. */
.habit-row__box,
.task-row__box {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--neutral-track);
  font-size: 13px;
}
.habit-row__box { width: 30px; height: 30px; font-size: 15px; }

/* ===== ДИКТОФОН (правка Ивана 10.08) =====
   Экран записи поверх всего: крупный счетчик и две кнопки, чтобы попасть
   пальцем не глядя. Показывается классом rec--on, иначе его нет вовсе. */
.rec { position: fixed; inset: 0; z-index: 90; display: none;
       align-items: center; justify-content: center;
       background: rgba(0,0,0,.92); backdrop-filter: blur(6px); }
.rec--on { display: flex; }
.rec__card { width: min(88vw, 340px); text-align: center; padding: 26px 20px; }
.rec__dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 16px;
            background: #ff3b30; animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec__time { font-size: 46px; font-weight: 700; letter-spacing: .02em;
             font-variant-numeric: tabular-nums; color: #fff; }
.rec__hint { margin-top: 10px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.55); }
.rec__row { display: flex; gap: 10px; margin-top: 26px; }
.rec__btn { flex: 1; height: 48px; border-radius: 14px; border: 0;
            font-size: 15px; font-weight: 600; }
.rec__btn--drop { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.rec__btn--stop { background: #34c759; color: #06210f; }