/* Раскадровка сцены v2 — Ш9б «Двойной режим и редактор кадра» (BETA-D-166,
   эскиз storyboard-r3.html). Стили трёх модулей: storyboard-workspace.js
   (колонка на весь стол, три зоны), storyboard-board.js (профиль планов,
   лента строк, контрольный лист, полоса выбора, заглушки чтения),
   frame-editor.js (редактор шага «Кадр»). Только токены темы плюс восемь
   цветов крупности, определённых здесь же (страж css-tokens.test.ts). */

/* Восемь цветов крупности — единая шкала профиля, чипов и полосок листа:
   холодные широкие → тёплые крупные. Графит — по умолчанию, светлая тема —
   те же тона плотнее. */
:root {
  --pf-sb-shot-extreme-wide: #5b8def;
  --pf-sb-shot-establishing: #4fb3d9;
  --pf-sb-shot-wide: #4fc9a4;
  --pf-sb-shot-full: #8fcf5a;
  --pf-sb-shot-medium: #d9c04f;
  --pf-sb-shot-close: #f0964b;
  --pf-sb-shot-extreme-close: #ef6b6b;
  --pf-sb-shot-detail: #c47ee0;
}

:root[data-theme='light'] {
  --pf-sb-shot-extreme-wide: #2f63c8;
  --pf-sb-shot-establishing: #1f8fb8;
  --pf-sb-shot-wide: #22a07c;
  --pf-sb-shot-full: #5f9e2a;
  --pf-sb-shot-medium: #b3951a;
  --pf-sb-shot-close: #d2691e;
  --pf-sb-shot-extreme-close: #c93c3c;
  --pf-sb-shot-detail: #9a4fc0;
}

/* ------------------------------------------------ разворот на весь стол */

/* Колонка «Иллюстрации» растёт на весь стол (записка §6.2, механизм А):
   центр чтения, панель правки и ручки скрыты классом стола, колонка
   берёт остаток; шапка стола, строка состояния и плашка заданий — на месте. */
.wb-desk--images-max .wb-col--center,
.wb-desk--images-max .wb-col--detail,
.wb-desk--images-max .wb-col--assist,
.wb-desk--images-max .wb-split {
  display: none;
}

.wb-desk--images-max .wb-col--images.is-max {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  border-left: none;
}

.wb-col--images.is-max .wb-col__head {
  flex-wrap: wrap;
  row-gap: var(--pf-space-xs);
}

/* Верхняя полоса развёрнутого стола (слово владельца 02.09 — компактнее по
   вертикали): одна строка счётчиков, готовности, фильтра и действий, под
   ней профиль на всю ширину. Замок и предупреждения — своей строкой. */
.wb-sb-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px var(--pf-space-md) var(--pf-space-xs);
  border-bottom: 1px solid var(--pf-color-border-subtle);
  background: var(--pf-color-surface-raised);
}

.wb-sb-top__row {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.wb-sb-top__row .wb-sb-ceiling,
.wb-sb-top__row .wb-scimg-ready {
  margin: 0;
}

.wb-sb-top__row .wb-scimg-lock {
  flex-basis: 100%;
}

.wb-sb-top .wb-scimg-profile {
  min-height: 36px;
  padding: 2px var(--pf-space-sm);
}

/* Превью в ленте развёрнутого стола — в полтора раза крупнее, чем в
   колонке (слово владельца 02.09); пропорции файла сохраняются. */
.wb-sb-zone--board .wb-scimg-frame__thumb {
  height: 123px;
  max-width: 186px;
}

.wb-sb-zone--board .wb-scimg-frame__thumb--empty {
  width: 82px;
}

/* Миниатюра строки со значком ⤢ (В1 плана брака): обёртка держит значок в
   углу картинки и не растягивается флексом шапки. */
.wb-sb-thumb {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}

.wb-sb-top .wb-scimg-profile__bar {
  flex: 1 1 4px;
  max-width: 18px;
}

/* Бюджет предпросмотра «свой N» (Ш9в): узкое поле числа рядом с переключателем. */
.wb-sb-budget-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-xs);
}

.wb-sb-budget__n {
  width: 64px;
  padding: 1px 6px;
}

/* Три зоны: доска (остаток, лента не шире 1400), карточка кадра, текст. */
.wb-sb-zones {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.wb-sb-zone {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--pf-space-md);
}

/* Доска берёт остаток; ширины карточки и текста — инлайн flex-basis из
   памяти раскладки, меняются ручками (слово владельца 02.09: на 4K
   прежние пределы 1400/640 оставляли пол-экрана пустым). Доска не уже
   480 px и при умолчаниях: зонам разрешено ужиматься до 360 (стенд Ш9д —
   в узком окне доске доставалось 300 px, лист в 8 колонок — ячейки по 30). */
.wb-sb-zone--board {
  flex: 1 1 480px;
  min-width: 480px;
}

.wb-sb-zone--card {
  flex: 0 1 640px;
  min-width: 360px;
  background: var(--pf-color-surface-raised);
}

.wb-sb-zone--text {
  flex: 0 1 640px;
  min-width: 360px;
}

/* Ручка ширины между зонами: тонкая полоса, при наведении и тяге — золотая. */
.wb-sb-split {
  flex: 0 0 7px;
  cursor: col-resize;
  background: var(--pf-color-border-subtle);
  background-clip: content-box;
  padding: 0 3px;
  transition: background-color 0.12s;
}

.wb-sb-split:hover,
.wb-sb-split.is-drag {
  background-color: var(--pf-color-border-focus);
}

.wb-sb-zone__label {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  font-size: var(--pf-typography-caption-size);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pf-color-text-muted);
}

.wb-sb-keys {
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопка ⤢ / ⤡ в шапке колонки. */
.wb-sb-max-toggle {
  font-size: 15px;
  line-height: 1;
  padding: 2px 8px;
}

/* ------------------------------------------------------- профиль планов v2 */

.wb-scimg-profile__bar {
  position: relative;
  cursor: pointer;
}

.wb-scimg-profile__bar[data-shot='extreme-wide'] { background: var(--pf-sb-shot-extreme-wide); }
.wb-scimg-profile__bar[data-shot='establishing'] { background: var(--pf-sb-shot-establishing); }
.wb-scimg-profile__bar[data-shot='wide'] { background: var(--pf-sb-shot-wide); }
.wb-scimg-profile__bar[data-shot='full'] { background: var(--pf-sb-shot-full); }
.wb-scimg-profile__bar[data-shot='medium'] { background: var(--pf-sb-shot-medium); }
.wb-scimg-profile__bar[data-shot='close'] { background: var(--pf-sb-shot-close); }
.wb-scimg-profile__bar[data-shot='extreme-close'] { background: var(--pf-sb-shot-extreme-close); }
.wb-scimg-profile__bar[data-shot='detail'] { background: var(--pf-sb-shot-detail); }

/* Ключевой — золотая обводка поверх цвета крупности (цвет крупности остаётся). */
.wb-scimg-profile__bar--key {
  outline: 1.5px solid var(--pf-color-text-accent);
  outline-offset: 0;
}

.wb-scimg-profile__bar.is-selected {
  outline: 2px solid var(--pf-color-border-focus);
  outline-offset: 1px;
}

/* Ракурс не с уровня глаз — точка под штрихом. */
.wb-scimg-profile__bar--angle::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--pf-color-text-secondary);
}

/* Заставка и финал — засечки по краям профиля. */
.wb-scimg-profile__bar--role {
  border-bottom: 3px solid var(--pf-color-text-primary);
}

.wb-scimg-profile__bar--picked {
  box-shadow: 0 -3px 0 0 var(--pf-color-text-accent);
}

.wb-scimg-profile--wide {
  min-height: 44px;
}

/* ----------------------------------------------------------- лента строк */

.wb-sb-strip {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.wb-sb-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  font-size: var(--pf-typography-body-small-size);
  color: var(--pf-color-text-secondary);
}

.wb-sb-row__sketch {
  margin: 0;
  font-size: var(--pf-typography-body-small-size);
  color: var(--pf-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-scimg-frame.is-selected .wb-sb-row__sketch {
  white-space: normal;
}

/* Чип поля кадра в строке: цветной кружок крупности + слово. */
.wb-sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: 999px;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-secondary);
  white-space: nowrap;
}

.wb-sb-chip--role {
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-accent);
}

.wb-sb-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pf-color-border-strong);
}

.wb-sb-swatch[data-shot='extreme-wide'] { background: var(--pf-sb-shot-extreme-wide); }
.wb-sb-swatch[data-shot='establishing'] { background: var(--pf-sb-shot-establishing); }
.wb-sb-swatch[data-shot='wide'] { background: var(--pf-sb-shot-wide); }
.wb-sb-swatch[data-shot='full'] { background: var(--pf-sb-shot-full); }
.wb-sb-swatch[data-shot='medium'] { background: var(--pf-sb-shot-medium); }
.wb-sb-swatch[data-shot='close'] { background: var(--pf-sb-shot-close); }
.wb-sb-swatch[data-shot='extreme-close'] { background: var(--pf-sb-shot-extreme-close); }
.wb-sb-swatch[data-shot='detail'] { background: var(--pf-sb-shot-detail); }

/* Важность точками: ●●●●○ золотом у ключевых. */
.wb-sb-weight {
  letter-spacing: 1px;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-muted);
}

.wb-sb-weight--key {
  color: var(--pf-color-text-accent);
}

/* Действия строки: видны при наведении и у выбранной. */
.wb-sb-row__actions {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.12s;
}

.wb-scimg-frame:hover .wb-sb-row__actions,
.wb-scimg-frame:focus-within .wb-sb-row__actions,
.wb-scimg-frame.is-selected .wb-sb-row__actions,
.wb-sb-row__actions.is-confirm {
  opacity: 1;
}

.wb-sb-row__btn {
  padding: 1px 7px;
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.wb-sb-row__btn:hover:not(:disabled) {
  border-color: var(--pf-color-border-strong);
  color: var(--pf-color-text-primary);
}

.wb-sb-row__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.wb-sb-row__btn--confirm {
  border-color: var(--pf-color-border-danger);
  color: var(--pf-color-text-danger);
}

/* Состояние пакета у строки и ячейки: очередь, рисуется, ошибка. */
.wb-sb-pack {
  font-size: var(--pf-typography-caption-size);
  padding: 0 6px;
  border-radius: 999px;
  border: 1px dashed var(--pf-color-border-strong);
  color: var(--pf-color-text-secondary);
}

.wb-sb-pack--running {
  border-style: solid;
  border-color: var(--pf-color-border-focus);
  color: var(--pf-color-text-accent);
}

.wb-sb-pack--failed {
  border-style: solid;
  border-color: var(--pf-color-border-danger);
  color: var(--pf-color-text-danger);
}

/* ------------------------------------------------------- полоса выбора */

.wb-sb-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-focus);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-selected);
  font-size: var(--pf-typography-body-small-size);
}

.wb-sb-bulk__count {
  font-weight: 600;
}

.wb-sb-bulk select {
  padding: 1px 4px;
}

/* ----------------------------------------------------- контрольный лист */

.wb-sb-sheet {
  display: grid;
  grid-template-columns: repeat(var(--pf-sb-cols, 8), minmax(0, 1fr));
  gap: var(--pf-space-xs);
}

.wb-sb-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-sunken);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}

.wb-sb-cell:hover {
  border-color: var(--pf-color-border-strong);
}

.wb-sb-cell--empty {
  border-style: dashed;
}

.wb-sb-cell--key {
  border-color: var(--pf-color-text-accent);
}

.wb-sb-cell--queued {
  border-style: dashed;
  border-color: var(--pf-color-border-focus);
}

.wb-sb-cell--running {
  border-color: var(--pf-color-border-focus);
}

.wb-sb-cell--failed {
  border-color: var(--pf-color-border-danger);
}

.wb-sb-cell.is-selected {
  outline: 2px solid var(--pf-color-border-focus);
  outline-offset: 1px;
}

.wb-sb-cell.is-picked {
  background: var(--pf-color-surface-selected);
}

.wb-sb-cell__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-sb-cell__no {
  position: absolute;
  top: 2px;
  left: 4px;
  z-index: 1;
  padding: 0 4px;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-secondary);
}

.wb-sb-cell--key .wb-sb-cell__no {
  color: var(--pf-color-text-accent);
  font-weight: 600;
}

.wb-sb-cell__pick {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 1;
  margin: 0;
}

/* Значок ⤢ ячейки (В1 плана брака): верхний правый угол занят галочкой —
   значок внизу справа, над полоской крупности. */
.wb-sb-cell .pf-zoom {
  top: auto;
  bottom: 8px;
  right: 4px;
}

.wb-sb-cell__role {
  position: absolute;
  left: 4px;
  bottom: 6px;
  z-index: 1;
  padding: 0 4px;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-accent);
}

.wb-sb-cell__sketch {
  flex: 1 1 auto;
  padding: 18px 6px 8px;
  font-size: var(--pf-typography-caption-size);
  font-style: italic;
  color: var(--pf-color-text-secondary);
  overflow: hidden;
}

.wb-sb-cell--failed .wb-sb-cell__sketch {
  color: var(--pf-color-text-danger);
  font-style: normal;
}

.wb-sb-cell__strip {
  flex: 0 0 4px;
  height: 4px;
  background: var(--pf-color-border-strong);
}

.wb-sb-cell__strip[data-shot='extreme-wide'] { background: var(--pf-sb-shot-extreme-wide); }
.wb-sb-cell__strip[data-shot='establishing'] { background: var(--pf-sb-shot-establishing); }
.wb-sb-cell__strip[data-shot='wide'] { background: var(--pf-sb-shot-wide); }
.wb-sb-cell__strip[data-shot='full'] { background: var(--pf-sb-shot-full); }
.wb-sb-cell__strip[data-shot='medium'] { background: var(--pf-sb-shot-medium); }
.wb-sb-cell__strip[data-shot='close'] { background: var(--pf-sb-shot-close); }
.wb-sb-cell__strip[data-shot='extreme-close'] { background: var(--pf-sb-shot-extreme-close); }
.wb-sb-cell__strip[data-shot='detail'] { background: var(--pf-sb-shot-detail); }

/* -------------------------------------------- чтение с бюджетом: заглушки */

.wb-sb-ph {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--pf-space-sm) 0;
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 1px dashed var(--pf-color-border-strong);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-sunken);
  font: inherit;
  text-align: left;
  color: var(--pf-color-text-secondary);
  cursor: pointer;
  width: 100%;
}

.wb-sb-ph--key {
  border-color: var(--pf-color-text-accent);
}

.wb-sb-ph.is-selected,
.wb-scimg-inline.is-selected {
  outline: 2px solid var(--pf-color-border-focus);
  outline-offset: 2px;
}

.wb-sb-ph__title {
  font-weight: 600;
  color: var(--pf-color-text-primary);
}

.wb-sb-ph__sketch {
  font-style: italic;
  font-size: var(--pf-typography-body-small-size);
}

/* Поток чтения на доске: ограничен шириной книжной страницы. */
.wb-sb-read {
  max-width: 900px;
}

/* --------------------------------------------------------- редактор кадра */

.wb-fe {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pf-space-xs) var(--pf-space-sm);
  align-items: start;
}

.wb-fe__label {
  padding-top: 4px;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-muted);
  white-space: nowrap;
}

.wb-fe__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-xs);
  min-width: 0;
}

.wb-fe__field .pf-input {
  width: 100%;
}

.wb-fe__field select.pf-input {
  width: auto;
}

.wb-fe__note {
  flex-basis: 100%;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-muted);
}

/* Состояние к кадру (Л3): перестановки после блока кадра — приглушённо. */
.wb-fe__state {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.wb-fe__state-later {
  color: var(--pf-color-text-secondary);
  opacity: 0.7;
}

/* Чип-переключатель: ракурс, кадрирование, задача, роль. */
.wb-fe__chip {
  padding: 2px 9px;
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-secondary);
  background: none;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.wb-fe__chip:hover:not(:disabled) {
  border-color: var(--pf-color-border-strong);
}

.wb-fe__chip.is-on {
  border-color: var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
  background: var(--pf-color-surface-selected);
}

.wb-fe__chip:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Пиктограммы планов ×8: фигурка в рамке кадра, цвет крупности снизу. */
.wb-fe__shots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wb-fe__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 58px;
  padding: 4px 2px 3px;
  font: inherit;
  font-size: 10px;
  line-height: 1.1;
  color: var(--pf-color-text-secondary);
  background: none;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
}

.wb-fe__shot:hover:not(:disabled) {
  border-color: var(--pf-color-border-strong);
}

.wb-fe__shot.is-on {
  border-color: var(--pf-color-border-focus);
  background: var(--pf-color-surface-selected);
  color: var(--pf-color-text-primary);
}

.wb-fe__shot:disabled {
  opacity: 0.5;
  cursor: default;
}

.wb-fe__fig {
  position: relative;
  width: 34px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--pf-color-border-strong);
  border-radius: 2px;
  background: var(--pf-color-surface-sunken);
}

/* Фигурка человека: ширина и высота — крупность; крупные планы «вылезают» за рамку. */
.wb-fe__fig i {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background: var(--pf-color-text-secondary);
}

.wb-fe__fig[data-shot='extreme-wide'] i { width: 2px; height: 2px; bottom: 6px; border-radius: 50%; }
.wb-fe__fig[data-shot='establishing'] i { width: 3px; height: 7px; }
.wb-fe__fig[data-shot='wide'] i { width: 5px; height: 12px; }
.wb-fe__fig[data-shot='full'] i { width: 7px; height: 20px; }
.wb-fe__fig[data-shot='medium'] i { width: 12px; height: 24px; bottom: -8px; }
.wb-fe__fig[data-shot='close'] i { width: 20px; height: 28px; bottom: -14px; border-radius: 8px 8px 0 0; }
.wb-fe__fig[data-shot='extreme-close'] i {
  width: 22px;
  height: 10px;
  bottom: 7px;
  border-radius: 50%;
  background: none;
  border: 2px solid var(--pf-color-text-secondary);
}
.wb-fe__fig[data-shot='detail'] i { width: 10px; height: 10px; bottom: 7px; border-radius: 2px; }

/* Горизонт панорамы и адресного плана. */
.wb-fe__fig[data-shot='extreme-wide']::before,
.wb-fe__fig[data-shot='establishing']::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  border-top: 1px solid var(--pf-color-border-strong);
}

.wb-fe__fig[data-shot='extreme-wide']::before {
  bottom: 9px;
}

/* Цветная полоска крупности под фигуркой. */
.wb-fe__fig::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--pf-color-border-strong);
}

.wb-fe__fig[data-shot='extreme-wide']::after { background: var(--pf-sb-shot-extreme-wide); }
.wb-fe__fig[data-shot='establishing']::after { background: var(--pf-sb-shot-establishing); }
.wb-fe__fig[data-shot='wide']::after { background: var(--pf-sb-shot-wide); }
.wb-fe__fig[data-shot='full']::after { background: var(--pf-sb-shot-full); }
.wb-fe__fig[data-shot='medium']::after { background: var(--pf-sb-shot-medium); }
.wb-fe__fig[data-shot='close']::after { background: var(--pf-sb-shot-close); }
.wb-fe__fig[data-shot='extreme-close']::after { background: var(--pf-sb-shot-extreme-close); }
.wb-fe__fig[data-shot='detail']::after { background: var(--pf-sb-shot-detail); }

/* Важность: пять точек-кнопок. */
.wb-fe__dots {
  display: inline-flex;
  gap: 2px;
}

.wb-fe__dot {
  width: 22px;
  height: 22px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--pf-color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.wb-fe__dot.is-on {
  color: var(--pf-color-text-accent);
}

.wb-fe__dot:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Участник кадра с кнопкой «убрать». */
.wb-fe__cast {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.wb-fe__cast-x {
  padding: 0 4px;
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.wb-fe__cast-x:hover {
  color: var(--pf-color-text-danger);
}

.wb-fe__dirty {
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-warning);
}

/* Плашка «постановка устарела». */
.wb-sb-stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-xs) var(--pf-space-sm);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-text-warning);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-warning-soft);
  font-size: var(--pf-typography-body-small-size);
}

.wb-sb-stale__title {
  font-weight: 600;
  color: var(--pf-color-text-warning);
}

/* Предупреждение о потолке кадров. */
.wb-sb-ceiling {
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-muted);
}

.wb-sb-ceiling--warn {
  color: var(--pf-color-text-warning);
}

/* Тело развёрнутой колонки: без отступов и общей прокрутки — прокручиваются зоны. */
.wb-col__body.wb-sb-max {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* ------------------------------------------------------- эпизоды (Ш9г) */

/* Шапка эпизода в ленте и на листе (эскиз В): стрелка свёртки, «Эпизод N ·
   название», абзацы и счётчики, мизансцена одной строкой, действия. */
.wb-sb-ep {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-space-xs) var(--pf-space-sm);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-strong);
  border-left: 3px solid var(--pf-color-text-accent);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
  font-size: var(--pf-typography-body-small-size);
}

.wb-sb-ep.is-selected {
  box-shadow: inset 0 0 0 1px var(--pf-color-text-accent);
}

.wb-sb-ep__toggle {
  border: none;
  background: transparent;
  padding: 0 2px;
  color: var(--pf-color-text-secondary);
  cursor: pointer;
  font: inherit;
}

.wb-sb-ep__title {
  font-weight: 600;
  color: var(--pf-color-text-primary);
}

.wb-sb-ep__meta {
  color: var(--pf-color-text-secondary);
  white-space: nowrap;
}

.wb-sb-ep__mise {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--pf-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-sb-ep__actions {
  display: inline-flex;
  gap: var(--pf-space-xs);
}

/* Свёрнутый эпизод — одна строка вместо кадров. */
.wb-sb-fold {
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px dashed var(--pf-color-border-strong);
  border-radius: var(--pf-radius-sm);
  color: var(--pf-color-text-secondary);
  font-size: var(--pf-typography-body-small-size);
  cursor: pointer;
}

/* На контрольном листе шапка занимает весь ряд сетки. */
.wb-sb-sheet__ep {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

/* Черта эпизода в профиле планов (эскиз: «черта — эпизод»). */
.wb-scimg-profile__ep {
  display: block;
  align-self: stretch;
  width: 1px;
  margin: 0 3px;
  background: var(--pf-color-border-strong);
  opacity: 0.8;
}

/* Редактор эпизода — те же строки и чипы, что у редактора кадра. */
.wb-ee .wb-fe__field textarea.pf-input {
  width: 100%;
}

/* Камеры и фоны эпизода (Л2 BETA-D-186/187): список камер под мизансценой.
   Состояние фона — формой бейджа (пунктир нет · рамка есть · жирная проверен ·
   пунктир с чертой предупреждения «проверить»), не заливкой акцента. */
.wb-plates__list {
  list-style: none;
  margin: var(--pf-space-xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-xs);
}

.wb-plate {
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  padding: var(--pf-space-xs) var(--pf-space-sm);
}

.wb-plate[data-state='check'] {
  border-left: 3px solid var(--pf-color-text-warning);
}

.wb-plate__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  align-items: center;
}

.wb-plate__key {
  font-family: var(--pf-font-mono, ui-monospace, monospace);
  font-weight: 600;
}

.wb-plate__title {
  font-weight: 600;
}

.wb-plate__camera,
.wb-plate__anchors {
  margin: 2px 0 0;
}

.wb-plate-badge--check {
  border-style: dashed;
  color: var(--pf-color-text-warning);
  border-color: var(--pf-color-text-warning);
}

.wb-sb-ep__cams {
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-secondary);
}

/* Фоны камер в панели помещения (space-passport.js): миниатюры с вердиктом. */
.wb-space-plates {
  list-style: none;
  margin: var(--pf-space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-sm);
}

.wb-space-plate {
  display: grid;
  gap: 2px;
  width: 160px;
}

.wb-space-plate__img {
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
  border: 1px solid var(--pf-color-border-subtle);
}

.wb-space-plate__none {
  width: 160px;
  height: 100px;
  border-radius: var(--pf-radius-sm);
  border: 1px dashed var(--pf-color-border-strong);
}

.wb-space-plate__title {
  font-size: var(--pf-typography-caption-size);
}

/* Метка «брак» ячейки листа (В2 плана брака): низ слева, над полоской
   крупности; подпись роли кадра в такой ячейке поднимается над меткой. */
.wb-sb-cell .wb-flaw-badge {
  left: 4px;
  bottom: 8px;
}

.wb-sb-cell:has(.wb-flaw-badge) .wb-sb-cell__role {
  bottom: 28px;
}