:root {
  --ink: #183042;
  --ink-soft: #536674;
  --navy: #12344d;
  --navy-deep: #0c293e;
  --blue: #0c6fa6;
  --blue-pale: #eaf5fa;
  --green: #397a58;
  --green-pale: #edf7f0;
  --gold: #e8b94f;
  --paper: #ffffff;
  --canvas: #f4f7f8;
  --line: #dbe3e7;
  --line-dark: #c7d2d8;
  --danger: #a33b3b;
  --danger-pale: #fff0f0;
  --shadow: 0 12px 35px rgba(18, 52, 77, .08);
  --radius: 14px;
  --sidebar-width: 244px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

button,
input,
textarea,
select { font: inherit; }

button { color: inherit; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(12, 111, 166, .25);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 18px;
  text-align: center;
  color: #432f00;
  background: #fff0bd;
  border-bottom: 1px solid #ead180;
  font-size: 13px;
  font-weight: 700;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 75% 20%, rgba(12, 111, 166, .18), transparent 25%),
    linear-gradient(145deg, #f7fafb 0%, #edf5f7 46%, #dcebf0 100%);
}

.auth-card {
  width: min(100%, 500px);
  padding: 52px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(199, 210, 216, .8);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(18, 52, 77, .14);
}

.auth-logo { width: 205px; height: auto; margin-bottom: 38px; }
.auth-card h1 { max-width: 410px; margin: 5px 0 16px; font-family: Georgia, serif; font-size: clamp(30px, 5vw, 42px); line-height: 1.08; letter-spacing: -.025em; }
.auth-card > p:not(.eyebrow):not(.auth-note):not(.message) { max-width: 390px; color: var(--ink-soft); font-size: 17px; }
.google-sign-in { min-height: 44px; margin-top: 24px; }
.google-sign-in[aria-busy="true"] { opacity: .65; pointer-events: none; }
.auth-note { margin: 14px 0 0; color: var(--ink-soft); font-size: 13px; }

.eyebrow,
.step-label {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 28px 18px 20px;
  color: white;
  background: var(--navy-deep);
}

.preview-banner:not([hidden]) + .auth-page + .app-shell .sidebar { top: 37px; }

.sidebar-brand {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 0 10px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-brand img { width: 150px; height: auto; }
.sidebar-brand span { padding-bottom: 2px; color: rgba(255, 255, 255, .65); font-size: 12px; }
.sidebar-nav { display: grid; gap: 6px; margin-top: 26px; }

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  gap: 11px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-weight: 650;
}

.nav-item:hover { color: white; background: rgba(255, 255, 255, .07); }
.nav-item.is-active { color: white; background: var(--blue); }
.nav-item.is-disabled { cursor: default; opacity: .65; }
.nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-count { margin-left: auto; min-width: 23px; padding: 2px 6px; color: var(--navy); background: white; border-radius: 999px; text-align: center; font-size: 11px; }
.later-pill { margin-left: auto; padding: 2px 7px; color: #ffe59b; border: 1px solid rgba(255, 229, 155, .45); border-radius: 999px; font-size: 10px; text-transform: uppercase; }
.sidebar-later { margin: 12px 13px 0; color: rgba(255, 255, 255, .43); font-size: 11px; line-height: 1.45; }

.account-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 16px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.account-avatar { display: grid; place-items: center; width: 36px; height: 36px; color: var(--navy); background: var(--gold); border-radius: 50%; font-weight: 800; }
.account-card strong, .account-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card strong { font-size: 13px; }
.account-card span { color: rgba(255, 255, 255, .5); font-size: 10px; }
.account-card .icon-button { color: rgba(255, 255, 255, .7); }

.workspace { min-height: 100vh; margin-left: var(--sidebar-width); padding: 46px clamp(28px, 5vw, 74px) 72px; }
.view { display: none; }
.view.is-visible { display: block; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.page-header h1 { margin: 1px 0 3px; font-family: Georgia, serif; font-size: clamp(34px, 4vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; }
.page-header p:not(.eyebrow) { margin: 8px 0 0; color: var(--ink-soft); font-size: 16px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 750;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button-primary { color: white; background: var(--blue); box-shadow: 0 5px 16px rgba(12, 111, 166, .2); }
.button-primary:hover:not(:disabled) { background: #095f8f; }
.button-secondary { color: var(--ink); background: white; border-color: var(--line-dark); }
.button-secondary:hover:not(:disabled) { border-color: #97aab4; }
.button-dark { color: white; background: var(--navy); }
.button-large { min-height: 52px; padding-inline: 21px; }
.button-small { min-height: 35px; padding: 6px 12px; font-size: 13px; }

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 28px;
}

.icon-button:hover { background: rgba(0, 0, 0, .05); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card { min-height: 124px; padding: 20px 22px; color: var(--ink); background: white; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(18, 52, 77, .04); text-align: left; }
button.stat-card { cursor: pointer; font: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
button.stat-card:hover { transform: translateY(-2px); border-color: #a8c8d7; box-shadow: 0 14px 30px rgba(18, 52, 77, .12); }
button.stat-card:focus-visible { outline: 3px solid rgba(28, 140, 190, .25); outline-offset: 2px; }
.stat-card-blue { border-top-color: var(--blue); }
.stat-card-green { border-top-color: var(--green); }
.stat-card-gold { border-top-color: var(--gold); }
.stat-card-red { border-top-color: var(--danger); }
.stat-card-purple { border-top-color: #7b62a3; }
.stat-card span, .stat-card small { display: block; color: var(--ink-soft); }
.stat-card span { font-weight: 650; }
.stat-card strong { display: block; margin: 6px 0 1px; font-family: Georgia, serif; font-size: 31px; line-height: 1; }
.stat-card small { font-size: 12px; }

.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel h2 { margin: 0; font-family: Georgia, serif; font-size: 24px; line-height: 1.15; }

.funnel-page-header { align-items: center; }
.report-freshness,
.private-label { display: inline-flex; align-items: center; padding: 7px 10px; color: var(--ink-soft); background: white; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.analysis-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.analysis-path-card { display: grid; gap: 6px; min-height: 170px; padding: 25px; cursor: pointer; text-align: left; }
.analysis-path-card:hover { transform: translateY(-2px); border-color: #a8c8d7; box-shadow: 0 16px 38px rgba(18, 52, 77, .12); }
.analysis-path-card strong { font-family: Georgia, serif; font-size: 27px; }
.analysis-path-card small { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.analysis-filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); align-items: end; gap: 13px; margin-bottom: 18px; padding: 18px 20px; }
.analysis-filter-panel label,
.contact-analysis-filter label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.contact-analysis-filter { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(210px, 1.35fr) minmax(190px, 1fr) auto; align-items: end; gap: 13px; margin-bottom: 18px; padding: 18px 20px; }
.contact-analysis-filter > div { display: grid; gap: 2px; padding: 4px 2px; }
.contact-analysis-filter > div strong { font-size: 13px; }
.contact-analysis-filter > div span { color: var(--ink-soft); font-size: 10px; }
.source-performance-panel { margin-bottom: 18px; padding: 25px; }
.source-performance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.source-performance-grid h3 { margin: 0 0 4px; font-size: 14px; }
.source-ranking-list { display: grid; gap: 7px; margin-top: 12px; }
.source-ranking-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; color: var(--ink); background: #f7f9fa; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; }
.source-ranking-row:hover { background: var(--blue-pale); border-color: #b9d9e7; }
.source-ranking-row > span:first-child { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.source-ranking-row strong { font-size: 12px; }
.source-ranking-row small { color: var(--ink-soft); font-size: 10px; }
.source-ranking-empty { padding: 14px; color: var(--ink-soft); background: #f7f9fa; border-radius: 8px; font-size: 11px; }
.analysis-result-note { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; }
.analysis-warning { margin: -5px 0 15px; padding: 11px 13px; color: #654b00; background: #fff5d8; border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; font-size: 12px; }
.funnel-filter-panel { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(250px, 1.6fr); align-items: end; gap: 14px; margin-bottom: 18px; padding: 18px 20px; }
.funnel-filter-panel label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.funnel-filter-panel p { margin: 0; padding: 0 3px 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.funnel-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
/* Four funnel cards read as one row. Three plus a stray fourth reads as a
   mistake, which it was. */
.dashboard-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.application-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dashboard-metric-grid .stat-card, .application-metric-grid .stat-card { min-height: 154px; }
.funnel-summary-grid .stat-card { min-height: 132px; }
.stat-card-focus { color: white; background: linear-gradient(125deg, var(--navy-deep), var(--blue)); border-color: transparent; border-top-color: var(--gold); }
.stat-card-focus span, .stat-card-focus small { color: rgba(255, 255, 255, .75); }
.stat-card-focus strong { font-size: clamp(36px, 4vw, 49px); }
.funnel-panel { padding: 25px; }
.funnel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.funnel-heading p { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; }
.funnel-flow { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: stretch; gap: 6px; padding: 8px 0 3px; overflow-x: auto; }
.funnel-flow-four { grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr); }
.funnel-stage { display: flex; min-width: 120px; min-height: 126px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 16px; color: white; background: linear-gradient(145deg, var(--navy-deep), var(--blue)); border: 0; border-radius: 11px; box-shadow: 0 8px 18px rgba(12, 41, 62, .12); cursor: pointer; text-align: left; }
.funnel-stage:is(article) { cursor: default; }
.funnel-stage:nth-of-type(4n+1) { background: linear-gradient(145deg, #164d6d, #1781b8); }
.funnel-stage:hover { transform: translateY(-2px); box-shadow: 0 12px 23px rgba(12, 41, 62, .18); }
.funnel-stage div span, .funnel-stage div small { display: block; }
.funnel-stage div span { font-size: 14px; font-weight: 800; }
.funnel-stage div small { margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 10px; }
.funnel-stage > strong { font-family: Georgia, serif; font-size: clamp(27px, 2.5vw, 37px); line-height: 1; }
.funnel-connector { display: flex; min-width: 45px; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-soft); text-align: center; }
.funnel-connector strong { color: var(--green); font-size: 14px; }
.funnel-connector > span:first-of-type { font-size: 9px; }
.funnel-connector > span:last-child { color: var(--line-dark); font-size: 25px; line-height: 1; }
.funnel-empty { padding: 45px 20px; background: var(--canvas); border: 1px dashed var(--line-dark); border-radius: 10px; text-align: center; }
.funnel-empty h3 { margin: 0; font-family: Georgia, serif; font-size: 21px; }
.funnel-empty p { max-width: 540px; margin: 8px auto 0; color: var(--ink-soft); }
.funnel-lower-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
.product-panel, .source-health-panel { padding-top: 22px; overflow: hidden; }
.product-panel .funnel-heading, .source-health-panel .funnel-heading { padding: 0 22px; }
.product-table th, .product-table td { text-align: right; }
.product-table th:first-child, .product-table td:first-child { text-align: left; }
.table-empty-cell { padding: 35px 22px !important; color: var(--ink-soft); text-align: center !important; }
.source-health-panel { padding-bottom: 10px; }
.source-health-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.source-health-row > div strong, .source-health-row > div small { display: block; }
.source-health-row > div strong { font-size: 13px; }
.source-health-row > div small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.source-health-row > span:last-child { color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.source-health-dot { width: 9px; height: 9px; background: #9daab2; border-radius: 50%; }
.source-health-dot.is-ready { background: var(--green); box-shadow: 0 0 0 4px var(--green-pale); }
.source-health-dot.is-warning { background: var(--gold); box-shadow: 0 0 0 4px #fff7df; }
.method-note { margin: 17px 3px 0; color: var(--ink-soft); font-size: 11px; }
.resident-report-panel { padding: 25px 25px 0; overflow: hidden; }
.resident-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 -25px; background: var(--line); border-top: 1px solid var(--line); }
.resident-metrics-grid article { min-height: 130px; padding: 22px 24px; background: white; }
.resident-metrics-grid span, .resident-metrics-grid small { display: block; color: var(--ink-soft); }
.resident-metrics-grid span { font-size: 12px; font-weight: 750; }
.resident-metrics-grid strong { display: block; margin: 8px 0 3px; font-family: Georgia, serif; font-size: 28px; line-height: 1.05; }
.resident-metrics-grid small { font-size: 10px; line-height: 1.4; }
.resident-outcome-table-wrap { margin: 0 -25px; }
.resident-comparison-wrap { margin: 0 -25px; border-top: 1px solid var(--line); }
.resident-comparison-wrap tbody tr:first-child td { border-top: 0; }
.resident-lower-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 18px; margin-top: 18px; }
.resident-source-panel { padding-top: 22px; overflow: hidden; }
.resident-privacy-panel { padding: 26px; }
.resident-privacy-panel h2 { margin-bottom: 14px; }
.resident-privacy-panel p:not(.eyebrow) { color: var(--ink-soft); font-size: 13px; }
.resident-privacy-panel p:last-child { margin-bottom: 0; padding-top: 13px; border-top: 1px solid var(--line); }
.merge-note { margin: 0 3px 22px; padding: 11px 14px; color: var(--ink-soft); background: #eaf2f5; border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; font-size: 12px; }
.application-panel { overflow: hidden; }
.application-table td:first-child { min-width: 210px; }
.application-table td:first-child small, .resident-list-table td:first-child small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10px; font-weight: 400; }
.application-table td:nth-child(3) { min-width: 170px; font-weight: 750; }
.application-table td:nth-child(7) { min-width: 170px; }
.resident-list-panel { margin-top: 18px; overflow: hidden; }
.resident-list-table td:first-child { min-width: 220px; }
.resident-list-table td:nth-child(2) { min-width: 210px; }
.contact-data-panel { margin-top: 18px; }
.panel-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; }
.segmented-control { display: inline-flex; gap: 3px; margin-top: 14px; padding: 3px; background: var(--canvas); border: 1px solid var(--line); border-radius: 9px; }
.contact-segments { flex-wrap: wrap; }
.segmented-control button { padding: 6px 11px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 750; }
.segmented-control button.is-active { color: var(--navy); background: white; box-shadow: 0 2px 6px rgba(18, 52, 77, .1); }
.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.search-field { position: relative; display: block; }
.search-field svg { position: absolute; top: 12px; left: 13px; width: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.search-field input { width: min(32vw, 330px); padding-left: 40px; }

input,
textarea,
select {
  width: 100%;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
}

input, select { min-height: 42px; padding: 9px 12px; }
textarea { min-height: 130px; padding: 11px 12px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8999a3; }

.selection-bar { display: flex; align-items: center; gap: 13px; padding: 11px 24px; color: white; background: var(--navy); }
.selection-bar span { color: rgba(255, 255, 255, .72); font-size: 13px; }
.selection-bar .button { margin-left: auto; background: white; color: var(--navy); }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 12px 14px; color: var(--ink-soft); background: #f8fafb; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.sort-header { display: inline-flex; align-items: center; gap: 5px; margin: -8px -10px; padding: 8px 10px; color: inherit; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.sort-header:hover, .sort-header:focus-visible { color: var(--blue); background: #edf4f7; outline: none; }
.sort-header[aria-sort="ascending"] span, .sort-header[aria-sort="descending"] span { color: var(--blue); font-size: 0; }
.sort-header[aria-sort="ascending"] span::after { content: "↑"; font-size: 12px; }
.sort-header[aria-sort="descending"] span::after { content: "↓"; font-size: 12px; }
td { padding: 14px; border-bottom: 1px solid #edf1f3; vertical-align: middle; }
tbody tr:hover { background: #fbfcfd; }
tbody tr:last-child td { border-bottom: 0; }
.check-cell { width: 42px; padding-left: 21px; }
.check-cell input, td input[type="checkbox"] { width: 17px; min-height: 17px; accent-color: var(--blue); }
.contact-name { font-weight: 750; }
.contact-name small { display: block; color: var(--ink-soft); font-weight: 400; }
.contact-name .review-label { width: fit-content; margin-top: 3px; padding: 2px 6px; color: #795900; background: #fff2c8; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.contact-email { color: var(--blue); }
.source-list { display: flex; flex-wrap: wrap; gap: 4px; }
.contact-source { display: grid; gap: 5px; min-width: 135px; }
.contact-source > strong { font-size: 11px; }
.tag { display: inline-block; padding: 3px 7px; color: #3b586a; background: #edf3f5; border-radius: 999px; font-size: 10px; font-weight: 750; }
.tag-alerts { color: #0c5b83; background: var(--blue-pale); }
.tag-hubspot { color: #8d4b22; background: #fff1e9; }
.tag-appfolio { color: #405a27; background: #edf4e6; }
.tag-relationship { color: var(--navy); background: #e7f0f4; white-space: nowrap; }
.email-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.email-status::before { content: ""; width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
.email-status.is-blocked { color: var(--danger); }
.email-status.is-blocked::before { background: var(--danger); }
.row-open { width: 32px; height: 32px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 19px; }
.row-open:hover { color: var(--blue); background: var(--blue-pale); }

.loading-state,
.empty-state { padding: 55px 20px; text-align: center; }
.loading-state { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--ink-soft); }
.spinner { width: 19px; height: 19px; border: 2px solid var(--line-dark); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; color: var(--blue); background: var(--blue-pale); border-radius: 50%; font-size: 28px; }
.empty-state h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.empty-state p { margin: 6px 0 0; color: var(--ink-soft); }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 22px; background: #fbfcfd; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.panel-footer p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.pagination { display: flex; gap: 8px; }

.safety-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--green); background: var(--green-pale); border: 1px solid #cce4d5; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.safety-badge svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.campaign-layout { display: grid; grid-template-columns: minmax(460px, 630px) minmax(360px, 1fr); align-items: start; gap: 24px; }
.campaign-form-column { display: grid; gap: 18px; }
.recipient-panel, .composer-panel, .draft-panel { padding: 24px; }
.panel-heading-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.text-button { padding: 4px; color: var(--blue); background: none; border: 0; cursor: pointer; font-weight: 750; }
.recipient-count { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 12px; }
.recipient-count strong { font-family: Georgia, serif; font-size: 31px; }
.recipient-count span { color: var(--ink-soft); }
.recipient-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.recipient-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 9px; color: #29485a; background: #eef4f6; border-radius: 999px; font-size: 11px; }
.recipient-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-chip button { width: 18px; height: 18px; padding: 0; color: var(--ink-soft); background: rgba(255, 255, 255, .75); border: 0; border-radius: 50%; cursor: pointer; line-height: 1; }
.recipient-placeholder { color: var(--ink-soft); font-size: 13px; }
.audience-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 19px 0 12px; }
.audience-presets button { display: grid; gap: 3px; min-height: 84px; padding: 13px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; text-align: left; }
.audience-presets button:hover { background: var(--blue-pale); border-color: #b9d9e7; }
.audience-presets strong { font-size: 12px; }
.audience-presets span { color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.quiet-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; }
.manual-recipient { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.manual-recipient > label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.manual-recipient > div { display: flex; gap: 8px; }
.manual-recipient input { min-width: 0; }

.composer-panel > div:first-child { margin-bottom: 20px; }
.composer-panel form, .form-stack { display: grid; gap: 16px; }
.composer-panel label, .form-stack label { display: grid; gap: 7px; font-size: 12px; font-weight: 750; }
.composer-panel label small { color: var(--ink-soft); font-weight: 400; }
.optional { color: var(--ink-soft); font-weight: 400; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkbox-row { display: flex !important; grid-template-columns: none; align-items: center; }
.checkbox-row input { width: 17px; min-height: 17px; accent-color: var(--blue); }

.draft-panel > p:not(.step-label) { margin: 17px 0; color: var(--ink-soft); }
.connection-status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.connection-status span { width: 7px; height: 7px; background: #9ba9b1; border-radius: 50%; }
.connection-status.is-connected { color: var(--green); }
.connection-status.is-connected span { background: var(--green); }
.draft-summary { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--canvas); border-radius: 8px; font-size: 13px; }
.draft-summary strong { font-size: 18px; }
.draft-actions { display: flex; gap: 9px; margin-top: 17px; }
.review-confirmation { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; padding: 14px; color: var(--ink); background: #fff9e8; border: 1px solid #ead99e; border-radius: 9px; font-size: 12px; font-weight: 750; }
.review-confirmation input { width: 18px; min-height: 18px; margin: 1px 0 0; accent-color: var(--green); }
.send-panel .connection-status.is-connected { color: var(--green); }

.email-preview-column { position: sticky; top: 32px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
.preview-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.preview-heading span { color: var(--ink-soft); font-size: 11px; }
.email-client { overflow: hidden; background: #e9eef1; border: 1px solid var(--line-dark); border-radius: 12px; box-shadow: var(--shadow); }
.email-client-bar { display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 13px; background: #f9fafb; border-bottom: 1px solid var(--line); }
.email-client-bar > span { width: 8px; height: 8px; background: #d0d8dc; border-radius: 50%; }
.email-client-bar div { margin-left: 8px; color: var(--ink-soft); font-size: 10px; }
.email-client iframe { display: block; width: 100%; height: 680px; background: white; border: 0; }

.resource-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.5fr); align-items: start; gap: 20px; }
.resource-list-panel { overflow: hidden; }
.resource-list-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--line); }
.resource-list-heading span { display: grid; place-items: center; min-width: 28px; min-height: 28px; padding: 3px 8px; color: var(--navy); background: var(--blue-pale); border-radius: 999px; font-size: 12px; font-weight: 800; }
.resource-list { display: grid; max-height: 760px; overflow-y: auto; }
.resource-list-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 17px 20px; color: var(--ink); background: white; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.resource-list-item:hover, .resource-list-item.is-active { background: var(--blue-pale); }
.resource-list-item strong { grid-column: 1 / -1; font-family: Georgia, serif; font-size: 16px; line-height: 1.25; }
.resource-list-item small { grid-column: 1 / -1; color: var(--ink-soft); }
.resource-list-item time { grid-column: 2; grid-row: 1; color: var(--ink-soft); font-size: 10px; }
.resource-status { width: fit-content; padding: 3px 7px; color: var(--ink-soft); background: var(--canvas); border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.resource-status.is-ready { color: var(--green); background: var(--green-pale); }
.resource-editor-panel { padding: 25px; }
.resource-editor-panel form { display: grid; gap: 17px; }
.resource-editor-panel label { display: grid; gap: 7px; font-size: 12px; font-weight: 750; }
.resource-body { min-height: 330px; }
.resource-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.resource-actions #delete-resource { margin-right: auto; }

.message { margin: 13px 0 0; padding: 10px 12px; color: #23573a; background: var(--green-pale); border-radius: 7px; font-size: 12px; }
.message-error { color: var(--danger); background: var(--danger-pale); }

dialog { color: var(--ink); background: white; border: 0; box-shadow: 0 30px 90px rgba(12, 41, 62, .25); }
dialog::backdrop { background: rgba(12, 41, 62, .46); backdrop-filter: blur(2px); }
.drawer { width: min(560px, 94vw); height: 100vh; max-height: none; margin: 0 0 0 auto; padding: 0; border-radius: 0; }
.modal { width: min(580px, 94vw); padding: 0; border-radius: 16px; }
.dialog-header, .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 24px; }
.dialog-header { border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 0; font-family: Georgia, serif; font-size: 26px; }
.dialog-body { padding: 24px; }
.drawer .dialog-body { overflow-y: auto; height: calc(100vh - 156px); }
.dialog-footer { justify-content: flex-end; background: #f8fafb; border-top: 1px solid var(--line); }
#merge-detail-contact { margin-right: auto; }
.detail-hero { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 13px; margin-bottom: 24px; }
.detail-avatar { display: grid; place-items: center; width: 54px; height: 54px; color: var(--navy); background: #dcebf0; border-radius: 50%; font-family: Georgia, serif; font-size: 21px; font-weight: 700; }
.detail-hero strong, .detail-hero span { display: block; }
.detail-hero strong { font-size: 15px; }
.detail-hero span { color: var(--ink-soft); font-size: 12px; }
.detail-section { padding: 19px 0; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 12px; color: var(--ink-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 9px 14px; font-size: 12px; }
.detail-grid dt { color: var(--ink-soft); }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.raw-fields { max-height: 330px; overflow: auto; padding: 12px; background: #f7f9fa; border-radius: 8px; }
.linked-record { display: grid; gap: 3px; width: 100%; margin-bottom: 7px; padding: 11px 12px; color: var(--ink); background: #f7f9fa; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; }
.linked-record:hover { background: var(--blue-pale); border-color: #b9d9e7; }
.linked-record strong { font-size: 12px; }
.linked-record span { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.merge-preview { display: grid; gap: 10px; padding: 16px; background: #f7f9fa; border: 1px solid var(--line); border-radius: 9px; }
.merge-preview h3 { margin: 0 0 2px; color: var(--navy); font-size: 14px; }
.merge-choice { display: grid !important; grid-template-columns: 20px 1fr; align-items: start; gap: 10px !important; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.merge-choice input { width: 18px; min-height: 18px; margin: 1px 0 0; }
.merge-choice span { display: grid; gap: 2px; font-size: 12px; font-weight: 500; }
.merge-choice strong { color: var(--navy); font-size: 13px; }
.merge-choice small { color: var(--ink-soft); font-weight: 400; }

@media (max-width: 1120px) {
  .campaign-layout { grid-template-columns: 1fr; }
  .email-preview-column { position: static; }
  .email-client iframe { height: 600px; }
  .status-column { display: none; }
  td.status-column { display: none; }
  .funnel-filter-panel { grid-template-columns: repeat(3, 1fr); }
  .analysis-filter-panel { grid-template-columns: 1fr 1fr; }
  .contact-analysis-filter { grid-template-columns: 1fr 1fr; }
  .source-performance-grid { grid-template-columns: 1fr; }
  .funnel-filter-panel p { grid-column: 1 / -1; }
  .funnel-summary-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-metric-grid, .application-metric-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .funnel-lower-grid { grid-template-columns: 1fr; }
  .resident-metrics-grid { grid-template-columns: 1fr 1fr; }
  .resident-lower-grid { grid-template-columns: 1fr; }
  .resource-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --sidebar-width: 76px; }
  .sidebar { padding-inline: 10px; }
  .sidebar-brand { justify-content: center; padding-inline: 0; }
  .sidebar-brand img { width: 44px; object-fit: cover; object-position: left; }
  .sidebar-brand span, .nav-item:not(.is-active)::after, .nav-item { font-size: 0; }
  .nav-item { justify-content: center; padding: 10px; }
  .nav-item svg { width: 23px; height: 23px; }
  .nav-count, .later-pill, .sidebar-later, .account-card > div:nth-child(2), .account-card .icon-button { display: none !important; }
  .account-card { display: flex; justify-content: center; padding-inline: 0; }
  .workspace { padding: 32px 22px 58px; }
  .stats-grid { grid-template-columns: 1fr; }
  .funnel-filter-panel { grid-template-columns: 1fr; }
  .analysis-paths { grid-template-columns: 1fr; }
  .analysis-path-card { min-height: 135px; }
  .analysis-filter-panel, .contact-analysis-filter { grid-template-columns: 1fr; }
  .funnel-filter-panel p { grid-column: auto; }
  .stat-card { min-height: 100px; }
  .panel-toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { align-items: stretch; flex-direction: column; }
  .search-field input { width: 100%; }
}

@media (max-width: 600px) {
  :root { --sidebar-width: 0px; }
  .sidebar { position: fixed; inset: auto 0 0 0; width: 100%; height: 68px; flex-direction: row; padding: 8px 14px; }
  .preview-banner:not([hidden]) + .auth-page + .app-shell .sidebar { top: auto; }
  .sidebar-brand, .sidebar-later, .account-card { display: none; }
  .sidebar-nav { grid-template-columns: repeat(6, 1fr); width: 100%; margin: 0; }
  .nav-item { flex-direction: column; gap: 3px; padding: 4px 2px; font-size: 0 !important; line-height: 1; }
  .nav-item::after { content: attr(data-mobile-label); font-size: 9px; }
  .nav-item:not(.is-active)::after { font-size: 9px; }
  .nav-item svg { width: 20px; height: 20px; }
  .workspace { margin: 0; padding: 27px 14px 100px; }
  .page-header { align-items: stretch; flex-direction: column; gap: 18px; }
  .page-header .button { align-self: flex-start; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .funnel-summary-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-metric-grid, .application-metric-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 16px; }
  .stat-card:first-child { grid-column: 1 / -1; }
  .resident-summary-grid .stat-card-focus { grid-column: 1 / -1; }
  .selection-bar { align-items: flex-start; flex-wrap: wrap; padding-inline: 15px; }
  .selection-bar .button { margin-left: 0; }
  th, td { padding: 12px 10px; }
  th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { display: none; }
  .check-cell { padding-left: 14px; }
  .panel-footer { align-items: stretch; flex-direction: column; }
  .pagination { display: grid; grid-template-columns: 1fr 1fr; }
  .campaign-layout { display: block; }
  .funnel-page-header { align-items: flex-start; }
  .funnel-flow { grid-template-columns: 1fr; overflow: visible; }
  .funnel-stage { width: 100%; min-width: 0; min-height: 108px; }
  .funnel-connector { min-height: 55px; }
  .funnel-connector > span:last-child { transform: rotate(90deg); }
  .funnel-heading { align-items: flex-start; flex-direction: column; }
  .resident-metrics-grid { grid-template-columns: 1fr; }
  .campaign-form-column { margin-bottom: 25px; }
  .recipient-panel, .composer-panel, .draft-panel { padding: 19px; }
  .form-row { grid-template-columns: 1fr; }
  .draft-actions { flex-direction: column; }
  .audience-presets { grid-template-columns: 1fr; }
  .resource-editor-panel { padding: 19px; }
  .auth-card { padding: 36px 28px; }
}

/* ---------------------------------------------------------------------------
   The dashboard, rebuilt 2026-09-02.

   [Carl: "I don't like the little explanations below the metric, remove and just
   have the metrics be clear on their own, and the space where these explanations
   was can be 'updated on' date."]

   Both halves of that solve each other. A number that needs a sentence under it
   to be understood has the wrong title; fixing the title frees the line, and the
   line becomes the as-of date. That matters more here than on most dashboards:
   AppFolio arrives as a scheduled export, so a figure can be two days old and
   look current, and nobody checks a data-health page before making a decision.
   --------------------------------------------------------------------------- */

.stat-when { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.stat-when.is-stale { color: var(--danger); font-weight: 650; }

/* The period buttons. They move the cards and not the five year table, which is
   labelled on the table itself so nobody reports it as a bug. */
.window-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.window-filter-label { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.chip { padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: white; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--ink); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: white; }

.dashboard-operator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resident-summary-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Approved and never moved in. The largest leak in the funnel and the best
   follow-up list in the company, so it is a band rather than one card in six. */
.action-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin: 18px 0 26px; padding: 20px 24px; text-align: left; font: inherit; color: white; background: var(--navy); border: 0; border-radius: var(--radius); cursor: pointer; }
.action-card:hover { background: #16344d; }
.action-card-label { display: block; font-weight: 650; font-size: 14px; opacity: .88; }
.action-card strong { display: block; margin: 4px 0 2px; font-family: Georgia, serif; font-size: 34px; line-height: 1; }
.action-card-note { display: block; font-size: 13px; opacity: .82; }
.action-card-go { flex: none; font-weight: 650; font-size: 14px; }

/* Dashboard questions are visually complete sections, not loose tables. */
.trend-panel { margin-bottom: 26px; }
.dashboard-section { padding: 24px; border-width: 2px; border-color: #c8d7df; overflow: hidden; }
.trend-panel .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.trend-panel .panel-head p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 62ch; }
.table-scroll { overflow-x: auto; }
.trend-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.trend-table th, .trend-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* Only the column headings shout. A row heading here is a page title, and a
   page title in capitals is unreadable. */
.trend-table thead th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.trend-table tbody th { font-weight: 700; }
.trend-table .num, .trend-table td.num { text-align: right; }
.trend-table tbody tr:last-child td { border-bottom: 0; }
.trend-table .rate { color: var(--ink-soft); font-size: 13px; }
/* An annualized row is a projection, so it is drawn as provisional. */
.trend-table tr.is-incomplete td { color: var(--ink-soft); font-style: italic; }
.trend-table tr[data-dashboard-year] { cursor: pointer; }
.trend-table tr[data-dashboard-year]:hover td,
.trend-table tr[data-dashboard-year]:hover th { background: var(--blue-pale); }
.trend-table tr[data-dashboard-year]:focus-visible { outline: 3px solid rgba(28, 140, 190, .3); outline-offset: -3px; }
.trend-foot { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Contacts, rebuilt 2026-09-02.

   The page used to state each conversion twice: once as its own card and again
   inside the stage flow. One set of cards now carries both the count and the
   ratio, so there is one place to look and one number to trust.
--------------------------------------------------------------------------- */
.stats-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.conversion-set { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 6px 0 2px; }
.conversion-card { display: flex; min-height: 118px; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 17px; color: white; background: linear-gradient(145deg, var(--navy-deep), var(--blue)); border: 0; border-radius: 11px; box-shadow: 0 8px 18px rgba(12, 41, 62, .12); cursor: pointer; font: inherit; text-align: left; transition: transform .16s ease, box-shadow .16s ease; }
.conversion-card:first-child { background: linear-gradient(145deg, #164d6d, #1781b8); }
.conversion-card:hover { transform: translateY(-2px); box-shadow: 0 12px 23px rgba(12, 41, 62, .18); }
.conversion-card:focus-visible { outline: 3px solid rgba(28, 140, 190, .45); outline-offset: 2px; }
.conversion-card span { font-size: 13px; font-weight: 800; }
.conversion-card strong { font-family: Georgia, serif; font-size: clamp(25px, 2.3vw, 34px); line-height: 1; }
.conversion-card small { min-height: 13px; color: rgba(255, 255, 255, .76); font-size: 10px; font-weight: 650; }

/* Pathway and eviction narrow the list, so they sit with the list. */
.list-filter { display: grid; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.list-filter select { min-width: 150px; }
.filter-check { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.filter-check input { width: 15px; height: 15px; margin: 0; }
.toolbar-actions { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }

@media (max-width: 1180px) {
  .conversion-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .conversion-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid-three { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Applications, rebuilt 2026-09-02.
--------------------------------------------------------------------------- */

/* Year rows are the year filter, so they have to look selectable. */
.trend-table tr[data-application-year] { cursor: pointer; }
.trend-table tr[data-application-year]:hover td,
.trend-table tr[data-application-year]:hover th { background: var(--blue-pale); }
.trend-table tr[data-application-year]:focus-visible { outline: 3px solid rgba(28, 140, 190, .3); outline-offset: -3px; }
.trend-table tr.is-selected td, .trend-table tr.is-selected th { background: var(--blue-pale); font-weight: 750; }
.partial-flag { font-weight: 500; font-style: italic; color: var(--ink-soft); }

/* Filling in a value the primary systems never supplied. It is deliberately
   plain: this is a repair, not a normal way to enter data. */
.inline-edit { display: flex; gap: 10px; align-items: center; margin: 10px 0 6px; }
.inline-edit input { flex: 1 1 auto; min-width: 0; }
.inline-edit-message { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

/* The header action must not wrap into a three line block. */
.header-actions .button { white-space: nowrap; }
.funnel-page-header .header-actions { flex-wrap: wrap; }

/* A field AppFolio owns. It is shown, not hidden, so the value is still
   readable; it simply cannot be typed over here. */
input.is-locked, input.is-locked:focus {
  background: var(--canvas);
  color: var(--ink-soft);
  border-color: var(--line);
  cursor: not-allowed;
}
.message-warning { background: #fdf6e6; border: 1px solid var(--gold); color: #6b5312; padding: 10px 13px; border-radius: 9px; font-size: 13px; }

/* ---------------------------------------------------------------------------
   Email, rebuilt 2026-09-02: a block composer instead of one fixed layout.
--------------------------------------------------------------------------- */
.audience-exclusion { margin: 0 0 6px; }
.recipient-count { flex-wrap: wrap; }
.recipient-actions { display: flex; gap: 14px; margin-left: auto; }
.text-button.is-danger { color: var(--danger); }

.saved-lists { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.saved-lists h3 { margin: 0 0 4px; font-size: 15px; }
.saved-list-rows { display: grid; gap: 8px; margin-top: 12px; }
.saved-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; background: var(--canvas); border: 1px solid var(--line); border-radius: 9px; }
.saved-list-row strong { display: block; font-size: 14px; }
.saved-list-row small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.saved-list-row > div:last-child { display: flex; gap: 12px; flex: none; }

.block-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.block-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.block-editor-head h3 { margin: 0; font-size: 15px; }
.block-add { display: flex; gap: 6px; flex-wrap: wrap; }
.campaign-blocks { display: grid; gap: 12px; margin-top: 14px; }
.campaign-block { display: grid; gap: 9px; padding: 13px 14px; background: var(--canvas); border: 1px solid var(--line); border-radius: 11px; }
.campaign-block header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.block-type { color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.block-controls { display: flex; gap: 4px; }
.block-controls .icon-button { width: 26px; height: 26px; font-size: 13px; }
.block-controls .icon-button[disabled] { opacity: .3; cursor: default; }
.campaign-block input, .campaign-block textarea { width: 100%; }
.block-image { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.block-image select { min-width: 170px; }
.block-image-preview { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 7px; }
.block-message { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   The website panel. It sits below the funnel because a visitor is not yet a
   contact, and putting them in one row would imply a conversion rate that
   nothing in the data supports.
--------------------------------------------------------------------------- */
#analytics-panel .header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.analytics-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 6px; }
.analytics-metric-grid .stat-card { min-height: 118px; }
.analytics-trend-table { margin-top: 14px; }
@media (max-width: 900px) {
  .dashboard-operator-grid, .analytics-metric-grid { grid-template-columns: 1fr; }
}