/* Панели и виды экрана «Заказы» (Р530, Р539; этап 3 `docs/design/operator-workspace-v2.md` Т1–Т2; макет 026): границы
   между панелями тянутся мышью, пальцем и стрелками; «шире» / «уже» и «скрыть» — в заголовке каждой панели; скрытая
   панель — узкой полоской со счётчиком на своём месте; «Экран: …» над панелями — готовые виды, «Мой вид», «Как было».
   Шаблон сетки рабочей области ставит js/orders/panes.js из js/orders/layout.js (доли ×100, промежуток 8 — сама граница),
   здесь — только вид деталей. Телефон и планшет (до 1100) — как прежде: границ, полосок и «Экран» там нет.
   Размеры — только токенами, цвета — только ролями темы: сторож tests/design/test_tokens_guard.py читает и этот файл. */

:root {
  --ops-rail: 30px;       /* полоска скрытой панели (как дорожка сетки в layout.js) */
  --ops-grip: 36px;       /* ручка на границе */
  --ops-grip-on: 64px;    /* ручка под мышью, в фокусе и пока тянут */
  --ops-scheme-w: 46px;   /* схема вида в окошке «Экран» */
  --ops-menu-w: 380px;    /* окошко «Экран» */
}

/* ── Рабочая область: промежутки — дорожками сетки (это и есть границы) ──────────────────────────────────────────── */
@media (min-width: 1100px) {
  #main .staff-work[data-arr] { gap: 0; }
  #main .staff-work[data-arr] > .oc-pane.is-folded { display: none; }
}

/* ── Граница ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.oc-split { position: relative; z-index: var(--z-raised); min-width: 0; min-height: 0; cursor: col-resize; touch-action: none; outline: none; }
.oc-split[hidden] { display: none; }
.oc-split::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: var(--space-1); height: var(--ops-grip); border-radius: var(--space-1);
  background: var(--border); transform: translate(-50%, -50%); transition: background var(--motion-fast) var(--ease), height var(--motion-fast) var(--ease);
}
/* Цель шире самой полосы: 16 — и мышью, и пальцем (Т1: ручка границы — 16). */
.oc-split::after { content: ""; position: absolute; inset: 0 calc(var(--space-1) * -1); }
.oc-split:hover::before, .oc-split:focus-visible::before, .oc-split.is-drag::before { height: var(--ops-grip-on); background: var(--accent); }
.oc-split:focus-visible { border-radius: var(--space-1); box-shadow: inset 0 0 0 2px var(--focus); }
.oc-split--across { cursor: row-resize; }
.oc-split--across::before { width: var(--ops-grip); height: var(--space-1); }
.oc-split--across::after { inset: calc(var(--space-1) * -1) 0; }
.oc-split--across:hover::before, .oc-split--across:focus-visible::before, .oc-split--across.is-drag::before { width: var(--ops-grip-on); height: var(--space-1); }
body.is-dragging, body.is-dragging * { cursor: col-resize; user-select: none; }
body.is-dragging-across, body.is-dragging-across * { cursor: row-resize; user-select: none; }
/* Подсказка размеров у указателя, пока тянут: «Лента 520 · Курьеры 340». */
.oc-sizetip {
  position: fixed; z-index: var(--z-toast); padding: 2px var(--space-2); border-radius: var(--space-2); background: var(--dark);
  color: var(--footink); font-size: var(--ops-text-sm); font-weight: var(--weight-semibold); white-space: nowrap; pointer-events: none;
}

/* ── Полоска скрытой панели: вертикальный текст во всю высоту, «Курьеры · ждут 6» (ждущие — красным) ────────────── */
.oc-rail {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; min-height: 0; padding: var(--space-2) 0;
  overflow: hidden; border: 1px dashed var(--border); border-radius: var(--ops-radius); background: var(--card); color: var(--ink);
  font: inherit; font-size: var(--ops-text-sm); font-weight: var(--weight-semibold); white-space: nowrap; writing-mode: vertical-rl; cursor: pointer;
}
.oc-rail[hidden] { display: none; }
.oc-rail:hover { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.oc-rail:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.oc-rail svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold); }
.oc-rail__n { color: var(--muted); }
.oc-rail__n.is-hot { color: var(--err); }
.oc-rail__n[hidden] { display: none; }
.oc-rail__show { color: var(--muted); font-size: var(--ops-text-xs); font-weight: var(--weight-medium); }
/* «Сбоку» правая колонка: скрытые «Курьеры» или карта — полоской лёжа. */
.oc-rail.oc-rail--flat { justify-content: flex-start; padding: 0 var(--ops-pad); writing-mode: horizontal-tb; }
.oc-rail--flat .oc-rail__show { margin-left: auto; }

/* ── «шире» / «уже» и «скрыть» в заголовке панели ────────────────────────────────────────────────────────────────── */
.oc-pane__ctls { display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.oc-pane__ctls[hidden] { display: none; }
.oc-pane__ctl {
  display: inline-flex; align-items: center; gap: var(--space-1); min-width: var(--ops-small); height: var(--ops-small); padding: 0 var(--ops-tight);
  border: 0; border-radius: var(--ops-ctl-radius); background: transparent; color: var(--muted); font: inherit; font-size: var(--ops-text-sm);
  font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; justify-content: center;
}
.oc-pane__ctl[hidden] { display: none; }
.oc-pane__ctl:hover, .oc-pane__ctl[aria-pressed="true"] { background: var(--tint); color: var(--ink); }
.oc-pane__ctl:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.oc-pane__ctl svg { flex: none; width: var(--ops-text); height: var(--ops-text); }
/* Узкая панель — только значки, имя — подсказкой (`tip.js`); для читалок слово остаётся в кнопке. */
@container pane (max-width: 339px) {
  .oc-pane__ctl-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── «Экран: …» над панелями ─────────────────────────────────────────────────────────────────────────────────────── */
.oc-screen-wrap { position: relative; flex: none; display: flex; }
#staff-top .oc-screen-btn {
  flex: none; gap: var(--space-1); min-height: var(--ops-ctl); padding: 0 var(--ops-pad); border-radius: var(--ops-ctl-radius); font-size: var(--ops-text);
}
#staff-top .oc-screen-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-screen-btn__label { color: var(--muted); font-weight: var(--weight-regular); }
.oc-screen-btn__name { font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-screen-btn[aria-expanded="true"] .oc-screen-btn__chev { transform: rotate(180deg); }
/* Полоса над панелями — одной строкой 40 и с «Экраном» (Т1): уже 1500 — у «Экран:» только название вида, у «Фильтры и
   вид» — «Фильтры» (целиком — для читалок); уже 1440 — поле поиска короче; уже 1366 — без стрелки у «Экрана», промежутки
   теснее. */
@media (min-width: 1100px) and (max-width: 1499px) {
  .oc-screen-btn__label { display: none; }
  #staff-top .oc-filters-btn__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  #staff-top .oc-feedsearch { flex-basis: calc(var(--space-8) + var(--space-6)); min-width: calc(var(--space-8) + var(--space-6)); }
}
@media (min-width: 1100px) and (max-width: 1365px) {
  #staff-top .oc-topbar { column-gap: var(--ops-tight); }
  #staff-top .oc-screen-btn__chev { display: none; }
  #staff-top .oc-viewmode .segments__item { padding: 0 var(--ops-tight); }
}
/* 1100–1279 полоса в две строки (Т1): «Фильтры» и «Экран» — сразу за отборами, поиск — последним и во всю оставшуюся
   ширину, а не обрезком в конце первой строки. */
@media (min-width: 1100px) and (max-width: 1279px) {
  #staff-top .oc-filters-btn { order: 1; }
  #staff-top .oc-screen-wrap { order: 2; }
  #staff-top .oc-feedsearch { order: 3; flex: 1 1 calc(var(--space-8) * 2 + var(--space-6)); min-width: calc(var(--space-8) * 2 + var(--space-6)); }
}

.oc-screen.menu {
  position: absolute; top: calc(100% + var(--space-1)); right: 0; width: min(var(--ops-menu-w), calc(100vw - var(--space-4)));
  max-width: none; max-height: calc(100dvh - var(--ops-bar) - var(--ops-tools) - var(--space-4)); padding: var(--ops-tight);
  font-size: var(--ops-text);
}
.oc-screen.menu.is-left { right: auto; left: 0; }
.oc-screen .menu__head { display: grid; gap: 2px; margin-bottom: var(--space-1); padding: var(--space-1) var(--space-2) var(--space-2); }
.oc-screen .menu__head b { font-size: var(--ops-text-no); }
.oc-screen .menu__sub { white-space: normal; font-size: var(--ops-text-xs); line-height: var(--leading-title); }
.oc-screen__views { display: grid; gap: 2px; }
.oc-screen__item.menu__item { gap: var(--space-2); min-height: var(--control-md); padding: var(--space-1) var(--space-2); border-radius: var(--ops-ctl-radius); font: inherit; }
.oc-screen__item.menu__item[aria-checked="true"] { background: var(--tint); }
.oc-screen__item[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.oc-screen__item[aria-disabled="true"]:hover { background: transparent; }
.oc-screen__item .menu__text { gap: 2px; }
.oc-screen__radio {
  display: inline-grid; flex: none; place-items: center; width: var(--icon-sm); height: var(--icon-sm); border: 2px solid var(--border);
  border-radius: var(--radius-pill); background: var(--panel);
}
.oc-screen__item[aria-checked="true"] .oc-screen__radio { border-color: var(--accent); }
.oc-screen__item[aria-checked="true"] .oc-screen__radio::after {
  content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--accent);
}
/* Схема вида: лента — синим, «Курьеры» — янтарным, карта — зелёным, скрытая — пунктиром. */
.oc-scheme {
  display: grid; flex: none; grid-auto-flow: column; gap: 2px; width: var(--ops-scheme-w); height: var(--ops-th); padding: 2px;
  border: 1px solid var(--border); border-radius: var(--space-1); background: var(--page);
}
.oc-scheme i { border-radius: 2px; }
.oc-scheme i[data-k="feed"] { background: var(--accent); opacity: 0.45; }
.oc-scheme i[data-k="crew"] { background: var(--going); opacity: 0.5; }
.oc-scheme i[data-k="map"] { background: var(--ok); opacity: 0.4; }
.oc-scheme i[data-k="rail"] { border: 1px dashed var(--border); }
.oc-screen__group { margin: 0; padding: var(--space-2) var(--space-2) var(--space-1); color: var(--muted); font-size: var(--ops-text-xs); font-weight: var(--weight-semibold); }
.oc-screen__panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ops-tight); padding: 0 var(--space-1) var(--space-1); }
.oc-screen__pane {
  display: flex; align-items: center; gap: var(--ops-tight); min-height: var(--ops-ctl); padding: 0 var(--space-2); border: 1px solid var(--border);
  border-radius: var(--ops-ctl-radius); background: var(--panel); color: var(--muted); font: inherit; font-size: var(--ops-text-sm); cursor: pointer;
}
.oc-screen__pane[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); color: var(--accent); font-weight: var(--weight-semibold); }
.oc-screen__pane svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.oc-screen__note { margin: var(--ops-tight) var(--space-1) 2px; padding: var(--space-2) var(--ops-pad); border-radius: var(--ops-ctl-radius); background: var(--tint); font-size: var(--ops-text-sm); }
.oc-screen__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-1) 2px; }
.oc-screen__saved { margin-right: auto; color: var(--muted); font-size: var(--ops-text-xs); }
.oc-screen__saved[data-kind="ok"]::before { content: "✓ "; color: var(--ok); font-weight: var(--weight-bold); }
.oc-screen__saved[data-kind="bad"] { color: var(--err); }
.oc-screen__back.btn { min-height: var(--ops-ctl); gap: var(--space-1); font-size: var(--ops-text); }
.oc-screen__back svg { width: var(--icon-sm); height: var(--icon-sm); }

/* «Вернуть мой» в строке снизу после «Как было» (7 с). */
.toast__act {
  flex: none; min-height: var(--control-sm); padding: 0 var(--ops-pad); border: 1px solid var(--footink); border-radius: var(--ops-ctl-radius);
  background: transparent; color: var(--footink); font: inherit; font-weight: var(--weight-semibold); cursor: pointer;
}

/* ── Места курьеров — в заголовке панели карты (этап 3): «Курьеры», счёт, «Показать всех» ─────────────────────────── */
.oc-pane__head > .oc-gps-tools { display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: var(--space-1); min-width: 0; overflow: hidden; }
.oc-pane__head > .oc-gps-tools .btn { flex: none; min-height: var(--ops-small); height: var(--ops-small); padding: 0 var(--space-2); border-radius: var(--space-2); font-size: var(--ops-text-sm); }
.oc-pane__head > .oc-gps-tools svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-pane__head > .oc-gps-tools .oc-gps-counts { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--ops-text-xs); text-overflow: ellipsis; white-space: nowrap; }
@container pane (max-width: 459px) { .oc-pane__head > .oc-gps-tools .oc-gps-counts { display: none; } }
/* Под заголовком — только то, что есть (слова о проверке, «Курьеры списком», карточка места); пусто — места нет. */
.staff-side.oc-pane > .oc-gps:not(:has(> :not([hidden]))) { display: none; }

/* ── Узкая лента на компьютере (Т1: «Диспетчер», «шире» у карты — лента 400–459) ───────────────────────────────────── */
/* Одной строкой, как в макете 026, а не двумя, как на телефоне: сначала уходит значок оплаты (с ним — способ и место
   точки, как и на 460–599), слово состояния — значком (полностью — подсказкой и для читалок). Телефон — как прежде. */
@media (min-width: 1100px) {
  @container feed (max-width: 459px) {
    #feed .order-row::before { content: none; }
    #feed .order-row {
      display: grid; grid-template-areas: "no time sum state info act"; row-gap: 0; padding-block: 0;
      grid-template-columns: minmax(calc(var(--space-8) + var(--space-4)), max-content) max-content
        minmax(calc(var(--space-7) + var(--space-1)), max-content) calc(var(--space-6) - 2px) minmax(0, 1fr) auto;
    }
    #feed .order-row > .order-row__sum { margin-left: 0; }
    #feed .order-row .order-row__where, #feed .order-row .order-row__method, #feed .order-row .order-row__pay { display: none; }
    #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-path: inset(50%); white-space: nowrap;
    }
  }
}

/* ── Телефон и планшет: прежняя раскладка, без границ, полосок и «Экран» ───────────────────────────────────────────── */
@media (max-width: 1099px) {
  .oc-screen-wrap, .oc-pane__ctls, .oc-rail, .oc-split { display: none; }
  .oc-pane__head > .oc-gps-tools .btn { min-height: var(--tap); height: var(--tap); }
}
/* Сенсорный экран любой ширины: кнопки заголовка и окошка — в палец. */
@media (pointer: coarse) {
  .oc-pane__ctl, .oc-screen__pane, .oc-screen__back.btn { min-height: var(--tap); height: auto; }
  .oc-pane__ctl { min-width: var(--tap); }
  .oc-screen__item.menu__item { min-height: var(--tap); }
}