/*
 * Шаги записи 01 «Услуги», 02 «Мастер», 03 «Дата и время», 04 «Подтверждение» и экран 05 «Запись создана»
 * (book-services.html, book-master.html, book-time.html, book-confirm.html, book-done.html); перенос записи —
 * те же страницы: 03 с баннером, 04П «Подтверждение переноса», 05П «Запись перенесена».
 * Образец — MasterAvtoPrototype.dc.html. Общие стили — в ui.css.
 * Цвета, шрифты, размеры текста и отступы — только переменные из tokens.css.
 * Карточки на тёмной странице — «листы» в светлой теме (data-theme="light").
 * Числа без переменных — ширины раскладки и точки перелома (в токенах их нет) и толщины линий.
 */

.icon--32 { width: var(--space-8); height: var(--space-8); }

.flow { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.flow__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); align-items: start; }
.flow__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.flow__head { display: flex; flex-direction: column; gap: var(--space-3); }
.flow__title {
  font: 700 var(--text-h2-size)/1.15 var(--font-mono);
  letter-spacing: var(--text-h1-tracking);
  text-wrap: balance;
}
.flow__lead { font: 400 var(--text-body-size)/var(--text-body-line) var(--font-sans); color: var(--color-text-secondary); }

/* ---------- Шаг-индикатор ---------- */

.stepper { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.stepper__label { display: none; font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.stepper__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.stepper__step { display: flex; flex-direction: column; gap: var(--space-3); min-height: var(--space-12); padding-bottom: var(--space-1); color: inherit; }
.stepper__bar { display: block; height: 4px; background: var(--color-border); }
.stepper__row { display: flex; align-items: center; gap: var(--space-2); }
.stepper__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  border: 1px solid var(--color-border-strong);
  font: 700 var(--text-body-s-size)/1 var(--font-mono);
  color: var(--color-text-muted);
}
.stepper__text { font: 600 var(--text-body-s-size)/1.2 var(--font-mono); color: var(--color-text-muted); }

.stepper__step--current .stepper__bar { background: var(--color-accent); }
.stepper__step--current .stepper__num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-button-text); }
.stepper__step--current .stepper__text { font-weight: 700; color: var(--color-text-primary); }

.stepper__step--done .stepper__bar { background: var(--color-text-primary); }
.stepper__step--done .stepper__num { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-bg); }
.stepper__step--done .stepper__text { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.stepper__step--done:hover .stepper__text { color: var(--color-accent-text); }

.stepper__step--future { cursor: default; }

/* ---------- Перенос: баннер вместо шаг-индикатора (03, 04П) ---------- */

#resched:not(:empty) { margin-bottom: var(--space-6); }
.resched {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.resched__text { display: flex; flex-direction: column; gap: var(--space-2); font: 400 var(--text-body-s-size)/1.45 var(--font-sans); color: var(--color-text-secondary); }
.resched__title { font: 700 var(--text-body-size)/1.35 var(--font-mono); color: var(--color-text-primary); }

/* ---------- Уведомления и «лист»-плашки ---------- */

.notice, .sheet-note {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: 400 var(--text-body-size)/1.45 var(--font-sans);
}
#notice:not(:empty) { margin-bottom: var(--space-5); }
.notice--warn { border-left: 4px solid var(--color-accent); }
.notice--info { border-left: 4px solid var(--color-text-primary); }
.notice__text, .sheet-note__text { flex: 1; min-width: 200px; }
.sheet-note { align-items: center; }
.notice__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-12);
  height: var(--space-12);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.link-btn {
  min-height: var(--space-12);
  padding: 0 var(--space-1);
  background: none;
  border: 0;
  color: var(--color-accent-text);
  font: 700 var(--text-caption-size)/1 var(--font-mono);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- 01: карточки услуг ---------- */

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.pick:hover { border-color: var(--color-border-strong); }
.pick--on, .pick--on:hover { border: 2px solid var(--color-accent); padding: calc(var(--space-5) - 1px); }
.pick--off, .pick--off:hover { background: var(--color-bg); color: var(--color-text-secondary); border: 1px dashed var(--color-border-strong); cursor: not-allowed; }
.pick--skel { min-height: calc(var(--space-24) * 3); cursor: default; }
.pick__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); width: 100%; }
.pick__icon { display: flex; color: var(--color-accent); }
.pick--off .pick__icon { color: var(--color-text-muted); }
.pick__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border: 1px solid var(--color-text-secondary);
  background: var(--color-surface);
  color: var(--color-button-text);
}
.pick__box .icon { stroke-width: 2; }
.pick--on .pick__box { background: var(--color-accent); border-color: var(--color-accent); }
.pick--off .pick__box { background: var(--color-bg); border-color: var(--color-border); }
.pick__name { font: 600 var(--text-body-l-size)/1.3 var(--font-sans); }
.pick__desc { font: 400 var(--text-body-s-size)/var(--text-body-s-line) var(--font-sans); color: var(--color-text-secondary); }
.pick__dur { display: flex; align-items: center; gap: var(--space-2); font: 600 var(--text-caption-size)/1 var(--font-mono); color: var(--color-text-secondary); }
.pick__price {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font: 400 var(--text-caption-size)/1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.pick__price b { font: 700 var(--text-body-l-size)/1 var(--font-mono); color: var(--color-text-primary); white-space: nowrap; }
.pick__why {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font: 400 var(--text-caption-size)/1.4 var(--font-sans);
  color: var(--color-text-primary);
}

/* ---------- 02: карточки мастеров ---------- */

.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.mcard { display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.mcard--on { border: 2px solid var(--color-accent); }
.mcard--off { background: var(--color-bg); color: var(--color-text-secondary); border: 1px dashed var(--color-border-strong); }
.mcard__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(var(--space-24) + var(--space-12));
  padding: var(--space-3);
  background: repeating-linear-gradient(135deg, var(--color-bg) 0 var(--space-3), var(--color-border) var(--space-3) var(--space-6));
  font: 500 var(--text-overline-size)/1.3 var(--font-mono);
  color: var(--color-text-secondary);
  overflow: hidden;
}
.mcard--off .mcard__photo { opacity: .55; }
.mcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.mcard__chosen {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-8);
  padding: 0 var(--space-3);
  background: var(--color-accent);
  color: var(--color-button-text);
  font: 700 var(--text-overline-size)/1 var(--font-mono);
}
.mcard__chosen .icon { stroke-width: 2; }
.mcard__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.mcard--skel .mcard__body { min-height: calc(var(--space-24) * 2); }
.mcard__name { font: 600 var(--text-h4-size)/1.25 var(--font-sans); }
.mcard__age { font: 500 var(--text-caption-size)/1 var(--font-mono); color: var(--color-text-secondary); }
.mcard__facts { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.mcard__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font: 400 var(--text-body-s-size)/1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.mcard__price b { font: 700 var(--text-h4-size)/1 var(--font-mono); color: var(--color-text-primary); white-space: nowrap; }
.mcard__next { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font: 400 var(--text-body-s-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }
.mcard__next b { font: 700 var(--text-body-s-size)/1.4 var(--font-mono); color: var(--color-text-primary); }
.mcard__next--none { font-weight: 500; color: var(--color-accent-text); }
.mcard__why {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font: 400 var(--text-body-s-size)/1.4 var(--font-sans);
  color: var(--color-text-primary);
}
.mcard__btn { margin-top: auto; width: 100%; }
.btn--chosen { background: var(--color-surface-inverse); color: var(--color-text-inverse); cursor: default; }

.empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.empty .btn--outline { border-color: var(--color-text-primary); }

/* ---------- 03: календарь и сетка времени ---------- */

.when { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.when[hidden] { display: none; }
/* Узкая колонка шага (рядом сводка или телефон): календарь над сеткой. */
.flow__main { container-type: inline-size; }
@container (max-width: 720px) {
  .when { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
.sheet { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface); color: var(--color-text-primary); }

.cal { gap: var(--space-3); }
.cal__skel { height: calc(var(--space-24) * 3); }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.cal__month { font: 700 var(--text-body-l-size)/1.2 var(--font-mono); }
.cal__navs { display: flex; gap: var(--space-1); }
.cal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-text-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}
.cal__nav:hover:not(:disabled) { background: var(--color-text-primary); color: var(--color-surface); }
.cal__nav:disabled { border-color: var(--color-border); color: var(--color-border-strong); cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__wd { text-align: center; font: 600 var(--text-overline-size)/var(--space-6) var(--font-mono); color: var(--color-text-secondary); text-transform: uppercase; }
.cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: calc(var(--space-12) - 2px);
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  color: var(--color-text-primary);
  font: 600 var(--text-body-s-size)/1 var(--font-mono);
  cursor: pointer;
}
.cal__day:hover:not(:disabled) { border-color: var(--color-text-primary); }
.cal__dot { width: 5px; height: 5px; visibility: hidden; background: currentColor; }
.cal__day--ok .cal__dot { visibility: visible; }
.cal__day--none { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-text-muted); text-decoration: line-through; }
.cal__day--off {
  background: repeating-linear-gradient(135deg, var(--color-bg) 0 6px, var(--color-border) 6px 12px);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.cal__day--past, .cal__day--out { background: transparent; border-color: transparent; color: var(--color-border-strong); cursor: default; }
.cal__day--loading { animation: skel-pulse 1.4s ease-in-out infinite; background: var(--color-bg); color: var(--color-text-muted); }
.cal__day--error { border-style: dashed; color: var(--color-text-muted); }
.cal__day--today { border: 2px solid var(--color-text-primary); }
.cal__day--sel, .cal__day--sel:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-button-text); text-decoration: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cal__day--loading { animation: none; }
}
.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font: 400 var(--text-overline-size)/1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.cal__key { display: flex; align-items: center; gap: var(--space-2); }
.cal__mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
.cal__mark--ok { width: 6px; height: 6px; background: var(--color-text-primary); }
.cal__mark--none { width: auto; height: auto; font: 600 var(--text-overline-size)/1 var(--font-mono); color: var(--color-text-muted); text-decoration: line-through; }
.cal__mark--off { background: repeating-linear-gradient(135deg, var(--color-bg) 0 3px, var(--color-border) 3px 6px); }
.cal__mark--sel { background: var(--color-accent); }

.day { gap: var(--space-5); min-height: calc(var(--space-24) * 3); }
.day__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.day__title { font: 700 var(--text-body-l-size)/1.2 var(--font-mono); }
.day__meta { font: 400 var(--text-caption-size)/1.3 var(--font-sans); color: var(--color-text-secondary); }
.day__loading { display: flex; align-items: center; gap: var(--space-3); font: 400 var(--text-body-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }

.slot-group { display: flex; flex-direction: column; gap: var(--space-2); }
.slot-group__label { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.slot-skel { height: calc(var(--space-12) + var(--space-2)); }
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: calc(var(--space-12) + var(--space-2));
  padding: 0 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
  color: var(--color-text-primary);
  font: 600 var(--text-body-size)/1 var(--font-mono);
  cursor: pointer;
}
.slot__sub { font: 500 var(--text-overline-size)/1 var(--font-sans); color: var(--color-text-muted); text-decoration: none; }
.slot__sub:empty { display: none; }
.slot--sel { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-button-text); }
.slot--sel .slot__sub { color: var(--color-button-text); }
.slot--busy { background: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); text-decoration: line-through; cursor: not-allowed; }
.slot--short { border-style: dashed; color: var(--color-text-muted); cursor: not-allowed; }
.slot--hover { background: var(--color-bg); border: 2px solid var(--color-text-primary); color: var(--color-text-primary); }

.day__chosen {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  font: 400 var(--text-body-size)/1.4 var(--font-sans);
}
.day__chosen b { font: 700 var(--text-body-size)/1.4 var(--font-mono); }
.day__chosen-text { display: flex; flex-direction: column; gap: var(--space-1); }
.day__end { font-weight: 600; }
.day__chosen--hint { color: var(--color-text-secondary); font-size: var(--text-body-s-size); }

.day-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-primary);
}
.day-empty > .icon { color: var(--color-text-muted); }
.day-empty__title { font: 700 var(--text-body-size)/1.35 var(--font-mono); }
.day-empty__near { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font: 400 var(--text-body-size)/1.45 var(--font-sans); color: var(--color-text-secondary); }
.day-empty__near b { font: 700 var(--text-body-size)/1.45 var(--font-mono); color: var(--color-text-primary); }
.day-empty__tips { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.day-empty__kicker { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.day-empty__tips ul { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font: 400 var(--text-body-s-size)/var(--text-body-s-line) var(--font-sans); }
.day-empty__tips a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }

.btn--dark { background: var(--color-text-primary); color: var(--color-surface); border-color: var(--color-text-primary); }
.btn--dark:hover { background: var(--color-text-secondary); color: var(--color-surface); }

.nowin { align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.nowin > .icon { color: var(--color-text-muted); }
.nowin__title { font: 700 var(--text-h4-size)/1.3 var(--font-mono); }
.nowin__text { font: 400 var(--text-body-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }

/* ---------- 04: таймер резерва ---------- */

.hold { position: sticky; top: calc(var(--space-16) + var(--space-2)); z-index: 45; }
.hold__box { background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-text-primary); }
.hold__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.hold__text { flex: 1; font: 400 var(--text-body-size)/1.35 var(--font-sans); }
.hold__time { font: 700 var(--text-h3-size)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.hold__track { display: block; height: 4px; background: var(--color-border); }
.hold__bar { display: block; height: 100%; background: var(--color-text-primary); transition: width .25s linear; }
.hold__box--warn { border-color: var(--color-accent); }
.hold__box--warn .hold__row { color: var(--color-accent-text); }
.hold__box--warn .hold__text { font-weight: 600; }
.hold__box--warn .hold__bar { background: var(--color-accent); }
.hold__box--exp { background: var(--color-bg); border-color: var(--color-border-strong); }
.hold__box--exp .hold__row { color: var(--color-text-secondary); }
.hold__box--exp .hold__text { font-weight: 600; }
.hold__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
@media (prefers-reduced-motion: reduce) {
  .hold__bar { transition: none; }
}

/* ---------- 04: сводка визита и форма ---------- */

.confirm { display: flex; flex-direction: column; gap: var(--space-4); }
.confirm[hidden] { display: none; }
.confirm__visit { gap: 0; padding: 0; }
.confirm__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.confirm__cell { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.confirm__kicker { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.confirm__svc { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 var(--text-body-size)/1.4 var(--font-sans); }
.confirm__svc b { font: 600 var(--text-body-s-size)/1.4 var(--font-mono); white-space: nowrap; }
.confirm__master { font: 500 var(--text-body-size)/1.4 var(--font-sans); }
.confirm__muted { font-weight: 400; color: var(--color-text-secondary); }
.confirm__when { font: 700 var(--text-body-l-size)/1.3 var(--font-mono); }
.confirm__edit { display: inline-flex; align-items: center; }
.confirm__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font: 400 var(--text-body-s-size)/1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.confirm__total b { font: 700 var(--text-h3-size)/1 var(--font-mono); color: var(--color-text-primary); white-space: nowrap; }
.confirm__info { display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); font: 400 var(--text-caption-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }

.contact { gap: var(--space-5); }
.contact__title { font: 700 var(--text-body-l-size)/1.2 var(--font-mono); }
#alerts { display: flex; flex-direction: column; gap: var(--space-3); }
#alerts:empty { display: none; }

/* 04П: БЫЛО → СТАЛО и пояснение про контакты. */
#compare { display: flex; flex-direction: column; gap: var(--space-4); }
#compare[hidden] { display: none; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
.compare__cell { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); color: var(--color-text-primary); }
.compare__cell--was { background: var(--color-bg); color: var(--color-text-secondary); }
.compare__cell--now { border: 2px solid var(--color-accent); padding: calc(var(--space-5) - 2px); }
.compare__kicker { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.compare__when { font: 700 var(--text-body-l-size)/1.3 var(--font-mono); }
.compare__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-accent); }
.compare-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  font: 400 var(--text-body-size)/1.45 var(--font-sans);
  color: var(--color-text-secondary);
}

/* Время заняли: варианты рядом и выбор другого времени. */
.taken { align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.taken > .icon { color: var(--color-text-muted); }
.taken__title { font: 700 var(--text-h4-size)/1.3 var(--font-mono); }
.taken__text { font: 400 var(--text-body-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }
.taken__kicker { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.taken__alts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.taken__alt { text-transform: none; letter-spacing: 0; }


/* ---------- Окна М1–М3 ---------- */

/* Окно на весь экран — это и затемнение: ::backdrop не во всех браузерах видит переменные из tokens.css. */
.modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-4);
  border: 0;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
}
.modal[open] { display: flex; align-items: center; justify-content: center; }
.modal::backdrop { background: transparent; }
.modal__box { width: 100%; max-width: 460px; max-height: 100%; overflow-y: auto; background: var(--color-surface); color: var(--color-text-primary); }
.modal__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.modal__icon { display: flex; color: var(--color-accent-text); }
.modal__title { font: 700 var(--text-h4-size)/1.25 var(--font-mono); }
.modal__text { font: 400 var(--text-body-size)/1.5 var(--font-sans); color: var(--color-text-secondary); }
.modal__text b { color: var(--color-text-primary); }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.modal__btn { flex: 1 1 auto; padding: 0 var(--space-4); }

/* ---------- 05: запись создана ---------- */

.done { max-width: 760px; padding-top: var(--space-10); padding-bottom: var(--space-16); }
.done__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid var(--color-text-primary);
}
.done__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-12) + var(--space-2));
  height: calc(var(--space-12) + var(--space-2));
  background: var(--color-success);
  color: var(--color-button-text);
}
.done__check .icon { stroke-width: 2; }
.done__title { font: 700 var(--text-h1-size)/var(--text-h1-line) var(--font-mono); letter-spacing: var(--text-h1-tracking); }
.done__num { font: 700 var(--text-h4-size)/1 var(--font-mono); color: var(--color-text-secondary); }
/* 05П: старое время зачёркнуто → новое. */
.done__moved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font: 600 var(--text-body-size)/1.4 var(--font-mono); }
.done__moved s { color: var(--color-text-muted); }
.done__moved-note { font: 400 var(--text-body-size)/1.45 var(--font-sans); color: var(--color-text-secondary); }
.done__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font: 400 var(--text-body-size)/1.45 var(--font-sans);
}
.done__fact { display: flex; align-items: flex-start; gap: var(--space-3); }
.done__when { font: 600 var(--text-body-size)/1.45 var(--font-mono); }
.done__total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.done__total b { font: 700 var(--text-h3-size)/1 var(--font-mono); white-space: nowrap; }
.done__info { display: flex; gap: var(--space-2); font: 400 var(--text-caption-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }
.done__save { gap: var(--space-3); }
.done__save-title { font: 700 var(--text-body-size)/1.2 var(--font-mono); }
.done__save-text { font: 400 var(--text-body-s-size)/var(--text-body-s-line) var(--font-sans); color: var(--color-text-secondary); }
.done__link {
  padding: var(--space-3);
  background: var(--color-bg);
  font: 500 var(--text-caption-size)/1.4 var(--font-mono);
  word-break: break-all;
  user-select: all;
}
.done__status { font: 500 var(--text-body-s-size)/1.4 var(--font-sans); color: var(--color-success-text); }
.done__status:empty { display: none; }
.done__cancel { border-color: var(--color-error-text); color: var(--color-error-text); }
.done__cancel:hover { background: var(--color-error-text); color: var(--color-bg); }
.done__home { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 4px; }
.done__home:hover { color: var(--color-accent-text); }

/* ---------- НАЗАД / ПРОДОЛЖИТЬ под шагом ---------- */

.flow-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.flow-nav__hint { margin-left: auto; font: 400 var(--text-body-s-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }
[data-continue] { cursor: pointer; }
[data-continue][aria-disabled="true"], [data-submit][aria-disabled="true"] { cursor: not-allowed; }

/* ---------- Сводка «Ваша запись» ---------- */

.summary { position: sticky; top: calc(var(--space-16) + var(--space-6)); }
.summary__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-text-primary);
}
.summary__kicker { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-secondary); }
.summary__services { display: flex; flex-direction: column; gap: var(--space-2); }
.summary__count { font: 600 var(--text-overline-size)/1 var(--font-mono); color: var(--color-text-muted); }
.summary__svc { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 var(--text-body-size)/1.35 var(--font-sans); }
.summary__svc b { font: 600 var(--text-body-s-size)/1.35 var(--font-mono); white-space: nowrap; }
.summary__empty { font: 400 var(--text-body-size)/1.35 var(--font-sans); color: var(--color-text-muted); }
.summary__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font: 400 var(--text-body-size)/1.4 var(--font-sans);
}
.summary__fact { display: flex; align-items: flex-start; gap: var(--space-3); }
.summary__mono { font: 600 var(--text-body-s-size)/1.4 var(--font-mono); }
.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font: 600 var(--text-body-s-size)/1 var(--font-mono);
}
.summary__total b { font: 700 var(--text-h3-size)/1 var(--font-mono); white-space: nowrap; }
.summary__note { font: 400 var(--text-caption-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }
.summary__info { display: flex; gap: var(--space-2); font: 400 var(--text-caption-size)/1.4 var(--font-sans); color: var(--color-text-secondary); }
#totals-msg:not(:empty) { margin-top: var(--space-3); }
.summary__bar { display: none; }

/* ---------- Узкий экран: сводка — нижняя панель ---------- */

@media (max-width: 1023px) {
  .flow { padding-bottom: 0; }
  .flow__grid { display: block; }
  .flow-nav { display: none; }

  .summary {
    position: sticky;
    top: auto;
    bottom: 0;
    z-index: 40;
    margin: var(--space-6) calc(-1 * var(--space-8)) 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-text-primary);
  }
  .summary__box { display: none; max-height: 50vh; overflow-y: auto; padding: var(--space-4) var(--space-8); border: 0; border-bottom: 1px solid var(--color-border); }
  .summary--open .summary__box { display: flex; }
  .summary__bar { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-8); }
  .summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--space-12);
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-text-primary);
    font: 600 var(--text-body-s-size)/1.3 var(--font-mono);
    text-align: left;
    cursor: pointer;
  }
  .summary__bar .flow-nav__hint { margin-left: 0; }
  .summary__actions { display: flex; gap: var(--space-2); }
  .summary__back { flex: none; width: var(--space-12); padding: 0; }
  .summary__next { flex: 1; }
}

@media (max-width: 767px) {
  .wrap { padding: 0 var(--space-4); }
  .flow { padding-top: var(--space-5); }
  .flow__title { font-size: var(--text-h2-size-mobile); }
  .stepper__label { display: block; }
  .stepper__text { display: none; }
  .picks { grid-template-columns: 1fr; gap: var(--space-2); }
  .mcards { grid-template-columns: 1fr; }
  .mcard__photo { height: calc(var(--space-24) + var(--space-4)); }
  .when { grid-template-columns: 1fr; gap: var(--space-3); }
  .sheet { padding: var(--space-4); }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .slot { height: calc(var(--space-12) + var(--space-1)); }
  .summary { margin: var(--space-6) calc(-1 * var(--space-4)) 0; }
  .summary__box, .summary__bar { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hold__row { padding: var(--space-2) var(--space-3); }
  .hold__text { font-size: var(--text-body-s-size); }
  .confirm__row, .confirm__total { padding-left: var(--space-4); padding-right: var(--space-4); }
  .taken { padding: var(--space-5); }
  .compare { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .compare__arrow .icon { transform: rotate(90deg); }
  .compare__cell { padding: var(--space-4); }
  .compare__cell--now { padding: calc(var(--space-4) - 2px); }
  .done { padding-top: var(--space-5); }
  .done__title { font-size: var(--text-h1-size-mobile); }
  .done .btn { white-space: normal; text-align: center; }
}