/* tenant-admin.css — Phase 4 operator UI (Settings + Admin Dashboard).
 * Linked by index.html. Colors / type / spacing follow DESIGN.md. Reuses the
 * app's .btn / .modal / .top-bar vocabulary; this sheet adds only the
 * Phase-4-specific surfaces. */

/* ── screen body ─────────────────────────────────────────────────────────── */
.ta-body {
  /* Widened (design-review): the Services & Pricing section is a multi-column
     table that was being squeezed into a form-width column while ~half the screen
     sat empty. The wider shell lets a service lay out name + all pricing on one
     row. Form-y sections cap their own fields (.ta-field) so they don't stretch. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}
.ta-page-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 34px;
  color: #3B3F3C;
  margin: 4px 0 22px;
}

/* ── settings card: left rail + panel ────────────────────────────────────── */
.ta-settings-card {
  display: flex;
  background: #FAFCFA;
  border: 1px solid #D4DDD7;
  border-radius: 12px;
  overflow: hidden;
}
.ta-rail {
  flex: 0 0 208px;
  background: #EDF5F0;
  border-right: 1px solid #D4DDD7;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}
.ta-rail-item {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  padding: 10px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #6B7570;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ta-rail-item:hover { background: #E4EBE6; color: #3B3F3C; }
.ta-rail-item.active {
  background: #FAFCFA;
  border-left-color: #7BA68A;
  color: #4E7A5E;
  font-weight: 600;
}
.ta-rail-item:focus-visible { outline: 2px solid #7BA68A; outline-offset: -2px; }

.ta-panel { flex: 1 1 auto; padding: 26px 30px; min-width: 0; }
.ta-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ta-panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #3B3F3C;
  margin: 0 0 6px;
}
.ta-panel-note {
  font-size: 13px;
  color: #6B7570;
  margin: 0 0 20px;
  line-height: 1.5;
}

/* Goal 1.8 PR-1 — Reply-To verification status badges. Stacks under the
   input as a state-aware help row. Reuses .ta-panel-note typography; each
   variant overlays a tint + a left border accent matching the DESIGN.md
   palette (sage = ok, clay = bad, warm = pending, gray = info). */
.ta-replyto-status {
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  margin-top: 8px;
}
.ta-replyto-status-verified {
  background: rgba(143, 166, 142, 0.10);
  border-left-color: #8FA68E;
  color: #4A5C49;
}
.ta-replyto-status-pending {
  background: rgba(212, 165, 116, 0.10);
  border-left-color: #D4A574;
  color: #7A5A33;
}
.ta-replyto-status-unverified {
  background: rgba(163, 174, 167, 0.08);
  border-left-color: #A3AEA7;
  color: #6B7570;
}
.ta-replyto-status-error {
  background: rgba(193, 95, 78, 0.10);
  border-left-color: #C15F4E;
  color: #8A3A2D;
}
.ta-replyto-status-demo {
  background: rgba(163, 174, 167, 0.10);
  border-left-color: #A3AEA7;
  color: #6B7570;
  font-style: italic;
}
.ta-subhead {
  font-size: 14px;
  font-weight: 600;
  color: #3B3F3C;
  margin: 28px 0 10px;
}
.ta-count {
  font-size: 13px;
  color: #A3AEA7;
  font-weight: 400;
}
/* "N new" attention chip on the feedback panel head (Lane D) — mirrors the
   onboarding "N need attention" affordance: amber pill, not a quiet count. */
.ta-count-attn {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 9999px;
  background: #F0E0B8;
  color: #8A6D1F;
}

/* ── form fields ─────────────────────────────────────────────────────────── */
/* Form fields stay a comfortable reading measure even in the wider shell — a
   name/phone/timeout input must never stretch full-bleed (design-review). */
.ta-field { margin-bottom: 16px; max-width: 540px; }
.ta-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #A3AEA7;
  font-weight: 600;
  margin-bottom: 5px;
}
.ta-input, .ta-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #D4DDD7;
  border-radius: 6px;
  padding: 9px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #3B3F3C;
  transition: border-color 0.15s;
}
.ta-textarea { resize: vertical; }
.ta-input:focus, .ta-textarea:focus { outline: none; border-color: #7BA68A; }
/* FIX-2 — style the native "Choose File" button (logo picker) so it isn't the
   raw grey OS control jarring against the warm onboarding aesthetic. */
.ta-input[type="file"] { padding: 7px 12px; font-size: 13px; color: #6B7570; cursor: pointer; }
.ta-input[type="file"]::file-selector-button {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #4E7A5E;
  background: #F4F7F2;
  border: 1px solid #D4DDD7;
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.ta-input[type="file"]::file-selector-button:hover { background: #E8EFE8; border-color: #7BA68A; }

.ta-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 22px;
}
.ta-save-status { font-size: 12px; }
.ta-save-ok { color: #4E7A5E; }
.ta-save-err { color: #D96B6B; }

/* Goal 1.4 IMPL2 — sub-panel chrome inside the consolidated
   "Practice Identity & Logo" section. The divider separates the Identity
   form half from the Logo upload half; the inline save bar holds the
   "Upload logo" button without the standard save-bar's right-flush
   layout (the section's main Save bar lives at the bottom). */
.ta-subpanel-divider {
  height: 1px;
  background: var(--border, #E5E2DC);
  margin: 28px 0 24px;
}
.ta-subpanel-title {
  font-size: 15px;
  font-weight: 600;
  color: #3B3F3C;
  margin: 0 0 6px;
}
.ta-savebar-inline {
  display: flex;
  justify-content: flex-start;
  margin: 12px 0 6px;
}

/* ── logo section ────────────────────────────────────────────────────────── */
.ta-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  background: #FFFFFF;
  border: 1px dashed #D4DDD7;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 12px;
}
.ta-logo-preview img { max-height: 80px; max-width: 100%; }
.ta-logo-empty { font-size: 13px; color: #A3AEA7; }

/* ── tables ──────────────────────────────────────────────────────────────── */
.ta-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ta-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #A3AEA7;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid #D4DDD7;
}
.ta-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #E4EBE6;
  color: #3B3F3C;
  vertical-align: middle;
}
.ta-table tr:last-child td { border-bottom: 0; }
.ta-cell-name { font-weight: 600; }
.ta-cell-actions { text-align: right; white-space: nowrap; }
.ta-rowmenu { display: flex; gap: 4px; justify-content: flex-end; }
.ta-row-self { font-size: 12px; color: #A3AEA7; }

/* ── badges ──────────────────────────────────────────────────────────────── */
.ta-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  line-height: 1.4;
}
.ta-badge-sage  { background: #C4DDCC; color: #345C44; }
.ta-badge-amber { background: #F0E0B8; color: #8A6D1F; }
.ta-badge-gray  { background: #E4EBE6; color: #6B7570; }
/* suspended — an alert-toned pill: the gray badge was #E4EBE6 (the page bg),
   so a suspended practice read as flat text next to the sage/amber pills. */
.ta-badge-clay  { background: #E8C9C9; color: #9C3B3B; }
/* RBAC role ramp (Team UI PR-2 / v1.27.0.0). gray-baseline → sage-ramp so the
   access tier reads "elevated-or-not" at a glance: member = neutral gray
   (.ta-badge-gray above), editor = sage-light, admin = sage (.ta-badge-sage
   above), owner = sage-dark FILLED. Semantically honest (sage = brand
   trust/access); avoids the amber=warning / clay=error collisions. Every tier
   also carries its text label, so the ramp is colour-blind-safe. Design
   Decisions Log: DESIGN.md "RBAC access-tier badge ramp". */
.ta-badge-sage-light { background: #DCEBE1; color: #3F6149; }
.ta-badge-owner      { background: #345C44; color: #FFFFFF; }
/* Feedback "triaged" status (Lane D) — info blue, the DESIGN-lock #6B93B5 family.
   A distinct hue from the sage/amber/clay so "in flight" reads apart from
   new (amber) / shipped (sage) / wontfix (gray) at a glance. Colour-blind-safe:
   every status pill also carries its text label. */
.ta-badge-info  { background: #D6E3EF; color: #335A7D; }

/* ── Invite DELIVERY status pills (Goal 1.8 step 2) ───────────────────────────
   A SEPARATE visual language from the sage ACCESS ramp above so the two pill
   columns never read as the same kind of tag. Attention hierarchy: success is
   QUIET, problems are LOUD — only Bounced (clay) + Expired (amber, reused from
   .ta-badge-amber/.ta-badge-clay) carry a colour FILL, so a busy owner's eye
   lands on the invites that need action. Decided in /plan-design-review. */
.ta-badge-outline {           /* "Not sent yet" — quietest, a transient pre-state */
  background: transparent;
  color: #6B7570;
  border: 1px solid #D4DDD7;
  /* offset the 1px border so the pill height matches the filled pills */
  padding: 2px 9px;
}
.ta-badge-sent {              /* "Sent" — quiet pill, the sage lives in the check */
  background: #F1F5F2;
  color: #4E5A52;
}
.ta-badge-sent .ta-sent-check { color: #7BA68A; margin-right: 3px; vertical-align: -1px; }
.ta-delivery-help {           /* inline helper line under a bounced/expired row */
  font-size: 12px;
  color: #6B7570;
  margin: 2px 0 0;
}

/* ── Owner cell (step-3 admin-hardening) ─────────────────────────────────────
   Stacked: email on top, an optional failure helper line, then the
   onboarding-state pill. Reuses the ta-badge-* + ta-delivery-help vocabulary
   above; this block is only the container layout. */
.ta-owner-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ta-owner-email { font-size: 13px; color: #3B3F3C; word-break: break-word; }
.ta-owner-pill { line-height: 1; }

/* ── Copy-link result panel (Goal 1.8 step 2) ────────────────────────────────
   Shown in a modal after an invite/resend. Confirms delivery + surfaces the
   one-time link for out-of-band hand-off. */
.ta-invite-emailed {          /* the conditional "we emailed an invite to X" strip */
  display: flex;
  align-items: center;
  gap: 8px;
  background: #EDF5F0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #3B3F3C;
  margin-bottom: 16px;
}
.ta-invite-emailed .ta-emailed-check { color: #7BA68A; flex: none; }
.ta-link-card {
  border: 1px solid #D4DDD7;
  border-radius: 10px;
  padding: 14px;
}
.ta-link-card-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #A3AEA7;
  font-weight: 600;
  margin: 0 0 8px;
}
.ta-link-row { display: flex; gap: 8px; align-items: center; }
.ta-link-field {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-family: inherit;
  color: #3B3F3C;
  background: #FAFCFA;
  border: 1px solid #E4EBE6;
  border-radius: 6px;
  padding: 8px 10px;
  text-overflow: ellipsis;
}
.ta-link-help { font-size: 12px; color: #6B7570; margin: 10px 0 0; }
.ta-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  color: #3B3F3C;
  margin: 0 0 14px;
}
/* accessible-but-invisible: form labels + aria-live regions the screen reader
   needs but the layout doesn't show (Goal 1.8 step 2 a11y). */
.lr-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Goal 1.9 PR 1 — admin_alerts banner badge ──────────────────────────── */
/* Goal 1.12 — superadmin dashboard tabs. Tab bar lives above the body
   inside the screen shell. Three tabs (Health | Alerts | Practices)
   when HEALTH_TAB_ENABLED is true; two (Alerts | Practices) otherwise.
   The alerts badge slot relocates here so the badge is visible from
   every tab — previously it lived inside the Practices-tab table head,
   which made it invisible on the default Health tab. */
.ta-tab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid #E0E5E1;
  padding: 0 0 0 4px;
  margin-bottom: 18px;
}
.ta-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #6B7570;
  cursor: pointer;
  margin-bottom: -1px; /* overlap the bar's bottom border */
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ta-tab:hover { color: #3B3F3C; }
.ta-tab-active {
  color: #3B3F3C;
  border-bottom-color: #7BA68A;
  font-weight: 600;
}
.ta-tab:focus-visible { outline: 2px solid #7BA68A; outline-offset: 2px; border-radius: 4px; }
.ta-tab-bar-spacer { flex: 1 1 auto; }

/* Goal 1.12 — Health tab. At-a-glance band sits above the ranked table:
   three cells (active practices, active patients 30d, at churn risk).
   The third cell is tinted clay when the count is non-zero — that's the
   "look here first" signal Anthony asked for. */
.ta-at-a-glance {
  display: flex;
  gap: 14px;
  margin: 6px 0 20px;
}
.ta-glance-cell {
  flex: 1 1 0;
  background: #F4F7F2;
  border: 1px solid #E0E5E1;
  border-radius: 8px;
  padding: 14px 18px;
}
.ta-glance-cell-risk { /* tint when churn count > 0 — handled inline; */ }
.ta-glance-num {
  /* DM Sans (the body sans), not the Cormorant serif — these are dashboard KPI
     figures; the serif numerals read as dated/awkward next to the sans labels
     and the data table. Sans 500 + tabular-nums = clean, aligned numbers. */
  font-family: 'DM Sans', sans-serif;
  font-size: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #3B3F3C;
  line-height: 1.1;
}
.ta-glance-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7570;
  margin-top: 4px;
}

.ta-table-health th[title] { cursor: help; border-bottom: 1px dotted #B8C0BC; }
.ta-cell-muted { color: #A8B0AC; font-style: italic; }
.ta-growth-pos { color: #4A7A5F; font-weight: 600; font-variant-numeric: tabular-nums; }
.ta-growth-neg { color: #9C3B3B; font-weight: 600; font-variant-numeric: tabular-nums; }
.ta-mini-badge { font-size: 10px; padding: 1px 5px; margin-left: 4px; }

/* The badge slot lives in the admin dashboard header between the title and
   the "Provision tenant" button. When the snapshot listener reports 0 unread
   alerts the slot is empty; ≥1 alert renders an .ta-alerts-pill with a
   colored dot + count. Color: red on HIGH, orange on MEDIUM-only, gray for
   unknown. Goal 1.12 — slot moved to .ta-tab-bar header so it survives
   tab switches; the badge button routes through taSwitchAdminTab('alerts'). */
.ta-alerts-slot { margin-left: auto; margin-right: 12px; display: inline-flex; align-items: center; }
.ta-alerts-pill { display: inline-flex; align-items: center; gap: 6px; }
.ta-alerts-pill-red    { color: #9C3B3B; }
.ta-alerts-pill-orange { color: #8A6D1F; }
.ta-alerts-pill-gray   { color: #6B7570; }
.ta-alerts-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle;
}
.ta-alerts-dot-red    { background: #D96B6B; }
.ta-alerts-dot-orange { background: #E0A93B; }
.ta-alerts-dot-gray   { background: #B8C0BC; }
.ta-alerts-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── mini buttons / danger link ──────────────────────────────────────────── */
.ta-mini { font-size: 11px; padding: 5px 10px; }
.ta-danger-link { color: #D96B6B; }
.ta-danger-link:hover { color: #B84F4F; }

/* ── states ──────────────────────────────────────────────────────────────── */
.ta-loading, .ta-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: #A3AEA7;
}
.ta-errbox {
  background: #FBEEEE;
  border: 1px solid #E8C9C9;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: #B84F4F;
  margin: 12px 0;
}

/* ── confirm modal extras ────────────────────────────────────────────────── */
.ta-confirm-body { font-size: 14px; color: #6B7570; line-height: 1.55; margin: 8px 0 14px; }
.ta-confirm-reason { margin-bottom: 6px; }

/* ── Goal 1.3 T8 — doctor cell in the Team table ─────────────────────────── */
.ta-doctor-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 200px;
}
.ta-doctor-cell .ta-badge-sage { flex: none; }
.ta-doctor-display {
  font-weight: 600;
  color: #2F4A38;
}
.ta-doctor-formal {
  font-size: 12px;
  color: #6B7D72;
  font-style: italic;
}
.ta-pending-flag {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-style: italic;
  color: #8A6D1F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ta-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}
.ta-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.ta-required { color: #B33333; font-weight: 700; }
.ta-hint     { color: #6B7D72; font-size: 11px; font-style: italic; font-weight: 400; }
.ta-hidden   { display: none; }

/* ── grace banner (T19 — scheduled-suspension wind-down) ─────────────────── */
.lr-grace-banner {
  background: #F0E0B8;
  color: #8A6D1F;
  border-bottom: 1px solid #E0CB8A;
  text-align: center;
  padding: 10px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

/* ── toast ───────────────────────────────────────────────────────────────── */
.ta-toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #4E7A5E;
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 10000;
}
.ta-toast-err { background: #C0504F; }

/* ── Goal 1.4 P1-6 — Services & Pricing save bar override ────────────────── */
/* care-plan.js's `.lr-save-bar` is `position:fixed; bottom:0; left:0; right:0`
 * — designed for the now-deleted #screenCPSettings full-screen takeover.
 * Inside the Settings rail's `.ta-panel`, that overlays the rest of the
 * Settings page (the rail nav, the page chrome) instead of pinning to the
 * panel. Re-scope to the panel: relative + bottom-of-content so it sits at
 * the natural end of the panel and scrolls with it. The `.lr-spacer90`
 * above it is also no longer needed (sticky positioning would re-introduce
 * it; relative drops it cleanly), but we keep the spacer harmless to avoid
 * touching the care-plan render path the legacy Care Plan editor relies on. */
.ta-panel .lr-save-bar {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── responsive (DR7 / §8) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ta-body { padding: 20px 14px 56px; }
  .ta-page-title { font-size: 28px; }
  /* Settings card: the left rail collapses to a horizontal scroller. */
  .ta-settings-card { flex-direction: column; }
  .ta-rail {
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #D4DDD7;
  }
  .ta-rail-item { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .ta-rail-item.active { border-left: 0; border-bottom-color: #7BA68A; }
  .ta-panel { padding: 20px 16px; }
  /* Panel head + save bar stack so the action button is full-width-reachable. */
  .ta-panel-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .ta-savebar { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  /* Wide multi-column dashboards (admin / audit / health) scroll horizontally
     rather than crushing their columns. The Team-section tables opt OUT via
     .ta-table-stack and collapse to labeled rows instead, so their Edit /
     Remove / role controls stay on-screen — a sideways-scroll strip pushed the
     action buttons off the right edge on phones (M-1). */
  .ta-table:not(.ta-table-stack) { display: block; overflow-x: auto; white-space: nowrap; }
  .ta-cell-actions, .ta-rowmenu { flex-wrap: wrap; }
  .ta-table-stack, .ta-table-stack tbody { display: block; }
  .ta-table-stack thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ta-table-stack tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #E4EBE6;
  }
  .ta-table-stack tr:last-child { border-bottom: 0; }
  .ta-table-stack td {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-bottom: 0;
    padding: 4px 2px;
    white-space: normal;
  }
  .ta-table-stack td::before {
    content: attr(data-label);
    flex: 0 0 76px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #A3AEA7;
    font-weight: 600;
    padding-top: 2px;
  }
  /* The actions column carries no header; drop its label gutter so the
     Edit / Remove buttons sit flush-left under the row. */
  .ta-table-stack td[data-label=""]::before { content: none; }
  .ta-table-stack .ta-rowmenu { justify-content: flex-start; }
  /* 44px touch targets on the Phase 4 screens (WCAG 2.5.5). */
  .ta-body .btn, .ta-rail-item { min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Goal 1.13 — Logo picker
 * Inline picker rendered below the file input in identity-logo. Sage-mist
 * panel per DESIGN.md tokens; reuses .ifr-footer + .ifr-footer-logo +
 * .ifr-footer-info from app.css for the simulation (eng-review F4 — shared
 * class contract so future report-footer CSS changes affect both surfaces).
 * Avant Garde is already @font-face'd in app.css; no per-stylesheet load.
 * ───────────────────────────────────────────────────────────────────────── */

/* Existing 80px preview gains layout flex so the post-bake Adjust button
   can sit beside the image. */
.ta-logo-preview { flex-wrap: wrap; gap: 12px; }
.ta-logo-adjust-btn { font-size: 12px; padding: 6px 14px; }

.ta-logo-picker { margin-top: 16px; }

.ta-logo-picker-panel {
  background: #EDF5F0; /* --sage-mist */
  border: 1px solid #D4DDD7;
  border-radius: 10px;
  padding: 16px;
}

.ta-logo-picker-label {
  font-family: 'ITC Avant Garde Gothic', 'DM Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #6B7570;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Footer simulation. .ifr-footer (app.css:362) supplies the white bg + flex.
   We override the heavy 44px horizontal padding to a tighter inline-panel
   value, and round the corners so it visually reads as a sample panel. */
.ta-logo-sim {
  border-radius: 8px;
  min-height: 64px;
  margin-bottom: 20px;
  padding: 14px 18px;
}

/* Source canvas wrap + the canvas itself */
.ta-logo-canvas-wrap {
  background: #FAFCFA;
  border: 1px dashed #A3AEA7;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.ta-logo-source {
  display: block;
  width: 100%;
  height: auto;
  max-height: 192px;
  cursor: grab;
  /* Checker background so the operator sees what is/isn't transparent on the
     source canvas as they drag/zoom + apply background-removal. */
  background:
    linear-gradient(45deg, #f4f6f5 25%, transparent 25%),
    linear-gradient(-45deg, #f4f6f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f4f6f5 75%),
    linear-gradient(-45deg, transparent 75%, #f4f6f5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border-radius: 4px;
}
.ta-logo-source:active { cursor: grabbing; }
.ta-logo-source:focus-visible {
  outline: 2px solid #7BA68A;
  outline-offset: 2px;
}

/* Corner-resize stage + handles (replaces the zoom slider). The stage wraps the
   canvas so the absolutely-positioned handles sit in canvas coordinates; JS
   (CSSOM, CSP-allowed) sets each handle's left/top after every paint. */
.ta-logo-stage { position: relative; line-height: 0; }
.ta-logo-bbox { position: absolute; inset: 0; pointer-events: none; }
.ta-logo-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid #7BA68A;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(60, 80, 70, 0.35);
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
}
.ta-logo-handle:hover { border-color: #4E7A5E; }
.ta-logo-handle-nw, .ta-logo-handle-se { cursor: nwse-resize; }
.ta-logo-handle-ne, .ta-logo-handle-sw { cursor: nesw-resize; }

.ta-logo-hint {
  font-size: 13px;
  color: #6B7570;
  margin-bottom: 16px;
}

/* Background-removal row */
.ta-logo-bg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
/* QA-BUG-2 fix — picker secondary buttons (Make-background-transparent + Adjust).
 * `.btn-secondary` in app.css is rgba(255,255,255,0.15) bg + white text, scoped
 * for the dark sage top bar. On light sage-mist / cream panels it renders
 * effectively invisible. These overrides give picker secondary buttons sage-on-
 * sage-mist treatment per /plan-design-review Pass 5's locked spec
 * (Adjust button: matches `.btn-secondary` — sage-mist bg, sage text). */
.ta-logo-bg-btn.btn-secondary,
.ta-logo-adjust-btn.btn-secondary {
  background: #EDF5F0;
  color: #4E7A5E;
  border: 1px solid #C4DDCC;
  font-weight: 600;
}
.ta-logo-bg-btn.btn-secondary:hover,
.ta-logo-adjust-btn.btn-secondary:hover {
  background: #DCE9E0;
  border-color: #7BA68A;
  color: #345C44;
}

.ta-logo-bg-btn { font-size: 12px; padding: 6px 14px; }
/* QA-BUG-1 fix — `:not(.lr-hidden)` keeps `display:flex` from clobbering
 * `.lr-hidden { display: none }`. tenant-admin.css loads after lr-classes.css
 * so equal-specificity selectors lose; this scope makes display:none always
 * win when the tolerance slider is meant to be hidden. */
.ta-logo-bg-tolerance:not(.lr-hidden) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.ta-logo-bg-tolerance input[type="range"] { flex: 1; }
.ta-logo-bg-tolerance-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-feature-settings: 'tnum';
  color: #3B3F3C;
  min-width: 36px;
  text-align: right;
}

/* Controls — actions row (the zoom slider was replaced by corner-drag handles). */
.ta-logo-controls { display: flex; flex-direction: column; gap: 16px; }
/* Amber soft-warn chip — AAA contrast: dark gray text on amber bg = 7.3:1.
   /plan-design-review Pass 6 caught the AA fail of light text on this bg. */
.ta-logo-zoom-warn {
  background: #D4A843;
  color: #3B3F3C;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  transition: opacity 0.15s ease;
}

.ta-logo-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* The actions row now pairs the blur-warn chip (left) with the button pair
   (right) since the zoom slider is gone. */
.ta-logo-actions-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Text-button (Reset). Phase 4 vocabulary for low-emphasis text actions. */
.btn-text {
  background: transparent;
  border: 0;
  color: #6B7570;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: color 0.15s ease;
}
.btn-text:hover { color: #4E7A5E; }
.btn-text:focus-visible { outline: 2px solid #7BA68A; outline-offset: 2px; }

/* Responsive — phone landscape + narrow iPad (≤768) and phone portrait
   (≤480) per DESIGN.md (App-Screen Responsive). The Phase 4 surface already
   has `.ta-body .btn { min-height: 44px }` at ≤768; we extend touch targets
   to picker-specific buttons here. */
@media (max-width: 768px) {
  .ta-logo-source { max-height: 160px; }
  .ta-logo-actions { flex-direction: column; align-items: stretch; }
  .ta-logo-actions-btns { margin-left: 0; }
  .ta-logo-actions .btn { min-height: 44px; }
  .ta-logo-bg-btn { min-height: 44px; }
  /* Fatter corner dots for touch. */
  .ta-logo-handle { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .ta-logo-picker-panel { padding: 12px; }
  .ta-logo-source { max-height: 144px; }
}

/* ── PR-1 guided first-run wizard (#screenWizard) — design-review variant A ──
 * Full-screen stepper. Colors/type from DESIGN.md (sage #7BA68A / warm
 * #C9956B / Cormorant italic titles / Avant-Garde labels). Reuses .ta-field /
 * .ta-input / .ta-required for the form rows; adds only the stepper chrome. */
.lrw-shell { display: flex; min-height: 100vh; background: #E4EBE6; font-family: 'DM Sans', sans-serif; }
.lrw-sidebar { flex: 0 0 260px; background: #EDF5F0; border-right: 1px solid #D4DDD7; padding: 40px 28px; display: flex; flex-direction: column; }
.lrw-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 300; font-style: italic; color: #4E7A5E; }
.lrw-brand-sub { font-family: 'ITC Avant Garde Gothic', 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #7BA68A; margin-top: 6px; }
.lrw-brand-tag { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; color: #6B7570; margin-top: auto; line-height: 1.5; }
.lrw-main { flex: 1; max-width: 720px; margin: 0 auto; padding: 48px 40px 64px; width: 100%; }
/* The Pricing step embeds the full shared services/pricing component, which is
   far denser than the other steps' few fields. At 720px it gets crammed to
   ~510px inner (vs ~774px in Settings, where it looks right). Widen this step
   only so the component breathes; width:100% keeps it full-width below 984px.
   984px yields a ~774px inner pricing card — matched empirically to the Settings
   render so the identical component looks the same in both surfaces. */
.lrw-main--wide { max-width: 984px; }
/* Spine context line: the wizard is step 1 of the shared 6-step journey. Always
   visible (the wizard's own .lrw-stepcount is desktop-hidden), sage-dark eyebrow
   token matching the getting-started .onb-eyebrow / lr-coach-eyebrow style. */
.lrw-spine-context { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #4E7A5E; font-weight: 600; margin-bottom: 10px; }
.lrw-stepcount { display: none; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #6B7570; margin-bottom: 14px; }
.lrw-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 36px; }
.lrw-step { flex: 1; }
.lrw-step-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.lrw-step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid #D4DDD7; color: #A3AEA7; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.lrw-step-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #A3AEA7; text-align: center; white-space: nowrap; }
.lrw-step-done .lrw-step-dot { background: #7BA68A; border-color: #7BA68A; color: #fff; }
.lrw-step-done .lrw-step-label { color: #6B7570; }
.lrw-step-active .lrw-step-dot { background: #fff; border-color: #C9956B; color: #C9956B; box-shadow: 0 0 0 3px rgba(201,149,107,.18); }
.lrw-step-active .lrw-step-label { color: #3B3F3C; font-weight: 600; }
.lrw-step-btn:focus-visible { outline: 2px solid #7BA68A; outline-offset: 3px; border-radius: 6px; }
.lrw-step-head { margin-bottom: 24px; }
.lrw-step-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-style: italic; font-size: 32px; color: #3B3F3C; margin: 0 0 6px; }
.lrw-step-help { font-size: 14px; color: #6B7570; margin: 0; line-height: 1.5; }
.lrw-step-body { background: #FAFCFA; border: 1px solid #D4DDD7; border-radius: 12px; padding: 28px; }
.lrw-note { font-size: 13px; color: #6B7570; background: #EDF5F0; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; }
.lrw-status { min-height: 18px; margin: 14px 2px 0; font-size: 13px; color: #6B7570; }
.lrw-status-err { color: #D96B6B; }
.lrw-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
/* Theme C — the right-hand action group: ghost "Skip this step for now" + the
 * primary "Save & continue"/"Finish". Grouped so the exit ("Finish later") stays
 * visually separate on the left. */
.lrw-footer-right { display: flex; gap: 12px; align-items: center; }
/* Theme C — pricing-skip consequence modal (D3). Plain confirm-style title +
 * muted body, matching the destructive-confirm modal palette. */
.lrw-skip-title { font-size: 19px; font-weight: 600; color: #3B3F3C; margin: 0 0 4px; }
.lrw-skip-body { font-size: 14px; color: #6B7570; line-height: 1.55; margin: 8px 0 4px; }
@media (max-width: 768px) {
  .lrw-sidebar { display: none; }
  .lrw-main { padding: 28px 16px 48px; }
  .lrw-stepcount { display: block; }
  .lrw-step-label { display: none; }
  .lrw-step-btn { min-height: 44px; justify-content: center; }
  .lrw-step-dot { width: 36px; height: 36px; }
  .lrw-step-title { font-size: 26px; }
  .lrw-step-body { padding: 20px; }
  .lrw-footer { flex-direction: column-reverse; gap: 10px; }
  .lrw-footer .btn { width: 100%; min-height: 44px; }
  /* Theme C — stack the right-hand group full-width too (primary on top). */
  .lrw-footer-right { flex-direction: column-reverse; gap: 10px; width: 100%; }
}

/* ── PR-2 wizard step bodies (Identity / Doctor / Reply-to) ─────────────────
 * Same DESIGN.md palette. Identity adds the inline logo + "what families see"
 * footer preview; Doctor adds the added-so-far chips + invite toggle; Reply-to
 * adds the consequence copy. Logo picker chrome itself is the shared .ta-logo-*
 * from the Settings section (reused by id), so only the wizard-specific
 * surfaces are styled here. */
.lrw-nudge { font-size: 13px; color: #8A6A45; background: #FBF1E7; border: 1px solid #EBD9C5; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; line-height: 1.5; }
.lrw-hint { font-size: 12px; color: #8A938D; margin: 6px 2px 0; line-height: 1.5; }
.lrw-logo-status { min-height: 16px; margin: 8px 2px 0; font-size: 12px; color: #6B7570; }
.lrw-logo-status.ta-save-err { color: #D96B6B; }
.lrw-logo-status.ta-save-ok { color: #4E7A5E; }

/* "What families see" report-footer preview */
.lrw-fam { margin-top: 22px; }
.lrw-fam-cap { font-family: 'ITC Avant Garde Gothic', 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #7BA68A; margin-bottom: 8px; }
.lrw-fam-card { background: #fff; border: 1px solid #D4DDD7; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(60,80,70,.06); }
.lrw-fam-lines { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.lrw-fam-lines span { display: block; height: 7px; border-radius: 4px; background: #EDF1EE; }
.lrw-fam-lines span:nth-child(1) { width: 70%; }
.lrw-fam-lines span:nth-child(2) { width: 92%; }
.lrw-fam-lines span:nth-child(3) { width: 58%; }
.lrw-fam-footer { display: flex; align-items: center; gap: 14px; border-top: 1px solid #ECF0ED; padding-top: 14px; }
.lrw-fam-logo { flex: 0 0 auto; min-width: 64px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #A3AEA7; font-style: italic; background: #F6F8F6; border: 1px dashed #D4DDD7; border-radius: 6px; padding: 0 8px; }
.lrw-fam-logo img { max-height: 40px; max-width: 160px; border: none; background: none; padding: 0; }
.lrw-fam-info { min-width: 0; }
.lrw-fam-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 300; font-style: italic; color: #3B3F3C; line-height: 1.2; }
.lrw-fam-contact { font-size: 12px; color: #6B7570; margin-top: 3px; }

/* Doctor step: added-so-far rows (Theme B #8) + invite toggle */
.lrw-doc-added { margin-bottom: 16px; }
.lrw-doc-added-cap { font-family: 'ITC Avant Garde Gothic', 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #7BA68A; margin-bottom: 8px; }
/* Stacked rows (mirrors the Settings signing-doctor rows). Name cell truncates;
   Edit/Remove stay reachable. Hex literals, matching the .lrw-* convention. */
.lrw-doc-list { list-style: none; padding: 0; margin: 0; }
.lrw-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #D4DDD7; }
.lrw-doc-row:last-child { border-bottom: none; }
.lrw-doc-row-editing { background: #FBF5EF; border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.lrw-doc-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #3B3F3C; }
.lrw-doc-row-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.lrw-doc-sprout { flex: 0 0 auto; font-size: 13px; line-height: 1; }
.lrw-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; cursor: pointer; }
.lrw-check input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: #7BA68A; }
.lrw-check-text { font-size: 14px; color: #3B3F3C; }
.lrw-check-sub { display: block; font-size: 12px; color: #8A938D; margin-top: 2px; line-height: 1.45; }
.lrw-check-hint { font-size: 12px; color: #4E7A5E; margin: 8px 0 0; padding-left: 26px; }
.lrw-doc-add-row { margin-top: 16px; }

/* Reply-to step: prominent status live region + consequence copy */
.lrw-rt-status { margin-top: 4px; }
.lrw-rt-why { margin-top: 16px; padding: 14px 16px; background: #EDF5F0; border-radius: 8px; }
.lrw-rt-why-p { font-size: 13px; color: #5B655F; line-height: 1.55; margin: 0 0 8px; }
.lrw-rt-why-p:last-child { margin-bottom: 0; }
.lrw-rt-why-p strong { color: #3B3F3C; }
/* Promote the reused .ta-replyto-status pending/verified/error states to a
 * prominent card inside the wizard (Settings renders them as a small help row). */
.lrw-rt-status .ta-replyto-status { font-size: 13px; padding: 12px 14px; border-radius: 8px; line-height: 1.5; }
.lrw-rt-status .ta-replyto-status-pending { background: #FBF1E7; color: #8A6A45; border: 1px solid #EBD9C5; }
.lrw-rt-status .ta-replyto-status-verified { background: #EAF3EC; color: #3F6E50; border: 1px solid #CFE3D4; }
.lrw-rt-status .ta-replyto-status-error { background: #FBEAEA; color: #B5524F; border: 1px solid #EBCBCA; }
/* Theme D #16 — in-body "Verify this email" action. Warm secondary on the light
   step body: warm outline + warm-dark text, warm-mist hover. Disabled (empty /
   already-verified) recedes to muted. The .btn base supplies font/padding/radius. */
.lrw-rt-verify-row { margin-top: 10px; }
.lrw-rt-verify-btn { background: var(--white); color: var(--warm-dark); border: 1px solid var(--warm); }
.lrw-rt-verify-btn:hover { background: var(--warm-mist); }
.lrw-rt-verify-btn:disabled { color: var(--gray-light); border-color: var(--border); background: var(--white); cursor: default; }

@media (max-width: 768px) {
  .lrw-fam-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Touch targets for the doctor-row Edit/Remove (WCAG 2.5.5), same tier as
     .lrw-footer .btn. iPad portrait (810-834) keeps the desktop row per the
     DESIGN.md breakpoint doctrine (768 catches phones). */
  .lrw-doc-row-actions .btn { min-height: 44px; }
}
@media (max-width: 480px) {
  /* Phone: stack the actions under the name so two 44px buttons + a long name
     never crowd a ~343px row. */
  .lrw-doc-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .lrw-doc-row-actions { justify-content: flex-end; }
}

/* ── Security / MFA (Security/MFA roadmap step 1) ─────────────────────────────
   The Settings → Security tab + standalone Account Security surface. Calibrated
   to DESIGN.md: sage ok / warm pending / clay err, #FAFCFA cards at 10px radius,
   44px touch targets. No inline style (CSP); these classes back the markup in
   tenant-admin.js _taRenderSecurity. */
.ta-sec-card {
  background: #FAFCFA;
  border: 1px solid #E5E2DC;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ta-sec-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ta-sec-card-head-text { min-width: 0; }
.ta-sec-h {
  font-size: 15px;
  font-weight: 600;
  color: #3B3F3C;
  margin: 0 0 4px;
}
.ta-sec-h-sub { font-weight: 400; color: #6B7570; font-size: 13px; }
.ta-sec-desc {
  font-size: 13px;
  color: #6B7570;
  margin: 0 0 12px;
  line-height: 1.5;
}
.ta-sec-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ta-sec-danger { color: #C15F4E; }

/* status pill (On = sage, Off = neutral) */
.ta-sec-pill {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.ta-sec-pill-on { background: rgba(143, 166, 142, 0.16); color: #4A5C49; }
.ta-sec-pill-off { background: rgba(163, 174, 167, 0.14); color: #6B7570; }

/* inline status row + the require-MFA notice */
.ta-sec-msg, .ta-sec-status {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.ta-sec-status-ok { background: #EAF3EC; color: #3F6E50; border: 1px solid #CFE3D4; }
.ta-sec-status-err { background: #FBEAEA; color: #B5524F; border: 1px solid #EBCBCA; }
.ta-sec-status-warn { background: #FBF1E7; color: #8A6A45; border: 1px solid #EBD9C5; }

/* device rows */
.ta-sec-devices { margin: 4px 0 14px; }
.ta-sec-dev-empty { font-size: 13px; color: #6B7570; line-height: 1.5; }
.ta-sec-dev-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E5E2DC;
}
.ta-sec-dev-row:last-child { border-bottom: none; }
.ta-sec-dev-meta { min-width: 0; }
.ta-sec-dev-name { font-size: 13px; font-weight: 500; color: #3B3F3C; }
.ta-sec-dev-cur { font-size: 11px; font-weight: 600; color: #4A5C49; text-transform: uppercase; letter-spacing: 0.5px; }
.ta-sec-dev-when { font-size: 11px; color: #A3AEA7; }
.ta-sec-dev-remove {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #C15F4E;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 6px;
}
.ta-sec-dev-remove:hover { background: rgba(193, 95, 78, 0.08); }
.ta-sec-dev-remove:focus-visible { outline: 2px solid #C15F4E; outline-offset: -2px; }

/* ── email-template-port — report-email subject/body editor + live preview ──── */
.ta-section-sep { border-top: 1px solid #D4DDD7; margin: 22px 0 18px; }
.ta-email-content { margin-top: 4px; }
.ta-email-panel { margin-top: 6px; }
.ta-label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.ta-label-row .ta-label { margin: 0; }
.ta-insert-token {
  border: 1px solid #C4DDCC; background: #EDF5F0; color: #4E7A5E;
  border-radius: 6px; font-family: 'DM Sans', sans-serif; font-weight: 600;
  cursor: pointer; flex: 0 0 auto; transition: background 0.15s, border-color 0.15s;
}
.ta-insert-token:hover { background: #C4DDCC; }
.ta-insert-token:focus-visible { outline: 2px solid #7BA68A; outline-offset: 2px; }
.ta-email-textarea { min-height: 120px; resize: vertical; line-height: 1.5; font-family: 'DM Sans', sans-serif; }
.ta-email-count { color: #A3AEA7; font-variant-numeric: tabular-nums; }
/* Theme D #14 — "Using default" transparency tag (the field tracks the default,
   won't freeze today's copy) + "Reset to default" link (restore the default text).
   Mutually exclusive (one is .ta-hidden at a time). Calm sage, plain text. */
.ta-email-usingdefault { color: var(--sage-dark); font-size: 11px; }
.ta-email-reset { background: none; border: none; padding: 0; color: var(--sage-dark); font-family: 'DM Sans', sans-serif; font-size: 11px; cursor: pointer; text-decoration: underline; }
.ta-email-reset:hover { color: var(--sage); }

/* Live preview facsimile — CSP-clean (classes only). Resolved subject/body TEXT
   matches the sent email; the chrome is a class-based stand-in for the inline-
   styled email scaffold. */
.lr-email-preview {
  max-width: 600px; margin: 4px 0 0; border: 1px solid #D4DDD7;
  border-radius: 10px; overflow: hidden; background: #fff;
}
.lr-email-preview-head {
  background: #4E7A5E; color: #fff; padding: 18px; text-align: center;
  font-size: 18px; font-weight: 600; font-family: 'DM Sans', sans-serif;
}
.lr-email-preview-body { padding: 16px 20px 20px; }
.lr-email-preview-subject-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #A3AEA7;
  font-family: 'Avant Garde', 'DM Sans', sans-serif; margin-bottom: 2px;
}
.lr-email-preview-subject { font-size: 15px; color: #3B3F3C; font-weight: 600; margin-bottom: 12px; }
.lr-email-preview-text { font-size: 15px; color: #3B3F3C; line-height: 1.5; margin: 0 0 8px; }
.lr-email-preview-btn-row { text-align: center; margin: 22px 0; }
.lr-email-preview-btn {
  display: inline-block; background: #7BA68A; color: #fff; padding: 12px 28px;
  border-radius: 6px; font-size: 15px; font-family: 'DM Sans', sans-serif;
}
.lr-email-preview-fine { font-size: 12px; color: #6B7570; margin: 0; }
.lr-email-preview-foot {
  border-top: 1px solid #eee; padding: 14px 20px; text-align: center;
  font-size: 11px; color: #A3AEA7;
}

@media (max-width: 768px) {
  .ta-label-row { flex-wrap: wrap; }
  .ta-insert-token { min-height: 44px; }
}