/* «Быстрый» режим раздела «Иллюстрации» (З-129, эскиз v3). Только токены
   `@pf/ui-tokens`. «Выбрано / сейчас / годен» — подложка выделения и черта
   акцента, не заливка акцента (docs/standards/ui.md §«Золото»). */

.wb-fast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-md);
  flex-wrap: wrap;
}

.wb-fast-lead {
  margin: 0;
}

/* Шаги — столбцом в колонке блоков раздела; содержимое шага — в широкой колонке. */
.wb-fast-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pf-space-sm);
}

.wb-fast-how {
  display: grid;
  gap: var(--pf-space-xs);
}

.wb-fast-how p {
  margin: 0;
}

.wb-fast-step {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-md);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-raised);
  color: var(--pf-color-text-secondary);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

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

.wb-fast-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: var(--pf-radius-pill);
  border: 1px solid var(--pf-color-border-strong);
  font-size: var(--pf-typography-caption-size);
}

.wb-fast-step.is-on .wb-fast-step__dot {
  background: var(--pf-color-surface-accent);
  border-color: var(--pf-color-text-accent);
  color: var(--pf-color-text-inverse);
}

.wb-fast-step.is-done .wb-fast-step__dot {
  border-style: solid;
  border-color: var(--pf-color-text-accent);
}

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

.wb-fast-card,
.wb-fast-gate,
.wb-fast-progress,
.wb-fast-startbar {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-md);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-raised);
}

.wb-fast-gate,
.wb-fast-progress,
.wb-fast-startbar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wb-fast-startbar {
  border-color: var(--pf-color-text-accent);
}

.wb-fast-gate__text,
.wb-fast-progress__text,
.wb-fast-startbar__text {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  flex: 1 1 20rem;
  min-width: 0;
}

.wb-fast-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--pf-space-sm);
}

.wb-fast-choice {
  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-subtle);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
  color: var(--pf-color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wb-fast-choice.is-on {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-text-accent);
  box-shadow: inset 3px 0 0 var(--pf-color-text-accent);
}

.wb-fast-bar {
  height: 6px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-color-surface-canvas);
  overflow: hidden;
}

.wb-fast-bar > span {
  display: block;
  height: 100%;
  background: var(--pf-color-text-accent);
}

.wb-fast-group {
  margin: var(--pf-space-sm) 0 0;
}

/* Ход подготовки: крутилка и тикающее время — живой признак, что работа идёт. */
.wb-fast-progress--prep {
  align-items: flex-start;
}

.wb-fast-spin {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 2px solid var(--pf-color-border-subtle);
  border-top-color: var(--pf-color-text-accent);
  border-radius: 50%;
  animation: wb-fast-spin 0.9s linear infinite;
}

@keyframes wb-fast-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-fast-spin {
    animation-duration: 3s;
  }
}


.wb-fast-clock {
  font-variant-numeric: tabular-nums;
}

.wb-fast-subject {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: var(--pf-space-md);
  padding: var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-raised);
}

.wb-fast-subject.is-good {
  background: var(--pf-color-surface-selected);
  box-shadow: inset 3px 0 0 var(--pf-color-text-accent);
}

.wb-fast-subject__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-sm);
  align-items: flex-start;
}

.wb-fast-subject__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-space-xs);
}

.wb-fast-badge {
  padding: 0 var(--pf-space-sm);
  border: 1px solid var(--pf-color-text-accent);
  border-radius: var(--pf-radius-pill);
  font-size: var(--pf-typography-caption-size);
  color: var(--pf-color-text-accent);
}

.wb-fast-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  width: 9rem;
}

.wb-fast-tile img,
.wb-fast-tile__wait {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface-canvas);
  cursor: zoom-in;
}

.wb-fast-tile__wait {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--pf-color-border-strong);
  color: var(--pf-color-text-secondary);
  font-size: var(--pf-typography-caption-size);
  cursor: default;
}

/* Референс показывается целиком (замечание владельца 20.10: «ростовые референсы искажены» — лист тела
   3:2 с тремя видами резался в плитке 2:3 до половинок соседних фигур). Лист — широкой плиткой. */
.wb-fast-tile--ref img {
  object-fit: contain;
}

.wb-fast-tile--kind-sheet {
  width: 13.5rem;
}

.wb-fast-tile--kind-sheet img,
.wb-fast-tile--kind-sheet .wb-fast-tile__wait {
  aspect-ratio: 3 / 2;
}

.wb-fast-tile.is-failed .wb-fast-tile__wait {
  border-color: var(--pf-color-border-danger);
}

.wb-fast-tile figcaption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-fast-frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--pf-space-md);
}

.wb-fast-tile--frame {
  width: auto;
}

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

.wb-fast-more {
  align-self: center;
}

.wb-fast-empty {
  padding: var(--pf-space-md);
  border: 1px dashed var(--pf-color-border-strong);
  border-radius: var(--pf-radius-sm);
}

@media (max-width: 720px) {
  .wb-fast-subject {
    grid-template-columns: 1fr;
  }
}

/* Сделанное и журнал хода (замечание владельца 19.10); идущие вызовы — в строке состояния стола. */
.wb-fast-journal {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  margin-top: var(--pf-space-sm);
}

.wb-fast-done {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-fast-log summary {
  cursor: pointer;
}

.wb-fast-log__list {
  max-height: 20rem;
  overflow-y: auto;
  margin: var(--pf-space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.wb-fast-log__list li {
  display: flex;
  gap: var(--pf-space-sm);
}

.wb-fast-log__at {
  flex: 0 0 auto;
  color: var(--pf-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.wb-fast-log__stage {
  font-weight: 600;
}