/* =====================================================
   Базовые элементы управления: поля форм, сегмент-контрол,
   переключатели (switch).
   ===================================================== */

/* ----------------- Поля форм (новый лейаут) ----------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.field-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.field-row {
  display: flex;
  gap: 11px;
}
.field-row .field { flex: 1; min-width: 0; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-stack .btn-primary { width: 100%; margin-top: 4px; }
.field-hint { font-size: 11.5px; color: var(--text-muted); }

/* ----------------- Сегмент-контрол (пол, стиль) ----------------- */
.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--fill-track);
  border-radius: var(--r-sm);
}
.seg-btn {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.seg-btn.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}
.seg-btn.accent.active { color: var(--color-primary); }

/* Сегмент-переключатель верхнего уровня (Тело / Тренды). */
.seg-tabs { margin-bottom: var(--spacing-md); }
.pane { animation: viewIn var(--dur) var(--ease); }
.pane.hidden { display: none; }

/* ----------------- Переключатель (switch) ----------------- */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-primary);
  padding: 4px 0;
}
.switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 50px;
  height: 30px;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.switch-track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--fill-track);
  border: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  transition: transform var(--dur) var(--ease-spring);
}
.switch input:checked + .switch-track {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.switch input:checked + .switch-track::after { transform: translateX(20px); }

/* Свитч со знаком внутри бегунка — для согласий, где важно видеть не просто
   «что-то включено», а подтверждено оно или нет: зелёная галочка во включённом
   состоянии, красный крестик в выключенном. Оба знака нарисованы на самом
   .switch (у .switch-track псевдоэлементы уже заняты дорожкой и бегунком) и
   едут вместе с бегунком, поэтому координаты отсчитываются от .switch —
   это на 1px больше, чем у бегунка, из-за рамки дорожки. */
.switch-check::before,
.switch-check::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease);
}
/* Крестик: плюс из двух полосок, повёрнутый на 45°. Размеры полосок берём
   ровно по контейнеру: при 11px в блоке 12px центрирование давало по половине
   пикселя с каждой стороны, и на мониторе без ретины крест выходил кривым —
   одна перекладина резкая, вторая размытая и толще. */
.switch-check::before {
  top: 9px;
  left: 9px;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--color-danger), var(--color-danger)) center / 2px 12px no-repeat,
    linear-gradient(var(--color-danger), var(--color-danger)) center / 12px 2px no-repeat;
  transform: rotate(45deg);
}
/* Галочка: две границы повёрнутого прямоугольника. Координаты целые — по той
   же причине, что и у крестика. */
.switch-check::after {
  top: 8px;
  left: 12px;
  width: 6px;
  height: 10px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
}
.switch-check:has(input:checked)::before {
  transform: translateX(20px) rotate(45deg) scale(0.4);
  opacity: 0;
}
.switch-check:has(input:checked)::after {
  transform: translateX(20px) rotate(45deg) scale(1);
  opacity: 1;
}
/* Состояние читается только через :has(). Там, где его нет, знаки убираем
   совсем: обычный свитч лучше, чем красный крестик поверх включённого. */
@supports not selector(:has(*)) {
  .switch-check::before,
  .switch-check::after { content: none; }
}

/* плавное скрытие блока (беременность/ГВ только для женского пола) */
.collapsible.hidden { display: none; }