: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 {
  /* clip, NOT hidden. overflow-x: hidden forces overflow-y to compute to auto,
     which turns html into a scroll container and silently kills every
     position: sticky descendant (the listing detail rail was the symptom).
     overflow-x: clip does the same horizontal clipping without creating a
     scroll container, so sticky keeps working and the full-bleed hero still
     can't produce a horizontal scrollbar. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  /* see the note on html above -- same reason */
  overflow-x: clip;
  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;
}

.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;
  box-shadow: 0 8px 18px rgba(17, 26, 24, 0.08);
}

/* An avatar with NO photo renders initials instead. The rule above sets
   background: var(--white) as a pad for a photo, which left white initials on a
   white circle -- an apparently blank avatar. Restore the base gradient (and drop
   the photo padding) whenever there is no photo. Found 2026-08-29 on the
   office-manager header, where Barbara Bush has no profile photo: the circle
   rendered completely empty. Affects any agent/broker/office manager without a
   photo, which is most new accounts. */
.header-agent .agent-avatar.initials {
  background: linear-gradient(135deg, #0c545a, #b48643);
  color: #ffffff;
  padding: 0;
}

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

.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(50px, 16vh, 120px);
  max-width: min(560px, calc(100% - 52px));
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--champagne);
  letter-spacing: 0.02em;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}

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

.hero-copy h1 {
  max-width: min(840px, calc(100% - 12px));
  margin-top: 4px;
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);
}

.hero-copy p {
  max-width: 560px;
  margin-bottom: 8px;
  color: #dcd6c6;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  line-height: 1.5;
  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;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(3, 9, 18, 0.22);
}

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

/* No card framing (background/border/padding) on .hero-agent-photo anymore --
   photos fill the badge edge-to-edge instead of sitting in a white-bordered
   inset. object-fit is "cover" (not "contain") so there's no letterboxing gap
   to fill with background color. */
.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: cover;
}

.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;
  flex-wrap: wrap;
  gap: 10px;
}

/* Crushed-button fix (2026-08-19): in the compact (search-has-output) layout
   this row lives in a minmax(260px, 360px) grid column. #mapSearchButton had no
   flex rule (keeping its wide auto content basis) and #saveSearchButton reserved
   min-width: 150px, so there was no free space left for this button to grow
   into -- and flex-basis 0 plus min-width: 0 removed its min-content floor, so
   it collapsed to a ~0px box with "Run Search" spilling outside it. Give the
   primary action its own full-width row and let the two secondary actions share
   the next one. */
#searchForm .mobile-search-actions .primary-button {
  flex: 1 1 100%;
  width: auto;
  min-width: 120px;
}

.search-disclaimer {
  margin: 0 0 18px;
  padding: 0 4px;
  font-size: 0.76rem;
  line-height: 1.5;
  /* FIXED 2026-09-05: this sits in normal flow OUTSIDE the photo hero, i.e.
     directly on <body>'s own background, which is var(--sv-page) -- dark
     navy in the Navy theme, light in Cream (theme-reactive, see the
     .agent-shell comment a few hundred lines down explaining the same
     pattern). The previous var(--ink) was a hardcoded dark color that
     assumed a permanently-light background here, which was never actually
     checked -- it rendered invisible against the real (dark) background,
     same root cause as the .ld-priceblock fix above, just not caught before
     shipping this time. var(--sv-text) is the theme-reactive counterpart to
     var(--sv-page) specifically so this can never mismatch the body
     background in either theme again. */
  color: var(--sv-text);
  opacity: 0.82;
}

#searchForm #mapSearchButton {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 120px;
}

#searchForm #saveSearchButton {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 120px;
  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;
}

/* City/Area/Communities dropdown, floated 2026-08-19. It used to sit in the
   normal flow of .area-filter (a grid), so opening it grew the grid row and
   shoved the whole search card -- Run Search, Map Search, Save Search and
   everything below -- down the page. Now it overlays instead. .area-filter is
   already position: relative, so that is the anchor. z-index has to clear the
   sticky .mobile-search-actions bar (z-index 21) on mobile, hence 40. */
.af-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: 100%;
  min-width: min(300px, calc(100vw - 32px));
  max-width: min(380px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 10px;
  color: #14263f;
  background: #f7f1e3;
  border: 1px solid #e4d9bf;
  border-radius: 9px;
  box-shadow: 0 16px 32px rgba(20, 38, 63, 0.14);
}

/* In the full-hero states (landing, and the retry view) the search card sits
   38px off the bottom of .buyer-search-hero, which is .hero-media and carries
   overflow: hidden -- a downward panel would be sliced off almost immediately.
   Open upward there instead; there is a whole hero's worth of room above.
   The compact (search-has-output) state overrides the hero to
   overflow: visible, so it keeps the normal downward drop. */
#searchPanel:not(.search-results-compact) .buyer-search-hero .af-panel {
  top: auto;
  bottom: calc(100% + 8px);
}

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

/* The broker invite gate's three fields, side by side (Matt, 2026-09-08:
   stacked they "take up way too much space on the vertical design").
   minmax(0, 1fr), not 1fr: styles.css sets a global `input { width: 100% }`,
   and a 100%-wide child in a plain 1fr track will not shrink below its
   intrinsic width, which blows the grid out of its container. Collapses to one
   column in the EXISTING max-width:680px block below, alongside
   .broker-lookup-row -- one breakpoint, one place to change it. */
.roster-gate-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  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,
  .roster-gate-fields {
    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);
  /* ⚠ 0.82rem = 13.12px, NOT a style preference. NTREIS Rule 16.08 requires the
     listing brokerage and agent to appear "in typeface not smaller than the
     median used in the display of listing data". Measured live on a result card
     2026-08-29: this was 0.72rem/11.52px against a 12.80px median (13.12px if
     UI chrome is counted), i.e. tied for the SMALLEST text on the card. Do not
     reduce it back without re-measuring the median.
     WEIGHT/CASE/SPACING BELOW ARE NOT PART OF THAT REQUIREMENT, unlike the
     size above -- the rule only constrains typeface SIZE. Toned down
     2026-09-05 (Matt: this read as clutter/a warning label on a page full of
     cards) from bold+uppercase+letter-spacing to plain text -- same content,
     same size, quieter presentation. Do not restore the bold/caps/spacing
     treatment; that was styling choice layered on top of the rule, not the
     rule itself. */
  font-size: 0.82rem;
  font-weight: 400;
}

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

/* Not gated by NTREIS Rule 16.08 (that's the brokerage/agent text just above) --
   the date doesn't need the same weight/caps treatment, just needs to be there. */
.idx-updated {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.75;
}

/* Renders ONCE above the results grid (see ntreisReliabilityNoticeOnce(), added
   2026-09-04) instead of repeating the same sentence on every card. */
.ntreis-consumer-notice-once {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.74rem;
}

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

/* background was hardcoded var(--white) -- inside the agent dashboard,
   .crm-record-panel's higher-specificity rule sets color: var(--sv-text) to
   champagne (#ece5d5) for its navy background, and this dropdown never
   overrode color, so it inherited champagne text on a forced-white box:
   effectively unreadable. Same bug already documented and fixed once at
   .ld-card .dialog-rule-list (see the note above it) -- fixed the same way
   here, at the source, by using the paired --sv-surface token instead of
   patching just this one text colour. */
.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(--sv-surface);
  border: 1px solid rgba(197, 149, 72, 0.3);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(18, 30, 26, 0.12);
}

/* color is EXPLICIT and theme-aware on purpose. The panel above sets
   background: var(--sv-surface), which is #16293a in the default navy theme
   and #ffffff in cream. Without a matching theme-aware color here the option
   text inherited a light-theme dark value and rendered dark-on-dark navy --
   unreadable in the theme almost everyone actually sees, while looking fine
   in cream. Same bug class as the champagne-on-white note further down this
   file: never pair a var(--sv-*) background with a non-theme color token. */
.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;
  color: var(--sv-text);
}

.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;
  /* var(--muted) is a fixed #61716d with no navy override -- same dark-on-dark
     problem as .crm-tag-community-option above. --sv-text-muted is the
     theme-aware equivalent. */
  color: var(--sv-text-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;
}

/* CONTENT MUST NEVER SLIDE UNDER THE RAIL (fixed 2026-09-01, reported by Matt
   as "pretty sure you broke my broker dashboards" -- a screenshot of the
   Heisman Trophy Realty workspace with the sidebar sitting over the content and
   text clipped mid-word on the left).

   PRE-EXISTING, not a regression. Three sessions' changes were suspected in
   turn and all three were cleared by diffing production styles.css against a
   byte copy taken before that day's edits: the only changes were a drawer
   z-index rule, a dead .top-actions button rule, and a lead-inbox dedup. None
   touch the sidebar.

   THE ARITHMETIC, which needs no measurement:
     .agent-shell                { padding-left:  76px }   reserves the rail
     .agent-shell.sidebar-pinned { padding-left: 300px }   reserves the wide rail
     .agent-sidebar              { position: fixed; width:  76px }
     .agent-sidebar:hover        { width: 300px }          <-- reserves NOTHING
   Unpinned is consistent (76/76). Pinned is consistent (300/300). HOVER is not:
   the rail grows to 300px while the shell still reserves 76px, so a hovered
   rail covers exactly 224px of the dashboard.

   IT IS A DEFECT AND NOT A FLYOUT, on the codebase's own terms. The comment
   above setSidebarPinned() in app.js states the invariant outright: ".agent-
   shell's CSS padding-left simply reserves the rail's width so content can
   never slide underneath it." This restores that.

   ⚠ WHY IT SURVIVED THIS LONG, AND WHY A SCREENSHOT CAUGHT WHAT MOUSE-WAGGLING
   COULD NOT: the overlap is normally transient, lasting only while the pointer
   is genuinely over the rail. But .force-collapsed exists precisely because a
   STUCK version was reported once before -- its comment records "it says
   closing, but the menu stays open over the dashboard" -- and mouseleave is the
   only thing that clears it. Any path where mouseleave never fires (a re-render
   under a stationary cursor, a scroll that moves the element out from under it,
   touch input where :hover latches) leaves a 300px rail parked over the
   dashboard indefinitely. Fixing the geometry fixes the stuck case too, because
   there is no longer anything to be stuck ON TOP of.

   ⚠ SCOPED ABOVE THE DRAWER BREAKPOINT DELIBERATELY. Below 1120px the sidebar
   is an off-canvas drawer and .agent-shell is reset to padding-left: 0. This
   rule is more specific than that reset, so left unscoped it would win and
   re-introduce a 300px gutter on phones the moment the open drawer was
   touched -- :hover latches on touch devices. min-width: 1121px keeps it out of
   the drawer's range entirely rather than relying on source order.

   ⚠ AND IT EXCLUDES .force-collapsed. That class pins the rail back to 76px
   after an unpin click; reflowing to 300px while the rail is 76px would open a
   224px hole instead of closing one -- the same mismatch inverted. */
@media (min-width: 1121px) {
  .agent-shell:not(.sidebar-pinned):has(.agent-sidebar:hover:not(.force-collapsed)) {
    padding-left: 300px;
  }
}

.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;
  /* Reserves room below the last button so it can never land under Sophie's
     fixed chat bubble (.meridian-chat-bubble: bottom 22px + ~44px tall,
     z-index 85 -- always painted on top of this sidebar's z-index 15). This
     was a real, not just theoretical, collision: adding the Client
     Categorizer/The Flow buttons made the nav tall enough that "Invite
     Clients" started rendering directly behind Sophie's button. flex/
     overflow-y here also means a future taller nav degrades to an internal
     scrollbar instead of clipping (via the parent's overflow: hidden) or
     colliding with Sophie again. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 84px;
}

.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-avatar.brand-crest {
  background: #f7f3e9;
}

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

/* Settings sections as discrete cards -------------------------------------
   Matt, 2026-08-20: the settings panel scrolled as one continuous page even
   though its sections do unrelated jobs. A first pass gave the forms a card,
   but a near-white card on a white panel is separated only by a hairline,
   which was not enough. This inverts it: the PANEL is tinted and the cards are
   solid white, so each reads as a raised surface rather than a boxed region.

   SCOPED to #agentSettingsPanel on purpose: .document-form and
   .agent-account-panel are reused by other tool panels (contact upload, broker
   roster) which are single-purpose and need no splitting. The ID also outranks
   the .agent-profile-form border-bottom divider, which would otherwise draw a
   stray line inside a card -- the border shorthand below resets it. */
#agentSettingsPanel {
  background: var(--pearl);
}

#agentSettingsPanel > form,
#agentSettingsPanel > .agent-account-panel,
#agentSettingsPanel > .daily-brief-panel {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid rgba(197, 149, 72, 0.28);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(17, 26, 24, 0.05);
}

#agentSettingsPanel > .settings-summary-grid {
  margin: 0 0 18px;
}

/* Renders empty until an agent is signed in AND active. Without this it would
   show as a bordered white box containing nothing. */
.daily-brief-panel:empty {
  display: none;
}

/* The brief row still carries .agent-mfa-status chrome from when it lived
   inside the account panel. In its own card that nests a bubble in a bubble,
   so flatten it and let the card provide the frame. */
#dailyBriefPanel .agent-mfa-status {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Indent the alert rows under their heading so the list reads as belonging to
   it. The master switch above is deliberately NOT indented -- it governs the
   whole card, and lining it up with these rows would imply it is merely
   another item in the list. */
#notificationPrefsTypeGroup > .consent-check,
#notificationPrefsTypeGroup > small,
#notificationPrefsBrokerGroup > .consent-check,
#notificationPrefsBrokerGroup > small {
  margin-left: 18px;
}

.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,
/* ⚠ ul/li ADDED 2026-09-08 (pl2). This panel explicitly coloured small and p
   and NOTHING ELSE, so any list in it inherited the panel's cream — which is
   the right colour on a dark card and invisible on this light one. The pl2
   "what paying for your own workspace gets you" bullets were the first list to
   land here and measured 1.20:1 against the panel background, versus 4.91:1
   for the <p> directly beneath them. Cream on cream.
   FOUND BY LOOKING AT THE SCREEN, NOT BY A TEST: 80 assertions passed because
   they check the words are PRESENT, and no check in this repo can see that
   text is the same colour as what it sits on. Same family as the 2026-08-29
   campaigns contrast failures.
   Fixed here rather than with an inline style so any future list in this panel
   inherits the fix, and using the SAME var as the sibling p so it behaves
   identically under a theme switch instead of being pinned to one palette. */
.agent-account-panel ul,
.agent-account-panel li {
  color: var(--muted);
  line-height: 1.45;
}

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

/* Daily brief lane picker.
   BUTTONS, NOT RADIOS, deliberately: this stylesheet has a global
   `input, select, textarea { width: 100%; padding: 12px 13px }` that also hits
   radios and checkboxes, rendering each as a full-width padded white box with
   the glyph floating mid-row and the label shoved to the far right (see the
   Known traps note in CLAUDE.md -- it is a GROUPED selector, so grepping
   `input[type="radio"]` does not find it). Buttons sidestep it entirely and
   need no width/padding override. */
.daily-brief-lanes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.daily-brief-lane-btn.active {
  background: var(--lake-dark);
  color: #fdfbf5;
  border-color: var(--lake-dark);
}

/* Scoped with an explicit class rather than `.daily-brief-lanes small`: a bare
   descendant selector would catch any future nested span/small and turn it into
   a flex sibling competing for width -- the exact bug that split .todo-row
   50/50 once. The two-class form also out-specifies `.agent-mfa-status small`
   without needing !important. */
.agent-mfa-status .daily-brief-lane-note {
  flex-basis: 100%;
  margin-top: 4px;
}

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

/* agent_license_expiry_unchecked, 2026-09-02. A lapsed licence on the broker's
   own roster. Explicitly styled and explicitly asserted in
   outputs/broker-license-visibility-regression.js, because a missing CSS rule
   raises no error at all -- the banner would simply render as unstyled body
   text and read as a passing check. */
.broker-roster-license-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid rgba(185, 28, 28, 0.55);
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(185, 28, 28, 0.08);
}
.broker-roster-license-alert strong { font-size: 14px; }
.broker-roster-license-alert span { font-size: 13px; line-height: 1.5; }

.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,
/* Without this the licence input falls under the global `input { width: 100% }`
   rule and blows the flex row apart -- the grouped-selector trap in CLAUDE.md. */
.broker-roster-add-form .broker-roster-add-license,
/* The date field needs naming here too. The selector list is EXPLICIT, so a new
   input class is not covered by it, and the global `input, select, textarea
   { width: 100% }` rule would render it full-width and break the flex row --
   the same trap the comment above already warns about for the licence input. */
.broker-roster-add-form .broker-roster-add-expiry {
  width: auto;
  flex: 1 1 180px;
}

/* --- Broker agent-roster CSV upload (br2) ------------------------------- */
/* The file input gets an explicit border/padding for the same reason the
   add-form inputs above do: the global `input, select, textarea` rule would
   otherwise render it as a full-width padded white box. */
/* Claim-flow license challenge, shown inside the set-password gate. */
.claim-license-row {
  display: block;
  margin-bottom: 12px;
}

.claim-license-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(83, 100, 96, 0.85);
}

.broker-roster-csv {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(197, 149, 72, 0.25);
}

.broker-roster-csv h4 {
  margin: 0 0 4px;
}

.broker-roster-csv input[type="file"] {
  border: 1px solid rgba(83, 100, 96, 0.22);
  border-radius: 8px;
  font: inherit;
  padding: 11px;
  margin-top: 8px;
}

.broker-roster-csv-preview {
  margin-top: 12px;
}

.broker-roster-csv-summary {
  margin: 0 0 8px;
}

.broker-roster-csv-rows {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(83, 100, 96, 0.18);
  border-radius: 8px;
  padding: 0 12px;
}

/* Explicit classes throughout -- a bare `.broker-roster-csv-row span` would
   also grab the row number and the status pill and turn them into flex
   siblings competing for width. */
.broker-roster-csv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(197, 149, 72, 0.2);
}

.broker-roster-csv-row:first-child {
  border-top: none;
}

.broker-roster-csv-row .agent-name-stack {
  flex: 1 1 auto;
  min-width: 0;
}

.broker-roster-csv-rownum {
  flex: 0 0 auto;
  width: 28px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: rgba(83, 100, 96, 0.7);
}

.broker-roster-csv-row.is-error {
  opacity: 0.72;
}

.broker-roster-csv-note {
  color: #8a6d3b;
}

.broker-roster-csv-row.is-error .broker-roster-csv-note {
  color: #a03434;
}

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

.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-budget-warning {
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.meridian-chat-budget-warning--warn {
  background: #fdf3e0;
  border: 1px solid #e8b94d;
  color: #7a5300;
}

.meridian-chat-budget-warning--locked {
  background: #fdeaea;
  border: 1px solid #e08a8a;
  color: #8a1f1f;
}

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

  /* No column pin to release any more -- the sidebar is a nested flex stack, so
     it collapses with the grid on its own. Keeping the gap consistent with the
     single-column spacing above. */
  .agent-activity-side {
    gap: 10px;
  }

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

  /* THE DRAWER CANNOT ESCAPE ITS OWN HEADER (fixed 2026-09-01, reported by
     Matt: the menu opened greyed out on his phone and every tap just closed
     it without doing anything).

     .site-header is position:sticky with z-index:10, and it also carries
     backdrop-filter -- EITHER of those alone makes it a STACKING CONTEXT. The
     drawer (.top-actions) is a CHILD of that header, so its z-index:60 below
     only ranks it against the header's other children. To the rest of the
     page the whole header, drawer included, is flat at layer 10.

     #mobileDrawerBackdrop is a SIBLING of the header at z-index:55. The
     browser therefore compares 55 against 10, not against 60, and paints the
     dimming layer OVER the drawer. That produced both halves of the symptom
     at once: the drawer looked greyed out because it was genuinely behind the
     scrim, and every tap landed on the backdrop, whose only listener is
     closeMobileDrawers -- so the menu closed and the link was never hit.

     ⚠ RAISING THE DRAWER'S OWN z-index CAN NEVER FIX THIS, and the
     "top-actions button { z-index: 13; pointer-events: auto }" rule near the
     base .top-actions definition looks like an earlier attempt to do exactly
     that. A child cannot out-rank anything outside its parent's context. The
     only fixes are to move the drawer out of the header or to lift the header
     itself, and lifting the header is the smaller change.

     SCOPED TO body.mobile-drawer-open ON PURPOSE. That class exists only
     while a drawer is actually open, so normal browsing keeps the header at
     layer 10 and the page's stacking order is untouched. 60 was chosen by
     enumerating every z-index in this file rather than picking a big number:
     nothing at all sits between 55 and 60, and modals/toasts live at 85+, so
     they still cover the header exactly as before. */
  body.mobile-drawer-open .site-header {
    z-index: 60;
  }

  .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 {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .hero-copy .eyebrow {
    margin-top: clamp(36px, 14vh, 100px);
  }

  .hero-copy p {
    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;
  }
}

/* ============================================================
   LISTING DETAIL (ld-*) — rebuilt 2026-08-22 from Mock D.
   Every colour here MUST come from a --sv-* token. Those are the
   only variables the Navy/Cream toggle actually swaps
   ([data-theme="cream"]); hardcoding a hex renders a dark panel in
   Cream mode. The mock used its own private palette — that palette
   is deliberately NOT carried over.
   ============================================================ */

/* The listing view is a <dialog> reused as a page. A dialog defaults to
   background: canvas / color: canvastext -- i.e. a WHITE card with black text
   sitting on the navy page. That white card was also what clamped the hero's
   width. Going edge-to-edge and going transparent are therefore the same fix:
   the element spans the viewport, paints nothing of its own, and each child
   except the hero re-constrains itself to the readable column. */
.listing-dialog.page-mode {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 48px;
  background: transparent;
  color: var(--sv-text);
  border: none;
}

.listing-dialog.page-mode > *:not(.ld-hero):not(.ld-lightbox) {
  max-width: min(1340px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* Back button floats ON the hero rather than sitting in a band above it, so
   the photo starts at the very top of the content area. */
.ld-topbar {
  position: absolute;
  top: 18px;
  left: clamp(20px, 3vw, 48px);
  z-index: 4;
}
.listing-dialog.page-mode .ld-topbar .dialog-close {
  position: static;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- hero ---- */
/* True full-bleed. Making page-mode transparent wasn't enough on its own --
   #listingDialog still sits inside the app's normal layout wrapper, so
   width:100% only ever meant "100% of that wrapper". This breaks out to the
   viewport regardless of how many constrained ancestors are above it. Safe
   because html/body clip horizontal overflow (overflow-x: clip), so the 100vw
   the scrollbar) can't introduce a horizontal scrollbar. */
.ld-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ld-hero-photo {
  position: relative;
  height: min(92vh, 900px);
  min-height: 440px;
  border-radius: 0;
  background-size: cover;
  background-position: center 50%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ld-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 18, 28, 0.55) 0%,
    rgba(8, 18, 28, 0.05) 30%,
    rgba(8, 18, 28, 0.3) 60%,
    rgba(8, 18, 28, 0.9) 100%
  );
  pointer-events: none;
}
.ld-hero-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}
/* Hero text is inset from the VIEWPORT edge, not centred in the readable
   column -- on a wide screen the centred column pushed the headline far into
   the middle of the photo and it read as floating rather than anchored. */
.ld-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(20px, 3vw, 48px) 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.ld-hero-copy { min-width: 0; }
.ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f2e4bd;
}
.ld-eyebrow i {
  display: block;
  width: 30px;
  height: 1px;
  background: var(--sv-accent);
}
.ld-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.04;
  margin: 12px 0 8px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.ld-sub {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
/* The credit line is the widest thing in this block, so left-aligning the
   block (rather than right-aligning it) makes the price, the $/sqft and the
   "Courtesy of…" line all share one left edge. Right-aligning would line up
   their right edges instead, which is what looked ragged. */
.ld-priceblock {
  text-align: left;
  width: fit-content;
  flex: none;
}
.ld-amt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
  color: #f2e4bd;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.ld-per {
  margin-top: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.ld-cred {
  display: block;
  margin-top: 10px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
/* Consolidated here 2026-09-04 (was duplicated under the About write-up too).
   .ntreis-consumer-notice's base style (var(--muted), a dark color) is meant
   for a light card background -- unreadable as-is over the dark hero photo,
   so it needs its own light-on-dark treatment here, same reasoning as
   .ld-cred just above. Do not delete this block along with .ld-cred; the
   About-section instance is gone, so this hero copy is the ONLY place this
   required notice (NTREIS Rules 16.07/17.10) appears on the listing detail
   page. */
.ld-priceblock .ntreis-consumer-notice {
  margin-top: 6px;
  font-size: 0.62rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  opacity: 1;
}

/* ---- sticky anchor bar ---- */
.ld-stickybar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 10px 4px;
  margin-bottom: 4px;
  background: var(--sv-page);
  border-bottom: 1px solid var(--sv-line);
  flex-wrap: wrap;
  /* Content stays in the readable column, but the bar's background has to run
     edge-to-edge or photos scroll past in the gutters beside it. box-shadow
     paints that overflow and clip-path stops it bleeding vertically. */
  box-shadow: 0 0 0 100vmax var(--sv-page);
  clip-path: inset(0 -100vmax);
}
.ld-sb-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.ld-sb-left strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--sv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-sb-left span { color: var(--sv-heading); font-size: 0.9rem; white-space: nowrap; }
.ld-sb-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.ld-sb-nav a {
  color: var(--sv-text-muted);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
}
.ld-sb-nav a:hover { color: var(--sv-heading); border-bottom-color: var(--sv-accent); }
.ld-sb-actions { display: flex; align-items: center; gap: 10px; }

/* ---- gallery ---- */
.ld-gallery { padding: 24px 0 4px; }
.ld-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ld-sechead h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
  color: var(--sv-text);
}
.ld-count { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sv-text-muted); }
.ld-strip-wrap { position: relative; }
.ld-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.ld-strip figure {
  margin: 0;
  flex: 0 0 auto;
  width: 290px;
  height: 196px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--sv-card-line);
  background: var(--sv-surface-2);
  cursor: zoom-in;
}
.ld-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.ld-strip figure:hover img { transform: scale(1.05); }
.ld-strip figure b {
  position: absolute;
  left: 9px;
  top: 9px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sv-neutral-pill-bg);
  border: 1px solid var(--sv-neutral-pill-line);
  color: var(--sv-neutral-pill-text);
}
.ld-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 4;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  color: var(--sv-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ld-arrow:hover { border-color: var(--sv-accent); color: var(--sv-heading); }
.ld-arrow.left { left: -12px; }
.ld-arrow.right { right: -12px; }

/* ---- two-column body ---- */
.ld-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  padding: 24px 0 40px;
  align-items: start;
}
.ld-main { min-width: 0; }

.ld-keyrow {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--sv-card-line);
  border-radius: 10px;
  background: var(--sv-card);
  overflow: hidden;
  margin-bottom: 22px;
  scroll-margin-top: 76px;
}
.ld-keyrow div {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 14px 16px;
  border-right: 1px solid var(--sv-card-line);
}
.ld-keyrow div:last-child { border-right: 0; }
.ld-keyrow strong { font-size: 0.95rem; font-weight: 600; color: var(--sv-text); }

.ld-card {
  border: 1px solid var(--sv-card-line);
  border-radius: 12px;
  background: var(--sv-card);
  margin-bottom: 22px;
  overflow: hidden;
  scroll-margin-top: 76px;
}
.ld-card-accent { border-color: var(--sv-btn-ask-border); }
.ld-card > header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--sv-card-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ld-card > header h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--sv-text);
}
.ld-muted { color: var(--sv-text-muted); font-size: 0.78rem; }
.ld-body { padding: 18px 20px; }
.ld-subhead {
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sv-text-muted);
}
.ld-lede { margin: 0 0 14px; color: var(--sv-text); font-size: 0.98rem; line-height: 1.6; }
.ld-prose { margin: 0 0 12px; color: var(--sv-text); font-size: 0.95rem; line-height: 1.7; }
.ld-prose:last-child { margin-bottom: 0; }

/* reasons: flex rows so a sentence runs the full width instead of
   wrapping a word per line (the grid version collapsed under pressure) */
.ld-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ld-reasons li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; line-height: 1.55; color: var(--sv-text); }
.ld-reasons li em { flex: 0 0 18px; font-style: normal; font-weight: 800; font-size: 0.75rem; line-height: 1.7; text-align: center; color: var(--sv-positive); }
.ld-reasons li span { flex: 1 1 auto; min-width: 0; }
.ld-reasons li.watch em { color: var(--sv-heading); }
.ld-chips { margin-top: 14px; }

.ld-confidence {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sv-card-line);
  background: var(--sv-surface-2);
}
.ld-confidence strong { color: var(--sv-heading); font-size: 0.95rem; }
.ld-confidence span { color: var(--sv-text-muted); font-size: 0.83rem; line-height: 1.55; }
.ld-checks { padding: 16px 20px; }
.ld-rule-list { margin: 0; }
.ld-failclosed {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--sv-text-muted);
  border-top: 1px dashed var(--sv-card-line);
  padding-top: 12px;
}
.ld-qa { border-top: 1px solid var(--sv-card-line); }

.ld-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--sv-card-line);
  border-top: 1px solid var(--sv-card-line);
}
.ld-facts div { background: var(--sv-card); padding: 13px 16px; }
.ld-facts strong { font-size: 0.87rem; font-weight: 600; color: var(--sv-text); }

/* ---- map placeholder (sized for a real provider, see listing_detail_map) ---- */
.ld-map {
  position: relative;
  height: 240px;
  background:
    linear-gradient(115deg, var(--sv-surface), var(--sv-surface-2)),
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(139, 160, 179, 0.09) 38px, rgba(139, 160, 179, 0.09) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(139, 160, 179, 0.09) 38px, rgba(139, 160, 179, 0.09) 39px);
}
.ld-map-water {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 90% at 70% 58%, rgba(63, 124, 142, 0.42), transparent 62%);
}
.ld-map-pin {
  position: absolute;
  left: 43%;
  top: 46%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sv-accent);
  box-shadow: 0 0 0 6px rgba(201, 162, 76, 0.22), 0 0 0 13px rgba(201, 162, 76, 0.1);
}
.ld-map-label,
.ld-map-note {
  position: absolute;
  left: 16px;
  font-size: 0.76rem;
  color: var(--sv-text-muted);
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  padding: 6px 11px;
  border-radius: 7px;
}
.ld-map-label { bottom: 46px; }
.ld-map-note { bottom: 14px; font-size: 0.68rem; opacity: 0.8; }

/* listing_detail_map: the LIVE OpenFreeMap basemap (connected 2026-08-23) fills
   the exact frame the placeholder above was designed to, so wiring it up was a
   drop-in swap rather than a redesign. z-index:0 deliberately creates a
   stacking context -- Leaflet gives its own panes z-index 400+, which would
   otherwise paint the map over the sticky rail and the dialog chrome. */
.ld-map-live {
  background: var(--sv-surface);
  overflow: hidden;
  z-index: 0;
  /* Twice the placeholder height (Matt, 2026-08-23). The 240px frame was sized
     for a decorative stand-in; a real map needs the room to show the lot in
     context, not just the pin. The no-coordinates placeholder above stays at
     240px on purpose -- 480px of empty box helps nobody. */
  height: 480px;
}
@media (max-width: 720px) {
  /* 480px eats most of a phone screen and pushes the rules panel below the
     fold, so the map is shorter there rather than proportionally huge. */
  .ld-map-live { height: 320px; }
}
.ld-map-live .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.84);
  color: #33414d;
  font-size: 0.62rem;
  line-height: 1.35;
}
.ld-map-live .leaflet-control-attribution a { color: #2c5c8a; }

.ld-source { padding: 0 20px 16px; }

/* ---- sticky rail ---- */
.ld-rail {
  position: sticky;
  top: 76px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.ld-railcard {
  border: 1px solid var(--sv-card-line);
  border-radius: 12px;
  background: var(--sv-card);
  padding: 18px;
  flex: none;
}
.ld-railcard-primary { border-color: var(--sv-btn-ask-border); }
.ld-railcard-agent { border-style: dashed; }
.ld-railcard h4 {
  margin: 0 0 11px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sv-text-muted);
}
.ld-rail-price {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sv-heading);
}
.ld-rail-meta { margin: 8px 0 0; color: var(--sv-text-muted); font-size: 0.82rem; line-height: 1.5; }
.ld-rail-cta { width: 100%; margin-top: 14px; }
.ld-rail-pill { display: inline-block; margin-top: 12px; }
.ld-rail-actions { display: flex; flex-direction: column; gap: 8px; }
.ld-rail-actions .secondary-button,
.ld-rail-actions .primary-button { width: 100%; text-align: center; }
.ld-rail-hint { margin: 11px 0 0; font-size: 0.76rem; color: var(--sv-text-muted); line-height: 1.5; }

.ld-mini { display: flex; flex-direction: column; }
.ld-mini a {
  color: var(--sv-text);
  text-decoration: none;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--sv-line);
}
.ld-mini a span { color: var(--sv-text-muted); font-size: 0.74rem; }
.ld-mini a:hover { color: var(--sv-heading); border-left-color: var(--sv-accent); }

/* ---- closing agent band ---- */
.ld-close {
  border-top: 1px solid var(--sv-line);
  padding: 30px 4px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.ld-close-agent { display: flex; align-items: center; gap: 16px; }
.ld-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-btn-ask-border);
  flex: none;
}
.ld-close h4 {
  margin: 0 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--sv-text);
}
.ld-close p { margin: 0; color: var(--sv-text-muted); font-size: 0.85rem; }

/* ---- full-screen photo viewer ---- */
.ld-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(6, 12, 18, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ld-lightbox[hidden] { display: none; }
.ld-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
body.ld-lightbox-open { overflow: hidden; }
.ld-lb-close,
.ld-lb-nav {
  position: absolute;
  border-radius: 50%;
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  color: var(--sv-text);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}
.ld-lb-close { top: 18px; right: 22px; width: 42px; height: 42px; min-width: 42px; font-size: 1.5rem; }
.ld-lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; min-width: 50px; font-size: 1.75rem; }
.ld-lb-nav.prev { left: 22px; }
.ld-lb-nav.next { right: 22px; }
.ld-lb-close:hover,
.ld-lb-nav:hover { border-color: var(--sv-accent); color: var(--sv-heading); }
.ld-lb-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--sv-text-muted);
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  padding: 7px 15px;
  border-radius: 999px;
}
.ld-lb-cred { position: absolute; bottom: 22px; right: 22px; font-size: 0.68rem; color: var(--sv-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ld-strip { scroll-behavior: auto; }
  .ld-strip img { transition: none; }
}

@media (max-width: 1080px) {
  .ld-cols { grid-template-columns: 1fr; gap: 22px; }
  .ld-rail { position: static; max-height: none; overflow: visible; }
  .ld-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-sb-nav { display: none; }
  .ld-arrow { display: none; }
  .ld-strip figure { width: 230px; height: 158px; }
  .ld-hero-photo { height: 54vh; min-height: 320px; }
  .ld-hero-inner { padding: 0 18px 20px; }
  /* .ld-cred is NOT hidden here on purpose -- the "Courtesy of ... © NTREIS"
     line is an IDX attribution requirement, not decoration. */
  .ld-topbar { top: 12px; left: 14px; }
}

/* ---- legacy rule components inside the new listing card ----
   .dialog-rule-list li hardcodes background: var(--white) and .rule-check
   hardcodes #fbfcfb / #fffaf0 — both from the old white-dialog design, and
   neither uses a --sv-* token, so neither reacts to Navy/Cream. Dropped into
   the navy listing card they render as near-white boxes whose text inherits
   the card's light --sv-text: champagne on white, effectively unreadable.
   Fixed at the source by re-pointing the whole component at theme tokens,
   rather than patching the one text colour that happened to get noticed —
   otherwise the same bug stays live in Cream and on every other child. */
.ld-card .dialog-rule-list li {
  background: var(--sv-surface-2);
  border-color: var(--sv-card-line);
  color: var(--sv-text);
}
.ld-card .dialog-rule-list strong { color: var(--sv-text); }
.ld-card .dialog-rule-list small { color: var(--sv-text-muted); }

.ld-card .rule-check,
.ld-card .rule-check.watch {
  background: var(--sv-surface-2);
  border-color: var(--sv-card-line);
  color: var(--sv-text);
}
.ld-card .rule-check.pass { border-left-color: var(--sv-positive); }
.ld-card .rule-check.source { border-left-color: var(--sv-accent); }
.ld-card .rule-check.watch { border-left-color: var(--sv-heading); }
.ld-card .rule-check span {
  color: var(--sv-neutral-pill-text);
  background: var(--sv-neutral-pill-bg);
  border: 1px solid var(--sv-neutral-pill-line);
}
.ld-card .rule-check p { color: var(--sv-text); }
.ld-card .rule-check small { color: var(--sv-text-muted); }

/* min-build rule block shares the same legacy-light-surface problem */
.ld-card .min-build-rule {
  background: var(--sv-surface-2);
  border-color: var(--sv-card-line);
  color: var(--sv-text);
}
.ld-card .min-build-rule strong { color: var(--sv-heading); }
.ld-card .min-build-classes span { color: var(--sv-text-muted); }

/* ---- editorial lede for the listing writeup ----
   Serif + drop cap on the first paragraph of the remarks, matching the Mock A
   treatment. ::first-letter only applies to block containers, which is why the
   remarks are split into real <p> elements rather than one blob with <br>s. */
.ld-prose-lede {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--sv-text);
  /* Headroom for the raised cap below, which overflows ~18.5px above the
     paragraph. .ld-body only gives 18px, so without this the cap clips. */
  padding-top: 6px;
}
/* RAISED CAP, not a two-line drop cap. Matched to the market-snapshot email
   2026-08-25 at Matt's request ("make this our template"): the cap sits ON
   the first line's baseline, and every line after it returns to the cap's
   left edge instead of indenting beside it.
   THE GEOMETRY, so nobody re-tunes this by guessing:
     body text 1.18rem = 18.88px, line-height 1.62 -> 30.59px per line.
     A float only pushes text aside for as many lines as its BOX is tall, so
     the box must be SHORTER than one line (13px << 30.59px) for line 2 to
     tuck underneath. The old rule was 3.5em/0.76 = a ~56px box = 1.84 lines,
     which is exactly why two lines used to wrap beside it.
     Baseline match, using Georgia's metrics (ascent .917em, descent .219em):
       baseline = (boxHeight - 1.136*F)/2 + 0.917*F
       line 1 -> (30.59 - 21.45)/2 + 17.31 = 21.88px
       cap    -> (13 - 49.98)/2 + 40.35    = 21.86px
     ~0.02px apart, so the bottoms read as even. Changing font-size means
     recomputing line-height: boxHeight = 43.76 - 0.698*F. */
.ld-prose-lede::first-letter {
  float: left;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  line-height: 13px;
  padding: 0 12px 0 0;
  color: var(--sv-heading);
}
.ld-card .ld-body .ld-prose + .ld-prose { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Neighborhood mailing lists (idea_market_snapshot build step 2).
   Colours come from the existing theme variables only, so this follows the
   light/dark toggle without a second palette to keep in sync.
   NOTE the global `input, select, textarea { width: 100% }` rule near the top
   of this file: every field below is laid out inside an explicit grid or flex
   track, which is what keeps that full width from blowing out the row.
   --------------------------------------------------------------------------- */
.mailing-lists-tab .marketing-help {
  color: var(--muted, #6f6a62);
  font-size: 14px;
  margin: 0 0 16px;
}

.marketing-create {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(140px, 1fr) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 20px;
}

.marketing-create label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.marketing-create label span {
  font-size: 13px;
  color: var(--muted, #6f6a62);
}

.marketing-columns {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.marketing-list-column h4,
.marketing-detail h4 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .02em;
}

.marketing-detail h4 {
  margin-top: 22px;
}

.marketing-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}

.marketing-list-row.selected {
  border-color: var(--lake, #2b6f7f);
  box-shadow: 0 0 0 1px var(--lake, #2b6f7f) inset;
}

.marketing-list-row.archived {
  opacity: .6;
}

/* Explicit child classes rather than a bare `.marketing-list-row span` rule --
   a bare descendant selector here would also catch the count pills nested
   inside and turn them into flex siblings competing for width. */
.marketing-list-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.marketing-list-row-main small {
  color: var(--muted, #6f6a62);
  font-size: 12px;
}

.marketing-list-row-counts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}

.marketing-count {
  font-size: 12px;
  white-space: nowrap;
}

.marketing-count.muted {
  color: var(--muted, #6f6a62);
}

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

.marketing-detail-head h3 {
  margin: 0;
  font-size: 18px;
}

.marketing-target {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted, #6f6a62);
}

.marketing-member-list,
.marketing-past-client-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.marketing-member-row,
.marketing-past-client {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
}

.marketing-member-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.marketing-member-identity small {
  color: var(--muted, #6f6a62);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* An unsubscribed row stays visible and readable rather than being hidden or
   greyed into illegibility -- the agent needs to understand why their member
   count and their send count differ. */
.marketing-member-row.suppressed,
.marketing-past-client.suppressed {
  border-style: dashed;
}

.marketing-pill {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted, #6f6a62);
  white-space: nowrap;
}

.marketing-pill.subtle {
  opacity: .75;
}

.marketing-manual-add {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.marketing-empty {
  color: var(--muted, #6f6a62);
  font-size: 14px;
  margin: 0 0 8px;
}

@media (max-width: 900px) {
  .marketing-columns,
  .marketing-create,
  .marketing-manual-add {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Community Updates browse panel + custom-list details (sticker/bulk-apply
   project, 2026-08-24). Reuses .crm-tag-community-* for the dropdown search
   box itself -- only new layout wrappers are added here.
   --------------------------------------------------------------------------- */
.marketing-browse {
  color: var(--ink);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
  background: var(--white);
}

.marketing-browse h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.marketing-browse-county {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin-bottom: 12px;
}

.marketing-browse-county span {
  font-size: 13px;
  color: var(--muted, #6f6a62);
}

.marketing-browse-search-box {
  max-width: 420px;
}

.marketing-client-search-box {
  color: var(--ink);
  max-width: 420px;
  margin-bottom: 6px;
}

.marketing-custom-list-details {
  margin-bottom: 20px;
}

.marketing-custom-list-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted, #6f6a62);
  padding: 6px 0;
}

.marketing-custom-list-details .marketing-create {
  margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   Funnel Filler, Phase 1: Client Categorizer (segments) + The Flow (drip
   plans). Reuses the mailing-lists tab/column shell and stage-editor-row
   card pattern rather than inventing new layout primitives.
   --------------------------------------------------------------------------- */
.segment-builder,
.plan-builder {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 20px;
}

.segment-builder label,
.plan-builder label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.segment-builder label span,
.plan-builder label span {
  font-size: 13px;
  color: var(--muted, #6f6a62);
}

.segment-builder-criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.segment-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.segment-preview-result {
  padding: 10px 12px;
  background: #f7f9f8;
  border-radius: 6px;
  font-size: 0.85rem;
}

.segment-list-column {
  display: grid;
  gap: 12px;
}

.segment-list-column h4 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .02em;
}

.segment-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.segment-row-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.segment-row-actions {
  display: flex;
  gap: 8px;
}

.segment-member-count {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--muted, #6f6a62);
}

.segment-auto-enroll-pill {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef5f2;
  color: #2b6f7f;
  font-size: 0.72rem;
  font-weight: 600;
}

.segment-description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #6f6a62);
}

.segment-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.segment-member-list li {
  padding: 6px 10px;
  background: #f7f9f8;
  border-radius: 6px;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .segment-builder-criteria-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Bulk-select on the Clients tab + bulk-apply-to-community panel
   (sticker/bulk-apply project, 2026-08-24).
   --------------------------------------------------------------------------- */
.crm-select-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-select-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
}

/* Adds a leading checkbox column ONLY when the table opts in -- every other
   place this shared table renders (broker view, dashboard widgets) keeps its
   original column layout untouched. */
.crm-client-table.selectable .crm-client-table-row {
  grid-template-columns: 32px minmax(240px, 1.25fr) minmax(380px, 1.8fr) minmax(140px, 0.55fr) minmax(140px, 0.55fr);
}

.crm-client-table.selectable .crm-client-row {
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
}

.crm-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}

.crm-bulk-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.crm-bulk-notice {
  font-size: 13px;
  color: var(--muted, #6f6a62);
}

.crm-bulk-apply-panel {
  flex-basis: 100%;
  color: var(--ink);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.bulk-apply-search-box {
  max-width: 420px;
  margin-top: 10px;
}

.crm-bulk-notice-bar {
  justify-content: space-between;
  background: #eef6f4;
  border-color: var(--lake, #0f6f78);
}

/* ---------------------------------------------------------------------------
   Sticker filter on the Clients tab (sticker/bulk-apply project, 2026-08-24).
   --------------------------------------------------------------------------- */
.crm-sticker-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin: 12px 0;
}

.crm-sticker-filter span {
  font-size: 13px;
  color: var(--muted, #6f6a62);
}

/* Brand crest in the header mark. Replaces the literal "M" letterform that
   survived the 2026-08-18 rebrand on the legal pages and the site header
   (Matt, 2026-08-27: "We are not using Meridian any more for the name").
   Mirrors .agent-avatar.brand-crest, which already does this for the
   pre-signin avatar. */
.brand-mark.brand-mark-crest {
  background: #f7f3e9;
  padding: 0;
  overflow: hidden;
}
.brand-mark.brand-mark-crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Portal lead intake (Agent Setup panel)
   Reuses .contact-import-head / .contact-import-row / .ghost-button; only the
   pieces those do not already cover are defined here.
   --------------------------------------------------------------------------- */
.lead-intake-panel {
  margin: 18px 0 0;
}

/* Broker "put a buyer in the pool" form (2026-09-05). Renders inside the dark
   dashboard panel; the inputs keep the global white field styling, matching
   the method <select> beside them. Brand-neutral, present in BOTH copies. */
.broker-lead-pool-form {
  display: grid;
  gap: 8px;
  margin: 14px 0 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.broker-lead-pool-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

/* "Asked about: <listing>" line under a pooled lead, in the agent's claim row
   and in the broker's pool list. */
.claimable-lead-listing,
.broker-pool-listing {
  display: block;
  opacity: 0.85;
}

.lead-intake-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}

/* Explicit colour, not inherited: this block sits inside a pale panel, so an
   unset colour renders as near-invisible text on a near-white background. */
.lead-intake-address code {
  font-size: 15px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--pearl);
  border: 1px solid var(--hairline);
  word-break: break-all;
}

.lead-intake-note {
  display: block;
  color: var(--muted);
  margin-bottom: 12px;
}

.lead-intake-reason {
  font-style: italic;
  color: var(--cedar);
}

.lead-intake-row strong {
  color: var(--ink);
}

.lead-intake-row small {
  color: var(--muted);
}

.lead-intake-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}

.lead-intake-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lake-dark);
}

.lead-intake-fields input {
  color: var(--ink);
}

.lead-intake-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

@media (max-width: 700px) {
  .lead-intake-actions {
    flex-direction: row;
  }
}

/* Portal leads inside the Messages inbox -------------------------------------
   A lead is not a conversation: it is someone trying to reach the agent who is
   not in the CRM yet. Styled to read as distinct from client threads without
   inventing a second inbox. */
.lead-inbox-row {
  border-left: 3px solid var(--gold);
  /* .message-inbox-row is a 3-column grid (avatar | body | time) with time
     pinned to grid-column 3. A lead row has a FOURTH child — the NEW LEAD
     badge — which auto-places into that same column and paints on top of the
     timestamp. Give the badge a column of its own and move time to 4. */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.lead-inbox-row .lead-new-badge {
  grid-column: 3;
}

.lead-inbox-row time {
  grid-column: 4;
}

/* When no name was parsed the row falls back to the sender's address, which is
   often long. small already truncates; strong did not, so it ran under the
   timestamp instead of ellipsing. */
.lead-inbox-row .message-inbox-row-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-inbox-row .lead-avatar {
  background: var(--gold);
  color: var(--luxury-ink);
}

.lead-new-badge {
  align-self: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--luxury-ink);
  white-space: nowrap;
}

.lead-detail {
  padding: 18px 20px;
  color: var(--ink);
}

.lead-detail-head h3 {
  margin: 2px 0 4px;
  color: var(--ink);
}

.lead-detail-head small,
.lead-detail p small {
  color: var(--muted);
}

.lead-detail-subject {
  margin: 10px 0 6px;
  color: var(--ink);
}

.lead-detail-message {
  margin: 8px 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  color: var(--ink);
  background: var(--pearl);
  border-radius: 0 8px 8px 0;
}

.lead-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}


/* ==========================================================================
   Office manager workspace + staff messaging. Ported from staging 2026-08-28.
   Palette matches the email templates (card #16293a, gold #e6cf8f, Georgia
   prose) so the two read as one product. Scoped to .office-manager-home
   rather than a container id, so the styling travels with the content.
   ========================================================================== */
/* Office managers (brokerage support staff) -------------------------------
   Checkboxes inside this panel use .consent-check, which already carries the
   explicit width/height/padding override the global `input, select, textarea`
   rule makes necessary -- do not swap them for bare inputs. */
.office-manager-caps {
  border: 1px solid var(--line, #d9d3c4);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 4px 0 12px;
}

.office-manager-caps legend {
  padding: 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.office-manager-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #e6e1d5);
}

.office-manager-row:last-child {
  border-bottom: none;
}

.office-manager-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.office-manager-row-main strong {
  font-size: 0.98rem;
}

.office-manager-row-main span {
  font-size: 0.86rem;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.office-manager-row-status {
  font-weight: 600;
  opacity: 1;
}

/* Explicit class, not a bare `.office-manager-row div` descendant selector --
   a bare one would also catch nested spans and steal their width. */
.office-manager-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.office-manager-subhead {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 16px 0 4px;
  opacity: 0.85;
}

/* Portal leads inside the Messages inbox -------------------------------------
   A lead is not a conversation: it is someone trying to reach the agent who is
   not in the CRM yet. Styled to read as distinct from client threads without
   inventing a second inbox. */
/* Office manager panel -- CONTRAST FIX (measured, 2026-08-27).
   .intake-note and a bare <legend> inherit a cream token, rgb(236,229,213),
   which is correct for text on the app's DARK panels but renders on the LIGHT
   office-manager panel at 1.16-1.25:1 against its background -- effectively
   invisible, against the 4.5:1 WCAG AA needs for body text.
   SCOPED to these two containers on purpose: .intake-note is shared with dark
   panels elsewhere where the cream is right, so a global fix would break them.
   Colors chosen from tones already measured passing in this panel:
   #08464e (10.5:1 on white) for headings, #61716d (4.8:1) for body. */
#officeManagerPanel .office-manager-caps legend,
#officeManagerPanel .intake-note strong,
#officeManagerWorkspace .intake-note strong,
#officeManagerWorkspace .office-manager-subhead,
#officeManagerPanel .office-manager-subhead {
  color: #08464e;
  opacity: 1;
}

#officeManagerPanel .intake-note,
#officeManagerList .intake-note,
#officeManagerWorkspace .intake-note,
#officeManagerAgents .intake-note,
#officeManagerClients .intake-note {
  color: #61716d;
}

/* Office manager ROW text -- contrast fix, round 2 (2026-08-27).
   Missed in round 1 because the list was EMPTY when contrast was measured, so
   these elements did not exist yet. Measured at 1.25:1 on white, and worse in
   practice: the spans also carried opacity 0.82 on top of that.
   Same cause as round 1 -- inheriting the cream token meant for dark panels.
   Scoped, not global: .office-manager-row-* is only used by this feature, but
   the containers are named explicitly so a future dark-panel reuse is free to
   set its own colours. */
#officeManagerPanel .office-manager-row-main strong,
#officeManagerList .office-manager-row-main strong,
#officeManagerWorkspace .office-manager-row-main strong,
#officeManagerAgents .office-manager-row-main strong,
#officeManagerClients .office-manager-row-main strong {
  color: #0f2e31;
}

#officeManagerPanel .office-manager-row-main span,
#officeManagerList .office-manager-row-main span,
#officeManagerWorkspace .office-manager-row-main span,
#officeManagerAgents .office-manager-row-main span,
#officeManagerClients .office-manager-row-main span {
  color: #4a5a57;
  /* opacity reset deliberately: 0.82 compounded on an already-failing colour,
     and opacity is invisible to most contrast checkers. */
  opacity: 1;
}

#officeManagerPanel .office-manager-row-status,
#officeManagerList .office-manager-row-status,
#officeManagerWorkspace .office-manager-row-status,
#officeManagerAgents .office-manager-row-status,
#officeManagerClients .office-manager-row-status {
  color: #08464e;
  opacity: 1;
}

/* ==========================================================================
   Office manager workspace -- styled to match the email templates
   (meridian-notification-drain TBS tokens), so the two read as one product.
   Palette copied from there deliberately: card #16293a, line #2a4257,
   text #ece5d5, muted #8ba0b3, heading gold #e6cf8f. Georgia for prose,
   Inter stack for labels -- same split the emails use.

   ⚠ SCOPED TO .office-manager-home, NOT to a container id. The earlier fixes
   were scoped to #officeManagerPanel / #officeManagerWorkspace and silently
   stopped applying the moment this content moved into the dashboard body --
   which is exactly how the unreadable Messages text came back. This class
   wraps the content itself, so the styling travels with it.
   ========================================================================== */
.office-manager-home {
  --om-card: #16293a;
  --om-card-2: #1d3346;
  --om-line: #2a4257;
  --om-text: #ece5d5;
  --om-muted: #8ba0b3;
  --om-heading: #e6cf8f;
  --om-serif: Georgia, "Times New Roman", serif;
  --om-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--om-sans);
  color: var(--om-text);
}

/* Breathing room -- text was sitting hard against the panel edge. */
.office-manager-home .client-drilldown-head {
  padding: 20px 24px;
  border-radius: 12px 12px 0 0;
}

.office-manager-home .client-drilldown-head h2 {
  font-family: var(--om-serif);
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  color: var(--om-heading);
  margin: 0 0 6px;
}

.office-manager-home .client-drilldown-head span {
  font-family: var(--om-serif);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--om-text);
  opacity: 1;
}

.office-manager-home .office-manager-subhead {
  font-family: var(--om-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--om-heading);
  opacity: 1;
  margin: 26px 0 10px;
  padding: 0 24px;
}

.office-manager-home .office-manager-row {
  background: var(--om-card);
  border: 1px solid var(--om-line);
  border-radius: 10px;
  margin: 0 24px 10px;
  padding: 16px 20px;
}

.office-manager-home .office-manager-row-main strong {
  font-family: var(--om-serif);
  font-size: 1.06rem;
  color: var(--om-text);
}

.office-manager-home .office-manager-row-main span {
  font-family: var(--om-sans);
  font-size: 0.85rem;
  color: var(--om-muted);
  opacity: 1;
}

.office-manager-home .office-manager-row-status {
  color: var(--om-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* .intake-note ships a LIGHT background with cream text, which is unreadable
   here. Re-skinned as a dark card rather than recoloured piecemeal. */
.office-manager-home .intake-note {
  display: block;
  background: var(--om-card-2);
  border: 1px solid var(--om-line);
  border-radius: 10px;
  margin: 0 24px 12px;
  padding: 16px 20px;
  font-family: var(--om-serif);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--om-text);
  opacity: 1;
}

.office-manager-home .empty-state,
.office-manager-home .form-error {
  margin: 0 24px 12px;
  padding: 16px 20px;
  font-family: var(--om-serif);
  color: var(--om-text);
}

.office-manager-home > :last-child {
  padding-bottom: 20px;
}

/* Dismiss control for the beta-invite / guest-search banner. It had none, so
   the sign-out notice was permanent for every role. Explicit sizing because
   the global `input, select, textarea` sibling rules and .secondary-button
   sizing do not apply to this bare button. */
.beta-invite-dismiss {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.beta-invite-dismiss:hover,
.beta-invite-dismiss:focus-visible {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.55);
}

/* Staff <-> agent messaging. Same email-derived palette as the rest of the
   office-manager surface; .office-manager-thread is shared by BOTH sides
   (office manager view and the agent's "From your office" block). */
.office-manager-agent-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 4px;
}

.office-manager-agent-pick {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #2a4257;
  background: #16293a;
  color: #ece5d5;
  font-size: 0.86rem;
  cursor: pointer;
}

.office-manager-agent-pick.active,
.office-manager-agent-pick:hover {
  border-color: #c9a24c;
  color: #e6cf8f;
}

.office-manager-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 24px;
}

.office-manager-msg {
  background: #16293a;
  border: 1px solid #2a4257;
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 78%;
}

/* Own messages align right so a thread reads as a conversation. */
.office-manager-msg.mine {
  align-self: flex-end;
  background: #1d3346;
  border-color: rgba(197, 149, 72, 0.34);
}

.office-manager-msg-who {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e6cf8f;
  margin-bottom: 4px;
}

.office-manager-msg p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #ece5d5;
  overflow-wrap: anywhere;
}

.office-manager-send {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin: 0 24px 16px;
}

.office-manager-send textarea {
  flex: 1;
  min-height: 56px;
  resize: vertical;
}

/* Agent-side block. Sits above the client inbox and is visually distinct so an
   agent never confuses an internal staff note with a client message. */
.agent-staff-messages {
  background: #0e1c2b;
  border: 1px solid rgba(197, 149, 72, 0.34);
  border-radius: 12px;
  padding: 16px 0 4px;
  margin-bottom: 18px;
}

.agent-staff-messages-head {
  padding: 0 24px 4px;
}

.agent-staff-messages-head strong {
  display: block;
  font-size: 0.95rem;
  color: #e6cf8f;
}

.agent-staff-messages-head span {
  font-size: 0.85rem;
  color: #8ba0b3;
}

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

/* Broker attribution (2026-08-28). Sized deliberately, not decoratively:
   22 TAC 535.155 requires the broker's name to be at least half the size of the
   largest contact information shown for any sales agent, and to sit in a readily
   noticeable location. Do not shrink this below 14px or drop its contrast to
   make it recede -- that is the specific thing the rule exists to prevent. */
.broker-attribution {
  margin: 32px auto 0;
  padding: 18px 24px 26px;
  max-width: 1180px;
  border-top: 1px solid var(--line, #e2ded7);
  font-size: 14px;
  line-height: 1.5;
  color: #4a4f57;
  text-align: center;
}
.broker-attribution strong { color: #23262b; font-weight: 650; }
.broker-attribution-broker { display: block; margin-bottom: 6px; }
.broker-attribution-broker[hidden] { display: none; }
.broker-attribution-platform { display: block; color: #6a6f78; font-size: 13px; }

/* Empty-state text inside the Messages panes (2026-08-28, reported by Matt:
   "cant read the select a message").
   THE CAUSE, so nobody re-breaks it: there is NO base .empty-state rule in this
   file -- only a scoped .office-manager-home one. So .empty-state inherits its
   colour from whatever ancestor it lands in, and .message-inbox-thread sets
   background: var(--white). Pale inherited text on a white card is unreadable.
   Scoped rather than global on purpose: .empty-state is used in 20 places and
   some sit on dark panels, where a dark colour would break them instead.
   --muted on white is about 5:1, which clears AA for body text. Do not lighten
   it. */
.message-inbox-thread .empty-state,
.message-inbox-list .empty-state {
  color: var(--muted);
  opacity: 1;
}

/* neighboralerts_core -- shared neighborhood styles (contact panel + property
   panel). RESTORED 2026-08-29 after I deleted them.

   ⚠ WHAT WENT WRONG, because the shape of the mistake matters more than the
   rules: the redesign replaced the per-neighbor DRAFT UI with the promote box,
   so I deleted the whole pass-1 CSS block as "dead". Most of it was dead. These
   rules were not -- the rewritten markup still used them. Nothing failed:
   CSS has no missing-symbol error, every JS suite passed, both guards passed,
   and the UI shipped rendering with browser defaults. The typeahead even
   MEASURED as high-contrast afterwards, because with no rule at all it dropped
   its (wrong) white background and inherited the dark panel -- passing by
   accident, for the wrong reason.

   Deleting by RANGE is what did it: the range also swallowed two other
   sessions' feature CSS. Delete by named rule, not by span. The
   LAYOUT_CRITICAL assertion in neighborhood-promotion-regression.js exists to
   catch exactly this and is sabotage-verified. */

.neighborhood-summary {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.neighborhood-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  /* Light pill in BOTH themes, so it needs an explicit dark foreground rather
     than inheriting the theme's text colour. */
  background: var(--sand, #ece5da);
  color: var(--ink, #2b2b2b);
  vertical-align: middle;
}

.neighborhood-note {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.85;
}

.neighborhood-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.neighborhood-change-community {
  margin-top: 14px;
  font-size: 0.86rem;
}

.neighborhood-change-community summary {
  cursor: pointer;
  opacity: 0.8;
}

.crm-neighborhood-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  /* Inherit, don't set: these rows sit inside a themed panel. */
  color: inherit;
}

.crm-neighborhood-row:last-child {
  border-bottom: none;
}

.crm-neighborhood-row.withdrawn {
  opacity: 0.6;
}

.crm-neighborhood-meta {
  display: block;
  font-size: 0.79rem;
  opacity: 0.75;
  margin-top: 2px;
}

.crm-neighborhood-past {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--sv-line, rgba(197, 149, 72, 0.3));
}

.crm-neighborhood-source-label {
  display: block;
  margin: 12px 0 8px;
  font-size: 0.85rem;
  color: inherit;
}

.crm-neighborhood-source {
  width: 100%;
  margin-top: 4px;
}

.crm-neighborhood-community-box {
  position: relative;
}

.crm-neighborhood-community-results {
  border: 1px solid rgba(197, 149, 72, 0.3);
  border-radius: 8px;
  margin-top: 4px;
  overflow: hidden;
  /* ⚠ THEME-AWARE, NOT var(--white). This box first shipped with
     background: var(--white) while its text inherited the theme's cream
     foreground -- cream on white, measured 1.25:1, effectively invisible in
     Navy. Match .crm-tag-community-results, the sticker typeahead, which has
     used these tokens all along. */
  background: var(--sv-surface);
  color: var(--sv-text);
}

.crm-neighborhood-community-results.hidden {
  display: none;
}

/* neighboralerts_core pass 2 -- the "promote this in the neighborhood" box.
   NOTE the explicit sizing on the checkbox below: styles.css has a global
   `input, select, textarea { width: 100%; padding: 12px 13px; ... }` rule that
   hits checkboxes too, rendering them as full-width padded white boxes with the
   glyph floating mid-row. Every checkbox here needs its own override. */
.neighborhood-promo-box {
  border: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  border-radius: 12px;
  padding: 16px;
  margin: 10px 0 4px;
  /* Theme-aware for the same reason as the typeahead results above. */
  background: var(--sv-card, var(--sv-surface));
  color: var(--sv-text);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
.neighborhood-promo-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.neighborhood-promo-head h4 {
  margin: 2px 0 0;
  font-size: 1.08rem;
}
.neighborhood-promo-blurb {
  margin: 6px 0 0;
  font-size: 0.86rem;
  opacity: 0.8;
  line-height: 1.45;
}
.neighborhood-promo-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  color: inherit;
  opacity: 0.6;
}
.neighborhood-promo-close:hover { opacity: 1; }
.neighborhood-promo-summary {
  margin: 12px 0 10px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.neighborhood-promo-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.neighborhood-promo-count {
  font-size: 0.8rem;
  opacity: 0.72;
}
.neighborhood-promo-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line, #dcd5c9);
  border-radius: 8px;
  padding: 4px 10px;
}
.neighborhood-promo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  cursor: pointer;
  /* color: inherit IS LOAD-BEARING. These rows are label elements, and the
     global bare-element label rule sets color: var(--ink) -- a LIGHT-theme
     token that does NOT flip for Navy. Without this, the recipient name and
     email rendered dark-on-dark inside the navy card and measured 1.11:1.
     Inheriting from .neighborhood-promo-box follows whatever the active theme
     set instead. Caught by measuring contrast in the running page after
     switching themes: it looked perfect in Cream. */
  color: inherit;
}
.neighborhood-promo-row:last-child { border-bottom: none; }
.neighborhood-promo-row.sent { opacity: 0.55; cursor: default; }
/* Overrides the global full-width input rule -- see the note at the top. */
.neighborhood-promo-row input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
.neighborhood-promo-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.neighborhood-promo-email {
  font-size: 0.8rem;
  /* Muted via opacity on the INHERITED colour, never a fixed token -- same
     theme-flip reason as the row above. */
  color: inherit;
  opacity: 0.72;
  margin-left: auto;
}
.neighborhood-promo-flag {
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sand, #ece5da);
  /* Explicit dark foreground: the sand background is light in BOTH themes, so
     inheriting the theme's cream text made this pill unreadable in Navy. */
  color: var(--ink, #2b2b2b);
}
.neighborhood-promo-sent {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--line, #dcd5c9);
}
.neighborhood-promo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.neighborhood-promo-fineprint {
  margin: 10px 0 0;
  font-size: 0.76rem;
  opacity: 0.68;
  line-height: 1.45;
}
.neighborhood-note.inline {
  display: inline;
  margin-left: 8px;
  font-size: 0.83rem;
}

/* ===== Agent Campaigns (feat_agent_campaigns, 2026-08-29) =================
   ⚠ Every checkbox below carries explicit width/min-width/height/padding.
   styles.css has a GLOBAL grouped rule -- grep '^input,' to find it, NOT
   'input[type="checkbox"]' -- that sets width:100% and padding on inputs,
   which hits checkboxes too and renders them as full-width white boxes with
   the glyph floating mid-row. Removing these overrides breaks the layout in a
   way that looks like a spacing bug rather than a selector problem.
   ========================================================================= */
.campaigns-panel { display: flex; flex-direction: column; gap: 18px; }
.campaigns-head { display: flex; align-items: center; gap: 14px; }
.campaigns-section { display: flex; flex-direction: column; gap: 12px; }
/* ⚠ NOT var(--muted): that token is a LIGHT-theme value (#61716d) and does
   not flip for the Navy theme, so on the dark campaign cards it measured
   2.9:1 -- below the 4.5:1 minimum for body text. Deriving from the parent
   text colour with an alpha instead is theme-proof: it follows whatever the
   active theme set, and measures ~7:1 in Navy and ~6:1 in Cream. Verified by
   measuring contrast in the live page, not by eye. */
.campaign-hint { color: #a9b8c4; font-size: 0.86rem; margin: 0; }
.campaign-list { display: flex; flex-direction: column; gap: 10px; }
.campaign-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.campaign-row--open { border-color: var(--brass); }
.campaign-row--starter { flex-direction: row; align-items: center; justify-content: space-between; }
.campaign-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.campaign-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campaign-row-meta { color: #a9b8c4; font-size: 0.82rem; }
.campaign-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.campaign-badge { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.campaign-badge--flow { border-color: var(--brass); color: var(--brass); }
.campaign-steps { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.campaign-step-row { display: flex; align-items: flex-start; gap: 10px; }
.campaign-step-index { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: 0.76rem; font-weight: 700; }
.campaign-step-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campaign-add-form { display: flex; gap: 8px; align-items: center; }
.campaign-add-input { flex: 1 1 auto; }
.campaign-assign-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.campaign-assign-select { flex: 1 1 200px; min-width: 160px; }
.campaign-flow-block { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.campaign-flow-toggle { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; cursor: pointer; }
.campaign-flow-toggle input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; padding: 0; margin: 0; flex: 0 0 auto; }
.campaign-progress-list { display: flex; flex-direction: column; gap: 10px; }
.campaign-progress-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.campaign-progress-main { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campaign-progress-state { flex: 1 1 180px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campaign-progress-bar { height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.campaign-progress-fill { height: 100%; background: var(--brass); }
.campaign-agent-section { display: flex; flex-direction: column; gap: 12px; }
.campaign-agent-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.campaign-agent-card--paused { opacity: 0.65; }
.campaign-agent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.campaign-agent-head > div { display: flex; flex-direction: column; gap: 3px; }
.campaign-agent-steps { display: flex; flex-direction: column; gap: 7px; }
.campaign-agent-step { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.campaign-agent-step--locked { opacity: 0.55; cursor: default; }
.campaign-agent-step input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; padding: 0; margin: 2px 0 0; flex: 0 0 auto; }
.campaign-agent-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campaign-agent-step-title { font-weight: 600; }
.campaign-shared-note { margin: 0; font-size: 0.83rem; color: #b3c1cc; border-top: 1px dashed var(--line); padding-top: 8px; }

/* ==========================================================================
   Client important dates -- birthdays, anniversaries, homiversaries.
   Entry widget added 2026-08-29 (tracker rel_calendar_dates_unused).

   ⚠ RESTORED 2026-08-29 AFTER BEING CLOBBERED. This block was written and
   deployed, then vanished when a concurrent session rewrote styles.css from an
   older base -- the file went 333,207 -> 321,868 bytes and every rule below was
   lost while the app.js that depends on them survived. The visible result was a
   widget rendering with browser defaults: disc bullets, a 40px list indent, and
   the row as display:list-item instead of a flex row. Nothing errored and no
   test failed, because CSS has no equivalent of a missing-symbol error.
   IF YOU ARE ABOUT TO REWRITE THIS FILE: append or splice, never regenerate
   from a snapshot -- three sessions have been editing it the same day.

   NOTE: no checkboxes or radios are used here on purpose. styles.css has a
   global `input, select, textarea { width: 100%; padding: 12px 13px; ... }`
   that also hits those two and renders them as full-width padded white boxes.
   Every selector below targets an explicit class rather than a bare descendant
   element, so nothing here can steal width from nested spans the way
   `.todo-row span { flex: 1 }` once did.
   ========================================================================== */
.crm-important-dates-panel .important-date-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-important-dates-panel .important-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, rgba(128, 128, 128, 0.22));
  border-radius: 8px;
}

.crm-important-dates-panel .important-date-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.crm-important-dates-panel .important-date-origin {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.16);
  font-size: 0.72rem;
  opacity: 0.8;
}

.crm-important-dates-panel .important-date-row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* EDIT AND DELETE ARE PEERS, AND BOTH ARE QUIET (Matt, 2026-08-29: "make the
   edit button smaller and less obtuse"). Edit was reusing .secondary-button
   .small -- a 64x38px filled white button that dominated the row and competed
   with the date itself for attention. These are maintenance affordances on a
   row whose CONTENT is the point, so they now match the delete glyph's weight:
   same size, same muted treatment, colour inherited from the row so both
   themes work without a per-theme rule. */
.crm-important-dates-panel .important-date-edit,
.crm-important-dates-panel .important-date-delete {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  border-radius: 6px;
  line-height: 1;
  padding: 4px 6px;
  min-width: 0;
  width: auto;
  height: auto;
}

.crm-important-dates-panel .important-date-edit {
  font-size: 0.76rem;
  font-weight: 600;
}

.crm-important-dates-panel .important-date-delete {
  font-size: 1.05rem;
}

.crm-important-dates-panel .important-date-edit:hover,
.crm-important-dates-panel .important-date-delete:hover,
.crm-important-dates-panel .important-date-edit:focus-visible,
.crm-important-dates-panel .important-date-delete:focus-visible {
  opacity: 1;
  background: rgba(128, 128, 128, 0.18);
}

/* THE FORM MUST STACK. Found by driving the real UI 2026-08-29, and no unit
   test could have caught it: this panel lives in .crm-profile-left, a ~265px
   column, and the form carries .crm-followup-grid from the touchpoint pattern
   it was modelled on. That grid laid "What is it?" beside Month/Day and
   collapsed the month select to about two characters wide, with the buttons
   overlapping the hint text. Overriding display here rather than dropping the
   shared class keeps the panel consistent with its siblings everywhere else. */
.crm-important-dates-panel .important-date-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-important-dates-panel .important-date-form label {
  display: block;
  min-width: 0;
}

/* Month and Day share a row; Year takes its own. Two columns, not three --
   at ~265px a third column is unusable.
   ⚠ THE ORIGINAL BUG WAS A VIEWPORT MEDIA QUERY: `@media (max-width: 520px)`,
   which never fires here, because the VIEWPORT is 1707px while the CONTAINER
   is 265px. Sizing a component to the viewport is wrong whenever the component
   lives in a column. The grid below is intrinsically narrow instead, so it
   cannot be wrong at any viewport width. */
.crm-important-dates-panel .important-date-when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.crm-important-dates-panel .important-date-when label:last-child {
  grid-column: 1 / -1;
}

.crm-important-dates-panel .important-date-when input,
.crm-important-dates-panel .important-date-when select {
  width: 100%;
  min-width: 0;
}

.crm-important-dates-panel .important-date-hint {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.7;
}

.crm-important-dates-panel .important-date-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Cream theme: the defaults above are the NAVY values (this app defaults dark
   and overrides for cream). ⚠ Do NOT collapse these into var(--muted) alone --
   that token is #61716d, which is right on cream but measured 2.9:1 on the dark
   campaign cards. And do NOT use color-mix(currentColor): it did not recompute
   on a live theme switch and left cream-coloured text on a white card at
   1.18:1. Both were caught by MEASURING contrast in the running page. */
[data-theme="cream"] .campaign-hint,
[data-theme="cream"] .campaign-row-meta { color: var(--muted); }
[data-theme="cream"] .campaign-shared-note { color: var(--muted); }

/* ⚠ CREAM-THEME LEGIBILITY FIX (2026-08-29, found by measuring not by eye).
   .office-manager-subhead is brass #e6cf8f, which is correct on the Navy
   card but sits on a WHITE .crm-main-panel in Cream: 1.53:1 at 12.5px, i.e.
   the section labels ONBOARDING / AGENTS / CLIENTS were effectively invisible.
   This is the third time cream-on-white has bitten this project -- see the
   CLAUDE.md note about fixes scoped to container ids that stop applying when
   content moves. Scoped to the THEME here, not to a container, so it keeps
   applying wherever the label is rendered. */
[data-theme="cream"] .office-manager-subhead { color: #6f5a12; }

/* NTREIS Rules 16.07 (deemed reliable) + 17.10 (no reproduction/redistribution).
   Required wherever NTREIS data is displayed to consumers. Rendered by
   ntreisConsumerNotice() in app.js so both buyer copies carry it identically.
   Deliberately NOT subject to the 16.08 typeface floor -- that rule governs the
   brokerage/agent identification, not this notice. */
.ntreis-consumer-notice {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
  opacity: 0.9;
}

/* ── legalpages 2026-08-31 ─────────────────────────────────────────────
   Tables inside the published legal pages (privacy / terms / tracking
   disclosure), which are generated from Documentation/legal-drafts/*.md
   by md2legal.mjs. Added at the same time as those pages.

   ⚠ ADDED BECAUSE CSS FAILS SILENTLY. The generator emits .policy-table
   markup; with no rule here the tables would still "work" -- they would
   render with browser defaults, no check would fail, and nothing would
   error. That is the documented trap in CLAUDE.md, so these class names
   are also asserted by the legal-pages check rather than assumed.

   The wrapper scrolls on its own so a wide table never makes the whole
   page scroll sideways on a phone. */
.policy-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.policy-table th,
.policy-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.policy-table th {
  font-weight: 900;
  color: var(--lake-dark);
  border-bottom-width: 2px;
  white-space: nowrap;
}

.policy-table tr:last-child td {
  border-bottom: none;
}

.policy-page blockquote {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--lake-dark);
  background: var(--sand, #f6f4ef);
}

.policy-page h3 {
  margin: 6px 0 0;
  font-size: 1.02rem;
}

.policy-page code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sand, #f6f4ef);
  font-size: 0.92em;
}

/* Brokerage lead routing status line (idea_leadrouting, 2026-08-31).
   .agent-tool-status sets color: var(--lake-dark), which is right on the LIGHT
   Agent Setup panel it was written for. This panel lives in the dashboard,
   where .crm-record-panel is repainted dark via --sv-surface -- and because
   .agent-tool-status sets colour on the element ITSELF, it beats the colour the
   dark panel sets on its ancestor. The result was dark teal on dark navy:
   legible enough to pass every automated check, unreadable to a human.
   Caught by looking at it, not by testing. Scoped to this one status line so
   the Agent Setup panel, where the original colour is correct, is untouched. */
#dashboardPanel .agent-crm-layout .broker-lead-routing-status {
  color: var(--sv-text);
}


/* ===== Agent Campaigns: contrast + dashboard card (2026-09-01) ============
   ⚠ FIXED AFTER MATT PHOTOGRAPHED IT UNREADABLE, on BOTH sides. The earlier
   pass set colours on .campaign-row-meta / .campaign-hint only and left every
   TITLE inheriting whatever the surrounding panel gave it -- which on the navy
   cards is a near-black ink. So the flow-toggle labels (broker) and the step
   titles (agent) rendered dark-on-navy.
   The measuring pass that "cleared" this feature only sampled the two classes
   it had already fixed, and the agent surface was never opened in a browser at
   all. Hence: set an explicit colour on EVERY text element this feature owns,
   navy by default and overridden for cream, rather than trusting inheritance.
   ========================================================================= */
.campaigns-panel h2,
.campaigns-panel h3,
.campaign-agent-section h3,
.campaign-row-main strong,
.campaign-step-body strong,
.campaign-progress-main strong,
.campaign-agent-head strong,
.campaign-agent-step-title,
.campaign-flow-toggle,
.campaign-flow-toggle span,
/* ⚠ .campaign-top-row .todo-task-text WAS IN THIS GROUP AND WAS REMOVED
   (2026-09-02, Matt: "the Campaign section is supposed to be readable").
   #eef2f5 is near-white, correct for the h3 sitting on the dark panel, and
   invisible on a campaign ROW -- because .todo-row paints itself
   `background: #ffffff`. Near-white text on a white row. The cream-theme
   override two rules down set it back to var(--ink), so the bug existed ONLY
   in navy, which is why it survived: whoever checked it in cream saw correct
   text. Removing the selector lets `.todo-row .todo-task-text { color:
   var(--ink) }` apply, the same rule that makes every ordinary to-do row
   readable on the same white background.
   ⚠ THE GROUPED SELECTOR IS WHY THIS NEEDS A COMMENT: deleting the whole rule
   to "fix the contrast" would also have un-styled the panel heading. Remove
   the one selector, never the block. */
.campaign-top-panel h3 { color: #eef2f5; }

[data-theme="cream"] .campaigns-panel h2,
[data-theme="cream"] .campaigns-panel h3,
[data-theme="cream"] .campaign-agent-section h3,
[data-theme="cream"] .campaign-row-main strong,
[data-theme="cream"] .campaign-step-body strong,
[data-theme="cream"] .campaign-progress-main strong,
[data-theme="cream"] .campaign-agent-head strong,
[data-theme="cream"] .campaign-agent-step-title,
[data-theme="cream"] .campaign-flow-toggle,
[data-theme="cream"] .campaign-flow-toggle span,
/* Row-text selector removed here too -- it is now redundant rather than wrong,
   since the base .todo-row rule already resolves to var(--ink) in both themes.
   Left the h3 override, which is still doing real work. */
[data-theme="cream"] .campaign-top-panel h3 { color: var(--ink); }

/* The dashboard card. Sits under the To-Do List as a sibling, never inside it.
   ⚠ THE PLACEMENT NEEDED THIS RULE, not just DOM order (fixed 2026-09-02,
   Matt: "supposed to be ... under the To-Do List not under the activity
   section"). renderActivityDashboard already emitted table -> to-do ->
   campaigns in the right order, but .agent-activity-home is a TWO-COLUMN grid:
   the table takes column 1, the to-do panel column 2, and the third child
   auto-placed back into column 1 -- landing under the activity table, which is
   exactly where it should not be. Pinning it to column 2 puts it under the
   to-do panel where the comment above always said it belonged. */
/* ⚠ SUPERSEDED: this was `.campaign-top-panel { grid-column: 2; }`, which put
   the card in the right COLUMN but grid row 2 -- and a grid row spans both
   columns, so its top edge was the bottom of the tall activity table. The card
   sat correctly to the right and far too low, with a large empty gap under the
   To-Do List (Matt, 2026-09-02: "Why the huge gap between these blocks?").
   Both right-hand cards are now ONE grid child (.agent-activity-side) holding a
   stack, so they are no longer bound to shared grid rows. */
.agent-activity-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.campaign-top-panel .todo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.campaign-top-panel .todo-panel-head p { margin: 2px 0 0; font-size: 0.85rem; color: #a9b8c4; }
[data-theme="cream"] .campaign-top-panel .todo-panel-head p { color: var(--muted); }
.campaign-top-row { display: flex; align-items: center; gap: 10px; }
/* The global 'input, select, textarea' rule (grep ^input,) makes checkboxes
   full-width white boxes -- these four properties are load-bearing. */
.campaign-top-row input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; padding: 0; margin: 0; flex: 0 0 auto; }
/* Same white-row problem as the task text: #a9b8c4 is a light slate chosen for
   a dark surface, and these tags sit on .todo-row's white background. Darkened
   to a slate that clears 4.5:1 on white, which small 0.74rem text needs. */
.campaign-top-tag { margin-left: auto; font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: #4a5a66; white-space: nowrap; }
[data-theme="cream"] .campaign-top-tag { color: var(--muted); }

/* ⚠ SIDEBAR SCROLL. Breakpoint is 1120px to MATCH the drawer, not a guess --
   the sidebar becomes an off-canvas drawer at max-width:1120px (chosen in
   2026-08-04 so portrait iPads, 744-1024px, cannot fall between the tablet
   strip and drawer zones). An 860px rule would have left every tablet width
   still clipping. Adding the 18th nav button (Agent Campaigns) made the nav
   taller than the mobile drawer, and the mobile block did not re-assert the
   scroll properties the desktop rule sets -- so the list clipped with no way
   to reach the last items, and the final one sat under Sophie's chat bubble.
   Re-asserted here, with a deeper reserve than desktop because the drawer has
   its own 16px padding on top of it. */
@media (max-width: 1120px) {
  .agent-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 104px;
  }
}
/* ---------------------------------------------------------------------------
   Site-wide legal row in the footer (added 2026-09-01, tracker s4a).
   Markup lives in index.html inside <footer class="broker-attribution">.

   These three classes are LEGALLY LOAD-BEARING, not decoration:
     .site-legal-links      the only always-present route to the Privacy Policy,
                            Terms, and tracking disclosure for a visitor who
                            never signs up. Every published policy assumes a
                            reader can reach it.
     .site-legal-eho        the Equal Housing Opportunity statement.
     .site-legal-copyright  entity attribution.

   Do NOT shrink .site-legal-eho below 14px or reduce its contrast to make it
   recede -- same reasoning as the note on .broker-attribution above, and the
   same reason that rule exists. An equal-housing notice nobody can read is the
   failure mode, and CSS has no missing-symbol error to catch it.
   --------------------------------------------------------------------------- */
.site-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 0;
}
.site-legal-links a {
  color: #4a4f57;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-legal-links a:hover { color: #23262b; }
.site-legal-links a:focus-visible {
  outline: 2px solid #23262b;
  outline-offset: 2px;
  border-radius: 2px;
}
.site-legal-eho {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #4a4f57;
}
.site-legal-eho strong { color: #23262b; font-weight: 650; }
.site-legal-copyright {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #6a6f78;
}


/* ---------------------------------------------------------------------------
   Invite-acceptance disclosure prose (added 2026-09-01, tracker br4).
   Markup: <div class="policy-body"> inside #inviteDisclosurePanel in index.html.

   THIS RULE IS LEGALLY LOAD-BEARING, not decoration. .policy-body had NO rule
   at all until now, so the disclosure inherited the Navy theme's light text
   (rgb(236,229,213)) while .agent-tools-panel forces background:#ffffff under
   it -- 1.25:1 contrast, measured on both staging and production. WCAG AA
   wants 4.5:1. The Cream theme masked it completely (16.51:1), which is why a
   casual look confirmed it as fine.

   This is the one document whose whole purpose is to be READ, and whose output
   is an evidentiary record that a named person read it. Do not remove this
   rule or lower its contrast. CSS has no missing-symbol error to catch it.
   --------------------------------------------------------------------------- */
/* Horizontal padding matches .client-drilldown-head above it (14px), so the
   prose lines up under the panel heading instead of running to the panel
   edge. The class had NO rule at all before 2026-09-02 -- it got a colour that
   day and still no padding, so the disclosure text sat flush against both
   edges. Matt, looking at it: "can we indent the words a tad so they are not
   eating the edge like that". Vertical spacing is left to the paragraph
   margins. Applies to BOTH consent panels that use this class -- the agent
   invite disclosure and the broker subscription-terms step. */
.policy-body { color: var(--ink); padding: 0 14px; }

/* Decluttered consent panel, 2026-09-02. Matt: the eight-paragraph version was
   a wall of text. Reduced to the three terms an agent could NOT infer from a
   linked document -- what the broker sees, that it reaches back before today
   plus reassignment, and that billing decides what you keep on departure
   (including the no-billing-record default). Everything else moved behind the
   links. Scoped to .policy-body so nothing else on the page is affected. */
.policy-points {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.policy-points li { padding-left: 2px; }
.policy-links {
  margin: 12px 0 14px;
  font-size: 0.9rem;
}
.policy-links span { color: var(--line, #d8d3c6); margin: 0 4px; }
.policy-body strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   AGENT / BROKER SIGN-IN — brand pass, 2026-09-02
   Matt: "We can make this look better than this. Clean the look of it so it's
   more professional. Get our fonts right."

   The card was teal-gradient-on-white with a cream notice box, which matched
   nothing else the person had just seen: the invitation email that brought them
   here is navy, gold and Georgia. This aligns the first authenticated screen
   with that, using the EXISTING --sv-* tokens (the same navy/gold palette the
   email's brandShell uses) rather than inventing new colours.

   ⚠ SCOPED ENTIRELY UNDER .agent-signin-only. That class is toggled by
   setAgentSettingsPanelMode(), so Agent Setup -- which shares this panel -- is
   untouched. Do not widen these selectors to .agent-tools-panel.
   --------------------------------------------------------------------------- */
/* ⚠ ID SELECTORS, deliberately. #agentSettingsPanel sets background: var(--pearl)
   and #agentSettingsPanel > form sets background: var(--white), both ID-scoped,
   which outrank any class rule. A class-only override left the CARD light while
   the text turned cream -- i.e. invisible labels, which is exactly what shipped
   and what Matt could not read. Matching the ID is the only way to win here
   without !important. */
#agentSettingsPanel.agent-signin-only {
  background: var(--sv-surface);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(8, 16, 26, 0.34);
}

#agentSettingsPanel.agent-signin-only > form {
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  box-shadow: none;
}

.agent-signin-only #agentSettingsPanelTitle {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--sv-heading);
}

.agent-signin-only #agentSettingsPanelSubtitle,
.agent-signin-only .client-drilldown-head span {
  color: var(--sv-text-muted);
}

/* The explanatory notice above the fields -- .form-section-title is the cream
   box in the screenshot, holding a <strong> heading and a <span> of body copy. */
.agent-signin-only .form-section-title {
  background: var(--sv-surface-2);
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  padding: 12px 14px;
}

.agent-signin-only .form-section-title strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--sv-heading);
}

.agent-signin-only .form-section-title span {
  color: var(--sv-text-muted);
}

.agent-signin-only label {
  color: var(--sv-text);
  font-weight: 600;
}

/* Inputs: dark field, light text. Kept to the two real text inputs rather than
   a bare `input` selector -- see the global input rule in this file, which also
   catches checkboxes and radios. */
.agent-signin-only input[type="email"],
.agent-signin-only input[type="text"],
.agent-signin-only input[type="password"] {
  background: var(--sv-page);
  border: 1px solid var(--sv-line);
  color: var(--sv-text);
}

.agent-signin-only input[type="email"]::placeholder,
.agent-signin-only input[type="text"]::placeholder,
.agent-signin-only input[type="password"]::placeholder {
  color: var(--sv-text-muted);
}

.agent-signin-only input[type="email"]:focus,
.agent-signin-only input[type="text"]:focus,
.agent-signin-only input[type="password"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 149, 72, 0.22);
}

.agent-signin-only .primary-button {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--sv-page);
  font-weight: 700;
}

.agent-signin-only .primary-button:hover {
  background: var(--champagne);
  border-color: var(--champagne);
}

.agent-signin-only .secondary-button {
  background: transparent;
  border: 1px solid var(--sv-line);
  color: var(--sv-text);
}

.agent-signin-only .secondary-button:hover {
  border-color: var(--gold);
  color: var(--sv-heading);
}

/* Status line under the form (sign-in result, pending-state explanations). */
.agent-signin-only .agent-tool-status {
  color: var(--sv-text);
}

/* ---------------------------------------------------------------------------
   SET-PASSWORD / CONSENT GATE — BLOCKING OVERLAY, 2026-09-02
   Matt: "when I clicked the accept invite it took me straight to the dashboard.
   no signing up, no signing in, no license check..."

   The gate WAS firing -- verified by following a real invite link and reading
   the redirect, which carries type=invite and the access token exactly as the
   code expects. The problem was placement: the invite branch navigates to the
   dashboard panel and THEN reveals this section further down the page, so on a
   tall dashboard the mandatory step sits below the fold and reads as "it just
   logged me straight in".

   A step that cannot be skipped must not be scrollable past. This makes it a
   real modal over a dimmed dashboard.
   --------------------------------------------------------------------------- */
#setPasswordGatePanel:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(16px, 5vh, 56px) 16px;
  background: rgba(8, 16, 26, 0.72);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* The panel's own children become the card, since the section itself is now the
   backdrop. Wrapping them in a real element would mean touching the markup that
   Agent Setup shares. */
#setPasswordGatePanel:not(.hidden) > * {
  width: min(560px, 100%);
}

#setPasswordGatePanel:not(.hidden) > .client-drilldown-head {
  background: var(--sv-surface);
  border: 1px solid var(--gold-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 18px 20px;
  margin: 0;
}

#setPasswordGatePanel:not(.hidden) > .client-drilldown-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--sv-heading);
}

#setPasswordGatePanel:not(.hidden) > .client-drilldown-head span {
  color: var(--sv-text-muted);
}

#setPasswordGatePanel:not(.hidden) > form {
  background: var(--sv-surface);
  border: 1px solid var(--gold-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 18px 20px 20px;
  margin: 0;
  box-shadow: 0 30px 80px rgba(4, 10, 18, 0.5);
}

#setPasswordGatePanel:not(.hidden) label {
  color: var(--sv-text);
  font-weight: 600;
}

#setPasswordGatePanel:not(.hidden) input[type="text"],
#setPasswordGatePanel:not(.hidden) input[type="password"] {
  background: var(--sv-page);
  border: 1px solid var(--sv-line);
  color: var(--sv-text);
}

#setPasswordGatePanel:not(.hidden) input[type="text"]::placeholder,
#setPasswordGatePanel:not(.hidden) input[type="password"]::placeholder {
  color: var(--sv-text-muted);
}

#setPasswordGatePanel:not(.hidden) .claim-license-hint {
  color: var(--sv-text-muted);
}

/* Consent rows read on the dark card, and the link has to be visible on it. */
#setPasswordGatePanel:not(.hidden) .consent-check {
  background: var(--sv-surface-2);
  border-color: var(--sv-line);
}

#setPasswordGatePanel:not(.hidden) .consent-check span {
  color: var(--sv-text);
}

#setPasswordGatePanel:not(.hidden) .consent-check a {
  color: var(--sv-heading);
}

#setPasswordGatePanel:not(.hidden) .primary-button {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--sv-page);
  font-weight: 700;
}

#setPasswordGatePanel:not(.hidden) .agent-tool-status {
  color: var(--sv-text);
}

/* Workspace access notice (mls_access_ends_on_departure, 2026-09-02).
   Appended as NAMED rules -- never delete this block by line range or
   marker-to-marker span; several sessions append to this file. */
/* ⚠ margin-left MATCHES .agent-shell's padding-left. This banner sits OUTSIDE
   .agent-shell deliberately (see the markup comment) so it reads first whatever
   the sidebar is showing -- which also meant it never got the shell's left
   padding and rendered underneath the fixed sidebar rail. Reported by Matt
   2026-09-08. The .sidebar-pinned variant below is toggled from the same line
   that toggles it on the shell, so the two offsets cannot drift apart. */
.workspace-access-notice {
  margin: 0 clamp(16px, 3vw, 32px) 18px 76px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.10);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Licence expiry banner (agent_license_expiry_unchecked, 2026-09-02).
   Appended as NAMED rules -- never delete this block by line range. */
.license-expiry-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
  font-size: 0.95rem;
  line-height: 1.5;
}
.license-expiry-banner span { flex: 1 1 320px; }
/* The global `input, select, textarea` rule does not reach buttons, but the
   sizing is explicit anyway so the dismiss control cannot stretch. */
.license-expiry-banner .license-banner-dismiss {
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #b91c1c;
  background: transparent;
  color: #7f1d1d;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Consent capture on the bulk add-to-list path (2026-09-04).
   ⚠ The select gets its sizing from the GLOBAL `input, select, textarea` rule,
   which is what we want here -- these are full-width form controls. The note
   and subhead below are the parts that need explicit colour, because the
   global `label { color: var(--ink) }` token is a LIGHT-theme colour and this
   panel renders on the dark surface. */
.bulk-apply-consent-note {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--sv-muted, #8fa3b8);
}
.neighborhood-promo-subhead {
  margin: 10px 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-muted, #8fa3b8);
}
.neighborhood-promo-subnote {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--sv-muted, #8fa3b8);
}

/* ---------------------------------------------------------------------------
   Representation agreement panel (legal_trela_client_ownership), 2026-09-04.
   Appended by NAMED RULE. Never delete these by line range or marker-to-marker
   span -- three sessions append to this file and a span takes whatever landed
   inside it chronologically (see the 2026-08-29 clobber).
   The layout-critical class names here are asserted by
   representation-panel-regression.js, because CSS has no missing-symbol error
   and a deleted rule just renders as browser defaults.
--------------------------------------------------------------------------- */
.crm-representation-panel .representation-status {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  border-left: 3px solid var(--sv-muted, #8fa3b8);
  background: rgba(143, 163, 184, 0.12);
}

.crm-representation-panel .representation-status-active {
  border-left-color: #2e7d5b;
  background: rgba(46, 125, 91, 0.12);
}

.crm-representation-panel .representation-status-expired {
  border-left-color: #a8681f;
  background: rgba(168, 104, 31, 0.12);
}

/* Unknown is styled as NEUTRAL on purpose, not as a warning. It is a missing
   fact, not a problem with the client, and colouring it red would push agents
   to record a guess. */
.crm-representation-panel .representation-status-unknown {
  border-left-color: var(--sv-muted, #8fa3b8);
}

/* Interim cover: this agent holds the client only until the agent the buyer
   NAMED confirms. Styled as a genuine caution -- unlike .representation-status-
   unknown above, which is neutral on purpose because it is a missing fact.
   This one IS a constraint on the agent's conduct (do not pitch an
   already-represented buyer, NTREIS 22.04), so it should read as one. */
.crm-representation-panel .representation-interim-notice {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  border-left: 3px solid #a8681f;
  background: rgba(168, 104, 31, 0.16);
  color: var(--ink);
}

.crm-representation-panel .representation-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--sv-muted, #8fa3b8);
}

.crm-representation-panel .representation-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   HEADER BRANDING, THIRD LINE (idea_header_branding_text, 2026-09-05).
   Line 2 (#headerAgentLine) keeps the existing bold small-caps treatment and
   names WHOEVER PAYS FOR THE SEAT. Line 3 (#headerAgentLine2) is the same
   size in regular weight and names the other party. Same size on purpose:
   22 TAC 535.155(a)(2) wants the broker's name at least half the size of the
   agent's, and NTREIS Rule 17.19 wants it "readily visible" -- so the
   brokerage line is NEVER shrunk or lightened, whichever line it lands on.
   line-height keeps three lines inside the 42px brand mark's height.
   --------------------------------------------------------------------------- */
.brand small {
  line-height: 1.25;
}

.brand small.brand-line-secondary {
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Agent Setup: MLS agent ID nudge (2026-09-05). Shown only while the field is
   empty. Appended by NAMED RULE -- never delete these by line range or
   marker-to-marker span, three sessions append to this file.
   Asserted by mls-id-nudge-regression.js.
--------------------------------------------------------------------------- */
.agent-mls-listings-block .agent-mls-id-nudge {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  border-left: 3px solid #a8681f;
  background: rgba(168, 104, 31, 0.12);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Agent referrals (2026-09-05): the buyer's "who is your agent" fields, and the
   agent's invite-your-broker block. Appended by NAMED RULE -- never delete by
   line range, three sessions append to this file.
   Asserted by agent-referral-regression.js.
--------------------------------------------------------------------------- */
.ask-agent-dialog .ask-agent-outside-agent {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(143, 163, 184, 0.12);
  border-left: 3px solid var(--sv-muted, #8fa3b8);
}

.ask-agent-dialog .ask-agent-representation {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
}

/* The "your agent isn't here" warning inside .ask-agent-outside-agent.
   margin:0 on purpose -- the parent is a grid with gap:8px, so a margin here
   would double the spacing. Gold rather than the parent's muted blue so it
   reads as a caution and not as another form hint. */
.ask-agent-dialog .ask-agent-outside-warning {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(201, 162, 76, 0.14);
  border-left: 3px solid var(--gold, #c9a24c);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
}

.agent-broker-invite-block {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}


/* ---------------------------------------------------------------------------
   Pending client confirmations (2026-09-05). Appended by NAMED RULE.
   Asserted by pending-referrals-regression.js.
--------------------------------------------------------------------------- */
.pending-referrals-panel .pending-referral-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pending-referrals-panel .pending-referral-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(46, 125, 91, 0.10);
  border-left: 3px solid #2e7d5b;
}

.pending-referrals-panel .pending-referral-who {
  display: grid;
  gap: 2px;
}

.pending-referrals-panel .pending-referral-clock {
  color: var(--sv-muted, #8fa3b8);
}

.pending-referrals-panel .pending-referral-clock.expired {
  color: #a8681f;
}


/* review-and-send modal (neighboralerts_autosend, 2026-09-07).
   The promotion flow moved out of the property panel and into a pop-up, so the
   invitation is impossible to miss after a stage move.

   ⚠ EXPLICIT SIZING ON EVERY input/textarea BELOW. styles.css has a global
   `input, select, textarea { width: 100%; padding: 12px 13px; background:
   var(--white) }` rule; the background in particular is a LIGHT-theme token
   that does not flip, which is exactly what made the community typeahead
   cream-on-white at 1.25:1 in the Navy theme. Use the theme tokens. */
#neighborhoodPromoHost:empty { display: none; }
.neighborhood-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 900;
}
.neighborhood-modal {
  position: fixed;
  inset: 0;
  z-index: 901;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.neighborhood-modal-card {
  pointer-events: auto;
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--sv-card, var(--sv-surface));
  color: var(--sv-text);
  border: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
/* ⚠⚠ STEP 2 IS A .neighborhood-promo-box, NOT a .neighborhood-modal-card, so
   without this rule it never gets pointer-events back from the wrapper above
   and EVERY click in it falls through to the scrim -- which carries the close
   handler, so the modal shut instead of advancing. Found on production by
   clicking it; elementFromPoint at the "Next" button returned the scrim.
   Nothing failed: node --check, all 17 review-and-send assertions and the CSS
   class-presence checks were green, because a class can exist and still be
   unclickable. Any future step whose wrapper is not .neighborhood-modal-card
   needs adding here. */
.neighborhood-modal .neighborhood-promo-box { pointer-events: auto; }
.neighborhood-invite { width: min(520px, 100%); text-align: left; }
.neighborhood-invite h3 { margin: 4px 0 0; font-size: 1.3rem; }
.neighborhood-invite-blurb { margin: 8px 0 0; font-size: 0.9rem; opacity: 0.82; line-height: 1.5; }
.neighborhood-invite-ask { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.55; }
.neighborhood-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.neighborhood-proof-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.1fr);
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 780px) {
  .neighborhood-proof-grid { grid-template-columns: 1fr; }
}
.neighborhood-field-label {
  display: block;
  margin: 12px 0 4px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  /* color: inherit is load-bearing -- the global bare-element label rule sets
     color: var(--ink), a light-theme token that does not flip for Navy. The
     recipient rows measured 1.11:1 for exactly this reason. */
  color: inherit;
}
.neighborhood-proof-fields input[type="text"],
.neighborhood-proof-fields textarea {
  width: 100%;
  background: var(--sv-surface, #fff);
  color: var(--sv-text);
  border: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
}
.neighborhood-proof-fields textarea { resize: vertical; }
.neighborhood-proof-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(190, 60, 60, 0.55);
  background: rgba(190, 60, 60, 0.12);
  font-size: 0.86rem;
  line-height: 1.5;
  color: inherit;
}
.neighborhood-proof-locked {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.75;
}
.neighborhood-proof-preview {
  border: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  border-radius: 10px;
  padding: 12px;
  background: var(--sv-surface, var(--sv-card));
}
.neighborhood-proof-subject,
.neighborhood-proof-from {
  margin: 0 0 6px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: inherit;
}
.neighborhood-proof-frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--sv-line, rgba(197, 149, 72, 0.3));
  border-radius: 8px;
  background: #fff;
}

/* ===================================================================
   Community Sheet (2026-09-07) -- the agent-facing "review on the fly"
   rebuild of the Community Rules page: header stat strip, per-topic
   sourced-rule detail, governing documents, and an agent-only market
   band. Appended as a named block; several sessions write this file,
   so delete by NAMED RULE only, never by line range or marker span.
   Layout-critical class names here are asserted by
   outputs/community-sheet-regression.js -- if you rename one, rename
   it there too or the check will (correctly) fail.
   =================================================================== */

.community-rules-finder {
  display: grid;
  gap: 10px;
}

.community-rules-search {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.community-rules-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.community-rules-search-results button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.community-rules-search-results button:hover,
.community-rules-search-results button:focus-visible {
  background: #f3f0e8;
}

.community-rules-search-name {
  font-weight: 600;
  color: var(--ink);
}

.community-rules-search-county {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.community-rules-search-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.community-rules-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.community-rules-header-stats {
  margin: 12px 0 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.community-rules-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.community-rules-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.community-rules-stat-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.community-rules-category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
}

.community-rules-category-head h3 {
  margin: 0;
  font-size: 1rem;
}

.community-rules-category-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ece7db;
  color: #4a564f;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
}

.community-rules-category-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.community-rules-unsummarized {
  margin: 0;
  color: #4a564f;
  font-size: 0.95rem;
  line-height: 1.5;
}

.community-rules-brief-warning {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fdf6e3;
  border: 1px solid var(--line);
  font-size: 0.85rem;
  color: #4a564f;
}

.community-rules-toggle {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.community-rules-detail {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.community-rule-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.community-rule-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.community-rule-summary {
  flex: 1 1 220px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}

.community-rule-chip {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #ece7db;
  color: #4a564f;
  white-space: nowrap;
}

.community-rule-chip-prohibited {
  background: #f6dcd8;
  color: #7d2b1d;
}

.community-rule-chip-required {
  background: #e2ecf5;
  color: #1f4c73;
}

.community-rule-chip-conditional {
  background: #fdf0d5;
  color: #6d4c14;
}

.community-rule-chip-permitted {
  background: #e2f0e4;
  color: #245c31;
}

.community-rule-figure {
  font-weight: 700;
  color: var(--ink);
}

.community-rule-condition {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #4a564f;
}

.community-rule-meta {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.community-rule-supersession {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fdf0d5;
  font-size: 0.78rem;
  color: #6d4c14;
}

.community-rules-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.community-rules-doc-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}

.community-rules-doc-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.community-rules-doc-meta {
  font-size: 0.76rem;
  color: var(--muted);
}

.community-rules-market {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f5ef;
}

.community-rules-market-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f6dcd8;
  color: #7d2b1d;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ===================================================================
   Community Sheet -- print & layout polish (2026-09-07, after Matt
   reviewed a real printout). Three changes he asked for:
     - the governing-documents list is SCREEN ONLY (no-print in the
       markup); a filename inventory is noise on a client handout
     - the market snapshot NOW PRINTS (it moved inside the print sheet)
     - the whole thing should read as a designed document, not a stack
   Refines the block above rather than editing it in place: several
   sessions append to this file, so later same-specificity rules are
   the safe way to override. Delete by NAMED RULE only.
   =================================================================== */

.community-rules-sheet {
  padding: 26px 30px 24px;
  gap: 14px;
}

.community-rules-sheet-eyebrow {
  margin: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.community-rules-sheet-title h2 {
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.community-rules-sheet-brand {
  flex-wrap: wrap;
  padding-bottom: 10px;
}

.community-rules-sheet-prepared {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.community-rules-sections {
  display: grid;
  gap: 16px;
}

/* The topics with nothing on file, named together instead of five empty
   blocks. The disclosure is preserved -- see the note in app.js. */
.community-rules-unreviewed-summary {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid #c59548;
  border-radius: 8px;
  background: #fbf8f1;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #4a564f;
}

.community-rules-market {
  margin-top: 2px;
}

.community-rules-market .ntreis-consumer-notice {
  margin: 10px 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------------------------------------------------------------- print */
@media print {
  /* Backgrounds carry MEANING here -- the requirement chips are the whole
     at-a-glance layer, and a browser that drops backgrounds would print
     "Not allowed" and "Allowed" as identical grey text. The explicit
     borders below are the belt to this suspenders: if a print pipeline
     ignores color-adjust entirely, the chip is still a bordered pill. */
  #communityRulesPrintSheet,
  #communityRulesPrintSheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #communityRulesPrintSheet {
    padding: 0;
    border: none;
    font-size: 10.5pt;
    line-height: 1.45;
    gap: 12px;
  }

  .community-rules-sheet-title h2 {
    font-size: 19pt;
  }

  .community-rules-sheet-eyebrow {
    font-size: 7.5pt;
  }

  /* auto-fit collapses to odd column counts on a narrow paper width. */
  .community-rules-header-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
  }

  .community-rules-market .community-rules-stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 14px;
  }

  /* A rule split across a page break loses its chip, which is the part that
     carries the meaning. */
  .community-rules-category,
  .community-rule-row,
  .community-rules-sheet-brand,
  .community-rules-unreviewed-summary {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .community-rules-category {
    padding-top: 12px;
  }

  .community-rule-chip {
    border: 1px solid currentColor;
    font-size: 7pt;
  }

  .community-rules-category-count {
    border: 1px solid #b9b2a2;
  }

  .community-rules-market {
    border: 1px solid #ccc5b4;
    padding: 12px 14px;
  }

  .community-rule-meta,
  .community-rules-category-hint {
    font-size: 8pt;
  }

  .community-rules-disclaimer {
    margin-top: 6px;
    font-size: 7.5pt;
  }

  /* Widow control: never strand a heading at the foot of a page. */
  .community-rules-category-head h3,
  .community-rules-sheet-title h2 {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* ===================================================================
   Community Sheet -- dues & amenities (2026-09-07). Prints, because
   these are the two questions an agent gets asked first. No contact
   fields by instruction. Delete by NAMED RULE only.
   =================================================================== */

.community-rules-facts {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfaf7;
}

.community-rules-fact-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}

.community-rules-fact-label {
  flex: 0 0 92px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.community-rules-fact-value {
  flex: 1 1 200px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.community-rules-fact-note {
  margin: 3px 0 0 102px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}

.community-amenity-chip {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  color: #3d473f;
}

/* An amount old enough to distrust says so on its own face. */
.community-rules-stale-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdf0d5;
  color: #6d4c14;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media print {
  .community-rules-facts {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .community-rules-fact-note {
    font-size: 8pt;
  }
  .community-amenity-chip {
    border: 1px solid #b9b2a2;
  }
}
/* ---------------------------------------------------------------------------
   Agent service areas (Settings). Appended 2026-09-08.
   ⚠ Every selector here is an explicit class. A bare descendant rule like
   `.service-area-row span { flex: 1 }` would also hit the <small> inside the
   label and the icon in any button added later, which is the exact trap
   recorded in CLAUDE.md for .todo-row span.
   ⚠ The inputs deliberately reuse .agent-mls-id-input / .agent-mls-id-row so
   they inherit the sizing that already works around the global
   `input, select, textarea { width: 100% }` rule rather than fighting it again.
--------------------------------------------------------------------------- */
/* ⚠ MULTI-COLUMN ON PURPOSE (Matt, 2026-09-09): "I don't want the added cities,
   counties, and communities to be listed in such long rows... so we can add
   30-50 names in here and it doesn't take up the whole page." One full-width
   row per area meant thirty areas was thirty rows of mostly empty space and the
   panel below it was pushed off screen.
   auto-fill + minmax gives 2 columns on a narrow panel and up to ~5 on a wide
   one WITHOUT a media-query ladder to maintain -- the column count follows the
   available width, which is the thing that actually varies here. 210px is the
   narrowest that still fits a long name like "The Reserve at Gaines Bend"
   beside its Remove control before the name starts wrapping. */
.service-area-list {
  list-style: none;
  margin: 8px 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}
.service-area-row {
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--line, #d9d5cc);
  border-radius: 8px;
  background: var(--white, #fff);
  font-size: 13px;
}
.service-area-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-weight: 600;
  /* ⚠ min-width:0 is what lets a long name ellipsis instead of forcing its grid
     column wider than its share -- without it one long community name stretches
     the whole column set and the grid stops looking like columns. */
  min-width: 0;
}
/* Truncate rather than wrap: a wrapped name makes its row taller than its
   neighbours and the grid goes ragged. The full name stays available on hover
   via the title attribute. */
.service-area-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-area-label small {
  font-weight: 400;
  opacity: 0.7;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The Remove control must not be squeezed out by a long name. */
.service-area-row .secondary-button {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 3px 8px;
}
.service-area-results {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service-area-results li { margin: 0; }
.service-area-empty {
  margin: 6px 0 10px;
  opacity: 0.75;
}
.service-area-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Referral handoff: the buyer's choice, and the agent's yes/no. 2026-09-08.
   ⚠ THE TWO CHOICE BUTTONS MUST STAY VISUALLY EQUAL. This is not a style
   preference -- NTREIS 22.09 only protects an agent contacted BY the client,
   so the buyer has to be genuinely choosing. Making "connect me" a primary
   button and "keep my agent" a muted link would turn a question into a nudge
   toward switching a represented buyer, which is what 22.04 prohibits. Same
   width, same weight, same colour. Do not "improve conversion" here.
--------------------------------------------------------------------------- */
.referral-handoff-card {
  border: 1px solid var(--line, #d9d5cc);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 14px;
  background: var(--white, #fff);
  /* ⚠ EXPLICIT INK ON AN EXPLICIT WHITE. Without this the card inherits the
     dark dashboard theme's LIGHT text colour onto a white background, and the
     whole panel renders as pale-on-white -- technically present, practically
     unreadable. Caught by looking at it on the real buyer dashboard; no test
     would have flagged it, because CSS has no missing-symbol error. Every
     white card in this file pairs the two for the same reason. */
  color: var(--ink);
}
.referral-handoff-card h3 { margin: 0 0 8px; }
.referral-handoff-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.referral-handoff-choices button {
  flex: 1 1 240px;
}
.referral-handoff-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
  line-height: 1.45;
}
.referral-offers-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.referral-offer-row {
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--line, #d9d5cc);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--white, #fff);
}
.referral-offer-row small {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
  line-height: 1.45;
}
.referral-offer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Rating prompt (buyer). Appended 2026-09-08. Explicit classes only. */
.referral-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.referral-rating-scale {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ===================================================================
   Per-listing quick-launch into the community sheet (2026-09-08).
   Agent-only affordance inside the listing dialog. Delete by NAMED
   RULE only.
   =================================================================== */

.ld-community-sheet-launch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}

/* Says out loud that a buyer looking over the agent's shoulder is not
   meant to see this one -- the sheet carries document provenance and a
   market band, unlike the rules Q&A above it. */
.ld-agent-only-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #ece7db;
  color: #4a564f;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Keeps the out-of-shell banners clear of the sidebar in both of its states.
   See the note on .workspace-access-notice above. */
.workspace-access-notice.sidebar-pinned,
.license-expiry-banner.sidebar-pinned {
  margin-left: 300px;
}

.license-expiry-banner {
  margin-left: 76px;
  margin-right: clamp(16px, 3vw, 32px);
}

/* pl3 brokerage-move invitation banner. Same out-of-shell placement and the
   same sidebar offset as .workspace-access-notice -- see the note there. */
.brokerage-move-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 clamp(16px, 3vw, 32px) 18px 76px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(31, 61, 43, 0.45);
  background: rgba(31, 61, 43, 0.08);
  font-size: 0.95rem;
  line-height: 1.5;
}

.brokerage-move-banner > div {
  flex: 1 1 320px;
  min-width: 0;
}

.brokerage-move-banner strong {
  display: block;
}

.brokerage-move-banner.sidebar-pinned {
  margin-left: 300px;
}

/* Where this client came from -- listing-lead provenance panel.
   ⚠ THESE RULES ARE ASSERTED BY NAME in listing-lead-routing-regression.js.
   CSS has no missing-symbol error, so a rule deleted by a line-range cleanup
   would leave this panel rendering with browser defaults and every test,
   guard and node --check would still pass. The assertion is the only thing
   that can see it. Do not remove a class here without removing it there. */
.client-lead-origin-panel {
  border-left: 3px solid var(--accent, #8a6f3b);
}
.client-lead-origin-line {
  margin: 0 0 4px;
  font-size: 15px;
}
.client-lead-origin-route {
  margin: 0;
  font-size: 14px;
  color: #8a8579;
}

/* ---------------------------------------------------------------------------
   Community dues TIERS (2026-09-08). Communities that assess more than one
   class -- The Hills Above reports 800 on 218 listings and 950 on 85 -- print
   every class rather than one figure that is wrong for the rest of the
   community. This block is APPENDED and self-contained on purpose: three
   sessions write this file, and deleting or editing by line range once took
   two other features' rules with it.
   --------------------------------------------------------------------------- */
.community-dues-tier-list {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0 0 0 2px;
  border-left: 2px solid var(--line, #d9d4c9);
}
.community-dues-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0 3px 10px;
  font-size: 0.94em;
}
.community-dues-tier-label {
  flex: 0 1 auto;
  font-weight: 600;
}
.community-dues-tier-amount {
  flex: 0 0 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The qualifier ("no dock access") belongs under the class it qualifies, not
   beside the money -- on a narrow column it would otherwise wrap between the
   label and the amount and read as part of the figure. */
.community-dues-tier-note {
  flex: 1 0 100%;
  opacity: 0.75;
  font-size: 0.92em;
}
@media print {
  .community-dues-tier-list { border-left-color: #999; }
  .community-dues-tier { break-inside: avoid; }
}

/* Undeliverable client email address (Resend bounce/complaint ingestion,
   2026-09-08). Matches .notification-bell-item--urgent's danger treatment so
   the two "something needs you" signals read as one system. Deliberately a
   block, not an inline pill: an agent scanning the contact card must not be
   able to miss that we have STOPPED sending to this person. */
.crm-email-undeliverable {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  border-radius: 6px;
  background: rgba(166, 66, 50, 0.07);
}

.crm-email-undeliverable strong {
  color: var(--danger);
  font-size: 0.92rem;
}

.crm-email-undeliverable span {
  font-size: 0.86rem;
  line-height: 1.45;
}

.crm-email-undeliverable small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  opacity: 0.75;
  word-break: break-word;
}

/* Broker lead coverage -- which counties receive routed leads, and why.
   ⚠ ASSERTED BY NAME in listing-lead-routing-regression.js, same reason as
   the provenance panel above: a deleted CSS rule raises nothing. */
.broker-lead-coverage {
  margin-top: 12px;
}
.broker-lead-coverage-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.broker-lead-coverage-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
}
.broker-lead-coverage-county {
  font-weight: 600;
}
.broker-lead-coverage-state.is-on {
  color: #2f6b3a;
}
.broker-lead-coverage-state.is-off {
  color: #8a8579;
}
.broker-lead-coverage-why {
  color: #8a8579;
  font-size: 13px;
}
.broker-lead-coverage-actions {
  justify-self: end;
}

/* ⚠ [hidden] LOSES TO AN AUTHOR display RULE, AND NOTHING ERRORS.
   The `hidden` attribute is only `display: none` in the BROWSER's default
   stylesheet, so any author rule that sets display -- here
   `.ask-agent-dialog .ask-agent-outside-agent { display: grid }` at (0,2,0) --
   outranks it. The JS was correct the whole time: it sets `.hidden = true`,
   the attribute lands in the DOM, and the element renders anyway.

   Shipped broken 2026-09-07, found by Matt looking at the dialog 2026-09-09.
   Two real consequences, both invisible to every check we run:
     * the "your agent isn't on here" panel + agent name/email/consent fields
       showed even when the buyer answered "No, I am not working with an
       agent" -- copy that contradicts the answer they just gave;
     * the agent question itself re-appeared for a buyer who had ALREADY
       answered it, making a correctly-stored answer look like it never saved.

   These selectors add an attribute (0,2,1) so they beat the display rules
   cleanly rather than relying on source order. ASSERTED BY NAME in
   listing-lead-routing-regression.js -- CSS has no missing-symbol error, so
   deleting these brings the bug back silently.

   Audited the same day: of 111 elements shipping with [hidden], only 4 are
   toggled in JS via the attribute, and only these 2 had a display rule
   defeating it. .ld-lightbox and .broker-attribution-broker already carry
   their own guard -- somebody hit this before. There is NO global
   [hidden] rule in this stylesheet; do not add one without checking what
   else it would newly hide. */
.ask-agent-dialog .ask-agent-outside-agent[hidden],
.ask-agent-dialog .ask-agent-representation[hidden] {
  display: none;
}

/* ==========================================================================
   Portal lead intake — verification notices (2026-09-09).
   A portal sends a verification code TO the intake address, and an intake
   address is not a mailbox: without these the agent cannot read the code at
   all. Added by NAME, never by editing a span — see the CSS deletion rule.
   ========================================================================== */
.lead-intake-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--pearl);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.lead-intake-code-label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Explicit colour and size: this is the one value the agent came here to read,
   and it must survive being copied out by eye if the clipboard is denied. */
.lead-intake-code-value {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.12em;
  user-select: all;
}

.lead-intake-body {
  margin: 12px 0 4px;
}

.lead-intake-body > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}

/* Portal emails carry very long tracking URLs. Wrap them and let the block
   scroll on its own rather than pushing the page sideways. */
.lead-intake-body-text {
  margin: 10px 0 0;
  padding: 14px 16px;
  max-height: 300px;
  overflow: auto;
  /* pre-wrap keeps the line structure of the email; the FONT is what made it
     read as raw code. A <pre> inherits the browser monospace default unless it
     is told otherwise, so state the app font explicitly. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  background: var(--pearl);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
}

/* "We can't reach you at this address" -- the signed-in AGENT's own email has
   hard-bounced or reported spam, so their lead alerts are being withheld
   (rel_agent_own_email_unreachable, 2026-09-09).

   Shares the .license-expiry-banner treatment directly above it in the page so
   the two account-level warnings read as one system, but carries NO dismiss
   control on purpose: that banner is a reminder about a date, this one says
   real business is not being delivered, and a dismissed warning about
   undelivered leads is a warning nobody sees again.

   Column, not row: this banner has four lines of substance where the licence
   one has two, and wrapping them as flex siblings put the fix instruction
   beside the headline instead of under it. */
.agent-unreachable-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
  font-size: 0.95rem;
  line-height: 1.5;
}

.agent-unreachable-banner strong { font-size: 1rem; }

.agent-unreachable-banner small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  opacity: 0.8;
  word-break: break-word;
}

/* === Transactions panel (feat_pps_merge / ported Project Paper String) ===
   ⚠ styles.css has a GLOBAL `input, select, textarea { width:100%; padding:12px 13px }`
   which hits file inputs too and renders them as full-width padded boxes. The
   explicit width/padding on .transaction-upload-file below is an override for
   that, not decoration -- remove it and the upload control reflows. Grep
   `^input,` to find the rule; `input[type=file]` does not match it. */
.transactions-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .transactions-layout { grid-template-columns: 1fr; }
}
.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.transaction-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: var(--sv-card);
  color: var(--sv-text);
  cursor: pointer;
}
.transaction-row.active { border-color: var(--sv-accent); }
.transaction-row-title { font-weight: 600; }
.transaction-row-meta { font-size: 0.85rem; opacity: 0.75; }
.transaction-row-warning {
  font-size: 0.78rem;
  font-weight: 600;
  color: #8a5300;
}
.transactions-detail { min-width: 0; }
.transaction-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 18px;
}
.transaction-upload-label { font-size: 0.85rem; opacity: 0.8; }
.transaction-upload-type {
  width: auto;
  min-width: 220px;
}
/* The override the comment above is about. */
.transaction-upload-file {
  width: auto;
  min-width: 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
}
.transaction-upload-status { flex-basis: 100%; margin: 0; }
.transaction-doc-list { display: flex; flex-direction: column; gap: 8px; }
.transaction-doc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
}


/* ---------------------------------------------------------------------------
   Onboarding: campaign step deep links + broker setup checklist
   (tracker onboarding_campaign, 2026-09-10)

   ⚠ The step button is a SIBLING of the <label>, not a child of it. A <button>
   inside a label is still inside the label's activation area, so clicking
   "Open Agent Setup" would ALSO tick the step off -- marking work done that
   the agent had only just been sent to go and do. Hence the wrapper row.

   ⚠ These class names are asserted by outputs/meridian/onboarding-campaign-
   regression.js. CSS has no missing-symbol error, so a rule deleted by a
   line-range cleanup would leave this rendering with browser defaults and
   every JS check still passing.
   --------------------------------------------------------------------------- */
.campaign-agent-step-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.campaign-agent-step-row > .campaign-agent-step { flex: 1 1 220px; min-width: 0; }
.campaign-step-goto { flex: 0 0 auto; margin-top: 1px; }

.broker-setup-checklist { display: flex; flex-direction: column; gap: 12px; }
.broker-setup-checklist--dismissed { padding-top: 10px; padding-bottom: 10px; }
.broker-setup-checklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.broker-setup-checklist-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.broker-setup-checklist-head h3 { margin: 0; }
.broker-setup-checklist-head p { margin: 0; font-size: 0.86rem; opacity: 0.85; }
.broker-setup-checklist-items { display: flex; flex-direction: column; gap: 9px; }

.broker-setup-item { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.broker-setup-item-mark { flex: 0 0 auto; width: 17px; text-align: center; line-height: 1.4; color: var(--brass); }
.broker-setup-item-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.broker-setup-item-title { font-weight: 600; }
.broker-setup-item--done .broker-setup-item-title { opacity: 0.7; }
/* Informational rows (MLS authorization) are not tasks -- damp them down so
   the eye lands on the things the broker can actually act on. */
.broker-setup-item--info { opacity: 0.75; }

.broker-postal-settings { display: flex; flex-direction: column; gap: 8px; }

/* === Transaction document tagging (feat_pps_merge / txn_documents, 2026-09-10)
   The control that lets an uploaded document say which TREC form it is, which
   is what makes it countable on the deal page's required-vs-held list.
   ⚠ NAMED RULES. Never delete this block by line range or marker-to-marker
   span -- three sessions append to this file and a span takes their rules too
   (CLAUDE.md, 2026-08-29). Delete by rule name or not at all. */
.transaction-doc-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.transaction-doc-form > span {
  font-size: 0.82rem;
  opacity: 0.8;
}
/* The global `input, select, textarea { width:100% }` is right for this select
   -- 42 TREC titles are long -- so this only caps it on wide screens. */
.transaction-doc-form select { max-width: 560px; }
.transaction-doc-attribution,
.transaction-doc-flat {
  font-size: 0.76rem;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.transaction-doc-flat { color: #8a5300; opacity: 1; }
.transaction-doc-inert {
  font-size: 0.82rem;
  margin: 4px 0 0;
}
.transaction-doc-status {
  font-size: 0.8rem;
  margin: 4px 0 0;
  min-height: 1em;
}
.transaction-doc-status:empty { display: none; }
.transaction-doc-picker-attribution,
.transaction-doc-pointer {
  font-size: 0.78rem;
  margin: 10px 0 0;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Onboarding: campaign step deep links + broker setup checklist
   (tracker onboarding_campaign, 2026-09-10)

   ⚠ The step button is a SIBLING of the <label>, not a child of it. A <button>
   inside a label is still inside the label's activation area, so clicking
   "Open Agent Setup" would ALSO tick the step off -- marking work done that
   the agent had only just been sent to go and do. Hence the wrapper row.

   ⚠ These class names are asserted by outputs/meridian/onboarding-campaign-
   regression.js. CSS has no missing-symbol error, so a rule deleted by a
   line-range cleanup would leave this rendering with browser defaults and
   every JS check still passing.
   --------------------------------------------------------------------------- */
.campaign-agent-step-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.campaign-agent-step-row > .campaign-agent-step { flex: 1 1 220px; min-width: 0; }
.campaign-step-goto { flex: 0 0 auto; margin-top: 1px; }

.broker-setup-checklist { display: flex; flex-direction: column; gap: 12px; }
.broker-setup-checklist--dismissed { padding-top: 10px; padding-bottom: 10px; }
.broker-setup-checklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.broker-setup-checklist-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.broker-setup-checklist-head h3 { margin: 0; }
.broker-setup-checklist-head p { margin: 0; font-size: 0.86rem; opacity: 0.85; }
.broker-setup-checklist-items { display: flex; flex-direction: column; gap: 9px; }

.broker-setup-item { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.broker-setup-item-mark { flex: 0 0 auto; width: 17px; text-align: center; line-height: 1.4; color: var(--brass); }
.broker-setup-item-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.broker-setup-item-title { font-weight: 600; }
.broker-setup-item--done .broker-setup-item-title { opacity: 0.7; }
/* Informational rows (MLS authorization) are not tasks -- damp them down so
   the eye lands on the things the broker can actually act on. */
.broker-setup-item--info { opacity: 0.75; }

.broker-postal-settings { display: flex; flex-direction: column; gap: 8px; }

/* === Transaction offers (feat_pps_merge / txn_offers, 2026-09-10)
   ⚠ NAMED RULES. Never delete this block by line range -- three sessions append
   to this file (CLAUDE.md, 2026-08-29). */
.transaction-offers { margin-top: 22px; }
.offer-list { display: flex; flex-direction: column; gap: 10px; }
.offer-card {
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  padding: 12px 14px;
}
.offer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.offer-price { font-weight: 600; font-size: 1.05rem; }
.offer-terms {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  margin: 8px 0 6px;
  font-size: 0.86rem;
}
.offer-terms dt { opacity: 0.7; }
.offer-terms dd { margin: 0; }
.offer-net { margin: 6px 0 2px; font-weight: 600; }
.offer-net-note { display: block; font-size: 0.74rem; opacity: 0.75; }
/* ⚠ THE NOTE IS NOT DECORATION. It is the sentence that makes this a table of
   values rather than an implied recommendation, so it is styled to be read. */
.offer-note {
  margin: 12px 0 2px;
  font-size: 0.84rem;
  border-left: 3px solid var(--sv-accent);
  padding-left: 10px;
}
.offer-ordering { font-size: 0.78rem; margin: 2px 0 0; }
.offer-expired { font-size: 0.78rem; font-weight: 600; color: #8a5300; }
.offer-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.offer-status { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; }
/* The global `input, select, textarea { width:100% }` would stretch this across
   the row; the status control is a short enum and belongs inline. */
.offer-status select { width: auto; min-width: 130px; padding: 6px 8px; }
.offer-row-status { font-size: 0.8rem; margin: 6px 0 0; }
.offer-row-status:empty { display: none; }
.offer-add { margin-top: 18px; }
.offer-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.offer-add-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; }
.offer-add-status { margin: 8px 0 0; }
.offer-add-status:empty { display: none; }
.transaction-offers-error { color: #8a2b2b; }

/* Transactions panel toolbar actions (feat_pps_merge, 2026-09-10).
   ⚠ NAMED RULE -- never delete this block by line range. */
.transactions-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Transactions / documents / offers -- THEME COLOURS (2026-09-10)
   ⚠⚠ ADDED AFTER THE PANEL SHIPPED UNREADABLE ON NAVY. The blocks above set
   layout, spacing and borders but never set a text colour, so every heading,
   label, term and note inherited a dark value and disappeared against the navy
   surface. Cream looked fine, which is exactly why it went unnoticed.
   ⚠ ONLY --sv-* TOKENS ARE SWAPPED BY THE NAVY/CREAM TOGGLE (see the
   listing-detail block's warning). --ink, --muted, --line and --white are
   defined once in :root and are NOT theme-aware -- using them is the bug.
   NAMED RULES: never delete this block by line range. */
#transactionsPanel,
.transactions-detail,
.transactions-list { color: var(--sv-text); }

.transactions-detail h2,
.transactions-detail h3,
.transactions-detail h4 { color: var(--sv-heading); }

.transaction-row { background: var(--sv-card); color: var(--sv-text); }
.transaction-row-meta { color: var(--sv-text-muted); }
.transaction-row.active { border-color: var(--sv-accent); }

.transaction-doc { border-color: var(--sv-line); color: var(--sv-text); }
.transaction-doc-form > span,
.transaction-doc-attribution,
.transaction-doc-inert,
.transaction-doc-status,
.transaction-doc-picker-attribution,
.transaction-doc-pointer { color: var(--sv-text-muted); }
.transaction-doc-attribution a { color: var(--sv-accent); }

.offer-card { border-color: var(--sv-line); color: var(--sv-text); }
.offer-card-head strong,
.offer-price { color: var(--sv-text); }
.offer-terms dt { color: var(--sv-text-muted); }
.offer-terms dd { color: var(--sv-text); }
.offer-net { color: var(--sv-text); }
.offer-net-note,
.offer-ordering,
.offer-row-status,
.offer-add-status { color: var(--sv-text-muted); }

/* === Transaction documents -- REMOVE / BROKER DECIDES (2026-09-10)
   ⚠ EVERY COLOUR IS A --sv-* TOKEN. The panel shipped unreadable on Navy once
   already today because its CSS used variables the theme toggle does not swap.
   NAMED RULES: never delete this block by line range. */
.transaction-doc-notice {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--sv-accent);
  background: var(--sv-surface-2);
  color: var(--sv-text);
  border-radius: 6px;
}
.transaction-doc-remove { align-self: flex-start; margin-top: 6px; }
.transaction-removed { margin-top: 22px; color: var(--sv-text); }
.transaction-removed h3 { color: var(--sv-heading); }
.transaction-removed-intro { color: var(--sv-text-muted); }
.transaction-doc-removed { border-style: dashed; border-color: var(--sv-line); color: var(--sv-text); }
.transaction-removed-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.transaction-removed-blocked { color: var(--sv-text-muted); font-size: 0.82rem; margin: 6px 0 0; }
.transaction-removed-purged { color: var(--sv-text-muted); }


/* ===========================================================================
   DEAL FILE + DEPARTED AGENT'S PAGE -- promoted from staging 2026-09-15.
   ⚠ EVERY COLOUR HERE IS AN --sv-* TOKEN. The panel shipped unreadable on Navy
   once already because it used --line/--white, which the theme toggle does not
   swap. NAMED RULES: never delete this block by line range.
   ⚠ The Required Documents panel's rules (.transaction-doc-*) are DELIBERATELY
   NOT HERE -- that panel is counsel-gated and absent from production.
   ======================================================================== */
.offer-add h4 { color: var(--sv-heading); }
/* === Transactions -- ONE ORDER PER DEAL + JUMP BAR (2026-09-11)
   Summary -> Deadlines -> Checklist -> Documents -> Offers -> People -> Removed,
   set by TRANSACTION_SECTIONS in app.js.
   ⚠ EVERY COLOUR IS A --sv-* TOKEN. This panel shipped unreadable on Navy once
   already because its CSS used variables the theme toggle does not swap.
   ⚠ .transaction-jump IS A <button>, and styles.css has global button/input
   rules, so width, padding and background are set explicitly here.
   NAMED RULES: never delete this block by line range. */
.transaction-section { margin-top: 24px; scroll-margin-top: 16px; color: var(--sv-text); }
.transaction-section:first-child { margin-top: 0; }
.transaction-section > .transaction-offers,
.transaction-section > .transaction-removed { margin-top: 0; }
.transaction-summary h2 { margin: 0; color: var(--sv-heading); }
.transaction-summary-meta { margin: 4px 0 0; color: var(--sv-text-muted); }
.transaction-summary-warning { margin: 6px 0 0; font-weight: 600; color: var(--sv-text); }
.transaction-jumpbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--sv-line); color: var(--sv-text); }
.transaction-jump { width: auto; min-width: 0; margin: 0; padding: 5px 12px; border: 1px solid var(--sv-line); border-radius: 999px; background: var(--sv-card); color: var(--sv-text); font-size: 0.85rem; line-height: 1.3; cursor: pointer; }
.transaction-jump:hover,
.transaction-jump:focus-visible { border-color: var(--sv-accent); color: var(--sv-heading); }
/* === Transactions -- PROPERTY FILE ON THE PIPELINE PAGE (2026-09-11)
   Each Pipeline property's page is its file, in the order TRANSACTION_SECTIONS
   sets in app.js. Every colour is a --sv-* token.
   NAMED RULES: never delete this block by line range. */
.property-file > .transaction-section { margin-top: 24px; }
.property-file > .transaction-section-summary { margin-top: 12px; }
.property-file > .transaction-jumpbar { margin-bottom: 4px; }
.property-file-mount:empty { display: none; }
/* === Transactions -- CONTRACT STATUS + EXECUTE / RETURN TO DRAFT (2026-09-11)
   Sits under the property title in the file's Summary section.
   ⚠ EVERY COLOUR IS A --sv-* TOKEN. ⚠ The date inputs override the global
   `input { width: 100% }` rule explicitly.
   NAMED RULES: never delete this block by line range. */
.transaction-contract { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-card); color: var(--sv-text); }
.transaction-contract-status { margin: 0; font-weight: 600; color: var(--sv-text); }
.transaction-contract-notice { margin: 6px 0 0; color: var(--sv-text-muted); }
.transaction-contract-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.transaction-contract-form { display: grid; gap: 8px; margin-top: 10px; color: var(--sv-text); }
.transaction-contract-form label { display: grid; gap: 4px; font-size: 0.88rem; color: var(--sv-text-muted); }
.transaction-contract-form input[type="date"] { width: auto; max-width: 220px; }
.transaction-contract-hint { margin: 0; font-size: 0.82rem; color: var(--sv-text-muted); }
/* 1. Frame: one card per section, a pinned section bar, a clear way back. */
.property-file { gap: 0; color: var(--sv-text); }
.property-file h2,
.property-file h3,
.property-file h4 { color: var(--sv-heading); }
.property-file > [data-property-detail-back] { justify-self: start; }
.property-file > .transaction-section { margin-top: 14px; padding: 18px 20px; background: var(--sv-card); border: 1px solid var(--sv-card-line); border-radius: 12px; }
.property-file > .transaction-section-summary { margin-top: 12px; }
.property-file > .transaction-jumpbar { position: sticky; top: 0; z-index: 4; margin: 12px 0 0; padding: 10px 0; background: var(--sv-page); border-bottom: 1px solid var(--sv-line); }
.property-file .transaction-jump-back { font-weight: 700; border-color: var(--sv-accent); }
.property-file .transaction-section h3 { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--sv-heading); }
.property-file .crm-record-section-head { margin-bottom: 12px; }
.property-file .crm-record-section-head h3 { margin: 0; }
.property-file .crm-record-section-head.compact { border-bottom-color: var(--sv-line); }
/* 3. Every colour the page's own rules fix to the Cream palette. */
.property-file .crm-record-panel { background: transparent; }
.property-file .crm-record-section-head p { color: var(--sv-text-muted); }
.property-file .property-detail-readonly-note { color: var(--sv-text); background: var(--sv-surface-2); border-color: var(--sv-line); }
.property-file .property-checklist-item span { color: var(--sv-text); }
.property-file .property-client-share-toggle span { color: var(--sv-text); }
.property-file .property-address-heading { color: var(--sv-heading); }
.property-file .property-address-heading:hover,
.property-file .property-address-heading:focus-visible,
.property-file .property-address-heading-large:hover { color: var(--sv-heading); }
.property-file .property-detail-meta { color: var(--sv-text-muted); }
.property-file .property-detail-form { margin-top: 14px; padding: 18px 0 0; background: transparent; border: 0; border-top: 1px solid var(--sv-line); border-radius: 0; }
.property-file .property-detail-form label { color: var(--sv-text-muted); }
.property-file .property-important-dates li { color: var(--sv-text); background: var(--sv-surface-2); }
.property-file .property-checklist-item-remove,
.property-file .property-split-remove,
.property-file .stage-item-remove { color: var(--sv-text-muted); }
.property-file .property-checklist-item-remove:hover,
.property-file .property-checklist-item-remove:focus-visible,
.property-file .property-split-remove:hover,
.property-file .property-split-remove:focus-visible,
.property-file .stage-item-remove:hover,
.property-file .stage-item-remove:focus-visible { color: var(--sv-heart); background: var(--sv-surface-2); }
.property-file .property-split-row span { color: var(--sv-text-muted); }
.property-file .property-splits-summary { color: var(--sv-text-muted); }
.property-file .property-detail-hint { color: var(--sv-text-muted); }
.property-file .property-listing-link { background: var(--sv-surface-2); border: 1px solid var(--sv-line); }
.property-file .property-listing-link-card strong { color: var(--sv-text); }
.property-file .property-listing-link-card small { color: var(--sv-text-muted); }
.property-file .property-listing-link-result { background: var(--sv-surface-2); border-color: var(--sv-line); }
.property-file .property-listing-link-result strong,
.property-file .property-listing-link-result em { color: var(--sv-text); }
.property-file .property-listing-link-result small { color: var(--sv-text-muted); }
.property-file .crm-note-label span { color: var(--sv-text-muted); }
.property-file .crm-note-label input,
.property-file .crm-note-label textarea,
.property-file .crm-note-label.pinned textarea { color: var(--sv-text); background: var(--sv-surface-2); }
.property-file .crm-note-label input::placeholder,
.property-file .crm-note-label textarea::placeholder { color: var(--sv-text-muted); }
.property-file .neighborhood-badge { color: var(--sv-neutral-pill-text); background: var(--sv-neutral-pill-bg); }
/* 4. Form fields and buttons match the rest of the Navy dashboard. */
.property-file input:not([type="checkbox"]):not([type="radio"]),
.property-file select,
.property-file textarea { color: var(--sv-text); background: var(--sv-surface-2); border: 1px solid var(--sv-line); }
.property-file input::placeholder,
.property-file textarea::placeholder { color: var(--sv-text-muted); }
:root:not([data-theme="cream"]) .property-file input,
:root:not([data-theme="cream"]) .property-file select { color-scheme: dark; }
.property-file .secondary-button,
.property-file .ghost-button { color: var(--sv-btn-ask-text); background: var(--sv-btn-ask-bg); border-color: var(--sv-btn-ask-border); }
.property-file .primary-button { color: var(--sv-btn-solid-text); background: var(--sv-btn-solid-bg); }
.property-file a { color: var(--sv-accent); }
/* === Transactions -- PROPERTY FILE: REQUIRED-DOCUMENTS READABILITY (2026-09-11)
   Matt's screenshots after the first theme pass: the question labels and the
   "Does this deal involve any of these?" list were dark on Navy, and the
   requirement cards were pale text on a cream box. Two causes the first pass
   could not see: a bare `label { color: var(--ink) }` rule (no class to scan
   for), and status classes the panel builds at render time
   (txn-doc-unresolved / -missing / -held / -notheld) with Cream-only colours.
   Overridden here, inside the file only.
   NAMED RULES: never delete this block by line range. */
.property-file label { color: var(--sv-text); }
/* === Transactions -- COMMENTS + @MENTIONS (2026-09-11)
   The deal's internal thread, in the property file's Comments section.
   ⚠ EVERY COLOUR IS A --sv-* TOKEN. ⚠ The notify checkboxes override the
   global `input { width: 100%; padding: 12px 13px }` rule explicitly.
   NAMED RULES: never delete this block by line range. */
.transaction-comments { color: var(--sv-text); }
.transaction-comments-note { margin: 0 0 12px; font-size: 0.82rem; color: var(--sv-text-muted); }
.transaction-comment-list { display: grid; gap: 10px; margin-bottom: 14px; }
.transaction-comment { padding: 10px 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-surface-2); color: var(--sv-text); }
.transaction-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 0.8rem; color: var(--sv-text-muted); }
.transaction-comment-head strong { font-size: 0.9rem; color: var(--sv-text); }
.transaction-comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sv-text); }
.transaction-comment-mentions { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--sv-text-muted); }
.transaction-comment-form { display: grid; gap: 10px; }
.transaction-comment-form textarea { min-height: 80px; resize: vertical; }
.transaction-comment-audience { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; border: 0; color: var(--sv-text); }
.transaction-comment-audience legend { margin-bottom: 6px; font-size: 0.82rem; font-weight: 600; color: var(--sv-text-muted); }
.transaction-comment-audience label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--sv-text); cursor: pointer; }
.transaction-comment-audience input[type="checkbox"] { flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--sv-accent); }
.transaction-comment-notice { margin: 0; font-size: 0.82rem; color: var(--sv-text-muted); }
/* === Transactions -- COMPLIANCE CHECKLIST (2026-09-14)
   The three-layer checklist in the property file's Checklist section, and the
   broker's own requirements behind it.
   ⚠ EVERY COLOUR IS A --sv-* TOKEN. ⚠ The tick boxes override the global
   `input { width: 100%; padding: 12px 13px }` rule explicitly.
   NAMED RULES: never delete this block by line range. */
.transaction-checklist { margin-top: 18px; color: var(--sv-text); }
.transaction-checklist-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--sv-text-muted); }
.transaction-checklist-stage { margin-bottom: 14px; }
.transaction-checklist-stage h4 { margin: 0 0 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sv-text-muted); }
.transaction-checklist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.transaction-checklist-list li { padding: 8px 10px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-surface-2); color: var(--sv-text); }
.transaction-checklist-item { display: flex; align-items: center; gap: 8px; color: var(--sv-text); cursor: pointer; }
.transaction-checklist-item input[type="checkbox"] { flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--sv-accent); }
.transaction-checklist-meta { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--sv-text-muted); }
.transaction-checklist-template { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--sv-line); border-radius: 8px; color: var(--sv-text); }
.transaction-checklist-template summary { cursor: pointer; font-weight: 600; color: var(--sv-heading); }
.transaction-checklist-template-form { display: grid; gap: 10px; margin-top: 10px; }
.transaction-checklist-template-form label { display: grid; gap: 4px; font-size: 0.82rem; color: var(--sv-text-muted); }
.transaction-checklist-mandatory { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--sv-text); cursor: pointer; }
.transaction-checklist-mandatory input[type="checkbox"] { flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--sv-accent); }
/* === Departed agent's read-only copies (2026-09-14)
   Shown only to an agent whose affiliation has ended; the menu entry is hidden
   until then. ⚠ EVERY COLOUR IS A --sv-* TOKEN.
   NAMED RULES: never delete this block by line range. */
.departure-copies-note { margin: 0 0 10px; font-size: 0.86rem; color: var(--sv-text-muted); }
.departure-copies-list { display: grid; gap: 14px; }
.departure-copy { color: var(--sv-text); }
.departure-copy h3 { margin: 0 0 4px; color: var(--sv-heading); }
.departure-copy-meta { margin: 2px 0; font-size: 0.82rem; color: var(--sv-text-muted); }
.departure-copy-notes { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sv-text); }
.departure-copy-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sv-line); }
.departure-copy-section summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--sv-text); }
.departure-copy-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.86rem; color: var(--sv-text); }
/* Openable documents on the departed agent's page (2026-09-14).
   ⚠ EVERY COLOUR IS AN --sv-* TOKEN. NAMED RULES: never delete by line range. */
.departure-copy-doc { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; color: var(--sv-text); }
.departure-copy-doc > span:first-child { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.departure-copy-error { color: var(--sv-text); font-weight: 600; }

/* === Participant portal, promoted from staging 2026-09-18 =================
   The buyer/participant side only. The agent-side People and share sections
   are still staging-only, so nothing here styles them.
   NAMED RULES: never delete this block by line range. */
.participant-panel { margin: 0 0 18px; padding: 16px; border: 1px solid var(--sv-line); border-radius: 12px; background: var(--sv-card); color: var(--sv-text); }
.participant-panel-head h2 { margin: 0; color: var(--sv-heading); }
.participant-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.participant-invite,
.participant-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--sv-text); }
.participant-invite { padding: 10px 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-surface-2); }
.participant-row { padding: 10px 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-surface-2); color: var(--sv-text); }
.participant-invite strong,
.participant-row strong { display: block; color: var(--sv-heading); overflow-wrap: anywhere; }
.participant-meta { display: block; margin: 2px 0 0; font-size: 0.82rem; color: var(--sv-text-muted); }
.participant-error { font-weight: 600; color: var(--sv-text); }
.participant-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sv-line); }
.participant-doc-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; color: var(--sv-text); }
.participant-doc-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* === A participant adding a document (the title company workspace, 2026-09-16)
   ⚠ EVERY COLOUR IS AN --sv-* TOKEN, so Navy/Cream both swap it.
   ⚠ THE FILE INPUT NEEDS AN EXPLICIT WIDTH AND PADDING: styles.css carries a
   global rule on "input, select, textarea" setting width 100% and padding
   12px 13px on a white background, and it hits input[type=file] too, rendering
   it as a full-width white slab. Grep `^input,` to find that rule -- its
   selector is a grouped multi-line one, so grepping for the single-selector
   form finds nothing.
   ⚠ NO LITERAL BRACES IN THIS COMMENT, ON PURPOSE. Every regression suite here
   locates a rule by splitting styles.css on the closing brace, and a brace
   inside a comment cuts the chunk in the wrong place -- which hides the rule
   that follows inside the previous rule's body and reports it as missing. That
   happened while this block was being written.
   NAMED RULES: never delete this block by line range. */
.participant-doc-source { display: block; font-size: 0.78rem; color: var(--sv-text-muted); }
.participant-upload { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--sv-line); color: var(--sv-text); }
.participant-upload-control { display: inline-flex; align-items: center; cursor: pointer; }
.participant-upload-control input[type="file"] { width: 1px; min-width: 0; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; position: absolute; overflow: hidden; }
/* Keyboard users get the same ring the real control would have had. The input
   is visually hidden but still focusable, and it FOLLOWS the span in the
   markup, so a sibling selector could not reach it -- :focus-within on the
   label is the one that works. */
.participant-upload-control:focus-within .secondary-button { outline: 2px solid var(--sv-accent); outline-offset: 2px; }
.participant-upload-control .is-busy { opacity: 0.65; }
.participant-upload-ok { color: var(--sv-text); font-weight: 600; }

/* === People on a deal + document sharing, promoted 2026-09-18 ==============
   NAMED RULES: never delete this block by line range. */
/* === People on a deal (txn_participants_portal, 2026-09-15)
   ⚠ EVERY COLOUR IS AN --sv-* TOKEN.
   ⚠ THE FORM CONTROLS NEED EXPLICIT WIDTHS: styles.css carries a global
   `input, select, textarea { width: 100%; padding: 12px 13px }`.
   NAMED RULES: never delete this block by line range. */
.transaction-people-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.transaction-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-surface-2); color: var(--sv-text); }
.transaction-person.is-removed { opacity: 0.6; }
.transaction-person strong { display: block; color: var(--sv-heading); }
.transaction-person-meta { display: block; font-size: 0.8rem; color: var(--sv-text-muted); }
.transaction-person-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Access control on a person (2026-09-17). The global rule on
   "input, select, textarea" sets width 100% and padding 12px 13px, which would
   make this select fill the row, so width and padding are set explicitly here.
   NAMED RULES: never delete this block by line range. */
.transaction-person-access { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--sv-text-muted); }
/* Confirmation that the server agreed, not that a click happened. */
.transaction-person-saved { font-size: 0.78rem; font-weight: 600; color: var(--sv-accent); align-self: center; }
.transaction-person-access select { width: auto; min-width: 120px; padding: 5px 8px; font-size: 0.82rem; color: var(--sv-text); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 6px; }
.transaction-people-error { color: var(--sv-text); font-weight: 600; }
.transaction-people-notice { color: var(--sv-text); }
.transaction-people-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sv-line); color: var(--sv-text); }
.transaction-people-label { flex: 1 0 100%; font-size: 0.82rem; color: var(--sv-text-muted); }
.transaction-people-name,
.transaction-people-email { width: auto; min-width: 160px; flex: 1 1 180px; padding: 6px 9px; font-size: 0.85rem; color: var(--sv-text); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 6px; }
.transaction-people-role,
.transaction-people-side { width: auto; min-width: 130px; padding: 6px 9px; font-size: 0.85rem; color: var(--sv-text); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 6px; }
.transaction-people-hint { flex: 1 0 100%; margin: 4px 0 0; color: var(--sv-text-muted); }

/* === Sharing documents with the people on a deal (2026-09-16)
   ⚠ EVERY COLOUR IS AN --sv-* TOKEN.
   ⚠ THE TICK BOXES NEED EXPLICIT SIZES: styles.css carries a global
   `input, select, textarea { width: 100%; padding: 12px 13px }` that turns a
   checkbox into a full-width padded box with the glyph floating mid-row.
   NAMED RULES: never delete this block by line range. */
.transaction-doc-pick { flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; padding: 0; margin-right: 8px; }
.transaction-share-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 8px 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-surface-2); color: var(--sv-text); font-size: 0.86rem; }
.transaction-share-picker { margin: 0 0 12px; padding: 12px; border: 1px solid var(--sv-line); border-radius: 8px; background: var(--sv-card); color: var(--sv-text); }
.transaction-share-head { margin: 0 0 8px; font-weight: 600; color: var(--sv-heading); }
.transaction-share-people { display: grid; gap: 6px; }
.transaction-share-person { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--sv-text); }
.transaction-share-person input[type="checkbox"] { flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; padding: 0; }
/* ⚠ The other side is marked in the list as well as in the confirmation. An
   agent scanning a list of names should not have to remember which is which. */
.transaction-share-person.is-other-side { color: var(--sv-text); font-weight: 600; }
.transaction-share-actions { display: flex; gap: 8px; margin-top: 10px; }
.transaction-share-notice { color: var(--sv-text); }




/* ===========================================================================
   "You have a document to sign" banner (2026-09-18).
   Champagne on navy, matching the notification tone rather than an alarm red:
   this is business waiting, not an error. Sits above every panel.
   =========================================================================== */
.sign-now-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 13px 16px;
  background: var(--sv-card2, #1d3346);
  border: 1px solid var(--sv-accent, #c9a24c);
  border-radius: 10px;
}
.sign-now-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sign-now-text strong { font-size: .98rem; }
.sign-now-text span { font-size: .9rem; opacity: .92; }
.sign-now-more { font-size: .78rem; letter-spacing: .04em; opacity: .75; white-space: nowrap; }
/* Explicit sizing: the global "input, select, textarea" rule does not reach a
   button, but the global button styling in this sheet is broad enough that an
   unstyled one drifts. */
.sign-now-go {
  flex: 0 0 auto; padding: 10px 18px; border: 0; border-radius: 8px;
  background: var(--sv-accent, #c9a24c); color: var(--sv-page, #0e1c2b);
  font-weight: 700; font-size: .86rem; letter-spacing: .03em; cursor: pointer;
}
.sign-now-go:hover { filter: brightness(1.06); }
@media (max-width: 620px) {
  .sign-now-banner { gap: 10px; }
  .sign-now-go { width: 100%; }
}


/* ===========================================================================
   Document row actions (2026-09-19, corrected the same day).

   ⚠ THE ROW IS A TWO-PART FLEX, NOT A GRID OF LOOSE CHILDREN. The first attempt
   made every element about the document its own grid row in column 1 and had
   the action stack SPAN those rows. A spanning grid item's height is
   distributed across the rows it covers, so the tick box's row stretched to
   carry part of the button stack and left an empty band above every filename.
   Matt: "why the big gap on the left side of each of these above the file
   name?" One wrapper for the left column removes the whole class of problem.

   ⚠ THE ACTION COLUMN IS A FIXED WIDTH, on purpose. Sized to its contents, each
   row was as wide as its own longest label, so a row offering "Send for
   signatures" was visibly wider than one offering "Share" and the right edge
   came out ragged. Matt: "Why aren't all the buttons on the right side the same
   size?" A fixed column makes every button on the tab identical, which is what
   "the same size" has to mean across rows.

   ⚠ THE BUTTONS CARRY NO COLOUR HERE. They use .primary-button, which inside
   .property-file already resolves to --sv-btn-solid-bg: champagne on navy, teal
   on cream. Hardcoding the gold would look right in one theme and wrong in the
   other, and nothing would report it.
   =========================================================================== */
.transaction-doc {
  display: flex;
  /* ⚠⚠ flex-direction MUST BE STATED, and leaving it out is why the buttons
     came back underneath the details instead of beside them. The ORIGINAL
     .transaction-doc rule earlier in this file sets "flex-direction: column",
     and a later rule only overrides the properties it actually names — so
     declaring "display: flex" alone inherited the old column direction and the
     stack dropped below the filename. Matt: "now you moved the buttons to the
     right side", meaning they had stopped being there.
     WHEN OVERRIDING AN EARLIER RULE, RESTATE EVERY PROPERTY YOU ARE RELYING ON,
     not just the one you are changing. */
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.transaction-doc-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.transaction-doc-actions {
  flex: 0 0 auto;
  width: 188px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.transaction-doc-actions .primary-button {
  width: 100%;
  white-space: nowrap;
  min-height: 36px;
  padding: 0 12px;
}
@media (max-width: 620px) {
  /* Below this a fixed column would leave the filename a sliver, so the stack
     drops underneath and spreads. */
  .transaction-doc { flex-direction: column; }
  .transaction-doc-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .transaction-doc-actions .primary-button { width: auto; flex: 1 1 auto; }
}


/* ===========================================================================
   Required Documents panel (feat_doc_requirement_engine).
   Promoted to production 2026-09-19 at Matt's instruction -- the counsel gate
   this panel waited behind was cleared when the TREC forms went live.
   Lifted rule by rule from the staging sheet, NOT as a span: this feature's
   rules sit in three separate clusters there, so a span would have taken
   other sessions' rules with it or left most of this feature behind.
   =========================================================================== */
/* Required transaction documents (feat_doc_requirement_engine).
   Appended as NAMED rules. Never delete this block by line range or
   marker-to-marker span -- three sessions append to this file and a span
   delete has already taken two other features' rules out with it (CLAUDE.md).
   Delete by rule name if these ever need removing.

   No checkbox or radio is used in this panel, deliberately: the global
   `input, select, textarea { width: 100%; padding: 12px 13px }` above renders
   them as full-width white boxes unless individually overridden. Selects and
   number inputs want full width anyway, so this panel sidesteps it. */
.txn-doc-panel {
  color: var(--sv-text);
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--sv-line);
  border-radius: 12px;
  background: var(--sv-card);
}

.txn-doc-panel h3 {
  margin: 0 0 4px;
}

.txn-doc-subhead {
  margin: 16px 0 6px;
  font-size: 0.95rem;
}

.txn-doc-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.txn-doc-answer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

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

.txn-doc-row {
  padding: 10px 12px;
  border: 1px solid var(--sv-line);
  border-left-width: 4px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.txn-doc-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.txn-doc-form-id {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sv-surface-2);
  color: var(--sv-text);
  white-space: nowrap;
}

.txn-doc-required {
  border-left-color: var(--sv-heading);
}

/* Unresolved is visually distinct from required on purpose: it must never
   read as "not needed". */
.txn-doc-unresolved {
  border-left-color: #b8860b;
  background: #fffdf5;
}

.txn-doc-standing {
  border-left-color: var(--sv-line);
}

.txn-doc-reason,
.txn-doc-attribution,
.txn-doc-missing,
.txn-doc-flat {
  display: block;
  line-height: 1.4;
}

.txn-doc-missing {
  color: #8a6100;
}

.txn-doc-flat {
  color: #6b6b6b;
  font-style: italic;
}

.txn-doc-attribution {
  color: #6b6b6b;
  font-size: 0.72rem;
  word-break: break-all;
}

.txn-doc-attribution a {
  color: inherit;
}

.txn-doc-disclaimer {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--sv-line);
  font-size: 0.78rem;
  color: #6b6b6b;
  line-height: 1.5;
}

/* Deal-structure picker (feat_doc_requirement_engine, 2026-09-10).
   ⚠ THE OVERRIDE BELOW IS LOAD-BEARING, NOT COSMETIC. styles.css carries a
   global `input, select, textarea { width: 100%; padding: 12px 13px;
   background: var(--white); border-radius: 8px }` a few hundred lines up, and
   it hits CHECKBOXES too -- they render as full-width padded white boxes with
   the tick floating mid-row and the label shoved to the far right. Every
   checkbox in this app needs an explicit width/height/padding override; see
   `.consent-check input` and `.todo-row input[type="checkbox"]` for the other
   two. Deleting this rule does not error, it just silently wrecks the layout,
   which is why transaction-docs-ui-regression.js asserts it exists. */
.txn-doc-picker {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.txn-doc-pick {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.txn-doc-pick:hover {
  background: var(--sv-surface-2);
}

.txn-doc-pick-box {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 3px 0 0;
  flex: 0 0 auto;
  border-radius: 3px;
}

.txn-doc-pick span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Save/load state for the transaction-document answers (2026-09-10).
   Named rules; do not delete by line range. */
.txn-doc-answer-status {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #6b6b6b;
}

.txn-doc-answer-error {
  color: #8a2b2b;
  background: #fdf3f3;
  border: 1px solid #f0d6d6;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.45;
}

/* Required vs held coverage (feat_doc_requirement_engine, 2026-09-10).
   Named rules; never delete by line range. */
.txn-doc-coverage {
  color: var(--sv-text);
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  background: var(--sv-surface-2);
}

.txn-doc-coverage-counts {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

/* ⚠ The caveats are not small print to be trimmed. A count without them is a
   compliance claim nobody made -- see the comment in app.js. */
.txn-doc-coverage-caveat {
  margin: 4px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #5f5f5f;
}

.txn-doc-held,
.txn-doc-notheld {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
}

.txn-doc-held {
  color: #2f6f3f;
}

.txn-doc-notheld {
  color: #8a6100;
}

.property-file .transaction-section > .txn-doc-panel { margin-top: 0; }

/* 2. Panels that were cards become the section's content -- no card in a card. */
.property-file .transaction-section > .crm-record-panel,
.property-file .transaction-section > .txn-doc-panel,
.property-file .property-file-mount > .transaction-offers,
.property-file .property-file-mount > .transaction-removed { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

.property-file .txn-doc-disclaimer,
.property-file .txn-doc-answer-status,
.property-file .txn-doc-coverage-caveat { color: var(--sv-text-muted); }

.property-file .txn-doc-answer-error { color: var(--sv-text); background: var(--sv-surface-2); border-color: var(--sv-heart); }

/* === Transactions -- PROPERTY FILE: REQUIRED-DOCUMENTS READABILITY (2026-09-11)
   Matt's screenshots after the first theme pass: the question labels and the
   "Does this deal involve any of these?" list were dark on Navy, and the
   requirement cards were pale text on a cream box. Two causes the first pass
   could not see: a bare `label { color: var(--ink) }` rule (no class to scan
   for), and status classes the panel builds at render time
   (txn-doc-unresolved / -missing / -held / -notheld) with Cream-only colours.
   Overridden here, inside the file only.
   NAMED RULES: never delete this block by line range. */
.property-file label { color: var(--sv-text); }

.property-file .txn-doc-answer > span { font-weight: 600; color: var(--sv-text-muted); }

.property-file .txn-doc-pick strong { color: var(--sv-text); }

.property-file .txn-doc-reason { color: var(--sv-text-muted); }

.property-file .txn-doc-unresolved { background: var(--sv-surface-2); border-left-color: var(--sv-accent); }

.property-file .txn-doc-missing,
.property-file .txn-doc-notheld { color: var(--sv-heading); }

.property-file .txn-doc-held { color: var(--sv-text); }

.property-file .txn-doc-flat,
.property-file .txn-doc-attribution { color: var(--sv-text-muted); }

/* A permitted document -- applicable, but the authority allows rather than
   compels it (added 2026-09-19 with the engine's second disposition).
   ⚠ IT MUST NOT LOOK LIKE .txn-doc-required. The whole reason this class
   exists is that these two say different things about the law, and a reader
   who cannot tell them apart is back where we started. Distinct from
   .txn-doc-unresolved too: unresolved is a QUESTION, this is an OFFER.
   NAMED RULES: never delete this block by line range. */
.txn-doc-permitted {
  border-left-color: var(--sv-accent);
  border-left-style: dashed;
}
.property-file .txn-doc-permitted { background: var(--sv-surface-2); border-left-color: var(--sv-accent); }

/* ===========================================================================
   Passkey sign-in (auth_passkey_signin, 2026-09-19).
   ⚠ EVERY ONE OF THESE SHIPS HIDDEN and is revealed by passkeys.js only after
   the platform confirms a user-verifying authenticator exists. A fingerprint
   button on a device with no reader is a dead control.
   ⚠ COLOURS ARE --sv-* TOKENS so the panel is legible in Navy and Cream both;
   the row actions reuse .secondary-button rather than painting their own.
   NAMED RULES: never delete this block by line range.
   =========================================================================== */
.passkey-signin { margin-top: 8px; }
.passkey-note { margin: 6px 0 0; }
.passkey-note-error { color: var(--sv-heart, #b00020); }

.passkey-panel {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: var(--sv-surface-2);
  color: var(--sv-text);
}
.passkey-panel-head { display: grid; gap: 4px; margin-bottom: 10px; }
.passkey-panel-head strong { color: var(--sv-heading); }
.passkey-panel-head span { font-size: 0.85rem; color: var(--sv-text-muted); }
.passkey-empty { margin: 0 0 10px; font-size: 0.88rem; color: var(--sv-text-muted); }

.passkey-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.passkey-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  background: var(--sv-surface);
}
.passkey-row-main { display: grid; gap: 2px; min-width: 0; }
.passkey-row-main strong { color: var(--sv-text); overflow-wrap: anywhere; }
.passkey-row-main small { font-size: 0.78rem; color: var(--sv-text-muted); }
/* ⚠ flex-direction RESTATED. An earlier .passkey-row rule could set column and
   a later rule only overrides what it names -- the exact bug that put the
   document-row buttons underneath the filename on 2026-09-19. */
.passkey-row-actions { display: flex; flex-direction: row; gap: 6px; flex: 0 0 auto; }

@media (max-width: 560px) {
  .passkey-row { flex-direction: column; align-items: stretch; }
  .passkey-row-actions { justify-content: flex-start; }
}

/* A document waiting on an offer (listing phase, 2026-09-19).
   ⚠ MUTED ON PURPOSE, AND DISTINCT FROM .txn-doc-unresolved. Unresolved is a
   question the agent can answer now; this is one nobody can answer yet. If the
   two looked alike the regrouping would buy nothing.
   NAMED RULES: never delete this block by line range. */
.txn-doc-awaiting {
  border-left-color: var(--sv-line);
  opacity: 0.85;
}
.property-file .txn-doc-awaiting { background: var(--sv-surface-2); border-left-color: var(--sv-line); }

/* ===========================================================================
   A client's deals, on their profile (txn_seller_surfaces, 2026-09-19).
   ⚠ THE SIDE PILL IS THE POINT. A seller and a buyer client look identical
   everywhere else in the CRM; this is where an agent sees which they are.
   ⚠ COLOURS ARE --sv-* TOKENS so the panel reads in Navy and Cream both.
   NAMED RULES: never delete this block by line range.
   =========================================================================== */
.client-deals-panel .client-deal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.client-deal-open {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  background: var(--sv-surface);
  color: var(--sv-text);
  text-align: left;
  cursor: pointer;
}
.client-deal-open:hover { background: var(--sv-surface-2); }

.client-deal-side {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--sv-line);
  color: var(--sv-text-muted);
}
.client-deal-side-seller { border-color: var(--sv-accent); color: var(--sv-heading); }

.client-deal-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.client-deal-main strong { color: var(--sv-text); overflow-wrap: anywhere; }
.client-deal-main small { font-size: 0.78rem; color: var(--sv-text-muted); }
.client-deal-amount { flex: 0 0 auto; font-size: 0.85rem; color: var(--sv-text-muted); }
.client-deal-closed .client-deal-open { opacity: 0.7; }

@media (max-width: 560px) {
  /* ⚠ flex-direction RESTATED, not inherited. A later rule only overrides the
     properties it names -- the bug that put the document-row buttons under the
     filename earlier today. */
  .client-deal-open { flex-direction: row; flex-wrap: wrap; }
  .client-deal-amount { width: 100%; }
}