.document-form { max-width: 900px; margin: 28px auto 0; }
.document-form details { margin: 16px 0; border: 1px solid #aaa496; }
.document-form summary { padding: 18px 22px; cursor: pointer; font-weight: 800; overflow-wrap: anywhere; }
.document-form summary:hover { background: var(--white); }
.document-form summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.document-form fieldset { min-width: 0; margin: 0; padding: 18px 22px 4px; border: 0; border-top: 1px solid #aaa496; }
.document-form legend { padding: 0 8px; font-weight: 800; }
.document-form fieldset > p { margin-bottom: 18px; color: var(--muted); }
.document-form label > span { text-transform: none; letter-spacing: 0; }
.document-form input[aria-invalid="true"], .document-form select[aria-invalid="true"] { border: 2px solid #a13020; }
.document-result { position: relative; z-index: 2; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.document-result textarea { display: block; width: 100%; min-height: 300px; margin: 12px 0; padding: 14px; resize: vertical; border: 1px solid #aaa496; background: var(--white); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.7; }
.document-result textarea:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.document-result .hero-actions { flex-wrap: wrap; }
.document-result .button { white-space: normal; }
.document-result .button-ghost { border-color: var(--ink); color: var(--ink); }
.document-result [role="status"] { margin-top: 14px; color: var(--muted); }
@media (max-width: 600px) {
  .document-form summary { padding: 16px 12px; }
  .document-form fieldset { padding: 16px 12px; }
  .document-result { padding: 20px 14px; }
}