/* 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) * .8884), 800px); }
  #promises-book[data-page-mode="single"] .promises-center-bookmark-top-wrap { left: calc(100% - 44px); }
}