/* Этап 8 §8 (T10): метки, аллергены, состав и вес на карточке блюда + фильтры меню (js/menu-filters-guest.js).
   Оба скина: «Тёплый минимал» (warm, по умолчанию) и figma (html[data-skin="figma"], токены --g-*).
   Классы — с префиксом gmf- (positivus.css держит !important на .chip/.btn/.badge).
   Контраст AA: warm — текст #2B2620 / приглушённый #6B5F4F (5.5:1 на фоне), «Содержит» #8B3A22 (6.9:1);
   figma — токены скина (--g-text, --g-muted, --g-on-menu-card-muted 6.5:1). Цели касания ≥ 44 px. */

:root {
  --gmf-text: var(--text, #2B2620);
  --gmf-muted: #6B5F4F;
  --gmf-warn: #8B3A22;
  --gmf-line: var(--border, #E8DECF);
  --gmf-on: #FFFDF9;           /* текст на выбранном чипе */
  --gmf-on-bg: #2B2620;        /* фон выбранного чипа */
  --gmf-sheet: var(--card, #FFFDF9);
  --gmf-scrim: rgba(43, 38, 32, 0.5);
  --gmf-font: var(--font-ui, 'Inter', -apple-system, sans-serif);
  --gmf-r: 999px;
  --gmf-focus: var(--accent, #B34E30);
}

/* Тёмная тема warm (style.css: html[data-theme="dark"], фон #0f0f10) */
html[data-theme="dark"]:not([data-skin="figma"]) {
  --gmf-text: #F2F3F5;
  --gmf-muted: #A8AEB3;        /* 8.6:1 на #0f0f10 */
  --gmf-warn: #FF9A7A;         /* 9.3:1 */
  --gmf-line: rgba(255, 255, 255, 0.2);
  --gmf-on: #0F0F10;
  --gmf-on-bg: #F2F3F5;
  --gmf-sheet: #1C1C1E;
  --gmf-scrim: rgba(0, 0, 0, 0.6);
  --gmf-focus: #F2F3F5;
}

/* ─── Полоса фильтров ─── */
.gmf-bar { padding: 10px 16px 4px; font-family: var(--gmf-font); }
.gmf-chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px;
}
.gmf-chips::-webkit-scrollbar { display: none; }
.gmf-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--gmf-line); border-radius: var(--gmf-r);
  background: transparent; color: var(--gmf-text); cursor: pointer;
  font: 500 14px/1.2 var(--gmf-font); white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.gmf-chip[aria-pressed="true"] { background: var(--gmf-on-bg); border-color: var(--gmf-on-bg); color: var(--gmf-on); }
.gmf-chip--al span { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.gmf-chip:focus-visible, .gmf-reset:focus-visible, .gmf-btn:focus-visible { outline: 2px solid var(--gmf-focus); outline-offset: 2px; }
.gmf-ic { width: 20px; height: 20px; flex: none; }
.gmf-status { display: flex; align-items: center; gap: 12px; min-height: 0; }
.gmf-status:not(:empty) { min-height: 44px; }
.gmf-hidden { color: var(--gmf-muted); font: 400 13px/1.3 var(--gmf-font); }
.gmf-reset {
  min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--gmf-warn); font: 600 14px/1.2 var(--gmf-font); text-decoration: underline; text-underline-offset: 3px;
}

/* ─── Карточка блюда ─── */
.gmf-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 6px; color: var(--gmf-muted); font: 500 13px/1.3 var(--gmf-font); }
.gmf-tags { display: inline-flex; gap: 4px; color: var(--gmf-text); }
.gmf-tags .gmf-ic { width: 18px; height: 18px; }
.gmf-contains { display: flex; align-items: flex-start; gap: 4px; margin: 0 0 6px; color: var(--gmf-warn); font: 500 13px/1.35 var(--gmf-font); }
.gmf-contains .gmf-ic-sm { width: 16px; height: 16px; margin-top: 1px; }
.gmf-comp {
  margin: 0 0 8px; max-width: 52ch; color: var(--gmf-muted); font: 400 13px/1.45 var(--gmf-font);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}

/* ─── Пустая категория после фильтров ─── */
.gmf-empty { padding: 40px 16px; text-align: center; font-family: var(--gmf-font); }
.gmf-empty__title { color: var(--gmf-text); font: 500 17px/1.3 var(--gmf-font); margin-bottom: 4px; }
.gmf-empty__hint { color: var(--gmf-muted); font: 400 14px/1.45 var(--gmf-font); margin-bottom: 8px; }
.gmf-reset--big { min-height: 48px; padding: 0 20px; }

/* ─── Лист «Без аллергена…» ─── */
.gmf-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.gmf-sheet__scrim { position: absolute; inset: 0; background: var(--gmf-scrim); }
.gmf-sheet__box {
  position: relative; width: min(560px, 100%); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
  background: var(--gmf-sheet); color: var(--gmf-text); font-family: var(--gmf-font);
  animation: gmfUp 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gmf-sheet__title { margin: 0 0 6px; color: var(--gmf-text) !important; font: 600 20px/1.25 var(--gmf-font) !important; letter-spacing: 0 !important; }
.gmf-sheet__hint { margin: 0 0 14px; color: var(--gmf-muted); font: 400 14px/1.45 var(--gmf-font); }
.gmf-sheet__list { display: flex; flex-wrap: wrap; gap: 8px; }
.gmf-sheet__list .gmf-chip { white-space: normal; text-align: left; }
.gmf-sheet__foot { display: flex; gap: 12px; margin-top: 18px; }
.gmf-btn {
  flex: 1 1 0; min-height: 48px; padding: 0 16px; border: 1px solid var(--gmf-on-bg); border-radius: var(--gmf-r);
  background: var(--gmf-on-bg); color: var(--gmf-on); cursor: pointer; font: 600 15px/1.2 var(--gmf-font);
}
.gmf-btn--ghost { background: transparent; color: var(--gmf-text); border-color: var(--gmf-line); }
@keyframes gmfUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gmf-chip { transition: none; }
  .gmf-sheet__box { animation: none; }
}

/* ─── Скин figma: токены скина, Gilroy, карточка белая (2×N) ─── */
html[data-skin="figma"] {
  --gmf-text: var(--g-text);
  --gmf-muted: var(--g-muted);
  --gmf-warn: var(--g-text);
  --gmf-line: var(--g-line);
  --gmf-on: var(--g-on-primary);
  --gmf-on-bg: var(--g-primary);
  --gmf-sheet: var(--g-surface);
  --gmf-scrim: var(--g-scrim);
  --gmf-font: var(--g-font);
  --gmf-focus: var(--g-focus);
}
html[data-skin="figma"] body[data-g-page="menu"] .gmf-bar { padding: 0 var(--g-pad) 8px; }
html[data-skin="figma"] body[data-g-page="menu"] .gmf-chips { margin: 0 calc(-1 * var(--g-pad)); padding: 2px var(--g-pad) 4px; }
html[data-skin="figma"] .gmf-chip { border-color: transparent; background: var(--g-seg); color: var(--g-text); font: 500 var(--g-fs-sub)/1.2 var(--g-font); }
html[data-skin="figma"] .gmf-chip[aria-pressed="true"] { background: var(--g-primary); color: var(--g-on-primary); }
html[data-skin="figma"] .gmf-reset { color: var(--g-text); }
/* На белой карточке меню — цвета карточки (а не фона страницы) */
html[data-skin="figma"] body[data-g-page="menu"] .menu-item .gmf-facts { justify-content: center; margin: 0; color: var(--g-on-menu-card-muted); font: 500 var(--g-fs-caption)/1.2 var(--g-font) !important; }
html[data-skin="figma"] body[data-g-page="menu"] .menu-item .gmf-tags { color: var(--g-on-menu-card); }
html[data-skin="figma"] body[data-g-page="menu"] .menu-item .gmf-tags .gmf-ic { width: 16px; height: 16px; }
html[data-skin="figma"] body[data-g-page="menu"] .menu-item .gmf-contains {
  justify-content: center; margin: 0; color: var(--g-on-menu-card); font: 500 var(--g-fs-caption)/1.3 var(--g-font) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-skin="figma"] body[data-g-page="menu"] .menu-item .gmf-contains .gmf-ic-sm { display: none; }
/* Состав в компактной карточке figma не помещается — он в листе описания ленты (Reels) */
html[data-skin="figma"] body[data-g-page="menu"] .menu-item .gmf-comp { display: none; }
html[data-skin="figma"] body[data-g-page="menu"] .gmf-empty { grid-column: 1 / -1; }
html[data-skin="figma"] .gmf-sheet__box { border-radius: var(--g-r-card) var(--g-r-card) 0 0; }
html[data-skin="figma"] .gmf-sheet__list .gmf-chip { background: var(--g-surface-2); }
html[data-skin="figma"] .gmf-sheet__list .gmf-chip[aria-pressed="true"] { background: var(--g-primary); color: var(--g-on-primary); }
html[data-skin="figma"] .gmf-btn--ghost { background: transparent; color: var(--g-text); border-color: var(--g-line); }