/* Section rework: #next. Every selector is scoped under #next. */

/* Closing: the letter's last words on the left, the reply card on the right. */

@media screen {
  #next.sheet {
    padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  }
  #next .close-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  #next .title-letter {
    max-width: 22ch;
  }
  #next .close-body {
    margin-top: var(--stack-3);
    max-width: 30rem;
  }
  #next .close-body .lead {
    max-width: none;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--deep-soft);
  }
  #next .letter-sign {
    margin-top: var(--stack-4);
  }
  #next .letter-sign span {
    max-width: 30rem;
  }

  /* Reply card: the receipt's card language, not sticky. */
  #next .reply {
    min-width: 0;
    max-width: 40rem;
    margin-top: var(--stack-4);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--rule-on-light);
    border-radius: var(--r-control);
  }
  #next .reply-msg {
    margin-top: var(--stack-3);
    padding-block: var(--stack-3);
    border-block: 1px solid var(--rule-on-light);
    font-size: 1.25rem;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow-wrap: break-word;
  }
  /* Taller hit area for the inline link without changing the line layout. */
  #next .reply-msg a {
    padding-block: 0.625rem;
  }

  /* The link under the sentence: smaller, and free to break anywhere. */
  #next .reply-url {
    display: block;
    margin-top: var(--stack-1);
    font-size: 0.9375rem;
    letter-spacing: 0;
    color: var(--deep-soft);
    overflow-wrap: anywhere;
  }

  /* With nothing chosen the card is just the message slot: no button, no status. */
  html:not(.has-offer) #next .reply-form {
    display: none;
  }
  #next .reply-form {
    margin-top: var(--stack-3);
  }
  #next .reply-status {
    margin-top: var(--stack-2);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--deep-soft);
  }
  #next .reply-status:empty {
    display: none;
  }
}

/* Phone: the copy button fills the card. */
@media screen and (max-width: 599px) {
  #next .reply-form .pill {
    width: 100%;
  }
}

/* From 900px: headline, line and signature on the left (signature at the bottom), card on the right. */
@media screen and (min-width: 900px) {
  #next .close-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  #next .title-letter {
    grid-column: 1;
    grid-row: 1;
  }
  #next .close-body {
    grid-column: 1;
    grid-row: 2;
  }
  #next .reply {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: none;
    margin-top: 0;
  }
  #next .letter-sign {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
  }
}

/* PDF: headline, example line and signature only. The card is screen-only. */
@media print {
  #next .title-letter {
    max-width: 22ch;
    font-size: 2.6rem;
    line-height: 1.06;
    letter-spacing: -0.032em;
  }
  #next .close-body p + p {
    margin-top: 0;
  }
  #next .letter-sign {
    margin-top: 6mm;
  }
}