/*
 * RU: Стили раздела «Онлайн-запись» (БП3, подписка для бизнеса) нового кабинета /biz/app/. Правила — внутри body.bt-page и на
 *     токенах сайта (--k-*), без литералов цвета (храповик check:theme). Файл свой у каждой фазы — потоки не правят один файл.
 *     Список записей переиспользует .bt-bk-* из messages.css (календарь «Сообщений»), здесь — только новое.
 * EN: Styles of the "Онлайн-запись" section (БП3, business subscription) of the new /biz/app/ cabinet. Rules sit inside
 *     body.bt-page and use site tokens (--k-*), no colour literals (the check:theme ratchet). One file per phase.
 *     The booking list reuses .bt-bk-* from messages.css (the "Messages" calendar); only the new parts live here.
 */

/* RU: Карточка «Включить запись» — акцентная рамка слева, как у состояния тарифа: главное действие экрана.
   EN: The "Включить запись" card — an accent left border, like the plan state: the screen's main action. */
body.bt-page .bk-enable {border-left: 4px solid var(--k-brand);}
body.bt-page .bk-enable h2 {margin: var(--k-s-1) 0 var(--k-s-2);}
body.bt-page .bk-points {display: grid; gap: var(--k-s-2); margin: var(--k-s-3) 0;}
body.bt-page .bk-points li {display: flex; gap: var(--k-s-2); align-items: flex-start;}
body.bt-page .bk-dur {max-width: 420px;}

/* RU: Полосы «пауза» и «лимит» — строкой с кнопкой справа, на телефоне кнопка переносится.
   EN: The "paused" and "limit" strips — a line with the button on the right; on a phone the button wraps. */
body.bt-page .bk-paused {display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-s-2); margin-bottom: var(--k-s-3);}
body.bt-page .bk-limit {margin-bottom: var(--k-s-3);}

/* RU: Чек-лист готовности: сделанный шаг приглушён, несделанный — с подсказкой. EN: The readiness checklist. */
body.bt-page .bk-steps {display: grid; gap: var(--k-s-2);}
body.bt-page .bk-steps li {display: flex; gap: var(--k-s-2); align-items: flex-start;}
body.bt-page .bk-steps li > span {display: grid; gap: 4px;}
body.bt-page .bk-steps li.is-done {color: var(--k-text-subtle);}
body.bt-page .bk-steps li.is-done .ic {color: var(--k-ok);}

/* RU: Услуги: название слева, длительность справа; длинное название переносится, а не выталкивает список за край.
   EN: Services: the title on the left, the duration on the right; a long title wraps rather than pushing the list off. */
body.bt-page .bk-svc {display: grid; gap: var(--k-s-2);}
body.bt-page .bk-svc li {align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--k-border-soft);}
body.bt-page .bk-svc li .grow {min-width: 0; overflow-wrap: anywhere;}
body.bt-page .bk-svc-dur {width: 152px; flex: none;}

/* RU: Строка добавления (услуга, мастер, блокировка): поля в ряд, на узком экране — столбиком.
   EN: The add row (service, master, block): fields in a row, a column on a narrow screen. */
body.bt-page .bk-add {display: flex; flex-wrap: wrap; gap: var(--k-s-2); align-items: center;}
body.bt-page .bk-add .inp {flex: 1 1 160px; min-width: 0;}
body.bt-page .bk-add .inp.is-time, body.bt-page .bk-add .inp.is-date, body.bt-page .bk-add .inp.is-price {flex: 0 1 auto;}

/* RU: Мастер — рамка вокруг имени, недели и выходных. EN: A master — a frame around the name, week and days off. */
body.bt-page .bk-staff {padding: var(--k-s-3); border: 1px solid var(--k-border); border-radius: var(--k-r-2); margin-bottom: var(--k-s-3);}
body.bt-page .bk-staff-h {flex-wrap: wrap; align-items: center;}
body.bt-page .bk-staff-h .inp {min-width: 0;}

/* RU: Неделя мастера: день — одна строка «галочка, смена, перерыв»; переносится по частям на телефоне.
   EN: A master's week: a day is one "checkbox, shift, break" line; it wraps in parts on a phone. */
body.bt-page .bk-week {display: grid; gap: 8px; margin-top: var(--k-s-2);}
body.bt-page .bk-day {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;}
body.bt-page .bk-day-on {display: inline-flex; gap: 8px; align-items: center; min-width: 56px; font-weight: 600;}
body.bt-page .bk-day .inp.is-time {width: 104px;}
body.bt-page .bk-off {flex-wrap: wrap; align-items: center;}

/* RU: Блокировки — строки с кнопкой «Открыть». EN: Blocks — lines with an "Open" button. */
body.bt-page .bk-blocks, body.bt-page .bk-offs {display: grid; gap: 8px;}
body.bt-page .bk-blocks li, body.bt-page .bk-offs li {align-items: center; flex-wrap: wrap;}

/* RU: Ссылка и QR: поле ссылки тянется, QR — на светлой подложке, чтобы камера читала его в тёмной теме.
   EN: Link and QR: the link field stretches, the QR sits on a light backing so a camera reads it in the dark theme. */
body.bt-page .bk-link {flex-wrap: wrap;}
body.bt-page .bk-link .inp {min-width: 0;}
body.bt-page .bk-qr {display: inline-grid; place-items: center; padding: var(--k-s-3); margin: var(--k-s-2) 0; border-radius: var(--k-r-2);
  background: var(--k-surface); border: 1px solid var(--k-border);}
body.bt-page .bk-qr img, body.bt-page .bk-qr canvas {max-width: 100%; height: auto;}

@media (max-width: 640px) {
  body.bt-page .bk-svc-dur {width: 100%;}
  body.bt-page .bk-add .btn {flex: 1 1 100%;}
  body.bt-page .bk-day .inp.is-time {width: 96px;}
}

/* RU: П4 (docs/UI-RULES.md): на телефоне цели касания — не меньше 40 px: маленькие кнопки, поля времени и «показать» телефон
       в общем кабинете рассчитаны на мышь (34 и 32 px), здесь они поднимаются только внутри экрана записи.
   EN: П4: touch targets on a phone are at least 40 px: the shared cabinet's small buttons, time fields and the "show" phone
       link are sized for a mouse (34 and 32 px); here they are raised only inside the booking screen. */
@media (pointer: coarse), (max-width: 640px) {
  body.bt-page .sc-booking .btn.is-sm, body.bt-page .sc-booking .inp.is-sm, body.bt-page .sc-booking .inp {min-height: 40px;}
  body.bt-page .sc-booking .link {display: inline-flex; align-items: center; min-height: 40px;}
  body.bt-page .sc-booking .bk-day-on {min-height: 40px;}
}