/*
 * The pass-templates card's preview (zones slice D1): the iframe renders
 * the real print document (mm-sized), the box CSS-transform zooms it —
 * the zoom never touches the document itself, so what prints is exactly
 * what previews. The viewport clips the scaled overflow.
 */
.pass-preview-viewport {
  overflow: auto;
  max-height: 420px;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-neutral-fill-quiet);
}

.pass-preview-box {
  position: relative;
  transform-origin: top left;
  width: max-content;

  /* The one place the preview viewport's own width is stated — the slot
     overlay centres itself against it, mirroring the print document's
     `margin: 0 auto` sheet. */
  --pass-preview-frame-width: 230mm;
}

.pass-preview-frame {
  display: block;
  border: none;
  background: #fff;
  width: var(--pass-preview-frame-width);
  height: 320mm;
}

/*
 * The artwork template's position picker (slice D2): draggable boxes laid
 * over the preview iframe in the SAME mm coordinate space, inside the SAME
 * zoom transform — so a box sits exactly where its component prints. The
 * mm number fields remain the source of truth; these only echo and write
 * them (see pass_config_controller.js).
 */
.pass-preview-overlay {
  position: absolute;
  top: 0;
  left: calc((var(--pass-preview-frame-width) - var(--pass-width, 0mm)) / 2);
  width: var(--pass-width, 0mm);
  height: var(--pass-height, 0mm);
  pointer-events: none;
}

.pass-preview-slot {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  border: 1px dashed var(--wa-color-brand-border-loud);
  background: color-mix(in oklab, var(--wa-color-brand-fill-loud) 12%, transparent);
  cursor: move;
  touch-action: none;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 1.1;
  color: var(--wa-color-brand-on-quiet);
}

.pass-config-section {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
  padding: var(--wa-space-m);
  background: var(--wa-color-surface-raised);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}

.pass-config-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wa-space-s);
}

.pass-slot-row {
  display: grid;
  grid-template-columns: 140px repeat(4, minmax(0, 1fr));
  gap: var(--wa-space-2xs);
  align-items: end;
  padding: var(--wa-space-3xs) 0;
  border-block-end: 1px dashed var(--wa-color-surface-border);
}

@media (max-width: 768px) {
  .pass-config-grid-2 {
    grid-template-columns: 1fr;
  }
  .pass-slot-row {
    grid-template-columns: 1fr;
    gap: var(--wa-space-xs);
  }
}