/* ============================================================
   Email wording (D7)

   The visual job of this page is ONE distinction: what patients receive
   right now versus what the practice has proposed. Everything below
   exists to make that legible at a glance.

   The live block is quoted — indented, on its own ground, in the reading
   face — so it reads as "this is the text that goes out", not as another
   form field. The proposal sits in ordinary inputs underneath. If the two
   ever look alike, the page has failed at the only thing it must do.
   ============================================================ */

.et-card { margin-bottom: 18px; }

.et-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.et-title { margin: 0; font-size: 17px; }
.et-when { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }

/* --- what patients receive now: quoted, never editable ------------------ */
.et-live {
  border-left: 3px solid var(--accent, #4aa8d8);
  padding: 10px 0 10px 14px;
  margin-bottom: 16px;
}
.et-live-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.et-live-subject { font-weight: 600; margin-bottom: 4px; }
.et-live-body {
  white-space: pre-wrap;
  font-family: var(--font-body, inherit);
  color: var(--text-secondary);
  line-height: 1.5;
}
/* No custom wording yet. Muted border so "standard" doesn't read as a state
   that needs attention — it is the normal, correct condition. */
.et-live-standard { border-left-color: var(--border, #d9e2ea); }
/* Attribution for the standard copy shown below it. Distinct from
   .et-live-label, which names the section, not the source of the wording. */
.et-live-note {
  font-size: 12px; font-style: italic;
  color: var(--text-muted); margin-bottom: 8px;
}
/* Explains the {{braces}} once per card. Small and muted: it is a footnote to
   the wording, not part of what patients receive. */
.et-live-hint {
  font-size: 12px; color: var(--text-muted);
  margin: 8px 0 0; line-height: 1.4;
}

/* --- review feedback ---------------------------------------------------- */
.et-notes {
  background: var(--warning-bg, #fff8e6);
  border-radius: 8px; padding: 10px 12px;
  font-size: 13px; line-height: 1.5; margin-bottom: 14px;
}
.et-stamp { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* --- the proposal ------------------------------------------------------- */
.et-edit { margin-bottom: 14px; }
.et-field { display: block; margin-bottom: 10px; }
.et-field > span {
  display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px;
}
.et-field input,
.et-field textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border, #d9e2ea); border-radius: 8px;
  font: inherit; color: inherit; background: var(--input-bg, #fff);
}
.et-field textarea { resize: vertical; line-height: 1.5; }
.et-field input:disabled,
.et-field textarea:disabled { opacity: .6; cursor: not-allowed; }

.et-tokens { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 8px 0 0; }
.et-tokens code {
  background: var(--code-bg, #f0f4f8); border-radius: 4px;
  padding: 1px 5px; font-size: 11.5px;
}
.et-locked { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }

.et-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.et-msg { font-size: 13px; color: var(--success, #2e7d5b); }
.et-msg-bad { color: var(--danger, #c0392b); }

@media (max-width: 600px) {
  .et-head { flex-direction: column; gap: 8px; }
}