/* Приложение курьера (часть 3а-2, П3аб-12) — courier.star-project.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); }

/* ПК: тот же экран телефона карточкой по середине окна — приложение одно, курьер привыкает к одному виду */
@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; }
}