/* Toast & Nav */
/* Пробелы вокруг «+» в calc() обязательны по спецификации: calc(66px+10px)
   для браузера невалиден, правило целиком отбрасывается, bottom становится
   auto — и тост уезжал под самый верх экрана, где в установленном PWA его
   закрывает системная строка состояния (status-bar-style: black-translucent).
   Из-за этого не было видно НИ ОДНОГО уведомления во всём приложении. */
/* скрытый тост уводим не только сдвигом: сдвига мало — он оставался лежать поверх нижнего меню */
.toast{position:fixed;bottom:calc(var(--nh) + 10px);left:50%;transform:translateX(-50%) translateY(60px);background:var(--color-toast-surface);color:var(--color-text-on-accent);padding:8px 15px;border-radius:var(--radius-chip);font-size:12.5px;transition:transform .3s,opacity .3s,visibility 0s linear .3s;z-index:600;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;transition:transform .3s,opacity .3s,visibility 0s}
/* Пробовали фиолетовую навигацию — не прижилась, вернули белую. */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--nh);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;z-index:200}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--color-text-muted-2);font-size:10.5px;font-weight:500;border:none;background:none;font-family:var(--ff);padding-bottom:4px;position:relative;transition:color .15s}
/* Ховеры и нажатия из макета. Ховер — только там, где есть настоящий курсор:
   на телефоне :hover залипает после тапа, поэтому под @media (hover:hover). */
@media (hover:hover){
  .ic:hover,.dc:hover,.f-card:hover,.instr-card:hover,.profcard:hover,.kitcard:hover,.patcard:hover,.tplcard:hover,.familyOpt:hover{transform:translateY(-1px)}
  .rc:hover{background:var(--color-surface-hover)}
  .svb:hover,.loginBtn:hover:not(.sec),.kitadd:hover{background:var(--color-accent-hover)}
}
.ic,.dc,.f-card,.instr-card,.profcard,.kitcard,.patcard,.tplcard,.familyOpt{transition:transform .15s,box-shadow .15s}
.nb.active{color:var(--color-accent-text);font-weight:600}.nbic{font-size:21px;line-height:1;transition:filter .15s}
/* Полоски-индикатора в макете нет: активная вкладка выделяется цветом,
   а неактивные иконки приглушаются. */
.nb:not(.active) .nbic{filter:grayscale(.7) opacity(.75)}
.nbbdg{position:absolute;top:5px;right:calc(50% - 19px);background:var(--color-badge-count);color:var(--color-text-on-accent);font-size:9.5px;font-weight:700;border-radius:var(--radius-badge);padding:1px 5px;min-width:15px;text-align:center}
.empty{text-align:center;padding:36px 20px;color:var(--color-text-muted)}
/* ── Раздел «Еда» ── */
.foodtab{flex:1;min-width:fit-content;padding:8px 6px;border:none;background:transparent;border-radius:11px;font-family:var(--ff);font-size:12.5px;font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:all .15s}
.foodtab.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-card)}
.foodpanel{display:none;padding:14px 20px 18px}.foodpanel.active{display:block}
/* сетка: дни вертикально, 3 колонки (завтрак/обед/ужин) — читается на телефоне без зума */
/* класс называется fgrid, а не fg: короткий .fg уже занят группой поля в формах (см. выше) */
.fgrid{display:grid;grid-template-columns:50px 1fr 1fr 1fr;gap:4px}
.fg-h{font-size:10.5px;color:var(--color-text-muted);text-align:center;padding-bottom:2px}
.fg-d{font-size:11.5px;color:var(--color-text-muted);display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.fg-d b{font-weight:700;color:var(--color-text);font-size:12.5px}
.fg-d.today b{color:var(--color-accent-text)}
.fg-c{min-height:44px;border-radius:var(--radius-badge);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;text-align:center;padding:3px 2px;line-height:1.25;color:var(--color-text);border:1px solid transparent}
.fg-c .fw{font-size:9px;opacity:.7;margin-top:1px}
/* ⚠️ ЦВЕТОМ В СЕТКЕ КОДИРУЕТСЯ ТОЛЬКО СРОЧНОСТЬ. Четыре состояния и всё:
     ok  — хватает, действий не нужно
     low — партия кончается, дальше нужно готовить
     out — еды нет
     no  — никто не ест дома, ничего не запланировано
   Тип блюда (суп / гарнир) — иконкой и подписью, партия — названием в ячейке.
   Раньше здесь было шесть подложек по кругу на партию плюс голубой «суп»,
   розовая дыра и оранжевая готовка: пять разных смыслов в одном канале,
   прочитать было нельзя. Пары берём из общей палитры состояний — своя
   палитра для еды разъезжалась бы в тёмной теме отдельно от всего остального. */
.fg-c.ok{background:var(--color-success-surface);border-color:var(--color-success-border-soft);color:var(--color-success-text)}
.fg-c.low{background:var(--color-warning-surface);border-color:var(--color-warning-border-soft);color:var(--color-warning-text)}
.fg-c.out{background:var(--color-danger-surface);border-color:var(--color-danger-border-soft);color:var(--color-danger-text);font-weight:600}
.fg-c.no{border:1px dashed var(--color-border);color:var(--color-text-placeholder);background:transparent}
/* День готовки — событие, а не срочность: подложка нейтральная, отличается
   формой (карточка во всю ширину сетки) и иконкой. */
.fg-ck{grid-column:1/-1;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-badge);padding:7px 9px;margin:1px 0 4px;font-size:11.5px;color:var(--color-text);line-height:1.5}
.fg-ck b{font-weight:700}
/* «варим заранее» и «повар не готовит» — ограничения, а не ошибки: раньше оба
   были красными и читались как «что-то сломалось». */
.fg-note{color:var(--color-text-muted)}
.fg-busy{grid-column:1/-1;font-size:10.5px;color:var(--color-text-muted);padding:0 2px 3px}
/* Сама строка тихая, но имя повара — полноконтрастное: это то, что в ней читают. */
.fg-busy b{color:var(--color-text);font-weight:600}
/* Легенда — как «Обозначения» в календаре, но своими классами: у .cal-legend
   собственные внешние отступы, а .foodpanel уже даёт поля, они бы удвоились. */
/* Одна и та же карточка-подвал под сеткой: запас и легенда. */
.f-legend,.f-stockbox{margin-top:12px;padding:14px 16px;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.f-legend-title,.f-stockbox-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--color-text-muted);margin-bottom:7px}
.f-legend-grid{display:flex;flex-wrap:wrap;gap:6px 12px}
.f-legend-item{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--color-text)}
/* Свотч повторяет форму ячейки сетки, а не кружок календаря: цвет надо читать
   вместе с формой, к которой он относится. */
.f-legend-sw{width:17px;height:13px;border-radius:4px;border:1px solid transparent;flex-shrink:0}
.f-legend-sw.ok{background:var(--color-success-surface);border-color:var(--color-success-border-soft)}
.f-legend-sw.low{background:var(--color-warning-surface);border-color:var(--color-warning-border-soft)}
.f-legend-sw.out{background:var(--color-danger-surface);border-color:var(--color-danger-border-soft)}
.f-legend-sw.no{border:1px dashed var(--color-border)}
.f-legend-ic{font-size:12px;line-height:1}
.f-hero{background:var(--color-tint);border-radius:var(--radius-card);padding:15px 16px;margin-bottom:14px}
.f-hero-top{display:flex;align-items:center;gap:8px}
.f-hero-day{flex:1;min-width:0;font-size:11px;color:var(--color-text-muted)}
/* Чип состояния лежит на лиловой подложке hero, поэтому мягкая заливка
   состояния тут не годится — она бы смешалась с лиловым в грязь. Берём
   поверхность карточки и цветную рамку с текстом. */
.f-chip{flex-shrink:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-chip);padding:2px 9px;font-size:10.5px;font-weight:600;white-space:nowrap}
.f-chip.ok{border-color:var(--color-success-border-soft);color:var(--color-success-text)}
.f-chip.low{border-color:var(--color-warning-border-soft);color:var(--color-warning-text)}
.f-chip.out{border-color:var(--color-danger-border-soft);color:var(--color-danger-text)}
/* Нейтральный ярлык типа: «суп» во вкладке «Что готовим». Раньше был голубым —
   тип блюда цветом не кодируем. */
.f-tag{font-size:10px;background:var(--color-surface-2);color:var(--color-text);border-radius:6px;padding:1px 6px}
/* ── Этап 2: пустые блюда, порции в днях, запас, гости ── */
/* Кнопка-день в сетке. Выглядит как подпись, но кликается: открывает гостей
   и «ест не дома». В режиме просмотра рисуется обычным div без обработчика. */
.fg-d-b{border:none;background:none;font-family:var(--ff);text-align:left;cursor:pointer;padding:0;align-items:flex-start}
.fg-mk{font-size:9px;color:var(--color-text-muted);white-space:nowrap}
/* Тип блюда карточками, а не выпадашкой: при заведении это единственный
   выбор, и он должен читаться с одного взгляда. */
.f-kinds{display:flex;flex-direction:column;gap:6px}
.f-kind{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;background:var(--color-surface);border:1px solid var(--color-border-input);border-radius:var(--radius-control);padding:9px 11px;cursor:pointer;font-family:var(--ff)}
.f-kind.on{border-color:var(--color-accent);background:var(--color-accent-surface)}
.f-kind-ico{grid-row:1/3;font-size:20px;line-height:1}
.f-kind-t{font-size:13.5px;font-weight:600;color:var(--color-text)}
.f-kind-h{font-size:11px;color:var(--color-text-muted);line-height:1.35}
/* Спокойная поясняющая плашка внутри шторок. Не предупреждение — цветом
   срочности не красим. */
.f-note-soft{background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-control);padding:10px 12px;font-size:12px;color:var(--color-text-muted);line-height:1.5;margin-top:10px}
.f-more{cursor:pointer;list-style:none;font-size:12.5px;color:var(--color-accent-text);font-weight:600}
.f-more::-webkit-details-marker{display:none}
.f-more::after{content:' ▾'}
details[open] .f-more::after{content:' ▴'}
/* Вопрос «на сколько дней» — единственный вопрос про объём, который приложение
   вообще задаёт. Дни кнопками: набирать цифру ради одного числа незачем. */
.f-days{margin-top:9px;padding:10px 11px;background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-control)}
.f-days-q{font-size:12.5px;font-weight:600;color:var(--color-text);margin-bottom:7px}
.f-days-row{display:flex;gap:5px;flex-wrap:wrap}
.f-day-btn{flex:1;min-width:34px;border:1px solid var(--color-border-input);background:var(--color-surface);border-radius:10px;padding:8px 0;font-size:13.5px;font-family:var(--ff);color:var(--color-text);cursor:pointer}
.f-day-btn.on{border-color:var(--color-accent);background:var(--color-accent-surface);color:var(--color-accent-text);font-weight:700}
.f-days-h{font-size:11px;color:var(--color-text-muted);margin-top:7px;line-height:1.4}
/* Зелёная сводка в шторке «Приготовила». Роль тут не «состояние дня», а
   пояснительная записка внутри формы, поэтому пара -note, а не -soft: значения
   те же, но роли разные и схлопывать их нельзя. */
.f-ok{background:var(--color-success-surface);border:1px solid var(--color-success-border-note);border-radius:var(--radius-control);padding:9px 11px;font-size:12.5px;color:var(--color-success-text-note);margin-top:10px;line-height:1.5}
/* Запас: по строке на партию, «Кончилось» теперь тут, а не одной кнопкой на всё. */
.f-stock{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--color-border)}
.f-stock:last-child{border-bottom:none;padding-bottom:0}
.f-stock-n{font-size:13px;font-weight:600;color:var(--color-text)}
.f-stock-a{grid-column:1;font-size:11px;color:var(--color-text-muted);line-height:1.4}
.f-stock-x{grid-column:2;grid-row:1/3;background:var(--bg2);border:1px solid var(--color-border-input);border-radius:var(--radius-badge);padding:6px 10px;font-size:12px;font-family:var(--ff);color:var(--color-text);cursor:pointer;white-space:nowrap}
/* Шторка дня: гости и «ест не дома» */
.f-slot{padding:11px 0;border-bottom:1px solid var(--color-border)}
.f-slot:last-of-type{border-bottom:none}
.f-slot-h{font-size:12.5px;font-weight:700;color:var(--color-text);margin-bottom:8px}
.f-guests{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.f-guests-l{flex:1;font-size:12.5px;color:var(--color-text-muted)}
.f-guests-n{min-width:44px;text-align:center;font-size:13px;font-weight:600;color:var(--color-text)}
.f-step{width:32px;height:32px;border:1px solid var(--color-border-input);background:var(--color-surface);border-radius:10px;font-size:17px;line-height:1;font-family:var(--ff);color:var(--color-text);cursor:pointer}
.f-step:disabled{color:var(--color-text-disabled);cursor:default}
.f-eaters{display:flex;flex-wrap:wrap;gap:6px}
.f-eat{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--color-border-input);background:var(--color-surface);border-radius:var(--radius-chip);padding:6px 11px;font-size:12.5px;font-family:var(--ff);color:var(--color-text);cursor:pointer}
.f-eat-ic{font-size:13px;line-height:1}
/* Кто ест из общего котла — акцентом: это то, что влияет на расчёт.
   «Ест своё» и «не дома» одинаково нейтральны: оба не создают потребности. */
.f-eat-common{border-color:var(--color-accent);background:var(--color-accent-surface);color:var(--color-accent-text);font-weight:600}
.f-eat-none{color:var(--color-text-muted)}
/* ── Этап 3: скользящее окно, право не готовить, повара ── */
/* Вчерашняя строка — история, а не план: приглушена, чтобы взгляд начинал
   с сегодня. Цветом состояния не красится вовсе — вчера уже случилось. */
.fg-c.past,.fg-d.past,.fg-ck.past{opacity:.55}
.fg-c.past{background:var(--color-surface-sunken);border-color:var(--color-border)}
/* «Не готовим» — не срочность и не пустота, а решение семьи. Поэтому нейтральная
   заливка и пунктир: цвет состояния тут был бы враньём. */
.fg-c.skip{background:var(--color-surface-sunken);border:1px dashed var(--color-border);color:var(--color-text-muted)}
.f-skip{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;padding:2px 0 8px}
.f-skip input{width:17px;height:17px;flex-shrink:0}
.f-skip.on{color:var(--color-accent-text);font-weight:600}
.f-skip-h{font-size:11.5px;color:var(--color-text-muted);line-height:1.45;padding-bottom:2px}
/* Переключатель «готовит» — кнопка, а не чекбокс: это главное действие карточки. */
.f-toggle{flex-shrink:0;background:var(--bg2);border:1px solid var(--color-border-input);border-radius:var(--radius-chip);padding:6px 12px;font-size:12px;font-family:var(--ff);color:var(--color-text-muted);cursor:pointer;white-space:nowrap}
.f-toggle.on{background:var(--color-accent-surface);border-color:var(--color-accent);color:var(--color-accent-text);font-weight:600}
.f-main-cook{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:9px 0 2px;cursor:pointer}
.f-main-cook input{width:16px;height:16px}
.f-busy-h{font-size:11px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin:11px 0 6px}
.f-wdays{display:flex;gap:4px}
.f-wd{flex:1;min-width:0;border:1px solid var(--color-border-input);background:var(--color-surface);border-radius:9px;padding:7px 0;font-size:12px;font-family:var(--ff);color:var(--color-text);cursor:pointer}
/* Занятый день — предупреждение, а не ошибка: пара warning, не danger. */
.f-wd.on{background:var(--color-warning-surface);border-color:var(--color-warning-border-soft);color:var(--color-warning-text);font-weight:700}
.f-wd:disabled{cursor:default}
.f-dates{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.f-date{display:inline-flex;align-items:center;gap:4px;background:var(--color-warning-surface);border:1px solid var(--color-warning-border-soft);color:var(--color-warning-text);border-radius:var(--radius-chip);padding:4px 6px 4px 10px;font-size:12px;font-weight:600}
.f-date button{border:none;background:none;color:inherit;font-size:12px;cursor:pointer;padding:0 2px;font-family:var(--ff)}
.f-date-add{display:flex;gap:6px}
.f-date-add input{flex:1;min-width:0;border:1px solid var(--color-border-input);border-radius:10px;padding:7px 9px;font-size:12.5px;font-family:var(--ff);color:var(--color-text);background:var(--color-surface)}
.f-date-add button{border:1px solid var(--color-border-input);background:var(--bg2);border-radius:10px;padding:7px 12px;font-size:12.5px;font-family:var(--ff);color:var(--color-text);cursor:pointer;white-space:nowrap}
/* ── Этап 4: предложения вместо приказа ── */
/* Карточки вариантов занимают всю ширину сетки: это главное действие экрана,
   ради него человек сюда и зашёл. */
.f-prop{grid-column:1/-1;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:12px 13px;margin:3px 0 6px;box-shadow:var(--shadow-card)}
.f-prop-h{font-size:11.5px;color:var(--color-text-muted);margin-bottom:9px}
.f-prop-h b{color:var(--color-text)}
.f-prop-card{border:1px solid var(--color-border-input);border-radius:var(--radius-control);padding:10px 11px;margin-bottom:7px}
/* Лидер выделен рамкой, а не цветом состояния: «рекомендуем» — не срочность. */
.f-prop-card.lead{border-color:var(--color-accent);background:var(--color-accent-surface)}
.f-prop-n{font-size:13.5px;font-weight:600;color:var(--color-text);line-height:1.35}
.f-prop-a{font-size:12px;color:var(--color-text-muted);margin-top:2px;line-height:1.4}
/* Обоснование — обязательная часть карточки: без него выбор превращается
   в угадайку. Поэтому оно набрано заметно, а не мелким шрифтом снизу. */
.f-prop-r{font-size:12px;color:var(--color-text);margin-top:6px;line-height:1.4;font-style:italic}
.f-prop-btn{width:100%;margin-top:9px;background:var(--color-accent);color:var(--color-text-on-accent);border:none;border-radius:var(--radius-control);padding:9px;font-size:13px;font-weight:600;font-family:var(--ff);cursor:pointer}
.f-prop-note{font-size:11px;color:var(--color-text-muted);line-height:1.45;margin-top:4px}
/* Дальние дни: только отметка, без блюд. Их расчёт зависит от нерешённых дней
   и был бы ложью, поэтому и подложка приглушённая. */
.fg-ck.later{background:var(--color-surface-sunken);color:var(--color-text-muted);border-style:dashed}
/* Решённый день. Метка словом, а не цветом: «решено» — не состояние срочности. */
.fg-ck.decided{border-color:var(--color-accent-border-soft)}
.f-decided{color:var(--color-accent-text);font-weight:600}
.f-undo{border:none;background:none;color:var(--color-text-muted);font-size:11px;font-family:var(--ff);cursor:pointer;text-decoration:underline;padding:0 2px}
.f-stale{margin-top:10px;padding:11px 13px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);font-size:11.5px;color:var(--color-text-muted);line-height:1.9}
.f-btn{flex:1;background:var(--bg2);border:1px solid var(--color-border-input);border-radius:var(--radius-control);padding:9px;font-size:12.5px;cursor:pointer;font-family:var(--ff);color:var(--color-text)}
.f-card{background:var(--color-surface);border-radius:var(--radius-card);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-card)}
.f-warn{background:var(--color-danger-surface);border-radius:var(--radius-card);padding:14px 16px;font-size:12.5px;color:var(--color-danger-text);margin-top:12px;line-height:1.5}