/* «Ждут курьера» в одном месте и курьер одной строкой (Р529, Р532; этап 4 `docs/design/operator-workspace-v2.md` §6, §7,
   Т6; макет 026, сцены «ждёт курьера → очередь», «Сборка рейса», «Окошко курьера», «Курьеры → На смене»):
   - метка «ждёт курьера» в ленте и таблице — кнопкой (своих галочек у строк нет), подсветка строки очереди после неё;
   - полоса «Отмечено: 2 · Снять все · Кто успевает →» внизу колонки «Курьеры»;
   - курьер на смене — одной строкой 32 (кружок с числом в сумке, имя, слова двери), «Курьеры → На смене» — тоже;
   - окошко курьера рядом со строкой (js/rowpop.js): список под ним не сдвигается; телефон и планшет — листом снизу.
   Размеры — только токенами, цвета — только ролями темы: сторож tests/design/test_tokens_guard.py читает и этот файл. */

:root {
  --ops-pop-w: 340px;     /* окошко курьера */
  --ops-pop-arrow: 12px;  /* стрелка окошка к строке */
  --ops-bag: 14px;        /* число заказов в сумке над кружком курьера */
  --ops-pop-z: calc(var(--z-dropdown) + 2);  /* окошко — над листом «Курьеры» телефона, под окнами и строкой-уведомлением */
}

/* ── «ждёт курьера» в ленте и таблице ─────────────────────────────────────────────────────────────────────────────── */
.oc-wmark {
  display: inline-flex; flex: none; align-items: center; gap: var(--space-1); min-height: var(--ops-chip); padding: 0 var(--ops-tight);
  border: 1px solid var(--going); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink);
  font: inherit; font-size: var(--ops-text-sm); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; cursor: pointer;
}
.oc-wmark svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--going); }
.oc-wmark:hover { background: var(--tint); }
.oc-wmark:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Лента 460–559: тесно — у метки остаётся значок (слово — для читалок и подсказкой); шире — словом: у ждущего курьера
   заказа место курьера в строке пустое. */
@container feed (min-width: 460px) and (max-width: 559px) {
  #feed .order-row .oc-wmark { padding: 0 var(--space-1); }
  #feed .order-row .oc-wmark__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Таблица: под состоянием мелко, без рамки (строка остаётся 36: метка 20 и строка 12 — без межстрочных зазоров). */
#feed .oc-lt__state { line-height: 1; white-space: nowrap; }
#feed .oc-lt__state > .state { vertical-align: top; }
#feed .oc-lt__state .oc-wmark {
  display: flex; width: fit-content; min-height: 0; padding: 0; border: 0; background: none; font-size: var(--ops-text-xs); line-height: 1;
}
#feed .oc-lt__state .oc-wmark svg { width: var(--ops-text-xs); height: var(--ops-text-xs); }
#feed .oc-lt__state .oc-wmark:hover .oc-wmark__w { text-decoration: underline; }
/* Срок «курьера — с 11:10» (Р351-1) — в ленте и таблице одной строкой на месте метки. */
#feed .order-row__info .order-pick-from .oc-hint__btn, #feed .oc-lt__state .order-pick-from .oc-hint__btn {
  min-width: 0; min-height: var(--ops-chip); padding: 0 var(--space-1);
}
#feed .order-row__info .order-pick-from__face, #feed .oc-lt__state .order-pick-from__face {
  display: inline-flex; gap: var(--space-1); font-size: var(--ops-text-xs);
}
#feed .oc-lt__state .order-pick-from { display: flex; }
@media (max-width: 1099px) {
  #feed .oc-wmark, #feed .oc-lt__state .oc-wmark { min-height: var(--tap); }
  #feed .order-row__info .order-pick-from .oc-hint__btn, #feed .oc-lt__state .order-pick-from .oc-hint__btn { min-height: var(--tap); }
  /* Телефон (лента двумя линиями): метка в палец — в первой линии, рядом с действиями (они и так 44), а не второй линией
     выше прочих: иначе строка ждущего курьера заказа выше на 24 и на экране на заказ меньше. Прочее из места подробностей
     — второй линией, как было. */
  @container feed (max-width: 459px) {
    #feed .order-row > .order-row__info:has(> .oc-wmark) { display: contents; }
    #feed .order-row > .order-row__info:has(> .oc-wmark) > * { order: 3; }
    #feed .order-row > .order-row__info > .oc-wmark { order: 1; justify-content: center; min-width: var(--tap); padding: 0; }
    #feed .order-row > .order-row__info > .oc-wmark .oc-wmark__w {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    #feed .order-row > .order-row__info:has(> .oc-wmark) > .order-row__where { flex: 1 1 0; }
  }
  /* Таблица карточками (телефон): метка — рядом с состоянием, а не своей строкой. */
  @container feed (max-width: 679px) {
    #feed .oc-lt__state .oc-wmark, #feed .oc-lt__state .order-pick-from { display: inline-flex; margin-left: var(--space-2); vertical-align: middle; }
  }
}

/* ── Очередь «Ждут курьера»: подсветка строки, к которой привела метка ─────────────────────────────────────────────── */
#oc-crew .oc-crew__h > span:first-child { flex: none; white-space: nowrap; }
#oc-crew .oc-crew__note { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: var(--ops-text-xs);
  font-weight: var(--weight-regular); text-overflow: ellipsis; white-space: nowrap; }
#oc-crew .oc-crew__wait > li.is-spot { background: var(--tint); box-shadow: inset var(--space-1) 0 0 var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  #oc-crew .oc-crew__wait > li.is-flash { animation: oc-spot var(--motion-slow) var(--ease) 2; }
}
@keyframes oc-spot {
  50% { background: var(--panel); }
}

/* ── Полоса отмеченного внизу колонки ─────────────────────────────────────────────────────────────────────────────── */
body.oc-picking:not(.oc-assigning) #oc-crew .oc-crew__body { display: flex; flex-direction: column; }
/* Список тянется до полосы, а строки — нет: лишняя высота — пустым местом под списком. */
body.oc-picking:not(.oc-assigning) #oc-crew .oc-board { flex: 1 0 auto; align-content: start; }
#oc-crew .oc-as[data-step="pick"] {
  position: sticky; bottom: 0; z-index: var(--z-above); padding: var(--space-2) var(--ops-pad); border-top: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-1);
}
.oc-as__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.oc-as__count { flex: 1 1 calc(var(--space-8) * 2); min-width: 0; overflow: hidden; font-size: var(--ops-text-sm); text-overflow: ellipsis;
  white-space: nowrap; }
.oc-as__names { color: var(--muted); }
.oc-as__bar .oc-as__assign { margin-left: auto; }
@container pane (max-width: 419px) { .oc-as__names { display: none; } }
.oc-as__bar .btn { min-height: var(--ops-ctl); height: var(--ops-ctl); padding: 0 var(--ops-pad); font-size: var(--ops-text); }
.oc-as__bar .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 1099px) {
  .oc-as__bar .btn { min-height: var(--tap); height: var(--tap); }
}

/* ── Курьер на смене одной строкой ────────────────────────────────────────────────────────────────────────────────── */
/* Имя многоточием, а не шириной строки: без этого сетка списка берёт ширину по самому длинному имени и строка вылезает. */
#oc-crew .oc-crew__part > *, #oc-crew .oc-crew__list > li, #couriers .oc-shiftrows, #couriers .oc-shiftrows > li { min-width: 0; }
.oc-crew__who .courier-card__dot, .oc-shiftrow .courier-card__dot { position: relative; flex: none; overflow: visible; }
.oc-crew__bag {
  position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); min-width: var(--ops-bag); height: var(--ops-bag);
  padding: 0 2px; border: 1px solid var(--panel); border-radius: var(--radius-pill); background: var(--gold); color: var(--on-accent);
  font-size: calc(var(--ops-text-xs) - 2px); font-style: normal; font-weight: var(--weight-bold); line-height: var(--ops-bag); text-align: center;
}
#oc-crew .oc-crew__who .oc-crew__free { justify-self: end; white-space: nowrap; }
#oc-crew .oc-crew__courier.is-open .oc-crew__who { background: var(--tint); box-shadow: inset var(--space-1) 0 0 var(--accent); }
@media (max-width: 1099px) {
  #oc-crew .oc-crew__who { min-height: var(--tap); }
}

/* ── Окошко рядом со строкой ──────────────────────────────────────────────────────────────────────────────────────── */
.oc-rowpop {
  position: fixed; z-index: var(--ops-pop-z); display: flex; flex-direction: column;
  width: min(var(--ops-pop-w), calc(100vw - var(--space-4))); max-height: calc(100dvh - var(--space-4));
  padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--ops-radius);
  background: var(--panel); box-shadow: var(--shadow-3); color: var(--ink); font-size: var(--ops-text); line-height: var(--leading-title);
}
.oc-rowpop:focus { outline: none; }
.oc-rowpop:focus-visible { box-shadow: var(--shadow-3), 0 0 0 2px var(--focus); }
.oc-rowpop__arrow {
  position: absolute; width: var(--ops-pop-arrow); height: var(--ops-pop-arrow); border: 1px solid var(--border); background: var(--panel);
  transform: rotate(45deg);
}
.oc-rowpop[data-side="left"] > .oc-rowpop__arrow { right: calc(var(--ops-pop-arrow) / -2); border-bottom: 0; border-left: 0; }
.oc-rowpop[data-side="right"] > .oc-rowpop__arrow { left: calc(var(--ops-pop-arrow) / -2); border-top: 0; border-right: 0; }
.oc-rowpop__arrow[hidden] { display: none; }
.oc-rowpop__x { position: absolute; top: var(--space-2); right: var(--space-2); z-index: var(--z-raised); width: var(--ops-small);
  height: var(--ops-small); }
.oc-rowpop__x svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-rowpop__body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.oc-rowpop__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2); padding-right: var(--control-sm); }
.oc-rowpop__head .courier-card__dot { width: var(--control-sm); height: var(--control-sm); font-size: var(--ops-text); }
.oc-rowpop__who { display: grid; min-width: 0; }
.oc-rowpop__name { overflow-wrap: anywhere; font-size: var(--ops-text-no); font-weight: var(--weight-semibold); }
.oc-rowpop__who small { color: var(--muted); font-size: var(--ops-text-sm); overflow-wrap: anywhere; }
.oc-rowpop__who small.is-free { color: var(--ok); font-weight: var(--weight-semibold); }
.oc-rowpop__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.oc-rowpop__dl dt { color: var(--muted); }
.oc-rowpop__dl dd { display: grid; gap: 2px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.oc-rowpop .oc-crew__where { color: var(--ink); font-size: var(--ops-text); }
.oc-rowpop .oc-crew__run { font-size: var(--ops-text); }
.oc-rowpop .oc-crew__points { color: var(--ink); }
.oc-rowpop .oc-warn { color: var(--warn); }
.oc-rowpop [data-where] { display: inline-flex; align-items: flex-start; gap: var(--space-1); }
.oc-rowpop [data-where] > svg, .oc-shiftrow [data-trouble] > svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.oc-shiftrow [data-trouble] { display: inline-flex; vertical-align: middle; }
.oc-rowpop__h { margin: var(--space-2) 0 var(--space-1); color: var(--muted); font-size: var(--ops-text-sm); font-weight: var(--weight-semibold); }
.oc-rowpop .oc-crew__stops { overflow: hidden; border: 1px solid var(--border2); border-radius: var(--ops-ctl-radius); }
.oc-rowpop .oc-crew__stops + .oc-crew__stops { margin-top: var(--space-1); }
.oc-rowpop .oc-crew__stops > li + li { border-top: 1px solid var(--border2); }
.oc-rowpop .oc-crew__stops a { min-height: var(--ops-ctl); padding: var(--space-1) var(--space-2); }
.oc-rowpop__note { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--ops-text-sm); }
.oc-rowpop__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--border2); }
.oc-rowpop__acts .btn { min-height: var(--ops-ctl); height: var(--ops-ctl); padding: 0 var(--ops-pad); font-size: var(--ops-text); }
.oc-rowpop__acts .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-rowpop .oc-atts { margin: 0; }
/* Телефон и планшет — листом снизу во всю ширину, над листом «Курьеры»; всё нажимаемое — в палец. */
.oc-rowpop.is-sheet {
  inset: auto 0 0; width: auto; max-height: 72dvh; padding-bottom: var(--space-4); border-width: 1px 0 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.oc-rowpop.is-sheet .oc-rowpop__x { width: var(--tap); height: var(--tap); }
.oc-rowpop.is-sheet .oc-rowpop__head { min-height: var(--tap); padding-right: var(--tap); }
.oc-rowpop.is-sheet .btn, .oc-rowpop.is-sheet .oc-crew__stops a { min-height: var(--tap); height: auto; }

/* ── «Курьеры → На смене»: тот же вид — строка 32 и окошко ───────────────────────────────────────────────────────── */
#couriers .oc-shiftrows { display: grid; margin: 0; padding: 0; list-style: none; }
#couriers .oc-shiftrows > li + li { border-top: 1px solid var(--border2); }
.oc-shiftrow {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.3fr) auto; align-items: center; gap: var(--space-3);
  width: 100%; min-height: var(--ops-row); padding: 0 var(--space-2); border: 0; background: none; color: var(--ink); font: inherit;
  font-size: var(--ops-text); text-align: left; cursor: pointer;
}
.oc-shiftrow:hover, li.is-open > .oc-shiftrow { background: var(--tint); }
li.is-open > .oc-shiftrow { box-shadow: inset var(--space-1) 0 0 var(--accent); }
.oc-shiftrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.oc-shiftrow .courier-card__dot { width: var(--ops-small); height: var(--ops-small); font-size: var(--ops-text-sm); }
.oc-shiftrow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-shiftrow__name b { font-weight: var(--weight-semibold); }
.oc-shiftrow__name small, .oc-shiftrow__points { color: var(--muted); font-size: var(--ops-text-sm); }
.oc-shiftrow__state { font-size: var(--ops-text-sm); }
.oc-shiftrow__state .is-free { color: var(--ok); font-weight: var(--weight-semibold); }
.oc-shiftrow__state .oc-warn, .oc-shiftrow__state .is-bad { color: var(--warn); font-weight: var(--weight-semibold); }
.oc-shiftrow__state .is-bad { color: var(--err); }
.oc-shiftrow > svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
/* Узко (телефон, планшет): точки уходят в окошко; строка — в палец. */
@media (max-width: 1099px) {
  .oc-shiftrow { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; min-height: var(--tap); }
  .oc-shiftrow__points { display: none; }
}