/* Плотность и один экран (Р533, Р539; этап 1, `docs/design/operator-workspace-v2.md` Т1, Т6): телефон и планшет (до
   1100) — тот же один экран, всё нажимаемое не меньше 44 (`--tap`, токены — density.css); вкладки «Курьеры» и
   «Загрузка» — в той же плотности, что «Заказы» (шапка 44, поля 12, кнопки 32 на компьютере). Их страница листается, как
   прежде: один экран — для «Заказов». Размеры — токенами, цвета — ролями темы (сторож tests/design/test_tokens_guard.py). */

/* ── «Заказы» на телефоне и планшете ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  /* Панели во всю ширину; низ рабочей области — над листом «Курьеры» (его высота — `--oc-as-h`, crew.js). */
  body[data-page="staff"] > #main.staff { padding: 0 0 var(--oc-as-h, calc(var(--tap) + var(--space-2))); }
  #main .staff-work { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 0; }
  #main .staff-work > .staff-main, #main .staff-work > .staff-side { grid-column: 1; grid-row: 1; border-width: 1px 0 0; border-radius: 0; }
  /* Заголовок карты — в палец: в нём «Курьеры» (места курьеров на карте, этап 3), «шире» и «скрыть» здесь не нужны. */
  /* Шапка: знак, заведение, «Что вижу», звук, «Выйти» — кнопками 44; на телефоне разделы — второй строкой. */
  .pf-sign, .staff-client, .staff-client--one, .staff-bar__end { margin-block: var(--space-1); }
  .staff-bar__inner { row-gap: 0; }
  .staff-bar .btn.staff-ctl, .staff-bar .staff-switch, .staff-bar .btn.staff-sound, .staff-client--one { min-height: var(--tap); }
  .staff-bar .btn.staff-sound, .staff-bar .staff-switch { min-width: var(--tap); }
  .staff-bar .btn.staff-rights, .staff-bar .btn.staff-sound { width: var(--tap); }
  /* Полоса над лентой: «Лента · Карта» и вид — первой строкой; отборы — полосой вбок; поиск и «Фильтры». */
  #staff-top {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "views modes" "strip strip" "search filters";
    gap: var(--ops-tight); padding: var(--ops-tight) var(--space-2);
  }
  #staff-top .oc-topbar { display: contents; }
  #staff-top .staff-views { grid-area: views; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 2px; gap: 2px; }
  #staff-top .staff-views .segments__item { min-height: var(--tap); padding: 0 var(--space-2); font-size: var(--text-sm); }
  #staff-top .oc-viewmode { grid-area: modes; display: flex; }
  #staff-top .oc-viewmode .segments__item { min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-2); }
  #staff-top .staff-strip {
    grid-area: strip; display: flex; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2); overflow-x: auto;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  #staff-top .tally {
    grid-template-columns: auto auto auto; grid-template-areas: "i n c"; height: var(--tap); min-height: var(--tap);
    padding: 0 var(--ops-pad); flex: none;
  }
  #staff-top .tally svg { width: var(--icon-sm); height: var(--icon-sm); }
  #staff-top .tally__label { color: var(--ink); font-size: var(--ops-text-sm); }
  #staff-top .oc-tally-reset { flex: none; min-height: var(--tap); }
  #staff-top .oc-feedsearch { grid-area: search; height: var(--tap); min-width: 0; }
  #staff-top .oc-feedsearch input { font-size: var(--text-field); }
  #staff-top .oc-filters-btn { grid-area: filters; min-height: var(--tap); }
  #staff-top .oc-period, #staff-top .oc-chipsbar { grid-column: 1 / -1; }
  #staff-top .oc-period .oc-hist__bar { flex-wrap: wrap; }
  #staff-top .oc-hist__bar .icon-btn { width: var(--tap); height: var(--tap); }
  #staff-top .oc-hist__bar .input, #staff-top .oc-hist__hours .oc-time .input { height: var(--tap); min-height: var(--tap); font-size: var(--text-field); }
  #staff-top .oc-fchip { min-height: var(--tap); }
  #staff-top .oc-fchip button { min-width: var(--tap); min-height: var(--tap); }
  /* Заголовок ленты — 44: «Порядок» выбором в палец. */
  #feed-sort .select { font-size: var(--text-sm); }
  /* «Требуют внимания» и «Завершены» — нажимаются: не меньше 44. */
  #feed .oc-attention-summary > summary, #feed .feed-closed > summary.feed-section__head { min-height: var(--tap); }
  /* Значки с окошком (отметки, «впритык», «остывает», «готов условно») — тоже в палец. */
  #main .oc-hint__btn, #feed .oc-marks .oc-hint__btn { min-width: var(--tap); min-height: var(--tap); }
  #feed .icon-btn.oc-issue__act { width: var(--tap); height: var(--tap); }
  #main .check.order-pick { min-width: var(--tap); min-height: var(--tap); justify-content: center; }
  #main .check.order-pick input { left: 50%; transform: translate(-50%, -50%); }
  /* Таблица на планшете: заголовок столбца и номер — в палец. */
  #feed .oc-lt__sort, #feed .oc-lt__no a { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); }
  /* Лист «Курьеры» снизу: заголовка панели нет — его место у кнопки листа; тело листается в пределах листа. */
  .oc-crew.oc-pane {
    position: fixed; inset: auto 0 0; z-index: var(--z-dropdown); grid-template-rows: auto minmax(0, 1fr); max-height: 64dvh; padding: 2px var(--space-3); border-width: 1px 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3);
  }
  body.oc-crew-open .oc-crew.oc-pane, body.oc-assigning .oc-crew.oc-pane { padding: var(--space-2) var(--space-3) var(--space-3); }
  .oc-crew > .oc-pane__head { display: none; }
  .oc-crew > .oc-crew__handle { grid-row: 1; }
  .oc-crew > .oc-crew__body { grid-row: 2; }
  #oc-crew .oc-crew__wait > li, #oc-crew .oc-crew__who { min-height: var(--tap); }
}
/* Узкая таблица («Список» на телефоне) — строки карточкой: высота — по содержимому, а не по ячейке 36. */
@container feed (max-width: 679px) {
  #feed .oc-lt td { height: auto; padding-block: 0; border-bottom: 0; }
  #feed .oc-lt tr { border-top: 0; border-bottom: 1px solid var(--border2); }
  #feed .oc-lt tr { row-gap: 2px; padding-block: var(--space-1); }
  /* Состояние — строкой подробностей, а не своей: карточка строки на строку ниже. */
  #feed .oc-lt__state { order: 8; }
}
/* Телефон: строка ленты — две линии: номер, время, сумма, оплата и действия (44) первой, способ, состояние и курьер —
   второй. «Открыть» — номером: он и есть кнопка заказа в палец. */
@container feed (max-width: 459px) {
  #feed .order-row { row-gap: 0; padding: 2px var(--space-1) var(--space-1) 0; }
  #feed .order-row > .order-row__sum { margin-left: 0; }
  #feed .order-row > .order-row__act { order: 1; margin-left: auto; }
  #feed .order-row > .order-row__method { order: 3; margin-left: 0; }
  #feed .order-row .oc-open { display: none; }
}

/* ── «Курьеры» — та же плотность ─────────────────────────────────────────────────────────────────────────────────── */
#couriers.staff, #load.staff {
  padding: var(--ops-gap) max(var(--ops-edge), env(safe-area-inset-right, var(--ops-edge))) var(--space-5) max(var(--ops-edge), env(safe-area-inset-left, var(--ops-edge)));
  font-size: var(--ops-text);
}
#couriers { gap: var(--ops-gap); }
#couriers .oc-couriers__top { gap: var(--space-2); }
#couriers .segments, #load .segments { min-height: 0; padding: 2px; gap: 2px; border-radius: var(--ops-ctl-radius); }
#couriers .oc-couriers__views .segments__item, #couriers .oc-shift-modes .segments__item {
  min-height: calc(var(--ops-ctl) - var(--space-1)); padding-inline: var(--ops-pad); border-radius: var(--space-2); font-size: var(--ops-text);
}
#couriers .oc-couriers__views .segments__item svg { width: var(--icon-sm); height: var(--icon-sm); }
#couriers .oc-shift-sum .segments__item { min-height: calc(var(--ops-ctl) - var(--space-1)); padding: 2px var(--space-2); font-size: var(--ops-text); }
#couriers .oc-shift-sum .segments__item small { font-size: var(--ops-text-xs); }
#couriers .oc-couriers__main { gap: var(--ops-gap); }
#couriers .feed-section__head { margin-bottom: var(--space-1); }
#couriers .feed-section__head h2 { font-size: var(--ops-text-no); }
#couriers .courier-card { gap: var(--space-1); padding: var(--space-2) var(--ops-pad); border-radius: var(--ops-radius); }
#couriers .courier-card__dot { width: var(--ops-small); height: var(--ops-small); font-size: var(--ops-text-sm); }
#couriers .oc-onshift .courier-card__name { font-size: var(--ops-text-no); }
#couriers .courier-card__meta, #couriers .courier-card__state { font-size: var(--ops-text-sm); }
#couriers .oc-onshift :is(.btn, .icon-btn),
#couriers .oc-off :is(.btn, .icon-btn),
#couriers .oc-courier-link .btn,
#couriers .oc-letin {
  min-height: var(--ops-ctl); min-width: var(--ops-ctl); padding-inline: var(--ops-pad); border-radius: var(--ops-ctl-radius);
  font-size: var(--ops-text);
}
#couriers .oc-onshift .icon-btn, #couriers .oc-off .icon-btn { padding-inline: 0; }
#couriers :is(.btn, .icon-btn) svg { width: var(--icon-sm); height: var(--icon-sm); }
#couriers .oc-workspace-details > summary { min-height: var(--ops-ctl); padding-block: var(--space-1); font-size: var(--ops-text-sm); }
#couriers .oc-off li { padding: var(--space-1) var(--ops-pad); }
#couriers .oc-directory-tools .search { height: var(--ops-ctl); }
#couriers .oc-directory-tools .search input { min-height: 0; font-size: var(--ops-text); }
#couriers .issue.oc-issue { font-size: var(--ops-text-sm); }
#couriers .oc-off-group__head h3 { font-size: var(--ops-text); }
#couriers .feed-closed__hours { font-size: var(--ops-text-sm); }
#couriers .feed-closed__hours .select { height: var(--ops-ctl); min-height: var(--ops-ctl); padding-block: 0; font-size: var(--ops-text); }
#couriers .oc-atts { padding: var(--space-1) var(--space-2); font-size: var(--ops-text-sm); }

/* ── «Загрузка» — та же плотность ────────────────────────────────────────────────────────────────────────────────── */
#load .oc-load { gap: var(--ops-gap); }
#load .oc-load__heading h1 { font-size: var(--text-lg); }
#load .oc-load__work { gap: var(--ops-gap); }
#load .oc-load__mode { gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--ops-radius); }
#load .oc-load__mode-word { font-size: var(--text-lg); }
#load .oc-load__mode-who, #load .oc-load__origin, #load .oc-load__why { font-size: var(--ops-text-sm); }
#load .oc-load__box { gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--ops-radius); }
#load .oc-load__box > .feed-section__head { min-height: var(--ops-ctl); }
#load .oc-load__box > .feed-section__head h2 { font-size: var(--ops-text); }
#load .oc-load__head-tip { top: var(--space-1); right: var(--space-2); }
#load .oc-load__line { padding: var(--space-1) 0; }
#load .oc-load__details { border-radius: var(--ops-radius); }
#load .oc-load__details > summary { min-height: var(--ops-ctl); padding: var(--space-1) var(--space-3); }
#load .oc-load__details > summary h2 { font-size: var(--ops-text); }
#load .oc-load__details-body { padding: var(--space-2) var(--space-3); }
#load :is(.btn, .icon-btn, .segments__item, .chip[data-ask-term], .select, .input, .oc-hint__btn) { min-height: var(--ops-ctl); }
#load .btn { padding-inline: var(--ops-pad); border-radius: var(--ops-ctl-radius); font-size: var(--ops-text); }
#load .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
#load :is(.icon-btn, .oc-hint__btn) { min-width: var(--ops-ctl); width: var(--ops-ctl); height: var(--ops-ctl); }
#load .check-line, #load .menu__item { min-height: var(--ops-ctl); }
#load .oc-load__fact, #load .oc-load__window { min-height: var(--ops-small); font-size: var(--ops-text-sm); }