/* =====================================================================
   CRM Leads/Contacts (read-only) — theme-aware, WCAG-AA, HLC brand.
   All rules scoped to .crm* (no global overrides). Design-system tokens only,
   so light/dark/system all meet AA. Small gold text uses a darkened gold ink in
   light mode (the shared accent is AA only as large text on light surfaces).
   ===================================================================== */

.crm { color: var(--ds-text); font-size: 16px; line-height: 1.5; --crm-gold-ink: #7e6218; }
@media (prefers-color-scheme: dark) { .crm { --crm-gold-ink: var(--ds-accent); } }
:root[data-theme="dark"] .crm { --crm-gold-ink: var(--ds-accent); }
:root[data-theme="light"] .crm { --crm-gold-ink: #7e6218; }

.crm .ds-eyebrow { color: var(--crm-gold-ink); letter-spacing: 1.5px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.crm-title { color: var(--ds-text-hi); font-size: 28px; line-height: 1.2; margin: 4px 0; font-weight: 700; }
.crm-lead { color: var(--ds-text-lo); font-size: 15px; max-width: 72ch; }

.crm-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.crm-bar label { color: var(--ds-text); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.crm-bar select { background: var(--ds-surface-2); color: var(--ds-text-hi); border: 1px solid var(--ds-hairline-strong); border-radius: 10px; padding: 10px 14px; font-size: 15px; min-width: 260px; max-width: 100%; }
.crm-bar select:focus-visible, .crm-btn:focus-visible, .crm-link:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.crm-btn { background: var(--ds-surface-2); color: var(--crm-gold-ink); border: 1px solid var(--ds-hairline-strong); border-radius: 10px; padding: 10px 16px; font-size: 15px; cursor: pointer; }
.crm-btn:hover { border-color: var(--ds-accent); }

.crm-client { font-size: 15px; color: var(--ds-text); margin: 14px 0 4px; }
.crm-client b { color: var(--ds-text-hi); font-size: 17px; }

.crm-note { padding: 12px 16px; border-radius: 10px; margin: 12px 0; font-size: 15px; color: var(--ds-text-hi); border: 1px solid var(--ds-hairline-strong); display: flex; gap: 8px; align-items: flex-start; }
.crm-ok { background: var(--ds-positive-soft); border-color: var(--ds-positive); }
.crm-warn { background: var(--ds-danger-soft); border-color: var(--ds-danger); }
.crm-info { background: var(--ds-surface-2); border-color: var(--ds-hairline-strong); }
.crm-note .crm-ic { font-weight: 700; }

/* ---- coverage grid ---- */
.crm-sec-h { color: var(--ds-text-hi); font-size: 17px; font-weight: 700; margin: 20px 0 8px; }
.crm-cov { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.crm-cov-card { background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: 12px; padding: 14px; }
.crm-cov-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crm-cov-label { color: var(--ds-text-hi); font-weight: 700; font-size: 15px; }
.crm-cov-loaded { color: var(--ds-text-hi); font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.crm-cov-loaded .crm-dash { color: var(--ds-text-lo); font-size: 15px; font-weight: 400; }
.crm-cov-sync { color: var(--ds-text-lo); font-size: 13px; }
.crm-cov-note { color: var(--ds-text); font-size: 13px; margin-top: 8px; line-height: 1.4; }
.crm-cov-next { color: var(--crm-gold-ink); font-size: 13px; margin-top: 6px; }

/* status pills — glyph + text, never colour alone */
.crm-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ds-hairline-strong); color: var(--ds-text-hi); }
.crm-pill-loaded { border-color: var(--ds-positive); background: var(--ds-positive-soft); }
.crm-pill-partial { border-color: var(--ds-accent); background: var(--ds-overlay-2); }
.crm-pill-stale { border-color: var(--ds-accent); background: var(--ds-overlay-2); }
.crm-pill-unavailable { color: var(--ds-text-lo); border-style: dashed; }
.crm-pill-error { border-color: var(--ds-danger); background: var(--ds-danger-soft); }
.crm-pill-not-synced { color: var(--ds-text-lo); border-style: dashed; }

/* ---- contacts table ---- */
.crm-tablewrap { overflow-x: auto; border: 1px solid var(--ds-hairline); border-radius: 12px; margin-top: 10px; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.crm-table th { text-align: left; color: var(--ds-text-lo); font-size: 13px; font-weight: 700; padding: 10px 12px; border-bottom: 2px solid var(--ds-hairline-strong); background: var(--ds-surface-1); position: sticky; top: 0; }
.crm-table td { padding: 10px 12px; border-bottom: 1px solid var(--ds-hairline); color: var(--ds-text); vertical-align: top; }
.crm-table tr:last-child td { border-bottom: none; }
.crm-name { color: var(--ds-text-hi); font-weight: 600; font-size: 15px; }
.crm-tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ds-hairline-strong); color: var(--ds-text); margin: 1px 3px 1px 0; }
.crm-state { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ds-hairline-strong); color: var(--ds-text-hi); }
.crm-state-needs { border-color: var(--ds-danger); background: var(--ds-danger-soft); }
.crm-state-awaiting { border-color: var(--ds-accent); background: var(--ds-overlay-2); }
.crm-state-none, .crm-state-unknown { color: var(--ds-text-lo); border-style: dashed; }
.crm-link { color: var(--crm-gold-ink); font-size: 13px; font-weight: 600; text-decoration: underline; }
.crm-dim { color: var(--ds-text-lo); }

/* ---- payments + guidance ---- */
.crm-pay { background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.crm-pay b { color: var(--ds-text-hi); }
.crm-guide { font-size: 13px; color: var(--ds-text-lo); margin-top: 8px; line-height: 1.5; }
.crm-guide b { color: var(--ds-text); }

.crm-state-box { padding: 28px 16px; text-align: center; color: var(--ds-text-lo); font-size: 15px; }
.crm-err { color: var(--ds-danger-strong); }

@media (max-width: 720px) {
  .crm-cov { grid-template-columns: 1fr; }
  .crm-title { font-size: 24px; }
}