/* Карточка единицы (bind.js) во вкладке «Склад»; поле поиска и картинка камеры
   (.rf-bind-cam* — стили компонента Camera, camera.js) отсюда же служат каталогу позиций и
   слоту камеры панели (stock.css, srcbar.css). Геометрия — как у оболочки (shell.css, One UI):
   заголовок 28/700 у левого края, группы одной капсулой 26px, капсульные поля
   и кнопки, без теней; действия — внизу экрана, в панели .rf-actbar (nav.css).
   Цвета — токены lab.css.

   Поля и кнопки режима стоят на фоне страницы (--bg), а не в карточке,
   поэтому их заливка — --surface: --surface-2 на --bg почти не отличим. */

.rf-bind { max-width: 640px; margin: 0 auto; }
.rf-bind-screen { display: grid; gap: 12px; min-width: 0; }
.rf-bind-screen > * { min-width: 0; }

/* ---------- заголовки */
.rf-bind-head { display: grid; gap: 6px; padding: 8px 8px 4px; }
.rf-bind-title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  margin: 0; overflow-wrap: anywhere;
}
.rf-bind-lede { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
/* Заглушка «Загружаю…» — тоже текст: --faint на фоне страницы давал 2.6:1. */
.rf-bind-skel { color: var(--muted); }

.rf-bind-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 2px;
  /* 44 px — цель касания; отрицательный отступ снизу держит прежнее расстояние до заголовка. */
  min-height: 44px; padding: 0 14px 0 4px; margin-bottom: -10px;
  border: 0; border-radius: 999px; background: none;
  color: var(--accent-text); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.rf-bind-back svg { width: 22px; height: 22px; }
.rf-bind-back:active { background: var(--surface); }

/* ---------- поле поиска. Селектор длиннее, чем input[type="search"] в lab.css: иначе тот
   перебивает капсулу 52px. Поле ручного ввода — в .rf-src (srcbar.css). */
.rf-bind-search { position: relative; display: block; }
.rf-bind-search > svg {
  position: absolute; left: 18px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  color: var(--muted); pointer-events: none;
}
.rf-bind-search input.rf-input {
  height: 52px; min-height: 52px;
  border-radius: 26px;
  background: var(--surface);
}
.rf-bind-search input.rf-input { padding: 0 20px 0 48px; }

/* ---------- камера: стили компонента Camera (camera.js). Картинка живёт в слоте нижней
   панели (.rf-camslot, srcbar.css), размер там задаёт слот. */
.rf-bind-cam {
  position: relative; display: none;
  width: 100%; aspect-ratio: 4 / 3; max-height: 58vh;
  border-radius: 22px; overflow: hidden;
  background: #000;
}
.rf-bind-cam[data-state="on"], .rf-bind-cam[data-state="starting"] { display: block; }
.rf-bind-cam[data-state="starting"]::after {
  content: "Включаю камеру…";
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255, 255, 255, .8); font-size: 14px;
}
.rf-bind-cam__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-bind-cam[data-engine="h5"] .rf-bind-cam__video { display: none; }
/* html5-qrcode сам задаёт видео ширину в пикселях и рисует свою рамку; своя
   рамка у нас одна на оба движка, видео — по центру окна. */
.rf-bind-cam__h5 {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.rf-bind-cam__h5 video { width: 100% !important; height: auto !important; }
.rf-bind-cam__h5 #qr-shaded-region { display: none !important; }
.rf-bind-cam__frame {
  position: absolute; left: 9%; right: 9%; top: 20%; bottom: 20%;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  /* затемнение вокруг рамки — подсказка «куда навести», а не тень-подъём */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28);
  pointer-events: none;
}
.rf-bind-cam[data-state="starting"] .rf-bind-cam__frame { display: none; }

.rf-bind-camerr {
  display: grid; justify-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 20px;
  background: var(--danger-soft); color: var(--bad-ink);
  font-size: 14px; line-height: 1.4; text-align: center;
}
.rf-bind-camerr p { margin: 0; }
.rf-bind-camerr .rf-btn { background: var(--surface); color: var(--text); }

/* ---------- вид кода */
.rf-bind-pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.rf-bind-pill--lg { height: 26px; padding: 0 10px; font-size: 12px; }

.rf-bind-note {
  padding: 14px 18px; border-radius: 20px;
  font-size: 14px; line-height: 1.45;
  background: var(--info-soft); overflow-wrap: anywhere;
}
.rf-bind-note--bad { background: var(--danger-soft); color: var(--bad-ink); }

/* ---------- коды единицы */
#bind-codes:empty { display: none; }
#bind-codes .rf-list__label { margin: 4px 0 8px; }
/* Строка кода — 60, а не 74 (--oui-row-sub): значок 44 и две строки (моноширинное
   значение 15 + подпись 14) дают 58. Кодов у единицы бывает три-четыре, а карточка
   открыта на телефоне поверх панели — при 74 px виден был один.
   Разделитель от текста: 16 поле + 44 значок + 12 зазор = 72. */
.rf-bind-line {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 60px;
  padding: 8px 10px 8px 16px;
}
.rf-bind-line + .rf-bind-line::before {
  content: ""; position: absolute; top: 0; left: 72px; right: 18px;
  height: 1px; background: var(--border);
}
.rf-bind-ico {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.rf-bind-ico--rfid { background: var(--accent-soft); color: var(--accent-text); }
.rf-bind-ico svg { width: 22px; height: 22px; }
/* Значение кода и подпись переносятся по две строки (EPC в 24 знака и «RFID · дата ·
   кто»), поэтому междустрочье 1.3, а не 1.45 корпуса: четыре строки экономят 14 px. */
.rf-bind-line__val { font-family: var(--mono); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.rf-bind-line .rf-row__sub { white-space: normal; line-height: 1.3; }
.rf-bind-rm {
  flex: none; min-width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .2s var(--oui-ease), color .2s var(--oui-ease);
}
.rf-bind-rm svg { width: 20px; height: 20px; }
.rf-bind-rm:active { background: var(--surface-2); }
.rf-bind-rm.is-asking { padding: 0 16px; background: var(--danger-soft); color: var(--bad-ink); }
.rf-bind-rm:disabled { opacity: .5; cursor: default; }
.rf-bind-none { margin: 0; padding: 18px 20px; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* ---------- зона скана */
.rf-bind-zone {
  display: grid; gap: 12px;
  padding: 14px;
  border-radius: var(--oui-r);
  background: var(--surface);
  transition: background .35s var(--oui-ease);
}
.rf-bind-zone.is-done { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
#bind-zone-body:empty { display: none; }

.rf-bind-listen { display: grid; justify-items: center; gap: 8px; padding: 14px 4px 4px; text-align: center; }
/* Камера работает (видоискатель — в панели внизу): без волн, заголовок скромнее. */
.rf-bind-listen--cam { padding-top: 2px; gap: 4px; }
.rf-bind-waves { position: relative; width: 132px; height: 112px; display: grid; place-items: center; }
.rf-bind-waves .rf-wiz__waves i { width: 64px; height: 64px; }
.rf-bind-waves__ico {
  position: relative;
  width: 64px; height: 64px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.rf-bind-waves__ico svg { width: 30px; height: 30px; }
.rf-bind-listen__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; max-width: 22ch; }
.rf-bind-listen--cam .rf-bind-listen__title { font-size: 16px; font-weight: 600; max-width: none; }
.rf-bind-listen__hint { margin: -2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.rf-bind-listen__hint.is-warn { color: var(--warn-ink); font-weight: 600; }

/* ---------- найденный код */
.rf-bind-found { display: grid; gap: 10px; padding: 4px 6px 2px; animation: bind-in .25s var(--oui-ease); }
.rf-bind-found__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-bind-found__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rf-bind-found__src { margin-left: auto; font-size: 13px; color: var(--muted); }
.rf-bind-found__val {
  font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.rf-bind-found__note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.rf-bind-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.rf-bind-verdict::before {
  content: ""; width: 8px; height: 8px; margin-top: 7px; flex: none;
  border-radius: 50%; background: currentColor;
}
.rf-bind-verdict--ok { color: var(--good-ink); }
.rf-bind-verdict--warn { color: var(--warn-ink); }
.rf-bind-verdict--bad { color: var(--bad-ink); }
.rf-bind-verdict--info, .rf-bind-verdict--wait { color: var(--muted); }
.rf-bind-verdict--wait::before { animation: pulse 1s infinite; }

.rf-bind-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
/* Вид кода выбирают на ходу одной рукой: сегменты — 44 px, как фильтры «Склада». */
.rf-bind-seg button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px;
  border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.rf-bind-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); }
[data-theme="dark"] .rf-bind-seg button[aria-checked="true"] { background: var(--border-strong); }

/* ---------- привязано */
.rf-bind-done { display: grid; justify-items: center; gap: 4px; padding: 14px 2px 2px; text-align: center; }
.rf-bind-done__check {
  position: relative;
  width: 72px; height: 72px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--good); color: var(--accent-ink);
  animation: bind-pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.rf-bind-done__check::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 3px solid var(--good);
  animation: bind-ring .9s var(--oui-ease) .1s both;
}
.rf-bind-done__check svg {
  width: 38px; height: 38px;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: bind-draw .3s ease-out .22s forwards;
}
.rf-bind-done--quiet .rf-bind-done__check { background: var(--surface-2); color: var(--muted); animation: none; }
.rf-bind-done--quiet .rf-bind-done__check::after { display: none; }
.rf-bind-done--quiet .rf-bind-done__check svg { animation: none; stroke-dashoffset: 0; }
.rf-bind-done__title { margin: 8px 0 0; font-size: 20px; font-weight: 700; }
.rf-bind-done__sub { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.rf-bind-done__all { margin: 10px 0 0; color: var(--muted); font-size: 14px; animation: bind-in .35s var(--oui-ease) .7s both; }

.rf-bind-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  width: 100%; margin-top: 14px; padding: 14px 14px 14px 20px;
  border: 0; border-radius: 22px;
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  animation: bind-in .35s var(--oui-ease) .7s both;
}
.rf-bind-next:active { background: var(--surface-2); }
.rf-bind-next > span { grid-column: 1; min-width: 0; }
.rf-bind-next__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--good-ink); }
.rf-bind-next__name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-bind-next__sub { font-size: 14px; color: var(--muted); }
.rf-bind-next > .rf-bind-next__chev { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--muted); }
.rf-bind-next__chev svg { width: 18px; height: 18px; display: block; }

/* ---------- нижняя панель: ряд действий. Геометрию (fixed над меню, поля, фон) задаёт
   .rf-actbar в nav.css; справа от действий — хост кнопок источника #bind-src (srcbar.js).
   При 360 px рядом с главной кнопкой источника (52) действиям остаётся 270 px. */
.rf-bind-actions { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; align-items: center; }
.rf-bind-actions:not(:empty) { animation: bind-up .3s var(--oui-ease); }
/* 44 — общая высота ряда над меню (srcbar.css, nav.css): ряд ровный, панель ниже. */
.rf-bind-actions .rf-btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
.rf-bind-actions .rf-btn--text { flex: 0 0 auto; padding: 0 12px; }
.rf-bind-actions .rf-btn--ghost { background: var(--surface); }

/* ---------- ряд в покое: «Найти» и «Привязать метку» (§В.1, точка 2)

   Точки входа поиска стоят в ряду действий, а не в шапке карточки: до шапки большой палец
   с рукоятью H103 не дотягивается. Ряд делит место с хостом кнопок источника, и ширина
   хоста меняется: со связью это ⌨ + главная (112 px при 360), без связи — текстовая
   «Подключить» / «Переподключаю…» (≈186 px), и ряду остаётся ≈134 px. Вдвоём кнопки туда
   не встают, поэтому ряд ПЕРЕНОСИТ вторую кнопку на свою строку, а не режет подписи
   многоточием. Подпись «Привязать метку» на узком экране сворачивается до «Привязать» —
   порог по ОКНУ, а не @container: container-type на .rf-bind-actions сделал бы её ширину
   независимой от содержимого и переставил бы кнопки решения («Отмена», «Привязать»). */
.rf-bind-idle { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; }
.rf-bind-actions .rf-bind-idle > .rf-btn { flex: 1 1 auto; min-width: 0; }
.rf-bind-actions .rf-bind-find { flex: 0 1 auto; gap: 6px; background: var(--surface); }
.rf-bind-find__ico { display: inline-flex; flex: none; }
.rf-bind-find__ico svg { width: 20px; height: 20px; }
/* Выключенная «Найти» — не серая «на всякий случай», а объяснённая: подпись в title и
   aria-label говорит, что искать нечем. Прозрачность общей .rf-btn:disabled (.4) на
   тональном фоне даёт 2,4:1 — поднимаем до читаемой. */
.rf-bind-actions .rf-bind-find:disabled { opacity: 1; color: var(--muted); background: var(--surface); }
.rf-bind-actions .rf-bind-tobind { background: var(--surface); color: var(--text); font-weight: 600; }
.rf-bind-idle__short { display: none; }
@media (max-width: 419px) {
  .rf-bind-idle__full { display: none; }
  .rf-bind-idle__short { display: inline; }
}

/* Зона ожидания кода после «Привязать метку»: короткая вспышка рамкой — человек только что
   пролистал к ней, и без метки было бы непонятно, на что смотреть. */
.rf-bind-zone.is-hint { box-shadow: 0 0 0 2px var(--accent-text) inset; }
.rf-bind-listen--ro { padding: 18px 8px; }

@keyframes bind-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes bind-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes bind-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes bind-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.9); opacity: 0; } }
@keyframes bind-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rf-bind-found, .rf-bind-next, .rf-bind-done__all, .rf-bind-actions:not(:empty),
  .rf-bind-done__check, .rf-bind-done__check::after { animation: none; }
  .rf-bind-done__check svg { animation: none; stroke-dashoffset: 0; }
}