/* Полоса «Сборка меню» под недельной сеткой. Владелец: таск 31.

   Своих цветов файл не заводит: всё из токенов styles.css. Красное поле есть
   ровно у одного правила — объяснение высокого риска (--risk / --risk-soft),
   и это единственное, подо что акцент зарезервирован.

   Раскладка макета (нижняя часть 02-desktop-nedelya): слева — чей это шаг
   и почему он рискованный, справа — блюда, цель и переходы, между ними линия. */

.assembly-grid {
  display: grid;
  gap: var(--gap-lg);
  padding: var(--gap-lg);
}

/* ЯКОРЬ 900 — та же граница, что у сайдбара в styles.css: на широком экране
   полоса раскладывается в две колонки, до него — в одну. Своей границы экран
   не заводит, их в проекте ровно две. */
@media (min-width: 900px) {
  .assembly-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .assembly-choice {
    padding-left: var(--gap-lg);
    border-left: 1px solid var(--border);
  }
}

.assembly-about,
.assembly-choice,
.assembly-done {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.assembly-done { padding: var(--gap-lg); }

/* Заголовок принимает фокус программно (tabIndex = -1): смена шага иначе проходит
   молча, и читалка о ней не скажет. Контур с него не снимается — в этом файле
   вообще нет правила, снимающего фокус (styles.css, «Убирать системный контур
   можно только тому, кто рисует свой»). */
.assembly-title { margin: 0; }

.assembly-built { color: var(--ink-2); }

/* ---------------------------- объяснение риска ---------------------------- */

.assembly-reason {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  color: var(--ink);
}

.assembly-reason.is-high { background: var(--risk-soft); }

.assembly-reason-mark { color: var(--risk); }

.assembly-reason-label { font-weight: 600; }

.assembly-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.assembly-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.assembly-meta-mark { color: var(--ink-3); }

/* --------------------------- правки приёма пищи ---------------------------
   Риск вручную и место. Отделены линией от объяснения риска: выше — что
   посчитал домен, ниже — чем это перебивают. Своих цветов у блока нет,
   поля берут общий вид форм из styles.css. */

.assembly-tune {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--border);
}

/* Поле не растягивается на всю колонку: выбор из трёх слов во всю ширину
   читается как поломка, а не как поле. Та же мера, что у «Пересобрать». */
.assembly-field { max-width: 420px; }

/* Кнопка возврата к расчётному риску прижата влево: растянутая на поле,
   она выглядела бы главным действием шага, а главное здесь — «Дальше». */
.assembly-reset { align-self: flex-start; }

.assembly-tune-hint { font-size: 13px; }

/* ------------------------------ выбор блюда ------------------------------ */

.assembly-options {
  display: grid;
  gap: 8px;
}

.assembly-option {
  display: grid;
  gap: 4px;
  width: 100%;
  /* Мишень: карточка блюда нажимается пальцем и на 393 px тоже. */
  min-height: var(--tap);
  padding: 10px 12px;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: 400 var(--fs-body)/1.4 var(--font-text);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.assembly-option:hover {
  background: var(--surface-2);
  border-color: var(--ink-3);
}

/* Выбранное — заливкой, как активный чип: акцент занят риском. */
.assembly-option.is-chosen {
  color: var(--sage-deep);
  background: var(--sage-soft);
  border-color: var(--sage);
}

@media (prefers-color-scheme: dark) {
  /* На тёмном листе --sage-deep уходит в фон плашки, и текст пропадает. */
  .assembly-option.is-chosen { color: var(--sage); }
}

.assembly-option-name { font-weight: 600; }

.assembly-option-line {
  font: 400 var(--fs-caption)/1.45 var(--font-caption);
  color: var(--ink-2);
}

.assembly-option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.assembly-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
}

/* Значок в потоке строки: без inline-flex он садится на базовую линию
   и разъезжает подпись по вертикали. */
.assembly-tag-mark { display: inline-flex; }

/* Внутри выбранной карточки подписи берут её цвет: --ink-2 на --sage-soft
   держится на грани читаемости, а второго зелёного в палитре нет. */
.assembly-option.is-chosen .assembly-option-line,
.assembly-option.is-chosen .assembly-tag { color: inherit; }

/* ------------------------------- порции -------------------------------
   Степпер стоит вплотную к цели по КБЖУ: они отменяют друг друга (смена
   порций снимает цель), и видно это должно быть сразу, а не по факту. */

/* Подпись рядом со степпером длинная, и в 420 px она ломается пополам —
   этому полю ширину не режем. */
.assembly-portions { max-width: none; }

.assembly-portions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Подсказка отдаёт степперу его ширину и забирает остаток строки; не хватило
   двенадцати знаков — уходит на свою строку целиком. */
.assembly-portions-row .assembly-tune-hint { flex: 1 1 12ch; }

/* ---------------------------- цель по КБЖУ ---------------------------- */

.assembly-target {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assembly-target-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* ЯКОРЬ 600 — та же граница, что у режима «день» в недельной сетке.
   Четыре поля в 393 px становятся четырьмя колонками по 70 px, и цифра
   в них не помещается. */
@media (max-width: 600px) {
  .assembly-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assembly-grid,
  .assembly-done { padding: var(--gap); }
}

.assembly-target-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Ведущее поле — то, по которому домен подберёт порции. Обводка, а не цвет:
   цветом её было бы не отличить от отказа поля. */
.assembly-target-input.is-lead {
  border-width: 2px;
  border-color: var(--ink);
}

.assembly-target-hint { font-size: 13px; }

.assembly-target-note { color: var(--ink); }

/* ------------------------------- переходы ------------------------------- */

.assembly-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Строка «дальше идти некуда» занимает свой ряд: приписанная сбоку к кнопкам,
   она читается как их подпись. */
.assembly-actions .assembly-hint { flex: 1 1 100%; }

.assembly-button-mark { display: inline-flex; }

/* ------------------------------ меню собрано ------------------------------ */

.assembly-done-plate {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.assembly-done-mark { display: inline-flex; }

.assembly-pick { max-width: 420px; }