/* ── Перемикач режимів (тільки для показу) ─────────────────────────────── */

.demo-switch {
  max-width: 420px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--pad-screen);
  font-size: 11px;
  color: var(--ink-muted);
}

.demo-switch button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-muted);
  cursor: pointer;
}
.demo-switch button.is-on { background: var(--accent); color: #fff; border-color: transparent; }

/* ── Режим 1: підрахунок ───────────────────────────────────────────────── */

.macros {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.macros__kcal {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.macros__of { font-size: var(--size-xs); color: var(--ink-muted); margin-top: 4px; }

.macros__bar {
  height: 8px;
  background: rgba(46, 40, 35, 0.07);
  border-radius: var(--radius-pill);
  margin: 16px 0 18px;
  overflow: hidden;
}
.macros__fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .5s ease; }

.macros__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.macro { background: var(--bg); border-radius: var(--radius-inner); padding: 11px 6px; }
.macro__v { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 600; }
.macro__l { font-size: 10px; color: var(--ink-muted); letter-spacing: .06em; }

/* ── Режим 2: метод тарілки ────────────────────────────────────────────── */

.plate {
  background: linear-gradient(150deg, var(--sage-soft), var(--butter-soft));
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.plate__circle {
  width: 132px; height: 132px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.7), var(--shadow-card);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.plate__half { background: var(--card-sage); grid-row: span 2; display: grid; place-items: center; font-size: 20px; }
.plate__q1   { background: var(--card-pink); display: grid; place-items: center; font-size: 17px; }
.plate__q2   { background: var(--card-butter); display: grid; place-items: center; font-size: 17px; }

.plate__legend { font-size: var(--size-xs); color: var(--ink-muted); line-height: 1.6; }
.plate__count { font-family: var(--font-display); font-size: var(--size-lg); margin: 10px 0 0; }

/* ── Режим 3: інтуїтивно ───────────────────────────────────────────────── */

.intu {
  background: linear-gradient(150deg, var(--lilac-soft), var(--pink-soft));
  border-radius: var(--radius-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.intu__icon { font-size: 26px; }
.intu__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-lg);
  line-height: 1.35;
  margin: 10px 4px 14px;
}
.intu__scale { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: var(--size-xs); color: var(--ink-muted); }
.intu__dots { display: flex; gap: 4px; }
.intu__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(46,40,35,.14); }
.intu__dot.is-on { background: var(--accent); }

/* ── Записи ────────────────────────────────────────────────────────────── */

.entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-inner);
  padding: 13px 15px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}
.entry__slot { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.entry__name { font-size: var(--size-sm); font-weight: 500; }
.entry__meta { font-size: var(--size-xs); color: var(--ink-muted); margin-top: 2px; }
.entry__side { margin-left: auto; text-align: right; flex-shrink: 0; }
.entry__kcal { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 600; }
.entry__del { background:none; border:none; color:var(--ink-muted); font-size:17px; cursor:pointer; padding:0 0 0 8px; }

.plate-marks { display: flex; gap: 4px; margin-top: 5px; }
.pm { width: 15px; height: 15px; border-radius: 5px; display: grid; place-items: center; font-size: 9px; background: rgba(46,40,35,.07); }
.pm.is-on--veg     { background: var(--card-sage); }
.pm.is-on--protein { background: var(--card-pink); }
.pm.is-on--carbs   { background: var(--card-butter); }

.empty {
  text-align: center;
  padding: 26px 20px;
  color: var(--ink-muted);
  font-size: var(--size-sm);
  line-height: 1.5;
}

.add-meal {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  border: 1.5px dashed rgba(46,40,35,.16);
  border-radius: var(--radius-card);
  background: transparent;
  font-family: inherit;
  font-size: var(--size-sm);
  color: var(--ink-muted);
  cursor: pointer;
}
.add-meal:active { background: var(--pink-soft); }

/* ── Вода ──────────────────────────────────────────────────────────────── */

.water {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.water__info { min-width: 0; }
.water__title { font-size: var(--size-sm); font-weight: 500; margin: 0; }
.water__val { font-size: var(--size-xs); color: var(--ink-muted); margin: 2px 0 0; }
.water__btns { margin-left: auto; display: flex; gap: 7px; }
.water__btns button {
  padding: 9px 13px; border: none; border-radius: var(--radius-pill);
  background: var(--lilac-soft); font-family: inherit; font-size: var(--size-xs);
  color: var(--ink); cursor: pointer;
}

/* ── Пошук у панелі ────────────────────────────────────────────────────── */

.search { width: 100%; margin-top: 16px; }
.results { max-height: 190px; overflow-y: auto; margin-top: 8px; }
.result {
  width: 100%; text-align: left; padding: 11px 14px;
  background: var(--surface); border: 1.5px solid transparent;
  border-radius: var(--radius-inner); margin-bottom: 6px;
  font-family: inherit; font-size: var(--size-sm); color: var(--ink); cursor: pointer;
}
.result.is-on { border-color: var(--accent); background: var(--pink-soft); }
.result small { display: block; color: var(--ink-muted); font-size: var(--size-xs); margin-top: 2px; }

.scale-row { display: flex; gap: 5px; margin-top: 8px; }
.scale-row button {
  flex: 1; padding: 9px 0; border: 1.5px solid transparent;
  background: var(--surface); border-radius: var(--radius-inner);
  font-family: inherit; font-size: var(--size-xs); cursor: pointer;
  box-shadow: var(--shadow-card);
}
.scale-row button.is-on { border-color: var(--accent); background: var(--pink-soft); }

/* ── Обрані продукти прийому їжі ───────────────────────────────────────── */

.picked { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.picked:empty { display: none; }

.picked__item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 12px;
  background: var(--pink-soft);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--size-xs);
  color: var(--ink);
}
.picked__g { color: var(--ink-muted); }
.picked__x {
  border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--ink-muted); padding: 0;
}

.picked__hint {
  font-size: var(--size-xs); color: var(--ink-muted);
  margin: 0 0 8px; line-height: 1.45;
}

.result.is-on { border-color: var(--accent); background: var(--pink-soft); }