/* v1.2.9 — One proportional device shell across post, glaze, journal and cover previews.
 * Reference portrait viewport 390 × 844; scale the WHOLE device, never only its height.
 */
.hp-main[data-view="create"] .creation-form {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 350px);
  gap: 20px 22px;
}
.hp-main[data-view="create"] .creation-preview {
  min-width: 0;
  overflow: visible;
}
.hp-main[data-view="create"] .creation-phone {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100%, 340px);
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: 390 / 844;
  margin: 16px auto 0;
  padding: 6px;
  border: 5px solid var(--ink);
  border-radius: 34px;
  overflow: hidden;
  background: var(--ink);
}
/* A fixed-ratio device must not grow when a user types a long title or note. */
.hp-main[data-view="create"] .creation-phone__screen,
.hp-main[data-view="create"] .creation-phone__body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 0;
  overflow: hidden;
}
.hp-main[data-view="create"] .creation-phone__screen {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
}
.hp-main[data-view="create"] .creation-phone__status,
.hp-main[data-view="create"] .creation-phone__nav,
.hp-main[data-view="create"] .creation-phone__feed-nav,
.hp-main[data-view="create"] .creation-phone__bottom-nav,
.hp-main[data-view="create"] .creation-phone__record-actions {
  flex-shrink: 0;
}
/* The author name may be an email address; prevent it pushing Follow off-screen. */
.hp-main[data-view="create"] .creation-phone__nav > strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-main[data-view="create"] .creation-phone__nav > button,
.hp-main[data-view="create"] .creation-phone__nav > svg {
  flex: 0 0 auto;
}
/* Photo/video post: media retains a natural thumbnail slot; only long copy scrolls. */
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__media {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  background: var(--mist);
  place-content: center;
}
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__media :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__record-copy {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  overscroll-behavior: contain;
}
/* Journal / glaze / cover: content scrolls INSIDE the screen, not the device shell. */
.hp-main[data-view="create"] .creation-phone__record-scroll,
.hp-main[data-view="create"] .creation-phone__studio-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media {
  min-height: 0;
  height: auto;
  aspect-ratio: 4 / 3;
}
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media.is-empty {
  height: auto;
  min-height: 104px;
  aspect-ratio: 4 / 3;
}
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hp-main[data-view="create"] .creation-phone__studio-list .creation-phone__media,
.hp-main[data-view="create"] .creation-phone__studio-list .creation-phone__media :is(img, video) {
  aspect-ratio: auto;
  object-fit: cover;
}
.hp-main[data-view="create"] .creation-phone__body {
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1023px) {
  .hp-main[data-view="create"] .creation-form { grid-template-columns: minmax(0, 1fr); }
  .hp-main[data-view="create"] .creation-preview { width: min(100%, 420px); margin-inline: auto; position: static; }
}
/* Respect the original create form's mobile preview visibility: no cramped duplicate on phones. */
@media (max-width: 599px) {
  .hp-main[data-view="create"] .creation-preview { display: none; }
}
/* Keep the complete mock handset inside shorter desktop viewports when possible.
 * Both dimensions still derive from the same aspect ratio. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hp-main[data-view="create"] .creation-phone { width: min(100%, 290px); }
}
@media (min-width: 1024px) and (max-height: 810px) {
  .hp-main[data-view="create"] .creation-phone { width: min(100%, 265px); }
}