/* Create-a-pet layout (Brian, 2026-09-06): the live appearance preview stays
   pinned beside the form while the steps scroll, so every change is visible
   no matter where you are in the list. #createModal is the scroll container
   (overflow-y: auto in style.css), so position: sticky anchors to it. */
#createModal { width: 720px; }
.createLayout { gap: 26px; }
.createPreviewCol {
  width: 232px;
  position: sticky; top: 0;
  align-self: flex-start;
  z-index: 2;
  background: var(--panel);
  padding-bottom: 6px;
}
.previewStage { width: 232px; height: 250px; }
.previewCaption { font-size: 12px; }

/* Narrow screens: the whole layout stacks, so the preview becomes a compact
   sticky strip across the top of the modal instead of a side column. */
@media (max-width: 560px) {
  .createLayout { gap: 12px; }
  .createPreviewCol {
    width: 100%;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--line);
  }
  .previewStage { width: 120px; height: 120px; flex: none; }
  .previewCaption { text-align: left; margin-top: 0; flex: 1; }
}

/* Creator progress retains every field in the same draft while showing one decision at a time. */
.createSteps { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.createSteps button { flex:1 1 120px; padding:9px 12px; border:1px solid #627e72; border-radius:10px; background:transparent; color:inherit; }
.createSteps button[aria-current="step"] { background:#e8ca86; color:#183735; font-weight:700; }
.createStepStatus { font-weight:600; margin:8px 0 16px; }
.createFormCol > [hidden], .createFormCol .formActions > [hidden] { display:none !important; }
.createFormCol .formActions { flex-wrap:wrap; }
#createModal :focus-visible, #accountModal :focus-visible, .skCard :focus-visible { outline:3px solid #f4cd79; outline-offset:3px; }

#createModal .photoDrop { flex-wrap:wrap; }
#createModal #fPhotoRemove { flex-basis:100%; white-space:normal; }
@media(max-width:600px){ #createModal .photoDrop .photoInfo { flex-basis:calc(100% - 88px); } #createModal .photoDrop input[type=file] { width:100%; } }