/* Final mobile controls and motion. The approved page geometry lives unchanged
   in scrapbook-safe-area.css; none of these rules moves or resizes a page. */
@media (max-width: 1100px), (max-width: 1180px) and (orientation: portrait) {
  /* Mobile header ownership: one flow, with no book-side action reservation. */
  body[data-current-feature-id="promises-to-keep"] .promises-page:has(.promises-hub:not([hidden])) { padding-top: 0; }
  .promises-scene-header:has(> .promises-journal-actions:not([hidden])) {
    padding-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .promises-scene-header > .promises-journal-actions {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    margin: 0 0 0 auto;
    padding: 0;
    justify-self: auto;
    justify-content: flex-end;
    align-self: flex-end;
    transform: none;
    translate: none;
    pointer-events: auto;
  }
  .promises-scene-header > .promises-journal-actions[hidden] { display: none; }
  .promises-scene-header .promises-close-journal {
    min-height: 44px;
    padding: 4px 8px;
    font-size: .75rem;
    letter-spacing: .035em;
  }
  .promises-hub { margin-top: 0; grid-template-rows: none; }
  .promises-hub .promises-book-stage { padding-top: 0; grid-row: auto; }

  #promises-book[data-page-mode="single"] .promises-caption-field textarea {
    font-size: .65rem;
    line-height: 1.2;
  }

  #promises-book[data-page-mode="single"] .promises-archive-bookmark-top {
    color: #173c30;
    border-color: #6e9e83;
    background-color: var(--mint, #9fcdb1);
    background-image:
      repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .13) 2px 3px),
      linear-gradient(90deg, rgba(41, 94, 66, .25), transparent 28%, rgba(255, 255, 255, .42) 47%, transparent 67%, rgba(41, 94, 66, .2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 8px rgba(4, 24, 43, .24);
  }
  #promises-book[data-page-mode="single"] .promises-archive-bookmark-top .bookmark-ribbon__label {
    color: inherit;
    font-size: .5rem;
    letter-spacing: 0;
    line-height: 1;
  }

  /* Reuse the desktop rotating leaf and keyframes over the approved safe sheet. */
  #promises-book[data-page-mode="single"] .promises-flip-page:not([hidden]) {
    display: block;
    inset: var(--journal-safe-top) var(--journal-safe-right) var(--journal-safe-bottom) var(--journal-safe-left);
    width: auto;
    height: auto;
    padding: 0;
    animation-duration: 480ms;
  }
  #promises-book[data-page-mode="single"] .promises-flip-face { padding: 0; border: 0; }

  /* The source PNG has an opaque gray extraction fringe below its leather.
     Clip that contour on the artwork alone, preserving the original canvas,
     paper coordinates, tabs, controls, shadows, and desktop image. */
  #promises-book[data-page-mode="single"] { background-image: none; }
  #promises-book[data-page-mode="single"]::before {
    display: block;
    inset: 0;
    z-index: -1;
    background-image: url("assets/promises-to-keep-open-journal-clean.png");
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    mask-image: url("assets/promises-to-keep-mobile-leather-edge-mask.svg");
    mask-size: 224% 100%;
    mask-position: 88% center;
    mask-repeat: no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  #promises-book[data-page-mode="single"] .promises-flip-page { animation: none; }
}

/* Tablet portrait scaling only; safe sheet insets and phone geometry stay fixed. */
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  body .promises-book-stage { --promises-single-book-width: min(calc(100vw - 48px), calc((100dvh - 240px) * .666667), 800px); }
  #promises-book[data-page-mode="single"] .promises-center-bookmark-top-wrap { left: calc(100% - 44px); }
  body #promises-book[data-page-mode="single"] { aspect-ratio: 2 / 3; height: auto; }
  body .promises-cover-object { width: min(calc(100vw - 80px), calc((100dvh - 200px) * .666667), 760px); max-width: calc(100vw - 80px); max-height: calc(100dvh - 200px); }
  body .promises-cover-entrance { padding-inline: 24px; }
  body :is(.promises-layout-actions, .promises-supply-panel-head) button,
  body [data-supply-panel-close], body [data-layouts-close] { min-height: 44px; min-width: 44px; font-size: .875rem; }
}

/* Emphasize the existing rotating sheet, without extending its timing. */
.promises-flip-page:not([hidden]) { outline: 1px solid rgba(106,72,39,.4); box-shadow: 14px 8px 28px rgba(31,20,10,.3); }
.promises-flip-face { background-image: linear-gradient(90deg, rgba(91,61,29,.12), transparent 12%, transparent 88%, rgba(91,61,29,.08)); }

/* Landscape-only viewport budget leaves room for the existing Return ribbon. */
@media (min-width:761px) and (max-width:1180px) and (orientation:landscape) {
 body .promises-book-stage { --promises-single-book-width:min(calc(100vw - 100px),calc((100dvh - 180px) * .666667)); }
 body #promises-book[data-page-mode="single"] { aspect-ratio:2 / 3;height:auto; }
 body .promises-hub .promises-book-stage { padding-bottom:60px; }
}

@media (min-width:761px) and (orientation:landscape) and (max-height:700px) {
 /* Reserve space for the below-paper Return hit target in spread mode. */
 body #promises-book[data-page-mode="spread"] { width:min(calc(100vw - var(--app-shell-rail-width,0px) - 176px),calc((100dvh - 190px) * var(--open-journal-ratio)),1180px); }
}

@media (min-width:761px) and (orientation:landscape) {
 /* The full-width transparent actions row must not intercept the upper ribbon. */
 body .promises-journal-actions { pointer-events:none; }
 body .promises-journal-actions button { pointer-events:auto; }
}