/* Приложение курьера (часть 3а-2, П3аб-12) — courier.uv-service.online. Вид платформы (Р108): цвета, кнопки, поля —
   общие листы сайта операторов `/ops-shared/platform.css` и `/ops-shared/components.css` (это web-operator/, без
   копий); здесь — только своё: экран приложения и детали входа из утверждённого макета
   `docs/design/mockups/operators-couriers/courier.html` (экраны 1–9; `.oc-app__…` и `.cr-…` макета). Размеры — токены
   tokens.css, цвета — только роли темы. Сначала телефон 390, на ПК — тот же экран карточкой по середине. */

/* Шрифты платформы — из папки сайта операторов. platform.css зовёт их от корня (`/fonts/…`), а корень этого адреса —
   приложение курьера; те же начертания, объявленные позже, берут верх, и браузер качает только эти. */
@font-face { font-family: 'Geologica'; font-weight: 300 700; font-display: swap;
  src: url('/ops-shared/fonts/geologica-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-weight: 300 700; font-display: swap;
  src: url('/ops-shared/fonts/geologica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 500; font-display: swap;
  src: url('/ops-shared/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 500; font-display: swap;
  src: url('/ops-shared/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Экран приложения ─────────────────────────────────────────────────── */
.cr-app { flex: 1 0 auto; display: flex; justify-content: center; min-width: 0; }
.cr-screen { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; background: var(--page); }
.cr-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--space-8);
  padding: var(--space-2) var(--space-4); background: var(--panel); border-bottom: 1px solid var(--border2); }
.cr-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); padding: 0; border: 0; background: transparent;
  color: var(--accent); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.cr-back svg { width: var(--icon-md); height: var(--icon-md); }
.cr-body { flex: 1 1 auto; display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-4); }
.cr-body--center { align-content: center; }
.cr-foot { position: sticky; bottom: 0; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--border2); }
.cr-foot .btn svg { width: var(--icon-md); height: var(--icon-md); }

.cr-mark { justify-self: center; display: inline-grid; place-items: center; padding: 2px; border-radius: var(--radius-sm); background: var(--mark-pad); }
.cr-mark img { width: auto; height: var(--control-lg); }
.cr-h { margin: 0; font-size: var(--title-sm); line-height: var(--leading-title); overflow-wrap: anywhere; text-wrap: balance; }
.cr-nw { white-space: nowrap; }
.cr-body--center .cr-h { text-align: center; }
.cr-sub { margin: 0; color: var(--muted); font-size: var(--text-sm); text-wrap: pretty; }
.cr-note { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-text); }
.cr-center { justify-self: center; text-align: center; }
.cr-info { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.cr-info svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.cr-ok { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--tint); color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cr-ok svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.cr-ok[hidden] { display: none; }
.cr-steps { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); text-align: left; }
.cr-form { display: grid; gap: var(--space-3); }
.cr-digits { text-align: center; letter-spacing: var(--space-3); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.btn.cr-wrap { white-space: normal; text-align: center; justify-content: center; line-height: var(--leading-title); text-wrap: balance; }
.cr-kept, .cr-said { margin: 0; }
.cr-link-field { font-size: var(--text-sm); }

/* Число на экране: его курьер нажимает в боте сотрудников (Р251) */
.cr-number { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--tint); text-align: center; }
.cr-number > span:first-child { color: var(--muted); font-size: var(--text-sm); text-wrap: balance; }
.cr-number__value { font-family: var(--font-title); font-size: calc(var(--title-xl) * 1.5); line-height: 1.1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cr-number__wait { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cr-number__wait svg { width: var(--icon-sm); height: var(--icon-sm); }

/* Нашли в iiko; кружок курьера — цвет маршрута, как у курьеров сайта операторов */
.cr-found { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--ok); border-radius: var(--radius-md); background: var(--panel); }
.cr-found > span:last-child { display: grid; min-width: 0; line-height: var(--leading-title); }
.cr-found small { color: var(--ok); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.cr-found__who { color: var(--muted); font-size: var(--text-xs); }
.cr-dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
  border-radius: var(--radius-pill); background: var(--route-1); color: var(--on-accent); font-weight: var(--weight-bold); }
.cr-dot--c2 { background: var(--route-2); }
.cr-dot--c3 { background: var(--route-3); }
.cr-dot--c4 { background: var(--route-4); }
.cr-face { justify-self: center; width: var(--control-lg); height: var(--control-lg); font-size: var(--title-sm); }

/* Свой код: точки и цифры */
.cr-pin { display: flex; justify-content: center; gap: var(--space-3); }
.cr-pin i { width: var(--space-4); height: var(--space-4); border: 2px solid var(--border); border-radius: 50%; }
.cr-pin i.is-on { border-color: var(--accent); background: var(--accent); }
.cr-pin.is-wrong { animation: cr-shake var(--motion-slow) var(--ease); }
@keyframes cr-shake { 25% { transform: translateX(calc(var(--space-2) * -1)); } 50% { transform: translateX(var(--space-2)); } 75% { transform: translateX(calc(var(--space-1) * -1)); } }
.cr-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: min(100%, calc(var(--space-8) * 4)); justify-self: center; }
.cr-keys button { display: grid; place-items: center; min-height: var(--control-lg); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel);
  color: var(--ink); font: inherit; font-size: var(--title-sm); font-weight: var(--weight-semibold); cursor: pointer; touch-action: manipulation; }
.cr-keys button:active { background: var(--tint); }
.cr-keys svg { width: var(--icon-lg); height: var(--icon-lg); }
.cr-big-icon { display: grid; place-items: center; justify-self: center; width: var(--space-8); height: var(--space-8); border-radius: 50%; background: var(--tint); color: var(--accent); }
.cr-big-icon svg { width: var(--space-6); height: var(--space-6); }
.cr-big-icon--warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

/* Кого помнит телефон: двое — выбор, «Другой курьер» — пунктиром */
.cr-who { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cr-who__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3);
  border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cr-who__row:hover { border-color: var(--accent); }
.cr-who__row > svg { width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.cr-who__row small { grid-column: 2 / -1; margin-top: -2px; color: var(--muted); font-size: var(--text-xs); }
.cr-who__row.is-other { grid-template-rows: auto auto; row-gap: 0; border-style: dashed; }
.cr-who__row.is-other .cr-who__plus { grid-row: 1 / span 2; }
.cr-who__plus { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border-radius: 50%; background: var(--tint); color: var(--accent); }
.cr-who__plus svg { width: var(--icon-sm); height: var(--icon-sm); }

/* «Смены» после входа */
.cr-who-am { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cr-who-am > span:last-child { display: grid; min-width: 0; line-height: var(--leading-title); }
.cr-who-am small { color: var(--muted); font-size: var(--text-xs); }
.btn.cr-leave { min-height: var(--tap); }
.cr-leave svg { width: var(--icon-md); height: var(--icon-md); }
.cr-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-md);
  background: var(--panel); text-align: center; }
.cr-empty__words { margin: 0; color: var(--muted); font-size: var(--text-sm); }

/* «Ближайшие — по ресторанам» (кусок 3б-1; макет, экран 10 `.cr-client`, `.cr-shifts`): ресторан строкой, под ним смены —
   день в первом столбце, часы и точка во втором, «Кто поставил» под ними; идущая — «идёт сейчас». */
.cr-plan { display: grid; gap: var(--space-2); min-width: 0; }
.cr-client { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.cr-client small { color: var(--muted); font-size: var(--text-xs); }
.cr-shifts { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); }
.cr-shifts li { display: grid; grid-template-columns: calc(var(--space-8) + var(--space-3)) minmax(0, 1fr); gap: 0 var(--space-2); padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-title); }
.cr-shifts li + li { border-top: 1px solid var(--border2); }
.cr-shifts li > span { min-width: 0; overflow-wrap: anywhere; }
.cr-shifts small { grid-column: 2; color: var(--muted); font-size: var(--text-xs); }
.cr-shifts li.is-going { box-shadow: inset 3px 0 0 var(--ok); }
/* Пересечение со сменой другого ресторана — под строкой смены, цветом предупреждения. */
.cr-clash { grid-column: 2; display: flex; align-items: flex-start; gap: var(--space-1); margin: 2px 0; color: var(--warn); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); }
.cr-clash svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; }
/* Смен одного ресторана сейчас не узнать — строкой над списком цветом предупреждения, не ошибкой на весь экран. */
.cr-info--warn { padding: var(--space-2) var(--space-3); border: 1px solid var(--warn); border-radius: var(--radius-md); background: var(--panel); }
.cr-info--warn svg { color: var(--warn); }
.cr-going { grid-column: 2; justify-self: start; margin: 2px 0; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }

/* На главный экран и уведомления (Р324-4, Р326): карточки над сменами — рамка панели, заголовок со значком, кнопки
   во всю ширину; «Позже» и «Выключить» — тихие, слева. Пустая обёртка не занимает места в сетке экрана. */
.cr-hold:empty { display: none; }
.cr-hold { display: grid; }
.cr-card { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md);
  background: var(--panel); min-width: 0; }
.cr-card__head { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.cr-card__head svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--accent); }
.cr-card__text { margin: 0; color: var(--muted); font-size: var(--text-sm); text-wrap: pretty; }
.cr-card .btn--text { justify-self: start; }
.cr-card .btn svg { width: var(--icon-md); height: var(--icon-md); }
.cr-move { display: grid; gap: var(--space-2); }
/* Совет «на главный экран» — одной строкой: главное действие во всю ширину, «Позже» — тихо рядом. */
.cr-card__acts { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cr-card__acts > .btn--block { flex: 1 1 auto; width: auto; min-width: 0; }
.cr-card__acts > .btn--text { flex: none; min-height: var(--tap); }

/* Смена сейчас (кусок 3б-2; макет, экраны 10, 11, 21 — `.cr-shift`, `.cr-iiko`): карточка ресторана над «Ближайшими»;
   сегодняшняя смена — рамкой акцента, на смене — зелёной; явки по точкам — строками со значком состояния: открыта —
   зелёным, открываем — приглушённо, касса молчит — предупреждением, «не открыть» — красным, «так задумано» (стенд, одна
   смена на организацию) — спокойно, без тревоги. */
.cr-work { display: grid; gap: var(--space-2); min-width: 0; }
.cr-work:empty { display: none; }
.cr-shift { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); }
.cr-shift.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cr-shift.is-on { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.cr-shift p { margin: 0; overflow-wrap: anywhere; }
.cr-shift__day { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.cr-shift__time { font-size: var(--text-lg); line-height: var(--leading-title); }
.cr-shift__pts { font-size: var(--text-sm); }
.cr-shift__who, .cr-shift__plan { color: var(--muted); font-size: var(--text-sm); }
.cr-shift .cr-going { justify-self: start; }
.cr-shift > .btn { margin-top: var(--space-2); }
.cr-shift .btn svg { width: var(--icon-md); height: var(--icon-md); }
.cr-shift__state { display: flex; align-items: center; gap: var(--space-2); color: var(--ok); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cr-shift__state svg, .cr-shift__iiko svg, .cr-shift__where svg, .cr-shift__plan svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.cr-shift__head { font-size: var(--text-lg); }
.cr-shift__iiko, .cr-shift__where, .cr-shift__plan.is-warn { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.cr-shift__iiko { color: var(--muted); }
.cr-shift__iiko svg, .cr-shift__where svg { color: var(--gold); }
.cr-shift__where.is-none { color: var(--muted); }
.cr-shift__plan.is-warn { color: var(--warn); font-weight: var(--weight-semibold); }
.cr-shift__plan.is-warn svg { color: var(--warn); }
.cr-shift .cr-info--warn { margin: var(--space-1) 0; }
.cr-atts { display: grid; gap: 2px; margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--tint); list-style: none; font-size: var(--text-sm); }
.cr-att { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; line-height: var(--leading-title); }
.cr-att > span { min-width: 0; overflow-wrap: anywhere; }
.cr-att > svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; }
.cr-att.is-ok > svg, .cr-att.is-ok b { color: var(--ok); }
.cr-att.is-wait > svg { color: var(--muted); }
.cr-att.is-warn > svg, .cr-att.is-warn b { color: var(--warn); }
.cr-att.is-bad > svg, .cr-att.is-bad b { color: var(--err); }
.cr-att.is-calm { color: var(--muted); }
/* Явка со значком-окошком (Р352-2, Р353-4): значок — размером соседних, нажать — не меньше пальца. */
.cr-att:has(> .cr-hint) { align-items: center; }
.cr-atts .cr-hint__btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.cr-att > .cr-hint { margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) calc(var(--space-1) * -1) calc(var(--space-3) * -1); }
/* Дальше 300 м — «Не на точке» с ⚠: слова двери — в окошке. */
.cr-shift__where.is-far { align-items: center; color: var(--warn); font-weight: var(--weight-semibold); }
.cr-shift__where.is-far > .cr-hint { margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-3) * -1); }
.cr-confirm { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--tint); }
.cr-confirm__q { display: grid; gap: 2px; font-size: var(--text-sm); }
.cr-confirm__q b { font-size: var(--text-lg); }
.cr-confirm__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cr-confirm__acts .btn { min-height: var(--tap); }
/* Итог смены (экран 21 без наличных и доставок). */
.cr-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.cr-total div { display: grid; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--tint); line-height: var(--leading-title); }
.cr-total dt { color: var(--muted); font-size: var(--text-xs); }
.cr-total dd { margin: 0; font-size: var(--title-sm); font-weight: var(--weight-semibold); }
.cr-iiko-var { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-md);
  color: var(--muted); font-size: var(--text-sm); }
.cr-iiko-var svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }

/* «Мой маршрут» (кусок 3в-3; макет, экраны 14 и 16 — без кнопок исполнения и карты): над сменами — рейсы по ресторанам,
   остановки номером в кружке; забрать — пунктиром на мягкой заливке, вручить — номер и время крупно, опоздание — красной
   полосой слева и «+15 мин»; «Позвонить» и «Состав» — не ниже касания пальцем. Пустой блок не занимает места. */
.cr-route { display: grid; gap: var(--space-2); min-width: 0; }
.cr-route:empty { display: none; }
.cr-run { display: grid; gap: var(--space-2); min-width: 0; }
.cr-run + .cr-run { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
/* Ресторан над своими рейсами; следующий ресторан — чертой от рейса прежнего. */
.cr-route .cr-client { font-size: var(--text-md); }
.cr-run + .cr-client { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cr-run__sent { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.cr-run__total { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.cr-stops { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cr-stop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); min-width: 0; padding: var(--space-3);
  border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); }
.cr-stop__n { display: inline-grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-pill);
  background: var(--route-1); color: var(--on-accent); font-size: var(--title-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.cr-stop--pickup { border: 1px dashed var(--border); background: var(--cream); }
.cr-stop--pickup .cr-stop__n { background: var(--panel); color: var(--gold); box-shadow: inset 0 0 0 1px var(--border); }
.cr-stop.is-late { box-shadow: inset var(--space-1) 0 0 var(--err); }
.cr-stop.is-tight { box-shadow: inset var(--space-1) 0 0 var(--warn); }
.cr-stop__body { display: grid; gap: var(--space-1); min-width: 0; }
.cr-stop__body p { margin: 0; overflow-wrap: anywhere; line-height: var(--leading-title); }
.cr-stop__head { font-weight: var(--weight-semibold); text-wrap: balance; }
.cr-stop__orders { font-size: var(--text-sm); }
.cr-stop__no { font-family: var(--font-title); font-size: var(--title-md); font-weight: var(--weight-bold); text-wrap: balance; }
.cr-stop__time { font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
/* «≈ 18:30 · Гостю 18:25–18:35» и знак к интервалу (Р423): красный «!» «опаздывает на 4 мин», жёлтый «!» «впритык». */
div.cr-stop__time { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); min-width: 0; }
.cr-stop__time > .cr-hint { margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1); }
.cr-sign { display: inline-flex; align-items: center; min-width: 0; padding-right: var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.cr-sign.is-late { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.cr-sign.is-tight { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.cr-sign .cr-hint__btn { width: var(--control-sm); height: var(--control-sm); }
.cr-sign > .cr-hint { margin: calc((var(--tap) - var(--control-sm)) / -2) 0; padding: calc((var(--tap) - var(--control-sm)) / 2) 0; }
.cr-stop__addr, .cr-stop__pay { display: flex; align-items: flex-start; gap: var(--space-2); }
.cr-stop__addr svg, .cr-stop__pay svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.cr-stop__addr > span, .cr-stop__pay > span { min-width: 0; }
.cr-stop__pay { font-weight: var(--weight-semibold); }
.cr-stop__say { font-size: var(--text-sm); }
.cr-stop__say b { color: var(--muted); font-weight: var(--weight-semibold); }
.cr-people { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
/* Кому звонить: «Получатель: Мама» строкой, под ней номер текстом и «Позвонить» справа; узко — кнопка строкой ниже. */
.cr-people li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2);
  border-radius: var(--radius-sm); background: var(--tint); font-size: var(--text-sm); line-height: var(--leading-title); }
.cr-people b { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
.cr-people .cr-nw { font-variant-numeric: tabular-nums; user-select: all; }
.btn.cr-call { min-height: var(--tap); margin-left: auto; padding: 0 var(--space-3); }
.cr-call svg { width: var(--icon-md); height: var(--icon-md); }
.btn.cr-lines-toggle { justify-self: start; min-height: var(--tap); }
.cr-lines-toggle svg { width: var(--icon-md); height: var(--icon-md); }
.cr-lines { display: grid; gap: 2px; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--tint);
  list-style: none; font-size: var(--text-sm); }
.cr-lines[hidden] { display: none; }
/* Прочие остановки — компактно: «Подробнее» раскрывает, что у нынешней видно сразу. */
.cr-stop__more { display: grid; gap: var(--space-1); min-width: 0; }
.cr-stop__more[hidden] { display: none; }

/* Кнопки курьера (3г-1, часть 2; Р366, Р368; `js/acts.js`): под остановкой во всю ширину карточки, не ниже пальца;
   главная остановка экрана — рамкой акцента, её кнопка залита; у прочих — те же кнопки рамкой. Нажатое — строкой с
   галочкой («Приехал · 18:12»), не ушло — «ждёт сети» значком; забрано и вручено — карточка тише. */
.cr-stop__acts { grid-column: 1 / -1; display: grid; gap: var(--space-2); min-width: 0; }
.btn.cr-act { min-height: var(--tap); padding: var(--space-2) var(--space-4); }
/* Главная кнопка нынешней остановки — одна на экране и крупная (НФТ-3г-9, телефон 390 — главный). */
.btn.cr-act--main { min-height: calc(var(--control-lg) + var(--space-2)); font-size: var(--text-lg); }
.cr-act--main svg { width: var(--icon-lg); height: var(--icon-lg); }
.cr-act svg, .cr-act-other svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.btn.cr-act-other { justify-self: center; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); padding: 0 var(--space-2); }
.cr-stop__done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; color: var(--muted);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--leading-title); }
.cr-stop__done > svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--ok); }
.cr-stop__done > span { min-width: 0; overflow-wrap: anywhere; }
.cr-press-wait { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font-size: var(--text-xs); white-space: nowrap; }
.cr-press-wait svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.cr-stop__wait { display: flex; align-items: center; gap: var(--space-1); margin: calc(var(--space-2) * -1) 0; color: var(--muted); font-size: var(--text-sm); }
.cr-stop__wait > .cr-hint { margin-left: calc(var(--space-2) * -1); }
/* «Кухня просит подождать — до 12:05» — строкой состояния, как «На месте»: значок той же величины и место текста */
.cr-stop__until { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; color: var(--ink);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cr-stop__until > svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--warn); }
.cr-stop__until > span { min-width: 0; overflow-wrap: anywhere; }
/* У двери Гостя (шаг 3в): «Подождать ещё» и «Гость не смог забрать заказ» — рядом, на узком — одна под другой. */
.cr-stop__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-2); min-width: 0; }
.cr-stop.is-main { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cr-stop--pickup.is-main { border-style: solid; }
/* «Верните № 17 на точку» (шаг 1): отменённый заказ у курьера — рамкой ошибки, чтобы не повёз Гостю. */
.cr-stop--back { border: 1px solid var(--err); background: var(--panel); }
.cr-stop--back .cr-stop__n { background: var(--panel); color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.cr-stop.is-main.is-late { box-shadow: inset var(--space-1) 0 0 var(--err), inset 0 0 0 1px var(--accent); }
.cr-stop.is-main.is-tight { box-shadow: inset var(--space-1) 0 0 var(--warn), inset 0 0 0 1px var(--accent); }
.cr-stop.is-done .cr-stop__head, .cr-stop.is-done .cr-stop__no, .cr-stop.is-done .cr-stop__time { color: var(--muted); }
/* Отказ двери на нажатие — «!» цветом ошибки и «×» закрыть. */
.cr-info--err { align-items: center; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: 1px solid var(--err); border-radius: var(--radius-md);
  background: var(--panel); }
.cr-info--err > svg { color: var(--err); }
.cr-info--err > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Слова двери о принятом нажатии — тоном сведения, той же рамкой. */
.cr-info--note { align-items: center; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--panel); }
.cr-info--note > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.icon-btn.cr-info__close { flex: none; width: var(--tap); height: var(--tap); color: var(--muted); }
.icon-btn.cr-info__close svg { width: var(--icon-sm); height: var(--icon-sm); color: inherit; }

/* Лист «Как заплатили» (`js/pay.js`): снизу экрана телефона, на ПК — окном по середине, шириной приложения. */
.cr-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 92dvh; margin: 0; padding: 0; border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-3); overflow: auto; }
.cr-sheet[open] { animation: sheet-in var(--motion-slow) var(--ease); }
.cr-sheet::backdrop { background: var(--veil); }
.cr-sheet__body { display: grid; gap: var(--space-3); min-width: 0; padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.cr-sheet__grip { justify-self: center; width: var(--space-7); height: var(--space-1); margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--border); }
.cr-sheet__what { margin: calc(var(--space-2) * -1) 0 0; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.cr-sheet__what b { color: var(--ink); }
.cr-ways { display: grid; gap: var(--space-2); }
.cr-way { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); font-weight: var(--weight-semibold); cursor: pointer; }
.cr-way input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cr-way svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.cr-way:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint); color: var(--accent); }
.cr-way:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cr-sums { display: grid; gap: var(--space-2); }
.cr-sums[hidden] { display: none; }
.cr-sums__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cr-sum { min-width: 0; }
.cr-sum__box { position: relative; display: block; }
.input.cr-sum__input { padding-right: var(--space-6); font-size: var(--text-field); font-variant-numeric: tabular-nums; }
.cr-sum__unit { position: absolute; top: 50%; right: var(--space-3); transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cr-sheet [data-pay-error][hidden] { display: none; }
.cr-sheet .field__error { margin: 0; font-size: var(--text-sm); }
.cr-sheet .btn svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.btn.cr-sheet__cancel { justify-self: center; min-height: var(--tap); padding: 0 var(--space-3); }
/* «Сколько ещё ждать?» (шаг 2в): минуты — крупными плитками по три в ряд; «до N мин — ждёте сами» — мелко */
.cr-mins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.btn.cr-mins__one { display: grid; justify-items: center; gap: 0; min-height: var(--control-lg); padding: var(--space-2); line-height: 1.1; }
.cr-mins__one b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.cr-mins__one span { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
[data-late-alone] { display: flex; align-items: center; gap: var(--space-1); }
[data-late-alone] svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }

/* ── Вкладки (шаг 1, часть 1к; Р353-4, ЗВ3–ЗВ6): шапка сверху и вкладки снизу держатся на месте, середина листается;
   у вкладки — значок и подпись, открытая — цветом акцента на мягкой подложке; точка — новое (акцент) или ошибка
   (красный). Спрятанная панель места не занимает. ── */
.cr-screen--tabs > .cr-body { padding-bottom: var(--space-5); }
.cr-bar--app { position: sticky; top: 0; z-index: var(--z-sticky); }
.cr-bar__end { display: inline-flex; flex: none; align-items: center; gap: var(--space-1); }
.cr-panel { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.cr-panel[hidden] { display: none; }
.cr-tabs { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--border2); }
.cr-tab { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: calc(var(--tap) + var(--space-3)); padding: var(--space-1) 0;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--text-xs); cursor: pointer; touch-action: manipulation; }
.cr-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }
.cr-tab__mark { position: relative; display: inline-grid; place-items: center; width: var(--space-8); height: var(--space-6); border-radius: var(--radius-pill); }
.cr-tab__mark svg { width: var(--icon-lg); height: var(--icon-lg); }
.cr-tab[aria-selected="true"] { color: var(--accent); font-weight: var(--weight-semibold); }
.cr-tab[aria-selected="true"] .cr-tab__mark { background: var(--tint); }
.cr-tab__dot { position: absolute; top: 2px; right: calc(var(--space-5) - 2px); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill);
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.cr-tab__dot.is-err { background: var(--err); }
.cr-tab__dot[hidden] { display: none; }
/* Значок уведомлений в шапке: включены — акцентом, ждут нажатия — с точкой, выключены — тихо и перечёркнут. */
.cr-bell:empty { display: none; }
.cr-bell .cr-hint__btn svg { width: var(--icon-lg); height: var(--icon-lg); }
.cr-bell[data-state="on"] .cr-hint__btn { color: var(--accent); }
.cr-bell[data-state="off"] .cr-hint__btn { position: relative; }
.cr-bell[data-state="off"] .cr-hint__btn::after { content: ""; position: absolute; top: var(--space-2); right: var(--space-2); width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.cr-bell .cr-hint__text .btn { justify-self: stretch; }
/* «Ещё»: уведомления строкой с переключателем, установка карточкой, выход внизу. */
.cr-setting { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border2);
  border-radius: var(--radius-md); background: var(--panel); }
.cr-setting__row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--tap); }
.cr-setting__mark { display: inline-grid; flex: none; place-items: center; color: var(--accent); }
.cr-setting__mark svg { width: var(--icon-md); height: var(--icon-md); }
.cr-setting[data-state="denied"] .cr-setting__mark, .cr-setting[data-state="iphone"] .cr-setting__mark,
.cr-setting[data-state="off"] .cr-setting__mark { color: var(--muted); }
.cr-setting__words { display: grid; flex: 1 1 auto; min-width: 0; line-height: var(--leading-title); }
.cr-setting__words small { color: var(--muted); font-size: var(--text-xs); }
.cr-setting__row > .cr-hint { margin: calc(var(--space-1) * -1) 0; }
.switch.cr-setting__switch { flex: none; min-height: var(--tap); }
/* Касание по дорожке достаётся самому переключателю (он под ней, прозрачный), а не рисунку. */
.cr-setting__switch .switch__track { pointer-events: none; }
.cr-setting .field__error { margin: 0; font-size: var(--text-sm); }
.btn.cr-out { margin-top: var(--space-2); }
.cr-out svg { width: var(--icon-md); height: var(--icon-md); }

/* ПК: тот же экран телефона карточкой по середине окна — приложение одно, курьер привыкает к одному виду */
@media (min-width: 768px) {
  .cr-app { align-items: center; padding: var(--space-6) var(--gutter); }
  .cr-screen { max-width: calc(var(--space-8) * 7); min-height: calc(var(--space-8) * 10); overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
  .cr-foot { position: static; }
  .cr-screen--tabs { overflow: clip; }
  .cr-sheet { inset: 0; width: min(calc(var(--space-8) * 7), calc(100% - var(--space-6))); height: fit-content; max-height: calc(100dvh - var(--space-7));
    margin: auto; border-radius: var(--radius-lg); }
  .cr-sheet__body { padding-top: var(--space-4); }
  .cr-sheet__grip { display: none; }
  .cr-sheet[open] { animation: dialog-in var(--motion-slow) var(--ease); }
}

/* ── Подсказки и предупреждения значком (`js/hint.js`; владелец 24.10) — как у сайта операторов (`alerts.css`): i —
   пояснение, ! — нужно действие, красный ! — ошибка, ⚠ — что-то не так. Окошко — над всем, у значка; на телефоне —
   касанием, на ПК — наведением и фокусом. ── */
.cr-hint { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.cr-hint__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap);
  padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); cursor: pointer; }
.cr-hint__btn:hover, .cr-hint__btn[aria-expanded="true"] { background: var(--tint); color: var(--ink); }
.cr-hint__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cr-hint__btn svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: inherit; }
.cr-hint__btn--act { color: var(--accent); }
.cr-hint__btn--warn, .cr-hint__btn--warn:hover, .cr-hint__btn--warn[aria-expanded="true"] { color: var(--warn); }
.cr-hint__btn--err, .cr-hint__btn--err:hover, .cr-hint__btn--err[aria-expanded="true"] { color: var(--err); }
.cr-hint__btn--tight, .cr-hint__btn--tight:hover, .cr-hint__btn--tight[aria-expanded="true"] { color: var(--warn); }
.cr-hint__btn.is-still, .cr-hint__btn.is-still:hover { background: transparent; cursor: default; }
.cr-hint__pop { position: fixed; z-index: var(--z-dropdown); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: var(--space-2); width: min(calc(var(--space-8) * 5), calc(100vw - var(--space-4))); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-2);
  color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-text);
  text-align: left; white-space: normal; }
.cr-hint__pop[hidden] { display: none; }
.cr-hint__text { display: grid; gap: var(--space-2); }
.cr-hint__text p { margin: 0; }
.cr-hint__text p:not(.is-name)::first-letter { text-transform: uppercase; }
.cr-hint__text .btn { justify-self: start; min-height: var(--tap); }
.cr-hint__text .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.cr-hint__close { width: var(--tap); height: var(--tap); color: var(--muted); }
.cr-hint__close svg { width: var(--icon-sm); height: var(--icon-sm); color: inherit; }