/* ── мастер первоначальной настройки ──
   Лицо продукта: первое, что человек видит в пустом заведении. Второе такое
   лицо — экран входа, и говорят они одним голосом намеренно: тот же кегль
   заголовка (28/500, поджатый на -.035em), та же подпись (13/1.6), те же
   рослые поля и тот же отклик на нажатии. Человек за десять минут видит оба
   и должен узнать один продукт, а не два разных.

   Один вопрос на экран. Поэтому окно и построено вокруг одного: слева
   крупный вопрос и единственное поле, справа — прибор, который из ответов
   собирается. Больше на экране нет ничего: ни рамок вокруг рамок, ни
   подписей к подписям.

   Две поверхности, а не одна: вопрос стоит на бумаге окна (--card), прибор —
   на утопленной полке (--sunk), и на ней лежит бумага календаря обратно на
   уровне окна. Глубина здесь несёт смысл: слева отвечают, справа смотрят,
   что из этого выходит.

   Высота окна задана снизу и не меняется от вопроса к вопросу. Окно,
   прыгающее по высоте на каждом «Дальше», читается поломкой — а это первое
   впечатление о продукте.

   Движение мотивировано: вопрос приходит снизу — это направление движения
   по пути; строка объекта и цена появляются в приборе, потому что там и
   вправду возникает новое. Отскока нет нигде, как и во всём продукте.
   Всё снимается при `prefers-reduced-motion`. */

.dlg-su{width:min(920px,calc(100vw - 32px));max-height:min(700px,calc(100dvh - 40px))}
.su{display:flex;flex-direction:column;min-height:0;max-height:min(700px,calc(100dvh - 40px))}

/* ── путь наверху ── */
.su-head{display:flex;align-items:center;gap:20px;padding:15px 13px 13px 26px}

.su-path{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none}
.su-path li{display:flex;flex-direction:column;gap:7px;min-width:64px}
.su-path b{
  font-size:11.5px;font-weight:500;line-height:1;color:var(--ink-3);
  transition:color var(--t-move) var(--ease);
}
.su-path li.done b{color:var(--ink-2)}
.su-path li[aria-current="step"] b{color:var(--ink);font-weight:600}

/* Деления: по одному на вопрос части. Видно и где человек, и сколько в этой
   части всего, — это честнее полоски «42 %», которая не значит ничего.
   Ещё не пройденное берётся от чернил долей, а не линейкой: линейка в тёмной
   теме пропадала, и путь врал, что впереди пусто. */
.su-path-bar{display:flex;gap:3px}
.su-path-bar i{
  width:20px;height:3px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--ink) 13%,transparent);
  transition:background-color var(--t-move) var(--ease);
}
.su-path-bar i.full{background:var(--ink-3)}
.su-path-bar i.now{background:var(--ink)}

.su-close{margin-left:auto;flex-shrink:0}

/* ── две половины ── */
.su-main{
  display:grid;grid-template-columns:minmax(0,1fr) 372px;
  flex:1 1 auto;min-height:336px;
}

/* ── вопрос ── */
/* Вопрос и календарь начинаются на одной горизонтали — она и связывает
   «о чём спросили» с «что из этого вышло». Середина не годится: вопрос в
   одну строку и вопрос в две встали бы на разной высоте, и связь пропала. */
.su-ask{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:46px 34px 34px 26px;min-width:0;overflow-y:auto;
}
.su-ask h2{
  font-size:28px;font-weight:500;line-height:1.2;letter-spacing:-.035em;color:var(--ink);
  max-width:15ch;text-wrap:balance;
}
.su-said{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:42ch}
.su-answer{margin-top:26px;max-width:420px}

/* Поле ответа рослое, как на входе: на экране оно одно, и мельчить ему
   незачем. Ошибка под ним — тем же знаком и тем же цветом, что везде. */
.su-answer .wz-field{margin:0}
.su-answer .inp{padding:13px 14px;border-radius:var(--r);font-size:15px}
.su-answer .inp:focus{
  border-color:var(--ink-2);box-shadow:none;
  outline:2px solid color-mix(in srgb,var(--ink-2) 16%,transparent);outline-offset:2px;
}
.su-answer .inp[aria-invalid="true"]{border-color:var(--late)}
.su-answer .inp[aria-invalid="true"]:focus{
  box-shadow:none;outline-color:color-mix(in srgb,var(--late) 24%,transparent);
}
.su-answer .wz-err{margin-top:9px;font-size:12px}
/* Числу — поле по числу: под пять цифр растянутое во всю колонку поле
   обещает ответ, которого не ждут. Имя заведения — другое дело, ему ширина
   нужна. */
.su-answer .wz-num{width:auto;gap:11px}
.su-answer .wz-num .inp{width:196px;max-width:196px;text-align:left}
.su-answer .wz-num u{font-size:15px;color:var(--ink-2)}
.su-answer .wz-stepper{gap:8px}
.su-answer .wz-stepper button{width:42px;height:46px;border-radius:var(--r)}
.su-answer .wz-stepper .inp{width:92px;padding:13px 8px;font-size:16px}

.su-select{
  width:100%;cursor:pointer;appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

/* Выбор из двух: карточки одного веса, выбранная поднимается контрастом,
   а не цветом. Нажатие отвечает мгновенно — тем же жестом, что кнопка входа. */
.su-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.su-pick button{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  padding:15px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  transition:border-color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease),
    transform var(--t-tap) var(--ease);
}
.su-pick button b{font-size:14px;font-weight:550;color:var(--ink);line-height:1.2}
.su-pick button span{font-size:12px;line-height:1.35;color:var(--ink-3)}
.su-pick button.on{border-color:var(--ink);background:var(--sunk)}
.su-pick button.on b{font-weight:600}
.su-pick button:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){ .su-pick button:hover{border-color:var(--ink-3)} }
.su-pick button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── прибор справа ── */
.su-side{
  background:var(--sunk);border-left:1px solid var(--rule-2);
  padding:46px 24px 34px;display:flex;align-items:flex-start;min-width:0;
}
/* Бумага календаря лежит на полке: поднята обратно до уровня окна. */
.su-grid{
  margin:0;width:100%;background:var(--card);border-radius:var(--r-lg);
  padding:16px 16px 14px;box-shadow:var(--sh-1);
}

.su-grid-head{display:flex;flex-direction:column;gap:12px;padding-bottom:11px;border-bottom:1px solid var(--rule-2)}
/* Имя заведения — вывеска: самое крупное на бумаге прибора. */
.su-venue{font-size:15px;font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.su-venue.waiting{font-weight:450;color:var(--ink-3)}

.su-week{display:grid;grid-template-columns:100px repeat(7,1fr)}
.su-week i{font-style:normal;font-size:10px;line-height:1;color:var(--ink-3);text-align:center}
.su-week i.off{color:var(--ink-2);font-weight:600}

.su-rows{padding-top:10px}
.su-row{display:grid;grid-template-columns:100px minmax(0,1fr);min-height:50px}
.su-row-name{display:flex;flex-direction:column;justify-content:center;gap:3px;padding-right:12px;min-width:0}
.su-row-name b{font-size:13px;font-weight:550;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.su-row-name u{font-size:10.5px;color:var(--ink-3);text-decoration:none}
.su-row.waiting .su-row-name{font-size:11px;line-height:1.35;color:var(--ink-3)}
.su-row.waiting .su-cells{border-style:dashed}

/* `overflow` открыт намеренно: ценник шире клетки и должен выходить за неё.
   Заливки у угловых клеток нет, обрезать нечего. */
.su-cells{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--rule);border-radius:var(--r-sm);
}
.su-cell{
  display:flex;align-items:center;justify-content:center;padding:2px;min-height:48px;
  border-right:1px solid var(--rule-2);
}
.su-cell:last-child{border-right:0}
.su-cell.off{background:var(--paper)}

/* Цена — ценник, приколотый к субботе, а не число, втиснутое в клетку:
   в клетку шириной в три десятка пикселей не влезает ни одна валюта.
   Ценник светлый и обведён чернилами: тёмная плашка здесь читалась бы
   бронью, а брони ещё нет — и врать об этом на первом экране нельзя. */
.su-cell.priced{position:relative}
.su-cell.priced b{
  position:absolute;z-index:1;left:50%;transform:translateX(-50%);
  padding:4px 8px;border:1px solid var(--ink);border-radius:var(--r-sm);
  background:var(--card);box-shadow:var(--sh-1);
  font-size:11px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

.su-grid figcaption{
  margin-top:14px;padding-top:11px;border-top:1px solid var(--rule-2);
  display:flex;flex-wrap:wrap;gap:4px 14px;
}
.su-grid figcaption span{font-size:11px;line-height:1.35;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── низ ── */
.su-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:14px 18px;border-top:1px solid var(--rule-2);
}
.su-failed{margin-right:auto;max-width:44ch;font-size:12px;line-height:1.4;color:var(--late)}
/* С первого вопроса назад некуда. Мёртвая кнопка хуже её отсутствия, но
   место она держит: иначе «Дальше» переезжает под курсором на втором шаге. */
.su-foot [data-su-back][disabled]{visibility:hidden}

/* ── движение ── */
@media (prefers-reduced-motion:no-preference){
  /* Вопрос приходит снизу: это направление движения по пути. */
  .su-ask[data-su-screen]{animation:su-ask var(--t-page) var(--ease) both}
  .su-row.live .su-row-name,.su-row.live .su-cells{animation:su-row var(--t-page) var(--ease) both}
  .su-cell.priced b{animation:su-price var(--t-move) var(--ease) both}
}
@keyframes su-ask{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes su-row{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes su-price{from{opacity:0;transform:translateX(-50%) scale(.92)}to{opacity:1;transform:translateX(-50%)}}

/* ── финал ──
   Собран в языке экрана «бронь готова» (new-booking.css): печать сверху,
   заголовок, предмет, строки фактов, низ с действиями. В продукте уже есть,
   как выглядит доведённое до конца дело, и второй такой экран должен
   узнаваться, а не изобретаться заново.

   Окно сужается: двух колонок больше нет, и держать ширину под них значило бы
   оставить половину окна пустой. Сужение доводится той же кривой, что и всё
   движение продукта, — окно смыкается вокруг сделанного.

   Порядок сборки — порядок смысла: печать (готово) → чьё это (заголовок) →
   что вышло (календарь, и в нём ценник приходит последним) → где менять
   (строки) → куда идти (низ). */
.dlg-su:has(.su-done){width:min(560px,calc(100vw - 32px))}
.dlg-su{transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease),
  width var(--t-page) var(--ease),var(--theme-fade)}

/* Путь на финале снят: он пройден, и место занимать ему больше нечем. */
.su-done .su-head{padding:12px 12px 0}

.su-end{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  padding:6px 26px 30px;text-align:center;min-width:0;
}

/* Печать — та же, что ставит бронь: круг делом, а не словом. */
.su-seal{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok);
}
.su-seal svg{stroke-width:2.2}

.su-end-title{
  margin-top:17px;max-width:20ch;
  font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.035em;color:var(--ink);
  text-wrap:balance;
}

/* Вывеска на финале снята: имя заведения уже стоит заголовком, и повторять
   его строкой ниже — говорить дважды одно и то же. */
.su-done .su-venue{display:none}
.su-done .su-grid-head{gap:0}

/* Календарь здесь — предмет на столе, а не панель: своя бумага, кромка и
   тень. На финале он получает ширину, в которой ценник садится в клетку. */
.su-end .su-grid{
  margin-top:20px;max-width:none;text-align:left;
  border:1px solid var(--rule-2);box-shadow:var(--sh-1);
}

/* Строки фактов: подпись слева, дело справа — как на экране готовой брони.
   Ширина подписи одна на все строки, иначе правый столбец пляшет. */
.su-end-rows{width:100%;margin-top:20px;text-align:left}
.su-end-rows>div{
  display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule-2);
}
.su-end-rows>div:last-child{border-bottom:0}
.su-end-rows dt{font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.su-end-rows dd{margin:0;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--ink)}

/* Низ — как у готовой брони: главное действие шире, оба видны сразу. */
.su-end-do{justify-content:stretch;gap:8px;background:var(--paper)}
.su-end-do .btn{flex:1;padding:9px 12px;font-size:12.5px}
.su-end-do .btn-primary{flex:1.5}

@media (prefers-reduced-motion:no-preference){
  /* Печать ставится с доводкой: у неё есть замах, как у настоящей. Это
     единственное место в продукте с перелётом, и оно уже занято экраном
     готовой брони — здесь та же кривая. */
  /* Сборка начинается после того, как окно сомкнулось: пока идёт сужение,
     содержимое ещё не проявлено, и перетекание строк никто не видит. */
  .su-done .su-seal{animation:su-seal .44s cubic-bezier(.175,.885,.32,1.275) .18s backwards}
  .su-done .su-end-title{animation:su-rise .32s var(--ease) .28s backwards}
  .su-done .su-grid{animation:su-card .36s var(--ease) .38s backwards}
  .su-done .su-week{animation:su-rise .3s var(--ease) .48s backwards}
  .su-done .su-row-name,
  .su-done .su-cells{animation:su-rise .3s var(--ease) .56s backwards}
  /* Ценник приходит последним и сверху: он и есть то, ради чего всё. */
  .su-done .su-cell.priced b{animation:su-tag .32s var(--ease) .70s backwards}
  .su-done .su-end-rows>div{animation:su-rise .3s var(--ease) var(--d,0ms) backwards}
  .su-done .su-foot{animation:su-rise .32s var(--ease) 1.02s backwards}

  /* Черта под вывеской проводится и тает — так подписывают бумагу. */
  .su-done .su-grid-head{position:relative}
  .su-done .su-grid-head::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:var(--ink-2);transform-origin:left;
    animation:su-sign .9s var(--ease) .56s both;
  }
}
@keyframes su-seal{from{opacity:0;transform:scale(.55)}}
@keyframes su-card{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes su-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes su-tag{from{opacity:0;transform:translateX(-50%) translateY(-7px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes su-sign{
  0%{transform:scaleX(0);opacity:1}
  55%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

/* ── узкий экран: прибор уходит под вопрос ── */
@media (max-width:900px){
  .su-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0;overflow-y:auto}
  .su-ask{justify-content:flex-start;padding:14px 18px 22px}
  .su-ask h2{font-size:23px;max-width:none}
  .su-answer{max-width:none}
  .su-side{border-left:0;border-top:1px solid var(--rule-2);padding:16px}
  .su-week,.su-row{grid-template-columns:78px repeat(7,1fr)}
  .su-row{grid-template-columns:78px minmax(0,1fr)}
  .su-cell{min-height:42px}
  .su-path li{min-width:0}
  .su-path b{display:none}
  .su-end{padding:6px 18px 24px}
  .su-end-title{font-size:20px}
  .su-end-rows>div{grid-template-columns:1fr;gap:2px}
  /* В строку два действия здесь не встают: длинное имя кнопки ломается
     надвое. Столбцом, главное — внизу, под большим пальцем. */
  .su-end-do{flex-direction:column}
  .su-end-do .btn{flex:none;width:100%}
}

/* «И так и так» — две цены одна под другой, подпись слева той же ширины:
   ночь и час читаются столбцом, а не спорят в одну строку. */
.su-prices{display:flex;flex-direction:column;gap:12px}
.su-prices label{display:flex;align-items:center;gap:14px}
.su-prices label>span{width:44px;font-size:14px;color:var(--ink-2)}