/* ============================================================
   Раздел «profile» — стили компонентов, появившихся при редизайне.
   Сюда же входят экраны подписки (sub-*), добавок (sup-*) и мастера
   онбординга (onb-*): ими владеет тот же набор страниц.

   Всё оформление берётся из css/tokens.css: литеральных цветов,
   произвольных кеглей и отступов вне сетки здесь быть не должно.
   Старые правила этих разделов пока живут в style.css и вытесняются
   по мере переписывания экранов.

   Файл подключается ПОСЛЕ style.css, поэтому правила с той же
   специфичностью здесь перекрывают прежние — этим и пользуемся,
   чтобы не трогать style.css.

   ГЛАВНОЕ ИЗМЕНЕНИЕ: экран профиля больше не выкладывает семь секций
   и лист настроек одновременно. Всё разложено по группам ОДНОСТРОЧНЫХ
   разделов (.acc-sec), которые раскрываются по нажатию.
   ============================================================ */

/* ============================================================
   ГРУППЫ РАЗДЕЛОВ
   ============================================================ */

/* Атрибут hidden должен побеждать раскладку, которую мы задаём классам.
   В style.css общего правила нет, поэтому у элемента с display:flex
   (форма ввода веса, кнопка .btn) атрибут hidden не срабатывал вовсе:
   форма замера висела на экране всегда, а «Записать вес» не пряталась. */
.page-account [hidden] {
  display: none !important;
}

.acc-group {
  margin-bottom: var(--s5);
}

/* Надзаголовок группы (.eyebrow): называет роль строк под ним, а не их
   содержимое. Оформление — общее из style.css, здесь только отступы. */
.acc-group__title {
  margin: 0 var(--s1) var(--s2);
}

/* Карточка-список: строки разделяются волосяной линией, а не зазором —
   иначе каждая строка читалась бы как отдельная карточка. */
.acc-list {
  padding: 0;
  overflow: hidden;
  margin-bottom: 0;
}

/* ============================================================
   РАЗДЕЛ-СТРОКА
   ============================================================ */

.acc-sec + .acc-sec {
  border-top: 1px solid var(--border);
}

/* Скрытый раздел (например, трекинг цикла в мужском профиле)
   не должен «побеждать» атрибут hidden своей раскладкой. */
.acc-sec[hidden] {
  display: none !important;
}

/* Шапка — во всю ширину строки, тап-таргет выше минимального. */
.acc-sec__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 60px;
  padding: var(--s3) var(--s4);
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.acc-sec__head:active {
  background: var(--surface-2);
}

/* Иконка раздела в оранжевом кружке — вложенный блок внутри карточки,
   поэтому без границы и тени. Цвет штриха — --accent-text: чистый оранжевый
   на светлой подложке слишком бледен для тонкой линии. */
.acc-sec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* Закрытый раздел не притворяется активным: подложка нейтральная. */
.acc-sec--locked .acc-sec__icon {
  background: var(--surface-2);
  color: var(--muted);
}

.acc-sec__text {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex: 1;
  min-width: 0;
}

.acc-sec__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.acc-sec__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Пустая подпись не должна занимать высоту строки. */
.acc-sec__hint:empty {
  display: none;
}

/* Шеврон смотрит вправо, у раскрытого — вниз. Поворот делаем в CSS,
   а не второй иконкой: набор от этого не растёт. */
.acc-sec__mark {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform var(--dur) var(--ease);
}

.acc-sec--open .acc-sec__mark {
  transform: rotate(90deg);
}

/* У закрытого раздела на месте шеврона замок — его не крутим. */
.acc-sec--locked .acc-sec__mark {
  transform: none;
}

.acc-sec__body {
  padding: 0 var(--s4) var(--s4);
}

/* Первый элемент тела не должен прижиматься к шапке вплотную. */
.acc-sec__body > *:first-child {
  margin-top: 0;
}

/* ============================================================
   ШАПКА ПРОФИЛЯ И КАРТОЧКА ПОДПИСКИ
   ============================================================ */

/* Шапка без карточки: имя набрано как заголовок экрана — сжатым шрифтом в
   верхнем регистре, аватар в оранжевом кольце. Рамка вокруг «имени и
   аватара» делала шапку ещё одной одинаковой карточкой в столбике. */
.acc-header--compact {
  gap: var(--s4);
  margin-bottom: var(--s4);
  padding: var(--s1) var(--s1) 0;
}

/* Кольцо 2px с зазором в цвет фона: кольцо не прилипает к фотографии. */
.acc-header--compact .acc-avatar {
  width: 56px;
  height: 56px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.acc-header--compact .acc-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.acc-header--compact .acc-username {
  margin-top: var(--s1);
  font-size: var(--fs-sm);
}

/* Заглушка аватара: мягкая подложка с оранжевым силуэтом. Сплошной оранжевый
   круг сливался с оранжевым кольцом вокруг него. */
.acc-avatar--empty {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 0;
}

/* Карточка подписки — тёмный блок с фотографией (.hero.hero--img), вся
   целиком кнопка. Сбрасываем то, что .acc-sub-card задаёт в style.css для
   прежней строки «иконка · текст · шеврон». */
.acc-sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 176px;
  margin-bottom: var(--s5);
  padding: var(--s5);
  justify-content: flex-end;
  font: inherit;
  text-align: left;
}

.acc-sub-card:active {
  transform: scale(.99);
}

/* Модификатор премиума в style.css рисовал оранжевую полосу слева —
   на тёмном блоке с фото она лишняя. */
.acc-sub-card--premium {
  border-left: none;
}

/* Надзаголовок «Подписка»: style.css ниже по файлу задаёт этому классу
   16px/700 для прежней строки, поэтому повторяем оформление .eyebrow явно. */
.acc-sub-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--hero-muted);
}

/* Статус — крупно, белым сжатым: это главная строка карточки. Селектор с
   родителем перебивает оранжевую подсветку премиума из style.css. */
.acc-sub-card .acc-sub-card__status {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--hero-text);
}

/* Подпись действия — по размеру своего текста, а не во всю ширину:
   на фотографии длинная оранжевая полоса перекрывала бы половину кадра. */
.acc-sub-card__action {
  width: auto;
  min-width: 160px;
  margin-top: var(--s4);
  pointer-events: none;
}

/* Активная подписка — белый контур: действие вторично, доступ уже есть. */
.acc-sub-card__action--ghost {
  background: transparent;
  border: 1.5px solid var(--hero-border);
  color: var(--hero-text);
}

/* ============================================================
   ВЕС: ЗАПИСЬ ЗАМЕРА РЯДОМ С ГРАФИКОМ
   Раньше график ничего не предлагал, а вес вводился единственным полем
   внутри свёрнутой формы «Мои параметры» — связь была неочевидна.
   ============================================================ */

/* Кнопка, форма и график идут в колонку с одинаковым зазором. Зазор задаём
   здесь, а не отступами у детей: скрытые (hidden) кнопка и форма не должны
   оставлять после себя пустое место. */
.acc-wt {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.acc-wt__add {
  width: 100%;
}

/* Компактный ввод: поле и кнопка в одну строку. */
.acc-wt__form {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
}

.acc-wt__field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.acc-wt__save {
  flex-shrink: 0;
  width: auto;
  min-height: 52px;
}

/* Собственный отступ графика из style.css сложился бы с зазором колонки. */
.acc-wt .wt-chart-wrap {
  margin-top: 0;
}

/* Пустое состояние графика — КНОПКА, а не инструкция «зайдите в другой
   раздел»: до этой правки человеку некуда было нажать. */
.wt-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0;
}

.wt-empty__btn {
  width: auto;
  min-width: 180px;
  margin: var(--s4) auto 0;
}

/* ============================================================
   УВЕДОМЛЕНИЯ — ОДИН ЭКРАН
   Еда, тренировка, добавки, вечерняя сводка и недельный разбор —
   одинаковыми строками. Прежде это были четыре разных вида на четырёх
   экранах, и человеку приходилось помнить, где что лежит.
   ============================================================ */

/* Список строк уведомлений: строки разделяются волосяной линией,
   поэтому именно колонка без зазора, а не сетка с промежутками. */
.acc-nlist {
  display: flex;
  flex-direction: column;
}

.acc-nrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
}

.acc-nrow:first-child {
  border-top: none;
}

.acc-nrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
}

.acc-nrow__text {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex: 1;
  min-width: 0;
}

.acc-nrow__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.acc-nrow__hint {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--muted);
}

/* Переход в чужие настройки (например, к анкете тренера). */
.acc-nrow__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.acc-nrow__go:active {
  background: var(--surface-2);
}

/* Дополнительные поля строки (времена) — с отступом под иконку,
   чтобы визуально принадлежать своей строке. */
.acc-nrow__extra {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 0 var(--s3) calc(32px + var(--s3));
}

/* ---------- Сегменты: язык и тема ---------- */

/* Подписи сегментов — сжатым шрифтом в верхнем регистре, как у кнопок:
   белое на оранжевом проходит по контрасту только крупным текстом. */
.acc-lang__switch {
  gap: var(--s1);
  padding: var(--s1);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.acc-lang__btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--muted);
}

.acc-lang__btn--active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

/* ---------- Тумблер ---------- */

.acc-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Геометрия дорожки и бегунка кратна 4px. box-sizing здесь content-box
   намеренно: при border-box рамка съедала бы 2px высоты, и одинаковые
   отступы бегунка сверху и снизу перестали бы быть одинаковыми. */
.acc-switch__track {
  position: relative;
  display: block;
  box-sizing: content-box;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.acc-switch__knob {
  position: absolute;
  top: var(--s1);
  left: var(--s1);
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.acc-switch--on .acc-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.acc-switch--on .acc-switch__knob {
  transform: translateX(20px);
  background: var(--on-accent);
}

/* ---------- Времена приёмов пищи ---------- */

.acc-time {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.acc-time__input {
  flex: 1;
  min-width: 0;
}

/* Зона нажатия удаления — 44px: соседнее поле времени стоит вплотную,
   и промах по мелкой мишени стирал не то время. */
.acc-time__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.acc-time__del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

.acc-time__add {
  min-height: var(--tap-min);
}

.acc-time__field {
  margin-bottom: 0;
}

/* ============================================================
   ТОЧЕЧНЫЕ ПРАВКИ ПОД ИКОНКИ (бывшие эмодзи)
   Всюду гасим кегль, которым держался эмодзи, и даём иконке цвет.
   ============================================================ */

/* ---------- История по дням ---------- */

.hist-cal__nav {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  width: var(--tap-min);
  height: var(--tap-min);
  color: var(--text);
  font-size: 0;
}

.hist-cal__nav:disabled {
  opacity: .4;
  cursor: default;
}

/* Легенда: плашка + подпись. В style.css каждому span легенды подставляется
   квадрат ::before, а вложенная .hist-cal__cell тянет высоту ячейки
   календаря (36px) — легенда превращалась в два больших блока с пустым
   квадратом перед каждым. Гасим лишние псевдоэлементы и ужимаем плашку. */
.hist-cal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.hist-cal__legend .hist-cal__legend-item::before,
.hist-cal__legend .hist-cal__cell::before {
  display: none;
}

.hist-cal__legend .hist-cal__cell {
  width: 12px;
  height: 12px;
  min-height: 0;
  border-radius: var(--s1);
}

/* ---------- Трекинг цикла ---------- */

.cyc-phase__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--data-cycle);
  font-size: 0;
}

.cyc-fact__icon,
.cyc-tip__icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0;
}

/* ---------- Недельный AI-отчёт ---------- */

.rep-insight__mark {
  display: inline-flex;
  align-items: center;
  height: calc(var(--fs-sm) * var(--lh-normal));
  color: var(--accent);
  font-size: 0;
}

.rep-focus__icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: 0;
}

/* Подпись кнопки — отдельный узел: её текст подменяется на «Формируем…»,
   а иконка остаётся на месте. min-width позволяет длинной русской строке
   сжиматься внутри кнопки, а не распирать её за край экрана. */
.rep-gen-btn__label,
.sup-ai-btn__label {
  min-width: 0;
}

.rep-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0;
}

/* ============================================================
   ЭКРАН ПОДПИСКИ (sub-*)
   Сверху — тёмный блок с фотографией и тремя обещаниями, ниже — тарифы
   как переключатель и одна кнопка оплаты. Прежние правила sub-* из
   style.css перекрываем здесь, не трогая общий файл.
   ============================================================ */

/* Атрибут hidden должен побеждать display:flex у статуса из style.css. */
.sub-page [hidden] {
  display: none !important;
}

.sub-head {
  margin-bottom: var(--s2);
}

.sub-back__arrow {
  display: inline-flex;
  align-items: center;
  font-size: 0;
}

/* ---------- Тёмный блок ---------- */

.sub-hero {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: var(--s4);
}

.sub-hero__title {
  font-size: var(--fs-display);
}

.sub-hero__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
}

.sub-hero__point {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--hero-text);
}

.sub-hero__point svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* ---------- Статус: активна / истекла / пробный период ---------- */

.sub-status {
  display: block;
}

.sub-status--premium,
.sub-status--trial {
  border-left: none;
}

.sub-status--expired {
  border: 1px solid var(--border);
  box-shadow: inset 4px 0 0 var(--warning);
}

.sub-status__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0;
}

.sub-status--expired .sub-status__icon {
  background: var(--warning-soft);
  color: var(--warning);
}

.sub-status__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

/* Дата окончания — мелкий оранжевый текст, поэтому --accent-text. */
.sub-status--premium .sub-status__until {
  color: var(--accent-text);
}

.sub-trial {
  margin-top: var(--s3);
}

/* ---------- Тарифы ---------- */

.sub-tariffs {
  margin-bottom: var(--s4);
}

.sub-tariffs__eyebrow {
  margin: 0 var(--s1) var(--s2);
}

.sub-tariffs__list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

/* Карточка-переключатель: кнопка на всю ширину с раскладкой
   «название · цена · метка». Границу держим 2px всегда, чтобы выбор
   не сдвигал соседей на пиксель. */
.sub-tariff {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.sub-tariff:active {
  transform: scale(.99);
}

/* Годовой без выбора остаётся нейтральным: подсветка — только у выбранного,
   иначе на экране две «главные» карточки. Селектор с атрибутом повторяет
   правило из style.css, которое красило годовой оранжевой рамкой всегда. */
.sub-card--best,
.sub-tariff[data-tariff="yearly"] {
  border-color: var(--border);
}

.sub-tariff.sub-tariff--on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sub-tariff__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.sub-tariff__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Бейдж «Выгодно»: белое на оранжевом — только крупным сжатым текстом. */
.sub-tariff__badge {
  padding: 1px var(--s2);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.sub-tariff__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.sub-tariff__econ {
  margin-top: 0;
}

.sub-tariff__permonth {
  font-size: var(--fs-xs);
}

.sub-tariff__save {
  background: var(--surface);
  color: var(--accent-text);
}

.sub-tariff--on .sub-tariff__save {
  background: var(--surface);
}

/* Цена — крупное число справа, срок под ним. */
.sub-tariff__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}

.sub-tariff__price {
  display: block;
  font-size: var(--fs-h1);
  color: var(--text);
}

.sub-tariff__period {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* Метка выбора: пустое кольцо, у выбранного — оранжевый круг с галочкой. */
.sub-tariff__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.sub-tariff--on .sub-tariff__mark {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.sub-tariff__pay {
  margin-top: 0;
}

/* ---------- Что входит ---------- */

.sub-benefits__eyebrow {
  margin-bottom: var(--s3);
}

.sub-benefit__check {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0;
}

/* ---------- Подвал ---------- */

.sub-tribute__btn {
  margin-top: 0;
}

.sub-foot {
  margin-top: var(--s2);
}

/* Оферта и политика — те же ссылки, что на экране оплаты. */
.sub-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.sub-legal__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}

.sub-legal__sep {
  color: var(--muted);
}

/* ============================================================
   МАСТЕР ОНБОРДИНГА (onb-*)
   Заголовок шага — сжатым капсом слева, прогресс — оранжевая полоса,
   цель — три карточки с фотографией. Прежние правила onb-* из style.css
   перекрываем здесь.
   ============================================================ */

.onb-wizard {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Прогресс ---------- */

.onb-progress {
  max-width: 440px;
  width: 100%;
  margin: 0 auto var(--s4);
}

.onb-progress__label {
  margin-bottom: var(--s2);
}

.onb-progress__bar {
  display: flex;
  gap: var(--s1);
}

.onb-progress__seg {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  transition: background var(--dur) var(--ease);
}

.onb-progress__seg--on {
  background: var(--accent);
}

/* ---------- Шаг ---------- */

/* Шаг не центрируем по вертикали: заголовок должен стоять на одном месте
   при переходе между шагами, а не прыгать вслед за высотой содержимого. */
.onb-step {
  justify-content: flex-start;
  gap: var(--s4);
}

.onb-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-align: left;
}

.onb-subtitle {
  margin: calc(-1 * var(--s2)) 0 var(--s1);
  text-align: left;
}

/* Выбор пола — те же кнопки, но подпись сжатым капсом, как у кнопок. */
.onb-choice {
  min-height: 72px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.onb-choice--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

/* ---------- Цель: три карточки с фото ---------- */

.onb-goals {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* Широкая карточка-баннер: фото под затемнением, название белым капсом
   слева, метка выбора справа. Три в колонку, а не в ряд: в ряд по 110px
   слово «Поддерживать» не помещается и рвётся посередине.
   Граница 2px всегда, чтобы выбор не менял размер соседей. */
.onb-goal {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 88px;
  width: 100%;
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--hero);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 100%),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
  color: var(--hero-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.onb-goal:active {
  transform: scale(.98);
}

.onb-goal--on {
  border-color: var(--accent);
}

.onb-goal__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.onb-goal__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--hero-text);
}

.onb-goal__hint {
  font-size: var(--fs-xs);
  line-height: var(--lh-heading);
  color: var(--hero-muted);
}

/* Метка выбора справа: пустое кольцо, у выбранной — оранжевый круг с
   галочкой. В разметке метка стоит первой, поэтому переставляем её в конец. */
.onb-goal__mark {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--hero-muted);
  color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.onb-goal--on .onb-goal__mark {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- Действия ---------- */

.onb-actions {
  gap: var(--s2);
  margin-top: var(--s4);
}

/* «Далее» и «Назад» — обычные .btn: style.css задавал им собственный
   кегль и радиус, возвращаем токены кнопок. */
.onb-next,
.onb-back {
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  box-shadow: none;
}

/* style.css делает .onb-back прозрачной текстовой ссылкой — возвращаем
   контур вторичной кнопки. */
.onb-back {
  align-self: stretch;
  padding: 0 var(--s4);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.onb-back:active {
  opacity: 1;
}

/* Тумблер вечерней сводки: иконка в оранжевом кружке, метка выбора — как у
   карточек цели. */
.onb-toggle {
  border-radius: var(--radius-lg);
}

.onb-toggle--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

.onb-toggle__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0;
}

.onb-toggle--on .onb-toggle__emoji {
  background: var(--surface);
}

.onb-toggle__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}

.onb-toggle__mark {
  color: transparent;
  font-size: 0;
}

.onb-toggle--on .onb-toggle__mark {
  color: var(--on-accent);
}

/* «Пропустить» — текстовая ссылка высотой 29px: промахнуться по ней было
   проще, чем попасть. Текст не увеличиваем, растим только зону нажатия. */
.onb-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--s3);
  text-decoration: none;
}

/* ============================================================
   ДОБАВКИ (sup-*)
   Названия карточек — сжатым шрифтом, добавка — название крупно и чипы
   времени, форма — переключатель напоминания, AI-совет — с надзаголовком.
   ============================================================ */

.sup-head__title {
  letter-spacing: .01em;
}

/* Заголовки карточек — h2 нового облика (сжатый, верхний регистр). */
.sup-card__title,
.sup-rem-card__title,
.sup-ai-card__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--s1);
}

.sup-card__subtitle,
.sup-rem-card__subtitle,
.sup-ai-card__subtitle {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  margin-bottom: var(--s4);
}

.sup-ai-card__eyebrow {
  margin-bottom: var(--s1);
}

/* ---------- Строка добавки ---------- */

.sup-item {
  padding: var(--s3) 0;
}

.sup-item__main {
  gap: var(--s1) var(--s2);
}

.sup-item__name {
  flex-basis: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.sup-item__meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.sup-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  flex-basis: 100%;
  margin-top: var(--s1);
}

/* Чип времени приёма: нейтральная подложка, чип напоминания — оранжевая. */
.sup-item__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 24px;
  padding: 0 var(--s2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sup-item__badge {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* Зоны удаления — 44px вместо прежних 32×32. */
.sup-item__del,
.sup-rem-item__del {
  width: var(--tap-min);
  height: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--muted);
  font-size: 0;
}

.sup-item__del:active,
.sup-rem-item__del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Пока идёт запрос на удаление — кнопка приглушена, но иконка на месте
   (подменять содержимое текстом нельзя: внутри SVG). */
.sup-item__del.is-busy,
.sup-rem-item__del.is-busy {
  opacity: .5;
}

/* ---------- Строка напоминания ---------- */

/* ---------- Формы ---------- */

.sup-form__title,
.sup-rem-form__title {
  font-size: var(--fs-h3);
}

/* «Напоминать о приёме» — переключатель, а не квадратик: строка читается
   как настройка, и включённое состояние видно оранжевой дорожкой.
   Сам input остаётся чекбоксом — меняется только его отрисовка. */
.sup-form__check {
  justify-content: space-between;
  margin: 0 0 var(--s4);
}

.sup-form__check-label {
  order: -1;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.sup-form__checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: content-box;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sup-form__checkbox::after {
  content: "";
  position: absolute;
  top: var(--s1);
  left: var(--s1);
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.sup-form__checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.sup-form__checkbox:checked::after {
  transform: translateX(20px);
  background: var(--on-accent);
}

.sup-form__checkbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- AI-советы ---------- */

.sup-ai-chip__icon {
  display: inline-flex;
  align-items: center;
  font-size: 0;
}

/* Чипы целей и «Использовать» у AI-совета наследуют 40px из style.css —
   до минимальных 44px не дотягивали. Кегль подписи не трогаем. */
.sup-ai-chip,
.sup-ai-suggest__use {
  min-height: var(--tap-min);
}

.sup-ai-chip {
  border-color: var(--border);
}

.sup-ai-chip.chip--active {
  border-color: var(--accent);
}

/* Результат — вложенный блок: только заливка, без границы и тени. */
.sup-ai-box__inner,
.sup-ai-box__loading,
.sup-ai-box__error {
  background: var(--surface-2);
  border-radius: var(--radius);
}

.sup-ai-box__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.sup-ai-box__goal {
  color: var(--accent-text);
}

.sup-ai-suggest {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: none;
}

.sup-ai-suggest__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}

.sup-ai-suggest__dosage {
  color: var(--accent-text);
}

/* Строки с галочкой («Напоминать о приёме», выбор добавок в напоминании):
   нажимается весь label, но он был высотой 20 и 40px. Сам квадратик
   чекбокса не трогаем — растёт только строка. */
.sup-form__check,
.sup-rem-pick {
  min-height: var(--tap-min);
}

.sup-empty__icon,
.sup-rem-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0;
}

.sup-error__icon,
.sup-rem-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0;
}

/* Дисклеймер БАД: иконка предупреждения и текст в одну строку. */
.sup-ai-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  color: var(--text);
}

.sup-ai-disclaimer .icon {
  flex-shrink: 0;
  color: var(--danger);
}

/* Кнопки совета: «Заполнить форму» занимает свою ширину, «Купить» — остаток;
   когда вдвоём не помещаются, вторая уходит на следующую строку, а не
   ломает подпись первой на две. */
.sup-ai-suggest__actions {
  flex-wrap: wrap;
}

.sup-ai-suggest__actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Кнопка «Купить» — иконка корзины рядом с подписью. */
.sup-ai-suggest__buy {
  gap: var(--s2);
}

/* ---------- Пейволл без подписки ---------- */

/* Карточка пейволла получает классы .hero.hero--img из page-supplements.js:
   тот же тёмный блок с фотографией, что и карточка подписки в профиле.
   Здесь — палитра текста поверх фото. */
.page-supplements--locked .paywall-card {
  border: none;
  text-align: left;
}

.page-supplements--locked .paywall-icon {
  margin-left: 0;
  background: var(--hero-2);
  color: var(--accent);
}

.page-supplements--locked .paywall-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--hero-text);
}

.page-supplements--locked .paywall-desc {
  color: var(--hero-muted);
}

.page-supplements--locked .paywall-bullets {
  max-width: none;
  margin: 0;
}

.page-supplements--locked .paywall-bullet-mark {
  background: var(--accent);
  color: var(--on-accent);
}

.page-supplements--locked .paywall-bullet-text {
  color: var(--hero-text);
}

.page-supplements--locked .paywall-price {
  text-align: left;
  color: var(--hero-text);
}

/* Подпись «Попробовать бесплатно» на 375px не помещалась в строку: убираем
   разрядку и ужимаем боковые отступы, кегль не трогаем. */
.page-supplements--locked .paywall-cta {
  padding: 0 var(--s2);
  letter-spacing: 0;
}

/* ============================================================
   УЗКИЕ ЭКРАНЫ (360px и меньше)
   ============================================================ */

@media (max-width: 360px) {
  .acc-sec__head {
    gap: var(--s2);
    padding: var(--s3);
  }

  .acc-sec__body {
    padding: 0 var(--s3) var(--s3);
  }

  /* Ввод веса не помещается в строку — складываем вертикально. */
  .acc-wt__form {
    flex-direction: column;
    align-items: stretch;
  }

  .acc-wt__save {
    width: 100%;
  }

  .acc-nrow__extra {
    padding-left: 0;
  }

  .sub-tariff__price {
    font-size: var(--fs-h2);
  }
}

/* Проверка оплаты (только владелец): обычная карточка с пунктирной рамкой —
   служебный блок не должен выглядеть как часть витрины. */
.sub-test {
  border-style: dashed;
  border-color: var(--border-strong);
}

.sub-test__text {
  margin: var(--s2) 0 var(--s3);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-normal);
}

/* Переключатель «напоминать» в строке добавки: колокольчик + тумблер.
   Без времени приёма — приглушён: напоминать некогда. */
.sup-item__remind {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
  min-height: var(--tap-min);
  padding: 0 var(--s1);
  color: var(--muted);
  cursor: pointer;
}

.sup-item__remind.is-disabled {
  opacity: .45;
  cursor: default;
}

.sup-item__remind-icon {
  display: inline-flex;
}

.sup-item__remind:has(:checked) {
  color: var(--accent-text);
}

/* Комментарий ИИ к текущему набору добавок. */
.sup-ai-current {
  margin: var(--s3) 0;
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.sup-ai-current p {
  margin: var(--s1) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text);
}

/* Время приёма в строке добавки — кнопка: тап открывает выбор времени. */
.sup-item__time {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.sup-item__time.is-empty {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.sup-item__time-input {
  width: 128px;
  min-height: 36px;
  line-height: 34px;
}

/* ---------- Документы и согласия (раздел «Данные») ---------- */
.acc-docs {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s3);
}

.acc-doc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s2) 0;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: var(--fw-medium) var(--fs-body) / var(--lh-normal) var(--font-body);
  text-align: left;
  cursor: pointer;
}

.acc-doc-link:first-child {
  border-top: none;
}

.acc-doc-link svg {
  flex: none;
  color: var(--muted);
}

.acc-doc-link:active {
  color: var(--accent-text);
}

.acc-consent-note {
  margin: var(--s2) 0 var(--s4);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ---------- Оплата: привязанные карты ---------- */
.acc-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
}

.acc-card:first-child {
  border-top: none;
  padding-top: 0;
}

.acc-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.acc-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.acc-card__meta,
.acc-cards__empty,
.acc-cards__note {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.acc-cards__empty {
  margin: 0;
}

.acc-cards__note {
  margin: var(--s2) 0 0;
}

.acc-card__unbind {
  color: var(--danger);
}

/* Экран подписки: строка про автопродление под датой окончания. */
.sub-status__autopay {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}