/* ═══════════════════════════════════════
   SPRITE PACKS — the generator surfaces (Generate, Slicer, Directions).
   The Generate step, the step column, Next and the Calibrate wrapper are
   shared with Icon packs and live in workbench-pages.css.
   Page-only rules: the shared vocabulary lives in workbench-pages.css.
   ═══════════════════════════════════════ */

/* ── Slicer: the turnaround sheet and the eight references ── */
.wbsp-tools {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.wbsp-sheet {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* The sheet is transparent: the checkerboard is how a bad cut shows up. */
  background: repeating-conic-gradient(
      var(--bg-hover) 0 25%,
      var(--bg-tertiary) 0 50%
    )
    0 0 / 20px 20px;
}

.wbsp-sheet img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
}

.wbsp-sheet.cutting {
  cursor: crosshair;
  touch-action: none;
}

.wbsp-box {
  position: absolute;
  border: 2px solid var(--amber);
  border-radius: 4px;
  background: var(--amber-dim);
  pointer-events: none;
}

.wbsp-refs-card {
  margin-top: 16px;
}

.wbsp-refs-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
}

.wbsp-refs {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  gap: 8px;
}

.wbsp-ref {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
}

.wbsp-ref img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wbsp-ref.empty {
  border-style: dashed;
}

.wbsp-ref.front {
  background: var(--bg-hover);
  cursor: default;
}

.wbsp-ref.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.wbsp-ref-l {
  position: absolute;
  top: 4px;
  left: 6px;
  color: var(--text-secondary);
  font: 600 10px var(--font-mono);
}

.wbsp-reftools {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-width: 260px;
}

.wbsp-grp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wbsp-grp h3 {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* ── Directions: the animations, their eight sheets, and the clean-up brush ── */
.wbsp-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.wbsp-acts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wbsp-act {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 13px var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.wbsp-act:hover {
  background: var(--bg-hover);
}

.wbsp-act.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.wbsp-act .wb-rev {
  margin-left: auto;
}

.wbsp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* The step's three columns — the eight facings, the picture to clean, the
   animation — as ONE grid, so their headings share a line and the pictures
   start together. The clean-up block keeps its own element (a repaint replaces
   it whole) and passes its children through with display: contents. */
.wbsp-dirs-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: start;
  gap: 8px 20px;
}

/* Smaller cells than the Slicer's: three columns and the side cards share this
   row, and at 96px the last one fell off the end and the step scrolled
   sideways. The facings are picked by their label as much as their art. */
.wbsp-dirs-row .wbsp-refs {
  grid-template-columns: repeat(3, 76px);
  gap: 6px;
}

.wbsp-clean {
  display: contents;
}

.wbsp-c1 {
  grid-column: 1;
}

.wbsp-c2 {
  grid-column: 2;
}

.wbsp-c3 {
  grid-column: 3;
}

.wbsp-r1 {
  grid-row: 1;
}

.wbsp-r2 {
  grid-row: 2;
}

/* The picture and the two chips under it are ONE cell, spaced like the player's
   canvas and its controls — so the chips and the play buttons land on the same
   line however tall the row grows. */
.wbsp-pic {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Too narrow for three columns: one column, in reading order. */
@media (max-width: 1400px) {
  .wbsp-dirs-row {
    grid-template-columns: max-content;
  }

  .wbsp-dirs-row > *,
  .wbsp-clean > * {
    grid-column: 1;
    grid-row: auto;
  }
}

.wbsp-ref.busy {
  border-color: var(--accent);
  animation: wbsp-pulse 1.2s ease-in-out infinite;
}

@keyframes wbsp-pulse {
  50% {
    opacity: 0.55;
  }
}

/* The player's canvas is 320 x 440, so the picture beside it is the same box:
   a tall reference and a whole sprite sheet both shrink to fit inside it and
   keep their shape, and the two columns start and end together. */
.wbsp-dirs-row .wb-img {
  width: 320px;
  height: 440px;
  min-height: 0;
  max-width: 100%;
  padding: 6px;
  /* Nothing spills past the frame: a whole sprite sheet is far wider than it
     is tall, and a reference far taller than it is wide. */
  overflow: hidden;
}

.wbsp-dirs-row .wb-img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* How far God Mode has got: one stripe per finished sheet's worth. */
.wbsp-progress {
  margin: 10px 0 0;
}

.wbsp-bar {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-tertiary);
}

.wbsp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}

@media (max-width: 1100px) {
  .wbsp-top {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wbsp-ref.busy {
    animation: none;
  }
}

/* ── The portrait area: a locked-size square dragged over the front ── */
/* Shrink-wraps the picture inside .wb-img, so the portrait square sits
   exactly on the pixels it marks. The picture itself is sized by .wb-img img. */
.wbsp-front {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.wbsp-pbox {
  position: absolute;
  aspect-ratio: 1;
  border: 2px solid var(--amber);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(11, 13, 18, 0.5);
  cursor: grab;
  touch-action: none;
}

.wbsp-pbox:active {
  cursor: grabbing;
}

.wbsp-pbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wbsp-pbox-l {
  position: absolute;
  top: -22px;
  left: -2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--amber);
  font-size: 11px;
  white-space: nowrap;
}

.wbsp-crop {
  position: relative;
  height: 360px;
  max-height: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: repeating-conic-gradient(
      var(--bg-hover) 0 25%,
      var(--bg-tertiary) 0 50%
    )
    0 0 / 16px 16px;
}

.wbsp-crop img {
  position: absolute;
  max-width: none;
  max-height: none;
}

/* The turnaround sheet is judged whole — a scrollbar hides half the figures —
   so it fits the stage instead of overflowing it. */
.wbsp-table.wbsp-fit {
  overflow: hidden;
}

.wbsp-table.wbsp-fit .wbsp-sheet {
  max-width: 100%;
}

/* Capped in the same units the stage is, not in per cent: a percentage
   max-height against an auto-height wrapper never resolves, which left the
   sheet at its natural size and clipped by the stage. */
.wbsp-table.wbsp-fit .wbsp-sheet img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(42vh, 450px);
}

/* And the stage itself gets the room: the sheet holds eight figures. Capped
   so the references card below it is always in view. */
.wbsp-slicer .wbsp-gen {
  height: min(52vh, 560px);
  min-height: 420px;
}

/* The sheet opens the slicer, so it reads as clickable like the pictures do. */
.wbsp-sheet.wbsp-editable:hover {
  border-color: var(--accent);
}

/* The slicer's direction picker, sized like the editor's other controls. */
.mde-dir {
  height: 26px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 12px var(--font-sans);
}

/* The picked reference, big, between the grid and its tools. */
.wbsp-refbig {
  flex: 0 1 320px;
  min-width: 220px;
}

.wbsp-refbig .wb-img {
  height: min(38vh, 360px);
}

.wbsp-refbig .wb-img img {
  max-height: 100%;
}