/* v1.2.11 — Full-width, uncropped image previews.
 * A natural-size image determines its own media height; the PHONE remains fixed
 * at 390:844 and its interior scroll container handles long portrait photos.
 * Keep video/empty-state frames and list cover thumbnails unchanged.
 */
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media:not(.is-empty):has(> img),
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__media:not(.is-empty):has(> img) {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media:not(.is-empty) > img,
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__media:not(.is-empty) > img {
  position: static;
  inset: auto;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  padding: 0;
  margin: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
/* A cover in the list remains a small 75x76 crop; the user can open it to see
 * the full image. Never apply natural-height styling to this thumbnail. */
.hp-main[data-view="create"] .creation-phone__media > img[role="button"] {
  cursor: zoom-in;
}
.hp-main[data-view="create"] .creation-phone__media > img[role="button"]:focus-visible {
  outline: 3px solid var(--hp-primary, #276b60);
  outline-offset: -4px;
}
/* Dialog is appended to body, i.e. outside .hp-main's stacking context. */
dialog.creation-image-viewer {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #111d1a;
  color: white;
}
dialog.creation-image-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
dialog.creation-image-viewer::backdrop {
  background: rgb(11 20 18 / 92%);
}
.creation-image-viewer__stage {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 52px 10px 12px;
}
.creation-image-viewer__stage > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.creation-image-viewer__close {
  position: absolute;
  z-index: 2;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  background: rgb(22 39 34 / 80%);
  color: white;
  cursor: pointer;
}
.creation-image-viewer__close svg { width: 21px; height: 21px; }
.creation-image-viewer__close:focus-visible { outline: 3px solid white; outline-offset: 3px; }