/*
 * Основа клиентских страниц: сетка, шапка, подвал, кнопки, заглушки, ошибки.
 *
 * Ни одного собственного цвета, размера шрифта или радиуса: всё берётся из
 * `web/tokens.css` (правило 4). Там, где в прототипе стояло значение, которого
 * в дизайн-системе нет (например, заливка секции #F5F5F5 или шрифт Playfair
 * Display), взят ближайший существующий токен либо приём, который дизайн-
 * система описывает сама, — «карточки и панели отделяются границей».
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Пункты верхнего меню — якоря: прокрутка к блоку должна быть плавной. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* ─── Сетка ──────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
}

.section {
  padding: var(--space-9) var(--page-padding);
  /* Шапка липкая, и якорь должен останавливаться под ней, а не за ней. */
  scroll-margin-top: var(--space-9);
}

.section--inverse {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

/* Светлые секции идут подряд, и разделяет их граница: заливки под секцию
   в дизайн-системе нет, а поверхности она разделяет именно границей. */
.section--divided {
  border-top: var(--border-width) solid var(--color-border);
}

/*
 * Плотный вариант секции: меньше воздуха сверху и снизу, заголовок ближе к
 * содержимому.
 *
 * Нужен там, где содержимое — короткий список однотипных строк, а не блоки с
 * картинками: в «Частых вопросах» пять свёрнутых строк занимали больше
 * экрана, чем весь ответ, ради которого их открывают. Обычный ритм секций
 * (96px) при этом не тронут — он общий для лендинга, и разъезжаться ему
 * незачем.
 */
.section--tight {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section__head {
  margin-bottom: var(--space-7);
  text-align: center;
}

.section--tight .section__head {
  margin-bottom: var(--space-6);
}

.section__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
}

.section__note {
  margin-top: var(--space-7);
  text-align: center;
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
}

.section--inverse .section__note {
  color: var(--color-text-secondary-inverse);
}

.section__more {
  margin-top: var(--space-6);
  text-align: center;
}

.muted {
  color: var(--color-text-secondary);
  font-size: var(--text-body-s-size);
}

.eyebrow {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.section--inverse .eyebrow,
.section--inverse .muted {
  color: var(--color-text-secondary-inverse);
}

/* ─── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: var(--border-width) solid transparent;
  border-radius: var(--button-radius);
  font-family: inherit;
  font-weight: var(--text-button-weight);
  letter-spacing: var(--text-button-tracking);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.btn--l {
  padding: var(--button-padding-l);
  font-size: var(--button-font-size-l);
}

.btn--m {
  padding: var(--button-padding-m);
  font-size: var(--button-font-size-m);
}

.btn--block {
  display: block;
  width: 100%;
}

.btn--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.btn--primary:hover {
  background: var(--button-primary-bg-hover);
}

.btn--primary:active {
  background: var(--button-primary-bg-active);
}

/* Кнопка на время запроса, на время блокировки после `429` и шаг, к которому
   ещё нечего передать: ссылка-кнопка помечается `aria-disabled`. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--button-primary-bg-disabled);
  color: var(--button-primary-text-disabled);
  cursor: default;
}

/* Основное действие на тёмной поверхности: те же два токена, поменянные
   местами, — белая кнопка с тёмным текстом, как в прототипе. */
.btn--contrast {
  background: var(--button-primary-text);
  color: var(--button-primary-bg);
}

.btn--contrast:hover {
  background: var(--button-secondary-bg-active);
}

.btn--secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}

.btn--secondary:hover {
  background: var(--button-secondary-bg-hover);
}

.btn--secondary:active {
  background: var(--button-secondary-bg-active);
}

/* Разрушительное действие: отмена записи. */
.btn--danger {
  background: var(--button-danger-bg);
  color: var(--button-danger-text);
}

.btn--danger:hover {
  background: var(--button-danger-bg-hover);
}

.btn--danger:active {
  background: var(--button-danger-bg-active);
}

/* Тихая кнопка в строке карточки: рамка серая, а не чёрная. */
.btn--quiet {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--color-border);
}

.btn--quiet:hover {
  background: var(--button-secondary-bg-hover);
}

.btn--quiet-danger {
  background: var(--button-secondary-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn--quiet-danger:hover {
  background: var(--color-error-bg);
}

.btn--s {
  padding: var(--button-padding-s);
  font-size: var(--button-font-size-s);
}

/* Второстепенное действие на тёмной поверхности. */
.btn--outline-inverse {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: var(--neutral-400);
}

.btn--outline-inverse:hover {
  border-color: var(--neutral-0);
}

.link-underline {
  display: inline-block;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  border-bottom: var(--border-width) solid var(--color-text-primary);
  padding-bottom: var(--space-1);
}

.link-underline:hover {
  color: var(--color-text-secondary);
  border-bottom-color: var(--color-text-secondary);
}

/* ─── Карточка ───────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.card__title {
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  font-weight: var(--font-weight-bold);
}

.card__text {
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary);
}

/* ─── Логотип ────────────────────────────────────────────────────────────── */

/* Живёт здесь, а не в `header.css`: подвал показывает его тем же начертанием.
   Сама шапка целиком — в `css/header.css` и `js/header.js`. */
.logo {
  flex: 0 0 auto;
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-text-inverse);
  white-space: nowrap;
}

/* ─── Подвал ─────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-8) var(--page-padding);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.site-footer__about {
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--color-text-secondary-inverse);
  max-width: 220px;
  margin: var(--space-3) 0 var(--space-4);
}

.site-footer__col-title {
  display: block;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: var(--space-4);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__links a {
  font-size: var(--text-body-s-size);
  color: var(--neutral-200);
}

.site-footer__links a:hover {
  color: var(--color-text-inverse);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--neutral-700);
  font-size: var(--text-caption-size);
  color: var(--neutral-500);
}

.site-footer__bottom a:hover {
  color: var(--neutral-200);
}

/* Кружки соцсетей: в контактах на светлом фоне, в подвале на тёмном. */
.socials {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.socials a,
.socials span {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
}

.section--inverse .socials a,
.site-footer .socials a,
.site-footer .socials span {
  border-color: var(--neutral-600);
  color: var(--neutral-200);
}

.site-footer .socials a:hover {
  border-color: var(--neutral-0);
  color: var(--color-text-inverse);
}

/* ─── Поля формы ─────────────────────────────────────────────────────────── */

/* Общее для всех форм — вход, регистрация, подтверждение записи. Значения
   берутся из токенов `--field-*`. Что есть только на авторизации (кнопка
   «Показать», индикатор пароля), живёт в `auth.css`. */

.fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.field__label {
  display: block;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}

.field__input {
  width: 100%;
  padding: var(--field-padding);
  font-family: inherit;
  font-size: var(--field-font-size);
  color: var(--field-text);
  background: var(--field-bg);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  outline: none;
}

.field__input:focus {
  border-color: var(--field-border-focus);
}

.field__input:disabled {
  background: var(--field-bg-disabled);
  color: var(--field-text-disabled);
}

/* Поле только для чтения: сохранить его некуда, но и «сломанным» оно
   выглядеть не должно — отсюда фон как у выключенного, но обычный текст. */
.field__input[readonly] {
  background: var(--field-bg-disabled);
}

.field__input--error {
  border-color: var(--field-border-error);
}

.field__error {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--field-text-error);
  margin-top: var(--space-2);
}

.field__note {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-s-size);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 var(--space-5);
}

.consent input {
  width: var(--space-5);
  height: var(--space-5);
  accent-color: var(--color-text-primary);
  flex: 0 0 auto;
}

.consent a {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.consent .field__error {
  display: block;
  margin-top: var(--space-1);
}

.consent .field__error[hidden] {
  display: none;
}

/* ─── Заглушка на время загрузки ─────────────────────────────────────────── */

.skeleton {
  display: block;
  background: var(--neutral-100);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.section--inverse .skeleton,
.site-footer .skeleton {
  background: var(--neutral-700);
}

.skeleton--line {
  height: var(--text-body-m-size);
  width: 100%;
}

.skeleton--short {
  width: var(--space-9);
}

.skeleton--value {
  height: var(--text-h3-size);
  width: var(--space-8);
  margin: 0 auto;
}

.skeleton--card {
  height: 240px;
  border-radius: var(--radius-lg);
}

.skeleton--photo {
  height: 220px;
  border-radius: var(--radius-lg);
}

.skeleton--slot {
  height: var(--space-7);
  border-radius: var(--radius-md);
}

.skeleton--circle {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .skeleton {
    animation: none;
  }
}

/* ─── Ошибка от API ──────────────────────────────────────────────────────── */

/* Правило 7: отказ показывается текстом на экране, а не только в консоли. */
.error-note {
  grid-column: 1 / -1;
  border: var(--border-width) solid var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-body-s-size);
}

.section--inverse .error-note {
  background: transparent;
}

/* ─── Узкий экран ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root {
    --page-padding: var(--space-5);
  }

  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /*
   * Мелкая кнопка на телефоне остаётся мелкой на вид, но не на ощупь:
   * «Перенести», «Отменить» и «Повторить запись» в карточках визита имели
   * высоту 30 точек — мимо такой попасть легче, чем по ней.
   */
  .btn--s {
    padding: var(--space-3) var(--space-4);
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
  }
}