/* Пульт лестницы иллюстрации сцены (П5 BETA-D-188, эскиз illustration-ladder-r3
   экран 1) — содержимое блока «Сцены» в широкой панели раздела «Иллюстрации».
   Золото: «сейчас здесь» — surface-selected + черта, не заливка акцента
   (docs/standards/ui.md §«Золото — только под инверсным текстом»). */

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

.wb-ladder__ready {
  margin: 0;
}

.wb-ladder__ready--locked {
  color: var(--pf-color-text-warning);
}

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

.wb-ladder__modes {
  display: inline-flex;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-sm);
  overflow: hidden;
}

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

.wb-ladder__mode + .wb-ladder__mode {
  border-left: 1px solid var(--pf-color-border-medium);
}

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

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

.wb-ladder__auto-note {
  flex-basis: 100%;
  margin: 0;
}

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

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

.wb-ladder__radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

.wb-ladder__phase {
  font-weight: 500;
}

.wb-ladder__phase--waiting,
.wb-ladder__phase--running { color: var(--pf-color-text-accent); }
.wb-ladder__phase--error { color: var(--pf-color-text-danger); }
.wb-ladder__phase--paused,
.wb-ladder__phase--review { color: var(--pf-color-text-warning); }
.wb-ladder__phase--done { color: var(--pf-color-text-success); }

/* Шкала пяти шагов. */
.wb-ladder__scale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pf-space-xs);
}

.wb-ladder__stepbtn {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  background: transparent;
  color: var(--pf-color-text-primary);
  font: inherit;
  cursor: pointer;
}

.wb-ladder__stepitem--current .wb-ladder__stepbtn {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-text-accent);
  box-shadow: inset 0 -2px 0 var(--pf-color-text-accent);
}

.wb-ladder__stepno {
  color: var(--pf-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wb-ladder__steptitle {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-ladder__stepsub {
  grid-column: 1 / -1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-ladder__dot {
  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: 12px;
}

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

.wb-ladder__dot--done {
  border-color: var(--pf-color-text-success);
  color: var(--pf-color-text-success);
}

.wb-ladder__dot--wait {
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-accent);
  border-width: 2px;
}

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

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

.wb-ladder__dot--fail {
  border-color: var(--pf-color-text-danger);
  color: var(--pf-color-text-danger);
}

.wb-ladder__dot--lock {
  border-style: dashed;
}

.wb-ladder__dot--none {
  border-color: transparent;
}

/* «Сейчас» и живые вызовы. */
.wb-ladder__now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pf-space-sm);
}

.wb-ladder__calls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-sm);
}

/* Содержимое шага. */
.wb-ladder__body-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pf-space-sm);
}

.wb-ladder__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pf-space-xs);
}

.wb-ladder__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--pf-space-xs);
  padding: 4px;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
}

.wb-ladder__item--fail { border-color: var(--pf-color-text-danger); }
.wb-ladder__item--run { border-style: dotted; border-color: var(--pf-color-text-accent); }

.wb-ladder__thumb {
  width: 64px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-sunken);
}

.wb-ladder__thumb--empty {
  display: block;
}

/* Готов, а превью нет: подписанная заглушка вместо пустого поля (F1 09.09). */
.wb-ladder__thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  font-size: var(--pf-typography-caption-size);
  line-height: 1.2;
  text-align: center;
  color: var(--pf-color-text-secondary);
  border: 1px dashed var(--pf-color-border-medium);
}

/* Крупные превью и сравнение (П7, р2 §9) */
.wb-ladder__tools {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  margin-bottom: var(--pf-space-xs);
}

.wb-ladder__sizes {
  display: inline-flex;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-pill);
  overflow: hidden;
}

.wb-ladder__size {
  border: 0;
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: var(--pf-typography-caption-size);
  padding: 2px var(--pf-space-sm);
  cursor: pointer;
}

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

.wb-ladder__items--l {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.wb-ladder__item--l {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.wb-ladder__thumb--l {
  width: 100%;
  height: auto;
  max-height: 320px;
  aspect-ratio: 4 / 3;
}

.wb-ladder__item--cmp {
  box-shadow: inset 0 0 0 2px var(--pf-color-text-accent);
}

.wb-ladder__cmp {
  align-self: flex-start;
  margin-top: 2px;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-pill);
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: 11px;
  padding: 1px var(--pf-space-sm);
  cursor: pointer;
}

.wb-ladder__cmp--on {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-primary);
}

.wb-ladder__compare {
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-sm);
  margin-bottom: var(--pf-space-sm);
  background: var(--pf-color-surface-sunken);
}

.wb-ladder__compare-head {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  margin-bottom: var(--pf-space-xs);
}

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

.wb-ladder__compare-item {
  margin: 0;
  min-width: 0;
}

.wb-ladder__compare-img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
}

.wb-ladder__item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wb-ladder__item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-ladder__item-error {
  color: var(--pf-color-text-danger);
}

.wb-ladder__pill {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--pf-color-border-medium);
  color: var(--pf-color-text-secondary);
  white-space: nowrap;
}

.wb-ladder__pill--done { border-color: var(--pf-color-text-success); color: var(--pf-color-text-success); }
.wb-ladder__pill--fail { border-color: var(--pf-color-text-danger); color: var(--pf-color-text-danger); }
.wb-ladder__pill--warn { border-color: var(--pf-color-text-warning); color: var(--pf-color-text-warning); }
.wb-ladder__pill--run { border-style: dotted; border-color: var(--pf-color-text-accent); color: var(--pf-color-text-accent); }

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

.wb-ladder__note {
  margin: 0 0 var(--pf-space-xs);
}

/* Запись вызова модели в общей ленте автоматов (auto-journal.js, П6) — тише шага. */
.wb-autolog__entry--call .wb-autolog__main b {
  font-weight: 400;
  color: var(--pf-color-text-secondary);
}

/* Строка сцены в таблице раздела ведёт в пульт: название — кнопка. */
.wb-hub-scene__link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--pf-color-text-accent);
  cursor: pointer;
  text-align: left;
}

.wb-hub-scene__link:hover {
  text-decoration: underline;
}

/* Узкая форма (П5б): верх колонки «Изображения · Сцена N» — шкала в два
   ряда, пункты в один столбец, без горизонтального скролла. */
.wb-ladder--narrow {
  padding-bottom: var(--pf-space-sm);
  border-bottom: 1px solid var(--pf-color-border-subtle);
}

.wb-ladder__narrow-head {
  display: flex;
  align-items: baseline;
  gap: var(--pf-space-sm);
}

.wb-ladder__open {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--pf-color-text-accent);
  cursor: pointer;
  white-space: nowrap;
}

.wb-ladder__open:hover {
  text-decoration: underline;
}

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

.wb-ladder--narrow .wb-ladder__scale {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wb-ladder--narrow .wb-ladder__stepbtn {
  padding: 4px 6px;
  column-gap: 4px;
}

.wb-ladder--narrow .wb-ladder__stepsub {
  display: none;
}

.wb-ladder--narrow .wb-ladder__items {
  grid-template-columns: minmax(0, 1fr);
}

/* На широком экране названия шагов не режутся — переносятся. */
.wb-ladder__steptitle {
  white-space: normal;
}

/* «Открыть кадр» и варианты пункта (П7, U-01): остальные картинки пункта рядом, каждая кладётся в сравнение. */
.wb-ladder__open-frame {
  align-self: flex-start;
  margin-top: 2px;
  border: 1px solid var(--pf-color-border-medium);
  border-radius: var(--pf-radius-pill);
  background: transparent;
  color: var(--pf-color-text-secondary);
  font: inherit;
  font-size: 11px;
  padding: 1px var(--pf-space-sm);
  cursor: pointer;
}

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

.wb-ladder__variant {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.wb-ladder__variant--cmp {
  border-color: var(--pf-color-text-accent);
}

/* Значок ⤢ у варианта пункта (В1 плана брака): вариант мал (48×36), значок
   компактнее общего, чтобы не закрывать картинку наполовину. */
.wb-ladder__variant .pf-zoom {
  top: 1px;
  right: 1px;
  width: 18px;
  height: 18px;
  font-size: 12px;
}

.wb-ladder__variant-img {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
}

/* Содержимое шага из материалов сцены (ladder-step-content.js, П7 U-01):
   под пунктами прогона — лист, луки и виды, эпизоды и кадры, фоны, картинки. */
.wb-ladder-content {
  border-top: 1px solid var(--pf-color-border-subtle);
  margin-top: var(--pf-space-sm);
  padding-top: var(--pf-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
}

.wb-ladder-content__lead {
  margin: 0;
}

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

.wb-ladder-content__h {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-color-text-secondary);
}

.wb-ladder-content__unit {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wb-ladder-content__unit-head {
  display: flex;
  align-items: center;
  gap: var(--pf-space-xs);
}

.wb-ladder-content__states,
.wb-ladder-content__frames {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pf-space-xs);
}

.wb-ladder-content__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-xs);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
}

.wb-ladder-content__episode {
  grid-template-columns: minmax(0, 1fr);
}

.wb-ladder-content__thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
}

.wb-ladder-content__thumb--empty {
  display: inline-block;
  border: 1px dashed var(--pf-color-border-medium);
}

.wb-ladder-content__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wb-ladder-content__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-ladder-content__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.wb-ladder-content__list {
  margin: 0;
}

/* Действия у пункта шага (п. 2 записки 08.09): компактный ряд под
   названием и поле замечания рядом, без окна. */
.wb-ladder__item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.wb-ladder__item-buttons {
  gap: 4px var(--pf-space-xs);
}

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

.wb-ladder__remark-input {
  flex: 1 1 220px;
  min-width: 160px;
}

/* Лента готовых картинок шага в узкой форме (п. 11): миниатюры в ряд,
   щелчок открывает картинку крупно. */
.wb-ladder__strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--pf-space-xs);
}

.wb-ladder__strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wb-ladder__strip-btn {
  padding: 0;
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
  cursor: pointer;
  line-height: 0;
}

.wb-ladder__strip-btn:hover {
  border-color: var(--pf-color-text-accent);
}

.wb-ladder__strip-img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
  display: block;
}
.wb-ladder__phase--partial { color: var(--pf-color-text-warning); }