/* Сайт операторов (1а): из утверждённых макетов `docs/design/mockups/operators-couriers/oc.css` (Р256, 14.10.2026); правки сайта — в `operator.css`. */

[hidden] { display: none !important; }
html { overflow-x: clip; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-text); }

/* ── Сайт операторов: шапка, верх ───────────────────────────────────────────────────────────────────── */
.staff-sections__item { text-decoration: none; }
.oc-phone-order svg { width: var(--icon-md); height: var(--icon-md); }
@media (max-width: 1279px) { .oc-wide { display: none; } }
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
a.order-row__open { display: inline-block; text-decoration: none; }
a.tally { text-decoration: none; }
.staff-views a.segments__item { text-decoration: none; }
.staff-side__tabs a.segments__item { text-decoration: none; color: var(--ink); }
.load-tags { grid-column: 1 / -1; }
.load-tag span { min-width: 0; }

/* «Требуют внимания» с четырьмя действиями (№ 17 не передан, Р248-4): действия — второй строкой, «почему» — целиком */
.issue.oc-issue--wide { padding-block: var(--space-2); }
@container feed (min-width: 560px) {
  .issue.oc-issue--wide { grid-template-columns: auto minmax(0, 1fr); }
  .issue.oc-issue--wide .issue__actions { grid-column: 2; flex-wrap: wrap; justify-content: flex-start; }
}
.issue.oc-issue--wide .issue__why { white-space: normal; }
@container feed (max-width: 559px) {
  .issue.oc-issue--wide .issue__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .issue.oc-issue--wide .issue__actions:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issue.oc-issue--wide .issue__actions:has(> :nth-child(4)) > :nth-child(-n + 2) { grid-column: 1 / -1; }
  .issue.oc-issue--wide .issue__actions .btn { justify-content: center; padding-inline: var(--space-2); }
}
.issue.oc-issue--wide .issue__title { white-space: normal; }
.issue__actions .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.order-guest .btn--text { margin-left: auto; }

/* Тревога «Курьеров на смене 0» (Р246-5) — та же плашка, что «iiko не отвечает», с действиями справа */
.staff-outage.oc-alarm { flex-wrap: wrap; }
.oc-alarm p { flex: 1 1 calc(var(--space-8) * 5); }
.oc-alarm__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.oc-alarm__acts svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Карточка заказа: канал над номером, время «было», действия сеткой ─────────────────────────────── */
.oc-chan { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.oc-split { color: var(--muted); font-size: var(--text-sm); }
.oc-was { margin-left: var(--space-2); color: var(--muted); font-weight: var(--weight-regular); text-decoration: line-through; }
.oc-note { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-text); }
.oc-back { display: none; justify-self: start; }
.oc-back svg { width: var(--icon-md); height: var(--icon-md); }
.order-card__foot.oc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.order-card__foot.oc-acts .btn { justify-content: center; }
.order-card__foot.oc-acts .btn svg { width: var(--icon-md); height: var(--icon-md); }
.oc-danger { color: var(--err); }
.order-card a.order-guest__phone { text-decoration: none; }
@media (max-width: 1099px) {
  .staff-work[data-showing="card"] .staff-side { display: block; }
  .staff-work[data-showing="card"] .staff-side__head, .staff-work[data-showing="card"] .staff-side__body { display: none; }
  .staff-work[data-showing="card"] .order-side { display: block; position: static; }
  .oc-back { display: inline-flex; }
}

/* ── Окна: на телефоне — шторкой снизу ─────────────────────────────────────────────────────────────── */
.dialog.oc-dialog { width: min(100%, calc(var(--space-8) * 10)); }
.dialog.oc-dialog--wide { width: min(100%, calc(var(--space-8) * 15)); }
.oc-dialog .dialog__foot .btn svg { width: var(--icon-md); height: var(--icon-md); }
@media (max-width: 767px) {
  .veil { place-items: end stretch; padding: 0; }
  .veil > .dialog { width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .dialog__head, .dialog__body { padding-inline: var(--space-4); }
  .dialog__foot { padding-inline: var(--space-4); }
  .dialog__foot .btn { flex: 1 1 100%; }
}
.oc-now { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--cream); font-size: var(--text-sm); }
.oc-now .btn { margin-left: var(--space-2); }
.oc-now svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-group { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.oc-group legend { margin-bottom: var(--space-2); padding: 0; font-weight: var(--weight-semibold); }
.oc-time { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.oc-time .input { width: calc(var(--space-8) + var(--space-5)); height: var(--control-md); text-align: center; }
.oc-radios { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-8) * 3.4), 1fr)); gap: var(--space-1) var(--space-4); }
.oc-radios .radio, .oc-radios .check { min-height: var(--control-md); }
.oc-preview { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.oc-preview__head { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.oc-preview__head svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-preview__bubble { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px; background: var(--tint); font-size: var(--text-sm); line-height: var(--leading-text); }
.oc-lines { display: grid; gap: var(--space-1); }
.check.oc-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3);
  border: 1px solid var(--border2); border-radius: var(--radius-md); }
.check.oc-line input { left: var(--space-3); }
.oc-line.is-off span:nth-child(3) { text-decoration: line-through; color: var(--muted); }
.oc-line__sum { white-space: nowrap; }
.oc-tag { display: inline-flex; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--err); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; }
.oc-sum { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; font-size: var(--text-sm); }
.oc-sum b { font-size: var(--text-lg); }
.oc-pick { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.radio.oc-pick__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border2); border-radius: var(--radius-md); }
.radio.oc-pick__row input { left: var(--space-3); }
.radio.oc-pick__row:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.oc-pick__text { display: grid; gap: 2px; min-width: 0; line-height: var(--leading-title); }
.oc-pick__text span { color: var(--muted); font-size: var(--text-sm); }
.oc-pick__eta { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: right; line-height: var(--leading-title); }
.oc-pick__eta small { font-weight: var(--weight-regular); }
.oc-pick__eta.is-ok { color: var(--ok); }
.oc-pick__eta.is-late { color: var(--err); }
@media (max-width: 479px) {
  .radio.oc-pick__row { grid-template-columns: auto auto minmax(0, 1fr); }
  .oc-pick__eta { grid-column: 3; text-align: left; }
}
.oc-hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.oc-hint svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.oc-hint a { color: var(--accent); font-weight: var(--weight-semibold); }

/* Правая колонка ленты короче на высоту полосы макета */
@media (min-width: 1100px) { .staff-side { height: calc(100vh - var(--space-8) * 3 - var(--control-sm)); } }

/* Строка заказа на узкой ленте — двумя линиями: orders.css («Заказы» одним экраном, Р356). */
@media (max-width: 767px) {
  .staff-outage.oc-alarm { align-items: flex-start; }
  .oc-alarm p { flex: 1 1 0; min-width: 0; }
  .oc-alarm__acts { flex-basis: 100%; }
}
/* Карточка открыта на телефоне и планшете — она вместо ленты; отборы ленты прячутся. */
@media (max-width: 1099px) { body.has-card .staff-top { display: none; } }

/* ── «Загрузка» (сцена 3): два рычага у точки, способов и зон; время; «Гость сейчас видит» ─────────────────── */
.oc-load { grid-template-columns: minmax(0, 1fr); align-content: start; }
.oc-load__top > .segments { min-width: 0; }
.oc-load__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.oc-load__rule { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.oc-load__rule svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
@media (min-width: 1100px) {
  .load-grid.oc-load-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .oc-load-grid > .load-block--wide { grid-column: auto; grid-row: auto; }
}
.oc-lever-head, .oc-lever { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--space-8) * 2) calc(var(--space-8) * 5.4); align-items: center; gap: var(--space-1) var(--space-3); }
.oc-lever-head { color: var(--muted); font-size: var(--text-xs); }
.oc-lever { padding: var(--space-2) 0; border-top: 1px solid var(--border2); }
.oc-lever__name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-2); font-weight: var(--weight-semibold); }
.oc-lever__name small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.oc-lever__name:not(:has(.smap__swatch)) { grid-template-columns: minmax(0, 1fr); }
.oc-lever__acts { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.oc-lever .load-change, .oc-lever__hours { grid-column: 1 / -1; }
.oc-lever__hours { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--text-xs); }
.oc-lever__hours svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-lever-sub { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.oc-lever.is-changed, .load-row.is-changed { box-shadow: inset var(--space-1) 0 0 var(--warn); margin-left: calc(var(--space-4) * -1); padding-left: var(--space-4); }
.load-state.is-warn { color: var(--warn); }
.load-state.is-pause { color: var(--err); }
@media (max-width: 767px) {
  .oc-lever-head { display: none; }
  .oc-lever { grid-template-columns: minmax(0, 1fr) auto; }
  .oc-lever__acts { grid-column: 1 / -1; }
}
.oc-guest-sees { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--tint); }
.oc-guest-sees__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted); }
.oc-guest-sees__title svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-guest-sees dl { display: grid; gap: var(--space-1); margin: 0; font-size: var(--text-sm); }
.oc-guest-sees dl div { display: grid; grid-template-columns: calc(var(--space-8) + var(--space-5)) minmax(0, 1fr); gap: var(--space-2); }
.oc-guest-sees dt { font-weight: var(--weight-semibold); }
.oc-guest-sees dd { margin: 0; }
.oc-due { color: var(--warn); font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-log .order-journal li { grid-template-columns: calc(var(--space-7) + var(--space-1)) minmax(0, 1fr); }
.oc-lever-kind { width: 100%; }
.oc-lever-kind svg { width: var(--icon-md); height: var(--icon-md); }
.oc-shift { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border2); border-radius: var(--radius-md); }
.oc-shift li { display: grid; grid-template-columns: auto calc(var(--space-8) + var(--space-2)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.oc-shift li + li { border-top: 1px solid var(--border2); }
.oc-shift .check { min-height: var(--control-sm); }
.oc-shift__no { display: grid; font-weight: var(--weight-semibold); line-height: var(--leading-title); }
.oc-shift__what { color: var(--muted); font-size: var(--text-sm); }
.oc-shift__time { font-size: var(--text-sm); white-space: nowrap; }
.oc-shift__time s { color: var(--muted); }
/* Р247-2: группы «приняты · уже готовятся · касса и Яндекс»; кассу и Яндекс не сдвигаем — серой строкой без галочки (И289) */
.oc-shift li.oc-shift__group { display: block; padding: var(--space-1) var(--space-3); background: var(--cream); color: var(--muted); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.oc-shift li:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.oc-shift__what .mark { margin-right: var(--space-1); }
.oc-shift li.is-skip { color: var(--muted); }
.oc-shift li.is-skip .oc-shift__no { font-weight: var(--weight-regular); }
.oc-shift__lock { display: inline-grid; place-items: center; width: var(--icon-md); color: var(--muted); }
.oc-shift__lock svg { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 559px) {
  .oc-shift li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .oc-shift__what { grid-column: 2 / -1; grid-row: 2; }
}
.oc-winlen { display: flex; align-items: flex-start; gap: var(--space-2); }
.oc-winlen svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; color: var(--gold); }
.oc-winlen a { color: var(--accent); font-weight: var(--weight-semibold); }

/* Шапка: три раздела — звук значком до 1500, чтобы «Что вижу» читалось целиком */
.staff-who svg { flex: none; }
@media (max-width: 1499px) {
  .staff-sound { width: var(--control-md); padding: 0; }
  .staff-sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── «Курьеры» (сцена 5): смены, ждут курьера, карта, наличные ─────────────────────────────────────────── */
.oc-couriers { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); }
.oc-couriers__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.oc-couriers__top > .segments { min-width: 0; }
.oc-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.oc-facts div { display: grid; padding: var(--space-1) var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); line-height: var(--leading-title); }
.oc-facts dt { color: var(--muted); font-size: var(--text-xs); }
.oc-facts dd { margin: 0; font-size: var(--title-sm); font-weight: var(--weight-semibold); }
.oc-couriers__work { display: grid; gap: var(--space-5); align-items: start; }
.oc-couriers__main { display: grid; gap: var(--space-4); min-width: 0; container: feed / inline-size; }
@media (min-width: 1100px) {
  .oc-couriers__work { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .oc-couriers__map { position: sticky; top: calc(var(--space-8) + var(--space-3)); height: calc(100vh - var(--space-8) * 2 - var(--space-7) - var(--control-sm)); }
}
.oc-couriers__map { min-width: 0; }
@media (max-width: 1099px) { .oc-couriers__map .smap { height: calc(var(--space-8) * 6); } }
.oc-pickbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--panel); font-size: var(--text-sm); }
.oc-pickbar svg { width: var(--icon-md); height: var(--icon-md); }
.courier-card__head { position: relative; }
.oc-cash { display: grid; justify-items: end; margin-left: auto; line-height: var(--leading-title); white-space: nowrap; }
.oc-cash small { color: var(--muted); font-size: var(--text-xs); }
.oc-cash b { font-size: var(--title-sm); }
.oc-bad { color: var(--err); font-weight: var(--weight-semibold); }
.oc-ok { color: var(--ok); font-weight: var(--weight-semibold); }
.oc-off { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); }
.oc-off li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.oc-off li + li { border-top: 1px solid var(--border2); }
.oc-off__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-2); }
@media (max-width: 479px) { .oc-off li { grid-template-columns: auto minmax(0, 1fr); } .oc-off li > .btn, .oc-off li > .oc-off__acts { grid-column: 2; justify-self: start; } .oc-off li > .oc-off__acts { justify-self: stretch; justify-content: flex-start; } }
.route-stop.oc-kitchen { background: var(--cream); border-style: dashed; }
.oc-kitchen__n { background: var(--panel); color: var(--gold); box-shadow: inset 0 0 0 1px var(--border); }
.oc-kitchen__n svg { width: var(--icon-sm); height: var(--icon-sm); }
.courier-stop__n.oc-kitchen__n svg { width: 14px; height: 14px; }
.route__start svg { flex: none; }
.oc-route-map .smap { height: calc(var(--space-8) * 5.5); }
@media (max-width: 767px) { .oc-route-map .smap { height: calc(var(--space-8) * 3.5); } }
.oc-total { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.oc-total div { display: grid; align-content: start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--cream); line-height: var(--leading-title); }
.oc-total dt { color: var(--muted); font-size: var(--text-xs); }
.oc-total dd { margin: 0; font-size: var(--title-sm); font-weight: var(--weight-semibold); }
.oc-total dd.oc-sub, .oc-sub { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
@media (max-width: 559px) { .oc-total { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc-cashbox { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border2); border-radius: var(--radius-md); }
.oc-cashbox__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: var(--weight-semibold); }
.oc-cashbox__head b { font-size: var(--title-md); }
.oc-cashbox__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--muted); }
.oc-cashbox__list li { display: flex; justify-content: space-between; gap: var(--space-3); }
.oc-note svg { display: inline-block; width: var(--icon-sm); height: var(--icon-sm); vertical-align: -3px; }

/* ── «Новый заказ по телефону» (сцена 6) ──────────────────────────────────────────────────────────────── */
.oc-po { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); }
.oc-po__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.oc-po__head .btn svg { width: var(--icon-md); height: var(--icon-md); }
.oc-po__title { margin: 0 auto 0 0; font-size: var(--title-md); }
.oc-po__grid { display: grid; gap: var(--space-4); align-items: start; }
.oc-po__main, .oc-po__side { display: grid; gap: var(--space-4); min-width: 0; }
@media (min-width: 1100px) {
  .oc-po__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .oc-po__side { position: sticky; top: calc(var(--space-8) + var(--space-3)); }
}
.oc-part { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); }
@media (max-width: 767px) { .oc-part { padding: var(--space-3) var(--space-4); } }
.oc-part__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--title-sm); }
.oc-part__n { display: inline-grid; place-items: center; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-pill); background: var(--tint); color: var(--accent); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.oc-po__phone { max-width: calc(var(--space-8) * 5); }
.oc-po__phone input { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.oc-guest { display: grid; gap: var(--space-3); }
.oc-guest__who { display: flex; align-items: center; gap: var(--space-3); }
.oc-guest__who > div { display: grid; line-height: var(--leading-title); }
.oc-guest__who span:not(.gate__avatar) { color: var(--muted); font-size: var(--text-sm); }
.oc-addr { display: grid; gap: var(--space-1); }
.radio.oc-addr__row { align-items: flex-start; min-height: var(--control-md); padding: var(--space-2) var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md); }
.radio.oc-addr__row input { left: var(--space-3); top: var(--space-4); }
.radio.oc-addr__row .radio__dot { margin-top: 2px; }
.radio.oc-addr__row:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.oc-addr__row > span:last-child { display: grid; line-height: var(--leading-title); }
.oc-addr__row small { color: var(--muted); font-size: var(--text-xs); }
.oc-addr .btn { justify-self: start; }
.oc-addr .btn svg, .oc-note svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-fields > .field { align-content: start; }
.oc-fields { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-8) * 3.5), 1fr)); gap: var(--space-3); }
.oc-consent { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--cream); font-size: var(--text-sm); }
.oc-consent.check input { left: var(--space-3); }
.oc-lawyer { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--lilac); color: var(--ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-lawyer svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.oc-cats .chip { flex: none; }
.oc-menu { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border2); border-radius: var(--radius-md); }
.oc-menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.oc-menu li + li { border-top: 1px solid var(--border2); }
.oc-menu li > span:first-child { display: grid; line-height: var(--leading-title); }
.oc-menu small { color: var(--muted); font-size: var(--text-xs); }
.oc-menu .is-off { opacity: 0.6; }
.oc-menu__price { font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-in { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-when { width: 100%; }
.oc-when .segments__item { white-space: normal; text-align: center; }
.oc-cart__lines { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.oc-cart__lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto calc(var(--space-8) + var(--space-2)); align-items: center; gap: var(--space-3); }
.oc-cart__lines li > span:first-child { display: grid; line-height: var(--leading-title); }
.oc-cart__lines small { color: var(--accent); font-size: var(--text-xs); }
.oc-cart__lines li > span:last-child { text-align: right; white-space: nowrap; font-weight: var(--weight-semibold); }
.counter.oc-counter { display: inline-flex; align-items: center; gap: var(--space-2); }
.counter.oc-counter b { min-width: var(--space-4); text-align: center; }
.field .counter.oc-counter { justify-self: start; }
.oc-radios--one { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-chips-label { align-self: center; color: var(--muted); font-size: var(--text-sm); }
.oc-po__submit { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--tint); }
.oc-po__submit p { margin: 0; }
.oc-po__done { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); padding: var(--space-5); border: 1px solid var(--ok); border-radius: var(--radius-lg); background: var(--panel); }
.oc-po__done > svg { flex: none; width: var(--icon-lg); height: var(--icon-lg); color: var(--ok); }
.oc-po__done > div { flex: 1 1 calc(var(--space-8) * 6); display: grid; gap: var(--space-2); }
.oc-po__done h2 { margin: 0; font-size: var(--title-md); }
.oc-po__done p { margin: 0; }
.oc-po__done-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.oc-menu .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-out { color: var(--err); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.oc-days { padding-bottom: 0; }

/* ── Приложение курьера (сцена 7): экраны телефона в ряд; на телефоне — сами экраны друг под другом ─────────── */
body[data-page="courier"] { font-variant-numeric: tabular-nums; }
.oc-flow { display: grid; gap: var(--space-4); padding: var(--space-4) var(--gutter) var(--space-7); }
.oc-flow__lead { margin: 0; max-width: calc(var(--space-8) * 14); color: var(--muted); }
.oc-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-8) * 5.6), 1fr)); gap: var(--space-6) var(--space-5); justify-items: center; }
.oc-screen { display: grid; gap: var(--space-2); width: 100%; max-width: calc(var(--space-8) * 6); margin: 0; }
.oc-screen figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-size: var(--text-sm); }
.oc-screen figcaption span { color: var(--muted); }
.oc-app {
  position: relative; display: flex; flex-direction: column; height: calc(var(--space-8) * 11.5); overflow: hidden;
  border: 10px solid var(--pf-night, #0F1A3A); border-radius: 36px; background: var(--page); box-shadow: var(--shadow-2);
}
.oc-app__body { flex: 1 1 auto; display: grid; align-content: start; gap: var(--space-3); min-height: 0; overflow: auto; padding: var(--space-4); }
.oc-app__body--center { align-content: center; }
.oc-app__mark { justify-self: center; }
.oc-app__mark img { width: auto; height: var(--control-lg); }
.oc-app__h { margin: 0; font-size: var(--title-sm); line-height: var(--leading-title); }
.oc-app__body--center .oc-app__h { text-align: center; }
.oc-app__h--no { display: grid; font-size: var(--title-lg); }
.oc-app__h--no small { color: var(--muted); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.oc-app__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); }
.oc-app__who { display: inline-flex; align-items: center; gap: var(--space-2); }
.oc-app__who > span:last-child { display: grid; line-height: var(--leading-title); }
.oc-app__who small { color: var(--muted); font-size: var(--text-xs); }
.oc-app__cash { display: grid; justify-items: end; line-height: var(--leading-title); }
.oc-app__cash small { color: var(--muted); font-size: var(--text-xs); }
.oc-app__cash b { font-size: var(--title-sm); }
.oc-app__back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); color: var(--accent); font-weight: var(--weight-semibold); text-decoration: none; }
.oc-app__back svg { width: var(--icon-md); height: var(--icon-md); }
.oc-app__warn { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); background: var(--warn); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.oc-app__warn svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.oc-app__sub { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.oc-app__info { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.oc-app__info svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.oc-app__foot { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--panel); border-top: 1px solid var(--border2); }
.oc-app__foot .btn svg { width: var(--icon-md); height: var(--icon-md); }
.oc-app__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.oc-app__row .btn svg { width: var(--icon-md); height: var(--icon-md); }
.oc-app__map .smap { height: calc(var(--space-8) * 4); min-height: 0; border-radius: 0; border-width: 0 0 1px; }
.oc-app__sum { margin: 0; font-size: var(--text-sm); }
.oc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border-top: 1px solid var(--border2); }
.oc-tabs a { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 0; color: var(--muted); font-size: var(--text-xs); text-decoration: none; position: relative; }
.oc-tabs a svg { width: var(--icon-md); height: var(--icon-md); }
.oc-tabs a[aria-current="page"] { color: var(--accent); font-weight: var(--weight-semibold); }
.oc-tabs .staff-chip__n { position: absolute; top: 2px; right: 18%; background: var(--accent); color: var(--on-accent); }
.oc-pointlist { display: grid; gap: var(--space-2); }
.check.oc-pointrow { align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); }
.check.oc-pointrow input { left: var(--space-3); top: var(--space-4); }
.oc-pointrow > span:last-child { display: grid; line-height: var(--leading-title); }
.oc-pointrow small { color: var(--muted); font-size: var(--text-xs); }
.oc-pointrow.is-off { opacity: 0.55; }
.oc-stops { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.oc-stop, .oc-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2) var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); }
.oc-stop > span:last-child, .oc-next > span:last-child { display: grid; gap: 2px; line-height: var(--leading-title); font-size: var(--text-sm); }
.oc-stop small, .oc-next small { color: var(--muted); font-size: var(--text-xs); }
.oc-stop em { color: var(--err); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-semibold); }
.oc-stop__n { display: inline-grid; place-items: center; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-pill); background: var(--route-1); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.oc-stop--kitchen { background: var(--cream); border-style: dashed; }
.oc-stop--kitchen .oc-stop__n { background: var(--panel); color: var(--gold); box-shadow: inset 0 0 0 1px var(--border); }
.oc-stop__n svg { width: 14px; height: 14px; }
.oc-stop.is-now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.oc-stop.is-late { box-shadow: inset var(--space-1) 0 0 var(--err); }
.oc-arrived { 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); }
.oc-arrived svg { width: var(--icon-md); height: var(--icon-md); }
.oc-addr2 { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.oc-addr2 svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.oc-addr2 > span { display: grid; line-height: var(--leading-title); }
.oc-addr2 small { color: var(--muted); font-size: var(--text-xs); }
.oc-people { display: grid; gap: var(--space-2); margin: 0; }
.oc-people div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--border2); }
.oc-people dt { grid-column: 1; color: var(--muted); font-size: var(--text-xs); }
.oc-people dd { margin: 0; }
.oc-people dd:nth-of-type(1) { grid-column: 1; font-weight: var(--weight-semibold); }
.oc-people dd:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
.oc-people .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-app__lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.oc-app__lines small { margin-left: var(--space-2); color: var(--accent); font-size: var(--text-xs); }
.oc-paybox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--cream); }
.oc-paybox > b { font-size: var(--title-md); }
.oc-paybox__how { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.oc-paybox__how svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.oc-app__foot--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-took { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--border2); }
.oc-took.check input { left: var(--space-3); }
.oc-radios--one-col { grid-template-columns: minmax(0, 1fr); }
.oc-total--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-handover { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel); }
.oc-handover p { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.oc-handover p b { font-size: var(--title-md); white-space: nowrap; }
.oc-handover__state { justify-content: flex-start !important; font-weight: var(--weight-semibold); }
.oc-handover__state svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.oc-handover__state.is-wait { color: var(--warn); }
.oc-handover__state.is-ok { color: var(--ok); }
@media (max-width: 767px) {
  .oc-flow { padding-inline: 0; }
  .oc-flow__lead, .oc-screen figcaption { padding-inline: var(--gutter); }
  .oc-screens { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .oc-screen { max-width: none; }
  .oc-app { height: auto; min-height: calc(var(--space-8) * 9); border: 0; border-block: 1px solid var(--border); border-radius: 0; box-shadow: none; }
}

.oc-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--gutter); font-size: var(--text-sm); }
.oc-next-links span { color: var(--muted); }
.oc-next-links a { color: var(--accent); font-weight: var(--weight-semibold); }

/* ── «Курьеры» → «Расписание» (Р248-1): неделя по курьерам и точкам; на телефоне — день кнопками и список ───────── */
.oc-couriers__views svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.oc-couriers__views a.segments__item { text-decoration: none; color: var(--ink); }
.oc-couriers__views a.segments__item[aria-pressed="true"] { color: var(--accent); }
.oc-warn { color: var(--warn); font-weight: var(--weight-semibold); }
.courier-card__meta > span { display: block; }
.oc-plan { display: grid; gap: var(--space-3); min-width: 0; }
.oc-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.oc-plan__title { margin: 0; font-size: var(--title-md); }
.oc-plan__week { display: inline-flex; align-items: center; gap: var(--space-1); }
.oc-plan__week svg { width: var(--icon-md); height: var(--icon-md); }
.oc-plan__add { margin-left: auto; }
.oc-plan__add svg { width: var(--icon-md); height: var(--icon-md); }
.oc-plan__rule { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 110ch; font-size: var(--text-sm); }
.oc-plan__rule svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.oc-week-wrap { overflow: hidden; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); }
.oc-week { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.oc-week th, .oc-week td { padding: var(--space-2); border-top: 1px solid var(--border2); border-left: 1px solid var(--border2); vertical-align: top; text-align: left; }
.oc-week tr > :first-child { border-left: 0; }
.oc-week thead th { border-top: 0; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-week thead th:first-child { width: calc(var(--space-8) * 2.2); }
.oc-week .is-today { background: color-mix(in srgb, var(--tint) 60%, transparent); }
.oc-week thead th.is-today { color: var(--accent); }
.oc-week__who { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.oc-week__who .courier-card__dot, .oc-dayplan .courier-card__dot { width: var(--space-5); height: var(--space-5); font-size: var(--text-xs); }
.oc-cell { display: grid; gap: 2px; min-height: var(--control-md); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--cream);
  color: var(--ink); line-height: var(--leading-title); text-decoration: none; }
.oc-cell b { font-weight: var(--weight-semibold); }
.oc-cell small { font-size: var(--text-xs); }
.oc-cell--c1 { box-shadow: inset 3px 0 0 var(--route-1); }
.oc-cell--c2 { box-shadow: inset 3px 0 0 var(--route-2); }
.oc-cell--c3 { box-shadow: inset 3px 0 0 var(--route-3); }
.oc-cell--c4 { box-shadow: inset 3px 0 0 var(--route-4); }
a.oc-cell:hover { outline: 1px solid var(--accent); }
.oc-cell.is-picked { outline: 2px solid var(--accent); }
.oc-cell--off { place-items: center start; background: transparent; color: var(--muted); font-size: var(--text-xs); }
.oc-cell--add { place-items: center; background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.oc-cell--add svg { width: var(--icon-md); height: var(--icon-md); }
.oc-plan__phone { display: none; }
.oc-days7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.oc-days7__d { display: grid; justify-items: center; gap: 0; min-height: var(--tap); padding: var(--space-1) 0; border: 1px solid var(--border2); border-radius: var(--radius-md);
  background: var(--panel); color: var(--ink); font: inherit; font-size: var(--text-xs); line-height: var(--leading-title); }
.oc-days7__d b { font-size: var(--text-sm); }
.oc-days7__d[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.oc-dayplan { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); }
.oc-dayplan li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.oc-dayplan li + li { border-top: 1px solid var(--border2); }
.oc-dayplan__text { display: grid; line-height: var(--leading-title); font-size: var(--text-sm); }
.oc-dayplan__text > span { color: var(--muted); }
.oc-dayplan__text small { font-size: var(--text-xs); }
@media (max-width: 767px) {
  .oc-week-wrap { display: none; }
  .oc-plan__phone { display: grid; gap: var(--space-3); }
  .oc-plan__add { margin-left: 0; }
}
.oc-plan__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-plan__points { width: 100%; }
.oc-plan__points .segments__item { flex: 1 1 0; justify-content: center; }
.oc-plan__hours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
@media (max-width: 479px) { .oc-plan__fields { grid-template-columns: minmax(0, 1fr); } }
.oc-plan-dlg .oc-group legend { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.oc-plan-dlg .oc-group { gap: 0; }
.nw { white-space: nowrap; }

/* ── Третья редакция (замечания владельца 13.10): карта справа без переключателя, вид ленты, фильтры ───────── */
.staff-side.oc-side { grid-template-rows: minmax(0, 1fr); }
.oc-side .staff-side__body { overflow: hidden; }
@media (max-width: 767px) { .staff-views { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc-mapcard { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-7); z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border2); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-2); }
.oc-mapcard__who { display: grid; line-height: var(--leading-title); font-size: var(--text-sm); }
.oc-mapcard__who b { font-size: var(--text-md); }
.oc-mapcard__who span { color: var(--muted); font-size: var(--text-xs); }
.oc-mapcard__acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.oc-mapcard__acts .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-mapcard__x { grid-column: 3; grid-row: 1; align-self: start; width: var(--control-sm); height: var(--control-sm); }
.oc-mapcard__x svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-card__acts { display: inline-flex; align-items: center; gap: var(--space-2); }
.oc-card__acts .btn svg { width: var(--icon-sm); height: var(--icon-sm); }

.oc-feedbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.oc-viewmode { flex: none; }
.oc-viewmode a.segments__item { text-decoration: none; color: var(--ink); }
.oc-viewmode a.segments__item[aria-pressed="true"] { color: var(--accent); }
.oc-viewmode svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
.oc-feedsearch { flex: 1 1 calc(var(--space-8) * 4); min-width: 0; height: var(--control-md); }
.oc-feedsearch input { font-size: var(--text-sm); }
.oc-filters-btn { text-decoration: none; }
.oc-filters-btn svg { width: var(--icon-md); height: var(--icon-md); }
.oc-filters-btn.is-set { border-color: var(--accent); color: var(--accent); }
.oc-feedbar .oc-phone-order { margin-left: auto; }
.oc-chipsbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.oc-fchip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); padding: 0 var(--space-1) 0 var(--space-3); border-radius: var(--radius-pill);
  background: var(--tint); color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.oc-fchip button { display: inline-grid; place-items: center; width: var(--space-5); height: var(--space-5); padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.oc-fchip svg { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 767px) {
  .oc-feedbar .oc-viewmode { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-feedsearch { flex: 1 1 100%; height: var(--tap); }
  .oc-filters-btn { flex: 1 1 0; justify-content: center; min-height: var(--tap); }
  .oc-feedbar .oc-phone-order { flex: 1 1 0; margin-left: 0; justify-content: center; min-height: var(--tap); }
}

/* Вид «Списком»: таблица заказов смены; «требуют внимания» — красной полосой слева */
.oc-lt__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md); background: var(--panel); box-shadow: inset var(--space-1) 0 0 var(--warn); font-size: var(--text-sm); }
.oc-lt__aside svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--warn); }
.oc-lt__aside span { flex: 1 1 0; min-width: 0; }
.oc-lt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.oc-lt__bar b { color: var(--ink); }
.oc-lt__keep { margin-left: auto; }
.oc-lt__sortsel { display: none; }
.oc-lt__wrap { overflow: hidden; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); }
.oc-lt { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.oc-lt th, .oc-lt td { padding: var(--space-2) var(--space-2); border-top: 1px solid var(--border2); text-align: left; vertical-align: middle; white-space: nowrap; }
.oc-lt thead th { border-top: 0; padding-block: var(--space-1); }
.oc-lt .is-num { text-align: right; }
.oc-lt__sort { display: inline-flex; align-items: center; gap: 2px; padding: var(--space-1) 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; }
.oc-lt__sort:hover { color: var(--accent); }
.oc-lt__sort.is-on { color: var(--accent); }
.oc-lt__sort svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-lt__row td:first-child { padding-left: var(--space-3); }
.oc-lt__row.is-attn td:first-child { box-shadow: inset var(--space-1) 0 0 var(--err); }
.oc-lt__row.is-attn { background: color-mix(in srgb, var(--err) 5%, transparent); }
.oc-lt__row.is-ours { background: var(--tint); }
.oc-lt__time { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.oc-lt__no a { color: var(--ink); font-weight: var(--weight-semibold); text-decoration: none; }
.oc-lt__no a:hover { color: var(--accent); }
.oc-lt__why { display: flex; align-items: center; gap: 2px; color: var(--err); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.oc-lt__why svg { flex: none; width: 12px; height: 12px; }
.oc-lt__chan, .oc-lt__point, .oc-lt__zone, .oc-lt__courier { color: var(--muted); }
.oc-lt__ic { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted); }
.oc-lt__ic svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-lt .state { font-size: var(--text-xs); }
.oc-lt__more { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.oc-lt__more svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Узко (телефон, планшет): строка таблицы — карточкой в две строки, порядок — выбором */
@container feed (max-width: 679px) {
  .oc-lt__sortsel { display: block; }
  .oc-lt__sortsel .select { height: var(--control-md); font-size: var(--text-sm); }
  .oc-lt__bar > span:first-child { display: none; }
  .oc-lt__keep { margin-left: 0; }
  .oc-lt thead { display: none; }
  .oc-lt, .oc-lt tbody { display: block; }
  .oc-lt tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border2); }
  .oc-lt tbody tr:first-child { border-top: 0; }
  .oc-lt tr::before { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .oc-lt td { padding: 0; border: 0; }
  .oc-lt__row td:first-child { padding-left: 0; }
  .oc-lt__row.is-attn { box-shadow: inset var(--space-1) 0 0 var(--err); }
  .oc-lt__row.is-attn td:first-child { box-shadow: none; }
  .oc-lt__time, .oc-lt__no, .oc-lt__state { order: 1; }
  .oc-lt__sum { order: 2; margin-left: auto; font-weight: var(--weight-semibold); }
  .oc-lt__no { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
  .oc-lt__chan, .oc-lt__method, .oc-lt__point, .oc-lt__zone, .oc-lt__courier, .oc-lt__pay { order: 6; font-size: var(--text-xs); }
  .oc-lt td.is-none { display: none; }
}

/* Панель «Фильтры» */
.dialog.oc-fdlg { width: min(100%, calc(var(--space-8) * 14)); }
.oc-fdlg__top { display: grid; gap: var(--space-3); }
.oc-fdlg__top .search { height: var(--control-md); }
.oc-fdlg__day { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.oc-fdlg__label { font-weight: var(--weight-semibold); }
.oc-fdlg__period, .oc-fdlg__range { display: inline-flex; align-items: center; gap: var(--space-2); }
.oc-fdlg__period .input, .oc-fdlg__range .input { width: calc(var(--space-8) + var(--space-5)); height: var(--control-md); text-align: center; }
.oc-fdlg__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
.oc-fdlg__col { display: grid; gap: var(--space-4); }
.oc-fdlg .check.filter-row { min-height: var(--control-sm); }
.oc-fdlg__keep { margin-left: auto; align-self: center; }
@media (max-width: 767px) {
  .oc-fdlg__grid { grid-template-columns: minmax(0, 1fr); }
  .oc-fdlg__keep { margin-left: 0; }
  .oc-fdlg .check.filter-row { min-height: var(--tap); }
}
@media (max-width: 1099px) { body.is-list .staff-views { display: flex; } }
/* «Убрать блюдо» — пересоздание (И291) */
.po-recreate.oc-recreate { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--warn); border-radius: var(--radius-md); font-size: var(--text-sm); }
.oc-recreate p, .oc-recreate ul { margin: 0; }
.oc-recreate ul { padding-left: var(--space-5); }
.oc-recreate__warn { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--err); font-weight: var(--weight-semibold); }
.oc-recreate__warn svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
/* Время — шрифтом интерфейса с ровными цифрами, а не моноширинным (журнал заказа и журнал перемен; копия эталона
   staff.css не правится — переопределяем здесь) */
.order-journal time { font-family: var(--font-text); font-variant-numeric: tabular-nums; }
.oc-lt, .order-row__time, .load-win b { font-variant-numeric: tabular-nums; }

/* ── Вход курьера, Р251: строки «не про заказ» над таблицей, телефоны курьера, «Впустить курьера», «смена не закончена» */
.oc-lt__asides { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.oc-couriers__top .oc-letin { margin-left: auto; }
.oc-letin svg { width: var(--icon-md); height: var(--icon-md); }
.oc-phones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--border2); font-size: var(--text-xs); }
.oc-phones__t { color: var(--muted); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.oc-phones__row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--muted); }
.oc-phones__row b { color: var(--ink); font-weight: var(--weight-semibold); }
.oc-phones__close { margin-left: auto; }
.oc-phones__close svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-letin__code { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--tint); text-align: center; }
.oc-letin__code > span:first-child { color: var(--muted); font-size: var(--text-sm); }
.oc-letin__code b { font-family: var(--font-title); font-size: calc(var(--title-xl) * 1.4); letter-spacing: 0.08em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oc-letin__left { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--warn); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.oc-letin__left svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-letin__how { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.oc-forgot__time { display: inline-flex; align-items: center; gap: var(--space-3); }
.oc-forgot__time .input { width: calc(var(--space-8) * 1.6); text-align: center; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
@media (max-width: 767px) { .oc-couriers__top .oc-letin { margin-left: 0; flex: 1 1 100%; justify-content: center; } .oc-phones__close { margin-left: 0; } }

/* Цвета зон «Восточного» — как на карте зон «Загрузки» (пятая редакция): у каждой зоны свой цвет */
.smap__zone--1 { fill: #4D78E0; fill-opacity: 0.14; stroke: #4D78E0; }
.smap__zone--2 { fill: #1F9E89; fill-opacity: 0.1; stroke: #1F9E89; }
.smap__zone--3 { fill: #D99A1E; fill-opacity: 0.08; stroke: #D99A1E; }
.smap__swatch--1 { background: #4D78E0; opacity: 0.7; }
.smap__swatch--2 { background: #1F9E89; opacity: 0.7; }
.smap__swatch--3 { background: #D99A1E; opacity: 0.7; }
/* Шапка карточки на узком: «Сайт № 17» и кнопки — одной строкой, состояние и точка — во всю ширину под ними */
@media (max-width: 1099px) {
  .order-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); }
  .order-card__head .order-card__title { display: contents; }
  .order-card__head .oc-chan { grid-column: 1; grid-row: 1; }
  .order-card__head .order-card__no { grid-column: 1; grid-row: 2; }
  .order-card__head .oc-card__acts { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .order-card__head .order-card__status, .order-card__head .order-card__point { grid-column: 1 / -1; }
}

/* ── Шестая правка (аудит 13.10) ─────────────────────────────────────────────────────────────────────────── */
/* Строка ленты: отметки — одним значком с окошком, точка — второстепенным в конце (orders.css, Р356). */
.oc-night { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.oc-night svg { flex: none; }
/* Значок канала — обычными буквами везде (4.2.11) */
.oc-chan { text-transform: none; letter-spacing: 0; }
/* «Списком»: иконка и текст по одной линии (5.2.7); на телефоне — постоянная схема строк (5.2.3) */
.oc-lt__ic { vertical-align: middle; line-height: var(--leading-title); }
.oc-lt td { line-height: var(--leading-title); }
@container feed (max-width: 679px) {
  .oc-lt tr::after { content: ""; order: 7; flex-basis: 100%; height: 0; }
  .oc-lt__time, .oc-lt__no { order: 1; }
  .oc-lt__sum { order: 2; }
  .oc-lt__state { order: 6; }
  .oc-lt__chan, .oc-lt__method, .oc-lt__point, .oc-lt__zone, .oc-lt__courier, .oc-lt__pay { order: 8; }
  .oc-lt__no small { flex-basis: 100%; }
}
/* «Списком» на ПК карта больше не ложится поверх таблицы: с этапа 5 (вариант Б, Р528) она своей панелью, как в «Группах» —
   list.css, js/orders/layout.js. */
/* Карточка курьера на карте: на телефоне — свёрнутой полосой у нижнего края (5.2.5) */
@media (max-width: 767px) {
  .oc-mapcard { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-2) var(--space-3); }
  .oc-mapcard__more, .oc-mapcard__acts .btn--secondary { display: none; }
  .oc-mapcard__acts { grid-column: 3; grid-row: 1; }
  .oc-mapcard__x { display: none; }
}
/* Метка адреса */
.oc-pinbox { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.oc-pinbox__side { display: grid; gap: var(--space-3); }
.oc-pinbox__side .search { height: var(--control-md); }
.oc-pinbox__map .smap { height: calc(var(--space-8) * 5); }
@media (max-width: 767px) { .oc-pinbox { grid-template-columns: minmax(0, 1fr); } .oc-pinbox__map .smap { height: calc(var(--space-8) * 4); } }
.oc-cancel__wo { width: 100%; }
.oc-cancel__wo .segments__item { flex: 1 1 0; justify-content: center; }
.oc-pick__eta.is-tight { color: var(--warn); }
/* Фильтры: группы — колонками без общих рядов; при многих зонах группа растёт вниз, соседи не тянутся (5.1) */
.oc-fdlg__grid { display: block; columns: 3; column-gap: var(--space-5); }
.oc-fdlg__grid > .filters__group { break-inside: avoid; margin-bottom: var(--space-4); }
@media (max-width: 767px) { .oc-fdlg__grid { columns: 1; } }
/* Легенда карты — только сроки; зоны подписаны на карте «Загрузки», а на этой карте — цветом (5.1, легенда растёт) */
.smap__legend .smap__key:has(> .smap__swatch--1, > .smap__swatch--2, > .smap__swatch--3) { display: none; }

/* Шапка сайта операторов: имя сети — не вкладка (5.7.3); на телефоне — два ряда (5.7.1) */
.staff-client--one { padding-left: var(--space-3); border-left: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.staff-switch svg { display: none; }
@media (max-width: 767px) {
  .staff-bar__inner { flex-wrap: wrap; column-gap: var(--space-2); }
  .staff-client--one { border-left: 0; padding-left: 0; }
  .staff-bar__end { margin-left: auto; }
  .staff-switch { width: var(--tap); min-height: var(--tap); padding: 0; justify-content: center; }
  .staff-switch svg { display: block; width: var(--icon-md); height: var(--icon-md); }
  .staff-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Окна и шторки на телефоне: главная кнопка во всю ширину, остальные — рядом в одну строку (5.7.2) */
@media (max-width: 767px) {
  .dialog__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .dialog__foot > .btn { flex: none; width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: var(--leading-title); }
  .dialog__foot > .btn:first-child, .dialog__foot > .btn:only-child, .dialog__foot > :last-child:nth-child(2n + 2):is(.oc-note, span) { grid-column: 1 / -1; }
  .dialog__foot > .oc-note, .dialog__foot > span { grid-column: 1 / -1; }
}
/* Окно маршрута: кнопки окна — поверх карты (5.3.1), карта — во всю высоту списка (5.3.4) */
.dialog__foot { z-index: 6; }
.smap { isolation: isolate; }
@media (min-width: 900px) { .route__grid { align-items: stretch; } .oc-route-map, .oc-route-map .smap { height: 100%; min-height: calc(var(--space-8) * 5.5); } }

/* «Курьеры» (шестая правка): «⋯» в карточке, окно телефонов, «Вернуть на точку», кнопки окна маршрута */
.oc-more { min-width: var(--control-sm); font-size: var(--text-lg); line-height: 1; justify-content: center; }
.oc-phlist { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border2); border-radius: var(--radius-md); }
.oc-phlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.oc-phlist li + li { border-top: 1px solid var(--border2); }
.oc-phlist li > span { display: grid; line-height: var(--leading-title); }
.oc-phlist small { color: var(--muted); font-size: var(--text-xs); }
.staff-outage.oc-alarm--info { border-color: var(--warn); box-shadow: inset var(--space-1) 0 0 var(--warn); }
.oc-alarm--info > svg, .oc-alarm--info .staff-outage__title { color: var(--warn); }
.oc-dlg-acts { display: inline-flex; align-items: center; gap: var(--space-2); }
.oc-letin__left > span { display: inline; }
.oc-letin__left svg { display: inline-block; vertical-align: -2px; }
/* Остановки маршрута на телефоне — без кнопок ↑↓, порядок — ручкой (5.3.2) */
@media (max-width: 767px) { .route-stop__move { display: none; } .route-stop { grid-template-columns: auto auto minmax(0, 1fr) !important; } }
/* Карточка курьера на телефоне: «На руках» под шапкой (5.3.5); сводка 2 × 2 (5.3.6); кнопки тревоги — во всю строку */
@media (max-width: 767px) {
  .courier-card__head { flex-wrap: wrap; }
  .courier-card__head .oc-cash { flex-basis: 100%; justify-items: start; margin-left: calc(var(--control-md) + var(--space-3)); display: flex; gap: var(--space-2); align-items: baseline; }
  .oc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .oc-alarm__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-alarm__acts .btn { justify-content: center; min-width: 0; white-space: normal; text-align: center; line-height: var(--leading-title); }
  /* Главное действие — первым и во всю строку; остальные по два, длинная подпись переносится, а не обрезается */
  .oc-alarm__acts .btn--primary { grid-column: 1 / -1; order: -1; }
  .oc-alarm__acts:not(:has(.btn--primary)) .btn:first-child { grid-column: 1 / -1; }
  .oc-alarm__acts:has(> :nth-child(2):last-child) > * { grid-column: 1 / -1; }
}
/* Расписание: клетки одной высоты (5.3.7) */
.oc-cell { min-height: calc(var(--space-8) + var(--space-3)); align-content: start; }
.oc-wait .order-row__info.oc-info { --oc-where: calc(var(--space-8) * 2.6); }
@media (max-width: 767px) {
  .oc-couriers__top > .segments:not(.oc-couriers__views) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .oc-couriers__top > .segments:not(.oc-couriers__views) .segments__item { justify-content: center; padding: 0 var(--space-1); font-size: var(--text-sm); }
}

/* ── Седьмая правка (Р256): порядок и фильтры «По группам», курьер и маршрут прямо на «Заказах», заказ на месте карты ── */
.oc-gsort { justify-content: space-between; }
.oc-gsort__sel { display: inline-flex; align-items: center; gap: var(--space-2); }
.oc-gsort__sel .select { width: auto; height: var(--control-sm); padding-block: 0; font-size: var(--text-sm); }
/* Тревога другой точки под фильтром — строкой, не пропадает молча */
.oc-hidden-alarm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--err); border-radius: var(--radius-md); color: var(--muted); font-size: var(--text-sm); }
.oc-hidden-alarm svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--err); }
.oc-hidden-alarm span { flex: 1 1 0; min-width: 0; }
.oc-hidden-alarm b { color: var(--ink); }
/* Отмеченная для курьера строка */
.order-row.oc-picked { background: var(--tint); }
/* И294: «Назначить курьера» — сборка рейса внутри колонки курьеров (Р352-5): раскладка колонки — orders.css. */
.oc-as { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-2); }
.oc-as[hidden] { display: none; }
.oc-as__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.oc-as__title { display: grid; gap: 2px; min-width: 0; line-height: var(--leading-title); }
.oc-as__title b { font-size: var(--text-md); }
.oc-as__title span { color: var(--muted); font-size: var(--text-sm); }
.oc-as__x { flex: none; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; }
.oc-as__sel { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.oc-as__sel li { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 var(--space-2); border-radius: var(--radius-pill); background: var(--tint); font-size: var(--text-xs); }
.oc-as__sel .icon-btn { width: var(--control-sm); height: var(--control-sm); min-width: 0; min-height: 0; }
.oc-as__sel .icon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-as__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.oc-as .btn svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.oc-as__crew { margin: 0; }
.oc-as .oc-pick__row { grid-template-columns: auto auto minmax(0, 1fr); }
.oc-as .oc-pick__eta { grid-column: 3; text-align: left; }
.oc-as .oc-hint .btn { flex: none; margin-left: auto; }
.oc-as__chosen { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--tint); }
.oc-as__chosen .oc-pick__text { flex: 1 1 0; }
.oc-as__chosen .btn { flex: none; white-space: nowrap; }
.oc-as__ok { display: flex; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.oc-as__ok svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--ok); }
.oc-as[data-step="sent"] { border-color: var(--ok); }
.oc-as .route-stop[draggable="true"] { cursor: grab; }
.oc-as .route-stop.is-dragging { opacity: 0.5; }
@media (max-width: 1099px) {
  .oc-as__foot .btn--primary { flex: 1 1 auto; justify-content: center; }
}
.oc-pick__eta--two { display: grid; gap: 2px; font-size: var(--text-xs); }
.oc-pick__eta .is-late { color: var(--err); }
.oc-pick__eta .is-tight { color: var(--warn); }
.oc-pick__eta .is-ok { color: var(--ok); }
.oc-inline-ic { width: var(--icon-sm); height: var(--icon-sm); vertical-align: middle; }

/* ── Р277: точки на карте «Заказов» (макет cc50563a, `oc.css`) ─────────────────────────────────────────────
   Выбор «Все · Шу-Шу · Островок» — поверх карты, полупрозрачными кнопками: карта видна под ними, места у неё они не
   отнимают; справа сверху оставлено место кнопкам карты. Зоны — цветом своей точки (на сайте — слоем карты,
   `ordersmap.js`), флажки точек — `operator.css`. */
.smap--venues { container: smap / inline-size; --v1: light-dark(#2F6FDB, #8EB1FF); --v2: light-dark(#B0560A, #F5A35C); }
/* Верх карты: выбор точки, под ним — подпись сроков; поверх карты, справа — место кнопкам карты */
.smap__top {
  position: absolute; top: var(--space-2); left: var(--space-2); right: calc(var(--space-2) * 2 + var(--control-md)); z-index: 3;
  display: grid; justify-items: start; gap: var(--space-1); pointer-events: none;
}
.smap__top > * { pointer-events: auto; }
.smap__top .smap__legend { position: static; max-width: 100%; pointer-events: none; }
.smap__switch { display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: 100%; }
.smap__sw {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); margin: 0; padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--panel) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px light-dark(rgb(15 26 58 / 0.1), rgb(0 0 0 / 0.35));
  color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: var(--leading-title); text-align: left; cursor: pointer;
}
.smap__sw:hover { background: color-mix(in srgb, var(--panel) 78%, transparent); }
.smap__sw[aria-pressed="true"] {
  border-color: var(--sc, var(--accent)); background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--sc, var(--accent)), var(--shadow-1); color: var(--sc, var(--accent)); font-weight: var(--weight-semibold);
}
.smap__sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.smap__sw--v1 { --sc: var(--v1); }
.smap__sw--v2 { --sc: var(--v2); }
.smap__sw-dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--sc); }
.smap__sw-text b { font-weight: var(--weight-semibold); }
.smap__sw-addr { color: var(--ink); font-weight: var(--weight-regular); }
/* Узкая карта (телефон, «Списком + карта», 1100–1280): адрес — второй строкой, без запятой; кнопки — пальцем. На сайте —
   до 680 px (в макете — до 580): адреса точек длиннее макетных («мкр. Восточный, 32»), и на ПК выбор уходил в два ряда. */
@container smap (max-width: 680px) {
  .smap__sw { gap: var(--space-1); padding: 2px var(--space-2); }
  .smap__sw:not([class*="smap__sw--v"]) { padding-inline: var(--space-3); }
  .smap__sw-dot { width: 8px; height: 8px; }
  .smap__sw-text { display: grid; }
  .smap__sw-comma { display: none; }
  .smap__sw-addr { font-size: var(--text-xs); }
}
@media (max-width: 767px) { .smap__sw { min-height: var(--tap); } }
/* «Понятно» (Р336-2): скрытые оператором строки, раскрытые внизу «Требуют внимания», — бледнее, с «Вернуть». */
.issue.is-seen { opacity: 0.6; }
/* «Завершены за N часов» (Р338-1): выбор окна — строкой над завершёнными и рядом с «показать в таблице». */
.feed-closed__hours { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; color: var(--muted); font-size: var(--text-sm); }
.feed-closed__hours select { width: auto; }
.oc-lt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* «История» (Р338-2, Р356-1): тот же экран — отборы, поиск и фильтры на месте; полоса промежутка — в верхней полосе. */
.oc-hist__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.oc-hist__day, .oc-hist__hours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Владелец 08.11: поля «Истории» — в стиле остальных полей. Дата — текстом «дд.мм.гггг», рядом кнопка календаря, как
   в панели (календарь браузера спрятан и лишь подставляет день); часы — «ЧЧ:ММ», как в «Расписании» (`.oc-time`). */
.oc-hist__field { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); }
.oc-hist__date { width: calc(var(--space-8) * 2); text-align: center; }
.oc-hist__cal { color: var(--muted); }
.oc-hist__picker { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.oc-hist__bar .input[aria-invalid] { border-color: var(--err); }
.oc-hist__hours .oc-time .input { height: var(--control-lg); }
.oc-hist__dayword { font-weight: var(--weight-semibold); }
.oc-hist__sum { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-sm); }
/* «Сейчас | История» у «На смене» (Р338-3) — по словам, а не во всю ширину ПК. */
.oc-shift-modes { max-width: 20rem; }