/* Profile creation visuals. Keep the original form controls and validation intact. */
.pn .pn-preview li {
  overflow: hidden;
  padding: 10px 8px 14px;
  border: 1px solid rgba(22, 66, 67, .07);
}

.pn .pn-preview img {
  width: clamp(76px, 8vw, 108px);
  height: clamp(76px, 8vw, 108px);
  border-radius: 19px;
  object-fit: cover;
  background: #e7f4ef;
}

.pn .pn-preview li::before { z-index: 1; }

.pn .pn-step > legend::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  margin-inline-end: 10px;
  vertical-align: middle;
  border-radius: 15px;
  background: #e7f4ef url('/assets/profile-v2/steps.webp') 0 0 / 400% 200% no-repeat;
  box-shadow: 0 4px 12px rgba(26, 66, 64, .09);
}

.pn .pn-step[data-step="species"] > legend::before { background-position: 33.333% 0; }
.pn .pn-step[data-step="sex"] > legend::before { background-position: 66.667% 0; }
.pn .pn-step[data-step="age"] > legend::before { background-position: 100% 0; }
.pn .pn-step[data-step="details"] > legend::before { background-position: 0 100%; }
.pn .pn-step[data-step="habits"] > legend::before { background-position: 33.333% 100%; }
.pn .pn-step[data-step="photo"] > legend::before { background-position: 66.667% 100%; }
.pn .pn-step[data-step="health"] > legend::before { background-position: 100% 100%; }

.pn .pn-card-face { min-height: 166px; }
.pn .pn-species-art {
  display: block;
  width: 92px;
  height: 92px;
  background: url('/assets/profile-v2/species.webp') 0 0 / 200% 100% no-repeat;
  filter: drop-shadow(0 5px 6px rgba(22, 48, 61, .12));
  transition: transform .2s ease;
}
.pn .pn-species-art--dog { background-position: 100% 0; }
.pn .pn-card:hover .pn-species-art,
.pn .pn-card input:checked + .pn-card-face .pn-species-art { transform: translateY(-3px) scale(1.04); }

.pn .pn-photo-frame .pn-photo-ph { object-fit: contain; }
.pn .pn-done > img { object-fit: contain; }

@media (max-width: 480px) {
  .pn .pn-preview img { width: 64px; height: 64px; }
  .pn .pn-step > legend::before { width: 42px; height: 42px; margin-inline-end: 7px; }
  .pn .pn-card-face { min-height: 142px; }
  .pn .pn-species-art { width: 74px; height: 74px; }
}

@media (max-width: 480px) and (max-height: 640px) {
  .pn[data-mode="wizard"] .pn-stage.mio-slot { height: 120px; }
  .pn[data-mode="wizard"] .pn-mio-tour { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pn .pn-species-art { transition: none; }
}