/* Экран записи. Структура и значения — из
 * prototype/Ноготочки - Запись.dc.html: своя шапка с крестиком вместо
 * шапки лендинга, строка выбранной услуги, разделы выбора, липкий подвал
 * с итогом и кнопкой «Далее».
 *
 * База — в base.css. Значения — только из tokens.css. Литералами оставлены
 * значения прототипа, которых в токенах нет, они помечены «из прототипа».
 * Узкий экран (до --breakpoint-narrow, 768px) — отдельный блок в конце
 * файла: прототип свёрстан только на 1440px.
 */

/* Экран прототипа занимает высоту окна: подвал с «Далее» всегда виден.
 * 100vh в Safari на iPad и iPhone — высота окна со спрятанными панелями,
 * и подвал уходит под нижнюю панель Safari. 100dvh — видимая часть окна
 * сейчас; браузер, который dvh не знает, пропустит строку и возьмёт 100vh. */
.flow {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.flow__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xl) 56px; /* 56px из прототипа */
  border-bottom: 1px solid var(--color-border);
}

.flow__logo {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--font-weight-semibold);
}

/* Круглая кнопка отмены — из прототипа */
.flow__close {
  width: 36px; /* из прототипа */
  height: 36px; /* из прототипа */
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.flow__main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-7xl) 56px var(--space-6xl); /* 56px из прототипа */
  max-width: 1120px; /* из прототипа */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.flow__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding: var(--space-2xl) 56px; /* 56px из прототипа */
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.flow__summary {
  font-size: var(--text-md);
}

.flow__next-box {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

/* Рядом с неактивной кнопкой написано, чего не хватает */
.flow__next-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.flow__next {
  padding: var(--space-lg) var(--space-6xl);
  font-size: var(--text-md);
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
}

.flow__next:disabled {
  background: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  cursor: default;
}

/* ==========================================================================
 * Шаг-индикатор и строка услуги
 * ======================================================================= */

.strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding: 18px 56px; /* из прототипа */
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.strip__text {
  font-size: var(--text-md);
}

.strip__change {
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-border);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
}

.strip__change:hover {
  color: var(--color-accent);
}

.steps {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-3xl);
  padding: var(--space-md) 56px; /* 56px из прототипа */
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-inactive);
}

.steps__item--done {
  color: var(--color-text-muted);
}

.steps__item--current {
  color: var(--color-accent);
}

/* ==========================================================================
 * Разделы выбора
 * ======================================================================= */

.step-section {
  margin-bottom: 56px; /* из прототипа */
}

.step-section__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-lg);
  margin: 0 0 var(--space-3xl);
}

.step-section__subtitle {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-sm);
  margin: 0 0 var(--space-md);
}

.note {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

/* Выбор услуги: раздела в прототипе нет, карточки повторяют вид
 * карточек мастера */
.choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.choice {
  text-align: left;
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.choice--selected {
  border: 2px solid var(--color-border-selected);
  background: var(--color-surface-selected);
  padding: 19px; /* компенсирует рамку 2px, чтобы карточка не прыгала */
}

.choice__name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

.choice__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Карточка мастера — из прототипа: фото, имя, рейтинг, специализация.
 * Строки опыта нет: hired_at наружу не отдаётся. */
.masters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.master-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  background: var(--color-bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
  font-family: var(--font-body);
  color: var(--color-text);
}

.master-card--selected {
  border: 2px solid var(--color-border-selected);
  background: var(--color-surface-selected);
  padding: 19px; /* компенсирует рамку 2px */
}

.master-card__photo {
  display: block;
  width: 100%;
  height: 160px; /* из прототипа */
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.master-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
}

.master-card__name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

.master-card__rating,
.master-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
 * Даты и время
 * ======================================================================= */

.schedule {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr; /* из прототипа */
  gap: var(--space-7xl);
  align-items: start;
}

/* Вместо календаря месяца — 14 дней вперёд, решение из карты */
.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-xs);
}

.day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}

.day__weekday,
.day__month {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.day__number {
  font-size: var(--text-base);
}

.day--selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.day--selected .day__weekday,
.day--selected .day__number,
.day--selected .day__month {
  color: var(--color-text-on-accent);
}

/* Выходной — по полю closed из ответа сервера */
.day--closed {
  background: var(--color-surface);
  border-color: transparent;
  color: var(--color-text-disabled);
  cursor: default;
}

/* День без свободного времени — пунктир, как «нет окон» в прототипе */
.day--full {
  border-style: dashed;
  color: var(--color-text-disabled);
  cursor: default;
}

.day--full .day__weekday,
.day--full .day__month,
.day--closed .day__weekday,
.day--closed .day__month {
  color: var(--color-text-disabled);
}

.day--unknown {
  border-color: var(--color-border-subtle);
  color: var(--color-text-inactive);
  cursor: default;
}

/* Легенда — из прототипа */
.legend {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.legend__swatch {
  width: 10px; /* из прототипа */
  height: 10px; /* из прототипа */
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}

.legend__swatch--free {
  border: 1px solid var(--color-border);
}

.legend__swatch--full {
  border: 1px dashed var(--color-border);
}

.legend__swatch--closed {
  background: var(--color-surface);
}

.legend__swatch--selected {
  background: var(--color-accent);
}

.times__caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.times {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.time-group__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.time-group__slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-xs);
}

/* Слот — из прототипа: свободный с рамкой, выбранный акцентный,
 * недоступный пунктиром и неактивен, а не спрятан */
.slot {
  text-align: center;
  padding: var(--space-xs) 0;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
}

.slot--selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.slot--busy {
  border: 1px dashed var(--color-border-subtle);
  color: var(--color-text-inactive);
  cursor: default;
}

/* Индикатор загрузки слотов и дней */
.loading-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

/* Сообщения до появления экрана: отбиты как содержимое сценария */
.flow__status {
  padding: var(--space-2xl) 56px; /* 56px из прототипа */
}

/* Обёртка экрана не должна ломать вертикальную раскладку сценария:
 * её дети остаются прямыми элементами колонки */
.flow__screen {
  display: contents;
}

/* ==========================================================================
 * Узкий экран: телефон, Safari в Split View, iPad вертикально
 *
 * Не из прототипа — в нём нет ни одного @media. 768px — --breakpoint-narrow
 * из tokens.css; в условии @media переменная не работает, поэтому литерал.
 * Всё идёт в одну колонку, поля по краям — --space-xl вместо 56px прототипа.
 * ======================================================================= */

@media (max-width: 768px) {
  .flow__header,
  .strip,
  .steps,
  .flow__footer,
  .flow__status {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }

  .flow__main {
    padding: var(--space-3xl) var(--space-xl) var(--space-6xl);
  }

  .steps {
    gap: var(--space-xl);
  }

  .strip {
    gap: var(--space-md);
  }

  .step-section {
    margin-bottom: var(--space-6xl);
  }

  /* Услуги и мастера — по одной карточке в ряд */
  .choices,
  .masters-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Дата и время — друг под другом, а не рядом */
  .schedule {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5xl);
  }

  /* 4 кнопки времени в ряд: «10:00» помещается и в окно 320px */
  .time-group__slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .slot {
    padding: var(--space-md) 0;
  }

  /* Итог записи — строкой сверху, кнопка «Далее» — во всю ширину под ним */
  .flow__footer {
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .flow__summary {
    flex: 1 1 100%;
    font-size: var(--text-sm);
  }

  .flow__next-box {
    flex: 1 1 100%;
  }

  /* Пустая подсказка не должна сдвигать кнопку отступом */
  .flow__next-hint:empty {
    display: none;
  }

  .flow__next {
    flex: 1 1 auto;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}