/*
 * Запись: З1 · Услуги, З2 · Мастер (дальше — З3, З4) — по BookingWizard.dc.html прототипа:
 * заголовок «Запись» и шаги, слева шаг (8 колонок), справа панель «Ваша запись» (4), внизу «Назад / Далее».
 * Значения — из tokens.css; числа px — только геометрия (ширина поиска, круги и стикеры иллюстраций).
 */
.booking { min-height: 100vh; padding: 0 var(--space-20) var(--space-24); }
.booking__inner { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); }
.booking__head { display: flex; flex-direction: column; gap: var(--space-6); }
.booking__title {
  font-family: var(--font-display); font-size: var(--font-size-h1); line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1); text-transform: uppercase;
}
.booking__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.booking__main { grid-column: span 8; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }

/* ---------- Шаги ---------- */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.step, .step__link { display: flex; flex-direction: column; gap: var(--space-2); min-height: var(--control-height-m); }
.step__link { color: var(--color-text); text-decoration: none; border-radius: var(--radius-cell); }
.step__link:hover { color: var(--color-text-link); }
.step__bar { height: var(--size-progress); border-radius: var(--radius-pill); background: var(--color-border); }
.step__label {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); font-weight: var(--font-weight-label);
}
/* Кружок с номером: 22px в прототипе → --icon-size-xl (24), как иконки 22 → 24 (tokens-audit) */
.step__marker {
  width: var(--icon-size-xl); height: var(--icon-size-xl); flex: none; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-button);
}
.step--done .step__bar { background: var(--color-border-ink); }
.step--done .step__label { text-decoration: underline; text-decoration-thickness: var(--link-underline-thickness); text-underline-offset: var(--link-underline-offset); }
.step--done .step__marker { background: var(--color-border-ink); color: var(--color-text-on-brand); }
.step--current .step__bar { background: var(--color-button-primary-bg); box-shadow: inset 0 0 0 var(--border-width-field) var(--color-border-ink); }
.step--current .step__label { color: var(--color-text-link); font-weight: var(--font-weight-overline); }
.step--current .step__marker { background: var(--color-button-primary-bg); color: var(--color-text-on-brand); border: var(--border-width-button) solid var(--color-border-ink); }
.step--future .step__label { color: var(--color-text-secondary); font-weight: var(--font-weight-helper); }
.step--future .step__marker { border: var(--border-width-field) solid var(--color-text-disabled); }

/* ---------- Шаг: заголовок, предупреждение ---------- */
.step-section { display: flex; flex-direction: column; gap: var(--space-5); }
.step-section__head { display: flex; flex-direction: column; gap: var(--space-1-5); }
.step-section__title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-h3); letter-spacing: var(--letter-spacing-h3); }
.step-section__sub {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary);
}
.message--warning, .message--info { align-items: center; }
.message__close {
  width: var(--control-height-s); height: var(--control-height-s); flex: none; border: 0; border-radius: var(--radius-cell);
  display: grid; place-items: center; background: transparent; color: var(--color-warning-text); cursor: pointer;
}
.message__close:hover { background: var(--color-warning-bg-hover); }
.message__action {
  height: var(--control-height-m); padding: 0 var(--space-3-5); flex: none; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-info-text); cursor: pointer;
  font-size: var(--font-size-nav); line-height: var(--line-height-single); font-weight: var(--font-weight-button);
  letter-spacing: var(--letter-spacing-button); text-transform: uppercase;
}
.message__action:hover { background: var(--color-info-bg-hover); }

/* ---------- З1: поиск и услуги ---------- */
.filters { display: flex; flex-direction: column; gap: var(--space-3); }
.search {
  display: flex; align-items: center; gap: var(--space-2-5); max-width: 420px;
  height: var(--control-height-field); padding: 0 var(--space-1-5) 0 var(--space-3-5);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border-field);
  border-radius: var(--radius-pill); color: var(--color-text-secondary);
}
.search:focus-within { border-color: var(--color-border-field-focus); outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
.search__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-text);
  font-family: var(--font-text); font-size: var(--font-size-body-m); line-height: var(--line-height-body-m);
}
.search__input::placeholder { color: var(--color-text-secondary); }
.search__input::-webkit-search-cancel-button { display: none; } /* своя кнопка «Очистить» */
.search__clear {
  width: var(--control-height-s); height: var(--control-height-s); flex: none; border: 0; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: transparent; color: var(--color-text-description); cursor: pointer;
}
.search__clear:hover { background: var(--color-bg-muted); }

.service-picks { display: flex; flex-direction: column; gap: var(--space-2); }
.service-pick {
  border-radius: var(--radius-panel); background: var(--color-bg-surface);
  border: var(--border-width-field) solid var(--color-border);
  transition: border-color var(--duration-instant) var(--ease-standard);
}
.service-pick:hover { border-color: var(--color-border-ink); }
/* Выбрана: фон primary-50 (--color-button-ghost-bg-hover), рамка primary 2px */
.service-pick--on, .service-pick--on:hover { background: var(--color-button-ghost-bg-hover); border: var(--border-width-button) solid var(--color-button-primary-bg); }
.service-pick__toggle {
  width: 100%; display: flex; gap: var(--space-3-5); align-items: center; padding: var(--space-4);
  border: 0; border-radius: var(--radius-panel); background: transparent; color: var(--color-text); text-align: left; cursor: pointer;
}
.service-pick__box {
  width: var(--size-checkbox); height: var(--size-checkbox); flex: none; border-radius: var(--radius-badge);
  display: grid; place-items: center; border: var(--border-width-button) solid var(--color-border-ink);
  background: var(--color-bg-surface); color: var(--color-text-on-brand);
}
.service-pick__box .icon { visibility: hidden; }
.service-pick--on .service-pick__box { background: var(--color-button-primary-bg); }
.service-pick--on .service-pick__box .icon { visibility: visible; }
.service-pick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.service-pick__name { font-size: var(--font-size-body-m); line-height: var(--line-height-label); font-weight: var(--font-weight-h4); }
.service-pick__meta, .service-pick__note { color: var(--color-text-secondary); }
.service-pick--on .service-pick__meta, .service-pick--on .service-pick__note { color: var(--color-text-description); }
.service-pick__meta {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-helper);
}
.service-pick__price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); white-space: nowrap; }
.service-pick__sum { font-size: var(--font-size-h4); line-height: var(--line-height-single); font-weight: var(--font-weight-h4); font-variant-numeric: tabular-nums; }
.service-pick__note { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-caption); }
/* «Подробнее» и описание (ui-map, раздел 7): отступ слева — под название, после чекбокса */
.service-pick__extra {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + var(--size-checkbox) + var(--space-3-5));
  margin-top: calc(-1 * var(--space-3));
}
.service-pick__more {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height-s); padding: 0;
  border: 0; background: transparent; color: var(--color-text-link); cursor: pointer;
  font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
}
.service-pick__more:hover { color: var(--color-text-link-hover); }
.service-pick__more[aria-expanded="true"] .icon--chevron-down, .service-pick__more[aria-expanded="false"] .icon--chevron-up { display: none; }
.service-pick__desc { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-description); }

.service-pick--loading { display: flex; align-items: center; gap: var(--space-3-5); padding: var(--space-4); }
.service-pick--loading:hover { border-color: var(--color-border); }
.service-pick__box-skeleton { width: var(--size-checkbox); height: var(--size-checkbox); flex: none; }
.service-pick__skeleton-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }

/* Пустой результат поиска и другие пустые состояния шага */
.step-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3-5);
  padding: var(--space-7) var(--space-6); border-radius: var(--radius-panel);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border);
}
.step-empty__icon {
  width: 64px; height: 64px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--color-bg-muted); border: var(--border-width-button) solid var(--color-border-ink); box-shadow: var(--shadow-button);
}
.step-empty__title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); }
.step-empty__text { max-width: 320px; font-size: var(--font-size-title-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary); }

/* ---------- З2: мастера ---------- */
.master-grid { --master-card-photo-height: 180px; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.master-grid > li { display: flex; }
.master-grid .master-card { position: relative; flex: 1; }
.master-grid .master-card .btn { margin-top: auto; }
.master-card__any {
  height: var(--master-card-photo-height); border-radius: var(--radius-block); background: var(--color-bg-muted);
  display: grid; place-items: center;
}
.master-card__any-sticker {
  width: 72px; height: 72px; border-radius: var(--radius-panel); display: grid; place-items: center;
  background: var(--color-bg-surface); border: var(--border-width-ink) solid var(--color-border-ink); box-shadow: var(--shadow-raised);
  transform: rotate(-6deg);
}
.master-card__note { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary); }
/* Выбранный мастер: фон primary-50, коралловая рамка, тень; бейдж «Выбран» и переход дальше */
.master-card--picked, .master-card--picked:hover {
  background: var(--color-button-ghost-bg-hover); border: var(--border-width-ink) solid var(--color-button-primary-bg);
  box-shadow: var(--shadow-raised); transform: none;
}
.master-card--picked .master-card__any { background: var(--color-button-ghost-bg-pressed); }
.master-card--picked .master-card__spec, .master-card--picked .master-card__note { color: var(--color-text-description); }
.master-card--picked .chip-count { background: var(--color-bg-surface); }
.master-card__picked {
  position: absolute; top: var(--space-5); right: var(--space-5);
  display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3) var(--space-1-5) var(--space-2);
  border-radius: var(--radius-pill); background: var(--color-border-ink); color: var(--color-text-on-brand);
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-button); letter-spacing: var(--letter-spacing-button);
}
.master-card__picked-check {
  width: var(--icon-size-l); height: var(--icon-size-l); border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--color-accent); color: var(--color-text);
}
.master-card--picked .btn { --btn-bg: var(--color-button-primary-bg); --btn-bg-hover: var(--color-button-primary-bg-hover); --btn-bg-pressed: var(--color-button-primary-bg-pressed); --btn-text: var(--color-button-primary-text); }
.master-card--loading:hover { transform: none; box-shadow: none; border-color: var(--color-border); }

/* «Не выполняют все выбранные услуги» — свёрнутый список неактивных мастеров */
.others { border-radius: var(--radius-panel); background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border); }
.others--open { border-color: var(--color-border-ink); }
.others__toggle {
  width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2-5) var(--space-2-5) var(--space-2-5) var(--space-5);
  border: 0; border-radius: var(--radius-panel); background: transparent; color: var(--color-text); text-align: left; cursor: pointer;
}
.others__title {
  display: flex; align-items: center; gap: var(--space-2-5);
  font-size: var(--font-size-body-m); line-height: var(--line-height-title-s); font-weight: var(--font-weight-h4);
}
.others__title .icon { color: var(--color-text-secondary); }
.others__chevron {
  width: var(--size-icon-tile); height: var(--size-icon-tile); flex: none; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border-dashed);
}
.others__toggle[aria-expanded="true"] .icon--chevron-down, .others__toggle[aria-expanded="false"] .icon--chevron-up { display: none; }
.others__list { list-style: none; padding: 0 var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.other-master {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-block); background: var(--color-bg-page); border: var(--border-width-field) dashed var(--color-border-dashed);
}
.other-master__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.other-master__name { font-size: var(--font-size-title-s); line-height: var(--line-height-label); font-weight: var(--font-weight-title-s); color: var(--color-text-description); }
.other-master__does { font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-text-secondary); }
.badge-off {
  display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-badge); padding: 0 var(--space-2-5); flex: none;
  border-radius: var(--radius-badge); background: var(--color-bg-muted); color: var(--color-text-description);
  border: var(--border-width-divider) dashed var(--color-text-disabled);
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
}

/* «Нет мастера, который выполняет все выбранные услуги» */
.no-master {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4);
  padding: var(--space-10) var(--space-8); border-radius: var(--radius-modal);
}
.illu--no-master { width: 200px; height: 140px; display: grid; place-items: center; }
.illu--no-master .illu__board {
  width: 96px; height: 96px; transform: var(--illu-plate); padding: 9px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1-5);
  background: var(--color-bg-page); border: var(--border-width-ink) solid var(--color-border-ink); border-radius: var(--radius-field);
  box-shadow: -9px 9px 0 var(--color-border-ink);
}
.illu--no-master .illu__cell { display: grid; place-items: center; background: var(--color-bg-surface); }
.illu--no-master .illu__cell--empty { border: var(--border-width-field) dashed var(--color-border-dashed); border-radius: var(--radius-badge); }
.illu--no-master .illu__sticker {
  top: var(--space-1); right: 22px; width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--color-accent); box-shadow: var(--shadow-button); transform: rotate(-8deg);
}
.no-master__title {
  max-width: 560px; color: var(--color-text-on-brand); text-transform: uppercase; text-wrap: balance;
  font-family: var(--font-display); font-size: var(--font-size-modal-title); line-height: var(--line-height-modal-title); font-weight: var(--font-weight-display-xl);
}
.no-master__text { max-width: var(--measure-lead); font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); font-weight: var(--font-weight-helper); color: var(--color-text); text-wrap: pretty; }
.no-master__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.no-master .btn--ghost { --btn-text: var(--color-text); --btn-text-pressed: var(--color-text); --btn-bg-hover: var(--color-bg-muted); --btn-bg-pressed: var(--color-border); }
.no-master .btn--ghost[aria-expanded="true"] .icon--chevron-down, .no-master .btn--ghost[aria-expanded="false"] .icon--chevron-up { display: none; }

.per-service { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.per-service__row {
  display: flex; align-items: center; gap: var(--space-3-5); padding: var(--space-4);
  border-radius: var(--radius-panel); background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border);
}
.per-service__who { display: flex; align-items: center; gap: var(--space-2-5); min-width: 220px; }
.per-service__who b { display: block; font-size: var(--font-size-title-s); line-height: var(--line-height-label); }
.per-service__who span { font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-text-secondary); }
.per-service__none { min-width: 220px; font-size: var(--font-size-body-s); color: var(--color-text-secondary); }
.step-note {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary);
}

/* ---------- Нижняя строка ---------- */
.booking-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-top: var(--space-6); border-top: var(--border-width-field) solid var(--color-border);
}
.booking-foot__next { display: flex; align-items: center; gap: var(--space-4); }
.foot-hint {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-body-s); line-height: var(--line-height-helper); font-weight: var(--font-weight-helper); color: var(--color-text-secondary);
}

/* ---------- Панель «Ваша запись» ---------- */
.summary {
  grid-column: span 4; position: sticky; top: calc(var(--app-header-offset) + var(--space-6));
  container: summary / inline-size;
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--color-bg-surface); border: var(--border-width-button) solid var(--color-border-ink);
  border-radius: var(--radius-modal); box-shadow: var(--shadow-highlight);
}
.summary__title {
  color: var(--color-text-link);
  font-size: var(--font-size-overline); line-height: var(--line-height-overline); font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-overline);
}
.summary__group { display: flex; flex-direction: column; gap: var(--space-2-5); }
.summary__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.summary__label {
  display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary);
  font-size: var(--font-size-label); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
}
/* «Изменить»: зона нажатия выше строки за счёт полей */
.summary__edit {
  padding: var(--space-3-5) var(--space-1); margin: calc(-1 * var(--space-3-5)) 0;
  font-size: var(--font-size-label); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
}
.summary__empty { font-size: var(--font-size-title-s); line-height: var(--line-height-title-s); font-weight: var(--font-weight-helper); color: var(--color-text-secondary); }
.summary__divider { margin: 0; border: 0; border-top: var(--border-width-field) solid var(--color-bg-muted); }
.sum-services { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.sum-service {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
  border-radius: var(--radius-field); background: var(--color-bg-page);
}
.sum-service__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sum-service__name { font-size: var(--font-size-title-s); line-height: var(--line-height-label); font-weight: var(--font-weight-title-s); }
.sum-service__meta { font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-helper); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.sum-service__remove {
  width: var(--control-height-m); height: var(--control-height-m); flex: none; border: 0; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: transparent; color: var(--color-text-description); cursor: pointer;
}
.sum-service__remove:hover { background: var(--color-bg-muted); color: var(--color-text); }
.sum-master { display: flex; align-items: center; gap: var(--space-3); }
.sum-master__avatar--any {
  width: var(--size-avatar); height: var(--size-avatar); flex: none; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--color-bg-muted);
}
.sum-master__text { display: flex; flex-direction: column; gap: var(--space-1); }
.sum-master__name { font-size: var(--font-size-body-m); line-height: var(--line-height-label); }
.sum-master__spec { font-size: var(--font-size-helper); line-height: var(--line-height-label); color: var(--color-text-secondary); }
.summary__facts {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-3-5);
  font-size: var(--font-size-title-s); line-height: var(--line-height-title-s);
}
.summary__facts dt { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
.summary__facts dd { margin: 0; text-align: right; display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; }
.summary__value { font-weight: var(--font-weight-label); font-variant-numeric: tabular-nums; }
.summary__total {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3-5) var(--space-4); border-radius: var(--radius-block); background: var(--color-bg-muted);
}
.summary__total-text { display: flex; flex-direction: column; gap: var(--space-1); }
.summary__total-label { white-space: nowrap; font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-label); color: var(--color-text-description); }
/* Сумма 28px — размер --font-size-modal-title, шрифт текста, как в прототипе */
.summary__price { font-size: var(--font-size-modal-title); line-height: var(--line-height-single); font-weight: var(--font-weight-h4); font-variant-numeric: tabular-nums; }
.pay-tag {
  display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-marker); padding: 0 var(--space-2-5); flex: none;
  border-radius: var(--radius-badge); background: var(--color-tag-bg); color: var(--color-tag-text);
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
}
.sum-skeleton { width: 64px; }
.sum-skeleton--price { width: 120px; height: var(--font-size-modal-title); }
.sum-error {
  display: flex; align-items: flex-start; gap: var(--space-1-5);
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-error-text);
}
.sum-error .icon { margin-top: var(--space-0-5); }
.sum-error span { flex: 1; min-width: 0; }
.sum-error__retry {
  padding: 0; border: 0; background: transparent; color: var(--color-text-link); cursor: pointer;
  font-size: var(--font-size-helper); font-weight: var(--font-weight-label);
  text-decoration: underline; text-decoration-thickness: var(--link-underline-thickness); text-underline-offset: var(--link-underline-offset);
}

.load-error .btn { margin-top: var(--space-2); align-self: flex-start; }

/* ---------- Планшет и телефон ---------- */
@media (max-width: 1023px) {
  .booking { padding: 0 var(--space-4) var(--space-16); }
  .booking__main, .summary { grid-column: 1 / -1; }
  .summary { position: static; }
  .master-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .booking { padding: 0 var(--space-2) var(--space-12); }
  .steps { gap: var(--space-1); }
  .step__label { flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
  .search { max-width: none; }
  .master-grid { grid-template-columns: 1fr; }
  /* Одна строка: «Назад» — круглая кнопка-стрелка (подпись остаётся для экранного диктора), главное действие — на остальную ширину; подсказка — под ним */
  .booking-foot { align-items: flex-start; gap: var(--space-3); }
  .booking-foot__back { flex: none; width: var(--control-height-m); padding: 0; }
  .booking-foot__back-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .booking-foot__next { flex: 1; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
  .booking-foot__next > .btn { flex: 1; }
  .booking-foot__next > .foot-hint { order: 1; flex-basis: 100%; justify-content: center; }
  /* 320px: «Подтвердить перенос» помещается только без иконки */
  @media (max-width: 359px) {
    .booking-foot__next .btn:not([aria-busy]) .icon { display: none; }
  }
  .per-service__row { flex-wrap: wrap; }
  .per-service__who, .per-service__none { min-width: 0; }
  .no-master { padding: var(--space-8) var(--space-5); }
  .service-pick__toggle { align-items: flex-start; }
}

/* ---------- З3: календарь и свободное время ---------- */
.date-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.date-head .btn { flex: none; }
.date-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-6); align-items: stretch; }
.cal, .day-slots {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border); border-radius: var(--radius-card);
}
.cal__head { display: flex; align-items: center; justify-content: space-between; }
.cal__title {
  font-family: var(--font-display); font-size: var(--font-size-h3); line-height: var(--line-height-single);
  font-weight: var(--font-weight-h2); text-transform: uppercase;
}
.cal__nav {
  width: var(--control-height-m); height: var(--control-height-m); padding: 0; border-radius: var(--radius-pill);
  display: grid; place-items: center; cursor: pointer;
  border: var(--border-width-field) solid var(--color-border-dashed); background: var(--color-bg-surface); color: var(--color-text);
}
.cal__nav:hover:not(:disabled) { background: var(--color-bg-muted); }
.cal__nav:disabled { border-color: var(--color-border); background: var(--color-bg-page); color: var(--color-text-secondary); cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.cal__wd { text-align: center; font-size: var(--font-size-caption); line-height: var(--space-6); font-weight: var(--font-weight-label); color: var(--color-text-secondary); }
/* День: высота 56 — --control-height-l */
.cal__day {
  position: relative; height: var(--control-height-l); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  border: var(--border-width-field) solid transparent; border-radius: var(--radius-cell); background: transparent; color: var(--color-text);
  font-family: var(--font-text); font-size: var(--font-size-title-s); line-height: var(--line-height-single);
  font-weight: var(--font-weight-label); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--duration-instant) var(--ease-standard), border-color var(--duration-instant) var(--ease-standard);
}
.cal__day:hover:not(:disabled) { border-color: var(--color-border-ink); }
.cal__day:disabled { cursor: not-allowed; }
.cal__dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-success); }
.cal__tag { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-label); }
.cal__day--full { background: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 4px, var(--color-border) 4px 8px); color: var(--color-text-secondary); text-decoration: line-through; }
.cal__day--past { color: var(--color-text-secondary); text-decoration: line-through; font-weight: var(--font-weight-helper); }
.cal__day--day_off { color: var(--color-text-secondary); }
.cal__day--not_open { color: var(--color-text-secondary); border: var(--border-width-field) dashed var(--color-border); }
.cal__day--today { border: var(--border-width-button) solid var(--color-border-ink); }
.cal__day--picked, .cal__day--picked:hover:not(:disabled) {
  background: var(--color-button-primary-bg); color: var(--color-text-on-brand); text-decoration: none;
  border: var(--border-width-button) solid var(--color-border-ink); box-shadow: var(--shadow-chip); font-weight: var(--font-weight-h4);
}
.cal__day--picked .cal__dot { background: var(--color-text-on-brand); }
.cal__day--loading { cursor: default; }
.cal__skeleton { width: var(--space-5); height: var(--space-1-5); border-radius: var(--radius-pill); }
.cal__blank { height: var(--control-height-l); }
.cal__legend {
  list-style: none; margin: 0; padding: var(--space-2-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3-5);
  border-top: var(--border-width-field) solid var(--color-bg-muted);
  font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-caption); color: var(--color-text-description);
}
.cal__legend li { display: flex; align-items: center; gap: var(--space-1-5); }
.cal__legend--muted { color: var(--color-text-secondary); }
.cal__swatch { width: 18px; height: 18px; border-radius: var(--radius-badge); }
.cal__swatch--today { border: var(--border-width-button) solid var(--color-border-ink); }
.cal__swatch--picked { background: var(--color-button-primary-bg); border: var(--border-width-button) solid var(--color-border-ink); }
.cal__swatch--full { background: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 3px, var(--color-border) 3px 6px); }
.cal__horizon {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-field); background: var(--color-bg-muted);
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); font-weight: var(--font-weight-label); color: var(--color-text);
}

.day-slots { gap: var(--space-4); }
.day-slots__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: var(--control-height-m); }
.day-slots__title {
  color: var(--color-text-link);
  font-size: var(--font-size-overline); line-height: var(--line-height-overline); font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-overline);
}
.day-slots__count { flex: none; font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-caption); color: var(--color-text-secondary); }
#slots { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.day-slots__hours {
  display: flex; align-items: center; gap: var(--space-1-5); margin-top: calc(-1 * var(--space-2));
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-text-secondary);
}
.slot-group { display: flex; flex-direction: column; gap: var(--space-2); }
.slot-group__title {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-label); color: var(--color-text-description);
}
.slot-group__range { font-weight: var(--font-weight-helper); color: var(--color-text-secondary); }
.slot-group__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.slot {
  height: var(--size-slot); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  border-radius: var(--radius-field); border: var(--border-width-field) solid var(--color-border-field);
  background: var(--color-bg-surface); color: var(--color-text); cursor: pointer;
  font-family: var(--font-text); font-size: var(--font-size-h4); line-height: var(--line-height-single); font-weight: var(--font-weight-label);
  font-variant-numeric: tabular-nums;
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-spring);
}
.slot:hover:not(:disabled) { border-color: var(--color-border-ink); transform: translate(var(--shift-hover), var(--shift-hover)); box-shadow: var(--shadow-chip); }
.slot__note { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-label); }
.slot__time { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--font-size-title-s); font-weight: var(--font-weight-h4); }
.slot--picked, .slot--picked:hover:not(:disabled) {
  background: var(--color-button-primary-bg); color: var(--color-text-on-brand); cursor: default;
  border: var(--border-width-button) solid var(--color-border-ink); box-shadow: var(--shadow-chip); transform: none;
}
/* Занято: видно, но неактивно — штриховка, зачёркнутое время */
.slot--busy {
  border: 0; cursor: not-allowed; color: var(--color-text-secondary);
  background: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 5px, var(--color-border) 5px 10px);
}
.slot-skeleton { height: var(--size-slot); border-radius: var(--radius-field); }
.day-loading { display: flex; flex-direction: column; gap: var(--space-4); }
.day-loading__label {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); font-weight: var(--font-weight-label); color: var(--color-text-description);
}
.day-loading__label .icon { animation: day-loading-spin var(--duration-skeleton) linear infinite; } /* темп — как у заглушки */
@keyframes day-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .day-loading__label .icon { animation: none; } }
.day-slots__picked {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3-5);
  border-radius: var(--radius-block); background: var(--color-button-ghost-bg-hover); border: var(--border-width-field) solid var(--color-button-primary-bg);
  font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text);
}
.day-slots__picked > .icon { color: var(--color-button-primary-bg); }
.day-slots__pick-hint { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary); }

/* Нет свободных окон в этот день */
.empty-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3-5); padding: var(--space-6) var(--space-2); }
.empty-day__sticker {
  width: 72px; height: 72px; border-radius: var(--radius-panel); display: grid; place-items: center; transform: rotate(-6deg);
  background: repeating-linear-gradient(135deg, var(--color-bg-muted) 0 5px, var(--color-border) 5px 10px);
  border: var(--border-width-ink) solid var(--color-border-ink); box-shadow: var(--shadow-raised);
}
.empty-day__title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); }
.empty-day__text { max-width: 320px; font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-description); text-wrap: pretty; }
.empty-day__nearest { display: flex; justify-content: center; width: 100%; }
.empty-day__nearest .btn { white-space: normal; height: auto; min-height: var(--control-height-m); padding-block: var(--space-2); text-align: center; }
.empty-day__nearest-skeleton { width: 260px; height: var(--control-height-m); border-radius: var(--radius-pill); }
.empty-day__none { font-size: var(--font-size-body-s); color: var(--color-text-secondary); }
.empty-day__widen {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-2); text-align: left;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-block); background: var(--color-bg-page);
}
.empty-day__widen-title { font-size: var(--font-size-caption); line-height: var(--line-height-single); font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-button); text-transform: uppercase; color: var(--color-text-secondary); }
.empty-day__widen ul { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-description); }
.empty-day__widen a { font-weight: var(--font-weight-label); }

.day-prompt {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-2); color: var(--color-text-secondary);
  font-size: var(--font-size-title-s); line-height: var(--line-height-body-s); font-weight: var(--font-weight-helper);
}
.day-prompt__icon { width: var(--control-height-l); height: var(--control-height-l); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-bg-muted); color: var(--color-text); }
.day-error { display: flex; flex-direction: column; gap: var(--space-3); }
.day-error .btn { align-self: flex-start; }

/* Дата и время в панели «Ваша запись» */
.summary__when { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.summary__when b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.summary__when-edit { font-size: var(--font-size-helper); line-height: var(--line-height-single); font-weight: var(--font-weight-label); }

/* Узкая панель (окно 1024–1280px): подпись сверху, значение под ней — длинная дата не вылезает за рамку */
@container summary (max-width: 340px) {
  .summary__facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .summary__facts dd { justify-content: flex-start; text-align: left; white-space: normal; padding-left: calc(var(--icon-size-m) + var(--space-2)); }
  .summary__facts dd:not(:last-child) { margin-bottom: var(--space-2); }
  .summary__when { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
}

@media (max-width: 1023px) {
  .date-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .date-head { flex-direction: column; align-items: stretch; }
  .cal, .day-slots { padding: var(--space-3); }
  .cal__day { height: var(--control-height-m); }
  .cal__blank { height: var(--control-height-m); }
  .slot__time { font-size: var(--font-size-helper); gap: var(--space-0-5); }
}

/* ---------- З4: подтверждение (и З6, З7 — состояния той же страницы) ---------- */
/* Гость: войти, чтобы записаться */
.confirm-guest {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5);
  border-radius: var(--radius-panel); background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border);
}
.confirm-guest__text { display: flex; flex-direction: column; gap: var(--space-1); }
.confirm-guest__title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); }
.confirm-guest__lead { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-description); }

.confirm-form { display: flex; flex-direction: column; gap: var(--space-5); }
/* Контакты из профиля — только чтение */
.contact-card {
  margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  border-radius: var(--radius-panel); background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border);
}
.contact-card__title {
  float: left; width: 100%; padding: 0; margin-bottom: var(--space-1); color: var(--color-text-link);
  font-size: var(--font-size-overline); line-height: var(--line-height-overline); font-weight: var(--font-weight-overline); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase;
}
.contact-card__list { margin: 0; display: flex; flex-direction: column; gap: var(--space-2-5); clear: both; }
.contact-card__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.contact-card__row dt {
  display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary);
  font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-label);
}
.contact-card__row dd {
  margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
  font-size: var(--font-size-body-m); line-height: var(--line-height-label); font-weight: var(--font-weight-label);
}
.contact-card__skeleton { width: 160px; }
.contact-card__note {
  display: flex; align-items: flex-start; gap: var(--space-1-5); padding-top: var(--space-3); border-top: var(--border-width-field) solid var(--color-bg-muted);
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-text-secondary);
}
.contact-card__note .icon { margin-top: var(--space-0-5); }

/* Комментарий для мастера: поле как в прототипе, счётчик справа */
.comment__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.comment__optional { font-weight: var(--font-weight-body); color: var(--color-text-secondary); }
.comment__count { flex: none; font-size: var(--font-size-helper); font-weight: var(--font-weight-helper); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.comment__input {
  resize: vertical; min-height: 96px; padding: var(--space-3) var(--space-3-5);
  background: var(--color-bg-surface); border: var(--border-width-field) solid var(--color-border-field); border-radius: var(--radius-field);
  font-family: var(--font-text); font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); color: var(--color-text);
}
.comment__input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.comment__input:focus { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-color: var(--color-border-field-focus); }
.field--invalid .comment__input { border: var(--border-width-button) solid var(--color-error); }

/* Нижняя строка З4: гостю — вход и регистрация, клиенту — «Подтвердить запись» с подписью */
.confirm-cta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.confirm-cta__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.btn[aria-busy] .icon { animation: day-loading-spin var(--duration-skeleton) linear infinite; }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy] .icon { animation: none; } }

/* Отсчёт удержания в панели «Ваша запись»: обычный — спокойная плашка, последняя минута — предупреждение */
.hold {
  display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-3) var(--space-3-5);
  border-radius: var(--radius-block); border: var(--border-width-field) solid var(--color-border);
  background: var(--color-bg-page); color: var(--color-text-description);
  font-size: var(--font-size-body-s); line-height: var(--line-height-body-s);
}
.hold > .icon { flex: none; }
.hold > .icon--loader { animation: day-loading-spin var(--duration-skeleton) linear infinite; }
@media (prefers-reduced-motion: reduce) { .hold > .icon--loader { animation: none; } }
.hold__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.hold__title { font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-title-s); color: var(--color-text); }
.hold__sub { font-size: var(--font-size-helper); line-height: var(--line-height-helper); color: var(--color-text-secondary); }
.hold__clock {
  flex: none; font-family: var(--font-display); font-size: var(--font-size-h3); line-height: var(--line-height-single);
  font-weight: var(--font-weight-display-xl); font-variant-numeric: tabular-nums; color: var(--color-text);
}
.hold--held > .icon { color: var(--color-success-text); }
.hold--last { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.hold--last > .icon { color: var(--color-warning-text); }
.hold--last .hold__title { color: var(--color-warning-title); }
.hold--last .hold__sub { color: var(--color-warning-body); }
.hold--last .hold__clock { color: var(--color-warning-text); }
.hold--expired { flex-wrap: wrap; background: var(--color-bg-muted); }
.hold--expired .hold__again { width: 100%; }
/* Отсчёт у кнопки — только на планшете и телефоне: там панель «Ваша запись» ниже формы */
.hold-mini { display: none; align-items: center; gap: var(--space-1-5); font-size: var(--font-size-body-s); line-height: var(--line-height-single); font-weight: var(--font-weight-label); color: var(--color-text-description); font-variant-numeric: tabular-nums; }
.hold-mini--last { color: var(--color-warning-text); }
@media (max-width: 1023px) { .hold-mini:not([hidden]) { display: flex; } }

.summary__address {
  display: flex; align-items: center; gap: var(--space-1-5); margin-top: calc(-1 * var(--space-1));
  font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-secondary);
}

/* Время заняли (З6), пересечение, сбой (З7): заметное сообщение с действиями */
.conflict { padding: var(--space-4); border-radius: var(--radius-panel); }
.conflict__title { font-size: var(--font-size-body-m); line-height: var(--line-height-label); }
.conflict__alts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2-5); }
.conflict__alts-label { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); font-weight: var(--font-weight-label); color: var(--color-error-title); }
.conflict__alt {
  display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-height-m); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: var(--border-width-button) solid var(--color-border-ink); background: var(--color-bg-surface); color: var(--color-text);
  font-family: var(--font-text); font-size: var(--font-size-button); line-height: var(--line-height-single); font-weight: var(--font-weight-button);
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow-chip); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-spring);
}
.conflict__alt:hover { transform: translate(var(--shift-hover), var(--shift-hover)); box-shadow: var(--shadow-raised); }
.conflict__alt:active { transform: translate(var(--shift-pressed), var(--shift-pressed)); box-shadow: var(--shadow-button-pressed); }
.conflict__alt:focus-visible { outline-offset: var(--focus-ring-offset-button); }
.conflict__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.message--warning .btn--ghost, .message--error .btn--ghost { --btn-text: var(--color-text); --btn-text-pressed: var(--color-text); }

@media (max-width: 767px) {
  .contact-card__row { grid-template-columns: 1fr; gap: var(--space-1); }
  .confirm-cta { align-items: stretch; width: 100%; }
  .confirm-cta__buttons { justify-content: stretch; }
  .confirm-cta__buttons .btn { flex: 1; }
  .confirm-cta > .btn { width: 100%; }
  .confirm-guest { align-items: flex-start; }
}

/* ---------- Л4: перенос — день и время текущей записи («ваша запись», цвета --color-own-*) ---------- */
.cal__day--mine:not(.cal__day--picked) { background: var(--color-own-bg); color: var(--color-own-text); border: var(--border-width-button) solid var(--color-own-border); font-weight: var(--font-weight-h4); }
.cal__tag--mine { color: var(--color-own-text); }
.cal__day--picked .cal__tag--mine { color: var(--color-text-on-brand); }
.cal__swatch--mine { background: var(--color-own-bg); border: var(--border-width-button) solid var(--color-own-border); }
.slot--mine, .slot--mine:disabled {
  cursor: default; background: var(--color-own-bg); color: var(--color-own-text);
  border: var(--border-width-button) solid var(--color-own-border);
}