/* Демо-стенд: вибір тестової людини на сторінці входу і перемикач у верхній панелі. */
.demo-box { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.demo-people { display: grid; gap: 14px; margin: 8px 0; }
.demo-group { display: grid; gap: 6px; }
.demo-group-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.demo-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface) var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.demo-person:hover, .demo-person:focus-visible {
  border-color: color-mix(in srgb, var(--sky) 60%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sky) 30%, transparent), 0 8px 24px color-mix(in srgb, var(--sky) calc(var(--glow) * 30%), transparent);
  transform: translateY(-1px);
}
.demo-person span { font-size: 12px; }
.demo-hint { font-size: 12px; }

/* Перемикач людини — «пігулка» зі світною рамкою; бейдж «Демо» — бурштиновий градієнт. */
.demo-switch-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
.demo-switch {
  width: auto;
  min-width: 0;
  max-width: 440px;
  padding: 6px 10px 6px 14px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--sky) 35%, var(--line-strong));
  box-shadow: 0 0 14px color-mix(in srgb, var(--sky) calc(var(--glow) * 20%), transparent);
  font-weight: 500;
}
.demo-switch-wrap .badge.warn, .demo-box .badge.warn {
  background: linear-gradient(135deg, var(--amb), color-mix(in srgb, var(--amb) 60%, var(--ros)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--amb) calc(var(--glow) * 60%), transparent);
  color: #1A1204;
  letter-spacing: .03em;
}

/* У лівому меню ПК: бейдж «Демо» над перемикачем на всю ширину меню. */
.menu-foot .demo-switch-wrap { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 6px; padding: 0 4px; }
.menu-foot .demo-switch { width: 100%; max-width: none; min-height: 36px; padding-right: 30px; font-size: var(--fs-xs); }

/* На телефоні — лише перемикач: він і так показує, що це демо. */
@media (max-width: 760px) {
  .demo-switch-wrap { flex: 1 1 auto; }
  .demo-switch-wrap .badge { display: none; }
  .demo-switch { width: 100%; }
}