/* «Заказы» одним экраном (Р352-5, Р354-1, Р356; ЗВ10, ЗВ11, ЗВ14, ЗВ15; план superpowers/plans/2026-10-24-orders-one-screen.md):
   верх — одна полоса (отборы значками со счётом, «× сбросить», поиск, «Фильтры», вид «Группы · Список · История»; в
   «Истории» — полоса промежутка первой); строки ленты — одной линией на ПК, группы — тонкой строкой; колонка курьеров
   всегда между лентой и картой (1100–1280 — поверх левого края карты, «Список» и «История» — справа от таблицы, телефон
   и планшет — лист снизу). Ничего не наезжает при 1024–1920 и 390 (проверка прямоугольниками —
   tests/web_operator/test_nothing_overlaps.py). Размеры — токены, цвета — роли темы. */

/* ── верхняя полоса ─────────────────────────────────────────────────────────────────────────────────────────────── */
#staff-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.oc-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.oc-period { display: flex; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.oc-period .oc-hist__bar { margin: 0; gap: var(--space-1) var(--space-3); }
#staff-top .staff-strip { display: flex; flex: 0 1 auto; min-width: 0; }
#staff-top .staff-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; overflow: visible; }
#staff-top .tally {
  position: relative; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-1); min-width: calc(var(--control-md) + var(--space-2));
  min-height: var(--control-md); padding: 0 var(--space-2); border-radius: var(--radius-pill);
}
#staff-top .tally svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
#staff-top .tally__n { min-width: 1ch; font-family: var(--font-text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
/* Пустой отбор — бледнее: смотреть там нечего, но он на своём месте. */
#staff-top .tally.is-zero:not([aria-pressed="true"]) .tally__n { color: var(--muted); }
#staff-top .tally.is-zero:not([aria-pressed="true"]) svg { opacity: 0.5; }
#staff-top .tally.is-hot svg, #staff-top .tally.is-hot .tally__n { color: var(--err); }
#staff-top .tally[aria-pressed="true"] svg { color: var(--accent); }
.oc-tally-reset { gap: var(--space-1); min-height: var(--control-md); white-space: nowrap; }
.oc-tally-reset svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
#staff-top .oc-feedsearch { flex: 1 1 calc(var(--space-8) * 2.5); min-width: calc(var(--space-8) * 2.5); }
#staff-top .oc-viewmode { flex: none; margin-left: auto; }
/* Слово, спрятанное в значок, — внутри своей кнопки: полоса, что листается вбок, его не выпускает. */
.oc-viewmode .segments__item { position: relative; gap: var(--space-1); }
@media (max-width: 767px) {
  /* Телефон: отборы — полосой вбок во всю ширину, поиск — строкой, «Фильтры» и вид — одной строкой; вид — значками. */
  #staff-top .staff-strip {
    flex: 1 1 100%; margin-inline: calc(var(--gutter) * -1); padding: var(--space-1) var(--gutter);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  #staff-top .staff-summary { flex-wrap: nowrap; }
  #staff-top .tally, .oc-tally-reset { flex: none; min-height: var(--tap); }
  #staff-top .oc-feedsearch { flex: 1 1 100%; height: var(--tap); }
  #staff-top .oc-filters-btn { flex: 1 1 auto; justify-content: center; min-height: var(--tap); }
  #staff-top .oc-viewmode { display: flex; flex: none; margin-left: 0; }
  .oc-viewmode .segments__item { min-width: var(--tap); justify-content: center; padding: 0 var(--space-2); }
  .oc-viewmode__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .oc-period { flex: 1 1 100%; }
}

/* Имя значка (`js/tip.js`) — тёмной плашкой у значка. */
.oc-tip {
  position: fixed; z-index: var(--z-toast); max-width: min(calc(var(--space-8) * 4), calc(100vw - var(--space-4))); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); background: var(--ink); box-shadow: var(--shadow-2); color: var(--panel);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-title); pointer-events: none;
}

/* ── область заказов: группы тонкой строкой ─────────────────────────────────────────────────────────────────────── */
#feed { gap: var(--space-2); }
#feed .feed-section { gap: 2px; }
#feed .feed-section__head { min-height: var(--space-5); gap: var(--space-2); }
#feed .feed-section__head h2 { margin: 0; font-size: var(--text-xs); }
#feed .feed-count { min-width: calc(var(--space-4) + 2px); height: calc(var(--space-4) + 2px); padding: 0 var(--space-1); }
#feed .feed-closed > summary { display: flex; align-items: center; min-height: var(--space-6); }
#feed .feed-closed > summary .feed-closed__chevron { flex: none; }
@media (max-width: 767px) { #feed .feed-closed > summary { min-height: var(--tap); } }
/* «История» — итог промежутка над таблицей. */
#feed .oc-hist__sum { margin: 0 0 var(--space-1); }

/* ── строка ленты: на ПК одной линией (лента от 460), уже — двумя (телефон, лента рядом с колонкой и карточкой) ── */
/* Узко — две линии: номер, «когда», способ, сумма справа, оплата; ниже — состояние, «ждёт курьера», курьер и отметки,
   действия справа (линии не делят колонок: широкие действия второй линии не теснят сумму первой). Галочки «для курьера»
   у строки нет (Р529, этап 4: отмечают в очереди «Курьеров») — номер стоит первым. */
#feed .order-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; padding: 3px var(--space-2);
}
#feed .order-row::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
#feed .order-row > * { order: 1; }
#feed .order-row > .state, #feed .order-row > .order-row__info, #feed .order-row > .order-row__act { order: 3; }
#feed .order-row > .order-row__sum { margin-left: auto; }
#feed .order-row > .order-row__info { flex: 1 1 0; }
#feed .order-row__open {
  grid-area: no; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm);
  font-family: var(--font-text); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap;
}
#feed .order-row__open .oc-hue { grid-row: auto; }
#feed .order-row__chan { display: inline-flex; margin: 0; color: var(--gold); }
#feed .order-row__chan svg { width: var(--icon-sm); height: var(--icon-sm); }
#feed .order-row__time { grid-area: time; font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
#feed .order-row__method { grid-area: method; }
#feed .order-row__sum { grid-area: sum; justify-self: end; font-variant-numeric: tabular-nums; }
#feed .order-row__pay { grid-area: pay; }
#feed .order-row__pay svg.is-unknown { color: var(--muted); }
#feed .order-row .state {
  position: relative; grid-area: state; justify-self: start; gap: var(--space-1); min-width: 0; max-width: 100%; min-height: calc(var(--space-5) - 2px);
  padding: 0 6px; overflow: hidden; border-radius: var(--radius-pill); white-space: nowrap;
}
#feed .order-row .state svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.state__word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#feed .order-row__info { grid-area: info; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1); min-width: 0; overflow: hidden; }
#feed .order-row__info:empty { display: flex; }
/* Курьер — имя целиком, остановка и время — сколько влезет (многоточием). */
/* Курьер: тесно — сначала сжимаются остановка и время, потом имя — многоточием (целиком — подсказкой метки). */
#feed .order-row .oc-run { position: relative; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
#feed .order-row .oc-run > svg { flex: none; }
#feed .order-row .oc-run__who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#feed .order-row .oc-run__more { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#feed .oc-marks .oc-hint__btn { width: var(--space-5); height: var(--space-5); }
#feed .oc-marks .oc-hint__btn svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Место точки — остаток строки; точка в нём — не уже 60: не влезает — уходит второй строкой места, а её не видно. */
#feed .order-row__where { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
  min-width: 0; height: var(--space-5); overflow: hidden; }
#feed .order-row__where::before { content: ""; flex: 0 0 0; height: 100%; }
#feed .order-where { flex: 1 0 calc(var(--space-7) + var(--space-3)); min-width: 0; overflow: hidden; }
#feed .order-where > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feed .order-row__act { grid-area: act; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; min-width: 0; }
#feed .order-row__act .btn {
  position: relative; min-width: calc(var(--control-sm) - var(--space-1)); min-height: calc(var(--control-sm) - var(--space-1));
  height: calc(var(--control-sm) - var(--space-1)); padding: 0 6px; gap: var(--space-1); white-space: nowrap;
}
#feed .order-row__act .btn svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
/* Подпись действия — словом, только когда есть место (широкая лента); иначе значок с подсказкой. */
#feed .oc-act__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container feed (min-width: 460px) {
  #feed .order-row::before { content: none; }
  #feed .order-row {
    display: grid; grid-template-columns: minmax(calc(var(--space-8) + var(--space-5)), max-content) calc(var(--space-7) + var(--space-1))
      var(--icon-md) minmax(calc(var(--space-7) + var(--space-2)), max-content) var(--icon-md) var(--oc-state, calc(var(--space-6) - 2px))
      minmax(0, 1fr) auto;
    grid-template-areas: "no time method sum pay state info act";
    row-gap: 0; padding-block: 2px;
  }
  /* Тесно — слово состояния и подробности курьера уходят в значок (полностью — подсказкой). */
  #feed .order-row .state { justify-self: stretch; justify-content: center; padding: 0; }
  #feed .order-row .state__word, #feed .order-row .oc-run__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Ещё теснее (лента 460–599) — уходит второстепенное: название точки (оно — в карточке и на карте) и значок способа (в
   строке ПК по договору его нет: доставку видно по метке курьера и на карте, способ — в карточке); метке курьера — их
   место. */
@container feed (min-width: 460px) and (max-width: 599px) {
  #feed .order-row .order-row__where, #feed .order-row .order-row__method { display: none; }
  #feed .order-row .oc-run { padding-inline: var(--space-1); }
  #feed .order-row {
    grid-template-columns: minmax(calc(var(--space-8) + var(--space-5)), max-content) calc(var(--space-7) + var(--space-1))
      minmax(calc(var(--space-7) + var(--space-2)), max-content) var(--icon-md) var(--oc-state, calc(var(--space-6) - 2px)) minmax(0, 1fr) auto;
    grid-template-areas: "no time sum pay state info act";
  }
}
@container feed (min-width: 760px) {
  #feed .order-row { --oc-state: calc(var(--space-8) * 1.75); }
  #feed .order-row .state { justify-self: start; justify-content: flex-start; padding: 0 var(--space-2); }
  #feed .order-row .state__word, #feed .order-row .oc-run__more { position: static; width: auto; height: auto; clip: auto; }
  #feed .oc-accept .oc-act__word { position: static; width: auto; height: auto; clip: auto; }
}
@media (max-width: 767px) {
  #feed .order-row__act .btn { min-width: var(--tap); min-height: var(--tap); height: var(--tap); }
}

/* «Список» — состояние тем же значком со словом. */
.oc-lt .state { gap: var(--space-1); }
.oc-lt .state svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }

/* ── колонка курьеров ───────────────────────────────────────────────────────────────────────────────────────────── */
.oc-crew {
  display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); background: var(--panel);
}
body.oc-assigning .oc-crew { border-color: var(--accent); box-shadow: var(--shadow-2); }
/* Сборка рейса — внутри колонки: рамка, отступы и прокрутка — колонки. */
#oc-crew .oc-as { position: static; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.oc-crew__handle { display: none; }
.oc-board { display: grid; gap: var(--space-4); min-width: 0; }
.oc-crew__part { display: grid; gap: var(--space-2); min-width: 0; }
.oc-crew__h { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.oc-crew__wait, .oc-crew__list, .oc-crew__stops { display: grid; margin: 0; padding: 0; list-style: none; }
.oc-crew__wait { overflow: hidden; border: 1px solid var(--border2); border-radius: var(--radius-md); }
.oc-crew__wait > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 2px var(--space-2); }
.oc-crew__wait > li + li { border-top: 1px solid var(--border2); }
.oc-crew__wait > li.is-picked { background: var(--tint); }
.oc-crew__order { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; min-height: var(--control-sm); padding-block: var(--space-1);
  color: var(--ink); font-size: var(--text-sm); text-decoration: none; }
.oc-crew__order:hover b { color: var(--accent); }
.oc-crew__order b { flex: none; font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-crew__order span { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.oc-crew__list { gap: var(--space-1); }
/* Курьер — одной строкой (Р532): кружок, имя, слова двери, стрелка; подробности — окошком рядом (crew-pop.css). */
.oc-crew__who {
  display: grid; grid-template-columns: auto minmax(0, 1fr) max-content auto; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-1) var(--space-2); border: 1px solid var(--border2); border-radius: var(--radius-md); background: var(--panel);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.oc-crew__who:hover { border-color: var(--accent); }
.oc-crew__who:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.oc-crew__who .courier-card__dot { width: var(--control-sm); height: var(--control-sm); font-size: var(--text-sm); }
.oc-crew__name { min-width: 0; overflow: hidden; font-size: var(--text-sm); font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.oc-crew__free { font-size: var(--text-lg); font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-crew__free.is-free { color: var(--ok); }
.oc-crew__where { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.oc-crew__run { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--text-xs); }
.oc-crew__run svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-crew__run span { min-width: 0; overflow-wrap: anywhere; }
.oc-crew__chev { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.oc-crew__points { display: grid; margin: 0; overflow-wrap: anywhere; }
.oc-crew__stops a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-height: var(--control-sm); padding-block: var(--space-1);
  color: var(--ink); text-decoration: none; }
.oc-crew__stops a:hover b { color: var(--accent); }
.oc-crew__stops a span { color: var(--muted); }
.oc-crew__none, .oc-crew__empty { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--muted); font-size: var(--text-sm); }
.oc-crew__none > span:last-child { min-width: 0; }
.oc-crew__empty { padding-block: var(--space-1); }

/* Место колонки на ПК — панелью сетки рабочей области (Р533, Р539, этап 1 — density.css): шире 1280 — своя колонка
   между лентой и картой, 1100–1280 — над картой справа от ленты (прежде лежала поверх левого края карты); «Список» и
   «История» — так же, между таблицей и картой, с окна 1320 (таблица не уже 760; уже — над картой). Листается тело
   панели, не страница. */
/* Телефон и планшет — лист снизу: свёрнут — одной кнопкой «Курьеры · ждут 3»; раскрыт — список (отмечены доставки —
   с полосой «Отмечено» внизу); шаги сборки рейса — без кнопки листа: у сборки свой «×». Высота листа — отступ снизу
   ленты. */
@media (max-width: 1099px) {
  .oc-crew {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 64vh; overflow: hidden auto; gap: var(--space-2);
    padding: var(--space-3) var(--gutter) var(--space-4); border-width: 1px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-3);
  }
  body:not(.oc-crew-open):not(.oc-assigning) .oc-crew { padding-block: 2px; }
  .oc-crew__handle {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--tap); padding: 0; border: 0;
    background: none; color: var(--ink); font: inherit; font-weight: var(--weight-semibold); text-align: left; cursor: pointer;
  }
  .oc-crew__handle > svg:first-child { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
  .oc-crew__handle .oc-crew__chev { margin-left: auto; transform: rotate(180deg); }
  body.oc-crew-open .oc-crew__handle .oc-crew__chev { transform: none; }
  body:not(.oc-crew-open) #oc-board { display: none; }
  body.oc-assigning .oc-crew__handle { display: none; }
  #main.staff { padding-bottom: calc(var(--oc-as-h, calc(var(--tap) + var(--space-2))) + var(--space-3)); }
}

/* Карта уже 470 (колонка курьеров рядом: ПК 1281–1500) — у точек на карте только названия, как при колонке поверх карты
   на 1100–1280: выбор точки — одним рядом, а не в два (адрес — в подсказке кнопки и на флажке точки). */
@media (min-width: 1281px) {
  @container smap (max-width: 470px) {
    .smap__sw-addr { display: none; }
  }
}

/* «Список»: с этапа 5 (Р534 — «Канал пропадает… иконки не до конца понятные») ни подписи под значками, ни столбцы не
   уходят, когда тесно: таблица не уже 740 и теснее листается вбок внутри своей панели (list.css); узко (до 680) — строка
   карточкой (oc.css). */
/* «×» сборки рейса — в пределах колонки (у прежней колонки он залезал в её поля). */
#oc-crew .oc-as__x { margin: calc(var(--space-1) * -1) 0 0 0; }

/* ── отказ кассы (Р524): наши слова, ниже — ответ iiko мелко (его назвать поддержке) и что делать обычным текстом ── */
.order-refusal { display: grid; gap: var(--space-1); min-width: 0; }
.order-refusal > p { margin: 0; }
.order-refusal__said { display: block; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-text); overflow-wrap: anywhere; }
.order-refusal__hint { display: block; }