/* Readable text and motion shared by the sending and receiving views. */
[hidden] { display: none !important; }
:root { --card-flip-duration: 620ms; --card-flip-easing: cubic-bezier(.2,.8,.2,1); }
.keepsake-card, .note-book, .book-cover {
  transition-duration: var(--card-flip-duration);
  transition-timing-function: var(--card-flip-easing);
}
.hero-copy h1 {
  max-width: 100%;
  padding: .25em .15em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hero-line { white-space: normal; }
.hero-copy { padding-inline: 1rem; }
/* Let enlarged copy increase the document height instead of being clipped. */
main { height: auto; min-height: 100svh; overflow: visible; place-items: center; padding: max(6rem, env(safe-area-inset-top)) 1.5rem max(6rem, env(safe-area-inset-bottom)); }
.hero-copy { position: relative; inset: auto; width: min(100%, 56rem); margin: 0; }
.card-kicker, .card-signature { color: #59594e; }
.mounted-note .card-message { overflow: auto; font-size: 1rem; line-height: 1.5; }
.mounted-note .card-message:focus-visible { outline: 2px solid #4b3026; outline-offset: 3px; }
.account-close, .inbox-close { min-width: 44px; min-height: 44px; }
.account-gate { overflow-y: auto; }
.account-gate { align-items: safe center; }
/* Top-anchor tall collections/readers: centered grid overflow hid the close button. */
.inbox-flow { display: block; }
.inbox-flow { animation-duration: 240ms; animation-fill-mode: backwards; }
.inbox-flow[hidden] { display: none; }
.inbox-panel { margin-inline: auto; }
.inbox-close { position: sticky; top: max(18px,env(safe-area-inset-top)); float: right; margin-left: -44px; right: auto; z-index: 2; }
.delivery-status {
  top: max(5.5rem, calc(env(safe-area-inset-top) + 4.75rem));
  bottom: auto;
  width: max-content;
  max-width: calc(100vw - 2rem);
  text-align: center;
  line-height: 1.5;
}
.account-panel { margin-block: auto; }
.account-panel h2 { padding-right: 2rem; }
.account-panel :is(button, a, input):focus-visible {
  outline: 2px solid #416a63;
  outline-offset: 3px;
}
/* Keep the hero group at the center while allowing enlarged text to flow. */
@media (min-width: 768px) and (orientation: landscape) {
  .hero-copy {
    position: relative;
    inset: auto;
    width: min(100%, 56rem);
    margin: 0;
    padding-inline: 0;
  }
  .hero-copy h1 { padding-inline: 0; }
  .hero-copy .primary-action { margin-left: 0; }
}
@media (max-width: 767px), (orientation: portrait) {
  .hero-copy { margin-block: 0; padding-inline: 0; }
}
@media (max-width: 640px) {
  .composer-controls { width: min(100%, 352px); }
}
@media (max-width: 767px) {
  main {
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(5rem, env(safe-area-inset-top)) 1.25rem max(5rem, env(safe-area-inset-bottom));
    overflow: visible;
  }
  .scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    translate: none;
  }
  .hero-copy {
    position: relative;
    inset: auto;
    top: clamp(-100px, -12dvh, -48px);
    z-index: 2;
    grid-row: 1;
    grid-column: 1;
    display: flex;
    width: min(100%, 28rem);
    max-width: 28rem;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .hero-copy h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 38px;
    line-height: 1.18;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .hero-copy p {
    order: 2;
    position: static;
    width: 100%;
    max-width: 24rem;
    margin: 14px 0 0;
    text-align: center;
    text-transform: none;
    line-height: 1.55;
    letter-spacing: normal;
    text-shadow: none;
  }
  .hero-copy .primary-action {
    order: 3;
    align-self: center;
    justify-self: auto;
    margin: 1.35rem 0 0;
  }
  .hero-chevron,
  .hero-chevron svg { display: inline-grid; width: 16px; height: 16px; place-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .keepsake-card, .note-book, .book-cover,
  .received-note:not(.is-open) .note-book { transition: none; }
}