/* ---- Settings › Email signature (B-092, FIRM-SIGNATURE 2, pages/settings-signature.js) ----
   Built on the Personal preferences look (sme-page: flat sections, 1px lines). Own prefix sig-.
   A small form like the Outlook add-in's "My signature" pane: Name, Title, Phone, Email; the firm template does the rest. */
:root {
  --sig-preview-line: #e6e7ea;
}
.sig-page .settings-card { max-width: 680px; }
.sig-intro { margin: 0; color: var(--text-2); }
.sig-firm-note, .sig-own-html { margin: 0; }
.sig-own-html[hidden] { display: none; }

.sig-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.sig-field-hint { color: var(--text-2); font-weight: var(--fw-regular); }
.sig-email { color: var(--text-2); font-size: var(--fs-md); }

/* Preview: two grey lines stand for the email text, then the signature as it will be sent. */
.sig-preview {
  display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); overflow-x: auto;
}
.sig-preview-text { display: flex; flex-direction: column; gap: var(--sp-3); }
.sig-preview-line { display: block; height: 8px; width: 70%; border-radius: var(--r-pill); background: var(--sig-preview-line); }
.sig-preview-line.is-short { width: 45%; }
.sig-preview-sig { line-height: var(--lh-md); }
.sig-preview-sig p { margin: 0; }
.sig-preview-sep { color: var(--text-muted); }

.sig-switch { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text); }
.sig-actions { align-items: center; gap: var(--sp-4); padding-top: var(--sp-6); }