/* Раздел романа «Иллюстрации» (BETA-D-182, BETA-D-183; эскиз
   illustrations-hub-r2): блоки центра, широкая панель содержимого, таблица
   сцен, таблица карточек, кадры сцены. Все цвета — токены
   @pf/ui-tokens (страж css-tokens.test.ts, L-287).

   Золото: «выбрано / сейчас здесь» — подложка выделения
   (--pf-color-surface-selected) с чертой, обычный текст; яркая заливка
   (--pf-color-surface-accent) — только под инверсным текстом (кружок номера
   текущей ступени). CLAUDE.md §«Интерфейс», docs/standards/ui.md. */

/* ---------------------------------------------------------------- центр */

.wb-hub-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  margin-top: var(--pf-space-sm);
}

.wb-hub-block {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  gap: 2px var(--pf-space-sm);
  align-items: start;
  border: 1px solid var(--pf-color-border-subtle);
  border-left: 2px solid transparent;
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-raised);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  cursor: pointer;
  text-align: left;
}

.wb-hub-block:hover {
  background: var(--pf-color-surface-canvas);
}

.wb-hub-block:focus-visible {
  outline: 2px solid var(--pf-color-border-focus);
  outline-offset: 1px;
}

.wb-hub-block--sel,
.wb-hub-block--sel:hover {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-border-focus);
  border-left-color: var(--pf-color-border-focus);
}

.wb-hub-block--lock {
  opacity: 0.7;
}

.wb-hub-block--opt {
  border-style: dashed;
  border-left-style: solid;
}

.wb-hub-block__no {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--pf-color-border-medium);
  background: var(--pf-color-surface-control);
  color: var(--pf-color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pf-typography-caption-size);
  font-weight: 600;
  margin-top: 1px;
}

.wb-hub-block__no--ok {
  background: var(--pf-color-surface-success);
  border-color: var(--pf-color-text-success);
  color: var(--pf-color-text-inverse);
}

.wb-hub-block__no--cur {
  background: var(--pf-color-surface-accent);
  border-color: var(--pf-color-surface-accent);
  color: var(--pf-color-text-inverse);
}

.wb-hub-block__no--warn {
  background: var(--pf-color-surface-warning);
  border-color: var(--pf-color-text-warning);
  color: var(--pf-color-text-inverse);
}

.wb-hub-block__no--lock {
  border-style: dashed;
  color: var(--pf-color-text-muted);
}

.wb-hub-block__no--opt {
  border-style: dotted;
}

.wb-hub-block__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wb-hub-block__title {
  margin: 0;
  font-size: var(--pf-typography-body-size);
  font-weight: 600;
  color: var(--pf-color-text-primary);
  line-height: 1.35;
}

.wb-hub-block__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Узкая колонка: длинная пилюля («устарели: 21 (реестр менялся после
   сборки)») переносится, а не вылезает за блок (живой прогон 210-й). */
.wb-hub-block .wb-hub-pill {
  white-space: normal;
  line-height: 1.35;
}

.wb-hub-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  align-items: center;
  margin-top: 3px;
}

/* Замер подписей 302-й (`help-shots.ts --fit`, окно 1280): в узкой колонке
   длинная подпись («Aus dem Kanon zusammenstellen», «Дорисовать недостающие»)
   вылезала за рамку кнопки — переносим, как в пакетной строке иллюстраций. */
.wb-hub-block__actions .pf-btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.wb-hub-block__why {
  margin: 0;
  color: var(--pf-color-text-warning);
  font-size: var(--pf-typography-caption-size);
}

.wb-hub-block__chev {
  color: var(--pf-color-text-muted);
  font-size: 16px;
  line-height: 1;
  margin-top: 3px;
  grid-column: 3;
  grid-row: 1;
}

.wb-hub-block--sel .wb-hub-block__chev {
  color: var(--pf-color-text-accent);
}

.wb-hub-block__toggle {
  border: 0;
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
}

/* Секция модуля внутри блока (реестр): без своей рамки и заголовка — он
   повторяет заголовок блока. */
.wb-hub-block .wb-set-sec {
  padding-top: 0;
  border-top: 0;
  gap: 3px;
}

.wb-hub-block .wb-set-sec > .wb-set-sec__head {
  display: none;
}

/* Список сцен под блоком «Иллюстрации»: номер, название, принятых кадров. */
.wb-hub-gallery-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--pf-space-xs);
  padding-top: var(--pf-space-xs);
  border-top: 1px solid var(--pf-color-border-subtle);
}

.wb-hub-gallery__none {
  grid-column: 1 / -1;
  margin: var(--pf-space-xs) 0 0;
}

.wb-hub-gallery-item {
  display: flex;
  align-items: center;
  gap: var(--pf-space-xs);
  width: 100%;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-color-text-muted);
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  padding: 3px var(--pf-space-xs) 3px var(--pf-space-sm);
  text-align: left;
  cursor: pointer;
}

.wb-hub-gallery-item:hover {
  background: var(--pf-color-surface-canvas);
}

.wb-hub-gallery-item--has {
  color: var(--pf-color-text-primary);
}

.wb-hub-gallery-item--on,
.wb-hub-gallery-item--on:hover {
  background: var(--pf-color-surface-selected);
  border-left-color: var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
  font-weight: 600;
}

.wb-hub-gallery-item__no {
  width: 22px;
  flex: none;
  text-align: right;
  color: var(--pf-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wb-hub-gallery-item__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-hub-gallery-item__count {
  flex: none;
  color: var(--pf-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wb-hub-gallery-item--has .wb-hub-gallery-item__count {
  color: var(--pf-color-text-secondary);
}

.wb-hub-gallery-item--on .wb-hub-gallery-item__count {
  color: var(--pf-color-text-accent);
}

/* Список сцен под блоком «Сцены» (эскиз illustration-ladder-r3, BETA-D-190):
   номер, название, пять точек шагов; открытая сцена — подложка выделения и
   черта акцента, не заливка золотом (docs/standards/ui.md §«Золото»). */
.wb-hub-scene-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--pf-space-xs);
  padding-top: var(--pf-space-xs);
  border-top: 1px solid var(--pf-color-border-subtle);
}

.wb-hub-scene-item {
  display: flex;
  align-items: center;
  gap: var(--pf-space-xs);
  width: 100%;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-color-text-muted);
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  padding: 3px var(--pf-space-xs) 3px var(--pf-space-sm);
  text-align: left;
  cursor: pointer;
}

.wb-hub-scene-item:hover {
  background: var(--pf-color-surface-canvas);
}

.wb-hub-scene-item--has {
  color: var(--pf-color-text-primary);
}

.wb-hub-scene-item--on,
.wb-hub-scene-item--on:hover {
  background: var(--pf-color-surface-selected);
  border-left-color: var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
  font-weight: 600;
}

.wb-hub-scene-item__no {
  width: 22px;
  flex: none;
  text-align: right;
  color: var(--pf-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wb-hub-scene-item__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-hub-scene-item__steps {
  flex: none;
  margin-left: auto;
  letter-spacing: 0.08em;
  color: var(--pf-color-text-muted);
  font-weight: 400;
}

.wb-hub-scene-item--has .wb-hub-scene-item__steps {
  color: var(--pf-color-text-secondary);
}

.wb-hub-scene-item--on .wb-hub-scene-item__steps {
  color: var(--pf-color-text-accent);
}

.wb-hub-scene-more {
  align-self: flex-start;
  padding: 3px var(--pf-space-sm);
}

/* «Что дальше» — под пояснением, до блоков. */
.wb-hub-next {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border-left: 2px solid var(--pf-color-border-focus);
  background: var(--pf-color-surface-selected);
  border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0;
  margin-top: var(--pf-space-sm);
}

.wb-hub-next .pf-caption {
  color: var(--pf-color-text-primary);
}

/* ---------------------------------------------------------------- пилюли */

.wb-hub-pill {
  display: inline-block;
  border-radius: var(--pf-radius-pill);
  padding: 0 8px;
  font-size: var(--pf-typography-caption-size);
  font-weight: 400;
  border: 1px solid var(--pf-color-border-medium);
  color: var(--pf-color-text-secondary);
  white-space: nowrap;
}

.wb-hub-pill--ok {
  border-color: var(--pf-color-text-success);
  color: var(--pf-color-text-success);
  background: var(--pf-color-surface-success-soft);
}

.wb-hub-pill--warn {
  border-color: var(--pf-color-text-warning);
  color: var(--pf-color-text-warning);
  background: var(--pf-color-surface-warning-soft);
}

.wb-hub-pill--lock {
  border-style: dashed;
  color: var(--pf-color-text-muted);
}

.wb-hub-pill--dim {
  color: var(--pf-color-text-muted);
}

.wb-hub-pill--acc {
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-accent);
  background: var(--pf-color-surface-selected);
}

/* ---------------------------------------------------------------- панель */

.wb-hub-panel__head {
  flex-wrap: wrap;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.wb-hub-panel__crumb {
  flex: none;
}

.wb-hub-body {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
}

.wb-hub-panel__lead {
  margin: 0;
}

.wb-hub-settings {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
  max-width: 900px;
}

/* Таблица сцен: четыре шага кружками, кадры числом, «открыть →». */
.wb-hub-scenes__wrap {
  overflow-x: auto;
}

.wb-hub-scenes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pf-typography-caption-size);
}

.wb-hub-scenes th,
.wb-hub-cards th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pf-color-text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--pf-color-border-medium);
  white-space: nowrap;
}

.wb-hub-scenes td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--pf-color-border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

.wb-hub-scenes td.wb-hub-scene__name {
  white-space: normal;
  color: var(--pf-color-text-primary);
}

.wb-hub-scene--locked td {
  color: var(--pf-color-text-muted);
}

.wb-hub-scene__frames {
  font-variant-numeric: tabular-nums;
}

.wb-hub-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--pf-color-border-medium);
  color: var(--pf-color-text-muted);
  font-size: 11px;
}

.wb-hub-step--ok {
  background: var(--pf-color-surface-success);
  border-color: var(--pf-color-text-success);
  color: var(--pf-color-text-inverse);
}

.wb-hub-step--warn {
  background: var(--pf-color-surface-warning-soft);
  border-color: var(--pf-color-text-warning);
  color: var(--pf-color-text-warning);
}

.wb-hub-step--lock {
  border-style: dashed;
}

/* Оси лестницы в таблице сцен (U-02): сделано без утверждения · утверждение
   устарело · идёт · ждёт вас · не требуется. «Ждёт вас» — подложка выделения
   и черта акцента, не заливка (docs/standards/ui.md §«Золото»). */
.wb-hub-step--done {
  border-color: var(--pf-color-text-success);
  color: var(--pf-color-text-success);
}

.wb-hub-step--stale {
  background: var(--pf-color-surface-warning-soft);
  border-color: var(--pf-color-text-warning);
  color: var(--pf-color-text-warning);
  font-weight: 700;
}

.wb-hub-step--run {
  border-style: dotted;
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-accent);
}

.wb-hub-step--wait {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-primary);
  box-shadow: inset 0 -2px 0 var(--pf-color-text-accent);
}

.wb-hub-step--skip {
  border-style: dotted;
  color: var(--pf-color-text-muted);
}

.wb-hub-scene__frames .wb-hub-step {
  margin-left: 4px;
  width: 18px;
  height: 18px;
}

/* Две кнопки в строке сцены: «Пульт →» и «открыть →». */
.wb-hub-scene__open .pf-btn + .pf-btn {
  margin-left: var(--pf-space-xs);
}

.wb-hub-auto {
  border-top: 1px solid var(--pf-color-border-subtle);
  padding-top: var(--pf-space-sm);
}

/* Полка принятых кадров сцены под пультом: кадры не пропадают, пока идёт прогон. */
.wb-hub-console-shots {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  border-top: 1px solid var(--pf-color-border-subtle);
  padding-top: var(--pf-space-sm);
}

/* Таблица карточек ступеней «Образы» и «Референсы». */
.wb-hub-cards__wrap {
  overflow-x: auto;
  border-top: 1px solid var(--pf-color-border-subtle);
  padding-top: var(--pf-space-sm);
}

.wb-hub-cards {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  font-size: var(--pf-typography-caption-size);
}

.wb-hub-cards td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--pf-color-border-subtle);
  vertical-align: middle;
}

.wb-hub-card__name {
  color: var(--pf-color-text-primary);
}

.wb-hub-card__kind {
  margin-left: var(--pf-space-xs);
}

/* Кадры сцены: три масштаба сетки, рамка под кадр (пропорцию несёт файл). */
.wb-hub-size {
  display: inline-flex;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  overflow: hidden;
}

.wb-hub-size__btn {
  border: 0;
  border-left: 1px solid var(--pf-color-border-medium);
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  padding: 2px 10px;
  cursor: pointer;
}

.wb-hub-size__btn:first-child {
  border-left: 0;
}

.wb-hub-size__btn--on {
  background: var(--pf-color-surface-selected);
  color: var(--pf-color-text-primary);
  font-weight: 600;
}

.wb-hub-shots.wb-images-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pf-space-sm);
}

.wb-hub-shots--s.wb-images-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.wb-hub-shots--l.wb-images-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.wb-hub-shots .wb-images-card__frame {
  aspect-ratio: auto;
}

.wb-hub-gallery {
  padding-top: 0;
}

/* Предупреждение о раннем иллюстрировании (09.09 п. 4, эскиз r3 карта A):
   рекомендация с замком до финализации романа; согласие снимает замок. */
.wb-hub-early {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-sm);
  margin-top: var(--pf-space-sm);
  border: 1px solid var(--pf-color-text-warning);
  border-left-width: 3px;
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-warning-soft);
}

.wb-hub-early__title {
  margin: 0;
  font-weight: 600;
}

.wb-hub-early__lead {
  margin: 0;
}

.wb-hub-early__list {
  margin: 0;
  padding-left: var(--pf-space-lg);
  color: var(--pf-color-text-secondary);
}

.wb-hub-early__list li {
  margin: 2px 0;
}

/* После согласия — короткая строка вместо предупреждения. */
.wb-hub-early--on {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-sm);
  border-style: dashed;
  border-left-width: 1px;
  border-color: var(--pf-color-border-medium);
  background: transparent;
}

/* Карта запуска полного автомата (09.09 п. 5, эскиз r3 карта B): три
   колонки плана и дисклеймер о качестве результата. */
.wb-full-plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pf-space-sm);
  margin-bottom: var(--pf-space-sm);
}

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

.wb-full-plan__title {
  margin: 0 0 4px;
  font-size: var(--pf-typography-caption-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-color-text-secondary);
}

.wb-full-plan__col--ready .wb-full-plan__title { color: var(--pf-color-text-success); }
.wb-full-plan__col--todo .wb-full-plan__title { color: var(--pf-color-text-accent); }
.wb-full-plan__col--ask .wb-full-plan__title { color: var(--pf-color-text-warning); }

.wb-full-plan ul {
  margin: 0;
  padding-left: var(--pf-space-md);
}

.wb-full-plan li {
  margin: 2px 0;
}

/* Выбор в карте запуска: подпись — у кружка, пояснение — своей строкой под
   подписью, не впритык к ней (приём З-051, 13.10: «(≈10 на сцену)опорные кадры»
   на 1400 px). Поля диапазона — узкие, не на всю строку. */
.wb-images-launch__group {
  display: grid;
  gap: var(--pf-space-xs);
}

.wb-images-launch__opt {
  display: grid;
  gap: 2px;
}

.wb-images-launch__opt > .pf-caption {
  padding-left: calc(1em + var(--pf-space-sm));
  color: var(--pf-color-text-secondary);
}

.wb-images-launch__opt-main {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-xs);
}

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

.wb-images-launch__num {
  width: 5.5em;
}

.wb-full-disclaimer {
  border: 1px solid var(--pf-color-border-medium);
  border-left: 3px solid var(--pf-color-text-info);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  margin: 0 0 var(--pf-space-sm);
}

/* Места на запуск не хватит (BETA-D-236 п. 9А): та же форма, что у дисклеймера, черта — цветом предупреждения. */
.wb-full-space {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-medium);
  border-left: 3px solid var(--pf-color-text-warning);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  margin: 0 0 var(--pf-space-sm);
}
.wb-full-space__text {
  margin: 0;
  flex: 1;
}

/* BETA-D-192: шаг сделан, но выше по лестнице есть нерешённое — точка-пометка, не замок. */
.wb-hub-step--open {
  position: relative;
}
.wb-hub-step--open::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pf-color-text-warning);
  border: 1px solid var(--pf-color-surface-raised);
}

/* Вердикт сцены «не пройдена» (BETA-D-192). */
.wb-hub-pill--err {
  border-color: var(--pf-color-text-danger);
  color: var(--pf-color-text-danger);
  background: var(--pf-color-surface-danger-soft, transparent);
}
.wb-hub-scene__verdict { white-space: nowrap; }

/* Кнопка «Вернуть предупреждение» сжималась уже своей подписи на всех пяти
   языках (замер 302-й): строка переносится, кнопка не сжимается. */
.wb-hub-early--on .pf-btn {
  flex-shrink: 0;
}

/* Оригиналы романа в архиве (BETA-D-238): плашка над ступенями. */
.wb-hub-archived {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 1px dashed var(--pf-color-border-strong);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
}

/* Брак романа (В2 плана брака, эскиз image-defects-r1, экран В): плашка над
   блоками — счёт по типам, «Показать брак», «Отсмотреть роман» и счёт
   просмотренных. Отметки есть — рамка и подложка «опасности» (брак — не
   выбор, не золото); отметок нет — спокойная рамка. «брак N» у сцены —
   красным числом в списках и таблице сцен. */
.wb-hub-flaw {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  margin-top: var(--pf-space-sm);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
}

.wb-hub-flaw--on {
  border-color: var(--pf-color-border-danger);
  background: var(--pf-color-surface-danger-soft);
}

.wb-hub-flaw__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.wb-hub-flaw__total {
  color: var(--pf-color-text-danger);
}

.wb-hub-flaw--on .wb-hub-flaw__kinds {
  color: var(--pf-color-text-primary);
}

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

.wb-hub-flaw__actions .pf-btn {
  flex-shrink: 0;
}

.wb-hub-flaw__seen {
  white-space: nowrap;
}

.wb-hub-flaw-count {
  flex: none;
  color: var(--pf-color-text-danger);
  font-size: var(--pf-typography-caption-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wb-hub-scene__frames .wb-hub-flaw-count {
  margin-left: var(--pf-space-xs);
}

/* «Исправить брак» и проверка парами (В3 плана брака, `flaw-fix.js`; эскиз
   image-defects-r1, экраны В и Г). Выбранный вариант и опция окна —
   подложка выделения с чертой, обычный текст; заливка акцента только у
   основной кнопки (CLAUDE.md §«Золото и текст»). */
.wb-hub-flaw--scene {
  margin: 0 0 var(--pf-space-sm);
}

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

.wb-flaw-fix__dialog {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-strong);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-raised);
}

.wb-flaw-fix__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
}

.wb-flaw-fix__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-xs);
  padding: 2px var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  color: var(--pf-color-text-primary);
  font-size: var(--pf-typography-caption-size);
  cursor: pointer;
}

.wb-flaw-fix__opt input {
  margin: 0;
}

.wb-flaw-fix__opt.is-on {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-border-focus);
  box-shadow: inset 0 -2px 0 var(--pf-color-border-focus);
}

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

/* «Исправить, когда закончится»: пояснение в окне запуска и строка ожидания.
   Ожидание отличается от идущего хода формой — пунктирная рамка без полосы. */
.wb-flaw-fix__when {
  margin: 0;
  padding: 2px var(--pf-space-sm);
  border-left: 2px solid var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
  font-size: var(--pf-typography-caption-size);
}

.wb-flaw-fix__queued {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px dashed var(--pf-color-border-strong);
  border-radius: var(--pf-radius-md);
}

.wb-flaw-fix__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.wb-flaw-fix__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--pf-color-surface-sunken, var(--pf-color-border-subtle));
  overflow: hidden;
}

.wb-flaw-fix__bar i {
  display: block;
  height: 100%;
  background: var(--pf-color-border-focus);
}

.wb-flaw-review {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
}

.wb-flaw-review__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pf-space-xs) var(--pf-space-sm);
}

.wb-flaw-review__pairs {
  display: grid;
  gap: var(--pf-space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wb-flaw-review__pairs--n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wb-flaw-review__pane {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  overflow: hidden;
  background: var(--pf-color-surface-raised);
}

.wb-flaw-review__pane img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  cursor: zoom-in;
}

.wb-flaw-review__pane.is-picked {
  border-color: var(--pf-color-border-focus);
}

.wb-flaw-review__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-xs);
  padding: 4px var(--pf-space-sm);
  color: var(--pf-color-text-secondary);
  font-size: var(--pf-typography-caption-size);
}

/* Типы брака у «Было» — строкой в подписи (не угловая метка миниатюр). */
.wb-flaw-review__marked {
  color: var(--pf-color-text-danger);
  font-weight: 600;
}

.wb-flaw-review__pane.is-picked .wb-flaw-review__cap {
  background: var(--pf-color-surface-selected);
  box-shadow: inset 0 -2px 0 var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
}

.wb-flaw-review__why {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
}

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

.wb-flaw-review__again .wb-flaw__note-input {
  flex: 1 1 18rem;
}

.wb-flaw-review__sum {
  font-weight: 600;
}

@media (max-width: 900px) {
  .wb-flaw-review__pairs,
  .wb-flaw-review__pairs--n3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Строки инструментов брака в плашке (BETA-D-274, `image-book.js`): выбор
   «Все / Кроме ключевых», «Убрано из книги: N», «Удачных: N». */
.wb-book-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-sunken);
}

.wb-book-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-sm);
  padding-top: var(--pf-space-xs);
  border-top: 1px dashed var(--pf-color-border-subtle);
}

.wb-book-line__pill {
  padding: 0 var(--pf-space-sm);
  border-radius: var(--pf-radius-pill, 999px);
  border: 1px solid var(--pf-color-border-medium);
  font-size: var(--pf-typography-body-small-size);
  line-height: 1.6;
  color: var(--pf-color-text-primary);
}

.wb-book-line__pill--hidden {
  border-style: dashed;
}

.wb-book-line__pill--good {
  border-color: var(--pf-color-text-success);
  background: var(--pf-color-surface-success-soft);
}

/* ------------------------------------------- панель автомата (вариант A)
   Слово владельца 12.10 («A — панель над шагами»), эскиз
   sketches/illustrations-autopilot-entry-r1.html: другая сущность, не
   ступень — тёплая подложка выделения, рамка акцента, круглый значок;
   «сейчас здесь» в маршруте — подложка выделения и черта, не заливка
   акцента (золото — только под инверсным текстом). */

.wb-auto {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  margin-top: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-sm) var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-focus);
  border-radius: var(--pf-radius-md);
  background: linear-gradient(180deg, var(--pf-color-surface-selected) 0%, var(--pf-color-surface-raised) 100%);
}

.wb-auto__head {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
}

.wb-auto__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pf-color-surface-accent);
  color: var(--pf-color-text-inverse);
  font-size: 14px;
}

.wb-auto__title {
  margin: 0;
  font-family: var(--pf-typography-heading2-family);
  font-size: var(--pf-typography-body-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--pf-color-text-primary);
}

.wb-auto__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: var(--pf-typography-caption-size);
}

.wb-auto__sep {
  font-style: normal;
  color: var(--pf-color-text-muted);
}

.wb-auto__step {
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  padding: 1px 7px;
  color: var(--pf-color-text-secondary);
  background: var(--pf-color-surface-raised);
  white-space: nowrap;
}

.wb-auto__step--ok,
.wb-auto__step--done {
  border-color: var(--pf-color-text-success);
  color: var(--pf-color-text-success);
  background: var(--pf-color-surface-success-soft);
}

.wb-auto__step--todo {
  border-style: dashed;
  color: var(--pf-color-text-primary);
}

.wb-auto__step--now {
  border-color: var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
  background: var(--pf-color-surface-selected);
  box-shadow: inset 0 -2px 0 var(--pf-color-border-focus);
}

.wb-auto__step--skip {
  border-style: dotted;
  color: var(--pf-color-text-muted);
}

.wb-auto__start,
.wb-auto__now {
  margin: 0;
  font-size: var(--pf-typography-body-small-size);
  color: var(--pf-color-text-primary);
}

.wb-auto__start b {
  color: var(--pf-color-text-accent);
  font-weight: 600;
}

.wb-auto__now b {
  font-weight: 600;
}

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

.wb-auto__bar {
  height: 6px;
  border-radius: 4px;
  border: 1px solid var(--pf-color-border-subtle);
  background: var(--pf-color-surface-sunken);
  overflow: hidden;
}

.wb-auto__bar > i {
  display: block;
  height: 100%;
  background: var(--pf-color-border-focus);
}

.wb-auto__tip {
  margin: var(--pf-space-xs) 0 0;
  padding-top: var(--pf-space-xs);
  border-top: 1px dashed var(--pf-color-border-medium);
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-secondary);
}

/* Черта «или вручную, по ступеням» между панелью автомата и лестницей. */
.wb-hub-divider {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  margin-top: var(--pf-space-md);
  font-size: var(--pf-typography-caption-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pf-color-text-muted);
}

.wb-hub-divider::before,
.wb-hub-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--pf-color-border-medium);
}