/* Анкета — мастер по шагам. Внешний вид карточек, кнопок-вариантов и чисел
   прежний; поменялись раскладка (один шаг на экран, «Назад · Дальше» —
   в самой карточке шага) и роли
   цветов: красный — только главная кнопка, выбранное — золото, фокус —
   светлое кольцо, ошибка — красная рамка и текст (токены в css/app.css). */

/* --cookie-h — высота баннера cookie у низа окна (считает quiz.js):
   на столько удлиняется страница, чтобы строку «Дальше» в конце шага
   можно было докрутить до места над баннером */
body[data-page="quiz"]{--cookie-h:0px;padding-bottom:var(--cookie-h)}
/* красный «+» связи — только на страницах сайта: в анкете он стоял прямо
   на кнопке «Дальше» */
body[data-page="quiz"] .fab{display:none}

.head{padding:34px 0 22px}
.quiz h1{font-family:var(--fd);font-weight:800;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.045em;
  line-height:1.05;margin:0 0 12px}
.lede{color:var(--fg-muted);max-width:56ch;margin:0;font-size:15px}
/* после первого шага вступление не повторяем — остаётся дорожка шагов */
body[data-qstep]:not([data-qstep="1"]) .quiz .lede{display:none}
body[data-qstep]:not([data-qstep="1"]) .quiz .head{padding-top:22px}
body[data-qstep]:not([data-qstep="1"]) .quiz h1{font-size:clamp(20px,2.4vw,24px);margin-bottom:0}

/* дорожка шагов: пройденные нажимаются, текущий — ярким золотом */
.steps-bar{display:flex;gap:8px;margin:22px 0 0}
.steps-bar button{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:6px 0 4px;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit;border-radius:6px}
.steps-bar button:disabled{cursor:default}
.steps-bar i{height:3px;border-radius:2px;background:var(--line-2);transition:.25s}
.steps-bar .done i{background:rgb(200 162 74 / .55)}
.steps-bar .on i{background:var(--gold-hi)}
.steps-bar span{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps-bar .done span{color:var(--fg-muted)}
.steps-bar .on span{color:var(--fg)}
.steps-bar button:not(:disabled):not(.on):hover span{color:var(--gold-hi)}
.steps-bar button:focus-visible{outline:none;box-shadow:var(--focus)}

/* у общего .card из app.css свой внутренний отступ 24px — в анкете у
   карточки шапка и тело со своими полями, и отступ удваивался: черта под
   заголовком начиналась не от края карточки */
.quiz .card{padding:0;border-radius:var(--r-m);margin-bottom:16px;overflow:clip}
.card[hidden]{display:none}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line-1)}
.card-n{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;color:var(--gold-hi);
  padding:5px 10px;border-radius:999px;background:rgb(200 162 74 / .10);border:1px solid rgb(200 162 74 / .22)}
.card-t{font-family:var(--fd);font-weight:600;font-size:15.5px;letter-spacing:-.02em}
.card-hint{margin-left:auto;font-size:12px;color:var(--fg-dim)}
/* заголовок шага получает фокус после «Дальше» — рамка ему не нужна */
.card-t[tabindex="-1"]:focus,.slide-t[tabindex="-1"]:focus,.build-fail b:focus{outline:none}
.card-body{padding:22px}
/* Один ритм на всю анкету. Отступ задаёт ВЕРХ следующего блока:
   подпись → 10 → элемент управления → 20 → следующая подпись;
   пояснение прижимается к тому, что объясняет, — 8. */
.card .card-body>*{margin-top:0;margin-bottom:0}
.card .card-body>*+*{margin-top:20px}
.card .card-body>.sub-label+*{margin-top:10px}
.card .card-body>.slide-hint{margin-top:8px}
.card .card-body>[hidden]{display:none}

/* варианты ответа: выбранное — золото, красный остаётся главной кнопке */
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{border:1px solid var(--line-3);background:rgb(255 255 255 / .03);color:var(--fg-muted);
  font-family:var(--fu);font-size:13.5px;padding:12px 20px;cursor:pointer;border-radius:var(--r-s);
  transition:.16s}
.opt:hover{border-color:var(--line-4);color:var(--fg);background:rgb(255 255 255 / .06);transform:translateY(-1px)}
.opt[aria-pressed="true"]{border-color:var(--select-line);color:var(--select-fg);font-weight:600;
  background:var(--select-bg);box-shadow:0 1px 0 rgb(255 255 255 / .08) inset}
.opt:focus-visible{outline:none;box-shadow:var(--focus)}
.sub-label{font-size:12.5px;color:var(--fg-dim);margin:0 0 10px;display:flex;align-items:center;gap:4px}

/* уровни подготовки: расшифровка — второй строкой в самой кнопке */
.opts.lv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.opts.lv .opt{text-align:left;padding:11px 16px;line-height:1.35;display:flex;flex-direction:column;
  justify-content:flex-start}
.opt em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--fg-dim);margin-top:3px}
.opt[aria-pressed="true"] em{color:var(--fg-muted)}
/* уровень не учтём при 0–1 тренировке — предупреждение, не ошибка ввода */
.lv-note{padding:10px 14px;border-left:2px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;
  background:rgb(200 162 74 / .08);color:var(--fg);font-size:13px;line-height:1.55}

/* ── подсказка (i): один компонент на всю анкету ───────────────────── */
.tip{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;padding:0;margin:-6px 0;
  border:0;border-radius:50%;background:none;color:var(--fg-dim);cursor:pointer;transition:.15s}
.tip .ti{width:17px;height:17px}
.tip:hover,.tip[aria-expanded="true"]{color:var(--gold-hi);background:rgb(255 255 255 / .06)}
.tip:focus-visible{outline:none;box-shadow:var(--focus)}
.tip-box{position:fixed;z-index:70;padding:11px 14px;border-radius:var(--r-s);
  background:var(--ink-3);border:1px solid var(--line-3);box-shadow:0 14px 40px rgb(0 0 0 / .55);
  font-size:13px;line-height:1.55;color:var(--fg)}
.tip-box[hidden]{display:none}

/* степперы */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
/* Подпись забирает всю лишнюю высоту, кнопки ± прижаты к низу: иначе
   «Тренировок в неделю» в две строки сдвигало ряд у соседних полей. */
.num{border:1px solid var(--line-2);background:rgb(255 255 255 / .03);border-radius:var(--r-s);
  padding:13px 15px;display:flex;flex-direction:column}
.num-lab{display:flex;align-items:flex-start;gap:4px;margin-bottom:9px;flex:1}
.num label{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);flex:1;min-width:0}
.num-lab .tip{margin:-7px -6px -7px 0}
.num-row{display:flex;align-items:center;gap:9px}
.num-btn{width:32px;height:32px;flex:none;border:1px solid var(--line-3);border-radius:var(--r-s);
  background:rgb(255 255 255 / .04);color:var(--fg-muted);font-size:17px;line-height:1;cursor:pointer;transition:.15s}
.num-btn:hover{border-color:var(--line-4);color:var(--fg);background:rgb(255 255 255 / .08)}
.num-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.num input,.budget-row input{flex:1;min-width:0;background:rgb(255 255 255 / .04);border:1px solid var(--line-2);
  border-radius:var(--r-s);padding:5px 4px;color:var(--fg);cursor:text;transition:.15s;
  font-family:var(--fm);font-size:21px;font-weight:500;text-align:center;-moz-appearance:textfield}
.num input:hover,.budget-row input:hover{border-color:var(--line-4);background:rgb(255 255 255 / .06)}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button,.budget-row input::-webkit-outer-spin-button,.budget-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num input:focus,.budget-row input:focus{outline:none;border-color:var(--focus-line);box-shadow:var(--focus)}
.num input::placeholder,.budget-row input::placeholder{color:var(--fg-ghost);font-size:17px}
/* поле, из-за которого отказали, помечено — иначе «проверьте возраст»
   приходится искать глазами по всей карточке */
.num input.bad{border-color:var(--error-line);background:var(--error-bg)}

.slide-hint{font-size:12.5px;color:var(--fg-dim)}

/* свой выбор даты старта */
#startPick{scroll-margin-bottom:calc(16px + var(--cookie-h))}
.cal-pick{padding:14px;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:rgb(255 255 255 / .03);width:100%;max-width:340px}
.cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cal-month{flex:1;text-align:center;font-family:var(--fd);font-weight:600;font-size:13.5px}
.cal-arrow{width:28px;height:28px;border-radius:var(--r-s);border:1px solid var(--line-3);
  background:rgb(255 255 255 / .04);color:var(--fg-muted);cursor:pointer;font-size:15px;line-height:1}
.cal-arrow:hover:not(:disabled){border-color:var(--line-4);color:var(--fg)}
.cal-arrow:focus-visible{outline:none;box-shadow:var(--focus)}
.cal-arrow:disabled{opacity:.3;cursor:default}
.cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow span{font-family:var(--fm);font-size:9.5px;color:var(--fg-ghost);text-align:center;padding-bottom:4px}
.cal-d{position:relative;height:32px;border:1px solid transparent;border-radius:var(--r-s);background:none;cursor:pointer;
  font-family:var(--fm);font-size:12px;color:var(--fg-muted);transition:.14s}
.cal-d:hover:not(:disabled){border-color:var(--line-4);color:var(--fg)}
.cal-d:focus-visible{outline:none;box-shadow:var(--focus)}
/* «сегодня» — красной точкой, как в календаре кабинета; выбранный день — золото */
.cal-d.today{color:var(--fg)}
.cal-d.today::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--red)}
.cal-d.on{background:var(--select-bg);border-color:var(--select-line);color:var(--select-fg);font-weight:600}
.cal-d.off{opacity:.25;cursor:default}
.cal-d.empty{cursor:default}
.cal-pick-foot{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line-1);font-size:11.5px;color:var(--fg-ghost)}
.cal-today{margin-left:auto;background:none;border:0;color:var(--gold-hi);cursor:pointer;
  font-family:var(--fu);font-size:11.5px;border-bottom:1px solid rgb(200 162 74 / .4)}
.cal-today:focus-visible{outline:none;box-shadow:var(--focus)}
/* та же геометрия, что у полей формы */
.slide-find{width:100%;padding:12px 14px;border-radius:var(--r-s);
  border:1px solid var(--line-3);background:rgb(255 255 255 / .03);color:var(--fg);
  font-family:var(--fu);font-size:16px;line-height:normal}
/* --fg-dim, а не --fg-ghost: у бледного контраст 3,8:1 при норме 4,5 */
.slide-find::placeholder{color:var(--fg-dim)}
.slide-find:focus{outline:none;border-color:var(--focus-line);box-shadow:var(--focus)}
.slide-need{font-size:12.5px;color:var(--fg-dim)}
/* ── группы продуктов и приёмы блюд: список с раскрытием ─────────────
   Все 21 группа — на одном экране заголовками; открыта одна. Ненужную
   группу просто не открывают — это и есть быстрый пропуск. */
.grps{border-top:1px solid var(--line-1)}
.grp{border-bottom:1px solid var(--line-1)}
.grp-head{width:100%;display:flex;align-items:center;gap:14px;padding:14px 4px;min-height:56px;
  background:none;border:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-s)}
.grp-head:hover .grp-t{color:var(--gold-hi)}
.grp-head:focus-visible{outline:none;box-shadow:var(--focus)}
.grp-t{flex:1;min-width:0;font-family:var(--fd);font-weight:600;font-size:15px;letter-spacing:-.02em;transition:.15s}
.grp-t em{display:block;font-family:var(--fu);font-style:normal;font-weight:400;font-size:12.5px;
  letter-spacing:0;color:var(--fg-dim);margin-top:2px}
.grp-n{font-family:var(--fm);font-size:11.5px;color:var(--fg-dim);white-space:nowrap}
.grp-n.on{color:var(--gold-hi)}
/* обязательный минимум группы виден и в свёрнутом виде */
.grp-n.req{color:var(--gold-hi);border:1px solid rgb(200 162 74 / .4);background:rgb(200 162 74 / .08);
  border-radius:var(--r-pill);padding:3px 9px}
.grp .chev{width:18px;height:18px;flex:none;color:var(--fg-dim);transition:transform .2s}
.grp.open .chev{transform:rotate(180deg)}
.grp-body{padding:2px 0 18px}
.grp-body[hidden]{display:none}
.grp-tools{display:flex;align-items:flex-start;gap:12px 18px;margin-bottom:12px}
.grp-need{flex:1;margin:0;font-size:12.5px;color:var(--fg-dim)}
.grp-need.req{padding:11px 14px;border-left:2px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;
  background:rgb(200 162 74 / .08);color:var(--fg);font-size:13px;line-height:1.55}
.grp-need.req b{font-family:var(--fm);color:var(--gold-hi);font-weight:600}
.grp-all{margin-left:auto;white-space:nowrap;min-height:32px}
.grp-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:14px}
.grp-foot .btn .ti,.mc-go .btn .ti{width:16px;height:16px}
.grp-rest{font-size:12.5px;color:var(--fg-dim)}

/* поиск сразу по всем группам: у находки — название её группы */
.found-n{margin:0 0 12px;font-size:12.5px;color:var(--fg-dim)}

/* итог шага продуктов — в конце списка. Недобор — золото (это не ошибка
   ввода); нажали «К блюдам», не добрав, — отказ, красная рамка */
.meal-check{font-size:13px;line-height:1.6;color:var(--fg);
  border-left:2px solid rgb(200 162 74 / .6);background:rgb(200 162 74 / .08);
  padding:12px 14px;border-radius:0 var(--r-s) var(--r-s) 0}
.meal-check[hidden]{display:none}
.meal-check p{margin:0}
.meal-check p+p{margin-top:4px}
.meal-check .mc-lead{margin-top:10px;font-size:12.5px;color:var(--fg-muted)}
.meal-check.ok{display:flex;align-items:center;gap:10px;color:var(--fg-muted);
  border-left-color:var(--line-3);background:rgb(255 255 255 / .03)}
.meal-check.ok .ti{width:18px;height:18px;flex:none;color:var(--gold-hi)}
.meal-check.bad{border-left-color:var(--error-line);background:var(--error-bg);color:var(--error)}
.meal-check.knock{animation:knock .4s}
.mc-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@keyframes knock{0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* плитки продуктов и блюд */
/* align-content:start — в группе из трёх продуктов строки сетки растягивались
   на всю min-height, и плитки выходили втрое выше обычных */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:9px;align-content:start}
.chip{border:1px solid var(--line-3);background:rgb(255 255 255 / .03);color:var(--fg-muted);
  font-family:var(--fu);font-size:13px;padding:11px 14px;cursor:pointer;border-radius:var(--r-s);
  transition:.16s;display:flex;align-items:center;gap:8px;text-align:left;min-height:44px}
.chip .name{flex:1;min-width:0}
/* обёртка плитки: рядом с плиткой может стоять значок (i) — отдельной
   кнопкой поверх правого края, чтобы нажатие на него не отмечало продукт */
.chip-w{position:relative;display:grid}
.chip-w.has-tip .chip{padding-right:44px}
.chip-w>.tip{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin:0;width:30px;height:30px}
.chip.dish{align-items:flex-start}
.chip .name em{display:block;font-style:normal;font-size:11.5px;color:var(--fg-dim);margin-top:3px}
.chip[aria-pressed="true"] .name em{color:var(--fg-muted)}
/* сообщение вместо плиток — во всю ширину, а не в первую ячейку сетки */
.chips .slide-need{grid-column:1/-1;margin:0}
.chip:hover{border-color:var(--line-4);color:var(--fg);background:rgb(255 255 255 / .06);transform:translateY(-1px)}
.chip .box{width:13px;height:13px;border:1px solid var(--line-4);border-radius:4px;flex:none;position:relative}
.chip[aria-pressed="true"]{border-color:var(--select-line);color:var(--select-fg);background:var(--select-bg)}
.chip[aria-pressed="true"] .box{background:var(--gold);border-color:var(--gold)}
.chip[aria-pressed="true"] .box::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;
  border:solid var(--ink-0);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chip .kcal{font-family:var(--fm);font-size:11px;color:var(--fg-dim);white-space:nowrap;flex:none}
/* метка непереносимости — сноска, а не акцент: глютен стоит у половины круп */
.chip .flag{font-size:10.5px;color:var(--fg-dim);border:1px solid var(--line-3);
  border-radius:5px;padding:1px 5px;line-height:1.5;white-space:nowrap}
.chip[aria-pressed="true"] .flag{color:var(--fg-dim);border-color:var(--line-4)}
.chip:focus-visible{outline:none;box-shadow:var(--focus)}

/* сводка перед сборкой */
.sum{margin:0}
.sum-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-1)}
.sum-row:first-child{padding-top:0}
.sum-k{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.sum-v{margin:0;min-width:0;font-size:14px;color:var(--fg-muted);line-height:1.6}
.sum-v b{font-family:var(--fm);font-weight:500;color:var(--gold-hi)}
/* «Изменить» — тихая кнопка общего канона, одинаковая во всех строках */
.sum-edit{min-width:132px;align-self:start;margin-top:-6px}
.sum-edit .ti{width:15px;height:15px}
/* отступ даёт пробел перед кнопкой: при переносе на новую строку он
   исчезает, и «Показать все» встаёт ровно по левому краю */
.sum-more{font-size:13px}
.sum-all{margin-top:10px;padding:10px 14px;border-radius:var(--r-s);background:rgb(255 255 255 / .03);
  border:1px solid var(--line-1)}
.sum-all[hidden]{display:none}
.sum-all p{margin:0;font-size:13px;line-height:1.55}
.sum-all p+p{margin-top:8px}
.sum-all span{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:2px}
.status{font-size:13px;color:var(--fg-dim)}
.status:empty{display:none}
.status.err{color:var(--error)}

/* отказ пишется в той карточке, из-за которой он случился */
.card-err{font-size:13px;color:var(--error);line-height:1.6;
  border-left:2px solid var(--error-line);background:var(--error-bg);
  padding:11px 14px;border-radius:0 var(--r-s) var(--r-s) 0;animation:knock .4s}
/* не собрались дни плана: причина, совет и дорога обратно к продуктам */
.build-fail b{display:block;font-size:14px;color:var(--fg)}
.build-fail ul{margin:8px 0 0;padding-left:18px;color:var(--fg-muted)}
.build-fail p{margin:8px 0 0;color:var(--fg-muted)}
.fail-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}

/* ── строка «Назад · Дальше» — последняя в карточке шага ─────────────
   Всегда сразу под последним полем, на любой длине шага: Кирилл просил не
   прибивать кнопку к краю окна далеко от формы. Прилипшая к низу окна
   строка на телефоне с баннером cookie к тому же закрывала варианты цели. */
.step-nav{display:flex;align-items:center;gap:12px;
  padding:16px 22px 18px;border-top:1px solid var(--line-2)}
.step-nav #fwd{margin-left:auto;min-width:190px}
.step-nav #back{min-width:110px}
.step-nav .btn{white-space:nowrap}
.step-nav .btn[hidden]{display:none}
.step-nav .btn[disabled]{border-color:transparent}

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

@media(max-width:720px){
  .head{padding:24px 0 16px}
  .lede{font-size:14px}
  .steps-bar{gap:5px;margin-top:16px}
  /* заглавные по 8px не читались: на телефоне подписи обычными буквами
     и кнопки в полный палец высотой */
  .steps-bar button{min-height:44px;justify-content:center}
  .steps-bar span{font-family:var(--fu);font-size:11.5px;letter-spacing:0;text-transform:none}
  body[data-qstep]:not([data-qstep="1"]) .quiz h1{display:none}
  body[data-qstep]:not([data-qstep="1"]) .quiz .steps-bar{margin-top:0}
  body[data-qstep]:not([data-qstep="1"]) .quiz .head{padding:14px 0 10px}
  /* подпись заголовка («отмечено 12 продуктов») на телефоне уходит на
     вторую строку целиком */
  .card-head{padding:14px 16px;gap:9px;flex-wrap:wrap}
  .card-hint{margin-left:0;width:100%;font-size:11.5px}
  /* постоянные подсказки под заголовком на телефоне не нужны — остаются
     только счётчики отмеченного на шагах «Продукты» и «Блюда» */
  .card[data-step="1"] .card-hint,.card[data-step="2"] .card-hint,.card[data-step="check"] .card-hint{display:none}
  .card-body{padding:16px}
  .card .card-body>*+*{margin-top:16px}
  .card .card-body>.sub-label+*{margin-top:8px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .nums>.num:last-child:nth-child(odd){grid-column:1/-1}
  .num{padding:10px}
  .num-row{gap:6px}
  .num-btn{width:34px;height:40px}
  .num input{font-size:17px;padding:8px 4px}
  .opt{padding:11px 15px;font-size:13px}
  .opts.lv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts.lv .opt{padding:10px 12px}
  .chips{grid-template-columns:1fr}
  .grp-head{padding:12px 2px}
  .grp-t{font-size:14px}
  .grp-tools{flex-wrap:wrap}
  .grp-need.req{flex:1 1 100%}
  .cal-arrow{width:40px;height:40px}
  .cal-d{height:40px}
  .cal-today{min-height:40px;padding:0 2px}
  .sum-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
  .sum-edit{min-width:0;min-height:40px;margin-top:0}
  .sum-v{grid-column:1 / -1;grid-row:2;font-size:13.5px}
  .step-nav{padding:14px 16px 16px;gap:10px}
  .step-nav #back{min-width:0;padding-left:18px;padding-right:18px}
  .step-nav #fwd{min-width:0;flex:1}
  .step-nav .btn{min-height:46px}
}

/* На телефоне два столбца степперов не сходятся: кнопки ± по 44 оставляют
   полю слишком мало. Значит, столбец один. */
@media(max-width:480px){
  /* поле — одной строкой: подпись слева, «− число +» справа. В столбик
     пять полей занимали полэкрана и уводили шаг на второй экран */
  .nums{grid-template-columns:1fr;gap:8px}
  .nums>.num:last-child:nth-child(odd){grid-column:auto}
  .num{flex-direction:row;align-items:center;gap:10px;padding:3px 4px 3px 12px}
  .num label{margin:0;flex:1;min-width:0;line-height:1.35}
  .num-lab{margin:0;align-items:center;min-width:0}
  .num-lab .tip{margin:0}
  .num-row{gap:6px;flex:none;width:172px}
  .num-btn{width:44px;height:44px;font-size:19px}
  .cal-pick{padding:8px;max-width:none}
  .cal-dow,.cal-days{gap:3px}
}

/* сводка: норма от тренера — без «Изменить» (меняет тренер); не подошла —
   золотая подсказка, как предупреждения кабинета */
.sum-norm[hidden]{display:none}
.sum-norm .sum-v b{font-family:var(--fm);font-weight:500;color:var(--gold-hi)}
.sum-norm.warn-row{border-left:2px solid var(--gold);padding-left:12px}

/* сводка: норма — расчётная, своя или тренера (FR-PLAN-16). Поля своей
   нормы — те же степперы, что на шаге «Параметры»; под ними — калории из
   граммов и проверка. Ошибка — красная рамка поля и красный текст,
   предупреждение (мало белка) — золотой текст */
.sum-norm .norm-src{display:block;font-size:12.5px;color:var(--fg-dim);line-height:1.55;margin-top:4px}
.sum-edit.on{border-color:var(--select-line);color:var(--select-fg)}
.sum-edit[hidden]{display:none}
.norm-box{grid-column:2 / -1;margin-top:6px}
.norm-box[hidden]{display:none}
.norm-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
.norm-kcal{margin:12px 0 0;font-size:13px;color:var(--fg-muted)}
.norm-kcal b{font-family:var(--fm);font-weight:500;color:var(--gold-hi)}
.norm-msg{margin:8px 0 0;font-size:13px;line-height:1.55}
.norm-msg[hidden]{display:none}
.norm-msg.err{color:var(--error)}
.norm-msg.warn{color:var(--gold-hi)}
.norm-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.norm-hint{font-size:12px;color:var(--fg-dim)}
@media(max-width:720px){
  .norm-box{grid-column:1 / -1;grid-row:3}
  .norm-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nums.norm-nums>.num:last-child:nth-child(odd){grid-column:auto}
  .norm-act .btn{min-height:40px}
}
@media(max-width:480px){
  .norm-nums{grid-template-columns:1fr}
}

/* сводка: бюджет на продукты (FR-BUD-03) — та же строка, что норма: сумма
   степпером, регион — поиск по списку Росстата; выбранное — золотом */
.sum-opt{display:block;margin-top:4px;letter-spacing:.08em;color:var(--fg-dim);opacity:.8}
.sum-budget .norm-src{display:block;font-size:12.5px;color:var(--fg-dim);line-height:1.55;margin-top:4px}
.budget-warn{display:block;margin-top:6px;font-size:13px;color:var(--gold-hi);line-height:1.55}
.budget-box{grid-column:2 / -1;margin-top:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.budget-box[hidden]{display:none}
.budget-box .norm-act{grid-column:1 / -1;margin-top:0}
.budget-f{min-width:0}
.budget-f>label{display:block;font-size:12.5px;color:var(--fg-muted);margin-bottom:6px}
.budget-row{width:100%;max-width:280px}
.budget-row input{flex:1;min-width:0}
.budget-day,.region-now{margin:6px 0 0;font-size:12.5px;color:var(--fg-dim)}
.region-find{width:100%;min-height:44px;padding:0 14px;border-radius:var(--r-s);border:1px solid var(--line-2);
  background:rgb(255 255 255 / .03);color:var(--fg);font:inherit;font-size:14px}
.region-find:focus-visible{outline:none;box-shadow:var(--focus);border-color:var(--select-line)}
.region-list{margin-top:6px;display:grid;gap:4px;max-height:264px;overflow:auto}
.region-list[hidden]{display:none}
.region-opt{text-align:left;min-height:40px;padding:8px 12px;border-radius:var(--r-s);border:1px solid var(--line-1);
  background:rgb(255 255 255 / .02);color:var(--fg-muted);font:inherit;font-size:13.5px;cursor:pointer}
.region-opt:hover{border-color:var(--line-2);color:var(--fg)}
.region-opt.on{border-color:var(--select-line);background:var(--select-bg);color:var(--select-fg)}
.region-none{margin:0;font-size:12.5px;color:var(--fg-dim)}
@media(max-width:720px){
  .budget-box{grid-column:1 / -1;grid-row:3;grid-template-columns:1fr}
  .budget-row{max-width:none}
}