/* Front-sheet coordinates, calibrated against the paper inside the layered art.
   All page types share these bounds. Percentage insets scale with the book. */
#promises-book {
  --journal-safe-top: 12.5%;
  --journal-safe-bottom: 11%;
  --journal-safe-left: 14%;
  --journal-safe-right: 52.5%;
  --journal-right-safe-left: 53%;
  --journal-right-safe-right: 15%;
  --journal-pair-gap: 4px;
}
#promises-book .promises-right-page {
  --journal-safe-left: var(--journal-right-safe-left);
  --journal-safe-right: var(--journal-right-safe-right);
}
#promises-book .promises-page-sheet {
  inset: var(--journal-safe-top) var(--journal-safe-right) var(--journal-safe-bottom) var(--journal-safe-left);
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
}
#promises-book :is(.promises-story-page, .promises-progress-page, .promises-memory-page) {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
}
#promises-book .promises-progress-page {
  grid-template-rows: auto auto auto auto minmax(0, auto) minmax(0, 1fr) auto;
}
#promises-book .promises-map-frame {
  box-sizing: border-box;
  justify-self: center;
  width: min(90%, 360px);
  max-height: 100%;
  margin: 0 auto;
}
#promises-book .promises-visited-list { min-height: 0; overflow-y: auto; }
#promises-book .promises-story-save-row { position: relative; padding-bottom: 16px; }
#promises-book .promises-story-status { bottom: 0; margin: 0; }
#promises-book .promises-supply-tabs { translate: 0 -6px; }

/* Give the visible mat the whole photo row, then a single shared caption gutter.
   Uploaded photos still use object-fit: contain; saved photo data is untouched. */
#promises-book :is(.promises-template-photo-group, .promises-template-keepsake-primary, .promises-template-keepsake-secondary) {
  grid-template-rows: minmax(44px, 1fr) 32px;
  align-content: stretch;
  align-self: stretch;
  gap: var(--journal-pair-gap);
}
#promises-book .promises-template-body .promises-photo-slot {
  min-height: 0;
  height: 100%;
  align-items: stretch;
}
#promises-book .promises-template-body .promises-photo-mat {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
}
#promises-book .promises-caption-field textarea {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
#promises-book .promises-template-body-favorite {
  grid-template-rows: minmax(90px, 1fr) 32px minmax(60px, .65fr);
  gap: var(--journal-pair-gap);
}
#promises-book .promises-template-body-favorite .promises-caption-field { grid-row: 2; }
#promises-book .promises-template-body-favorite .promises-template-field-reflection { grid-row: 3; }
#promises-book .promises-template-body-two { grid-template-rows: minmax(110px, 1fr) minmax(60px, .5fr); }
#promises-book .promises-template-body-three { align-items: stretch; }

@media (max-width: 1100px), (max-width: 1180px) and (orientation: portrait) {
  /* The single-page view crops the right leaf of the same original artwork. */
  #promises-book[data-page-mode="single"] {
    --journal-safe-left: 7.5%;
    --journal-safe-right: 17.5%;
    --journal-right-safe-left: 7.5%;
    --journal-right-safe-right: 17.5%;
    background-size: 224% 100%;
    background-position: 88% center;
  }
  .promises-hub .promises-journal-actions {
    position: absolute;
    top: -6px;
    right: 12px;
    width: auto;
    margin: 0;
  }
  .promises-hub .promises-close-journal {
    min-height: 44px;
    padding: 4px 8px;
    font-size: .75rem;
    letter-spacing: .035em;
  }
  .promises-hub .promises-book-stage { grid-row: 3; }
  #promises-book .promises-supply-tabs { left: 0; right: 0; top: -62px; }
  #promises-book :is(.promises-template-body-three, .promises-template-body-keepsake) {
    grid-template-rows: minmax(80px, 1fr) minmax(80px, 1fr) auto;
  }
}