/* ═══ Телефон — окна листами ═══
   На компьютере карточка брони и окна стоят по центру, правка — панелью
   справа. На телефоне всё это листы снизу во весь экран, стопкой: приём
   оплаты поверх карточки, закрывается верхний (SPEC §5.7). Нижний слой под
   открытым верхним отступает назад масштабом, а не уезжает: видно, ради
   чего открыли верхний. Путь входа и ухода один — снизу вверх и обратно,
   весь ход снизу по кривой iOS (--ease-push), без растворения: лист —
   вещь, которая приезжает, а не проявляется. */
html[data-page="phone"] .dlg.dlg-booking,
html[data-page="phone"] .dlg.dlg-over,
html[data-page="phone"] .dlg.dlg-task,
html[data-page="phone"] .dlg.dlg-photos,
html[data-page="phone"] .dlg.dlg-rq,
html[data-page="phone"] .dlg.dlg-doc,
html[data-page="phone"] .dlg.dlg-invoice,
html[data-page="phone"] .dlg.dlg-profile{
  inset:0;width:auto;max-width:none;max-height:none;border-radius:0;
  transform:translateY(100%);opacity:1;
  transition:transform var(--t-push) var(--ease-push),visibility 0s linear var(--t-push),var(--theme-fade);
}
html[data-page="phone"] .dlg.dlg-booking.open,
html[data-page="phone"] .dlg.dlg-over.open,
html[data-page="phone"] .dlg.dlg-task.open,
html[data-page="phone"] .dlg.dlg-photos.open,
html[data-page="phone"] .dlg.dlg-rq.open,
html[data-page="phone"] .dlg.dlg-doc.open,
html[data-page="phone"] .dlg.dlg-invoice.open,
html[data-page="phone"] .dlg.dlg-profile.open{transform:none;transition:transform var(--t-push) var(--ease-push),visibility 0s,var(--theme-fade)}
/* Правка брони — панель справа на компьютере, лист снизу здесь. */
html[data-page="phone"] .sheet.sheet-edit{inset:0;width:auto;transform:translateY(100%);transition:transform var(--t-push) var(--ease-push),var(--theme-fade)}
html[data-page="phone"] .sheet.sheet-edit.open{transform:none}
/* Второй слой: нижний лист отступает назад. Специфичность выше правила
   payment.css (`body.has-over .dlg.open:not(.dlg-over)`), иначе лист
   прыгнул бы в центр экрана переводом на половину. */
html[data-page="phone"] body.has-over .dlg.open:not(.dlg-over){transform:scale(.97);transform-origin:50% 0}
html[data-page="phone"] body.has-over .sheet.open{transform:scale(.97);transform-origin:50% 0}
/* Шапки окон под чёлкой, подвалы над жестом «домой». Имена сверены с
   разметкой (booking-sheet.mjs, booking-edit-ui.mjs, payment.mjs,
   cancel-ui.mjs, checkin-ui.mjs, task-ui.mjs, requisites-form.mjs,
   invoice.mjs, doc-window.mjs): у карточки «Документ» (dsk-*) нет
   отдельного класса подвала в разметке — действия лежат в прокрутке
   тела, а не в приклеенной полосе, поэтому для неё только шапка. */
html[data-page="phone"] :is(.bs-head,.be-head,.pay-head,.cn-head,.ci-head,.tq-head,.rq-head,.iv-head,.dsk-head,.sm-head){padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
html[data-page="phone"] :is(.bs-foot,.be-foot,.pay-foot,.cn-foot,.ci-foot,.tq-foot,.rq-foot,.iv-foot){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
/* «Фото и файлы» переиспользует общую шапку и подвал окна (modal.css:
   .dlg-head/.dlg-foot) — теми же классами рисуется карточка гостя,
   которой на телефоне ещё нет (constraints.md), поэтому берём классы
   только внутри самого окна фото, а не везде на странице. */
html[data-page="phone"] .dlg-photos .dlg-head{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
html[data-page="phone"] .dlg-photos .dlg-foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}

@media (prefers-reduced-motion:reduce){
  html[data-page="phone"] :is(.dlg,.sheet){transition:opacity var(--t-move) var(--ease),visibility 0s;opacity:0}
  html[data-page="phone"] :is(.dlg,.sheet).open{transform:none;opacity:1}
}

/* ── профиль: пропуск над разделами ──
   Раскладку до 720 px профиль несёт сам (profile.css): пропуск строкой,
   разделы под ним. Здесь — только то, что делает его листом: окно во весь
   экран вместо «92dvh с полями», и столбец на всякий случай явно. */
html[data-page="phone"] .dlg.dlg-profile{height:auto;overflow:hidden}
html[data-page="phone"] .pf{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}

/* ── карточка брони на телефоне (design-review.md, «Карточка брони») ──
   Карточка общая со стойкой; на телефоне меняется её лист: шапка
   крупнее, лента времени во всю ширину под временами, деньги своей
   строкой, закладки — сегментный переключатель на утопленной дорожке,
   разделы по шкале телефона (shell.css), подвал — кнопки во всю ширину.
   Раскладку разделов не трогаем: только кегли, отступы и форма. */
html[data-page="phone"] .dlg.dlg-booking{--bs-menu:0px}

/* шапка: знак 44, имя 22, телефон 15, крестик кружком на лаке, код 12 */
html[data-page="phone"] .bs-head{gap:0 12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 12px var(--ph-gutter);align-items:start}
html[data-page="phone"] .bs-av{width:44px;height:44px;margin-top:1px;align-self:start;font-size:15px}
html[data-page="phone"] .bs-line{gap:8px;min-height:32px}
html[data-page="phone"] .bs-name,html[data-page="phone"] .bs-line>b{font-size:22px;letter-spacing:-.03em;line-height:1.15}
html[data-page="phone"] .bs-meta{margin-top:5px;gap:10px}
html[data-page="phone"] .bs-meta>span,html[data-page="phone"] .bs-tel{font-size:var(--ph-b)}
html[data-page="phone"] .bs-icon{width:36px;height:36px}
html[data-page="phone"] .bs-corner{gap:10px;align-self:start}
html[data-page="phone"] .bs-corner .sh-close{
  width:36px;height:36px;border-radius:var(--r-pill);
  background:rgb(237 234 227 / .12);color:var(--band-ink);
}
html[data-page="phone"] .bs-corner .sh-close:active{background:rgb(237 234 227 / .22)}
html[data-page="phone"] .bs-code{margin:0;padding:3px 6px;font-size:var(--ph-xs)}

/* лента: времена в первой строке, полоса во всю ширину под ними, объект и
   срок под полосой, деньги строкой с чертой сверху — подпись слева, сумма
   тоном справа, «не вносили» тише. */
html[data-page="phone"] .bs-rail{
  display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"in out" "track track" "bill bill";
  gap:0;padding:14px var(--ph-gutter) 16px;
}
html[data-page="phone"] .bs-rail>.bs-edge:first-child{grid-area:in}
html[data-page="phone"] .bs-edge.end{grid-area:out}
html[data-page="phone"] .bs-track{grid-area:track;margin-top:12px}
html[data-page="phone"] .bs-edge em{font-size:var(--ph-s)}
html[data-page="phone"] .bs-edge b{margin-top:3px;font-size:24px}
html[data-page="phone"] .bs-edge span{margin-top:3px;font-size:var(--ph-s)}
html[data-page="phone"] .bs-band{height:14px}
html[data-page="phone"] .bs-under{margin-top:10px;gap:12px}
html[data-page="phone"] .bs-place b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-place .ricon,html[data-page="phone"] .bs-place .ricon svg{width:16px;height:16px}
html[data-page="phone"] .bs-place u{font-size:var(--ph-xs)}
html[data-page="phone"] .bs-span{font-size:var(--ph-s)}
html[data-page="phone"] .bs-edge.bill{
  grid-area:bill;display:flex;align-items:baseline;gap:10px;margin-top:14px;padding:12px 0 0;
  border-left:0;border-top:1px solid rgb(237 234 227 / .14);text-align:left;
}
html[data-page="phone"] .bs-edge.bill em{flex:1;margin:0;font-size:var(--ph-s)}
html[data-page="phone"] .bs-edge.bill span{order:2;margin:0;font-size:var(--ph-s)}
html[data-page="phone"] .bs-edge.bill b{order:3;margin:0;font-size:22px}

/* закладки — сегментный переключатель: дорожка утопленной бумаги, выбранное
   — карточка с тенью; без значков, чтобы четыре слова стояли в ряд. */
html[data-page="phone"] .bs-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
html[data-page="phone"] .bs-menu{border-right:0;border-bottom:0;padding:10px var(--ph-gutter) 8px;background:var(--card)}
html[data-page="phone"] .bs-menu-in{flex-direction:row;gap:0;padding:3px;border-radius:var(--r-lg);background:var(--sunk);overflow-x:auto;scrollbar-width:none}
html[data-page="phone"] .bs-menu-in::-webkit-scrollbar{display:none}
html[data-page="phone"] .bs-menu.has-mark .bs-mark{display:none}
/* Пять закладок входят в 402 px при полях по 6 px; уже — дорожка листается,
   край затухает (phone-sheet-scroll.mjs ставит more-left / more-right). */
html[data-page="phone"] .bs-tab{
  flex:1 0 auto;min-width:0;flex-direction:row;justify-content:center;gap:4px;
  padding:0 6px;min-height:38px;border-radius:calc(var(--r-lg) - 3px);
  font-size:var(--ph-s);font-weight:500;color:var(--ink-2);
}
html[data-page="phone"] .bs-menu-in.more-right{mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
html[data-page="phone"] .bs-menu-in.more-left{mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
html[data-page="phone"] .bs-menu-in.more-left.more-right{mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
html[data-page="phone"] .bs-tab i{display:none}
html[data-page="phone"] .bs-tab span{display:inline}
html[data-page="phone"] .bs-tab s{
  position:static;top:auto;right:auto;margin:0;padding:0;min-width:0;height:auto;
  transform:none;background:none;box-shadow:none;font-size:var(--ph-xs);color:var(--ink-3);text-decoration:none;
}
html[data-page="phone"] .bs-tab.on,html[data-page="phone"] .bs-menu.has-mark .bs-menu-in>.bs-tab.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
html[data-page="phone"] .bs-menu.has-mark .bs-menu-in>.bs-tab.on s{color:var(--ink-2)}

/* разделы: заголовки 13, плашки --r-lg, строки 15 с подписью 13 */
html[data-page="phone"] .bs-page{min-height:0;padding:14px var(--ph-gutter) 20px}
html[data-page="phone"] .bs-sec+.bs-sec{margin-top:22px}
html[data-page="phone"] .bs-sec h3{font-size:var(--ph-s);margin-bottom:10px}
html[data-page="phone"] :is(.bs-jobs,.bs-form,.bs-out,.bs-rows,.bs-led,.bs-empty,.bs-hint){border-radius:var(--r-lg)}
html[data-page="phone"] .bs-job{padding:12px 14px 12px 15px;gap:10px}
html[data-page="phone"] .bs-job>b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-job>u{font-size:var(--ph-s)}
html[data-page="phone"] .bs-done{font-size:var(--ph-b)}
html[data-page="phone"] .bs-form>div{grid-template-columns:112px 1fr;gap:12px;padding:11px 14px}
html[data-page="phone"] .bs-form dt{font-size:var(--ph-s)}
html[data-page="phone"] .bs-form dd{font-size:var(--ph-b)}
html[data-page="phone"] .bs-out{gap:14px;padding:12px 14px}
html[data-page="phone"] .bs-out-h b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-out-tip{font-size:var(--ph-s)}
html[data-page="phone"] .bs-row{gap:12px;padding:12px 14px}
html[data-page="phone"] .bs-row>i{width:32px;height:32px}
html[data-page="phone"] .bs-row>i .ricon{width:17px;height:17px}
html[data-page="phone"] .bs-row>span,html[data-page="phone"] .bs-row>b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-row>span u{margin-top:3px;font-size:var(--ph-s)}
html[data-page="phone"] .bs-state{font-size:var(--ph-xs)}
html[data-page="phone"] .bs-empty,html[data-page="phone"] .bs-hint{padding:14px 15px;font-size:var(--ph-s)}

/* ведомость денег */
html[data-page="phone"] .bs-led-h{padding:12px 14px 10px}
html[data-page="phone"] .bs-led-h h4{font-size:var(--ph-s)}
html[data-page="phone"] .bs-led-h b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-led-r{gap:8px 12px;padding:11px 14px}
html[data-page="phone"] .bs-led-r>span,html[data-page="phone"] .bs-led-r>b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-led-r>u{font-size:var(--ph-s)}
html[data-page="phone"] .bs-led-none{padding:12px 14px;font-size:var(--ph-s)}
html[data-page="phone"] .bs-led-sum{padding:14px}
html[data-page="phone"] .bs-led-sum h4{font-size:var(--ph-s)}
html[data-page="phone"] .bs-led-sum b{font-size:22px}
html[data-page="phone"] .bs-led-do button{min-height:48px;font-size:var(--ph-b)}
html[data-page="phone"] .bs-hold b,html[data-page="phone"] .bs-hold span{font-size:var(--ph-s)}

/* товары: плитки в две колонки, слова по шкале */
html[data-page="phone"] .bs-picks{grid-template-columns:repeat(2,1fr);gap:8px}
/* Звезда избранного стоит в углу плитки: правое поле шире, чтобы длинное название под неё не заходило. */
html[data-page="phone"] .bs-pick{padding:11px 26px 11px 12px;border-radius:var(--r-lg)}
html[data-page="phone"] .bs-pick span{font-size:var(--ph-b)}
html[data-page="phone"] .bs-pick u{font-size:var(--ph-s)}
html[data-page="phone"] .bs-pick em{font-size:var(--ph-xs)}

/* подвал: кнопки во всю ширину, главная акцентом, вторая утопленной бумагой */
html[data-page="phone"] .bs-foot{gap:10px;padding:12px var(--ph-gutter) calc(env(safe-area-inset-bottom,0px) + 12px)}
html[data-page="phone"] .bs-foot .btn{
  flex:1 1 0;min-width:0;min-height:50px;padding:0 14px;border-radius:var(--r-lg);
  font-size:16px;font-weight:600;letter-spacing:-.01em;
}
html[data-page="phone"] .bs-foot .btn-ghost{background:var(--sunk);border-color:transparent;color:var(--ink)}

/* ── приём оплаты на телефоне (design-review.md, «Приём оплаты») ──
   Окно денег — то же, что у стойки (payment.css); на телефоне оно лист во
   весь экран, и меняется в нём шкала: табло крупнее (его держат в руке, а
   не читают через стойку), суммы и способы под палец, подвал во всю
   ширину. Фокус на сумму при открытии не ставится (payment-ui.mjs):
   клавиатура прятала бы способы и кнопку. */
html[data-page="phone"] .pay-head{gap:12px;padding-right:12px;padding-left:var(--ph-gutter);padding-bottom:12px}
html[data-page="phone"] .pay-head-t b{font-size:22px;letter-spacing:-.03em;line-height:1.15}
html[data-page="phone"] .pay-head-t span{margin-top:3px;font-size:var(--ph-b);white-space:normal}
html[data-page="phone"] .pay-head .sh-close{width:36px;height:36px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2)}
html[data-page="phone"] .pay-head .sh-close:active{background:var(--rule)}
/* табло */
html[data-page="phone"] .pay-screen{padding:14px var(--ph-gutter) 16px}
html[data-page="phone"] .pay-glass{padding:16px 18px 18px;border-radius:var(--r-lg)}
html[data-page="phone"] .pay-owe span,html[data-page="phone"] .pay-entry>span{font-size:var(--ph-s)}
html[data-page="phone"] .pay-owe b{font-size:var(--ph-b)}
html[data-page="phone"] .pay-entry{margin-top:12px}
html[data-page="phone"] .pay-entry input{max-width:none}
/* Сумма на табло. Правило «поля не мельче 16 px» (shell.css) весит 0-3-2 и
   перебивало кегль табло: число стояло мелким, а минус рядом — крупным.
   Вес здесь выше, и число снова главное на табле. */
html[data-page="phone"] .pay-screen .pay-entry input:not([type="checkbox"]):not([type="radio"]){font-size:44px}
/* При 44 px блок цифр приёма оплаты не сжимался и уезжал за край стекла:
   поле без размера меряется двадцатью знаками. Здесь блок занимает остаток
   строки, а поле — весь блок, число прижато вправо. У кассы и возврата поле
   меряется набранным (size), им это не нужно. */
html[data-page="phone"] .pay-screen:not(.cx-screen):not(.back) .pay-digits{flex:1 1 0;min-width:0;justify-content:flex-end}
html[data-page="phone"] .pay-screen:not(.cx-screen):not(.back) .pay-entry input{flex:1 1 auto;width:100%;min-width:0}
html[data-page="phone"] .pay-entry em{font-size:22px}
/* Минус — часть числа: тем же кеглем, что цифры (payment.css). */
html[data-page="phone"] .pay-minus{font-size:44px;line-height:1}
html[data-page="phone"] .pay-caret{height:32px}
html[data-page="phone"] .pay-scale{height:4px;margin-top:14px}
html[data-page="phone"] .pay-status{margin-top:12px;gap:9px}
html[data-page="phone"] .pay-status i{width:8px;height:8px}
html[data-page="phone"] .pay-status b{font-size:var(--ph-b)}
html[data-page="phone"] .pay-stamp{font-size:10px}
/* тело: быстрые суммы и способы под палец */
html[data-page="phone"] .pay-body{padding:16px var(--ph-gutter) 20px}
html[data-page="phone"] .pay-sec h3{font-size:var(--ph-s);margin-bottom:10px}
/* Колонки не шире половины: `1fr` растягивался под самое длинное слово
   («Через канал …»), и правая колонка уезжала за экран. */
html[data-page="phone"] .pay-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}
html[data-page="phone"] .pay-chip{min-height:56px;padding:9px 13px;border-radius:var(--r-lg);font-size:var(--ph-s)}
html[data-page="phone"] .pay-chip u{margin-top:3px;font-size:17px;font-weight:600}
html[data-page="phone"] .pay-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html[data-page="phone"] .pay-method{min-height:60px;gap:7px;padding:10px 8px;border-radius:var(--r-lg)}
html[data-page="phone"] .pay-method i svg{width:20px;height:20px}
html[data-page="phone"] .pay-method span{font-size:14px;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
html[data-page="phone"] .pay-split{margin-top:20px}
html[data-page="phone"] .pay-split-rows{border-radius:var(--r-lg)}
html[data-page="phone"] .pay-split-row{padding:11px 14px}
html[data-page="phone"] .pay-split-row b{font-size:var(--ph-b)}
html[data-page="phone"] .pay-split-row small{font-size:var(--ph-s)}
html[data-page="phone"] .pay-split-sum .inp{width:120px;min-height:44px;font-size:16px}
html[data-page="phone"] .pay-split-sum em{font-size:var(--ph-b)}
html[data-page="phone"] .pay-split-say{font-size:var(--ph-s)}
html[data-page="phone"] .pay-more{margin-top:20px;padding-top:14px}
html[data-page="phone"] .pay-more summary{min-height:44px;font-size:var(--ph-b)}
html[data-page="phone"] .pay-when span,html[data-page="phone"] .pay-note span,html[data-page="phone"] .pay-why>span{font-size:var(--ph-s)}
/* Время и заметка: поля во всю ширину окна и не шире. iOS рисует поле
   даты и времени своим размером и выводит его за край — внешний вид
   системы снимаем, ширину задаём сами; выбор даты открывается как был. */
html[data-page="phone"] .pay-more-in{grid-template-columns:minmax(0,1fr)}
html[data-page="phone"] :is(.pay-when,.pay-note,.pay-why) :is(input,textarea){
  display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;
}
html[data-page="phone"] :is(.pay-when,.pay-why) input{min-height:44px;font-size:16px}
html[data-page="phone"] .pay-when input[type="datetime-local"]{-webkit-appearance:none;appearance:none;text-align:left}
html[data-page="phone"] .pay-when input[type="datetime-local"]::-webkit-date-and-time-value{text-align:left}
html[data-page="phone"] .pay-note textarea{font-size:16px}
html[data-page="phone"] .pay-door{margin-top:18px;min-height:44px;padding:8px 10px;margin-left:-10px;font-size:var(--ph-b)}
html[data-page="phone"] .pay-door svg{width:16px;height:16px}
/* шаг «сейчас или в счёт» */
html[data-page="phone"] .pay-ask{padding:18px var(--ph-gutter) 4px;gap:10px}
html[data-page="phone"] .pay-way{min-height:72px;padding:14px 16px;gap:3px 14px;border-radius:var(--r-lg)}
html[data-page="phone"] .pay-way i svg{width:22px;height:22px}
html[data-page="phone"] .pay-way b{font-size:var(--ph-h)}
html[data-page="phone"] .pay-way span{font-size:var(--ph-s)}
html[data-page="phone"] .pay-ask-why{font-size:var(--ph-s)}
/* подвал: отказ утопленной бумагой, действие акцентом на всю оставшуюся ширину */
html[data-page="phone"] .pay-foot{gap:10px;padding:12px var(--ph-gutter) calc(env(safe-area-inset-bottom,0px) + 12px)}
html[data-page="phone"] .pay-foot .btn{min-height:50px;padding:0 16px;border-radius:var(--r-lg);font-size:16px;font-weight:600;letter-spacing:-.01em}
html[data-page="phone"] .pay-foot .btn-ghost{flex:0 0 auto;min-width:96px;background:var(--sunk);border-color:transparent;color:var(--ink)}
html[data-page="phone"] .pay-foot.ask .btn-ghost{flex:1 1 auto}
html[data-page="phone"] .pay-sure b{font-size:var(--ph-b)}

/* ── карточка брони: недочёты по закладкам (design-review.md, «Закладки карточки») ── */

/* Лист прокручивается целиком: плита уходит вверх, дорожка закладок липнет
   под строкой состояния, подвал стоит внизу. Раньше плита стояла на месте
   и занимала почти половину экрана — раздел жил в окошке в 380 px. */
html[data-page="phone"] .dlg.dlg-booking{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html[data-page="phone"] .dlg-booking>.bs-plate{flex-shrink:0}
html[data-page="phone"] .dlg-booking .bs-body{flex:1 0 auto;min-height:auto;grid-template-rows:auto 1fr}
html[data-page="phone"] .dlg-booking .bs-page{overflow:visible;padding-bottom:24px}
html[data-page="phone"] .dlg-booking .bs-menu{position:sticky;top:env(safe-area-inset-top,0px);z-index:3}
/* Прилипла — под строкой состояния подложка того же листа, и тонкая черта
   снизу: раздел уходит под дорожку, а не сквозь часы. */
html[data-page="phone"] .dlg-booking .bs-menu::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:env(safe-area-inset-top,0px);
  background:var(--card);opacity:0;pointer-events:none;
}
html[data-page="phone"] .dlg-booking.is-stuck .bs-menu::before{opacity:1}
html[data-page="phone"] .dlg-booking.is-stuck .bs-menu{box-shadow:0 1px 0 var(--rule-2)}
html[data-page="phone"] .dlg-booking .bs-foot{position:sticky;bottom:0;z-index:3}

/* шапка: «+» меток — кружок под палец на лаке; код брони выше */
html[data-page="phone"] .bs-tags .gs-tag-add{height:30px;min-width:30px;padding:0 9px;justify-content:center;border-radius:var(--r-pill);font-size:var(--ph-s)}
html[data-page="phone"] .bs-tags .gs-tag-add svg{width:14px;height:14px}
html[data-page="phone"] .bs-code{padding:7px 8px;margin-right:-8px}

/* «Бронь»: переключатель «Показывать каналам» — его стиль живёт в
   settings.css, которого телефон не грузит, и строка стояла без него.
   Здесь он телефонного размера, как в iOS: 51 × 31, кнопка 27. */
html[data-page="phone"] .st-tgl{
  position:relative;flex-shrink:0;width:51px;height:31px;padding:0;border:0;border-radius:var(--r-pill);
  background:var(--sunk);box-shadow:inset 0 0 0 1px var(--rule);
  transition:background-color var(--t-move) var(--ease),box-shadow var(--t-move) var(--ease);
}
html[data-page="phone"] .st-tgl i{
  position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:var(--r-pill);
  background:var(--card);box-shadow:0 2px 6px rgb(25 24 21 / .2),0 0 0 .5px rgb(25 24 21 / .08);
  transition:transform var(--t-move) var(--ease),width var(--t-tap) var(--ease);
}
html[data-page="phone"] .st-tgl.on{background:var(--accent);box-shadow:none}
html[data-page="phone"] .st-tgl.on i{transform:translateX(20px)}
html[data-page="phone"] .st-tgl:active i{width:32px}
html[data-page="phone"] .st-tgl.on:active i{transform:translateX(15px)}
html[data-page="phone"] .st-tgl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html[data-page="phone"] .bs-out{align-items:center}
html[data-page="phone"] .bs-out .st-tgl{margin-top:0}
/* значок пояснения — зона 36, знак прежний */
html[data-page="phone"] .bs-info{width:36px;height:36px;margin:-6px 0}
html[data-page="phone"] .bs-info svg{width:17px;height:17px}

/* «Деньги»: подпись группы «пробито отдельно» по шкале */
html[data-page="phone"] .bs-led-g{font-size:var(--ph-s)}

/* «Продажи»: плитки не шире половины — `1fr` раздвигался под длинное
   название, и правая колонка уходила за экран; название переносится. */
html[data-page="phone"] .bs-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-page="phone"] .bs-pick span{white-space:normal;line-height:1.25}
html[data-page="phone"] .bs-pick em{white-space:normal}
html[data-page="phone"] .bs-pick-g{margin:18px 0 9px;font-size:var(--ph-s)}
html[data-page="phone"] .bs-pick-g:first-child{margin-top:0}
html[data-page="phone"] .bs-pick-rest{margin-top:10px;font-size:var(--ph-s)}
/* Строка счёта: название и цена за единицу во всю ширину, ниже — счётчик
   слева и сумма справа, как корзина в iOS. Раньше название жалось между
   знаком и счётчиком и ломалось в три строки. */
html[data-page="phone"] .bs-row[data-line]{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"ic name name" "ic qty sum";
  align-items:center;gap:10px 12px;padding:12px 14px;
}
html[data-page="phone"] .bs-row[data-line]>i{grid-area:ic;align-self:start}
html[data-page="phone"] .bs-row[data-line]>span:not(.bs-qty){grid-area:name}
html[data-page="phone"] .bs-row[data-line]>.bs-qty{grid-area:qty;justify-self:start}
html[data-page="phone"] .bs-row[data-line]>b{grid-area:sum;justify-self:end}
/* счётчик — капсула на утопленной бумаге, кнопки 36 под палец */
html[data-page="phone"] .bs-qty{gap:0;padding:2px;border-radius:var(--r-pill);background:var(--sunk)}
html[data-page="phone"] .bs-qty button{
  width:36px;height:36px;border:0;border-radius:var(--r-pill);background:none;
  font-size:19px;font-weight:500;color:var(--ink);
}
html[data-page="phone"] .bs-qty button:active{background:var(--rule-2);transform:scale(.94)}
html[data-page="phone"] .bs-qty em{min-width:30px;font-size:var(--ph-b);font-weight:600}
/* итог «Продано на» */
html[data-page="phone"] .bs-bill{padding:11px 14px;gap:12px}
html[data-page="phone"] .bs-bill>span{font-size:var(--ph-b)}
html[data-page="phone"] .bs-bill>b{font-size:var(--ph-b)}
html[data-page="phone"] .bs-bill.total{margin-top:12px;padding:12px 14px 2px}
html[data-page="phone"] .bs-bill.total>span{font-size:var(--ph-s)}
html[data-page="phone"] .bs-bill.total>b{font-size:20px;letter-spacing:-.03em}

/* «История»: день, время и кто — по шкале; точка рода на линии — ниже, к строке */
html[data-page="phone"] .bs-log{padding-left:16px}
html[data-page="phone"] .bs-log-day{margin:18px 0 8px;font-size:var(--ph-s)}
html[data-page="phone"] .bs-log-day:first-child{margin-top:0}
html[data-page="phone"] .bs-log-row{gap:12px;padding:8px 0}
html[data-page="phone"] .bs-log-row>b{font-size:var(--ph-s);min-width:40px}
html[data-page="phone"] .bs-log-row>i{margin-top:7px}
html[data-page="phone"] .bs-log-row>span{font-size:var(--ph-b);line-height:1.4}
html[data-page="phone"] .bs-log-row>span em{margin-top:2px;font-size:var(--ph-s)}

@media (prefers-reduced-motion:reduce){
  html[data-page="phone"] :is(.st-tgl,.st-tgl i){transition:none}
  html[data-page="phone"] .bs-qty button:active{transform:none}
}
/* У дорожки на телефоне своей прокрутки нет (листается строка закладок
   внутри): прокрутка обрезала подложку под строкой состояния, и раздел
   просвечивал под часами. */
html[data-page="phone"] .dlg-booking .bs-menu{overflow:visible}
/* «Принять оплату 7 500 ₽» под счётом продаж — под палец и по шкале */
html[data-page="phone"] .bs-paynow{min-height:48px;gap:8px;border-radius:var(--r-lg);font-size:var(--ph-b)}
html[data-page="phone"] .bs-paynow svg{width:15px;height:15px}