/* Барабан выбора: столбец строк, выбранное посередине.

   Крутится родной прокруткой с прилипанием — `scroll-snap`. Своей
   инерции не пишем: браузер уже умеет это так, как человек ждёт
   от своего телефона.

   Высота окна — пять строк, поля сверху и снизу по две: без них
   первая и последняя строки никогда не встали бы в середину. */

.wheels {
  display: flex;
  gap: var(--sp-3);
  position: relative;
}

/* Полоса середины: она и есть ответ на вопрос «что выбрано». Лежит
   под строками и не мешает их нажимать. */
.wheels::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 11cqw;
  transform: translateY(-50%);
  background: var(--plate-lit);
  border-radius: var(--r-md);
  pointer-events: none;
}

/* Позиционируем и сами столбцы: полоса середины лежит абсолютом,
   и без этого она рисовалась бы поверх строк — выбранное пропадало
   ровно там, где его и читают. */
.wheel {
  position: relative;
  flex: 1;
  height: 55cqw;
  padding: 22cqw 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.wheel::-webkit-scrollbar { display: none; }

.wheel__row {
  display: block;
  width: 100%;
  height: 11cqw;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: center;
  transition: color var(--fast) var(--ease),
              font-size var(--fast) var(--ease);
}

/* Строка в середине: крупнее и в полный цвет. Так барабан читается
   с одного взгляда, даже когда стоит неподвижно. */
.wheel__row.is-on {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Вкладки границ над барабаном: «С» и «По», и под каждой её день.
   Так видно обе сразу — правишь одну, вторая перед глазами. */
.span__tabs { margin-bottom: var(--sp-4); }

.span__tabs .tabs__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
}

.span__said {
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tabs__item.is-on .span__said { color: var(--accent-text); }