/* BV-05 Utility grammar for W03 letter flow: rail/main composition on desktop, single column mobile.
   BV-05-R01 section C desktop contract: shell 1180 / rail 240px / rail->main gap 56px / main 640px / right quiet space.
   W03-R01 additions: rail eyebrow/lead, de-form styling, Q1 privacy entry, review privacy block,
   submitted personal-read + birth invite, autosave status. */
.letter-page { min-height: 68vh; }
.letter-page__inner { max-width: var(--width-content); }
.letter-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
.letter-rail { max-width: 640px; }
.letter-rail .page-title { margin: 0; }
.letter-rail__eyebrow { margin: 0 0 18px; }
.letter-rail__lead { margin-top: var(--space-3); }
.letter-main { max-width: 640px; width: 100%; }
/* R01 D9 note: the step eyebrow ("来信 · 1/3") now carries direction; the old
   "第 X 个问题 · 共 3 个" progress line is retired under W03-R01. */
.letter-progress, .letter-status { margin: var(--space-4) 0 0; color: var(--color-text-soft); font-size: var(--type-helper); line-height: 1.65; letter-spacing: .01em; }
.letter-progress .meta, .letter-status .meta { color: var(--color-text-muted); }
/* R01 D11: Submitted outcome heading keeps Utility grammar in serif. */
.letter-received-title { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.38; font-weight: 650; color: var(--color-text); letter-spacing: -0.012em; }
.letter-received-title + .lead { margin-top: var(--space-2); }
.letter-form, .letter-boundary, .letter-review { margin-top: 0; }
.letter-question { display: block; white-space: normal; font-size: var(--type-question); line-height: var(--type-question-lh); font-weight: 650; color: var(--color-text); text-wrap: pretty; }
.letter-textarea { margin-top: var(--space-2); }
/* De-form the writing area: paper-like, quiet focus, no boxy chrome. */
.letter-form .field__hint { margin: 0; }
.letter-form .letter-textarea { margin-top: 10px; background: var(--color-surface); border-color: color-mix(in srgb, var(--color-border) 85%, transparent); }
.letter-actions { margin-top: var(--space-5); align-items: center; }
.letter-autosave-status { margin: 12px 0 0; min-height: 20px; color: var(--color-text-muted); font-size: .75rem; letter-spacing: .03em; }
.letter-privacy-entry { margin: 0 0 26px; padding: 16px 0 16px 18px; border-left: 2px solid var(--color-border-strong); color: var(--color-text-soft); line-height: 1.8; }
.letter-privacy-entry p { margin: 0; }
.letter-boundary { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.letter-boundary .letter-actions { margin-bottom: var(--space-4); }
.letter-boundary__note { max-width: 600px; }
.letter-review { border-top: 1px solid var(--color-border); }
.letter-review__lead { margin-bottom: var(--space-5); }
/* R01 D10: Review information hierarchy — question label / answer / modify action. */
.letter-answer { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.letter-answer h2 { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: var(--type-label); line-height: 1.6; color: var(--color-text-muted); font-weight: 650; letter-spacing: .02em; }
.letter-answer__body { color: var(--color-text); overflow-wrap: anywhere; }
.letter-answer__body p { margin: 0; white-space: normal; }
.letter-answer__body p + p { margin-top: var(--space-3); }
.letter-answer .text-link { display: inline-block; margin-top: var(--space-3); font-size: var(--type-label); }
.letter-review__privacy { margin: 28px 0 0; padding: 22px 0; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); font-family: var(--font-serif); line-height: 1.85; color: var(--color-text-soft); }
.letter-review__privacy p { margin: 0 0 4px; font-size: 1.0625rem; }
.letter-submit { margin-top: var(--space-6); }
.letter-personal-read { margin: 0 0 18px; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.6; color: var(--color-text); }
.letter-birth-invite { margin: 26px 0 8px; padding: 20px 0 22px; border-top: 1px solid var(--color-border); }
.letter-birth-invite--done { border-bottom: 1px solid var(--color-border); }
.letter-birth-invite p { margin: 0 0 6px; line-height: 1.75; color: var(--color-text-soft); }
.letter-birth-invite__note { color: var(--color-text-muted); font-size: .875rem; }
.letter-birth-invite__actions { margin-top: 14px; }
.letter-reference { margin: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--type-helper); overflow-wrap: anywhere; }

/* Step-tuned textarea initial height (desktop default; mobile overrides below). */
.letter-form--q1 .letter-textarea { min-height: 300px; }
.letter-form--q2 .letter-textarea { min-height: 340px; }
.letter-form--q3 .letter-textarea { min-height: 300px; }

@media (max-width: 760px) {
  .letter-page.section { padding-block: 54px 72px; }
  .letter-actions { flex-direction: column-reverse; align-items: stretch; }
  .letter-actions .button { width: 100%; }
  .letter-form--q1 .letter-textarea { min-height: 240px; }
  .letter-form--q2 .letter-textarea { min-height: 280px; }
  .letter-form--q3 .letter-textarea { min-height: 240px; }
}

/* Tablet: single-column centered, full letter layout capped at 620px. */
@media (min-width: 761px) and (max-width: 920px) {
  .letter-layout { max-width: 620px; margin-inline: auto; }
  .letter-rail { max-width: 620px; }
  .letter-main { max-width: 620px; }
  .letter-received-title { font-size: 1.625rem; } /* 26px */
}

/* R01 section C: desktop 240px rail / 56px gap / 640px main, right column breathes. */
@media (min-width: 921px) {
  .letter-layout { grid-template-columns: 240px minmax(0, 640px) 1fr; column-gap: 56px; align-items: start; }
  .letter-rail { grid-column: 1; max-width: none; }
  .letter-main { grid-column: 2; max-width: 640px; }
  .letter-received-title { font-size: 1.75rem; } /* 28px */
}