:root {
  color-scheme: light;
  --ink: #17211d;
  --muted: #61716d;
  --line: #dce3df;
  --paper: #f8faf8;
  --white: #ffffff;
  --lake: #0f6f78;
  --lake-dark: #08464e;
  --cedar: #7b4f2f;
  --sage: #8ba99a;
  --gold: #c59548;
  --champagne: #ead7aa;
  --danger: #a64232;
  --ok: #237a52;
  --shadow: 0 18px 50px rgba(18, 30, 26, 0.14);
  --luxury-ink: #111a18;
  --ivory: #fbfaf5;
  --pearl: #f4f0e7;
  --hairline: rgba(27, 42, 38, 0.12);
  --gold-line: rgba(197, 149, 72, 0.34);
  --soft-shadow: 0 22px 54px rgba(17, 26, 24, 0.09);
  --lift-shadow: 0 28px 70px rgba(17, 26, 24, 0.14);
  --sv-page: #0e1c2b;
  --sv-surface: #16293a;
  --sv-surface-2: #1d3346;
  --sv-line: #2a4257;
  --sv-text: #ece5d5;
  --sv-text-muted: #8ba0b3;
  --sv-heading: #e6cf8f;
  --sv-accent: #c9a24c;
  --sv-positive: #ffd57a;
  --sv-positive-bg: #52281f;
  --sv-positive-line: rgba(224, 122, 107, 0.50);
  --sv-positive-strong: #ffdd8c;
  --sv-positive-label: #e5ab9c;
  --sv-neutral-pill-text: #e6cf8f;
  --sv-neutral-pill-bg: #1d3346;
  --sv-neutral-pill-line: #2a4257;
  --sv-card: #16293a;
  --sv-card-line: #2a4257;
  --sv-button-bg: #c9a24c;
  --sv-button-text: #0e1c2b;
  --sv-btn-ask-text: #e6cf8f;
  --sv-btn-ask-border: rgba(201, 162, 76, 0.5);
  --sv-btn-ask-bg: transparent;
  --sv-btn-solid-bg: #c9a24c;
  --sv-btn-solid-text: #0e1c2b;
  --sv-new-search-bg: linear-gradient(180deg, #d9b45e, #c9a24c);
  --sv-new-search-text: #0e1c2b;
  --sv-new-search-glow: 0 4px 16px rgba(201, 162, 76, 0.45);
  --sv-heart: #e05252;
}

[data-theme="cream"] {
  --sv-page: #fbfaf5;
  --sv-surface: #ffffff;
  --sv-surface-2: #f7fbf9;
  --sv-line: #dce3df;
  --sv-text: #17211d;
  --sv-text-muted: #61716d;
  --sv-heading: #08464e;
  --sv-accent: #c59548;
  --sv-positive: #285f37;
  --sv-positive-bg: #eef8ee;
  --sv-positive-line: rgba(95, 155, 99, 0.22);
  --sv-positive-strong: #1f7a3f;
  --sv-positive-label: #285f37;
  --sv-neutral-pill-text: #285f37;
  --sv-neutral-pill-bg: #eef8ee;
  --sv-neutral-pill-line: rgba(95, 155, 99, 0.22);
  --sv-card: #ffffff;
  --sv-card-line: rgba(95, 155, 99, 0.2);
  --sv-button-bg: linear-gradient(135deg, #0f6f78, #164b51);
  --sv-button-text: #ffffff;
  --sv-btn-ask-text: #08464e;
  --sv-btn-ask-border: rgba(8, 70, 78, 0.32);
  --sv-btn-ask-bg: transparent;
  --sv-btn-solid-bg: linear-gradient(135deg, #0f6f78, #164b51);
  --sv-btn-solid-text: #ffffff;
  --sv-new-search-bg: linear-gradient(180deg, #12808a, #0f6f78);
  --sv-new-search-text: #ffffff;
  --sv-new-search-glow: 0 4px 16px rgba(15, 111, 120, 0.4);
  --sv-heart: #e05252;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--luxury-ink);
  background: var(--sv-page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid rgba(197, 149, 72, 0.72);
  outline-offset: 3px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 10000;
  padding: 10px 18px;
  background: #111;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 12px clamp(16px, 4vw, 42px);
  background: color-mix(in srgb, var(--sv-page) 88%, transparent);
  border-bottom: 1px solid var(--sv-line);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sv-text);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--white);
  background: linear-gradient(135deg, #0e1715, #1e5d60);
  border-radius: 8px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(17, 26, 24, 0.2);
}

.crm-name-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.client-account-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--white);
  background: linear-gradient(135deg, #0e1715, #1e5d60);
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.brand strong,
.brand small {
  display: block;
}

.brand small,
.eyebrow {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.site-header .brand small {
  color: var(--sv-text-muted);
}

.global-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: 999px;
}

.global-theme-toggle button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--sv-text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.global-theme-toggle button[aria-pressed="true"] {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
}

.site-header .session-pill {
  color: var(--sv-text-muted);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

.site-header .session-pill.active {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-neutral-pill-line);
}

.site-header .ghost-button {
  color: var(--sv-text);
  background: transparent;
  border-color: var(--sv-line);
}

.site-header .primary-button {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
}

.site-header .new-search-button {
  min-height: 42px;
  padding: 0 18px;
  color: var(--sv-new-search-text);
  background: var(--sv-new-search-bg);
  border-color: transparent;
  box-shadow: var(--sv-new-search-glow);
  font-size: 0.94rem;
  font-weight: 950;
  letter-spacing: 0;
}

.site-header .new-search-button:hover,
.site-header .new-search-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--sv-new-search-glow), 0 10px 26px rgba(0, 0, 0, 0.18);
}

.top-actions {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Off-canvas drawer toggles -- hidden by default, shown only below the
   mobile-drawer breakpoint (see @media max-width:820px). Shared visual
   style for both the header nav toggle and the agent-dashboard sidebar
   toggle; .agent-sidebar-toggle below adds the visible "Menu" label variant. */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  color: var(--sv-text);
  background: transparent;
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.agent-sidebar-toggle {
  width: auto;
  gap: 8px;
  padding: 0 14px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sv-text, var(--ink));
}

.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(6, 12, 10, 0.45);
}

.mobile-drawer-backdrop.visible {
  display: block;
}

body.mobile-drawer-open {
  overflow: hidden;
}

.top-actions button {
  position: relative;
  z-index: 13;
  pointer-events: auto;
}

.session-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 220px;
  padding: 6px 10px;
  overflow: hidden;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(197, 149, 72, 0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-pill.active {
  color: var(--lake-dark);
  background: #edf7f4;
  border-color: #cfe2db;
}

.notification-bell {
  position: relative;
}

.notification-bell-toggle {
  position: relative;
  font-size: 1.05rem;
  line-height: 1;
}

.notification-bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
}

.notification-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(340px, 90vw);
  max-height: 420px;
  overflow-y: auto;
  padding: 8px;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #dce3df);
  border-radius: 12px;
  box-shadow: var(--shadow, 0 18px 50px rgba(18, 30, 26, 0.14));
}

.notification-bell-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 4px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.notification-bell-item:hover,
.notification-bell-item:focus-visible {
  background: rgba(197, 149, 72, 0.12);
}

.notification-bell-item strong {
  display: block;
  font-size: 0.85rem;
}

.notification-bell-item span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 2px;
}

.notification-bell-item--urgent {
  border-left: 3px solid var(--danger);
  padding-left: 9px;
  background: rgba(166, 66, 50, 0.07);
}

.notification-bell-item--urgent:hover,
.notification-bell-item--urgent:focus-visible {
  background: rgba(166, 66, 50, 0.14);
}

.notification-bell-item--urgent strong {
  color: var(--danger);
}

.notification-bell-detail {
  font-style: italic;
}

.notification-bell-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.header-agent {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.header-agent .agent-avatar {
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  padding: 4px;
  background: var(--white);
  border: 1px solid rgba(197, 149, 72, 0.28);
  box-shadow: 0 8px 18px rgba(17, 26, 24, 0.08);
}

.header-agent .agent-avatar img {
  border-radius: 999px;
}

.primary-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 16px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.primary-button {
  color: var(--white);
  background: linear-gradient(135deg, #0f6f78, #164b51);
  box-shadow: 0 12px 28px rgba(15, 111, 120, 0.2);
}

.primary-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #164b51, #0f6f78);
  box-shadow: 0 16px 32px rgba(15, 111, 120, 0.26);
}

.secondary-button {
  color: var(--lake-dark);
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--hairline);
}

.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
  border-color: rgba(197, 149, 72, 0.48);
  box-shadow: 0 12px 26px rgba(18, 30, 26, 0.1);
}

.ghost-button {
  color: var(--lake-dark);
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(27, 42, 38, 0.1);
}

.small {
  min-height: 38px;
}

.full {
  width: 100%;
}

.hero-media {
  position: relative;
  min-height: min(760px, calc(100vh - 74px));
  overflow: hidden;
  margin-bottom: 0;
  background: #071719;
  border-bottom: 1px solid rgba(197, 149, 72, 0.28);
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 9, 18, 0.02), rgba(3, 9, 18, 0.18) 48%, rgba(3, 9, 18, 0.78)),
    linear-gradient(90deg, rgba(3, 9, 18, 0.76), rgba(8, 26, 37, 0.3) 48%, rgba(3, 9, 18, 0.06));
}

.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: none;
  min-height: 0;
  padding: 0 clamp(26px, 6vw, 76px);
  color: var(--white);
}

.hero-copy .eyebrow {
  margin-top: clamp(70px, 26vh, 200px);
  max-width: min(560px, calc(100% - 52px));
  line-height: 1.35;
  color: var(--champagne);
  letter-spacing: 0;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}

h1,
h2,
p {
  margin-top: 0;
}

.hero-copy h1 {
  max-width: 620px;
  margin-top: 6px;
  margin-bottom: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.4rem, 9vw, 8.6rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);
}

.hero-copy p {
  max-width: 640px;
  margin-bottom: 8px;
  color: #f4f1e8;
  font-size: clamp(1.02rem, 2vw, 1.34rem);
  line-height: 1.48;
  text-wrap: balance;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.hero-search {
  position: absolute;
  left: clamp(18px, 6vw, 76px);
  right: clamp(18px, 6vw, 76px);
  bottom: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(900px, calc(100% - clamp(36px, 12vw, 152px)));
  margin-top: 10px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(234, 215, 170, 0.76);
  border-radius: 8px;
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.hero-agent-photo {
  position: absolute;
  top: 18px;
  left: clamp(16px, 4vw, 42px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 98px;
  height: 88px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(242, 224, 187, 0.62);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(3, 9, 18, 0.22);
}

.hero-agent-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The card framing (white background, border, shadow) now lives on
   .hero-agent-photo itself -- the injected .agent-avatar (from
   renderAgentAvatar) is stripped of its own circular/bordered styling here
   so it doesn't double up, and object-fit stays "contain" (badge-style,
   matching this hero's original look) rather than the "cover" crop used
   everywhere else .agent-avatar appears. */
.hero-agent-photo .agent-avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  font-size: 1.4rem;
}

.hero-agent-photo .agent-avatar img {
  object-fit: contain;
}

.hero-agent-badge {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  width: auto;
  max-width: min(280px, calc(100% - 36px));
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(242, 224, 187, 0.6);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(3, 9, 18, 0.2);
}

.hero-agent-badge strong,
.hero-agent-badge span {
  display: block;
}

.hero-agent-badge span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-search input {
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 1rem;
}

.panel h2,
.activity-panel h2,
.agent-card h2 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.agent-card p,
.panel p {
  color: var(--muted);
  line-height: 1.55;
}

.preview-listings {
  display: grid;
  gap: 14px;
  padding: 28px 18px 28px;
}

.preview-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.preview-listing-card {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}

.preview-listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-shadow);
}

.preview-listing-photo {
  display: grid;
  align-content: end;
  min-height: 180px;
  padding: 12px;
  background-color: var(--lake-dark);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.preview-listing-photo span {
  width: max-content;
  padding: 6px 9px;
  color: var(--white);
  background: rgba(5, 25, 28, 0.72);
  border-radius: 8px;
  font-weight: 900;
}

.preview-listing-card div:last-child {
  padding: 12px;
}

.preview-listing-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.preview-listing-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.registration-view {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 76px);
  padding: 26px;
}

.registration-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(28px, 5vw, 70px);
  width: min(980px, 100%);
  /* min-width: 0 overrides the grid item's default min-width:auto, which
     otherwise floors this item at its content's min-content width and pushes
     it past the viewport on phones (confirmed 360/390px, s3d mobile pass) --
     .registration-view lays this out with place-items:center, so without an
     explicit min-width the item refuses to shrink below its own content. */
  min-width: 0;
  padding: clamp(26px, 5vw, 54px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.registration-panel h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.02;
}

.registration-form,
.search-form {
  display: grid;
  gap: 14px;
}

/* Same min-width:auto grid trap as .registration-panel above -- these are
   grid items nested one level deeper, and each one re-floors the overflow
   unless it also gets min-width:0 (s3d mobile pass, 360/390px). */
.registration-form {
  min-width: 0;
}

.auth-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.account-choice-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  margin-bottom: 14px;
  background: #fffcf6;
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
}

.account-choice-panel h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.account-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-choice-card {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  min-height: 86px;
}

.account-choice-card strong {
  color: var(--lake-dark);
  font-size: 0.98rem;
}

.account-choice-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.registration-form {
  padding: 18px;
  background: #f6f8f6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.registration-form h2 {
  margin: 0;
  font-size: 1rem;
}

.form-note {
  margin: 0;
  color: #6b7f78;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.consent-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  background: #fffcf6;
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.consent-check.compact {
  padding: 10px 11px;
  background: #ffffff;
}

.form-check-group {
  display: grid;
  gap: 8px;
}

.form-check-group > strong {
  color: var(--lake-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.consent-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--lake);
}

.consent-check a,
.policy-page a {
  color: var(--lake-dark);
  font-weight: 900;
}

.consent-note {
  color: var(--cedar);
}

.policy-shell {
  width: min(920px, calc(100% - 32px));
  margin: 38px auto;
  padding: clamp(22px, 5vw, 46px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.policy-page {
  display: grid;
  gap: 22px;
}

.policy-alert {
  padding: 14px 16px;
  background: #fff6df;
  border: 1px solid rgba(197, 149, 72, 0.42);
  border-radius: 8px;
  color: var(--cedar);
  font-weight: 900;
}

.policy-page h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.04;
}

.policy-page section {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.policy-page h2 {
  margin: 0;
  color: var(--lake-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.policy-page p,
.policy-page li {
  color: var(--muted);
  line-height: 1.65;
}

.auth-message {
  min-height: 20px;
  margin: 0;
  color: var(--cedar);
  font-size: 0.88rem;
  font-weight: 800;
}

.auth-compliance-note {
  display: grid;
  gap: 5px;
  padding: 13px;
  background: #fffcf6;
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.auth-compliance-note strong {
  color: var(--lake-dark);
  text-transform: uppercase;
}

.turnstile-box {
  min-height: 0;
}

.turnstile-box iframe {
  max-width: 100%;
}

.known-profile-list {
  display: grid;
  gap: 8px;
}

.known-profile-button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(197, 149, 72, 0.22);
  border-radius: 8px;
  text-align: left;
}

.known-profile-button span {
  font-weight: 900;
}

.known-profile-button small {
  color: var(--muted);
}

.known-profile-button em {
  color: var(--lake);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
}

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

textarea {
  resize: vertical;
}

.search-view {
  display: block;
  padding: clamp(16px, 3vw, 32px);
}

.sidebar,
.activity-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.agent-card,
.panel,
.activity-panel,
.results-toolbar,
.insight-strip,
.result-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.agent-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.agent-cover {
  width: min(230px, 100%);
  aspect-ratio: 6 / 5;
  object-fit: contain;
  justify-self: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
}

.agent-email {
  display: inline-block;
  margin-top: 7px;
  color: var(--lake-dark);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.panel,
.activity-panel {
  padding: 16px;
}

.quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-search-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

#searchForm .mobile-search-actions .primary-button {
  flex: 2 1 0;
  width: auto;
  min-width: 0;
}

#searchForm #saveSearchButton {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 150px;
  color: var(--sv-new-search-text);
  background: var(--sv-new-search-bg);
  border: 1px solid rgba(201, 162, 76, 0.48);
  box-shadow: var(--sv-new-search-glow);
  font-weight: 950;
  letter-spacing: 0;
}

#searchForm #saveSearchButton:hover,
#searchForm #saveSearchButton:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--sv-new-search-glow), 0 10px 24px rgba(0, 0, 0, 0.18);
}

[data-theme="cream"] #searchForm #saveSearchButton {
  color: #17211d;
  background: linear-gradient(180deg, #dfbd72, #c59548);
  border-color: rgba(123, 79, 47, 0.32);
  box-shadow: 0 4px 16px rgba(197, 149, 72, 0.36);
}

[data-theme="cream"] #searchForm #saveSearchButton:hover,
[data-theme="cream"] #searchForm #saveSearchButton:focus-visible {
  box-shadow: 0 4px 16px rgba(197, 149, 72, 0.36), 0 10px 24px rgba(17, 26, 24, 0.14);
}

.quick-filters button,
.workspace-tab,
.tag,
.status-pill {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--lake-dark);
  background: #f3f7f5;
  font-size: 0.78rem;
  font-weight: 800;
}

.quick-filters button,
.workspace-tab,
.primary-button,
.secondary-button,
.ghost-button,
.favorite-button,
.photo-controls button {
  touch-action: manipulation;
}

.workspace-nav {
  display: grid;
  gap: 8px;
}

.workspace-menu {
  position: relative;
  z-index: 4;
}

.workspace-menu-global {
  position: sticky;
  top: calc(var(--header-h, 74px) + 12px);
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  pointer-events: none;
}

.workspace-menu summary {
  display: inline-grid;
  min-height: 42px;
  align-items: center;
  padding: 0 15px;
  color: var(--white);
  background: linear-gradient(135deg, #071719, var(--lake-dark));
  border: 1px solid rgba(234, 215, 170, 0.45);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(18, 30, 26, 0.18);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  pointer-events: auto;
}

.workspace-menu summary::before {
  content: "\2630";
  margin-right: 8px;
}

.workspace-menu summary::-webkit-details-marker {
  display: none;
}

.workspace-menu .workspace-nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(260px, calc(100vw - 32px));
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(197, 149, 72, 0.26);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-tab {
  width: 100%;
}

.workspace-tab.active {
  color: var(--white);
  background: var(--lake-dark);
  border-color: var(--lake-dark);
}

.client-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  margin: 0;
}

.client-summary dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.client-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.results-area {
  min-width: 0;
  width: min(1760px, calc(100% - 48px));
  margin: 0 auto;
}

.workspace-panel {
  min-width: 0;
}

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(16, 26, 24, 0.98), rgba(13, 84, 88, 0.92)),
    var(--white);
  color: var(--white);
  border-color: rgba(234, 215, 170, 0.28);
  box-shadow: 0 22px 50px rgba(17, 26, 24, 0.12);
}

.results-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-bottom: 14px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border: 1px solid rgba(197, 149, 72, 0.26);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.results-search label {
  grid-column: 1 / -1;
}

.results-search textarea {
  min-height: 86px;
  font-size: 1rem;
  line-height: 1.45;
}

.results-search .quick-filters {
  align-self: center;
}

.results-search .primary-button {
  min-width: 148px;
}

#searchPanel:not(.search-has-output) > .results-toolbar {
  display: none;
}

.results-area:has(#searchPanel:not(.search-has-output)) > .workspace-menu-global {
  display: none;
}

#searchPanel.search-has-output .buyer-search-hero {
  display: none;
}

#searchPanel.search-has-output.search-retry-visible .buyer-search-hero {
  display: block;
  min-height: min(520px, calc(100vh - 74px));
}

#searchPanel.search-has-output.search-results-compact .buyer-search-hero {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0 0 14px;
  overflow: visible;
  background: transparent;
  border: 0;
}

#searchPanel.search-has-output.search-results-compact .buyer-search-hero > img,
#searchPanel.search-has-output.search-results-compact .hero-overlay,
#searchPanel.search-has-output.search-results-compact .hero-agent-photo,
#searchPanel.search-has-output.search-results-compact .hero-agent-badge,
#searchPanel.search-has-output.search-results-compact .hero-copy > .eyebrow,
#searchPanel.search-has-output.search-results-compact .hero-copy > h1,
#searchPanel.search-has-output.search-results-compact .hero-copy > p {
  display: none;
}

#searchPanel.search-has-output.search-results-compact .hero-copy {
  position: relative;
  inset: auto;
  display: block;
  padding: 0;
  color: var(--ink);
}

#searchPanel.search-has-output.search-results-compact .signed-in-hero-search {
  position: relative;
  inset: auto;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) minmax(260px, 360px);
  margin: 0;
  box-shadow: 0 14px 32px rgba(18, 30, 26, 0.1);
}

#searchPanel.search-has-output.search-results-compact .signed-in-hero-search label {
  grid-column: 1 / -1;
}

#searchPanel.search-has-output.search-results-compact .signed-in-hero-search textarea {
  min-height: 64px;
}

.buyer-search-hero {
  width: 100vw;
  max-width: none;
  min-height: min(760px, calc(100vh - 74px));
  margin: calc(clamp(16px, 3vw, 32px) * -1) calc(50% - 50vw) 18px;
  border-right: 0;
  border-left: 0;
}

/* .client-panel (#searchPanel and siblings) reserves 244px on the left for
   the fixed .client-sidebar. The full-bleed trick above assumes a
   symmetrically-centered parent with no asymmetric padding, so its left
   offset overshoots and renders the hero underneath the sidebar whenever the
   uncollapsed hero shows - e.g. landing directly on the search panel before
   a query narrows it, confirmed live 2026-08-14. Only the left edge needs
   correcting: there's no sidebar on the right, so that edge still reaches
   the true viewport edge correctly via the untouched rule above. */
.client-panel .buyer-search-hero {
  margin-left: 0;
}

.signed-in-hero-search {
  position: absolute;
  left: clamp(18px, 6vw, 76px);
  right: clamp(18px, 6vw, 76px);
  bottom: 38px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: min(900px, calc(100% - clamp(36px, 12vw, 152px)));
  margin: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(234, 215, 170, 0.76);
  border-radius: 8px;
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.signed-in-hero-search label {
  grid-column: 1 / -1;
  color: var(--lake-dark);
  font-weight: 900;
}

.signed-in-hero-search .area-filter {
  grid-column: auto;
  min-width: min(300px, 100%);
}

.area-filter {
  position: relative;
  display: grid;
  gap: 8px;
  color: #14263f;
}

.af-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.af-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 13px;
  color: #14263f;
  background: #f7f1e3;
  border: 1px solid #e4d9bf;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(20, 38, 63, 0.08);
  font-weight: 900;
  cursor: pointer;
}

.af-chip.active {
  color: #14263f;
  background: linear-gradient(180deg, #fbf7ed, #efe2c2);
  border-color: #b38e3f;
  box-shadow: 0 8px 20px rgba(179, 142, 63, 0.22);
}

.af-chip strong {
  min-width: 20px;
  padding: 2px 6px;
  color: #14263f;
  background: #d9b45e;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
}

.af-chip em {
  color: #b38e3f;
  font-style: normal;
  font-weight: 950;
}

.af-panel {
  width: 100%;
  padding: 10px;
  color: #14263f;
  background: #f7f1e3;
  border: 1px solid #e4d9bf;
  border-radius: 9px;
  box-shadow: 0 16px 32px rgba(20, 38, 63, 0.14);
}

.af-search {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  color: #14263f;
  font-weight: 900;
}

.af-search input {
  min-height: 38px;
  padding: 9px 11px;
  color: #14263f;
  background: #fffcf6;
  border: 1px solid #e4d9bf;
  border-radius: 8px;
}

.af-search input:focus-visible,
.af-chip:focus-visible,
.af-option:focus-within {
  outline: 3px solid rgba(179, 142, 63, 0.34);
  outline-offset: 2px;
}

.af-options {
  display: grid;
  max-height: 200px;
  overflow: auto;
  padding-right: 2px;
}

.af-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 7px;
  color: #14263f;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 850;
}

.af-option:hover {
  background: rgba(179, 142, 63, 0.12);
}

.af-option input {
  width: 16px;
  height: 16px;
  accent-color: #b38e3f;
}

.af-option small {
  display: block;
  color: #61716d;
  font-size: 0.74rem;
  font-weight: 800;
}

.af-option-divided {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e4d9bf;
}

.af-empty {
  padding: 10px;
  color: #61716d;
  background: #fffcf6;
  border: 1px dashed #e4d9bf;
  border-radius: 8px;
  font-weight: 800;
}

.signed-in-hero-search textarea {
  min-height: 82px;
  background: rgba(255, 255, 255, 0.8);
}

.signed-in-hero-search .quick-filters {
  align-self: center;
}

.signed-in-hero-search .mobile-search-actions {
  align-self: end;
}

.prototype-status-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  color: #24423d;
  background: linear-gradient(135deg, rgba(234, 215, 170, 0.28), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(197, 149, 72, 0.32);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(17, 26, 24, 0.06);
}

.prototype-status-strip strong {
  flex: 0 0 auto;
  color: var(--lake-dark);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prototype-status-strip span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.prototype-status-strip small {
  margin-left: auto;
  padding: 6px 9px;
  color: var(--lake-dark);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(18, 92, 93, 0.14);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.buyer-action-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px;
  color: var(--lake-dark);
  background: linear-gradient(135deg, rgba(239, 248, 247, 0.96), rgba(255, 252, 244, 0.96));
  border: 1px solid rgba(8, 112, 122, 0.18);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(17, 26, 24, 0.08);
}

.buyer-action-gate.hidden {
  display: none;
}

.buyer-action-gate div:first-child {
  display: grid;
  gap: 4px;
  /* Was implicitly 0 1 auto (the flex default), so justify-content:space-between
     on the parent left this text column starved down to a near-zero min-content
     width while .buyer-action-gate-actions kept its full natural width -- title
     text and paragraph wrapped fine, but the action buttons got squeezed into a
     narrow forced-wrap column (confirmed 360/390px, s3d mobile pass). flex:1
     lets this column claim the actual available space instead. */
  flex: 1 1 auto;
  min-width: 0;
}

.buyer-action-gate strong {
  font-size: 0.98rem;
}

.buyer-action-gate span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.buyer-action-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.results-toolbar h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.results-toolbar .eyebrow,
.results-toolbar .meta-line {
  color: #dce8e4;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(18, 30, 26, 0.05);
}

.section-heading h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.notification-banner,
.document-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: #eef7f4;
  border: 1px solid #cfe2db;
  border-radius: 8px;
}

.deployment-banner {
  background: #fffaf0;
  border-color: #ead7aa;
}

.beta-invite-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  padding: 12px 14px;
  background: rgba(255, 252, 244, 0.96);
  border: 1px solid rgba(197, 149, 72, 0.42);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(18, 30, 26, 0.08);
}

.beta-invite-banner.hidden {
  display: none;
}

.beta-invite-banner strong,
.beta-invite-banner span {
  display: block;
}

.beta-invite-banner strong {
  color: var(--forest);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.beta-invite-banner span {
  color: var(--muted);
  line-height: 1.45;
}

.notification-banner strong,
.notification-banner span,
.document-source strong,
.document-source span {
  display: block;
}

.notification-banner span,
.document-source span {
  color: var(--muted);
  line-height: 1.45;
}

.insight-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 14px;
  border-color: rgba(197, 149, 72, 0.18);
  box-shadow: 0 12px 28px rgba(18, 30, 26, 0.05);
}

.insight {
  padding: 14px;
  background: var(--white);
}

.insight strong {
  display: block;
  margin-bottom: 5px;
}

.insight span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.community-conflict-banner {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: rgba(166, 66, 50, 0.06);
  border: 1px solid rgba(166, 66, 50, 0.28);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
}

.community-conflict-banner.hidden {
  display: none;
}

.community-conflict-heading {
  display: block;
  color: var(--danger);
  margin-bottom: 8px;
}

.community-conflict-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-conflict-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.community-conflict-row strong {
  color: var(--ink, inherit);
}

.community-conflict-row > span {
  color: var(--muted);
  font-size: 0.86rem;
  flex: 1 1 260px;
}

.community-conflict-row small {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.search-refine-bar {
  margin-bottom: 14px;
}

.search-refine-form {
  display: flex;
  gap: 8px;
}

.search-refine-form input {
  flex: 1;
}

.search-refine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.search-refine-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
}

.search-refine-chip button {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.search-refine-chip button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink, inherit);
}

.search-refine-error {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 0.82rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-card,
.panel-lite,
.queue-item,
.saved-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dashboard-card {
  padding: 16px;
  background: linear-gradient(180deg, #ffffff, #f9faf6);
  border-color: rgba(197, 149, 72, 0.2);
  box-shadow: 0 14px 30px rgba(18, 30, 26, 0.07);
}

.dashboard-action {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dashboard-action:hover,
.dashboard-row-button:hover {
  border-color: rgba(15, 111, 120, 0.42);
  box-shadow: 0 12px 24px rgba(18, 30, 26, 0.1);
}

.dashboard-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.9rem;
}

.dashboard-card span,
.saved-item p,
.queue-item p {
  color: var(--muted);
  line-height: 1.45;
}

.two-column,
.community-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.panel-lite {
  padding: 16px;
}

.panel-lite h2 {
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.buyer-saved-heading {
  align-items: flex-end;
  background: linear-gradient(180deg, #ffffff, #fbf9f1);
  border-color: rgba(197, 149, 72, 0.18);
}

.buyer-saved-heading h1 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--lake-dark);
}

.buyer-saved-live-line {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 7px 10px;
  color: #285f37;
  background: #eef8ee;
  border: 1px solid rgba(95, 155, 99, 0.22);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 900;
}

.buyer-price-drop-region {
  margin-bottom: 14px;
}

.buyer-progress-updates-region {
  margin-bottom: 14px;
}

.buyer-progress-updates {
  padding: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(5, 25, 28, 0.1);
  border-radius: 8px;
}

.buyer-progress-updates-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.buyer-progress-updates-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.buyer-progress-updates-head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--muted);
  background: #f4f7f5;
  border: 1px solid rgba(5, 25, 28, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.buyer-progress-updates-list {
  display: grid;
  gap: 10px;
}

.buyer-progress-update-card {
  padding: 14px;
  background: #f7f9f7;
  border: 1px solid rgba(5, 25, 28, 0.06);
  border-radius: 8px;
}

.buyer-progress-update-titleline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.buyer-progress-update-titleline strong {
  color: var(--ink);
  font-size: 1rem;
}

.buyer-progress-update-titleline small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.buyer-progress-update-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.buyer-shared-property-list {
  display: grid;
  gap: 18px;
}

.buyer-shared-property-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(5, 25, 28, 0.08);
  border-radius: 8px;
}

.buyer-shared-property-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.buyer-shared-property-side {
  padding: 3px 8px;
  color: var(--muted);
  background: #f4f7f5;
  border: 1px solid rgba(5, 25, 28, 0.08);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.buyer-shared-property-head strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.buyer-shared-property-closed {
  padding: 3px 8px;
  color: #285f37;
  background: #eef8ee;
  border: 1px solid rgba(95, 155, 99, 0.24);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
}

.buyer-shared-property-analytics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.buyer-shared-property-analytics span {
  padding: 5px 10px;
  color: var(--muted);
  background: #f4f7f5;
  border: 1px solid rgba(5, 25, 28, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
}

.buyer-shared-property-analytics strong {
  color: var(--ink);
  font-weight: 900;
}

.buyer-property-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(5, 25, 28, 0.08);
}

.buyer-property-meter-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.buyer-property-meter-step.done {
  color: #285f37;
  background: #eef8ee;
}

.buyer-property-meter-step.current {
  color: var(--ink);
  background: #fff4de;
  box-shadow: 0 0 0 1px rgba(197, 149, 72, 0.4);
}

.buyer-property-meter-step.upcoming {
  color: var(--muted);
  background: #f4f7f5;
}

.buyer-property-meter-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(5, 25, 28, 0.08);
  font-size: 0.62rem;
  font-weight: 900;
}

.buyer-property-meter-step.done .buyer-property-meter-dot {
  color: #fff;
  background: #5f9b63;
}

.buyer-saved-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.buyer-saved-primary,
.buyer-saved-secondary {
  min-width: 0;
}

.integration-readiness {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.8fr);
  gap: 14px;
  margin: -2px 0 14px;
  background: #fbfcfb;
}

.integration-readiness h2,
.integration-readiness p {
  margin: 0;
}

.integration-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.integration-readiness-grid span {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  color: var(--muted);
  background: #f4f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.78rem;
}

.integration-readiness-grid strong {
  color: var(--lake-dark);
  overflow-wrap: anywhere;
}

.mls-api-readiness {
  display: grid;
  gap: 12px;
  margin: -2px 0 14px;
}

.readiness-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.readiness-head h2,
.readiness-head p,
.mls-api-readiness h3 {
  margin: 0;
}

.mls-api-readiness h3 {
  font-size: 0.95rem;
}

.mls-readiness-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.deployment-readiness-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.provider-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.provider-slot {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 10px;
  background: #f4f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.provider-slot.active {
  background: #edf8f2;
  border-color: #cde8d7;
}

.provider-slot strong {
  color: var(--lake-dark);
}

.provider-slot small {
  color: var(--muted);
  font-size: 0.78rem;
}

.readiness-detail-grid {
  align-items: start;
}

.document-form {
  display: grid;
  gap: 13px;
}

.agent-profile-form {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27, 42, 38, 0.1);
}

.form-section-title {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(180deg, #fffdf8, #f7f1e3);
  border: 1px solid rgba(197, 149, 72, 0.22);
  border-radius: 8px;
}

.form-section-title strong {
  color: var(--lake-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.form-section-title span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.form-button-row {
  display: grid;
  gap: 8px;
}

.form-button-row button[disabled] {
  cursor: wait;
  opacity: 0.68;
}

.broker-lookup-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fbf8;
  border: 1px solid rgba(19, 119, 124, 0.16);
  border-radius: 8px;
}

.broker-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.broker-lookup-results {
  display: grid;
  gap: 8px;
}

.broker-lookup-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.broker-lookup-option:hover,
.broker-lookup-option:focus-visible {
  border-color: rgba(19, 119, 124, 0.34);
  background: #f4fbfa;
  outline: none;
}

.broker-lookup-option[aria-pressed="true"] {
  border-color: rgba(19, 119, 124, 0.6);
  box-shadow: 0 0 0 3px rgba(19, 119, 124, 0.12);
}

.broker-lookup-option strong {
  color: var(--lake-dark);
}

.broker-lookup-option span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.application-status-box {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-left: 4px solid rgba(127, 154, 143, 0.9);
  border-radius: 8px;
  background: #f8fbf8;
  color: var(--ink);
}

.application-status-box strong {
  color: var(--lake-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.application-status-box span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.application-status-box.good {
  border-left-color: #2f8f68;
  background: #f1faf5;
}

.application-status-box.warn {
  border-left-color: #c89442;
  background: #fffaf0;
}

.application-status-box.bad {
  border-left-color: #b95656;
  background: #fff5f5;
}

.agent-dashboard-locked > .section-heading,
.agent-dashboard-locked #agentActiveSessionBanner,
.agent-dashboard-locked #agentPilotReadiness,
.agent-dashboard-locked #dashboardGrid,
.agent-dashboard-locked .agent-crm-layout,
.agent-dashboard-locked #agentSettingsPanel .client-drilldown-head button {
  display: none;
}

.agent-dashboard-locked #agentSettingsPanel {
  max-width: 720px;
  margin: 0 auto;
}

.agent-signin-only .agent-profile-form,
.agent-signin-only #agentSettingsForm,
.agent-signin-only #agentAccountPanel,
.agent-signin-only #agentSettingsSummary,
.agent-signin-only .settings-summary-grid {
  display: none;
}

.agent-signin-only .workspace-login-form {
  padding: 18px;
  border: 1px solid rgba(18, 30, 26, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(8, 31, 37, 0.06);
}

.workspace-action {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-radius: 7px;
  background: #ffffff;
  color: var(--lake-dark);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.workspace-action:hover,
.workspace-action:focus-visible {
  border-color: rgba(19, 119, 124, 0.28);
  background: #f4fbfa;
  outline: none;
}

#dashboardPanel:not(.agent-dashboard-locked) .workspace-login-form,
#dashboardPanel:not(.agent-dashboard-locked) .agent-profile-form {
  display: none;
}

.input-error {
  border-color: #b95656 !important;
  box-shadow: 0 0 0 3px rgba(185, 86, 86, 0.12);
}

.field-error-message {
  display: block;
  margin-top: 5px;
  color: #9f3f3f;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.3;
}

@media (max-width: 680px) {
  .account-choice-grid,
  .broker-lookup-row {
    grid-template-columns: 1fr;
  }
}

.curated-share-panel {
  margin: 12px 0;
}

.curated-share-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf8, #f7f1e3);
}

.curated-share-card h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.curated-share-card span {
  color: var(--muted);
}

.curated-share-card code {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 0.78rem;
}

.curated-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.curated-share-actions .disabled,
.curated-share-actions button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.contact-relationship-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.contact-relationship-confirm input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin-top: 2px;
  accent-color: var(--lake);
}

.curate-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-radius: 999px;
  background: #f7faf7;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.curate-toggle.selected {
  border-color: rgba(47, 143, 104, 0.28);
  background: #f1faf5;
  color: var(--lake-dark);
}

.saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.beta-feedback-panel {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fffdf8, #f7f1e3);
  border-color: rgba(197, 149, 72, 0.28);
}

.review-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.review-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.review-stats div {
  min-height: 58px;
  padding: 10px;
  background: #f4f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.review-stats strong {
  display: block;
  font-size: 1.15rem;
}

.review-stats span {
  color: var(--muted);
  font-size: 0.78rem;
}

.intake-note,
.folder-example {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px;
  background: #f4f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.intake-note span {
  color: var(--muted);
  line-height: 1.45;
}

.folder-example {
  margin: 14px 0 0;
}

.folder-example code {
  display: block;
  padding: 8px;
  overflow-wrap: anywhere;
  color: var(--lake-dark);
  background: var(--white);
  border-radius: 6px;
}

.queue-list,
.saved-list {
  display: grid;
  gap: 10px;
}

.queue-item,
.saved-item {
  padding: 13px;
}

.queue-topline,
.saved-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.queue-topline h3,
.saved-topline h3 {
  margin: 0;
  font-size: 0.98rem;
}

.review-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.review-controls textarea {
  min-height: 64px;
  resize: vertical;
}

.review-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.danger-button {
  color: var(--danger);
}

.delete-contact-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 800;
  background: rgba(166, 66, 53, 0.08);
  border-radius: 8px;
}

.deleted-client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.deleted-client-row small {
  display: block;
  color: var(--muted);
}

.community-doc-request {
  margin-bottom: 14px;
}

.community-doc-request form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0;
}

.community-doc-request form .full {
  grid-column: 1 / -1;
}

.request-meta {
  display: grid;
  gap: 3px;
}

.admin-document-queue {
  margin-bottom: 14px;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.section-actions.compact {
  align-items: center;
}

.document-queue-list {
  display: grid;
  gap: 10px;
}

.document-queue-item {
  background: #fbfcfb;
}

.document-queue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-queue-meta span {
  padding: 6px 8px;
  color: var(--muted);
  background: #f4f7f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
}

.rule-card details {
  margin: 8px 0;
}

.rule-card summary {
  cursor: pointer;
  color: var(--lake);
  font-size: 0.86rem;
  font-weight: 800;
}

.mini-list {
  display: grid;
  gap: 8px;
}

.mini-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  background: #f4f7f5;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.showing-list-row {
  align-items: center;
  flex-wrap: wrap;
}

.showing-list-open {
  flex: 1 1 200px;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.showing-list-open strong {
  display: block;
  color: var(--ink);
}

.showing-list-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.showing-list-rename-form {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  margin-top: 6px;
}

/* Overrides the global `input { width: 100% }` rule (see CLAUDE.md CSS
   traps) so the rename input sits inline with its Save/Cancel buttons
   instead of blowing out the flex row. */
.showing-list-rename-form input {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.showing-list-replace-picker {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(166, 66, 53, 0.08);
  border-radius: 8px;
}

.showing-list-add-control {
  min-width: 0;
}

.showing-list-add-control select {
  width: 100%;
}

.showing-list-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Explicit --ink/--muted rather than the dashboard's ambient heading color
   (which several existing gold-on-dark-navy rules recolor for #dashboardPanel
   .agent-crm-layout .crm-record-section-head p) -- this section sits on a
   light #f7f9f7 card (.property-listing-link) regardless of dashboard theme,
   so it needs colors that stay legible against that fixed light background
   instead of inheriting a color meant for a dark card. */
.showing-list-share-head strong {
  display: block;
  color: var(--ink);
}

.showing-list-share-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
}

.showing-list-share-rows {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.showing-list-share-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: #f4f7f5;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.86rem;
}

.showing-list-share-rows small {
  display: block;
  color: var(--muted);
}

.showing-list-share-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.showing-list-share-groups {
  display: grid;
  gap: 14px;
}

.showing-list-share-group h4 {
  margin: 0 0 6px;
  font-size: 0.88rem;
}

.showing-list-share-group h4 small {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-weight: 400;
}

.favorite-card-list {
  display: grid;
  gap: 10px;
}

.buyer-price-drop-alert {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 251, 242, 0.94)),
    radial-gradient(circle at top right, rgba(197, 149, 72, 0.18), transparent 34%);
  border: 1px solid rgba(63, 130, 86, 0.24);
  border-left: 6px solid #5f9b63;
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(63, 130, 86, 0.12);
  animation: buyerPriceDropIn 0.42s ease both;
}

.buyer-price-drop-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.buyer-price-drop-head h2 {
  margin: 0;
  color: #285f37;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.buyer-price-drop-head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #285f37;
  background: #eef8ee;
  border: 1px solid rgba(95, 155, 99, 0.24);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 0 0 0 rgba(95, 155, 99, 0.18);
  animation: buyerPriceDropPulse 2.4s ease-in-out infinite;
}

.buyer-price-drop-list {
  display: grid;
  gap: 10px;
}

.buyer-price-drop-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, auto) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(95, 155, 99, 0.2);
  border-radius: 8px;
}

.buyer-price-drop-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.buyer-price-drop-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.buyer-price-drop-titleline strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buyer-price-drop-new {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: #285f37;
  background: #eef8ee;
  border: 1px solid rgba(95, 155, 99, 0.28);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
}

.buyer-price-drop-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.buyer-price-drop-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.buyer-price-drop-numbers > span {
  display: grid;
  min-width: 112px;
  padding: 10px 11px;
  color: #285f37;
  background: #eef8ee;
  border: 1px solid rgba(95, 155, 99, 0.22);
  border-radius: 8px;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: right;
}

.buyer-price-drop-numbers > .buyer-price-drop-savings {
  min-width: 132px;
  color: #1f7a3f;
  background: linear-gradient(180deg, #e8f8ec, #f6fff8);
  border-color: rgba(47, 143, 104, 0.34);
  box-shadow: 0 10px 24px rgba(47, 143, 104, 0.14);
  font-size: 1.34rem;
}

.buyer-price-drop-numbers small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.buyer-price-drop-card .secondary-button {
  min-height: 32px;
  padding: 6px 10px;
  border-color: rgba(95, 155, 99, 0.28);
  font-size: 0.78rem;
}

.buyer-price-drop-card .secondary-button:focus-visible,
.favorite-contact-button:focus-visible {
  outline: 3px solid rgba(15, 111, 120, 0.32);
  outline-offset: 2px;
}

@keyframes buyerPriceDropIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buyerPriceDropPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(95, 155, 99, 0.16);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(95, 155, 99, 0.06);
    transform: translateY(-1px);
  }
}

.favorite-dashboard-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-height: 72px;
  padding: 10px;
  background: #f7fbf9;
  border: 1px solid rgba(18, 92, 93, 0.12);
  border-radius: 8px;
}

.favorite-thumb {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  min-height: 72px;
  background-color: #dfe8e3;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
}

.fav-remove-heart,
.viewed-fav-heart {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #fff;
  background: rgba(5, 25, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.fav-remove-heart span,
.viewed-fav-heart span {
  color: #e05252;
  font-size: 0.88rem;
  line-height: 1;
}

.favorite-dashboard-card:hover .fav-remove-heart,
.favorite-dashboard-card:focus-within .fav-remove-heart,
.favorite-dashboard-card:hover .viewed-fav-heart,
.favorite-dashboard-card:focus-within .viewed-fav-heart,
.viewed-fav-heart.is-favorite {
  opacity: 1;
}

.viewed-fav-heart:not(.is-favorite) span {
  color: #fff;
}

.viewed-fav-heart.is-favorite span {
  color: #e05252;
}

.fav-remove-heart:hover,
.viewed-fav-heart:hover {
  background: rgba(5, 25, 28, 0.9);
  transform: scale(1.04);
}

.favorite-card-body {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.favorite-card-content {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
}

.favorite-contact-button {
  justify-self: start;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.favorite-card-body span {
  display: grid;
  /* .favorite-card-body is flex + justify-content:space-between; without an
     explicit flex-grow this title/subtitle column stayed at its shrink-to-fit
     default while the price (em, flex:0 0 auto) kept its full natural width,
     so on narrow "Recently Viewed"/Favorites cards the title collapsed to a
     couple of characters (e.g. "Lo...") instead of using the ellipsis already
     set up on strong below (confirmed 360/390px, s3d mobile pass). */
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.favorite-card-body strong {
  color: var(--ink);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-card-body small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.favorite-card-body em {
  flex: 0 0 auto;
  color: var(--lake-dark);
  font-style: normal;
  font-weight: 900;
}

.empty-card {
  padding: 18px;
  color: var(--muted);
  background: #f6f8f6;
  border: 1px dashed #cbd7d1;
  border-radius: 8px;
  line-height: 1.45;
}

.saved-empty-state {
  display: grid;
  gap: 6px;
  min-height: 118px;
  align-content: center;
  background: linear-gradient(180deg, #fbfcfb, #f5f8f4);
  border-color: rgba(15, 111, 120, 0.18);
  text-align: left;
}

.saved-empty-state > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--lake-dark);
  background: rgba(15, 111, 120, 0.08);
  border-radius: 999px;
  font-size: 1.2rem;
}

.saved-empty-state strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.saved-empty-state p {
  margin: 0;
}

.saved-empty-state.quiet {
  background: #fbfcfb;
  border-color: rgba(27, 42, 38, 0.1);
}

#savedPanel {
  color: var(--sv-text);
  background: var(--sv-page);
  border-radius: 0;
}

#savedPanel .buyer-saved-heading,
#savedPanel .panel-lite,
#savedPanel .saved-item {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

#savedPanel .buyer-saved-heading h1,
#savedPanel .panel-lite h2,
#savedPanel .saved-topline h3 {
  color: var(--sv-heading);
}

#savedPanel .eyebrow,
#savedPanel .saved-item p,
#savedPanel .saved-search-meta,
#savedPanel .saved-search-meta span,
#savedPanel .saved-search-ccr-row,
#savedPanel .buyer-shared-property-analytics span {
  color: var(--sv-text-muted);
}

#savedPanel .buyer-shared-property-analytics strong {
  color: var(--sv-heading);
}

#savedPanel .buyer-saved-live-line {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#savedPanel .buyer-price-drop-alert {
  color: var(--sv-text);
  background:
    linear-gradient(135deg, var(--sv-surface), var(--sv-surface-2)),
    radial-gradient(circle at top right, var(--sv-positive-line), transparent 34%);
  border-color: var(--sv-positive-line);
  border-left-color: var(--sv-positive);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
}

#savedPanel .buyer-price-drop-head h2 {
  color: var(--sv-heading);
}

#savedPanel .buyer-price-drop-head > span,
#savedPanel .buyer-price-drop-new,
#savedPanel .buyer-price-drop-numbers > span {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#savedPanel .buyer-price-drop-new,
#savedPanel .buyer-price-drop-numbers > span small {
  color: var(--sv-positive-label);
}

#savedPanel .saved-search-new-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 11px;
  color: var(--sv-new-search-text);
  background: var(--sv-new-search-bg);
  border: 1px solid rgba(201, 162, 76, 0.48);
  border-radius: 999px;
  box-shadow: var(--sv-new-search-glow);
  font-weight: 950;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

#savedPanel .saved-search-geo-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 11px;
  color: #fff;
  background: linear-gradient(135deg, #071719, var(--lake-dark));
  border-radius: 999px;
  font-weight: 950;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

#savedPanel .saved-search-drop-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 11px;
  color: var(--sv-positive-strong);
  background: var(--sv-positive-bg);
  border: 1px solid var(--sv-positive-line);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(82, 40, 31, 0.24);
  font-weight: 950;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

#savedPanel .buyer-price-drop-card {
  color: var(--sv-text);
  background: var(--sv-card);
  border-color: var(--sv-card-line);
}

#savedPanel .buyer-price-drop-titleline strong,
#savedPanel .favorite-card-body strong,
#savedPanel .saved-empty-state strong {
  color: var(--sv-text);
}

#savedPanel .buyer-price-drop-copy small,
#savedPanel .buyer-price-drop-numbers small,
#savedPanel .favorite-card-body small,
#savedPanel .empty-card,
#savedPanel .saved-empty-state p {
  color: var(--sv-text-muted);
}

#savedPanel .buyer-price-drop-numbers > .buyer-price-drop-savings {
  color: var(--sv-positive-strong);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

#savedPanel .buyer-price-drop-card .secondary-button,
#savedPanel [data-buyer-drop-dismiss] {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
  border-color: transparent;
}

#savedPanel .favorite-contact-button,
#searchPanel [data-contact-listing],
.listing-dialog [data-contact-listing] {
  color: var(--sv-btn-ask-text);
  background: var(--sv-btn-ask-bg);
  border: 1.5px solid var(--sv-btn-ask-border);
}

#savedPanel .favorite-contact-button:hover,
#searchPanel [data-contact-listing]:hover,
.listing-dialog [data-contact-listing]:hover {
  background: rgba(201, 162, 76, 0.12);
  border-color: var(--sv-accent);
}

#savedPanel .primary-button {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
  box-shadow: none;
}

#savedPanel .favorite-dashboard-card,
#savedPanel .empty-card,
#savedPanel .saved-empty-state {
  color: var(--sv-text-muted);
  background: var(--sv-surface-2);
  border-color: var(--sv-card-line);
}

#savedPanel .favorite-thumb {
  background-color: var(--sv-line);
}

#savedPanel .fav-remove-heart,
#savedPanel .viewed-fav-heart {
  color: var(--sv-button-text);
  background: rgba(0, 0, 0, 0.42);
  border-color: var(--sv-line);
}

#savedPanel .fav-remove-heart span,
#savedPanel .viewed-fav-heart span,
#savedPanel .viewed-fav-heart.is-favorite span {
  color: var(--sv-heart);
}

#savedPanel .viewed-fav-heart:not(.is-favorite) span {
  color: var(--sv-button-text);
}

#savedPanel .fav-remove-heart:hover,
#savedPanel .viewed-fav-heart:hover {
  background: rgba(0, 0, 0, 0.62);
}

#savedPanel .favorite-card-body {
  color: var(--sv-text);
  background: transparent;
  border: 0;
}

#savedPanel .favorite-card-body em {
  color: var(--sv-accent);
}

#savedPanel .saved-empty-state > span {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
}

#savedPanel .saved-empty-state.quiet {
  background: var(--sv-surface-2);
  border-color: var(--sv-card-line);
}

#savedPanel .status-pill,
#savedPanel .status-pill.good,
#savedPanel .status-pill.warn {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-neutral-pill-line);
}

@media (prefers-reduced-motion: reduce) {
  .buyer-price-drop-alert,
  .buyer-price-drop-head > span {
    animation: none;
  }
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.mobile-result-toggle {
  display: flex;
  gap: 6px;
  margin: 10px 0 12px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.mobile-result-toggle button {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  color: var(--lake-dark);
  background: transparent;
  font-weight: 800;
}

.mobile-result-toggle button.active {
  color: #fff;
  background: linear-gradient(135deg, #071719, var(--lake-dark));
}

.mobile-map-panel {
  margin: 12px 0;
}

.mobile-map-panel:not(.hidden) {
  display: block;
}

.results-grid.mobile-map-active {
  display: none;
}

.mobile-map-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.mobile-map-canvas-wrap {
  position: relative;
}

.mobile-map-canvas {
  position: relative;
  height: 640px;
  background: #f4f7f5;
}

.meridian-search-area-btn {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #071719, var(--lake-dark));
  box-shadow: 0 10px 24px rgba(5, 25, 28, 0.32);
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
}

@media (max-width: 820px) {
  .mobile-map-canvas {
    height: 70vh;
    min-height: 420px;
  }
}

.map-marker-popup .leaflet-popup-content {
  margin: 0;
  width: 200px !important;
}

.map-marker-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.map-marker-preview-photo {
  height: 110px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #e7ece9;
}

.map-marker-preview strong {
  font-size: 0.9rem;
  line-height: 1.3;
}

.map-marker-preview span {
  font-weight: 700;
  color: var(--lake-dark);
}

.map-marker-preview button {
  margin-top: 2px;
  width: 100%;
}

#searchForm #mapSearchButton {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 150px;
  color: #fff;
  background: linear-gradient(135deg, #071719, var(--lake-dark));
  border: 1px solid rgba(15, 111, 120, 0.5);
  box-shadow: 0 10px 24px rgba(5, 25, 28, 0.22);
}

.leaflet-container input,
.leaflet-container select,
.leaflet-container textarea {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 4px;
  border-radius: 4px;
}

.mobile-map-summary {
  display: grid;
  gap: 5px;
  padding: 14px;
}

.mobile-map-summary strong {
  color: var(--lake-dark);
}

.mobile-map-summary span,
.mobile-map-summary small {
  color: var(--muted);
  line-height: 1.35;
}

.skeleton-card {
  pointer-events: none;
}

.skeleton-photo,
.skeleton-line,
.skeleton-chip-row span,
.skeleton-block strong,
.skeleton-block span {
  display: block;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg, #edf2ef 0%, #fbfaf5 48%, #edf2ef 100%);
  background-size: 220% 100%;
  border-radius: 8px;
  animation: meridian-skeleton 1.15s ease-in-out infinite;
}

.skeleton-photo {
  min-height: 260px;
  border-radius: 0;
}

.skeleton-line {
  width: 72%;
  height: 16px;
}

.skeleton-line.wide {
  width: 92%;
  height: 22px;
}

.skeleton-line.short {
  width: 46%;
}

.skeleton-chip-row {
  display: flex;
  gap: 8px;
}

.skeleton-chip-row span {
  width: 84px;
  height: 30px;
  border-radius: 999px;
}

.skeleton-block {
  min-height: 78px;
}

.skeleton-block strong {
  width: 46%;
  height: 14px;
}

.skeleton-block span {
  width: 78%;
  height: 18px;
}

@keyframes meridian-skeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.result-card {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  border: 1px solid rgba(197, 149, 72, 0.26);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(5, 25, 28, 0.11);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  cursor: pointer;
}

.result-card:hover {
  transform: translateY(-2px);
  border-color: rgba(197, 149, 72, 0.42);
  box-shadow: var(--lift-shadow);
}

.result-card.review-only {
  border-color: rgba(197, 149, 72, 0.42);
}

.empty-result {
  grid-column: 1 / -1;
}

.buyer-data-state {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  color: var(--forest);
  background: #f7fbf9;
  border: 1px solid rgba(15, 111, 120, 0.22);
  border-radius: 8px;
}

.buyer-data-state span {
  color: var(--muted);
}

.dashboard-load-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(152, 91, 41, 0.24);
  border-radius: 8px;
  color: var(--ink);
  background: #fff8ed;
}

.own-agent-profile-back-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(5, 25, 28, 0.14);
  border-radius: 8px;
  color: var(--ink);
  background: #eef3f1;
  font-weight: 700;
}

.own-agent-profile-optin p {
  max-width: 60ch;
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.dashboard-load-state div {
  display: grid;
  gap: 3px;
}

.dashboard-load-state span {
  color: var(--muted);
  font-size: 0.9rem;
}

.search-error-state {
  border-color: rgba(152, 91, 41, 0.36);
}

.empty-result-body {
  gap: 14px;
  padding: 28px;
  background: linear-gradient(135deg, #fffdf8, #f3f7f4);
}

.empty-result-kicker {
  width: max-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--lake);
  background: rgba(18, 92, 93, 0.1);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.empty-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.empty-search-intent {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 111, 120, 0.12);
  border-radius: 8px;
}

.empty-search-intent strong {
  color: var(--lake-dark);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.empty-search-actions button {
  padding: 10px 13px;
  border: 1px solid rgba(18, 92, 93, 0.22);
  border-radius: 999px;
  color: var(--lake);
  background: #ffffff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(5, 25, 28, 0.08);
}

.empty-search-actions button:hover {
  border-color: rgba(197, 149, 72, 0.48);
  color: var(--ink);
  transform: translateY(-1px);
}

.empty-search-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.result-image {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 332px;
  padding: 14px;
  color: var(--white);
  background-color: var(--lake-dark);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* background-color only, deliberately not the `background` shorthand: the
   shorthand resets background-size/position/repeat to their CSS defaults
   (auto / 0% 0% / repeat) on any property it doesn't explicitly set, which
   silently undid .result-image's contain/center/no-repeat fix above for
   every land and new-construction listing - confirmed live 2026-08-14 (real
   listing photos rendering as an actual-size top-left sliver, reading as
   "zoomed in and foggy" because that sliver is mostly sky). The gradient
   these rules used to paint is moot anyway: the inline background-image on
   the element (the real photo URL) always wins over this class's
   background-image, so only a plain fallback color is ever actually needed
   here for the rare listing with no photo at all. */
.result-image.land {
  background-color: #47644f;
}

.result-image.construction {
  background-color: #24515a;
}

.result-image-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.result-image .price {
  width: max-content;
  max-width: 100%;
  padding: 9px 12px;
  background: rgba(5, 25, 28, 0.86);
  border: 1px solid rgba(242, 224, 187, 0.36);
  border-radius: 8px;
  font-size: 1.18rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(5, 25, 28, 0.2);
}

.image-chip {
  padding: 7px 10px;
  color: #fffdf8;
  background: rgba(5, 25, 28, 0.68);
  border: 1px solid rgba(242, 224, 187, 0.28);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.price-drop-ribbon {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 7px 10px;
  color: #3a2a05;
  background: #ffcf6b;
  border: 1px solid rgba(197, 149, 72, 0.55);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(5, 25, 28, 0.25);
}

.photo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: end;
  gap: 8px;
  min-width: 112px;
  padding: 5px;
  background: rgba(5, 25, 28, 0.62);
  border-radius: 999px;
  backdrop-filter: blur(7px);
}

.photo-controls button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.1rem;
  line-height: 1;
}

.photo-controls span {
  min-width: 38px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.result-body {
  display: grid;
  gap: 12px;
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
}

.result-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.result-body h2 {
  margin-bottom: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.48rem;
  font-weight: 600;
  line-height: 1.25;
}

.favorite-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 999px;
  color: var(--cedar);
  background: #fffdf8;
  font-size: 1.35rem;
  line-height: 1;
}

.favorite-button small {
  display: none;
}

.favorite-button.active {
  color: var(--white);
  background: var(--gold);
  border-color: var(--gold);
}

.favorite-button:hover {
  border-color: var(--cedar);
  box-shadow: 0 8px 18px rgba(123, 79, 47, 0.12);
}

.meta-line,
.rule-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.community-line {
  margin: 3px 0 0;
  color: var(--lake-dark);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.listing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 0;
}

.listing-facts span {
  padding: 7px 9px;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
}

.premium-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.status-chip {
  padding: 7px 9px;
  color: var(--lake-dark);
  background: rgba(15, 111, 120, 0.08);
  border: 1px solid rgba(15, 111, 120, 0.14);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.idx-attribution {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.idx-attribution.detail {
  margin-top: 12px;
  text-transform: none;
}

.fit-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.35;
}

.fit-list li::marker {
  color: var(--cedar);
}

.result-card .fit-list {
  margin-top: 0;
  padding: 10px 12px 10px 28px;
  background: #f7f4ec;
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
}

.match-explainer {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  background: #fffdf8;
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 8px;
}

.match-explainer strong {
  color: var(--lake-dark);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-explainer span {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

.match-explainer ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-explainer li {
  position: relative;
  padding-left: 18px;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.38;
}

.match-explainer li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
}

.rule-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rule-badge {
  display: inline-grid;
  gap: 4px;
  min-height: 42px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(15, 111, 120, 0.15);
  border-radius: 8px;
  color: var(--lake-dark);
  background: #f4fbf8;
  font-size: 0.78rem;
  font-weight: 900;
}

.rule-badge summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
}

.rule-badge summary::-webkit-details-marker {
  display: none;
}

.rule-badge summary span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--lake);
  font-size: 0.68rem;
}

.rule-badge small {
  max-width: 320px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.rule-badge-positive {
  color: #174f34;
  background: #edf8f2;
  border-color: #cde8d7;
}

.rule-badge-positive summary span {
  background: var(--ok);
}

.rule-badge-negative {
  color: #7b2f23;
  background: #fff0ed;
  border-color: #f0c2ba;
}

.rule-badge-negative summary span {
  background: var(--danger);
}

.rule-badge-caution {
  color: #7c561b;
  background: #fff8eb;
  border-color: #edd8a1;
}

.rule-badge-caution summary span {
  background: #c5871f;
}

.rule-badge-neutral {
  color: var(--muted);
  background: #f5f6f2;
  border-color: rgba(27, 42, 38, 0.12);
}

.rule-badge-tone-good {
  color: #174f34;
  background: #edf8f2;
  border-color: #cde8d7;
}

.rule-badge-tone-good summary span {
  background: var(--ok);
}

.rule-badge-tone-warn,
.rule-badge-tone-unverified {
  color: #7c561b;
  background: #fff8eb;
  border-color: #edd8a1;
}

.rule-badge-tone-warn summary span,
.rule-badge-tone-unverified summary span {
  background: #c5871f;
}

.rule-badge-tone-blocked {
  color: #7b2f23;
  background: #fff0ed;
  border-color: #f0c2ba;
}

.rule-badge-tone-blocked summary span {
  background: var(--danger);
}

.min-build-rule {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 111, 120, 0.15);
  border-radius: 8px;
  background: #f7fbf9;
  color: var(--lake-dark);
  font-size: 0.82rem;
}

.min-build-rule strong {
  font-family: var(--font-serif);
  color: var(--lake-dark);
}

.min-build-rule p,
.min-build-rule small {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.min-build-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.min-build-classes span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 111, 120, 0.08);
  color: var(--lake-dark);
  font-weight: 800;
}

#searchPanel.search-has-output .results-toolbar,
#searchPanel.search-has-output .result-card,
#searchPanel.search-has-output .result-body,
#searchPanel.search-has-output .match-explainer,
#searchPanel.search-has-output .empty-search-intent {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

#searchPanel.search-has-output .result-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

#searchPanel.search-has-output .result-card:hover {
  border-color: var(--sv-accent);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

#searchPanel.search-has-output .results-toolbar h1,
#searchPanel.search-has-output .result-body h2,
#searchPanel.search-has-output .match-explainer strong,
#searchPanel.search-has-output .community-line {
  color: var(--sv-heading);
}

#searchPanel.search-has-output .results-toolbar .eyebrow,
#searchPanel.search-has-output .results-toolbar .meta-line,
#searchPanel.search-has-output .result-body .meta-line,
#searchPanel.search-has-output .rule-note,
#searchPanel.search-has-output .idx-attribution,
#searchPanel.search-has-output .match-explainer span,
#searchPanel.search-has-output .match-explainer li,
#searchPanel.search-has-output .rule-badge small,
#searchPanel.search-has-output .empty-search-note {
  color: var(--sv-text-muted);
}

#searchPanel.search-has-output .listing-facts span,
#searchPanel.search-has-output .search-reason-list li,
#searchPanel.search-has-output .search-reason-chips span,
#searchPanel.search-has-output .status-chip,
#searchPanel.search-has-output .status-pill,
#searchPanel.search-has-output .status-pill.good,
#searchPanel.search-has-output .status-pill.warn,
#searchPanel.search-has-output .rule-badge,
#searchPanel.search-has-output .rule-badge-neutral,
#searchPanel.search-has-output .empty-result-kicker {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-neutral-pill-line);
}

#searchPanel.search-has-output .rule-badge summary span,
#searchPanel.search-has-output .match-explainer li::before {
  background: var(--sv-accent);
}

#searchPanel.search-has-output .rule-badge-positive {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#searchPanel.search-has-output .rule-badge-caution,
#searchPanel.search-has-output .buyer-watch-note {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
}

#searchPanel.search-has-output .rule-badge-tone-good {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-neutral-pill-line);
}

#searchPanel.search-has-output .rule-badge-tone-warn,
#searchPanel.search-has-output .rule-badge-tone-unverified {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-accent);
}

#searchPanel.search-has-output .rule-badge-tone-blocked {
  color: var(--sv-positive-strong);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#searchPanel.search-has-output .status-pill.blocked {
  color: var(--sv-positive-strong);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#searchPanel.search-has-output .min-build-rule {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#searchPanel.search-has-output .min-build-rule strong {
  color: var(--sv-heading);
}

#searchPanel.search-has-output .min-build-rule p,
#searchPanel.search-has-output .min-build-rule small {
  color: var(--sv-text-muted);
}

#searchPanel.search-has-output .min-build-classes span {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border: 1px solid var(--sv-neutral-pill-line);
}

#searchPanel.search-has-output .buyer-watch-note strong {
  color: var(--sv-heading);
}

#searchPanel.search-has-output .favorite-button {
  color: var(--sv-heart);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#searchPanel.search-has-output .favorite-button.active {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
  border-color: transparent;
}

#searchPanel.search-has-output .card-cta-note {
  color: var(--sv-text-muted);
}

#searchPanel.search-has-output .card-actions .primary-button {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
  border-color: transparent;
  box-shadow: none;
}

#searchPanel.search-has-output .card-actions .secondary-button {
  color: var(--sv-btn-ask-text);
  background: var(--sv-btn-ask-bg);
  border: 1.5px solid var(--sv-btn-ask-border);
}

.search-reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.search-reason-list li {
  padding: 7px 9px;
  color: var(--lake-dark);
  background: rgba(15, 111, 120, 0.08);
  border: 1px solid rgba(15, 111, 120, 0.14);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.search-reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.search-reason-chips span {
  padding: 7px 9px;
  color: var(--lake-dark);
  background: rgba(15, 111, 120, 0.08);
  border: 1px solid rgba(15, 111, 120, 0.14);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.buyer-watch-note {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  color: #815524;
  background: #fff8eb;
  border: 1px solid rgba(197, 135, 31, 0.22);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.buyer-watch-note strong {
  color: #6d4318;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.rule-check-list {
  display: grid;
  gap: 8px;
}

.rule-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  padding: 10px 11px;
  background: #fbfcfb;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-left: 4px solid var(--lake);
  border-radius: 8px;
}

.rule-check.pass {
  border-left-color: var(--ok);
}

.rule-check.source {
  border-left-color: var(--gold);
}

.rule-check.watch {
  border-left-color: #c5871f;
  background: #fffaf0;
}

.rule-check span {
  grid-row: span 2;
  align-self: start;
  padding: 3px 6px;
  color: var(--lake-dark);
  background: rgba(15, 111, 120, 0.08);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rule-check p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.35;
}

.rule-check small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
}

.detail-rule-checks {
  margin-top: 8px;
}

.card-cta-note {
  padding: 9px 11px;
  color: var(--lake-dark);
  background: #eef7f4;
  border: 1px solid rgba(15, 111, 120, 0.18);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.status-pill.good {
  color: var(--ok);
  background: #edf8f2;
}

.status-pill.warn {
  color: #875f16;
  background: #fff7e3;
}

.status-pill.blocked {
  color: var(--danger);
  background: #fff0ed;
}

.status-pill.bad {
  color: var(--danger);
  background: #fff0ed;
}

.status-pill.neutral {
  color: var(--muted);
  background: #f4f7f5;
}

.tag.rule-backed {
  color: var(--ok);
  background: #edf8f2;
  border-color: #cde8d7;
}

.tag.rule-unmapped {
  color: #875f16;
  background: #fff7e3;
  border-color: #edd8a1;
}

.tag.rule-confidence.high {
  color: var(--ok);
  background: #edf8f2;
  border-color: #cde8d7;
}

.tag.rule-confidence.medium {
  color: #875f16;
  background: #fff7e3;
  border-color: #edd8a1;
}

.tag.rule-confidence.low {
  color: #8b4a22;
  background: #fff3ea;
  border-color: #efc7aa;
}

.tag.rule-scope {
  color: var(--lake-dark);
  background: rgba(15, 111, 120, 0.07);
  border-color: rgba(15, 111, 120, 0.16);
}

.rule-confidence-note {
  margin: -4px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.rule-confidence-note.high {
  color: var(--ok);
  background: #f4fbf6;
}

.rule-confidence-note.medium {
  color: #875f16;
  background: #fff9ec;
}

.rule-confidence-note.low {
  color: #8b4a22;
  background: #fff3ea;
}

.card-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(197, 149, 72, 0.22);
}

.card-details summary {
  color: var(--lake-dark);
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  list-style: none;
}

.card-details summary::-webkit-details-marker {
  display: none;
}

.card-details summary::before {
  content: "+ ";
}

.card-details[open] summary::before {
  content: "\2212 ";
}

.card-details[open] summary {
  margin-bottom: 10px;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.card-actions .primary-button,
.card-actions .secondary-button {
  min-width: 0;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.activity-log {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.activity-item {
  padding: 10px;
  color: var(--muted);
  background: #f4f7f5;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.4;
}

.dashboard-row span {
  display: grid;
  gap: 3px;
}

.dashboard-row small {
  color: #7b8b84;
  font-size: 0.76rem;
}

.dashboard-row strong {
  flex: 0 0 auto;
  max-width: 120px;
  overflow-wrap: anywhere;
  color: var(--lake-dark);
  font-size: 0.78rem;
  text-align: right;
}

.dashboard-row strong .activity-sync {
  display: block;
  margin-top: 3px;
  color: #7b8b84;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-row strong .activity-sync.good {
  color: #16714f;
}

.dashboard-row strong .activity-sync.warn {
  color: #9b5d2b;
}

.dashboard-row-button {
  width: 100%;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
}

.dashboard-row-button.active {
  border-color: var(--lake);
  background: #eef6f4;
}

.client-drilldown {
  display: grid;
  gap: 12px;
}

.crm-shell,
.crm-profile {
  gap: 14px;
}

.crm-shell {
  padding: 4px;
}

.crm-client-list {
  display: grid;
  gap: 10px;
}

.crm-table-shell {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(197, 149, 72, 0.18);
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(18, 30, 26, 0.08);
}

.crm-table-head {
  border-radius: 8px 8px 0 0;
}

.crm-client-table {
  display: grid;
  overflow-x: auto;
}

.crm-client-table-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(380px, 1.8fr) minmax(140px, 0.55fr) minmax(140px, 0.55fr);
  align-items: center;
  gap: 18px;
  min-width: 980px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(18, 30, 26, 0.08);
}

.crm-client-table-header {
  color: var(--ink);
  background: #fbfcfb;
  font-size: 0.9rem;
  font-weight: 900;
}

.crm-client-table .crm-client-row {
  border: 0;
  border-bottom: 1px solid rgba(18, 30, 26, 0.08);
  border-radius: 0;
  box-shadow: none;
}

.crm-client-table .crm-client-row:hover {
  background: #f6fbf8;
}

.crm-name-cell,
.crm-phone-cell,
.crm-last-activity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.client-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: #7f99b2;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
}

.crm-linkish {
  overflow: hidden;
  color: #2f9ee7;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-dot,
.activity-glyph {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: #42c799;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.contact-dot.message {
  background: #7e9ff4;
}

.activity-glyph {
  color: #ff9f67;
  background: #fff0e7;
  border: 1px solid #ffd1b5;
}

.crm-last-activity span:last-child {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(18, 30, 26, 0.06);
  text-align: left;
}

.crm-client-row > span:first-child {
  display: grid;
  gap: 4px;
}

.crm-client-row small,
.crm-client-row em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.crm-client-cue {
  display: block;
  max-width: 680px;
  overflow: hidden;
  color: var(--lake-dark);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-client-row em {
  justify-self: end;
  font-weight: 900;
  text-align: right;
}

.crm-counts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.crm-counts b {
  color: var(--lake-dark);
  font-size: 1.05rem;
}

.crm-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.crm-profile-stats span {
  display: grid;
  gap: 3px;
  padding: 12px;
  color: var(--muted);
  background: linear-gradient(180deg, #ffffff, #f5f7f3);
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  font-size: 0.78rem;
}

.crm-profile-stats strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.crm-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: start;
  gap: 24px;
  min-width: 0;
}

.crm-contact-main,
.crm-contact-sidebar,
.crm-sidebar-list,
.crm-timeline {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Client profile v2 (redesigned layout): left (identity/contact/tags/
   follow-up), center (activity), right (saved houses/searches) columns.
   Unlike .crm-contact-layout above, this caps its own width and centers
   itself -- nothing upstream of it (#dashboardGrid/.agent-shell-main) sets
   a max-width, so on a wide monitor the old single-wide-column layout just
   stretched edge to edge with no cap, which is what "too wide" meant. */
.crm-profile-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px;
  align-items: start;
  max-width: 1360px;
  margin: 0 auto;
  min-width: 0;
}

.crm-profile-col {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

@media (max-width: 1180px) {
  .crm-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.crm-contact-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(197, 149, 72, 0.15);
}

.crm-contact-card-row:first-of-type {
  border-top: none;
}

.crm-contact-card-row span {
  color: var(--muted);
  font-size: 0.82rem;
  flex: 0 0 auto;
}

.crm-contact-card-row a,
.crm-contact-card-row em {
  text-align: right;
}

.crm-contact-card-row a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crm-contact-card-row a:hover,
.crm-contact-card-row a:focus-visible {
  text-decoration-thickness: 2px;
}

.crm-contact-card-address input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.85rem;
  text-align: right;
}

/* Tags */
.crm-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.crm-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: rgba(197, 149, 72, 0.12);
  border: 1px solid rgba(197, 149, 72, 0.3);
  font-size: 0.78rem;
  color: var(--ink);
}

.crm-tag-chip.crm-tag-community_owns {
  background: rgba(58, 122, 90, 0.14);
  border-color: rgba(58, 122, 90, 0.35);
}

.crm-tag-chip.crm-tag-status {
  background: rgba(41, 87, 145, 0.12);
  border-color: rgba(41, 87, 145, 0.32);
}

.crm-tag-remove {
  all: unset;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--muted);
  padding: 2px;
}

.crm-tag-remove:hover {
  color: var(--ink);
}

.crm-tag-empty {
  font-size: 0.82rem;
  color: var(--muted);
}

.crm-tag-quick-status {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.crm-tag-community-box {
  position: relative;
  margin-bottom: 10px;
}

.crm-tag-community-input {
  width: 100%;
}

.crm-tag-community-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(197, 149, 72, 0.3);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(18, 30, 26, 0.12);
}

.crm-tag-community-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(197, 149, 72, 0.12);
  font-size: 0.82rem;
}

.crm-tag-community-option:last-child {
  border-bottom: none;
}

.crm-tag-community-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.crm-tag-community-empty {
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.crm-tag-custom-form {
  display: flex;
  gap: 8px;
}

.crm-tag-custom-form .crm-tag-custom-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Saved Houses as property cards, not a plain list */
.crm-property-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

.crm-property-card {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(197, 149, 72, 0.18);
  background: var(--white);
  min-width: 0;
}

.crm-property-card:hover,
.crm-property-card:focus-visible {
  border-color: rgba(197, 149, 72, 0.5);
}

.crm-property-card-photo {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: rgba(5, 25, 28, 0.06);
}

.crm-property-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.crm-property-card-copy strong {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-property-card-copy small {
  color: var(--muted);
  font-size: 0.76rem;
}

.crm-property-card-copy em {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
}

.listings-tab-row {
  /* .todo-editor is display:grid; without this, a grid item's default
     min-width:auto lets it grow to fit every card's combined intrinsic
     width, so .listings-tab-scroll below never gets a chance to become the
     overflow container -- the whole row (and page) stretches instead of
     scrolling. Same class of bug as the .agent-shell-main min-width:0 fix
     above, one grid level deeper. */
  min-width: 0;
  margin: 0 0 22px;
}

.listings-tab-row h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  /* Theme-reactive on purpose -- see the .agent-shell-main comment above:
     a hardcoded light-background color here is invisible against the Navy
     theme's dark page background. var(--sv-heading) flips automatically:
     gold in Navy, dark teal in Cream. */
  color: var(--sv-heading);
}

.listings-tab-scroll {
  display: flex;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.listings-tab-empty {
  color: var(--sv-text-muted);
  font-size: 0.82rem;
  margin: 0;
}

.listings-tab-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(197, 149, 72, 0.18);
  background: var(--white);
}

.listings-tab-card:hover,
.listings-tab-card:focus-within {
  border-color: rgba(197, 149, 72, 0.5);
}

.listings-tab-card .crm-property-card-photo {
  width: 100%;
  height: 110px;
}

.listings-tab-engagement {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.listings-tab-engagement-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.listings-tab-engagement-stat svg {
  flex: 0 0 auto;
}

.listings-tab-card .crm-property-card-copy strong {
  white-space: normal;
  /* .crm-property-card-copy strong/em set no color of their own, so they
     inherit var(--sv-text) from the Navy-themed dashboard ancestor (light
     cream, meant for the dark page background) -- nearly invisible against
     this card's own white background. Unlike the row heading fix above,
     this card is a fixed light surface regardless of page theme, so it
     needs a fixed dark color here, not a theme-reactive one. */
  color: var(--lake-dark);
}

.listings-tab-card .crm-property-card-copy em {
  color: var(--lake-dark);
}

/* Pipeline cards (Option/Contingent/Pending) wrap their clickable photo+copy
   area in its own button, separate from the actions row below -- a <button>
   can't contain another <button>, and this card now needs room for the
   remove/share actions alongside the "open" action. */
.listings-tab-card-open {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.listings-tab-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-record-panel {
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(18, 30, 26, 0.06);
  /* Grid/flex items default to min-width: auto, not 0 -- without this, a
     panel containing a <textarea> (pinned-notes-panel) refuses to shrink
     below the textarea's intrinsic minimum width, which forces the whole
     .crm-profile-center track wider than intended and squeezes the left/
     right columns to compensate. Confirmed live (2026-08-06): this is what
     "pushing the side columns in" looked like. */
  min-width: 0;
}

.crm-record-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.crm-record-section-head.padded {
  padding: 16px 18px 0;
}

.crm-record-section-head h3 {
  margin: 0;
  font-size: 1rem;
}

.crm-record-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.crm-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(18, 30, 26, 0.08);
  border-radius: 8px;
  text-align: left;
}

.crm-timeline-item span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-timeline-item small,
.crm-timeline-item em,
.crm-favorite-tile small,
.crm-note-status {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-timeline-item time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.showing-row {
  display: grid;
  gap: 6px;
}

.showing-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: rgba(18, 30, 26, 0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.touchpoint-time-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.touchpoint-delete {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.touchpoint-delete:hover,
.touchpoint-delete:focus-visible {
  background: rgba(198, 60, 46, 0.12);
  color: #c63c2e;
}

/* Self-contained: its own opaque background + guaranteed-contrasting text,
   not relying on whatever ambient panel/theme background it's nested in --
   confirmed live 2026-08-17 that relying on inherited colors here made the
   note unreadable. Stacked vertically (text above, button below, both full
   width) rather than side-by-side so a long note can never visually
   overlap the Edit button regardless of text length or screen width. */
.showing-note-display {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(18, 30, 26, 0.12);
  border-radius: 8px;
}

.showing-note-display small {
  display: block;
  color: #17211d;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: normal;
}

.showing-note-display .secondary-button {
  align-self: flex-start;
}

.showing-note-edit {
  display: grid;
  gap: 6px;
  padding: 0 4px;
}

.showing-note-actions {
  display: flex;
  gap: 8px;
}

.touchpoint-listing-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  color: var(--lake-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: normal;
  text-align: left;
}

.touchpoint-listing-link:hover,
.touchpoint-listing-link:focus-visible {
  color: var(--gold, #c59548);
}

.crm-favorite-tile {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(18, 30, 26, 0.08);
  border-radius: 8px;
  text-align: left;
}

.crm-favorite-tile > button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.crm-favorite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-favorite-actions a {
  padding: 6px 8px;
  color: var(--lake-dark);
  background: #f7fbf9;
  border: 1px solid rgba(18, 92, 93, 0.16);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.crm-favorite-actions a:hover {
  border-color: rgba(197, 149, 72, 0.48);
}

.most-active-caption {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crm-handoff-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.crm-handoff-row > button {
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.crm-inline-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.crm-inline-actions a {
  padding: 6px 8px;
  color: var(--lake-dark);
  background: #fff;
  border: 1px solid rgba(18, 92, 93, 0.16);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.agent-activity-home {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.agent-shell {
  padding-left: 76px;
  padding-right: clamp(16px, 3vw, 32px);
  transition: padding-left 0.18s ease;
}

.agent-shell.sidebar-pinned {
  padding-left: 300px;
}

.agent-sidebar {
  position: fixed;
  left: 0;
  top: 90px;
  height: calc(100vh - 90px);
  width: 76px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #101a18, #17383b);
  transition: width 0.18s ease, box-shadow 0.18s ease;
  z-index: 15;
}

.agent-sidebar:hover,
.agent-sidebar.pinned {
  width: 300px;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
}

/* Wins over the :hover rule above while present -- see setSidebarPinned()'s
   comment for why this class exists (unpinning while the cursor is still
   inside the sidebar would otherwise leave it visually stuck open). */
.agent-sidebar.force-collapsed {
  width: 76px !important;
  box-shadow: none !important;
}

.agent-sidebar-pin {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 0 26px;
  margin-bottom: 12px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.agent-sidebar.pinned .agent-sidebar-pin {
  color: var(--champagne);
}

/* Collapsed rail shows the icon rail at all times -- only the text labels
   (.agent-sidebar-label below) fade in on hover/pin. Icons came back
   2026-07-29; this replaces the earlier "hide the whole nav when collapsed"
   behavior from when there were no icons to show a collapsed button. */
.agent-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px;
}

.agent-sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.agent-sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--champagne);
}

.agent-sidebar-icon svg {
  width: 100%;
  height: 100%;
}

.agent-sidebar-nav button:hover .agent-sidebar-icon,
.agent-sidebar-nav button:focus-visible .agent-sidebar-icon {
  color: #ffffff;
}

.agent-sidebar-nav button:hover,
.agent-sidebar-nav button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(234, 215, 170, 0.34);
  color: #ffffff;
  outline: none;
}

.agent-sidebar-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
}

.agent-sidebar-label {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.agent-sidebar:hover .agent-sidebar-label,
.agent-sidebar.pinned .agent-sidebar-label {
  opacity: 1;
}

.agent-shell-main {
  min-width: 0;
}

/* Client (buyer) sidebar -- simpler sibling of .agent-sidebar above: always
   shows labels (only 4 items, no need for a hover-to-expand icon rail),
   fixed position, and reuses the same off-canvas mobile-drawer mechanics
   (closeMobileDrawers()/openMobileDrawer() in app.js) as the agent sidebar
   below the 1120px breakpoint instead of inventing a new mobile pattern. */
.client-sidebar {
  position: fixed;
  left: 0;
  top: 90px;
  height: calc(100vh - 90px);
  width: 220px;
  overflow-y: auto;
  padding: 16px 10px;
  background: linear-gradient(180deg, #101a18, #17383b);
  z-index: 15;
}

.client-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.client-sidebar-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.client-sidebar-tab:hover,
.client-sidebar-tab:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(234, 215, 170, 0.34);
  color: #ffffff;
  outline: none;
}

.client-sidebar-tab.active {
  background: rgba(234, 215, 170, 0.16);
  border-color: rgba(234, 215, 170, 0.5);
  color: var(--champagne);
}

.client-sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.client-sidebar-icon svg {
  width: 100%;
  height: 100%;
}

.client-sidebar-label {
  white-space: normal;
  line-height: 1.2;
}

.client-sidebar-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.client-sidebar-toggle {
  display: none;
}

.client-panel {
  padding-left: 244px;
  transition: padding-left 0.18s ease;
}

/* .agent-shell paints a theme-reactive background (var(--sv-page): dark in
   Navy, light in Cream) behind everything in the dashboard, but only
   .agent-crm-layout ever paired that with a matching theme-reactive text
   color. Every OTHER tab (todo editor, property pipeline, history, community
   rules, etc.) never set an explicit color, so it inherited a
   light-background-oriented default -- invisible in Navy, fine in Cream by
   coincidence. Matt flagged this on the new Community Rules tab specifically
   (2026-07-29), but the root cause is shared by every non-CRM tab, so fixed
   here once rather than patching one panel's heading color. Placed BEFORE
   .agent-crm-layout's own color rule in source order so that still wins for
   CRM content (equal selector specificity -- source order decides). */
#dashboardPanel .agent-shell-main {
  color: var(--sv-text);
}

/* .eyebrow (small uppercase label text, e.g. "Reference") hardcodes a fixed
   muted gray meant for light backgrounds -- same invisible-in-Navy problem
   as above, but .eyebrow is a shared global class used well beyond the
   dashboard (buyer hero, site header), so scoped here rather than changed
   globally. */
#dashboardPanel .agent-shell-main .eyebrow {
  color: var(--sv-text-muted);
}

/* Settings / My Buyer Link / contact tools / community doc intake now behave
   like real pages instead of a form appearing over the still-visible
   dashboard -- whichever one is open hides the dashboard grid + CRM list
   entirely. See syncToolPanelOpenState() in app.js. */
.agent-shell-main.tool-panel-open .dashboard-grid,
.agent-shell-main.tool-panel-open .agent-crm-layout,
.agent-shell-main.tool-panel-open .agent-active-session-banner,
.agent-shell-main.tool-panel-open #agentPilotReadiness {
  display: none;
}

.agent-crm-command-center {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.crm-overview-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.crm-overview-tile {
  display: grid;
  gap: 4px;
  min-height: 106px;
  padding: 15px 14px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 250, 0.98));
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(18, 30, 26, 0.06);
  text-align: left;
}

.crm-overview-tile:hover,
.crm-overview-tile:focus-visible {
  border-color: rgba(197, 149, 72, 0.42);
  outline: none;
  box-shadow: 0 16px 32px rgba(18, 30, 26, 0.1);
}

.crm-overview-tile span {
  color: #61757b;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.crm-overview-tile strong {
  color: var(--lake-dark);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.45rem);
  line-height: 0.95;
}

.crm-overview-tile small {
  color: #667883;
  font-size: 0.78rem;
  line-height: 1.35;
}

.agent-insight-stack,
.rule-intent-list {
  display: grid;
  gap: 12px;
}

.agent-activity-feed,
.most-active-list,
.rule-question-list {
  display: grid;
  gap: 8px;
}

.agent-feed-row,
.most-active-row,
.rule-intent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.agent-feed-row:hover,
.most-active-row:hover,
.rule-intent-row:hover {
  border-color: rgba(197, 149, 72, 0.4);
  background: #fffdf8;
}

.agent-feed-row small,
.most-active-row small,
.rule-intent-row small,
.rule-question-row span {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.agent-feed-row time,
.most-active-row em,
.rule-intent-row time {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  white-space: nowrap;
}

.intent-mini,
.rule-intent-row em {
  display: block;
  color: var(--lake-dark);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.rule-intent-panel {
  border-color: rgba(197, 149, 72, 0.34);
  background: linear-gradient(180deg, #fffdf8, #ffffff);
}

.todo-panel {
  border-color: rgba(197, 149, 72, 0.34);
  background: linear-gradient(180deg, #fffdf8, #ffffff);
}

.todo-add-form {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
}

.todo-add-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(197, 149, 72, 0.32);
  border-radius: 6px;
  font-size: 0.9rem;
  background: #ffffff;
  color: var(--ink);
}

.todo-add-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.todo-error {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  border: 1px solid rgba(163, 58, 47, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.todo-list {
  display: grid;
  gap: 6px;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(197, 149, 72, 0.16);
  border-radius: 6px;
  color: var(--ink);
  background: #ffffff;
  cursor: pointer;
}

/* Target the task text explicitly, NOT every span in the row. A bare
   `.todo-row span` also matches .todo-drag-handle, which made the handle a
   flex:1 sibling of .todo-row-main -- the two then split the row 50/50 and
   the checkbox landed dead center instead of hard left. */
.todo-row .todo-task-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}

.todo-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.todo-row--done {
  background: #f6f8f6;
}

.todo-row--done span {
  color: var(--muted);
  text-decoration: line-through;
}

.todo-delete {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.todo-delete:hover,
.todo-delete:focus-visible {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  outline: none;
}

.todo-top-five-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.todo-top-five-row:hover {
  border-color: rgba(197, 149, 72, 0.4);
  background: #fffdf8;
}

/* The global `input, select, textarea { width: 100%; padding: 12px 13px }`
   rule near the top of this file applies to checkboxes too, which renders
   each one as a full-width padded white box with the check glyph centered
   inside it and the task text shoved to the far right. Every checkbox in
   this codebase must override it explicitly (see .consent-check input,
   which does the same thing for the same reason). */
.todo-top-five-row input[type="checkbox"],
.todo-row input[type="checkbox"],
.todo-row-main input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  accent-color: var(--lake);
}

.todo-top-five-row span {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}

/* .todo-top-five-row span above is a bare descendant selector -- it would
   otherwise also hit .todo-reminder-emoji and make it compete for width as
   an equal flex sibling instead of staying a fixed-size icon (same class of
   bug CLAUDE.md documents for .todo-row span). Explicit override. */
.todo-reminder-emoji {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.todo-top-five-row--reminder {
  background: linear-gradient(180deg, #fffaf0, #fdf3dd);
  border-color: rgba(197, 149, 72, 0.4);
}

.todo-top-five-row--reminder:hover {
  border-color: rgba(197, 149, 72, 0.7);
}

.todo-editor {
  display: grid;
  gap: 14px;
}

.todo-editor-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.todo-editor-head h2 {
  margin: 2px 0 0;
}

.todo-drag-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 8px;
}

.todo-row[draggable="true"] {
  cursor: grab;
}

.todo-row.todo-dragging {
  opacity: 0.5;
  border-style: dashed;
}

.todo-drag-handle {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: grab;
  padding: 0 2px;
}

/* History tab (agent_activity_log). Mirrors .todo-row's white-card-on-dark-shell
   pattern deliberately -- that's the proven, live-verified look for this exact
   "editor tab inside the dark dashboard" slot, not a new design. */
.activity-rollup-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.activity-rollup-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 96px;
}

.activity-rollup-tile strong {
  font-size: 1.3rem;
  color: var(--ink);
}

.activity-rollup-tile span {
  font-size: 0.78rem;
  color: var(--muted);
}

.activity-synopsis-panel {
  display: grid;
  gap: 10px;
}

.activity-synopsis-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-synopsis-controls button.active {
  background: var(--lake);
  color: #fff;
  border-color: var(--lake);
}

.activity-synopsis-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.activity-synopsis-text {
  margin: 0;
  padding: 12px 14px;
  background: #f7f9f8;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.activity-day-group {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.activity-day-heading {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.activity-log-row {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.activity-log-row-correction {
  border-color: rgba(197, 149, 72, 0.4);
  background: #fffdf8;
}

.activity-log-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.activity-log-time {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 64px;
}

.activity-log-badge {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: var(--muted);
}

.activity-log-badge-create { background: #3f8f5f; }
.activity-log-badge-update { background: #4a7fb5; }
.activity-log-badge-delete { background: #a33a2f; }
.activity-log-badge-correct { background: #c9a24c; }

.activity-agent-name {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

.activity-log-summary {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--ink);
}

.activity-correction-form {
  display: grid;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.activity-correction-form label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.activity-correction-actions {
  display: flex;
  gap: 8px;
}

/* Property Pipeline tab. Same white-card-on-dark-shell convention as the
   History tab above -- deliberately, not a separate design language. */
.property-side-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: 999px;
  width: fit-content;
}

.property-side-toggle button {
  min-height: 34px;
  padding: 0 18px;
  color: var(--sv-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}

.property-side-toggle button:hover {
  color: var(--sv-text);
}

.property-side-toggle button.active {
  color: var(--sv-button-text);
  background: var(--sv-button-bg);
}

.property-toolbar {
  display: flex;
}

.property-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.property-add-form .property-add-input {
  flex: 1;
  min-width: 220px;
}

.property-stage-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.property-stage-column {
  display: grid;
  gap: 8px;
}

.property-stage-heading {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.property-stage-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.property-stage-volume {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.property-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
}

.property-card-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lake);
}

.property-card-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.property-detail-readonly-note {
  margin: 0;
  padding: 8px 12px;
  background: #fff8ea;
  border: 1px solid rgba(197, 149, 72, 0.34);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--ink);
}

.property-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.property-card-pending {
  opacity: 0.6;
}

.property-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.property-card-head strong {
  font-size: 0.9rem;
  color: var(--ink);
}

.property-card-delete {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.property-card-delete:hover,
.property-card-delete:focus-visible {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  outline: none;
}

.property-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.property-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.property-checklist-item span {
  font-size: 0.85rem;
  color: var(--ink);
}

/* Same global input/select/textarea checkbox trap as .todo-row -- see
   CLAUDE.md's Known traps. Explicit override required. */
.property-checklist-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  accent-color: var(--lake);
}

.property-client-share-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  cursor: pointer;
}

.property-client-share-toggle span {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

/* Same global input/select/textarea checkbox trap as .property-checklist-item
   -- see CLAUDE.md's Known traps. Explicit override required. */
.property-client-share-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  accent-color: var(--lake);
}

.property-closed-list {
  margin-top: 6px;
}

.property-closed-list summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
}

.property-closed-list .property-card {
  margin-top: 8px;
}

/* "Header type look" for the property address, requested because the plain
   <strong> treatment read as body text, not a title. No new webfont -- the
   site loads none -- just real heading weight/size/spacing instead of
   inline-bold. Rendered as a <button> (card) so it's clickable to open the
   detail view; reset to look like text, not a form control. */
.property-address-heading {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
}

.property-address-heading:hover,
.property-address-heading:focus-visible {
  color: var(--lake);
  outline: none;
  text-decoration: underline;
}

.property-address-heading-large {
  font-size: 1.5rem;
  margin: 10px 0 2px;
  cursor: default;
}

.property-address-heading-large:hover {
  color: var(--ink);
  text-decoration: none;
}

.property-detail-panel {
  display: grid;
  gap: 4px;
}

.property-detail-meta {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.property-detail-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.property-detail-form label {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.property-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.property-important-dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.property-important-dates li {
  font-size: 0.85rem;
  color: var(--ink);
  padding: 6px 10px;
  background: #f7f9f8;
  border-radius: 6px;
}

.property-detail-checklist-panel .property-checklist {
  gap: 6px;
}

.property-detail-checklist-panel .property-checklist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.property-checklist-item-remove {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.property-checklist-item-remove:hover,
.property-checklist-item-remove:focus-visible {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  outline: none;
}

.property-checklist-add-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.property-checklist-add-form input {
  flex: 1;
}

.property-splits-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.property-split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.property-split-row span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.property-split-remove {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.property-split-remove:hover,
.property-split-remove:focus-visible {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  outline: none;
}

.property-splits-summary {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.property-split-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.property-split-add-form input[name="partyName"] {
  flex: 1 1 160px;
}

.property-split-add-form select {
  flex: 0 1 130px;
}

.property-split-add-form input[name="splitValue"] {
  flex: 0 1 100px;
}

.client-progress-updates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.client-progress-update-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f7f9f7;
  border-radius: 8px;
}

.client-progress-update-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.client-progress-update-head small {
  color: var(--muted);
  font-size: 0.76rem;
}

.client-progress-update-kind-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #7a5a1e;
  background: #fff4de;
  border: 1px solid rgba(197, 149, 72, 0.4);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.client-progress-update-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.client-progress-update-remove {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.client-progress-update-remove:hover,
.client-progress-update-remove:focus-visible {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  outline: none;
}

.client-progress-update-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.client-progress-update-add-form textarea {
  min-height: 64px;
}

.property-detail-hint {
  margin: -6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.property-listing-link {
  margin: 10px 0 14px;
  padding: 12px;
  background: #f7f9f7;
  border-radius: 8px;
}

.property-listing-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.property-listing-link-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
}

.property-listing-link-card div {
  flex: 1;
  min-width: 0;
}

.property-listing-link-card strong {
  display: block;
  color: var(--ink);
}

.property-listing-link-card small {
  color: var(--muted);
  font-size: 0.8rem;
}

.property-listing-link-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.property-listing-link-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid rgba(5, 25, 28, 0.08);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.property-listing-link-result:hover,
.property-listing-link-result:focus-visible {
  border-color: var(--lake);
}

.property-listing-link-result strong {
  display: block;
  font-size: 0.86rem;
  color: var(--ink);
}

.property-listing-link-result small {
  color: var(--muted);
  font-size: 0.76rem;
}

.property-listing-link-result em {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}

.property-pipeline-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.property-stage-editor {
  display: grid;
  gap: 12px;
}

.stage-editor-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.stage-editor-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stage-editor-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stage-editor-row-head .stage-label-input {
  flex: 1;
  min-width: 160px;
  font-weight: 700;
}

.stage-editor-row-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.stage-checklist-items {
  display: grid;
  gap: 6px;
}

.stage-checklist-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-checklist-item-row .stage-item-label-input {
  flex: 1;
}

/* Same global input/select/textarea checkbox-and-radio trap as .todo-row --
   see CLAUDE.md's Known traps. Explicit override required. */
.stage-checklist-item-row .stage-item-exit-radio {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--lake);
}

.stage-item-remove {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.stage-item-remove:hover,
.stage-item-remove:focus-visible {
  color: #a33a2f;
  background: rgba(163, 58, 47, 0.08);
  outline: none;
}

.stage-editor-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stage-editor-row-new {
  border-style: dashed;
}

/* Segmented Open/Completed switch at the TOP of the To-Do page, so completed
   tasks stay reachable once the open list grows long (they used to be buried
   behind a toggle at the very bottom of the page). Mirrors the existing
   .global-theme-toggle pill pattern. */
.todo-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: 999px;
}

.todo-view-toggle button {
  min-height: 34px;
  padding: 0 16px;
  color: var(--sv-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}

.todo-view-toggle button:hover {
  color: var(--sv-text);
}

.todo-view-toggle button.active {
  color: var(--sv-button-text);
  background: var(--sv-button-bg);
}

.todo-completed-panel {
  border-color: rgba(197, 149, 72, 0.34);
  background: linear-gradient(180deg, #fffdf8, #ffffff);
}

.todo-completed-toggle {
  width: auto;
}

.todo-completed-list {
  margin-top: 12px;
}

.todo-completed-list .todo-row {
  justify-content: space-between;
  cursor: default;
}

.todo-completed-list .todo-row time {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.top-listings-list {
  display: grid;
  gap: 8px;
}

.top-listings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.top-listings-row:hover {
  border-color: rgba(197, 149, 72, 0.4);
  background: #fffdf8;
}

.top-listings-row small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.top-listings-row em {
  color: var(--lake-dark);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.rule-intent-row {
  border-color: rgba(197, 149, 72, 0.24);
}

.crm-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.broker-pipeline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-intelligence-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(18, 30, 26, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(8, 31, 37, 0.05);
}

.crm-intelligence-panel.alert {
  border-color: rgba(197, 149, 72, 0.28);
  background: #fffdf8;
}

.crm-record-section-head.compact {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(18, 30, 26, 0.06);
}

.crm-record-section-head.compact h3 {
  font-size: 0.92rem;
}

.crm-record-section-head.compact p {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.intelligence-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(18, 30, 26, 0.08);
  border-radius: 7px;
  background: #fbfcfb;
  color: var(--ink);
  text-align: left;
}

button.intelligence-row:hover,
button.intelligence-row:focus-visible {
  border-color: rgba(19, 119, 124, 0.28);
  background: #f4fbfa;
  outline: none;
}

.intelligence-row.alert {
  border-color: rgba(197, 149, 72, 0.3);
  background: #fff9ed;
}

.intelligence-row strong,
.intelligence-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intelligence-row strong {
  font-size: 0.86rem;
}

.intelligence-row small {
  color: #61757b;
  font-size: 0.74rem;
}

.intelligence-row em {
  color: var(--lake-dark);
  font-size: 0.78rem;
  font-style: normal;
  white-space: nowrap;
}

.score-pill {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e8f5f2;
  color: #0a4c52;
  font-size: 0.78rem;
  font-weight: 800;
}

.score-pill.cold {
  background: #fff3df;
  color: #8a5723;
}

.score-pill.alert {
  background: #0a4c52;
  color: #ffffff;
}

.broker-pipeline-row {
  cursor: pointer;
}

.agent-identity-line {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.agent-name-stack {
  display: block;
  min-width: 0;
  overflow: hidden;
}

.agent-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(135deg, #0c545a, #b48643);
  border: 1px solid rgba(13, 76, 82, 0.14);
  box-shadow: 0 4px 12px rgba(13, 44, 48, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-avatar.broker-logo {
  background: #f7f3e9;
  border-color: rgba(180, 134, 67, 0.28);
}

.agent-photo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}

.agent-photo-row .agent-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
}

.agent-photo-controls {
  display: grid;
  gap: 4px;
}

.agent-photo-trigger {
  position: relative;
  display: inline-flex;
  width: fit-content;
  cursor: pointer;
  overflow: hidden;
}

.agent-photo-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.agent-photo-status {
  color: var(--muted);
  font-size: 0.75rem;
}

.agent-photo-pending-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-photo-position-block {
  display: grid;
  gap: 6px;
  margin: 4px 0 12px;
}

.agent-photo-position-block small {
  color: var(--muted);
  font-size: 0.78rem;
}

.agent-photo-position-grid {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 4px;
  width: fit-content;
}

.agent-photo-position-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}

.agent-photo-position-btn:hover {
  border-color: var(--lake);
}

.agent-photo-position-btn.active {
  border-color: var(--lake-dark);
  background: var(--lake);
}

@media (max-width: 768px) {
  .crm-category-sidebar {
    position: static;
  }
}

.rule-question-row {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #fbfaf5;
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
}

.crm-note-label {
  font-size: 0.82rem;
}

.crm-note-label textarea {
  min-height: 150px;
  line-height: 1.45;
  min-width: 0;
}

.pinned-notes-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.crm-section {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(18, 30, 26, 0.06);
}

.crm-section summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 3px 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.crm-section summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--lake-dark);
  background: rgba(234, 215, 170, 0.34);
  border-radius: 999px;
  font-weight: 900;
}

.crm-section[open] summary::after {
  content: "-";
}

.crm-section summary::-webkit-details-marker {
  display: none;
}

.crm-section-title {
  display: flex;
  grid-column: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.crm-section-title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-section-title strong {
  flex: 0 0 auto;
  padding: 2px 7px;
  background: #f4efe2;
  border-radius: 999px;
  font-size: 0.78rem;
}

.crm-section summary span,
.crm-section summary strong {
  color: var(--ink);
  font-weight: 900;
}

.crm-section summary small {
  grid-column: 1;
  min-width: 0;
  color: var(--muted);
  line-height: 1.35;
}

.crm-section .mini-list {
  padding: 0 14px 14px;
}

.client-drilldown h3 {
  margin: 4px 0 -4px;
  font-size: 0.9rem;
}

.client-drilldown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(7, 23, 25, 0.96), rgba(8, 70, 78, 0.92));
  border: 1px solid rgba(234, 215, 170, 0.3);
  border-radius: 8px;
  color: var(--white);
}

.client-drilldown-head div {
  display: grid;
  gap: 3px;
}

.client-drilldown-head span {
  color: #dce8e4;
  font-size: 0.82rem;
}

.saved-search-detail {
  display: grid;
  gap: 9px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f5f7f3);
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
}

.saved-search-detail h3,
.saved-search-detail p {
  margin: 0;
}

.saved-search-detail p {
  color: var(--ink);
  line-height: 1.45;
}

.saved-search-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.saved-search-meta span {
  padding: 5px 8px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.saved-search-ccr-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 4px;
}

.saved-search-ccr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

/* The global `input, select, textarea { width: 100%; padding: 12px 13px }`
   rule near the top of this file applies to checkboxes too, which renders
   each one as a full-width padded white box with the check glyph centered
   inside it and the text shoved to the far right. Override explicitly, same
   discipline as .consent-check input / .todo-row input[type="checkbox"]. */
.saved-search-ccr-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  accent-color: var(--lake);
}

.saved-flash {
  color: var(--white) !important;
  background: var(--ok) !important;
  border-color: var(--ok) !important;
}

#dashboardPanel {
  background:
    linear-gradient(180deg, rgba(234, 215, 170, 0.12), rgba(255, 255, 255, 0)),
    #fbfcfd;
}

#dashboardPanel .section-heading {
  align-items: end;
  border: 1px solid rgba(197, 149, 72, 0.18);
  box-shadow: var(--soft-shadow);
}

.agent-crm-layout {
  display: block;
}

.broker-crm-command-center {
  display: grid;
  gap: 12px;
}

.broker-agent-drilldown {
  display: grid;
  gap: 12px;
}

.broker-agent-drilldown-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f7faf9);
  border: 1px solid rgba(8, 112, 122, 0.14);
  border-radius: 8px;
}

.broker-agent-drilldown-head h2,
.broker-agent-drilldown-head p {
  margin: 0;
}

.broker-agent-drilldown-head p:last-child {
  color: var(--muted);
  font-size: 0.86rem;
}

.broker-summary-panel,
.broker-most-active-panel {
  display: grid;
  gap: 12px;
}

.broker-summary-header {
  display: grid;
  gap: 10px;
}

.broker-score-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.broker-score-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  background: #f8fbfa;
  border: 1px solid rgba(8, 112, 122, 0.14);
  border-radius: 8px;
}

.broker-score-grid strong {
  color: var(--lake-dark);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}

.broker-score-grid small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.broker-agent-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
}

.broker-agent-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(80px, 0.45fr) minmax(220px, 1fr) minmax(120px, 0.65fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(8, 112, 122, 0.1);
  color: var(--ink);
}

button.broker-agent-row {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.broker-agent-row:hover,
button.broker-agent-row:focus-visible {
  background: #f4fbfa;
  outline: 2px solid rgba(8, 112, 122, 0.24);
  outline-offset: -2px;
}

.broker-agent-row:last-child {
  border-bottom: 0;
}

.broker-agent-header {
  background: #f2f7f6;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.broker-agent-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broker-agent-row strong,
.broker-agent-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broker-agent-row small {
  color: var(--muted);
  font-size: 0.78rem;
}

.broker-client-table .crm-client-table-row {
  grid-template-columns: minmax(230px, 1.15fr) minmax(190px, 0.85fr) minmax(210px, 0.95fr) minmax(170px, 0.75fr) minmax(320px, 1.4fr) minmax(130px, 0.55fr);
  min-width: 1260px;
}

.crm-assigned-agent {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.crm-assigned-agent strong,
.crm-assigned-agent small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-assigned-agent small {
  color: var(--muted);
  font-size: 0.76rem;
}

@media (max-width: 920px) {
  .crm-overview-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-intelligence-grid,
  .broker-pipeline-grid {
    grid-template-columns: 1fr;
  }

  .broker-crm-home {
    grid-template-columns: 1fr;
  }

  .broker-score-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .broker-agent-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .broker-client-table .crm-client-table-row {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .broker-agent-header {
    display: none;
  }
}

.crm-main-panel {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.crm-main-panel > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.agent-tools-panel {
  margin-bottom: 14px;
  overflow: hidden;
  padding: 0;
  background: #ffffff;
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.agent-tools-panel .document-form,
.agent-tools-panel .intake-note,
.agent-tool-status,
.share-profile-card {
  margin: 14px;
}

.agent-tool-status {
  color: var(--lake-dark);
  font-size: 0.86rem;
  font-weight: 800;
}

/* The global `input, select, textarea {...}` rule forces full-width, padded
   inputs -- fine for normal form fields, wrong for a short 6-digit code
   entry, so it needs the same explicit override treatment as .consent-check
   input (see CLAUDE.md known traps). */
.mfa-code-input {
  width: 160px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.mfa-gate-secret {
  display: block;
  word-break: break-all;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
  color: var(--lake-dark);
}

.mfa-gate-qr {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.mfa-gate-qr svg {
  width: 200px;
  height: 200px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.mfa-gate-manual {
  margin-top: 4px;
}

.mfa-gate-manual summary {
  cursor: pointer;
  color: var(--lake-dark);
  font-weight: 800;
  font-size: 0.86rem;
}

.mfa-gate-manual .mfa-gate-secret {
  margin-top: 8px;
}

.mfa-gate-required-step {
  border: 1px solid rgba(158, 90, 43, 0.28);
  border-left: 5px solid #9e5a2b;
  background: #fffaf2;
}

.mfa-gate-open-link {
  display: block;
  text-align: center;
  margin: 4px 0 10px;
  color: var(--lake-dark);
  font-weight: 800;
  font-size: 0.86rem;
}

.mfa-gate-hint {
  display: block;
  margin-top: 6px;
  color: #667883;
  font-size: 0.76rem;
  line-height: 1.35;
}

.contact-import-audit {
  display: grid;
  gap: 10px;
  margin: 14px;
}

.contact-upload-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-radius: 8px;
  background: #fffdf8;
}

.preview-only-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.csv-field-map-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.csv-field-map-summary span {
  padding: 6px 8px;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 999px;
  background: #ffffff;
}

.contact-import-list.preview-list {
  max-height: 320px;
  overflow: auto;
}

.contact-import-row .unmapped-fields {
  color: #985b29;
  white-space: normal;
}

.contact-import-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: var(--lake-dark);
}

.contact-import-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.contact-import-list {
  display: grid;
  border: 1px solid rgba(8, 112, 122, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

.contact-import-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid rgba(8, 112, 122, 0.1);
}

.contact-import-row:last-child {
  border-bottom: 0;
}

.contact-import-row div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.contact-import-row strong,
.contact-import-row span,
.contact-import-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-import-row strong {
  color: var(--ink);
}

.contact-import-row span,
.contact-import-row small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.crm-connect-status {
  display: grid;
  gap: 5px;
  padding: 13px;
  background: #eef6f4;
  border: 1px solid rgba(8, 112, 122, 0.16);
  border-radius: 8px;
}

.crm-connect-status strong {
  color: var(--lake-dark);
}

.crm-connect-status span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.crm-connect-status small {
  color: #6c746f;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.4;
}

.crm-connect-options {
  display: contents;
}

.agent-account-panel {
  display: grid;
  gap: 10px;
  margin: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
}

.agent-account-panel div {
  display: grid;
  gap: 5px;
}

.agent-account-panel strong {
  color: var(--luxury-ink);
  font-size: 1.05rem;
}

.agent-account-panel small,
.agent-account-panel p {
  color: var(--muted);
  line-height: 1.45;
}

.agent-account-panel p {
  margin: 0;
}

.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px;
}

.settings-summary-grid article {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
}

.settings-summary-grid strong {
  overflow: hidden;
  color: var(--luxury-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-summary-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-meetings-section,
.calendar-sync-section {
  margin-bottom: 18px;
}

.calendar-meetings-section h3,
.calendar-sync-section h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.calendar-sync-section > span {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.calendar-meetings-toolbar {
  margin-top: 10px;
}

/* Meeting rows add a 4th (delete) column that plain activity/showing/
   touchpoint timeline rows don't have -- scoped to this modifier class
   rather than changing .crm-timeline-item's base 3-column definition, which
   is reused unmodified elsewhere. */
.crm-timeline-item.has-delete {
  grid-template-columns: auto minmax(0, 1fr) minmax(90px, auto) auto;
}

.crm-timeline-item .crm-tag-remove {
  flex: 0 0 auto;
}

.calendar-mode-toggle {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--sv-surface-2, #f1efe6);
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 999px;
}

.calendar-mode-button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  font-size: 0.85rem;
}

.calendar-mode-button.active {
  color: var(--white);
  background: linear-gradient(135deg, #071719, var(--lake-dark));
}

.share-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
}

.share-profile-card div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.share-profile-card strong {
  overflow: hidden;
  color: #147d91;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-profile-card span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.share-template-block {
  margin: 14px;
  display: grid;
  gap: 6px;
}

.share-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.share-template-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.share-template-text {
  width: 100%;
  padding: 10px 12px;
  background: #f7f9f8;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
}

.client-linked-deals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.client-linked-deals-list li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  background: #f7f9f8;
  border-radius: 6px;
}

.client-linked-deal-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.crm-command-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}

.crm-command {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  color: #44525b;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(16, 35, 45, 0.04);
  font: inherit;
  cursor: pointer;
}

.crm-command strong {
  color: #17242a;
  font-size: 0.98rem;
}

.crm-command span {
  color: #52636d;
  font-size: 0.82rem;
  font-weight: 800;
}

.crm-command.active,
.crm-command:hover {
  border-color: rgba(197, 149, 72, 0.4);
  background: #fbfaf5;
}

.crm-command.passive {
  cursor: default;
}

.agent-active-session-banner:empty {
  display: none;
}

.agent-session-card {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, auto) auto;
  align-items: center;
  gap: 20px;
  margin: 10px 0 14px;
  padding: 18px 20px;
  border: 1px solid rgba(28, 72, 65, 0.14);
  border-radius: 8px;
  background: #fbfcfb;
}

.agent-session-card.active {
  border-color: rgba(47, 177, 117, 0.28);
  background: linear-gradient(135deg, #f4fbf7, #ffffff);
}

.agent-session-card.pending {
  border-color: rgba(197, 149, 72, 0.32);
  background: #fffaf0;
}

.agent-session-card > div:first-child {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.agent-session-card .status-pill {
  width: fit-content;
  max-width: 100%;
}

.agent-session-card strong {
  color: var(--lake-dark);
  font-size: 1.08rem;
}

.agent-session-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.agent-session-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 10px;
  min-width: 360px;
}

.agent-session-metrics span {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-height: 74px;
  padding: 10px 8px;
  border: 1px solid rgba(28, 72, 65, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.agent-session-metrics strong {
  font-size: 1.18rem;
  line-height: 1;
}

.agent-session-metrics small {
  display: block;
  max-width: 74px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
}

.agent-session-card > .secondary-button {
  justify-self: end;
  min-width: 180px;
  white-space: nowrap;
}

.agent-readiness-strip {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 14px;
  background: linear-gradient(135deg, #0a3b40, #102c2e);
  color: #fffaf1;
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.agent-readiness-strip > div:first-child {
  display: grid;
  gap: 3px;
}

.agent-readiness-strip > div:first-child strong {
  font-size: 1rem;
  font-weight: 900;
}

.agent-readiness-strip > div:first-child span {
  color: rgba(255, 250, 241, 0.72);
  font-size: 0.82rem;
}

.agent-readiness-items {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.agent-readiness-items span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.agent-readiness-items strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-readiness-items small {
  color: rgba(255, 250, 241, 0.68);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pilot-readiness-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.pilot-readiness-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.pilot-readiness-head h2 {
  margin: 0;
}

.pilot-readiness-head > strong {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: var(--lake-dark);
  background: #f8f1df;
  border: 1px solid rgba(197, 149, 72, 0.34);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
}

.pilot-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pilot-readiness-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #fbfcfb;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
}

.pilot-readiness-grid article.ready {
  border-left-color: var(--ok);
}

.pilot-readiness-grid article.pending {
  border-left-color: var(--cedar);
}

.pilot-readiness-grid article strong {
  color: var(--luxury-ink);
  font-size: 0.86rem;
}

.pilot-readiness-grid article span {
  color: var(--lake-dark);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pilot-readiness-grid article p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
}

.role-boundary-note,
.buyer-verification-note {
  padding: 12px;
  background: #fffdf8;
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
}

.role-boundary-note {
  display: grid;
  gap: 4px;
}

.role-boundary-note strong,
.buyer-verification-note summary {
  color: var(--lake-dark);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.role-boundary-note span,
.buyer-verification-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.beta-gate-note {
  border-color: rgba(170, 94, 44, 0.28);
  background: #fffaf4;
}

.buyer-verification-note {
  margin-top: 10px;
}

.buyer-verification-note summary {
  cursor: pointer;
}

.buyer-verification-note p {
  padding-top: 8px;
}

.crm-command.doc-command {
  margin-left: auto;
  border-color: rgba(197, 149, 72, 0.34);
  background: #fffaf0;
}

.crm-ready-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.crm-ready-strip span {
  padding: 6px 9px;
  color: var(--lake-dark);
  background: #eef6f4;
  border: 1px solid rgba(8, 112, 122, 0.16);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.agent-beta-next {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.7fr);
  gap: 16px;
  margin: 14px 0;
  padding: 18px;
  background: linear-gradient(135deg, #fffdf8, #f5faf8);
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(5, 25, 28, 0.06);
}

.agent-beta-next h3 {
  margin: 2px 0 4px;
  color: var(--luxury-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.24rem;
  font-weight: 600;
}

.agent-beta-next > div:first-child span {
  color: #667883;
  font-size: 0.86rem;
  line-height: 1.45;
}

.agent-beta-next-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.agent-beta-next-grid button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
  min-width: 0;
  padding: 12px;
  color: #33414a;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-left: 4px solid #b8794e;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.agent-beta-next-grid button.ready {
  border-left-color: #2f9167;
}

.agent-beta-next-grid button:hover,
.agent-beta-next-grid button:focus-visible {
  border-color: rgba(197, 149, 72, 0.5);
  border-left-color: #c59548;
  outline: none;
  transform: translateY(-1px);
}

.agent-beta-next-grid small {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #ffffff;
  background: var(--lake);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
}

.agent-beta-next-grid strong {
  color: var(--lake-dark);
  font-size: 0.92rem;
}

.agent-beta-next-grid span {
  grid-column: 2;
  color: #71838c;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.crm-table-shell,
.crm-shell,
.crm-profile {
  gap: 0;
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.crm-list-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 340px) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 28px 18px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border-bottom: 1px solid rgba(27, 42, 38, 0.08);
}

.crm-list-toolbar div {
  display: grid;
  gap: 3px;
}

.crm-list-toolbar strong {
  color: var(--luxury-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 600;
}

.crm-list-toolbar span {
  color: #667883;
  font-size: 0.84rem;
}

.crm-client-search {
  display: grid;
  gap: 5px;
  margin: 0;
}

.crm-client-search span {
  color: #667883;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-client-search input {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  color: var(--luxury-ink);
  background: #ffffff;
  border: 1px solid rgba(27, 42, 38, 0.14);
  border-radius: 8px;
  font: inherit;
}

.crm-client-table {
  display: grid;
  max-height: min(62vh, 720px);
  overflow: auto;
  background: #ffffff;
}

.crm-privacy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 28px;
  color: #46626a;
  background: #f2f8f6;
  border-bottom: 1px solid rgba(8, 112, 122, 0.12);
  font-size: 0.84rem;
}

.crm-privacy-bar.compact {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(8, 112, 122, 0.12);
  border-radius: 8px;
}

.crm-privacy-bar strong {
  color: var(--lake-dark);
  font-weight: 950;
  text-transform: uppercase;
}

.crm-privacy-bar span {
  text-align: right;
}

.agent-account-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.agent-account-proof span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  background: #fbfaf5;
  border: 1px solid rgba(197, 149, 72, 0.18);
  border-radius: 8px;
}

.agent-account-proof strong {
  color: var(--lake-dark);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.agent-account-proof small {
  color: #667883;
  font-size: 0.76rem;
  line-height: 1.35;
}

.agent-billing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.agent-billing-actions small {
  color: #667883;
  font-weight: 800;
}

.agent-lockout-note {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid rgba(158, 90, 43, 0.28);
  border-left: 5px solid #9e5a2b;
  border-radius: 8px;
  background: #fffaf2;
  color: #4d5d5e;
}

.agent-mfa-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid rgba(197, 149, 72, 0.18);
  border-radius: 8px;
  background: #fbfaf5;
}

.agent-mfa-status strong {
  color: var(--lake-dark);
  font-size: 0.86rem;
}

.agent-mfa-status small {
  display: block;
  margin-top: 2px;
  color: #667883;
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: 480px;
}

.agent-mfa-status button {
  flex-shrink: 0;
}

.agent-mls-listings-block {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid rgba(197, 149, 72, 0.18);
  border-radius: 8px;
  background: #fbfaf5;
}

.agent-mls-listings-block strong {
  color: var(--lake-dark);
  font-size: 0.86rem;
}

.agent-mls-listings-block small {
  display: block;
  margin-top: 2px;
  color: #667883;
  font-size: 0.78rem;
  line-height: 1.35;
}

.agent-mls-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.agent-mls-id-input {
  width: auto;
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.agent-mls-id-row button {
  flex-shrink: 0;
}

.agent-mls-id-error {
  color: #c0392b;
}

.agent-mls-listings-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-mls-listings-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(197, 149, 72, 0.12);
}

.agent-mls-listings-list li:first-child {
  border-top: none;
}

.crm-beta-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #fbfaf5;
  border-top: 1px solid #eef2f4;
  border-bottom: 1px solid #eef2f4;
}

.crm-beta-actions button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  color: #33414a;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.crm-beta-actions button:hover,
.crm-beta-actions button:focus-visible {
  border-color: rgba(197, 149, 72, 0.5);
  outline: none;
}

.crm-beta-actions strong {
  color: var(--lake-dark);
}

.crm-beta-actions span {
  overflow: hidden;
  color: #7a8b94;
  font-size: 0.76rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-empty-pipeline {
  display: grid;
  gap: 10px;
  padding: 26px 28px;
  color: #667883;
  border-top: 1px solid #eef2f4;
}

.crm-empty-pipeline strong {
  color: var(--lake-dark);
  font-size: 1rem;
}

.crm-empty-pipeline p {
  max-width: 720px;
  margin: 0;
  line-height: 1.5;
}

.crm-empty-pipeline div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-client-table-row {
  grid-template-columns: minmax(250px, 1.15fr) minmax(420px, 1.8fr) minmax(140px, 0.55fr) minmax(150px, 0.55fr);
  min-width: 960px;
  padding: 18px 28px;
  gap: 18px;
  border-bottom: 1px solid #eef2f4;
}

.crm-client-table-header {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #586662;
  background: #fbfaf5;
  font-size: 0.86rem;
  font-weight: 700;
}

.crm-client-table .crm-client-row {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #eef2f4;
  border-radius: 0;
  box-shadow: none;
}

.crm-client-table .crm-client-row:hover,
.crm-client-table .crm-client-row:focus-visible {
  background: #fbfaf5;
  outline: none;
}

.crm-name-cell,
.crm-phone-cell,
.crm-last-activity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.crm-name-stack,
.crm-last-activity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.crm-name-stack small,
.crm-last-activity small {
  overflow: hidden;
  color: #7a8b94;
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-avatar {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: linear-gradient(135deg, #536f74, #9b8a68);
  border-radius: 999px;
  font-size: 0.84rem;
}

.client-avatar.large {
  width: 58px;
  height: 58px;
  font-size: 1rem;
}

.client-avatar.small,
.agent-avatar.small {
  width: 24px;
  height: 24px;
  font-size: 0.62rem;
}

.crm-linkish {
  color: #147d91;
  font-weight: 700;
}

.crm-client-row .crm-linkish {
  font-size: 0.94rem;
}

.contact-dot,
.activity-glyph {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.contact-dot {
  color: #ffffff;
  background: #45c997;
}

.contact-dot.message {
  background: #7d9df0;
}

.activity-glyph {
  color: #9a6b22;
  background: #fff7e3;
  border: 1px solid #ead7aa;
}

.crm-last-activity span:last-child,
.crm-client-table-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-last-activity strong {
  color: #33414a;
  font-size: 0.9rem;
}

.crm-stage-pill {
  display: inline-grid;
  justify-self: start;
  max-width: 100%;
  padding: 6px 10px;
  color: #0a4c52;
  background: #eaf7f5;
  border: 1px solid rgba(8, 112, 122, 0.16);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: capitalize;
}

#dashboardPanel {
  background: #f7f9f8;
}

#dashboardPanel .section-heading {
  align-items: center;
  margin-bottom: 6px;
  padding: 10px 12px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#dashboardPanel .section-heading h1 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.05;
}

#dashboardPanel .section-heading .eyebrow,
#dashboardPanel .section-heading p:not(.eyebrow) {
  margin-bottom: 2px;
  font-size: 0.72rem;
}

#dashboardPanel .section-heading > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-session-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 10px;
  color: #52636d;
  background: transparent;
  border: 1px solid rgba(27, 42, 38, 0.08);
  border-radius: 999px;
  font-size: 0.78rem;
}

.agent-session-compact strong {
  color: #0a4c52;
  font-size: 0.82rem;
}

.agent-session-compact > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-compact-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.global-search-bar {
  position: relative;
  flex: 1 1 320px;
  margin-right: auto;
}

.global-search-input {
  width: 100%;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(18, 30, 26, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.global-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.global-search-result:hover,
.global-search-result:focus-visible {
  background: rgba(11, 85, 89, 0.08);
}

.global-search-result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.global-search-result-body strong {
  font-size: 0.88rem;
}

.global-search-result-body small {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-compact-toolbar .secondary-button.small,
#dashboardPanel .section-heading .secondary-button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 0.78rem;
}

.agent-crm-command-center,
.broker-crm-command-center {
  gap: 8px;
  margin-bottom: 10px;
}

.crm-overview-tiles {
  gap: 8px;
}

.crm-overview-tile {
  min-height: 72px;
  padding: 10px 12px;
  background: #ffffff;
  border-color: rgba(27, 42, 38, 0.09);
  box-shadow: none;
}

.crm-overview-tile span {
  font-size: 0.68rem;
  letter-spacing: 0;
}

.crm-overview-tile strong {
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 850;
}

.crm-overview-tile small {
  font-size: 0.72rem;
}

.crm-privacy-bar {
  gap: 8px;
  margin: -2px 0 8px;
  padding: 0;
  color: #667883;
  background: transparent;
  border: 0;
  font-size: 0.76rem;
}

.crm-privacy-bar strong {
  color: #0a4c52;
  font-size: 0.72rem;
}

.crm-privacy-bar span {
  flex: 1 1 auto;
  text-align: left;
}

.crm-privacy-bar .secondary-button {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 0.76rem;
}

.crm-main-panel,
.crm-table-shell {
  border-color: rgba(27, 42, 38, 0.09);
  box-shadow: none;
}

.crm-list-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
}

.crm-list-toolbar strong {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 850;
}

.crm-list-toolbar span {
  font-size: 0.76rem;
}

.crm-client-search span {
  font-size: 0.66rem;
}

.crm-client-search input {
  min-height: 32px;
  padding: 7px 9px;
  font-size: 0.82rem;
}

.crm-client-table {
  max-height: min(66vh, 740px);
}

.crm-client-table-row {
  min-height: 58px;
  padding: 10px 14px;
  gap: 12px;
  border-bottom: 1px solid #edf1f2;
}

.crm-client-table-header {
  min-height: 34px;
  padding-block: 8px;
  color: #53636b;
  background: #fbfcfb;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.crm-client-table .crm-client-row:hover,
.crm-client-table .crm-client-row:focus-visible {
  background: #f7fbf9;
}

.client-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.crm-name-stack {
  gap: 1px;
}

.crm-linkish,
.crm-client-row .crm-linkish {
  font-size: 0.86rem;
}

.crm-name-stack small,
.crm-last-activity small {
  font-size: 0.7rem;
}

.activity-glyph {
  width: 20px;
  height: 20px;
  font-size: 0.68rem;
}

.crm-last-activity strong {
  font-size: 0.82rem;
}

.crm-stage-pill {
  padding: 4px 8px;
  font-size: 0.7rem;
}

.agent-activity-home {
  gap: 10px;
}

.crm-record-panel {
  padding: 12px;
  box-shadow: none;
}

.broker-client-table .crm-client-table-row {
  grid-template-columns: minmax(210px, 1.05fr) minmax(190px, 0.85fr) minmax(300px, 1.35fr) minmax(120px, 0.55fr) minmax(120px, 0.5fr);
  min-width: 940px;
}

.crm-contact-record {
  background: transparent;
}

.crm-contact-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff, #fbfaf5);
  border: 1px solid rgba(197, 149, 72, 0.22);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.crm-contact-head div {
  min-width: 0;
}

.crm-contact-head strong {
  display: block;
  color: var(--luxury-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 600;
}

.crm-contact-head span,
.crm-contact-head small {
  display: block;
  overflow: hidden;
  color: #667883;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
  min-width: 0;
}

.crm-followup-mini {
  color: #8a6a35;
}

.crm-inquiry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: fit-content;
  padding: 4px 8px;
  color: #7a2b16;
  background: #fff2dc;
  border: 1px solid rgba(197, 149, 72, 0.5);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.crm-inquiry-badge.prominent {
  color: #fff;
  background: #b94724;
  border-color: rgba(185, 71, 36, 0.35);
}

.price-drop-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: fit-content;
  padding: 3px 8px;
  color: #76520c;
  background: #fff7dc;
  border: 1px solid rgba(197, 149, 72, 0.38);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.price-drop-badge.prominent {
  color: #fff;
  background: #c59548;
  border-color: rgba(197, 149, 72, 0.45);
}

.readiness-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  width: fit-content;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--sv-line);
  background: var(--sv-surface-2);
  color: var(--sv-text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.readiness-badge strong {
  font-size: 0.85rem;
}

.readiness-badge.readiness-high {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

.readiness-badge.readiness-medium {
  color: var(--sv-accent);
  background: color-mix(in srgb, var(--sv-accent) 16%, var(--sv-surface));
  border-color: color-mix(in srgb, var(--sv-accent) 40%, transparent);
}

.readiness-badge.readiness-low {
  color: var(--sv-heart);
  background: color-mix(in srgb, var(--sv-heart) 14%, var(--sv-surface));
  border-color: color-mix(in srgb, var(--sv-heart) 35%, transparent);
}

.readiness-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.65rem;
  font-weight: 900;
  cursor: help;
  opacity: 0.85;
}

/* .readiness-popover-fixed is a SINGLE shared element at the end of <body>
   (see #readinessTooltip in index.html), not nested inside each row -- the
   client-list rows live inside .crm-table-shell, which has overflow:hidden
   for its rounded corners and would silently clip a per-row nested popover
   no matter its z-index. JS (showReadinessTooltip/hideReadinessTooltip in
   app.js) positions this via getBoundingClientRect() on hover/focus of the
   "?" bubble and fills its content per-row from a data attribute. */
.readiness-popover-fixed {
  position: fixed;
  z-index: 9999;
  width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--sv-line);
  background: var(--sv-surface);
  color: var(--sv-text);
  box-shadow: var(--soft-shadow);
  text-align: left;
  white-space: normal;
  font-weight: 600;
  pointer-events: none;
}

.readiness-popover-fixed strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sv-heading);
  font-size: 0.8rem;
}

.readiness-highlight {
  display: block;
  color: var(--sv-text-muted);
  font-size: 0.72rem;
}

.readiness-factor-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-factor-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sv-line);
}

.readiness-factor-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.readiness-factor-list span {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--sv-text);
}

.readiness-factor-list strong {
  font-size: 0.75rem;
  color: var(--sv-text-muted);
}

.readiness-factor-list small {
  grid-column: 1 / -1;
  color: var(--sv-text-muted);
  font-size: 0.72rem;
}

.readiness-breakdown-panel {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

.readiness-breakdown-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.readiness-score-large {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 10px 14px;
  width: fit-content;
  border-radius: 12px;
  border: 1px solid var(--sv-line);
}

.readiness-score-large strong {
  font-size: 1.9rem;
}

.readiness-score-large.readiness-high {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

.readiness-score-large.readiness-medium {
  color: var(--sv-accent);
  background: color-mix(in srgb, var(--sv-accent) 16%, var(--sv-surface));
  border-color: color-mix(in srgb, var(--sv-accent) 40%, transparent);
}

.readiness-score-large.readiness-low {
  color: var(--sv-heart);
  background: color-mix(in srgb, var(--sv-heart) 14%, var(--sv-surface));
  border-color: color-mix(in srgb, var(--sv-heart) 35%, transparent);
}

.new-activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: fit-content;
  padding: 3px 8px;
  color: #245a66;
  background: #e4f3f5;
  border: 1px solid rgba(52, 128, 143, 0.35);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.crm-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.crm-next-actions span {
  padding: 8px 10px;
  color: var(--lake-dark);
  background: #fffdf8;
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
}

.crm-profile-stats.compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.crm-profile-stats.compact span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
  box-shadow: none;
}

.crm-profile-stats.compact strong {
  color: #17242a;
  font-size: 1.05rem;
}

.crm-contact-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 24px;
}

.crm-profile.crm-contact-record {
  gap: 10px;
}

.pinned-notes-panel,
.ai-synopsis-panel {
  border-color: rgba(197, 149, 72, 0.22);
  background: #fffdf8;
}

.client-inquiry-panel {
  background: linear-gradient(180deg, #fff8e8, #fffdf8);
  border: 1px solid rgba(185, 71, 36, 0.28);
  border-left: 5px solid #b94724;
  box-shadow: 0 16px 32px rgba(185, 71, 36, 0.1);
}

.client-inquiry-panel h3 {
  color: #7a2b16;
}

.client-price-drop-panel {
  background: linear-gradient(180deg, #fffaf0, #fffdf8);
  border: 1px solid rgba(197, 149, 72, 0.26);
  border-left: 4px solid #c59548;
  box-shadow: 0 12px 24px rgba(197, 149, 72, 0.08);
}

.client-price-drop-panel h3 {
  color: #76520c;
}

.client-price-drop-panel .crm-record-section-head.compact {
  margin-bottom: 10px;
}

.price-drop-list {
  display: grid;
  gap: 8px;
}

.price-drop-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(197, 149, 72, 0.2);
  border-radius: 8px;
}

.price-drop-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.price-drop-copy:hover,
.price-drop-copy:focus-visible {
  color: var(--lake-dark);
  outline: none;
}

.price-drop-copy strong {
  color: var(--luxury-ink);
}

.price-drop-copy span {
  color: #76520c;
  font-weight: 900;
}

.price-drop-copy small {
  color: var(--muted);
}

.price-drop-actions {
  justify-content: flex-end;
  margin: 0;
}

.price-drop-seen,
.price-drop-dismiss {
  border-color: rgba(197, 149, 72, 0.25);
}

.price-drop-dismiss {
  color: #76520c;
  background: #fffaf0;
}

.outreach-draft-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.outreach-draft-controls select {
  flex: 1;
  min-width: 200px;
  width: auto;
}

.outreach-draft-result {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.outreach-draft-subject-label {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.outreach-draft-text {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}

.outreach-draft-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.client-inquiry-question {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 12px 14px;
  color: #5c2a16;
  background: #fff3df;
  border: 1px solid rgba(185, 71, 36, 0.2);
  border-left: 4px solid #b94724;
  border-radius: 8px;
  font-size: 0.94rem;
  line-height: 1.45;
}

.client-inquiry-question strong {
  color: #7a2b16;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.client-inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.inquiry-status-button {
  min-height: 30px;
  padding: 6px 10px;
  border-color: rgba(185, 71, 36, 0.22);
  font-size: 0.78rem;
}

.inquiry-status-button.resolve {
  color: #7a2b16;
  background: #fff7ed;
}

.inquiry-status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.inquiry-status-tag.seen {
  color: #5f6b67;
  background: rgba(83, 100, 96, 0.12);
  border: 1px solid rgba(83, 100, 96, 0.16);
}

.client-inquiry-feature {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(185, 71, 36, 0.16);
  border-radius: 8px;
  cursor: pointer;
}

.client-inquiry-feature:hover,
.client-inquiry-feature:focus-visible {
  background: #fffaf0;
  outline: none;
}

.client-inquiry-photo {
  min-height: 132px;
  background-color: #dfe8e3;
  background-position: center;
  background-size: cover;
}

.client-inquiry-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px;
}

.client-inquiry-copy strong {
  color: var(--luxury-ink);
  font-size: 1.08rem;
}

.client-inquiry-copy small {
  color: var(--muted);
}

.client-inquiry-copy em {
  color: var(--lake-dark);
  font-style: normal;
  font-weight: 900;
}

.client-inquiry-more {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.client-inquiry-secondary {
  display: grid;
  gap: 6px;
}

.client-inquiry-secondary .client-inquiry-actions {
  margin: 0;
}

.client-inquiry-more button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(185, 71, 36, 0.16);
  border-radius: 8px;
  cursor: pointer;
}

.client-inquiry-more span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-synopsis-panel p {
  margin: 0;
  color: #2c3937;
  font-size: 0.98rem;
  line-height: 1.55;
}

.crm-note-label.pinned textarea {
  min-height: 118px;
  resize: vertical;
  background: #ffffff;
}

.crm-category-sidebar {
  align-self: start;
  position: sticky;
  top: 12px;
  min-width: 0;
}

.crm-category-sidebar .crm-section {
  background: #ffffff;
  box-shadow: none;
}

.crm-category-sidebar .crm-section summary {
  padding: 12px;
}

.crm-category-sidebar .crm-section .mini-list {
  padding: 0 10px 10px;
}

.crm-category-sidebar .mini-row {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 0;
}

.crm-record-panel,
.crm-section {
  background: #ffffff;
  border: 1px solid rgba(27, 42, 38, 0.1);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(16, 35, 45, 0.05);
}

.crm-record-panel {
  padding: 16px;
}

.broker-pending-panel {
  background: linear-gradient(180deg, #fffaf0, #fdf3dd);
  border: 1px solid rgba(197, 149, 72, 0.55);
  border-left: 5px solid #c59548;
  box-shadow: 0 10px 26px rgba(197, 149, 72, 0.14);
  margin-bottom: 16px;
}

.broker-pending-panel h3 {
  color: #8a5a12;
  display: flex;
  align-items: center;
  gap: 8px;
}

.broker-pending-panel .count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #c59548;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.broker-pending-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(197, 149, 72, 0.25);
}

.broker-pending-row .agent-name-stack {
  flex: 1 1 auto;
}

.broker-pending-actions {
  display: flex;
  gap: 8px;
}

/* Explicit width overrides here because the global `input, select, textarea`
   rule sets width: 100%, which fights a nowrap-by-default flex row -- each
   input would claim the full row width. flex-wrap lets it stack on narrow
   screens instead of overflowing. */
.broker-roster-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}

.broker-roster-add-form .broker-roster-add-email,
.broker-roster-add-form .broker-roster-add-name {
  width: auto;
  flex: 1 1 180px;
}

.broker-unassigned-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.broker-unassigned-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(5, 25, 28, 0.08);
}

.broker-unassigned-row small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.broker-unassigned-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.broker-reassign-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(5, 25, 28, 0.1);
  border-radius: 8px;
  background: #f7f9f8;
}

.broker-reassign-panel select {
  flex: 1 1 220px;
}

.broker-reassign-panel.locked {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: #fff8ed;
  border-color: rgba(152, 91, 41, 0.24);
}

.broker-reassign-panel.locked p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.broker-deny-note {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.broker-deny-note-input {
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 1px solid rgba(197, 149, 72, 0.4);
  border-radius: 6px;
}

.crm-followup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.crm-followup-grid label,
.crm-note-label {
  display: grid;
  gap: 6px;
}

.crm-followup-grid label span,
.crm-note-label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-followup-grid label:last-child {
  grid-column: 1 / -1;
}

.touchpoint-add-note-label,
.touchpoint-add-actions {
  grid-column: 1 / -1;
}

.touchpoint-add-actions {
  display: flex;
  gap: 8px;
}

.crm-followup-grid select,
.crm-followup-grid input,
.crm-followup-grid textarea,
.crm-note-label input,
.crm-note-label textarea {
  width: 100%;
  border: 1px solid rgba(27, 42, 38, 0.12);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fbfcfb;
}

.crm-note-label input {
  margin-bottom: 10px;
}

.sticky-crm-panel {
  position: sticky;
  top: 12px;
}

.crm-timeline {
  gap: 0;
  border: 1px solid rgba(27, 42, 38, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.crm-timeline-item {
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto);
  padding: 13px 14px;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid rgba(27, 42, 38, 0.08);
  border-radius: 0;
}

.crm-timeline-item:last-child {
  border-bottom: 0;
}

.crm-favorite-tile {
  background: #ffffff;
  border-color: #e7edf0;
  box-shadow: none;
}

#dashboardPanel > .section-heading {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#dashboardPanel > .section-heading h1 {
  color: var(--sv-heading);
}

#dashboardPanel > .section-heading .eyebrow,
#dashboardPanel > .section-heading p:not(.eyebrow) {
  color: var(--sv-text-muted);
}

#dashboardPanel > .section-heading .secondary-button {
  color: var(--sv-btn-ask-text);
  background: var(--sv-btn-ask-bg);
  border-color: var(--sv-btn-ask-border);
}

#dashboardGrid {
  color: var(--sv-text);
  background: var(--sv-page);
}

#dashboardGrid .crm-compact-toolbar .secondary-button.small {
  color: var(--sv-btn-ask-text);
  background: var(--sv-btn-ask-bg);
  border-color: var(--sv-btn-ask-border);
}

#dashboardGrid .crm-compact-toolbar .primary-button.small {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
  border-color: transparent;
}

#dashboardGrid .crm-overview-tile {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#dashboardGrid .crm-overview-tile:hover,
#dashboardGrid .crm-overview-tile:focus-visible {
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

#dashboardGrid .crm-overview-tile span,
#dashboardGrid .crm-overview-tile small {
  color: var(--sv-text-muted);
}

#dashboardGrid .crm-overview-tile strong {
  color: var(--sv-heading);
}

#agentActiveSessionBanner .agent-session-card {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#agentActiveSessionBanner .agent-session-card.active {
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#agentActiveSessionBanner .agent-session-card strong {
  color: var(--sv-heading);
}

#agentActiveSessionBanner .agent-session-card p,
#agentActiveSessionBanner .agent-session-card small {
  color: var(--sv-text-muted);
}

#agentActiveSessionBanner .agent-session-card .status-pill {
  color: #d9fbe6;
  background: rgba(47, 177, 117, 0.22);
  border-color: rgba(47, 177, 117, 0.42);
}

/* #dashboardPanel carries a hardcoded LIGHT background (see its rules above);
   the dashboard's dark look comes from .agent-crm-layout painting over it.
   .agent-shell's padding (which reserves the fixed sidebar's width) insets
   that dark layer, so without this the light layer shows through as a pale
   frame around the whole dashboard -- invisible in cream mode, obviously
   broken in navy. Paint the shell with the same theme page color so the
   padding area blends correctly in BOTH themes. */
#dashboardPanel .agent-shell {
  background: var(--sv-page);
}

#dashboardPanel .agent-crm-layout {
  color: var(--sv-text);
  background: var(--sv-page);
}

#dashboardPanel .agent-crm-layout .crm-main-panel,
#dashboardPanel .agent-crm-layout .crm-table-shell,
#dashboardPanel .agent-crm-layout .crm-shell,
#dashboardPanel .agent-crm-layout .crm-profile,
#dashboardPanel .agent-crm-layout .crm-client-table,
#dashboardPanel .agent-crm-layout .crm-client-row {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-main-panel,
#dashboardPanel .agent-crm-layout .crm-table-shell,
#dashboardPanel .agent-crm-layout .crm-record-panel,
#dashboardPanel .agent-crm-layout .crm-section,
#dashboardPanel .agent-crm-layout .crm-overview-tile,
#dashboardPanel .agent-crm-layout .crm-intelligence-panel {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#dashboardPanel .agent-crm-layout .crm-list-toolbar {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
  border-bottom-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-list-toolbar strong,
#dashboardPanel .agent-crm-layout .crm-contact-head strong,
#dashboardPanel .agent-crm-layout .crm-record-section-head h3,
#dashboardPanel .agent-crm-layout .crm-empty-pipeline strong,
#dashboardPanel .agent-crm-layout .crm-section summary span,
#dashboardPanel .agent-crm-layout .crm-section summary strong,
#dashboardPanel .agent-crm-layout .crm-profile-stats.compact strong,
#dashboardPanel .agent-crm-layout .crm-last-activity strong,
#dashboardPanel .agent-crm-layout .crm-counts b,
#dashboardPanel .agent-crm-layout .saved-search-detail h3,
#dashboardPanel .agent-crm-layout .rule-question-row strong,
#dashboardPanel .agent-crm-layout .crm-contact-card-row a,
#dashboardPanel .agent-crm-layout .ai-synopsis-panel p,
#dashboardPanel .agent-crm-layout .price-drop-copy strong,
#dashboardPanel .agent-crm-layout .client-inquiry-copy strong {
  color: var(--sv-heading);
}

#dashboardPanel .agent-crm-layout .crm-list-toolbar span,
#dashboardPanel .agent-crm-layout .crm-client-search span,
#dashboardPanel .agent-crm-layout .crm-client-table-header,
#dashboardPanel .agent-crm-layout .crm-name-stack small,
#dashboardPanel .agent-crm-layout .crm-last-activity small,
#dashboardPanel .agent-crm-layout .crm-contact-head span,
#dashboardPanel .agent-crm-layout .crm-contact-head small,
#dashboardPanel .agent-crm-layout .crm-record-section-head p,
#dashboardPanel .agent-crm-layout .crm-section summary small,
#dashboardPanel .agent-crm-layout .crm-timeline-item small,
#dashboardPanel .agent-crm-layout .crm-timeline-item em,
#dashboardPanel .agent-crm-layout .crm-timeline-item time,
#dashboardPanel .agent-crm-layout .crm-favorite-tile small,
#dashboardPanel .agent-crm-layout .crm-note-status,
#dashboardPanel .agent-crm-layout .crm-assigned-agent small,
#dashboardPanel .agent-crm-layout .crm-empty-pipeline,
#dashboardPanel .agent-crm-layout .intelligence-row small,
#dashboardPanel .agent-crm-layout .agent-feed-row small,
#dashboardPanel .agent-crm-layout .most-active-row small,
#dashboardPanel .agent-crm-layout .rule-intent-row small,
#dashboardPanel .agent-crm-layout .rule-question-row span,
#dashboardPanel .agent-crm-layout .crm-note-label span,
#dashboardPanel .agent-crm-layout .crm-followup-grid label span,
#dashboardPanel .agent-crm-layout .client-inquiry-copy small,
#dashboardPanel .agent-crm-layout .price-drop-copy small {
  color: var(--sv-text-muted);
}

#dashboardPanel .agent-crm-layout .crm-client-search input,
#dashboardPanel .agent-crm-layout .crm-followup-grid select,
#dashboardPanel .agent-crm-layout .crm-followup-grid input,
#dashboardPanel .agent-crm-layout .crm-followup-grid textarea,
#dashboardPanel .agent-crm-layout .crm-note-label input,
#dashboardPanel .agent-crm-layout .crm-note-label textarea {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-client-search input::placeholder,
#dashboardPanel .agent-crm-layout .crm-followup-grid input::placeholder,
#dashboardPanel .agent-crm-layout .crm-note-label input::placeholder,
#dashboardPanel .agent-crm-layout .crm-note-label textarea::placeholder {
  color: var(--sv-text-muted);
}

#dashboardPanel .agent-crm-layout .crm-client-table-row,
#dashboardPanel .agent-crm-layout .crm-client-table .crm-client-row,
#dashboardPanel .agent-crm-layout .broker-agent-row,
#dashboardPanel .agent-crm-layout .crm-timeline,
#dashboardPanel .agent-crm-layout .crm-timeline-item {
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-client-table-header,
#dashboardPanel .agent-crm-layout .broker-agent-header {
  color: var(--sv-text-muted);
  background: var(--sv-surface-2);
}

#dashboardPanel .agent-crm-layout .crm-client-table .crm-client-row:hover,
#dashboardPanel .agent-crm-layout .crm-client-table .crm-client-row:focus-visible,
#dashboardPanel .agent-crm-layout button.broker-agent-row:hover,
#dashboardPanel .agent-crm-layout button.broker-agent-row:focus-visible {
  background: var(--sv-surface-2);
  outline-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .crm-linkish,
#dashboardPanel .agent-crm-layout .crm-client-cue,
#dashboardPanel .agent-crm-layout .intent-mini,
#dashboardPanel .agent-crm-layout .rule-intent-row em,
#dashboardPanel .agent-crm-layout .crm-followup-mini,
#dashboardPanel .agent-crm-layout .crm-favorite-actions a,
#dashboardPanel .agent-crm-layout .crm-inline-actions a {
  color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .crm-command {
  color: var(--sv-text-muted);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

#dashboardPanel .agent-crm-layout .crm-command strong {
  color: var(--sv-text);
}

#dashboardPanel .agent-crm-layout .crm-command span {
  color: var(--sv-text-muted);
}

#dashboardPanel .agent-crm-layout .crm-command.active,
#dashboardPanel .agent-crm-layout .crm-command:hover,
#dashboardPanel .agent-crm-layout .crm-command.doc-command {
  background: var(--sv-surface);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .crm-overview-tile {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-overview-tile:hover,
#dashboardPanel .agent-crm-layout .crm-overview-tile:focus-visible {
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .crm-overview-tile span,
#dashboardPanel .agent-crm-layout .crm-overview-tile small {
  color: var(--sv-text-muted);
}

#dashboardPanel .agent-crm-layout .crm-overview-tile strong {
  color: var(--sv-heading);
}

#dashboardPanel .agent-crm-layout .crm-privacy-bar strong {
  color: var(--sv-heading);
}

#dashboardPanel .agent-crm-layout .crm-contact-head,
#dashboardPanel .agent-crm-layout .broker-agent-drilldown-head,
#dashboardPanel .agent-crm-layout .crm-record-panel,
#dashboardPanel .agent-crm-layout .crm-section,
#dashboardPanel .agent-crm-layout .pinned-notes-panel,
#dashboardPanel .agent-crm-layout .ai-synopsis-panel,
#dashboardPanel .agent-crm-layout .saved-search-detail {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-privacy-bar,
#dashboardPanel .agent-crm-layout .crm-profile-stats.compact span,
#dashboardPanel .agent-crm-layout .crm-next-actions span,
#dashboardPanel .agent-crm-layout .rule-question-row,
#dashboardPanel .agent-crm-layout .crm-timeline-item,
#dashboardPanel .agent-crm-layout .crm-favorite-tile,
#dashboardPanel .agent-crm-layout .crm-favorite-actions a,
#dashboardPanel .agent-crm-layout .crm-inline-actions a,
#dashboardPanel .agent-crm-layout .broker-score-grid span,
#dashboardPanel .agent-crm-layout .broker-agent-row {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-section-title strong,
#dashboardPanel .agent-crm-layout .crm-stage-pill,
#dashboardPanel .agent-crm-layout .score-pill,
#dashboardPanel .agent-crm-layout .agent-session-compact {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-neutral-pill-line);
}

#dashboardPanel .agent-crm-layout .score-pill.alert {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
}

#dashboardPanel .agent-crm-layout .crm-intelligence-panel {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .crm-intelligence-panel.alert {
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .intelligence-row,
#dashboardPanel .agent-crm-layout .agent-feed-row,
#dashboardPanel .agent-crm-layout .most-active-row,
#dashboardPanel .agent-crm-layout .rule-intent-row {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout button.intelligence-row:hover,
#dashboardPanel .agent-crm-layout button.intelligence-row:focus-visible,
#dashboardPanel .agent-crm-layout .agent-feed-row:hover,
#dashboardPanel .agent-crm-layout .most-active-row:hover,
#dashboardPanel .agent-crm-layout .rule-intent-row:hover,
#dashboardPanel .agent-crm-layout .dashboard-row-button:hover {
  background: var(--sv-surface);
  border-color: var(--sv-accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#dashboardPanel .agent-crm-layout .client-avatar,
#dashboardPanel .agent-crm-layout .agent-avatar {
  color: #ffffff;
  background: linear-gradient(135deg, #536f74, var(--sv-accent));
  border-color: var(--sv-line);
}

#dashboardPanel .agent-crm-layout .activity-glyph,
#dashboardPanel .agent-crm-layout .contact-dot {
  color: var(--sv-btn-solid-text);
  background: var(--sv-btn-solid-bg);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .crm-inquiry-badge,
#dashboardPanel .agent-crm-layout .crm-inquiry-badge.prominent {
  color: var(--sv-heading);
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .client-inquiry-panel {
  color: var(--sv-text);
  background: var(--sv-surface);
  border-color: var(--sv-accent);
  border-left-color: var(--sv-accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#dashboardPanel .agent-crm-layout .client-inquiry-panel h3,
#dashboardPanel .agent-crm-layout .client-inquiry-question strong,
#dashboardPanel .agent-crm-layout .client-inquiry-copy em {
  color: var(--sv-heading);
}

#dashboardPanel .agent-crm-layout .client-inquiry-question,
#dashboardPanel .agent-crm-layout .client-inquiry-feature,
#dashboardPanel .agent-crm-layout .client-inquiry-more button {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .client-inquiry-feature:hover,
#dashboardPanel .agent-crm-layout .client-inquiry-feature:focus-visible {
  background: var(--sv-surface);
}

#dashboardPanel .agent-crm-layout .price-drop-badge,
#dashboardPanel .agent-crm-layout .price-drop-badge.prominent {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#dashboardPanel .agent-crm-layout .new-activity-badge {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-neutral-pill-line);
}

#dashboardPanel .agent-crm-layout .client-price-drop-panel {
  color: var(--sv-text);
  background:
    linear-gradient(180deg, rgba(224, 110, 110, 0.36), rgba(224, 110, 110, 0.20)),
    var(--sv-surface);
  border-color: rgba(224, 110, 110, 0.48);
  border-left: 5px solid #ff9a9a;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#dashboardPanel .agent-crm-layout .price-drop-card {
  color: var(--sv-text);
  background:
    linear-gradient(180deg, rgba(224, 110, 110, 0.28), rgba(224, 110, 110, 0.16)),
    var(--sv-surface-2);
  border-color: rgba(224, 110, 110, 0.40);
}

#dashboardPanel .agent-crm-layout .client-price-drop-panel h3,
#dashboardPanel .agent-crm-layout .price-drop-copy span {
  color: var(--sv-positive-strong);
}

#dashboardPanel .agent-crm-layout .client-price-drop-panel .crm-record-section-head p,
#dashboardPanel .agent-crm-layout .price-drop-copy small {
  color: #eeb0ac;
}

#dashboardPanel .agent-crm-layout .price-drop-copy:hover,
#dashboardPanel .agent-crm-layout .price-drop-copy:focus-visible,
#dashboardPanel .agent-crm-layout .price-drop-copy strong {
  color: var(--sv-positive-strong);
}

#dashboardPanel .agent-crm-layout .price-drop-dismiss,
#dashboardPanel .agent-crm-layout .price-drop-seen {
  color: var(--sv-positive);
  background: var(--sv-positive-bg);
  border-color: var(--sv-positive-line);
}

#dashboardPanel .agent-crm-layout .inquiry-status-button {
  color: var(--sv-heading);
  background: var(--sv-surface-2);
  border-color: var(--sv-accent);
}

#dashboardPanel .agent-crm-layout .inquiry-status-button.resolve {
  color: var(--sv-heading);
  background: var(--sv-surface);
}

#dashboardPanel .agent-crm-layout .inquiry-status-tag.seen {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border-color: var(--sv-neutral-pill-line);
}

#dashboardPanel .agent-crm-layout .pinned-notes-panel,
#dashboardPanel .agent-crm-layout .ai-synopsis-panel {
  color: var(--sv-text);
  background: var(--sv-surface-2);
  border: 1px solid rgba(201, 162, 76, 0.5);
  border-left: 5px solid var(--sv-accent);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#dashboardPanel .agent-crm-layout .pinned-notes-panel .crm-record-section-head h3,
#dashboardPanel .agent-crm-layout .ai-synopsis-panel .crm-record-section-head h3 {
  color: var(--sv-heading);
}

#dashboardPanel .agent-crm-layout .pinned-notes-panel .crm-record-section-head p,
#dashboardPanel .agent-crm-layout .ai-synopsis-panel .crm-record-section-head p {
  color: var(--sv-text-muted);
}

#dashboardPanel .agent-crm-layout .pinned-notes-panel .crm-note-label input,
#dashboardPanel .agent-crm-layout .pinned-notes-panel .crm-note-label textarea {
  color: #17211d;
  background: #fbfaf5;
  border: 1px solid #d8cfa8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

#dashboardPanel .agent-crm-layout .pinned-notes-panel .crm-note-label input::placeholder,
#dashboardPanel .agent-crm-layout .pinned-notes-panel .crm-note-label textarea::placeholder {
  color: #8a8677;
}

#dashboardPanel .agent-crm-layout .ai-synopsis-panel p {
  color: var(--sv-text);
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  padding: 12px;
}

#dashboardPanel .agent-crm-layout .ai-synopsis-panel .synopsis-disclaimer {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  color: var(--sv-text-muted);
  border-top: 1px solid var(--sv-line);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.4;
}

.listing-dialog {
  position: relative;
  width: min(940px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 36px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  overflow: auto;
  box-shadow: var(--shadow);
}

.listing-dialog::backdrop {
  background: rgba(5, 25, 28, 0.48);
}

/* Opened via dialog.show() (non-modal) instead of showModal() for the full-page
   listing view, so it renders in normal document flow, not as a floating modal
   box - no backdrop, full width up to a readable max, no fixed max-height. */
.listing-dialog.page-mode {
  position: static;
  width: 100%;
  max-width: min(1080px, calc(100vw - 48px));
  max-height: none;
  margin: 24px auto 48px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.listing-dialog.page-mode::backdrop {
  display: none;
}

.listing-dialog.page-mode .dialog-close {
  position: static;
  width: auto;
  height: auto;
  margin: 16px 0 12px 16px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  white-space: nowrap;
}

.ask-agent-dialog {
  width: min(520px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  background: #fffdf8;
  box-shadow: var(--shadow);
}

.ask-agent-dialog::backdrop {
  background: rgba(5, 25, 28, 0.48);
}

.ask-agent-dialog form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ask-agent-dialog h3 {
  margin: 0;
  color: var(--lake-dark);
  font-size: 1.25rem;
}

.ask-agent-context {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.ask-agent-dialog textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(5, 25, 28, 0.18);
  border-radius: 8px;
  font: inherit;
}

.ask-agent-dialog textarea:focus {
  outline: 2px solid rgba(20, 125, 132, 0.24);
  border-color: var(--lake);
}

.ask-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.agent-feedback-sticker {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 85;
  border: 1px solid rgba(197, 151, 67, 0.42);
  border-radius: 999px;
  background: #0b5559;
  color: #fffaf0;
  box-shadow: 0 18px 42px rgba(8, 43, 44, 0.25);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0;
  padding: 12px 18px;
}

.agent-feedback-panel {
  position: fixed;
  right: 22px;
  bottom: 78px;
  z-index: 86;
  width: min(390px, calc(100vw - 28px));
  border: 1px solid rgba(197, 151, 67, 0.32);
  border-radius: 8px;
  background: #fbf8ef;
  box-shadow: 0 24px 70px rgba(8, 43, 44, 0.25);
  color: #10201d;
  padding: 18px;
}

.agent-feedback-form,
.agent-feedback-form label {
  display: grid;
  gap: 10px;
}

.agent-feedback-form label {
  color: #536460;
  font-size: 0.86rem;
  font-weight: 800;
}

.agent-feedback-head,
.agent-feedback-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.agent-feedback-expectation {
  color: #536460;
  font-size: 0.78rem;
  margin: 0;
}

.agent-feedback-history {
  border-top: 1px solid rgba(83, 100, 96, 0.18);
  display: grid;
  font-size: 0.8rem;
  gap: 8px;
  margin-top: 12px;
  max-height: 160px;
  overflow-y: auto;
  padding-top: 12px;
}

.agent-feedback-history-title {
  color: #536460;
  font-weight: 800;
  margin: 0;
}

.agent-feedback-history-empty,
.agent-feedback-history-loading {
  color: #7a8b86;
  margin: 0;
}

.agent-feedback-history-row {
  align-items: baseline;
  display: grid;
  gap: 4px;
  grid-template-columns: auto 1fr auto;
}

.agent-feedback-history-status {
  background: rgba(11, 85, 89, 0.12);
  border-radius: 999px;
  color: #0b5559;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  white-space: nowrap;
}

.agent-feedback-history-status-resolved {
  background: rgba(60, 140, 90, 0.16);
  color: #2c6b45;
}

.agent-feedback-history-status-dismissed {
  background: rgba(120, 120, 120, 0.16);
  color: #5a5a5a;
}

.agent-feedback-history-message {
  color: #10201d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-feedback-history-date {
  color: #7a8b86;
  font-size: 0.72rem;
}

.agent-feedback-head h2 {
  font-size: 1.15rem;
  margin: 0;
}

.feedback-type-toggle {
  border: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
}

.feedback-type-toggle label {
  display: block;
  position: relative;
}

.feedback-type-toggle input {
  opacity: 0;
  position: absolute;
}

.feedback-type-toggle span {
  align-items: center;
  border: 1px solid rgba(11, 85, 89, 0.2);
  border-radius: 8px;
  color: #0b5559;
  display: flex;
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
  text-align: center;
}

.feedback-type-toggle input:checked + span {
  background: #0b5559;
  border-color: #0b5559;
  color: #fffaf0;
}

.agent-feedback-form textarea,
.agent-feedback-form input[type="file"] {
  border: 1px solid rgba(83, 100, 96, 0.22);
  border-radius: 8px;
  font: inherit;
  padding: 11px;
}

.agent-feedback-form textarea:focus,
.feedback-type-toggle input:focus-visible + span {
  outline: 3px solid rgba(197, 151, 67, 0.45);
  outline-offset: 2px;
}

.meridian-chat-bubble {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 85;
  border: 1px solid rgba(197, 151, 67, 0.42);
  border-radius: 999px;
  background: #0b5559;
  color: #fffaf0;
  box-shadow: 0 18px 42px rgba(8, 43, 44, 0.25);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0;
  padding: 12px 18px;
}

.meridian-chat-panel {
  position: fixed;
  left: 22px;
  bottom: 78px;
  z-index: 86;
  width: min(390px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(197, 151, 67, 0.32);
  border-radius: 8px;
  background: #fbf8ef;
  box-shadow: 0 24px 70px rgba(8, 43, 44, 0.25);
  color: #10201d;
  padding: 18px;
}

.meridian-chat-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.meridian-chat-head h2 {
  font-size: 1.05rem;
  margin: 0;
}

.meridian-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 4px 2px;
  flex: 1;
  min-height: 120px;
}

.meridian-chat-message {
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 8px 12px;
  max-width: 88%;
  white-space: pre-wrap;
  word-break: break-word;
}

.meridian-chat-message-user {
  align-self: flex-end;
  background: #0b5559;
  color: #fffaf0;
}

.meridian-chat-message-assistant {
  align-self: flex-start;
  background: rgba(11, 85, 89, 0.09);
  color: #10201d;
}

.meridian-chat-pending-action {
  align-self: flex-start;
  max-width: 88%;
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(197, 149, 72, 0.14);
  border: 1px solid rgba(197, 149, 72, 0.35);
  font-size: 0.86rem;
  line-height: 1.4;
}

.meridian-chat-pending-action p {
  margin: 0 0 8px;
}

.meridian-chat-pending-action-buttons {
  display: flex;
  gap: 8px;
}

.meridian-chat-client-link {
  all: unset;
  cursor: pointer;
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.meridian-chat-client-link:hover {
  opacity: 0.8;
}

.meridian-chat-status {
  color: #536460;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 2px;
}

.meridian-chat-form {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.meridian-chat-form input[type="text"] {
  width: auto;
  flex: 1;
  border: 1px solid rgba(83, 100, 96, 0.22);
  border-radius: 8px;
  font: inherit;
  padding: 10px 11px;
}

.meridian-chat-send {
  background: #0b5559;
  border: 0;
  border-radius: 8px;
  color: #fffaf0;
  cursor: pointer;
  font-weight: 800;
  padding: 10px 16px;
}

.meridian-chat-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.dialog-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px 58px 16px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.dialog-heading-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 4px;
}

.dialog-heading-subline .eyebrow {
  margin: 0;
}

.dialog-heading-subline .meta-line {
  margin: 0;
  font-size: 0.85rem;
}

.dialog-favorite-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  margin-left: auto;
  font-size: 1.05rem;
}

.dialog-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dialog-close {
  position: sticky;
  top: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 12px 12px -52px auto;
  border: 2px solid rgba(7, 23, 25, 0.18);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 8px 18px rgba(18, 30, 26, 0.12);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

.detail-recommendation {
  display: grid;
  gap: 10px;
  margin: 14px 18px 0;
  padding: 14px;
  background: linear-gradient(180deg, #fffdf8, #f8f1df);
  border: 1px solid rgba(197, 149, 72, 0.3);
  border-radius: 8px;
}

.detail-recommendation div:first-child {
  display: grid;
  gap: 4px;
}

.detail-recommendation span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.detail-recommendation strong {
  color: var(--lake-dark);
  font-size: 1rem;
  line-height: 1.35;
}

.detail-photo {
  display: grid;
  align-content: end;
  min-height: 390px;
  margin: 16px 18px 0;
  padding: 14px;
  background-color: var(--lake-dark);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 8px;
}

.detail-photo-controls {
  justify-self: end;
}

.detail-summary-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 12px 18px 0;
  border: 1px solid rgba(197, 149, 72, 0.24);
  border-radius: 8px;
  background: rgba(197, 149, 72, 0.24);
}

.detail-summary-band div {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #fffdf8;
}

.detail-summary-band span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-summary-band strong {
  overflow: hidden;
  color: var(--lake-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-confidence-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 18px 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.35;
}

.detail-confidence-band.high {
  color: var(--ok);
  background: #f4fbf6;
  border-color: #cde8d7;
}

.detail-confidence-band.medium {
  color: #875f16;
  background: #fff9ec;
  border-color: #edd8a1;
}

.detail-confidence-band.low {
  color: #8b4a22;
  background: #fff3ea;
  border-color: #efc7aa;
}

.detail-confidence-band strong {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.detail-confidence-band span {
  color: var(--ink);
  font-weight: 800;
}

.detail-confidence-band em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 18px;
}

.dialog-section {
  padding: 12px;
  background: #f6f8f6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dialog-section h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.dialog-section-wide,
.dialog-section-full {
  grid-column: 1 / -1;
}

.source-details {
  display: block;
}

.source-details summary {
  cursor: pointer;
  color: var(--lake-dark);
  font-weight: 900;
}

.dialog-fit-list {
  margin-top: 0;
}

.dialog-rule-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dialog-rule-list li {
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dialog-rule-list strong,
.dialog-rule-list small {
  display: block;
}

.dialog-rule-list small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.detail-actions,
.detail-summary-band,
.listing-dialog > form,
.listing-dialog #listingDialogContent > .dialog-section {
  margin: 14px 18px;
}

@media (max-width: 1120px) {
  .search-view {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  .activity-panel {
    grid-column: 1 / -1;
  }

  .crm-contact-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pilot-readiness-grid,
  .agent-readiness-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-session-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .agent-activity-home {
    grid-template-columns: 1fr;
  }

  .agent-shell {
    padding-left: 0;
  }

  .agent-shell.sidebar-pinned {
    padding-left: 0;
  }

  .agent-sidebar-pin {
    display: none;
  }

  .agent-sidebar-label {
    opacity: 1;
  }

  /* The agent sidebar is an off-canvas drawer at this same breakpoint --
     see the drawer rules below (mobile-nav-toggle etc). CONFIRMED LIVE
     2026-08-04 (Matt, iPad portrait screenshot, twice): a plain
     "make the sidebar full-width in-flow" tablet treatment (what used to
     be here) and a narrower max-width:900px drawer threshold (the first
     attempted fix) BOTH still showed the full 9-button strip on portrait --
     turns out portrait iPad widths span a wide range (iPad mini ~744px up
     through iPad Pro 12.9" at 1024px), all comfortably under 1120px, while
     landscape on the same devices is comfortably over 1120px. Rather than
     keep chasing exact device widths, the drawer now simply uses the SAME
     max-width:1120px boundary as the rest of this tablet breakpoint --
     no gap between "tablet strip" and "drawer" zones left to fall through. */
  .agent-session-metrics {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agent-session-card > .secondary-button {
    justify-self: start;
  }

  /* Off-canvas nav drawers -- same max-width:1120px boundary as the rest of
     this block, see comment above .agent-session-metrics for why a narrower
     dedicated breakpoint (900px) was tried first and still wasn't wide
     enough. */
  .mobile-nav-toggle {
    display: inline-flex;
  }

  .top-actions {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(84vw, 320px);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 76px 16px 20px;
    background: var(--sv-surface);
    border-left: 1px solid var(--sv-line);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .top-actions.mobile-nav-open {
    transform: translateX(0);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.28);
  }

  .top-actions > * {
    width: 100%;
  }

  .top-actions button,
  .top-actions a {
    min-height: 46px;
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .session-pill {
    max-width: none;
    justify-content: center;
    min-height: 34px;
  }

  .header-agent {
    display: none;
  }

  .agent-sidebar-toggle {
    display: inline-flex;
  }

  .agent-sidebar,
  .agent-sidebar.pinned,
  .agent-sidebar:hover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(84vw, 300px);
    height: 100vh;
    height: 100dvh;
    padding: 16px 10px;
    transform: translateX(-100%);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .agent-sidebar.mobile-nav-open {
    transform: translateX(0);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
  }

  .agent-sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .agent-sidebar-nav button {
    width: 100%;
    white-space: normal;
  }

  .client-sidebar-toggle {
    display: inline-flex;
  }

  .client-sidebar {
    top: 0;
    left: 0;
    z-index: 60;
    width: min(84vw, 300px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .client-sidebar.mobile-nav-open {
    transform: translateX(0);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
  }

  .client-panel {
    padding-left: 0;
  }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 0;
  }

  .buyer-price-drop-head,
  .buyer-price-drop-card {
    grid-template-columns: 1fr;
  }

  .buyer-price-drop-head {
    align-items: start;
    flex-direction: column;
  }

  .buyer-price-drop-numbers {
    justify-content: start;
  }

  .buyer-price-drop-numbers > span {
    text-align: left;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--sv-page) 96%, transparent);
    border-bottom: 1px solid var(--sv-line);
    backdrop-filter: blur(14px);
  }

  .hero-agent-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    max-width: calc(100% - 102px);
    margin: 0;
    padding: 8px 10px;
  }

  .hero-agent-photo {
    top: 12px;
    left: 12px;
    width: 70px;
    height: 62px;
  }

  .hero-search,
  .registration-panel,
  .search-view,
  .results-search,
  .curated-share-card,
  .insight-strip,
  .results-grid,
  .dashboard-grid,
  .two-column,
  .community-layout,
  .dialog-grid {
    grid-template-columns: 1fr;
  }

  .curated-share-actions {
    justify-content: flex-start;
  }

  .meridian-chat-bubble,
  .agent-feedback-sticker {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 9px 12px;
    font-size: 0.82rem;
  }

  .meridian-chat-bubble {
    left: 12px;
    right: auto;
  }

  .agent-feedback-sticker {
    right: 12px;
    left: auto;
  }

  .agent-session-card {
    padding: 16px;
  }

  .agent-feed-row,
  .most-active-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agent-feed-row time,
  .most-active-row em {
    grid-column: 2;
    white-space: normal;
  }

  .crm-overview-tiles {
    grid-template-columns: 1fr;
  }

  .crm-overview-tile {
    min-height: auto;
  }

  .agent-session-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-session-metrics small {
    max-width: none;
  }

  .registration-form {
    padding: 14px;
  }

  .preview-listing-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 0 22px;
  }

  .review-filters,
  .review-stats,
  .agent-readiness-strip,
  .pilot-readiness-head,
  .pilot-readiness-grid,
  .agent-readiness-items,
  .integration-readiness,
  .integration-readiness-grid,
  .mls-readiness-grid,
  .deployment-readiness-grid,
  .provider-slot-grid,
  .readiness-detail-grid,
  .community-doc-request form {
    grid-template-columns: 1fr;
  }

  .hero-copy h1 {
    top: 31%;
    left: 22px;
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .hero-copy .eyebrow {
    top: calc(31% - 28px);
    left: 22px;
  }

  .hero-copy p {
    top: calc(31% + clamp(3rem, 14vw, 4.8rem) + 10px);
    left: 22px;
    right: 22px;
    font-size: 1rem;
  }

  .hero-search {
    left: 12px;
    right: 12px;
    bottom: 18px;
    width: calc(100% - 24px);
    padding: 10px;
  }

  .buyer-search-hero {
    margin: -12px calc(50% - 50vw) 14px;
  }

  .signed-in-hero-search,
  #searchPanel.search-has-output.search-results-compact .signed-in-hero-search {
    left: 12px;
    right: 12px;
    bottom: 18px;
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .signed-in-hero-search .area-filter {
    grid-column: 1;
  }

  .hero-search input,
  .hero-search button {
    min-height: 48px;
  }

  .signed-in-hero-search textarea,
  .signed-in-hero-search button {
    min-height: 48px;
  }

  .search-view {
    padding: 12px;
  }

  .workspace-menu-global {
    position: sticky;
    top: calc(var(--header-h, 62px) + 12px);
    z-index: 20;
  }

  .results-toolbar {
    padding: 16px;
  }

  .results-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .results-toolbar h1 {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
    line-height: 1.08;
  }

  .result-actions,
  .result-actions .secondary-button {
    width: 100%;
  }

  .results-search {
    position: sticky;
    top: 170px;
    z-index: 18;
    padding: 12px;
    border-color: rgba(197, 149, 72, 0.28);
    box-shadow: 0 14px 32px rgba(18, 30, 26, 0.1);
  }

  .signed-in-hero-search {
    position: absolute;
    top: auto;
    z-index: 2;
    box-shadow: 0 30px 88px rgba(0, 0, 0, 0.38);
  }

  .results-search label {
    gap: 7px;
    font-size: 0.82rem;
  }

  .results-search textarea {
    min-height: 76px;
    padding: 11px 12px;
    font-size: 1rem;
  }

  .prototype-status-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .prototype-status-strip small {
    margin-left: 0;
  }

  .quick-filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quick-filters button,
  .mobile-search-actions .primary-button,
  .mobile-search-actions #saveSearchButton,
  .card-actions button,
  .empty-search-actions button {
    min-height: 48px;
  }

  .mobile-search-actions {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 21;
    margin-top: 4px;
    padding-top: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(251, 250, 245, 0.96) 30%);
    flex-wrap: wrap;
  }

  .mobile-search-actions .primary-button {
    flex: 1 1 100%;
  }

  .mobile-search-actions #mapSearchButton,
  .mobile-search-actions #saveSearchButton {
    flex: 1 1 0;
    min-width: 0;
  }

  .mobile-result-toggle {
    position: sticky;
    top: calc(var(--header-h, 62px) + 66px);
    z-index: 19;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 12px;
    padding: 6px;
    background: rgba(251, 250, 245, 0.94);
    border: 1px solid rgba(197, 149, 72, 0.2);
    border-radius: 999px;
    backdrop-filter: blur(12px);
  }

  .mobile-result-toggle button {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    color: var(--lake-dark);
    background: transparent;
    font-weight: 950;
  }

  .mobile-result-toggle button.active {
    color: #fff;
    background: linear-gradient(135deg, #071719, var(--lake-dark));
    box-shadow: 0 10px 24px rgba(5, 25, 28, 0.16);
  }

  .mobile-map-panel:not(.hidden) {
    display: block;
  }

  .results-grid.mobile-map-active {
    display: none;
  }

  .result-card {
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(17, 26, 24, 0.1);
  }

  .result-image {
    min-height: 236px;
    padding: 10px;
  }

  .result-body {
    gap: 10px;
    padding: 15px;
  }

  .result-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .result-body h2 {
    font-size: 1.16rem;
    line-height: 1.18;
  }

  .favorite-button {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  .listing-facts span,
  .search-reason-list li,
  .rule-badge {
    font-size: 0.76rem;
  }

  .listing-facts {
    gap: 6px;
  }

  .rule-badge-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .rule-badge {
    width: 100%;
  }

  .rule-badge small {
    max-width: 100%;
  }

  .match-explainer {
    padding: 10px;
  }

  .search-reason-chips {
    gap: 6px;
  }

  .search-reason-chips span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .result-card .fit-list {
    padding: 9px 10px 9px 24px;
    font-size: 0.82rem;
  }

  .photo-controls {
    min-width: 104px;
    min-height: 42px;
  }

  .photo-controls button {
    min-width: 40px;
    min-height: 40px;
  }

  .card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mobile-map-canvas {
    min-height: 330px;
  }

  .photo-controls button {
    width: 40px;
    height: 40px;
  }

  .detail-photo {
    min-height: 260px;
    margin-inline: 12px;
  }

  .dialog-heading {
    padding: 16px 64px 14px 14px;
  }

  .dialog-grid,
  .detail-summary-band,
  .detail-actions,
  .listing-dialog > form,
  .listing-dialog #listingDialogContent > .dialog-section,
  .listing-dialog #listingDialogContent > .source-details {
    margin-inline: 12px;
  }

  .detail-summary-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-summary-band div {
    padding: 10px;
  }

  .card-actions {
    grid-template-columns: 1fr;
  }

  .crm-client-row,
  .client-drilldown-head {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .crm-contact-head {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .crm-contact-head .client-avatar.large {
    width: 56px;
    height: 56px;
  }

  .crm-contact-actions {
    justify-content: stretch;
  }

  .crm-contact-actions .secondary-button {
    flex: 1 1 120px;
  }

  .crm-client-table {
    max-height: min(68vh, 620px);
    overflow: auto;
  }

  .share-profile-card {
    grid-template-columns: 1fr;
  }

  .settings-summary-grid {
    grid-template-columns: 1fr;
  }

  .share-actions {
    justify-content: stretch;
  }

  .share-actions .primary-button,
  .share-actions .secondary-button {
    flex: 1 1 100%;
  }

  .crm-client-table-header {
    display: none;
  }

  .crm-client-table-row {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
  }

  .crm-client-table .crm-client-row {
    margin-bottom: 10px;
    border: 1px solid rgba(197, 149, 72, 0.2);
    border-radius: 8px;
  }

  .crm-last-activity span:last-child,
  .crm-linkish {
    white-space: normal;
  }

  .crm-timeline-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-timeline-item time {
    grid-column: 2;
  }

  .crm-client-row em,
  .crm-client-cue {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .crm-list-toolbar {
    grid-template-columns: 1fr;
  }

  .agent-beta-next,
  .agent-beta-next-grid,
  .agent-account-proof {
    grid-template-columns: 1fr;
  }

  .crm-privacy-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }

  .crm-privacy-bar span {
    text-align: left;
  }

  .client-drilldown-head {
    flex-direction: column;
  }

  .crm-counts,
  .crm-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }
}

@media (max-width: 430px) {
  /* Below ~430px there just isn't room for the gate's text column and its
     button column side by side -- flex-shrink squeezed the buttons into a
     forced multi-line-wrapped narrow strip (confirmed 360/390px, s3d mobile
     pass). Stack instead of trying to fit both in one row. */
  .buyer-action-gate {
    flex-direction: column;
    align-items: stretch;
  }

  .buyer-action-gate-actions {
    justify-content: stretch;
  }

  .buyer-action-gate-actions button,
  .buyer-action-gate-actions a {
    flex: 1 1 auto;
  }

  /* Favorites/"Recently Viewed" rows nest several padded containers
     (panel-lite padding + .saved-item padding), so by the time the row
     itself is reached there's only ~124px left after the 72px thumbnail --
     not enough to fit a full price ($150,000 at ~79px) beside a title and
     still leave room to read it, so the title collapsed to 1-2 characters
     (e.g. "Lo...") no matter how much flex-grow it got (confirmed 360/390px,
     s3d mobile pass). Stack title/subtitle above the price instead of
     sharing one row. */
  .favorite-card-body {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .favorite-card-body em {
    justify-self: start;
  }

  .site-header {
    min-height: auto;
  }

  .brand strong {
    font-size: 0.95rem;
  }

  .brand small {
    font-size: 0.68rem;
  }

  .top-actions {
    grid-template-columns: 1fr;
  }

  .top-actions button {
    width: 100%;
  }

  .workspace-menu-global {
    top: calc(var(--header-h, 62px) + 12px);
  }

  .results-search {
    top: 196px;
  }

  .mobile-result-toggle {
    top: calc(var(--header-h, 62px) + 66px);
  }

  .prototype-status-strip,
  .buyer-verification-note,
  .insight-strip {
    font-size: 0.9rem;
  }

  .insight {
    min-height: auto;
    padding: 12px;
  }

  .listing-facts,
  .tag-list {
    gap: 6px;
  }

  .listing-facts span,
  .tag {
    border-radius: 999px;
  }

  .result-image {
    min-height: 220px;
  }

  .result-image-topline {
    gap: 6px;
  }

  .result-image-topline .price {
    font-size: 1rem;
  }

  .mobile-map-canvas {
    min-height: 300px;
  }

  .listing-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 24px);
    border-radius: 8px;
  }

  .agent-feedback-sticker {
    right: 14px;
    bottom: 14px;
    padding: 11px 15px;
  }

  .agent-feedback-panel {
    right: 10px;
    bottom: 64px;
    padding: 14px;
    width: calc(100vw - 20px);
  }

  .meridian-chat-bubble {
    left: 14px;
    bottom: 14px;
    padding: 11px 15px;
  }

  .meridian-chat-panel {
    left: 10px;
    bottom: 64px;
    padding: 14px;
    width: calc(100vw - 20px);
  }

  .feedback-type-toggle {
    grid-template-columns: 1fr;
  }
}

.community-rules-panel {
  max-width: 860px;
}

.community-rules-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.community-rules-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sv-text-muted);
}

.community-rules-sheet {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  display: grid;
  gap: 16px;
}

.community-rules-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.community-rules-sheet-head h2 {
  margin: 0;
}

.community-rules-sheet-meta {
  margin: 4px 0 0;
  color: var(--muted);
}

.community-rules-sheet-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.community-rules-sheet-brand .brand-mark {
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
  border-radius: 6px;
  box-shadow: none;
}

.community-rules-sheet-brand-name {
  font-weight: 800;
  color: var(--ink);
}

.community-rules-sheet-brand-sep {
  color: var(--muted);
}

.community-rules-sheet-brand .agent-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

.community-rules-sheet-agent-name {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Small print, bottom of sheet -- SCOPED 2026-07-30 (Matt): moved from an
   unmissable top banner (feat_ccrsheet's original per-listing/buyer-showing
   scope) to a footnote, once this became more of an agent quick-reference
   cheat sheet than a document handed straight to a buyer. Placeholder copy
   pending attorney review (s4a/s4b) either way. */
.community-rules-disclaimer {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 400;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--muted);
}

.community-rules-category {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.community-rules-category h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.community-rules-highlight {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

.community-rules-unreviewed {
  margin: 0;
  color: #4a564f;
  font-size: 0.95rem;
  line-height: 1.5;
}

.community-rules-lead-note {
  margin: -6px 0 0;
  color: #3d473f;
  font-size: 0.85rem;
}

.community-rules-field-note {
  border-top: 1px dashed var(--line);
  background: #fdf6e3;
  border-radius: 8px;
  padding: 12px 14px;
}

.community-rules-field-note-label {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

@media print {
  body * {
    visibility: hidden;
  }
  #communityRulesPrintSheet,
  #communityRulesPrintSheet * {
    visibility: visible;
  }
  #communityRulesPrintSheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
  }
  .no-print {
    display: none !important;
  }
}

.community-rules-qa-form {
  display: flex;
  gap: 8px;
  margin: 4px 0 0;
}

.community-rules-qa-form input {
  flex: 1;
}

.community-rules-qa-answer:not(:empty) {
  margin-top: 10px;
}

.community-rules-qa-answer p {
  margin: 0;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Two-way buyer<->agent messaging (msgthread) */

.message-thread-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.message-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.message-thread-head strong {
  color: var(--ink);
}

.message-thread-head span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.message-thread-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 220px;
  max-height: 50vh;
  padding: 4px 2px;
}

.thread-message {
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 8px 12px;
  max-width: 82%;
}

.thread-message p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.thread-message time {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  opacity: 0.75;
}

.thread-message-mine {
  align-self: flex-end;
  background: var(--lake-dark);
  color: var(--white);
}

.thread-message-theirs {
  align-self: flex-start;
  background: rgba(18, 30, 26, 0.06);
  color: var(--ink);
}

.thread-message-listing-tag {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid currentColor;
  border-radius: 6px;
  color: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  opacity: 0.9;
}

.thread-message-theirs .thread-message-listing-tag {
  background: rgba(18, 30, 26, 0.05);
}

.message-compose-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.message-compose-input {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
}

.message-inbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.message-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.message-inbox-view-toggle {
  display: flex;
  gap: 6px;
}

.message-inbox-view-toggle button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.message-inbox-view-toggle button.active {
  background: var(--lake-dark);
  border-color: var(--lake-dark);
  color: var(--white);
}

.message-search-input {
  width: 100%;
}

.message-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-thread-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.message-inbox-head h2 {
  margin: 0;
}

.message-inbox-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.message-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow-y: auto;
}

.message-inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--white);
  border: 1px solid rgba(18, 30, 26, 0.08);
  border-radius: 8px;
  text-align: left;
}

.message-inbox-row.active {
  border-color: var(--lake-dark);
  background: rgba(11, 85, 89, 0.08);
}

.message-inbox-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.message-inbox-row-body strong {
  font-size: 0.88rem;
  color: var(--gold);
}

.message-inbox-row-body small {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-inbox-row time {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-size: 0.72rem;
  color: var(--muted);
  align-self: start;
}

.message-unread-badge {
  grid-row: 2;
  grid-column: 3;
  justify-self: end;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
}

.message-inbox-thread {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  min-height: 320px;
}

@media (max-width: 720px) {
  .message-inbox-layout {
    grid-template-columns: 1fr;
  }

  .message-inbox-list {
    max-height: 40vh;
  }
}