/* Кнопки источника и слот камеры (docs/spec_scanner_app_modes.md §3.3, §4).
   Разметку рисует srcbar.js в хосты .rf-src нижних панелей .rf-actbar (геометрию
   самих панелей задаёт nav.css). Анимации — свои: bc-aim из lab.css уходит. */

/* ---------- ряд кнопок
   Кнопки 44 × 44, а не 48: ряд стоит НАД нижним меню, и каждый его лишний пиксель —
   пиксель, отнятый у списка (бюджет высоты §2.5). 44 — нижняя граница цели касания,
   ниже опускать нельзя. Зазоры 6, чтобы ряд от сжатия кнопок не разъехался. */
.rf-src {
  display: flex; align-items: center; gap: 6px;
  flex: none; min-width: 0;
}
.rf-src__btns { display: flex; align-items: center; gap: 6px; flex: none; }

.rf-src__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 22px;
  background: var(--surface); color: var(--text);   /* вторичная — ghost */
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--oui-ease, ease), transform .1s cubic-bezier(.4, 0, .2, 1);
}
.rf-src__btn svg { width: 22px; height: 22px; flex: none; }
.rf-src__btn:active:not(:disabled) { transform: scale(.96); background: var(--surface-2); }
.rf-src__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.rf-src__btn:disabled { cursor: default; opacity: .7; }

/* Главная: «Штрихкод» 52×44, 📷 и ⌨ — 44×44, текстовая («Подключить») — по подписи. */
.rf-src__main { background: var(--accent); color: var(--accent-ink); }
.rf-src__main:active:not(:disabled) { background: var(--accent); filter: brightness(.94); }
.rf-src__main--wide { width: 52px; }
/* 14 px и поля 11: самая длинная подпись, «Переподключаю…» (≈147 px), при 360 px
   оставляет действию модуля ≈120 — «Завершить» (§3.3). Подпись не обрезается. */
.rf-src__main--text { width: auto; min-width: 44px; padding: 0 11px; font-size: 14px; white-space: nowrap; }
/* Тональная: курок уже на штрихкодах, камера включена, ⌨ во «Вручную». */
.rf-src__main.is-soft,
.rf-src__main.is-tonal { background: var(--accent-soft); color: var(--accent-text); }
.rf-src__main.is-err { background: var(--danger-soft); color: var(--bad-ink); }
.rf-src__main.is-busy { background: var(--accent-soft); color: var(--accent-text); opacity: 1; }
/* Янтарная кнопка на экране одна (§3.3): у модуля своя — наша тональная. */
.rf-actbar__row:has(.rf-btn--primary) .rf-src__main:not(.is-err) {
  background: var(--accent-soft); color: var(--accent-text);
}

/* Головка светит — кнопка дышит, касание отменяет. */
.rf-src__main.is-aiming { animation: rf-src-aim .9s ease-in-out infinite; }
@keyframes rf-src-aim { 50% { box-shadow: 0 0 0 7px oklch(0.80 0.17 92 / .38); } }

.rf-src__spin {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; border: 2.4px solid currentColor; border-right-color: transparent;
  animation: rf-src-spin .8s linear infinite;
}
@keyframes rf-src-spin { to { transform: rotate(360deg); } }

/* Камера на паузе или ждёт разрешения — точка на значке. */
.rf-src__dot {
  position: absolute; top: 9px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 0 2px var(--accent);
}
.rf-actbar__row:has(.rf-btn--primary) .rf-src__dot { box-shadow: 0 0 0 2px var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  .rf-src__main.is-aiming { animation: none; box-shadow: 0 0 0 4px oklch(0.80 0.17 92 / .38); }
  .rf-src__spin { animation-duration: 2.4s; }
}

/* ---------- поле ⌨: ряд разворачивается в [× ][поле][➔] */
.rf-src.is-typing { flex: 1 1 auto; }
.rf-src.is-typing > .rf-src__btns { display: none; }
.rf-actbar__row:has(.rf-src.is-typing) > :not(.rf-src) { display: none; }
.rf-src__kbd { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; }
/* Моноширинный — номера и коды читаются по знакам (у .rf-input свой font: inherit). */
.rf-src__kbd .rf-input { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; padding: 0 16px; font-family: var(--mono); }
.rf-src__go {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  background: var(--accent); color: var(--accent-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rf-src__go svg { width: 22px; height: 22px; }
.rf-src__go:active { filter: brightness(.94); }
.rf-src__go:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- слот камеры: между лентой и рядом кнопок */
.rf-camslot {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9; max-height: 26vh; min-height: 0;
  overflow: hidden; border-radius: 26px;
  background: #000;
}
/* Пустой слот места не занимает: видео или полоса — только по решению srcbar. */
.rf-camslot:not([data-cam]) { display: none; }
.rf-camslot[data-owner="stk-pos"] { max-height: 22vh; }
@media (max-height: 780px) { .rf-camslot[data-owner="stk-pos"] { max-height: 17vh; } }
@media (max-height: 700px) { .rf-camslot[data-owner="stk-pos"] { max-height: 15vh; } }
html.rf-kbd .rf-camslot { display: none; }

/* Картинка компонента Camera (стили .rf-bind-cam* — в bind.css) заполняет слот.
   Селектор с id перебивает #tab-asm .rf-bind-cam (assembly.css) и старые размеры. */
.rf-camslot > .rf-bind-cam,
:is(#tab-asm, #tab-bind, #tab-tags) .rf-camslot > .rf-bind-cam {
  position: absolute; inset: 0;
  aspect-ratio: auto; width: 100%; height: 100%; max-height: none;
  border-radius: inherit;
}

/* Пауза, разрешение, ошибка: картинки нет (bind.css прячет .rf-bind-cam в off/error),
   слот сворачивается в полосу — её и касаются. */
.rf-camslot[data-cam="bar"] {
  aspect-ratio: auto; height: 48px; max-height: none;   /* внутри кнопка 44 — полосе хватает 48 */
  background: var(--surface);
}
.rf-camslot[data-cam="bar"][data-kind="error"],
.rf-camslot[data-cam="bar"][data-kind="denied"] { background: var(--danger-soft); }
.rf-camslot__ui { display: contents; }
.rf-camslot__bar {
  display: flex; align-items: center; gap: 8px;
  height: 100%; padding: 0 4px 0 14px;
  color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rf-camslot__bar:focus-visible { outline: none; box-shadow: inset var(--ring); border-radius: inherit; }
.rf-camslot__bar > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.rf-camslot[data-kind="error"] .rf-camslot__bar,
.rf-camslot[data-kind="denied"] .rf-camslot__bar,
.rf-camslot[data-kind="error"] .rf-camslot__bar > svg,
.rf-camslot[data-kind="denied"] .rf-camslot__bar > svg { color: var(--bad-ink); }
.rf-camslot__text {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Поля кнопок узкие намеренно: при 360 px текст ошибки («Камера отключилась») должен
   уместиться в две строки рядом с «Повторить» и «Вручную». */
.rf-camslot__act,
.rf-camslot__link {
  flex: none; height: 44px; padding: 0 12px;   /* цель касания ≥ 44 px: полоса — 48 px */
  border: 0; border-radius: 20px;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rf-camslot__act { background: var(--surface); color: var(--text); }
.rf-camslot__link { background: none; color: var(--accent-text); padding: 0 8px; }
.rf-camslot:not([data-kind="error"]):not([data-kind="denied"]) .rf-camslot__act { background: var(--surface-2); }
.rf-camslot__act:active, .rf-camslot__link:active { transform: scale(.97); }
.rf-camslot__act:focus-visible, .rf-camslot__link:focus-visible { outline: none; box-shadow: var(--ring); }

/* Поверх видео: справа вверху [🔦][⌄], слева внизу подсказка. */
.rf-camslot__ctl {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; gap: 6px;
}
.rf-camslot__ctl button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 22px;
  background: rgba(0, 0, 0, .46); color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rf-camslot__ctl button svg { width: 22px; height: 22px; }
.rf-camslot__ctl button.is-on { background: #fff; color: #0E0F12; }
.rf-camslot__ctl button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.rf-camslot__tip {
  position: absolute; left: 14px; bottom: 10px; z-index: 2;
  color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  pointer-events: none;
}
/* Пока камера включается, подсказка не нужна: кадра ещё нет. */
.rf-camslot:has(.rf-bind-cam[data-state="starting"]) .rf-camslot__tip { display: none; }