/* pager.css (v27): the Previous / Next buttons (pager.js). Same make as the motion toggle (ambient.css): a 44 px touch
   target holding a 34 px leather disc with a gold ring and a gold chevron. Shown only while the pager owns input
   (html.hn-paged: the gate has opened). Placed where no card can be:
   - phones in portrait (under 600 px wide): top left, side by side, in the 56 px band above the day cards that
     chapters.css keeps free for the motion toggle (top right), so the pair mirrors the toggle. Next is in the corner and
     Previous beside it: on the sealed scroll only Next shows, clear of the centred title (whose lines start 79 px or
     more from the left edge on a 320 px phone), and a hidden button keeps its slot, so neither ever moves under the thumb;
   - everything else with the bottom bar (600 to 959 px wide: tablets in portrait, phones in landscape): top left as on
     phones. On the right edge the pair would sit on the reply's sheet (680 px wide: under about 790 px of screen it comes
     within 54 px of the edge, e.g. iPad 768 and iPhone SE 667x375, and a landscape notch adds 44 to 59 px on each side);
   - desktop (960 px and up): a vertical pair at the bottom right, under the section rail.
   Previous is hidden on the first stop and Next on the reply; the pair steps aside once the guest is down in the form,
   or sooner if the sheet scrolls up under it (pager.js: on a short landscape phone the sheet starts 67 px down). */
.pager { display: none; }

html.hn-paged .pager {
  position: fixed;
  z-index: var(--z-toggle, 60);
  display: flex;
  flex-direction: column;
  gap: 6px;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transition: opacity .25s ease, visibility 0s linear 0s;
}

@media (max-width: 959px) {
  html.hn-paged .pager {
    flex-direction: row-reverse;
    gap: 4px;
    top: calc(7px + env(safe-area-inset-top, 0px));
    left: calc(7px + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: auto;
  }
}

/* v38: short desktop windows. The rail (6 x 44 px + 5 x 12 px = 324 px, centred) reaches the column pair below 560 px
   of height (10 to 30 px over the Reply envelope at 540 to 500 px): the pair becomes a row in the corner, 12 px up,
   which clears the rail down to 460 px of height; below that it sits left of the rail's column. */
@media (min-width: 960px) and (max-height: 580px) {
  html.hn-paged .pager {
    flex-direction: row;
    gap: 4px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 960px) and (max-height: 460px) {
  html.hn-paged .pager { right: calc(max(18px, env(safe-area-inset-right, 0px)) + 56px); }
}

/* Down in the RSVP form: out of the way (scrolling back to the reply's top brings it back). */
html.hn-paged .pager.is-deep {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.pager__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gold-hi, #d9bf8a);
  opacity: .85;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* The leather disc, centred in the 44 px box. */
.pager__btn::after {
  content: "";
  position: absolute;
  top: 5px; right: 5px; bottom: 5px; left: 5px; inset: 5px;
  border: 1px solid #b8955a;
  border-radius: 50%;
  background-color: #3d0f17;
  background-image: var(--grain-light, none), var(--leather, none);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 4px rgba(0, 0, 0, .45),
    0 3px 8px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* Inner hairline ring, like tooling on the disc. */
.pager__btn::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px; bottom: 8px; left: 8px; inset: 8px;
  border: 1px solid rgba(217, 191, 138, .5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.pager__svg {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}

@media (hover: hover) {
  .pager__btn:hover { opacity: 1; }
}
.pager__btn:active::after { background-color: #6e1a28; }
.pager__btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--gold-hi, #d9bf8a);
  outline-offset: 3px;
}

/* No previous on the first stop, no next on the reply. The slot stays, so the other button does not jump. */
.pager__btn:disabled { visibility: hidden; }

/* v38 (pager.js): a step off the reply fades the RSVP sheet out first; the page then hops away (a hop would cut it). */
html.hn-leave #reply .sheet { opacity: 0 !important; pointer-events: none; transition: opacity .14s cubic-bezier(0, 0, .2, 1) !important; }

html.still .pager,
html.still .pager.is-deep { transition: none; }

@media print { .pager { display: none !important; } }