/* The client's approval page, /a/ (flow 2 build spec 3.12). One column at
   most 46rem wide with 1rem gutters. Nothing is fixed or sticky: the offline
   banner flows in the column, so no overlay ever covers a control (memory:
   a fixed overlay covers a control somewhere). Colours are app.css's
   tokens only. */
.a-page { max-width: 46rem; margin: 0 auto; padding: 24px 1rem 48px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px; overflow-wrap: anywhere; }
.a-banner { margin: 0; padding: 12px 16px; background: var(--secondary); color: var(--ink); border-radius: 8px; }
.a-sentence { margin: 0; font-size: 18px; line-height: 1.5; }
.a-from { margin: 0; color: var(--helper); }
.a-result { margin: 0; padding: 12px 16px; background: var(--field); border: 1px solid var(--edge);
  border-radius: 8px; font-weight: 700; }
.a-means { margin: 0; color: var(--helper); }
/* Walk round 6, N9: a later revision says what it replaces, as its mail does. */
.a-replaces { padding: 12px 16px; background: var(--field); border: 1px solid var(--edge); border-radius: 8px; }
.a-replaces p { margin: 0; }
.a-replaces p + p { margin-top: 8px; }
.a-replaces ul { margin: 4px 0 0; padding-left: 20px; }
.a-choices, .a-form { display: flex; flex-direction: column; gap: 12px; }
.a-choices { flex-direction: row; flex-wrap: wrap; align-items: center; }
.a-choices .a-means { width: 100%; }
.a-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.a-page .btn { min-height: 44px; height: auto; min-width: 44px; }
.a-input { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; min-height: 44px;
  background: var(--field); color: var(--ink); border: 1px solid var(--edge-firm); border-radius: 8px; }
textarea.a-input { min-height: 8rem; resize: vertical; }
.a-error { margin: 0; color: var(--danger); }

@media (max-width: 700px) {
  .a-choices .btn, .a-actions .btn { width: 100%; min-width: 0; }
}

/* Variation pricing: a link before Send. The banner names the person; the
   request mail shows below the document as it will be drawn for them. */
.a-preview-banner { font-weight: 700; }
.a-mail { padding: 12px 16px; background: var(--field); border: 1px solid var(--edge); border-radius: 8px; }
.a-mail-heading { margin: 0 0 8px; font-size: 16px; }
.a-mail-subject { margin: 0 0 8px; font-weight: 700; }
.a-mail-text { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The signature's one-name box under the name (signature addendum): a
   native checkbox and its own label, a 44 px row. */
.a-check { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.a-check input { width: 20px; height: 20px; margin: 0; }