/* Нижнее меню и нижние слои приложения сканера (docs/spec_scanner_app_modes.md §2).

   Снизу вверх: меню .rf-nav (z 45) → панель экрана .rf-actbar (z 40, стоит НА меню) →
   стек баннеров .rf-banners (z 44) → тосты (z 90). Листы, выбор сканера, экраны оболочки и
   карточка метки перекрывают меню — так и надо: лист One UI закрывает нижнюю навигацию.
   Высоты слоёв ставит nav.js: --rf-nav-h, --rf-actbar-h, --rf-banner-h. Запасное значение
   меню — 64 px: страница без nav.js (упал импорт) не должна прятать панель под меню.
   Safe-area добавляет только самый нижний слой: меню, а при клавиатуре — панель. */

/* ---------- режим ввода: что видно в «Сканере», «Камере» и «Вручную» (input.js, <html data-input>) */
html:not([data-input="scanner"]) .rf-if-scanner,
html:not([data-input="camera"]) .rf-if-camera,
html:not([data-input="manual"]) .rf-if-manual { display: none !important; }

/* ---------- права действий (shell.js, <html data-allow>, docs/spec_scanner_checkpoints_levels_locate.md §Б.8)

   Порог каждого действия задаёт компания на странице настроек склада. Пока data-allow нет
   (сервер не ответил или он старее контракта), не прячется НИЧЕГО: мигать половиной меню на
   каждой загрузке незачем, а закрытую кнопку сервер всё равно отвергает 403.

   Действия `app` здесь нет: не пустили — человек до интерфейса не дошёл. */
html[data-allow]:not([data-allow~="assembly"]) .rf-need-assembly,
html[data-allow]:not([data-allow~="arrival"]) .rf-need-arrival,
html[data-allow]:not([data-allow~="dispatch"]) .rf-need-dispatch,
html[data-allow]:not([data-allow~="returns"]) .rf-need-returns,
html[data-allow]:not([data-allow~="labeling"]) .rf-need-labeling,
html[data-allow]:not([data-allow~="search"]) .rf-need-search,
html[data-allow]:not([data-allow~="operators"]) .rf-need-operators,
html[data-allow]:not([data-allow~="device"]) .rf-need-device { display: none !important; }
/* «Площадка» — один раздел на два этапа: хватает права на любой (§А.9). */
html[data-allow]:not([data-allow~="arrival"]):not([data-allow~="dispatch"]) .rf-need-venue { display: none !important; }
/* …и пока её модуль не загрузился (venue.js ставит data-venue-ready) — показывать нечего. */
html:not([data-venue-ready]) .rf-if-venue { display: none !important; }

/* ---------- меню */
.rf-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex;
  padding: 0 max(0px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(0px, env(safe-area-inset-left, 0px));
  /* Без тени и линии: поверхность светлее фона в обеих темах и так отделяет меню. */
  background: var(--surface);
}
/* Ячейки делят ширину поровну (72 px при пяти пунктах на 360, 90 — при четырёх); нажимается
   вся ячейка, а не капсула. */
.rf-nav__item {
  flex: 1 1 0; min-width: 0; height: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 0;
  border: 0; background: none; color: var(--muted);
  font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-nav__pill {
  position: relative;
  width: 56px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  transition: background .2s var(--oui-ease, ease), color .2s var(--oui-ease, ease);
}
.rf-nav__pill svg { width: 24px; height: 24px; stroke-width: 1.9; }
.rf-nav__label {
  max-width: 100%;
  font-size: 12px; line-height: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-nav__item:active .rf-nav__pill { background: var(--surface-2); }
/* Активный: янтарная капсула без подчёркивания, как у нижней навигации One UI. */
.rf-nav__item[aria-current="page"] .rf-nav__pill { background: var(--accent-soft); color: var(--accent-text); }
.rf-nav__item[aria-current="page"] .rf-nav__pill svg { stroke-width: 2.2; }
.rf-nav__item[aria-current="page"] .rf-nav__label { color: var(--text); font-weight: 700; }
.rf-nav__item:focus-visible { outline: none; }
.rf-nav__item:focus-visible .rf-nav__pill { box-shadow: var(--ring); }

/* Бейдж — в правом верхнем углу капсулы. «999+» ≈ 30 px, полное число — в aria-label пункта. */
.rf-nav__badge {
  position: absolute; top: -4px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px;
  font-size: 11px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: center; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink);
}
.rf-nav__badge:empty, .rf-nav__badge[hidden] { display: none; }
.rf-nav__badge--bad { background: var(--bad); color: var(--accent-ink); }
.rf-nav__badge--muted { background: var(--surface-2); color: var(--muted); }
.rf-nav__item[aria-current="page"] .rf-nav__badge--muted { background: var(--surface); }

/* Клавиатура открыта (nav.js): меню прячется, панель садится прямо на клавиатуру — поле
   ввода оказывается под большим пальцем, как строка адреса Samsung Internet. */
html.rf-kbd .rf-nav { display: none; }

/* ---------- панель экрана: лента, слот камеры, ряд действий (разметка — §2.5) */
.rf-actbar {
  position: fixed; left: 0; right: 0; bottom: var(--rf-nav-h, 64px); z-index: 40;
  /* Поля и зазоры 6, а не 8: панель стоит НАД списком, и её высота вычитается из него
     целиком. Один ярус кнопок (44) даёт панель 56, два яруса или лента — 104–106. */
  display: grid; gap: 6px;
  padding: 6px var(--gutter);
  background: var(--bg);
}
.rf-actbar > * { width: 100%; max-width: 608px; margin: 0 auto; min-width: 0; }
/* Пустая лента и пустой слот камеры не дают лишних зазоров сетки. */
.rf-actbar > :empty { display: none; }
.rf-actbar__row { display: flex; align-items: center; gap: 6px; }
.rf-actbar__row > :first-child { flex: 1 1 auto; min-width: 0; }
html.rf-kbd .rf-actbar { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }

/* «Метки»: «Старт/Стоп» на всю ширину, длительность рядом. У .btn-run в lab.css на телефоне
   flex-basis 100% — в ряду без переноса это сжимало бы список до нуля. */
#tags-bottom .btn-run { flex: 1 1 auto; min-width: 0; min-height: 46px; }
#tags-bottom select { flex: 0 0 auto; width: 148px; min-height: 46px; border-radius: 23px; }

/* ---------- баннеры app.js: нижний стек над панелью, как snackbar One UI.
   Виден один — самый важный: app.js вставляет их по приоритету (lost > conn > readmode >
   hid > init > note); сняли верхний — показался следующий. */
.rf-banners {
  position: fixed; z-index: 44;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--rf-nav-h, 64px) + var(--rf-actbar-h, 0px) + 8px);
  max-width: 608px; margin: 0 auto;
}
.rf-banners > .banner { margin: 0; box-shadow: 0 6px 24px rgba(20, 18, 10, .14); }
/* Компактный вид (22.09.2026): значок · текст · крестик одной строкой, действия — рядом под
   текстом. Прежний баннер ставил «Скрыть» четвёртой кнопкой, ряд ломался на два, и баннер
   с ошибкой подключения вырастал до 195 px — закрывал пол-экрана над списком. Текст — до
   трёх строк (целиком — в title и «Журнале обмена»). Кнопки 38 px, цель касания — 44
   (::before). Разметку рисует app.js banner(); лист выбора сканера (#picker-error) живёт
   со своим .banner в lab.css. */
.rf-banners > .banner {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start;
  column-gap: 10px; row-gap: 8px;
  padding: 10px 6px 10px 14px; border-radius: 18px;
}
.rf-banners > .banner .banner__ico { display: grid; place-items: center; width: 22px; height: 20px; color: var(--muted); }
.rf-banners > .banner.error .banner__ico { color: var(--bad-ink); }
.rf-banners > .banner.warn .banner__ico { color: var(--warn-ink); }
.rf-banners > .banner .banner__ico svg { width: 20px; height: 20px; }
.rf-banners > .banner p {
  grid-column: 2; align-self: center;
  font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Без крестика (обрыв связи) текст занимает и его колонку. */
.rf-banners > .banner:not(:has(> .banner__x)) p { grid-column: 2 / -1; padding-right: 8px; }
.rf-banners > .banner .banner__x {
  grid-column: 3; position: relative;
  width: 32px; height: 32px; margin: -6px 0 -6px 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
}
.rf-banners > .banner .banner__x::before { content: ""; position: absolute; inset: -6px; }
.rf-banners > .banner .banner__x svg { width: 18px; height: 18px; }
.rf-banners > .banner .banner__x:active { background: rgba(0, 0, 0, .06); }
.rf-banners > .banner .banner__x:focus-visible { outline: none; box-shadow: var(--ring); }
.rf-banners > .banner .actions { grid-column: 1 / -1; gap: 6px; padding-right: 8px; }
/* Ряд — во всю ширину баннера, кнопки делят его поровну: на 360 px три действия («Ещё раз»,
   «Другой», «Без сканера») стоят одним рядом; от начала текста им не хватало 26 px. */
.rf-banners > .banner .actions .btn.sm {
  position: relative; flex: 1 1 auto; min-height: 38px; padding: 0 12px; border-radius: 19px; font-size: 14px;
}
.rf-banners > .banner .actions .btn.sm::before { content: ""; position: absolute; inset: -3px 0; }
[data-theme="dark"] .rf-banners > .banner { box-shadow: 0 6px 24px rgba(0, 0, 0, .55); }
.rf-banners > .banner:not(:first-child) { display: none; }
/* Под клавиатурой стек не виден: важное вернётся, когда её уберут. */
html.rf-kbd .rf-banners { display: none; }
/* Янтарная кнопка на экране одна (§3.3). Действия баннеров связи, повторяющие главную кнопку
   источника («Переподключить», «Ещё раз»), app.js янтарными не делает — главное действие и так
   внизу, у пальца. Если же у видимого баннера своя янтарная, которой внизу нет («Отдавать метки
   в приложение»), — главная кнопка источника уступает ей и становится тональной. */
html:not(.rf-kbd):has(#banners > .banner:first-child .btn.primary) .rf-src__main:not(.is-err) {
  background: var(--accent-soft); color: var(--accent-text);
}

/* ---------- тосты — над всеми нижними слоями. !important — страховка от правил модулей: раньше
   assembly.css, stock.css и bind.css поднимали тост своими body:has(...) #toasts, и они были
   сильнее простого #toasts. Высоты слоёв знает только nav.js, модулям тост трогать не нужно. */
#toasts {
  bottom: calc(var(--rf-nav-h, 64px) + var(--rf-actbar-h, 0px) + var(--rf-banner-h, 0px) + 8px) !important;
}