/* Телефон, экран «Как»: выбор варианта решения над панелью шагов объяснения. */
.mobile-how-solutions {
  --mobile-how-solutions-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(236, 253, 245, 0.94) 100%
  );
  --mobile-how-solutions-border: rgba(52, 211, 153, 0.28);
  --mobile-how-solutions-text: #065f46;
  --mobile-how-solutions-muted: rgba(6, 95, 70, 0.7);
  --mobile-how-solutions-chip-bg: rgba(255, 255, 255, 0.9);
  --mobile-how-solutions-chip-border: rgba(16, 185, 129, 0.35);
  --mobile-how-solutions-active-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --mobile-how-solutions-active-text: #ffffff;

  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border-top: 1px solid var(--mobile-how-solutions-border);
  background: var(--mobile-how-solutions-bg);
  color: var(--mobile-how-solutions-text);
  z-index: 6;
}

.mobile-how-solutions[hidden] {
  display: none !important;
}

[data-theme="dark"] .mobile-how-solutions {
  --mobile-how-solutions-bg: linear-gradient(
    180deg,
    rgba(22, 30, 38, 0.98) 0%,
    rgba(15, 23, 32, 0.96) 100%
  );
  --mobile-how-solutions-border: rgba(52, 211, 153, 0.22);
  --mobile-how-solutions-text: #d1fae5;
  --mobile-how-solutions-muted: rgba(167, 243, 208, 0.72);
  --mobile-how-solutions-chip-bg: rgba(15, 23, 32, 0.9);
  --mobile-how-solutions-chip-border: rgba(52, 211, 153, 0.32);
}

html[data-palette="pink"] .mobile-how-solutions {
  --mobile-how-solutions-border: rgba(244, 114, 182, 0.28);
  --mobile-how-solutions-chip-border: rgba(236, 72, 153, 0.35);
  --mobile-how-solutions-active-bg: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.mobile-how-solutions__legend {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mobile-how-solutions-muted);
}

/* Длинные названия решений — горизонтальный скролл, без переноса строк. */
.mobile-how-solutions__list {
  display: flex;
  flex: 1 1 auto;
  gap: 0.3rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-how-solutions__list::-webkit-scrollbar {
  display: none;
}

.mobile-how-solutions__item {
  flex: 0 0 auto;
  min-height: 1.9rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--mobile-how-solutions-chip-border);
  border-radius: 999px;
  background: var(--mobile-how-solutions-chip-bg);
  color: var(--mobile-how-solutions-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.mobile-how-solutions__item:active {
  transform: scale(0.96);
}

.mobile-how-solutions__item--active {
  border-color: transparent;
  background: var(--mobile-how-solutions-active-bg);
  color: var(--mobile-how-solutions-active-text);
}