@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@400;500;700;800&display=swap");

:root {
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --accent-soft: #eff4ff;
  --heading: #0f172a;
  color-scheme: light;
  --ink: #1f2937;
  --ink-soft: #64748b;
  --paper: #f8fafc;
  --panel: #ffffff;
  --panel-dark: #0f172a;
  --line: #e5e7eb;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --navy: #0f172a;
  --slate: #334155;
  --blue: #2563eb;
  --success: #10b981;
  --warning: #f59e0b;
  --rose: #ef4444;
  --gold: #d4af37;
  --purple: #7c3aed;
  --teal: #14b8a6;
  --magenta: #db2777;
  --shadow: 0 22px 60px rgba(15, 23, 42, 0.1);
  --radius: 8px;
  --radius-sm: 6px;
  /* Spacing scale: use these steps only (4/8/12/16/24) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  font-family: "Aptos", "Segoe UI", sans-serif;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.08), transparent 30%),
    linear-gradient(315deg, rgba(15, 23, 42, 0.035), transparent 32%),
    var(--paper);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.app-shell {
  display: block;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: clip; /* clip does not create a scroll container, so position: sticky keeps working */
}

.side-rail {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 0;
  width: 280px;
  height: 100vh;
  padding: 24px;
  color: #f8fafc;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.2), transparent 34%),
    radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.13), transparent 38%),
    linear-gradient(180deg, #1e293b, #0f172a 72%, #0b1120);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rail-toggle {
  position: absolute;
  top: 18px;
  right: -16px;
  z-index: 20;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  box-shadow: var(--shadow);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: Georgia, serif;
  font-weight: 700;
}

.brand-mark.logo-mark {
  padding: 4px;
}

.brand-mark img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

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

.brand small {
  color: #cbd5e1;
  margin-top: 2px;
}

.nav-list {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.nav-list::-webkit-scrollbar {
  display: none;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  color: #dbeafe;
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

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

.help-link,
.settings-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-sm);
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.06);
}

.help-link {
  margin-top: auto;
}

.help-link + .settings-link {
  margin-top: 0;
}

.logout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: #f8f8f8;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.logout-button:hover {
  color: #fff;
  background: var(--blue);
}

.email-template-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.email-template-row button {
  min-height: 44px;
  white-space: nowrap;
}

.nav-list a.active,
.nav-list a:hover,
.help-link.active,
.help-link:hover,
.settings-link.active,
.settings-link:hover {
  color: white;
  background: rgba(37, 99, 235, 0.22);
  box-shadow: inset 3px 0 0 var(--success);
}

.rail-note {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  color: #cbd5e1;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.06);
}

.rail-note span {
  display: block;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 5px;
}

.workspace {
  margin-left: 280px;
  min-width: 0;
  width: calc(100% - 280px);
  max-width: calc(100vw - 280px);
  min-height: 100dvh;
  padding: 24px;
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 1121px) {
  body.rail-collapsed .side-rail {
    width: 86px;
    padding: 16px 12px;
    align-items: center;
  }

  body.rail-collapsed .workspace {
    margin-left: 86px;
    width: calc(100% - 86px);
    max-width: calc(100vw - 86px);
  }

  body.rail-collapsed .brand span:not(.brand-mark),
  body.rail-collapsed .rail-note {
    display: none;
  }

  body.rail-collapsed .brand {
    justify-content: center;
  }

  body.rail-collapsed .nav-list {
    width: 100%;
  }

  body.rail-collapsed .nav-list a {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 8px;
    font-size: 0;
  }

  body.rail-collapsed .help-link,
  body.rail-collapsed .settings-link {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 42px;
    padding: 8px;
    font-size: 0;
  }

  body.rail-collapsed .nav-list a span:not(.nav-icon),
  body.rail-collapsed .help-link span:not(.nav-icon),
  body.rail-collapsed .settings-link span:not(.nav-icon),
  body.rail-collapsed .logout-button span:not(.nav-icon) {
    display: none;
  }

  body.rail-collapsed .nav-icon {
    width: 21px;
    height: 21px;
  }

  body.rail-collapsed .logout-button {
    width: 42px;
    min-height: 42px;
    padding: 0;
    font-size: 0;
  }

}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.date-line,
.section-label {
  margin: 0 0 5px;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 850;
}

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

h1 {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

h3 {
  font-size: 1rem;
}

.top-actions,
.field-row,
.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* A <label> defaults to width:100%, which — inside a flex row — makes it compete
   aggressively for space. A button sharing that row with one or more labels could get
   squeezed down to where its text wraps onto two lines. Buttons should always keep their
   natural size and never wrap, regardless of what else is in the row with them. */
.field-row > button,
.field-row > .primary-button,
.field-row > .ghost-button,
.field-row > .danger-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.top-actions.slim {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.search-wrap input {
  width: min(360px, 44vw);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--panel);
}

.primary-button,
.ghost-button,
.danger-button,
.text-button,
.segmented button {
  border: 0;
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: 0 14px;
  font-weight: 800;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.primary-button {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
}

.primary-button:hover {
  color: #fff;
  background: var(--accent-dark);
}

.ghost-button,
.segmented {
  color: var(--slate);
  border: 1px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.ghost-button:hover {
  color: #fff;
  background: var(--slate);
  border-color: var(--slate);
}

.danger-button {
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #b91c1c;
  background: #fff5f5;
  white-space: nowrap;
}

.danger-button:hover:not(:disabled) {
  color: #fff;
  background: var(--rose);
}

.danger-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.text-button {
  color: var(--accent-dark);
  background: transparent;
}

/* Icon-only buttons (e.g. Refresh) — square, centered tap target instead of
   the asymmetric padding meant for icon+label buttons (release bl-3). */
.icon-only-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 34px;
  min-width: 34px;
  gap: 0;
}

.compact {
  min-height: 34px;
}

.full {
  width: 100%;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.25fr) minmax(300px, 0.95fr);
  gap: 16px;
}

.focus-panel {
  border-color: rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), var(--panel) 36%, #fff);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.metric-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.metric-card strong,
.metric-card span {
  display: block;
}

.metric-card strong {
  font-family: Georgia, serif;
  font-size: 1.9rem;
}

.metric-card span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 850;
}

.dashboard-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
}

.quick-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 8px;
}

.quick-link-grid a {
  display: grid;
  gap: 4px;
  min-height: 88px;
  align-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.quick-link-grid strong,
.quick-link-grid span {
  display: block;
}

.quick-link-grid span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}

.panel {
  min-width: 0;
  border: 1px solid rgba(220, 227, 234, 0.92);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.tint-contacts,
.tint-tasks,
.tint-documents,
.tint-approvals,
.tint-campaigns,
.tint-projects,
.tint-email,
.tint-finance,
.tint-forms,
.tint-sharing,
.tint-history,
.tint-tags,
.tint-notes,
.tint-portal,
.follow-panel {
  --card-tint: rgba(37, 99, 235, 0.08);
  --card-tint-strong: rgba(37, 99, 235, 0.22);
  --card-accent: var(--blue);
  border-color: var(--card-tint-strong);
  background:
    linear-gradient(135deg, var(--card-tint), var(--panel) 44%),
    var(--panel);
}

.tint-contacts {
  --card-tint: rgba(37, 99, 235, 0.16);
  --card-tint-strong: rgba(37, 99, 235, 0.34);
  --card-accent: var(--blue);
}

.tint-tasks,
.follow-panel {
  --card-tint: rgba(245, 158, 11, 0.18);
  --card-tint-strong: rgba(245, 158, 11, 0.36);
  --card-accent: var(--warning);
}

.tint-documents {
  --card-tint: rgba(109, 40, 217, 0.22);
  --card-tint-strong: rgba(109, 40, 217, 0.48);
  --card-accent: var(--purple);
}

.tint-approvals {
  --card-tint: rgba(16, 185, 129, 0.18);
  --card-tint-strong: rgba(16, 185, 129, 0.36);
  --card-accent: var(--success);
}

.tint-campaigns {
  --card-tint: rgba(219, 39, 119, 0.16);
  --card-tint-strong: rgba(219, 39, 119, 0.32);
  --card-accent: var(--magenta);
}

.tint-projects,
.tint-portal {
  --card-tint: rgba(51, 65, 85, 0.13);
  --card-tint-strong: rgba(51, 65, 85, 0.28);
  --card-accent: var(--slate);
}

.tint-email,
.tint-forms {
  --card-tint: rgba(20, 184, 166, 0.16);
  --card-tint-strong: rgba(20, 184, 166, 0.32);
  --card-accent: var(--teal);
}

.tint-inbox {
  --card-tint: rgba(37, 99, 235, 0.14);
  --card-tint-strong: rgba(37, 99, 235, 0.32);
  --card-accent: var(--blue);
  border-color: var(--card-tint-strong);
  border-left: 5px solid var(--card-accent);
  background:
    linear-gradient(135deg, var(--card-tint), var(--panel) 44%),
    var(--panel);
}

.tint-finance {
  --card-tint: rgba(212, 175, 55, 0.13);
  --card-tint-strong: rgba(212, 175, 55, 0.28);
  --card-accent: var(--gold);
}

.tint-sharing,
.tint-history,
.tint-tags,
.tint-notes {
  --card-tint: rgba(100, 116, 139, 0.08);
  --card-tint-strong: rgba(100, 116, 139, 0.2);
  --card-accent: var(--slate);
}

.tint-contacts,
.tint-tasks,
.tint-documents,
.tint-approvals,
.tint-campaigns,
.tint-projects,
.tint-email,
.tint-finance,
.tint-forms,
.tint-sharing,
.tint-history,
.tint-tags,
.tint-notes,
.tint-portal {
  border-left: 5px solid var(--card-accent);
}

.follow-panel {
  border-left: 5px solid var(--card-accent);
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.quick-add-panel {
  grid-row: auto;
}

.rates-panel {
  min-height: 320px;
}

.task-panel,
.links-panel {
  min-height: 170px;
}

.quick-form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 4px;
  width: 100%;
  /* Without this, a grid item's default min-width is "auto" — i.e. the
     min-content size of its widest child. Native <input type="date"> has a
     wide intrinsic min-content width, so nested inside this grid label it
     was pushing the whole row past its panel's right edge on narrow phones
     (Due date field, release bl-2). min-width:0 lets it shrink to fit
     instead. Purely a floor change — doesn't affect layout wherever there
     was already room. */
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  color: var(--ink);
  background: var(--panel);
}

input[type="checkbox"] {
  width: auto;
  min-width: 16px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 3px solid rgba(184, 138, 44, 0.28);
  outline-offset: 2px;
}

.pill,
.count-badge,
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 850;
}

.pill {
  padding: 8px 8px;
  color: var(--slate);
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.count-badge {
  justify-content: center;
  min-width: 34px;
  height: 34px;
  color: white;
  background: var(--panel-dark);
}

.rate-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rate-number span {
  font-family: Georgia, serif;
  font-size: 3rem;
}

.rate-number small,
.muted {
  color: var(--ink-soft);
}

.small {
  font-size: 0.85rem;
}

#rateChart {
  width: 100%;
  height: 220px;
  margin-top: 8px;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.task-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.task-list li span,
.task-list li strong,
.task-list li small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-list li small {
  margin-top: 3px;
  color: var(--ink-soft);
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.quick-links a {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-weight: 850;
}

.wide-panel {
  scroll-margin-top: 20px;
}

.segmented {
  display: inline-flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.segmented button {
  border-radius: 0;
  background: var(--panel);
  color: var(--ink-soft);
}

.segmented button.active {
  color: white;
  background: var(--panel-dark);
}

.campaign-tabs {
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 4px;
  gap: 4px;
  border-radius: 10px;
}

.campaign-tabs button {
  border-radius: 7px;
  background: transparent;
  color: var(--slate);
  font-weight: 800;
  padding: 8px 16px;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.campaign-tabs button:hover {
  background: var(--panel);
  color: var(--ink);
}

.campaign-tabs button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.pipeline-lane {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  min-width: 0;
  min-height: 170px;
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pipeline-lane::-webkit-scrollbar {
  width: 8px;
}

.pipeline-lane::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.lane-title {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
  font-weight: 900;
}

.sync-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border: 1px solid rgba(194, 145, 46, 0.34);
  border-radius: var(--radius);
  background: #fff8e8;
  color: #5f4610;
}

.sync-notice strong {
  color: #2d2208;
}

.sync-notice p {
  margin: 0;
}

.deal-card {
  display: grid;
  gap: 8px;
  width: calc(100% - 20px);
  margin: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border-left: 4px solid var(--blue);
  overflow-wrap: anywhere;
}

.deal-card a {
  display: block;
}

.stage-control {
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.stage-control select {
  margin-top: 5px;
  padding: 8px 8px;
  font-size: 0.84rem;
  font-weight: 800;
}

.pipeline-section + .pipeline-section {
  margin-top: 4px;
}

.deal-card.seller {
  border-left-color: var(--warning);
}

.deal-card strong,
.deal-card span {
  display: block;
}

.deal-card span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: 5px;
  line-height: 1.35;
}

.next-task-line {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: #fff7ed;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}

.next-task-line strong {
  display: block;
  color: #c2410c;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contacts-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  gap: 16px;
}

.filter-row {
  margin-bottom: 12px;
}

.tag {
  border: 0;
  padding: 4px 8px;
  color: #1d4ed8;
  background: var(--accent-soft);
}

.tag:hover {
  color: white;
  background: var(--accent);
}

.contact-table {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), var(--panel) 48%),
    var(--panel);
  text-align: left;
}

.contact-row.selectable-row {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.contact-row.selectable-row a {
  min-width: 0;
}

.row-check {
  display: grid;
  place-items: center;
  width: 28px;
}

.contact-row em {
  display: block;
  margin-top: 8px;
  color: var(--accent-dark);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 850;
}

.contact-table.roomy {
  max-height: none;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.filter-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px minmax(220px, 0.8fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.tag-menu {
  position: relative;
}

.tag-menu summary {
  min-height: 43px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.tag-popover {
  position: absolute;
  z-index: 5;
  inset: calc(100% + 8px) 0 auto auto;
  width: min(320px, 80vw);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.tag-popover #clearTags {
  margin-top: 8px;
}
.tag-dropdown-list {
  max-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.check-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.check-option:hover {
  background: var(--surface-3);
}

.check-option input {
  width: auto;
  margin-top: 2px;
}

.check-option > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.check-option small {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 850;
}

summary {
  overflow-wrap: anywhere;
}

summary > span {
  min-width: 0;
}

summary > span > small,
summary > span > strong,
summary > span > em {
  display: block;
  min-width: 0;
}

summary small,
summary strong,
summary em {
  line-height: 1.35;
}

summary small + strong,
summary strong + small,
summary strong + span,
summary span + em {
  margin-top: 3px;
}

summary .pill,
summary .tag {
  flex-shrink: 0;
}

.contact-row.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.contact-row strong,
.contact-row small {
  display: block;
}

.contact-row small {
  color: var(--ink-soft);
  margin-top: 4px;
}

.type-chip {
  color: white;
  background: var(--slate);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.type-chip.Seller {
  background: var(--warning);
}

.type-chip.Other {
  background: var(--slate);
}

.detail-panel {
  min-height: 620px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.detail-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent 42%),
    var(--panel);
  box-shadow: var(--shadow);
  max-width: 100%;
}

.detail-hero h1 {
  margin-bottom: 10px;
}

.hero-actions {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 220px;
}

.detail-name {
  font-family: Georgia, serif;
  font-size: 2.1rem;
  margin-bottom: 6px;
}

.detail-grid,
.consult-grid,
.research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.contact-action-panel {
  display: grid;
  gap: 8px;
}

.contact-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-action-grid a[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.info-box,
.history-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--panel);
}

.detail-hero.tint-contacts,
.info-box.tint-contacts,
.panel.tint-contacts,
.related-panel.tint-contacts {
  border-color: var(--card-tint-strong);
  border-left: 5px solid var(--card-accent);
  background:
    linear-gradient(135deg, var(--card-tint), var(--panel) 44%),
    var(--panel);
}

.tint-contacts .mini-row,
.tint-contacts .related-row,
.tint-contacts .compact-contact-option,
.project-chip {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.06);
}

.tint-documents .drop-card,
.tint-documents .check-option {
  border-color: rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.055);
}

.tint-approvals .campaign-step,
.tint-tasks .project-task-row,
.follow-panel .suggestion-card {
  background:
    linear-gradient(135deg, var(--card-tint), var(--panel) 56%),
    var(--panel);
}

.info-box small {
  display: block;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 850;
}

.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.tag-editor {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tag-input-wrap {
  position: relative;
  z-index: 6;
}

.tag-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  max-height: 230px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.tag-suggestions[hidden] {
  display: none;
}

.tag-suggestion {
  display: block;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 12px;
  color: var(--accent-dark);
  background: var(--panel);
  text-align: left;
  font-size: 0.92rem;
  font-weight: 900;
}

.tag-suggestion:last-child {
  border-bottom: 0;
}

.tag-suggestion:hover,
.tag-suggestion:focus-visible,
.tag-suggestion.active {
  background: #eefafa;
}

.activity-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.form-shell {
  display: grid;
  gap: 12px;
}

.form-manager {
  box-shadow: none;
}

.related-panel {
  box-shadow: none;
}

.related-panel summary {
  cursor: pointer;
  list-style: none;
}

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

.related-panel summary span,
.related-panel summary small,
.related-panel summary strong {
  display: block;
}

.related-panel summary small {
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 850;
}

.related-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.related-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.related-row strong,
.related-row small {
  display: block;
}

.related-row small {
  color: var(--ink-soft);
  margin-top: 3px;
}

.related-row em {
  color: var(--accent-dark);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.consult-section {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.edit-panel {
  box-shadow: none;
}

.edit-panel summary {
  font-weight: 900;
  cursor: pointer;
}

.wide-field {
  grid-column: 1 / -1;
}

.follow-panel {
  border-color: rgba(245, 158, 11, 0.3);
}

.follow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.suggestion-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.suggestion-card > strong {
  display: block;
  margin-bottom: 6px;
}

.suggestion-card textarea {
  margin: 8px 0 12px;
  min-height: 126px;
}

.consult-section summary {
  padding: 12px;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.consult-section .consult-grid {
  padding: 0 14px 14px;
}

.sub-panel {
  box-shadow: none;
}

.task-stack {
  display: grid;
  gap: 8px;
}

.todo-item span,
.calendar-task span,
.calendar-task em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.todo-item small {
  display: block;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.3;
}

.timeline {
  display: grid;
  gap: 8px;
}

.history-item span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin: 3px 0 6px;
}

.history-item p {
  margin-bottom: 0;
}

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

.todo-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.task-manage-row,
.project-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.task-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.task-actions .compact {
  min-height: 30px;
  padding: 4px 8px;
}

.task-date-control {
  display: block;
  min-width: 118px;
}

.task-date-control input {
  width: 112px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  background: var(--panel);
  font: 800 0.82rem/1 var(--font-body);
  font-weight: 850;
  color: var(--ink);
}

.task-date-control span {
  display: none;
}

.project-task-row .mini-toggle {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.project-task-row .task-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: end;
  gap: 4px;
  width: max-content;
}

.project-task-row .task-actions > * {
  width: auto;
}

.project-task-row .task-date-control {
  min-width: 0;
}

.project-task-row .mini-toggle {
  white-space: nowrap;
}

.project-task-row .mini-toggle,
.project-task-row .task-actions .compact,
.project-task-row .task-date-control input {
  font-size: 0.78rem;
}

.compact-contact-option {
  padding: 8px 8px;
}

.compact-contact-option strong {
  line-height: 1.15;
}

.completed-task-section {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.completed-task-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.completed-task-section summary::-webkit-details-marker {
  display: none;
}

.completed-task-section summary small {
  color: var(--ink-soft);
}

.completed-task-stack {
  padding: 0 12px 10px;
}

.todo-item input {
  margin-top: 3px;
}

.todo-item.done {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.calendar-page-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.calendar-task-list {
  display: grid;
  gap: 16px;
}

.calendar-day-group {
  display: grid;
  gap: 8px;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.06);
}

.calendar-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.12);
  border-left: 5px solid var(--warning);
  background: var(--surface-2);
}

.calendar-day-heading strong {
  font-size: 1rem;
}

.calendar-day-heading span {
  color: #c2410c;
  font-size: 0.78rem;
  font-weight: 850;
}

.calendar-task,
.cadence-card,
.mini-row,
.social-card {
  display: block;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.calendar-task {
  display: grid;
  grid-template-columns: auto 96px minmax(0, 1fr) 88px;
  gap: 4px 12px;
  align-items: center;
  max-width: 100%;
  margin: 0 12px;
}

.calendar-task input {
  width: auto;
}

.calendar-task > * {
  min-width: 0;
}

.calendar-task small,
.calendar-task a {
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 850;
}

.calendar-task input {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.calendar-task strong {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.calendar-task span {
  grid-column: 3;
  grid-row: 1;
  font-weight: 850;
}

.calendar-task em {
  grid-column: 3;
  grid-row: 2;
}

.calendar-task a,
.calendar-task small {
  grid-column: 4;
  grid-row: 1 / span 2;
}

.calendar-task.done {
  border-color: rgba(16, 185, 129, 0.28);
  background: #ecfdf5;
  opacity: 0.82;
}

.calendar-task.done small,
.calendar-task.done a {
  color: #047857;
}

.calendar-task em,
.mini-row span {
  color: var(--ink-soft);
  font-style: normal;
  overflow-wrap: anywhere;
}

.cadence-card + .cadence-card {
  margin-top: 12px;
}

.soft-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

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

.mini-row strong,
.mini-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-list small {
  display: block;
  color: var(--ink-soft);
  margin-top: 3px;
}

.spacious {
  min-height: 0;
}

.calendar-card {
  display: grid;
  gap: 8px;
  min-height: 142px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.calendar-card.active {
  color: white;
  background: var(--panel-dark);
}

.import-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.scanner-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.scanner-capture {
  display: grid;
  gap: 8px;
}

.scanner-preview {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.2), transparent),
    #0f172a;
}

.scanner-preview::after {
  content: "";
  position: absolute;
  inset: 24px;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.scanner-preview.has-image::after,
.scanner-preview.has-video::after {
  content: "";
  border-color: var(--surface-2);
}

.card-frame-guide {
  position: absolute;
  inset: 24px;
  display: grid;
  place-items: center;
  color: var(--surface-2);
  font-weight: 850;
  text-align: center;
  pointer-events: none;
}

.scanner-preview.has-image .card-frame-guide {
  display: none;
}

.scanner-quality {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.scanner-quality:empty {
  display: none;
}

.scanner-quality strong,
.scanner-quality span {
  display: block;
}

.scanner-quality strong {
  font-size: 0.82rem;
}

.scanner-quality span {
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 850;
}

.scanner-quality .ok {
  color: #047857;
  background: #ecfdf5;
}

.scanner-quality .warn {
  color: #6d4d0b;
  background: #fff4d8;
}

.scanner-preview video,
.scanner-preview img {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: contain;
  background: #101820;
}

.scanner-preview.has-video video,
.scanner-preview.has-image img {
  display: block;
}

.scanner-form {
  display: grid;
  gap: 12px;
}

.clearable-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.clearable-field button {
  min-height: 0;
  border: 0;
  padding: 2px 0;
  color: var(--accent-dark);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 900;
}

.clearable-field button:hover,
.clearable-field button:focus-visible {
  text-decoration: underline;
}

.scanner-action-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.scanner-action-bar.secondary {
  grid-template-columns: repeat(3, 1fr);
}

.capture-label,
.large-action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.business-card-thumb {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 8px 0 14px;
}

.drop-card,
.share-card {
  border: 1px dashed #b8c5cf;
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-2);
}

.batch-share-card {
  margin: 12px 0 18px;
}

.share-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.45fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}

.share-panel summary,
.contact-project-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.share-panel summary::-webkit-details-marker,
.contact-project-panel summary::-webkit-details-marker {
  display: none;
}

.share-panel summary::after,
.contact-project-panel summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 950;
}

.share-panel[open] summary::after,
.contact-project-panel[open] summary::after {
  content: "-";
}

.share-panel summary span,
.contact-project-panel summary span {
  display: grid;
  gap: 4px;
}

.share-panel summary small,
.contact-project-panel summary small,
.share-panel summary strong,
.contact-project-panel summary strong {
  display: block;
}

.share-user-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.share-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.share-user-row > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 900;
}

.share-user-row small {
  display: block;
  color: var(--ink-soft);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.notice-panel {
  padding: 12px 16px;
  border: 1px solid rgba(210, 170, 92, 0.45);
  border-radius: var(--radius-sm);
  background: #fff8e8;
  color: #59431a;
  font-weight: 850;
  margin-bottom: 16px;
}

.drop-card input {
  margin: 12px 0;
}

.drop-card strong,
.drop-card span {
  display: block;
}

.research-panel {
  margin-bottom: 50px;
}

.research-grid p {
  color: var(--ink-soft);
  margin-bottom: 0;
}

.campaign-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(300px, 0.85fr);
  gap: 16px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
}

.integration-checklist {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.integration-checklist span {
  display: block;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-soft);
  font-weight: 850;
}

.settings-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 8px;
}

.settings-section {
  margin-bottom: 16px;
}

.settings-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.settings-section > summary::-webkit-details-marker {
  display: none;
}

.settings-section > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 950;
  justify-self: end;
}

.settings-section[open] > summary::after {
  content: "-";
}

.settings-section > summary strong,
.settings-section > summary small {
  display: block;
}

.settings-section > summary > .pill,
.settings-section > summary > .primary-button,
.settings-section > summary > .ghost-button {
  justify-self: center;
  align-self: center;
}

.settings-section > .quick-form,
.settings-section > .integration-grid {
  margin-top: 18px;
}

.settings-subhead {
  padding-top: 8px;
}

.quick-link-slots {
  display: grid;
  gap: 12px;
}

.quick-link-slot {
  display: grid;
  grid-template-columns: minmax(140px, 0.75fr) minmax(220px, 1fr) minmax(180px, 0.85fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.project-campaign-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.project-campaign-row a {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.project-campaign-row a span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: #be185d;
  background: #fce7f3;
  font-size: 0.75rem;
  font-weight: 900;
}

.document-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(109, 40, 217, 0.42);
  border-left: 5px solid var(--purple);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(76, 29, 149, 0.14);
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.2), var(--panel) 58%),
    var(--panel);
}

.document-row .check-option {
  margin: 0;
}

.document-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.document-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #4c1d95;
  background: rgba(109, 40, 217, 0.2);
}

.document-card-main strong,
.document-card-main small {
  display: block;
}

.document-card-main small {
  margin-top: 4px;
  color: var(--ink-soft);
  font-weight: 850;
}

.document-status-row,
.document-card-actions,
.project-contact-actions,
.project-contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.document-status-row {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.document-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #4c1d95;
  background: rgba(109, 40, 217, 0.18);
  font-size: 0.78rem;
  font-weight: 900;
}

.project-contact-actions {
  margin: 2px 0 4px;
}

.project-contact-list {
  gap: 8px;
}

.project-contact-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), var(--panel) 52%),
    var(--panel);
}

.project-contact-main strong,
.project-contact-main span {
  display: block;
}

.project-contact-main span {
  margin-top: 4px;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 850;
}

.settings-checks label,
.consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.upload-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.upload-card .panel-heading {
  margin-bottom: 0;
}

.upload-card h2 {
  font-size: 1rem;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.range-value {
  display: inline-flex;
  justify-content: center;
  min-width: 42px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--slate);
  background: var(--accent-soft);
  font-size: 0.76rem;
  font-weight: 900;
}

.image-preview {
  display: grid;
  place-items: center;
  min-height: 170px;
  overflow: hidden;
  border: 1px dashed #b8c5cf;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-soft);
  font-weight: 850;
}

.image-preview.wide {
  min-height: 210px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
}

.image-preview span {
  padding: 12px;
  text-align: center;
}

.public-site {
  position: relative;
  min-height: 100vh;
  background: var(--surface-2);
  color: #f7f1e8;
  font-family: "Jost", "Aptos", "Segoe UI", sans-serif;
}

.public-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 10, 13, 0.9), rgba(8, 10, 13, 0.68) 44%, rgba(8, 10, 13, 0.3)),
    linear-gradient(180deg, rgba(8, 10, 13, 0.2), rgba(8, 10, 13, 0.82)),
    var(--public-hero-image, url("https://images.pexels.com/photos/19168388/pexels-photo-19168388.jpeg?auto=compress&cs=tinysrgb&w=2000")) center center / cover;
}

.public-site h1,
.public-site h2,
.public-site h3 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  letter-spacing: -0.018em;
  font-weight: 700;
}

.public-site .section-label {
  color: var(--public-accent, #d8b46a);
}

.public-site .primary-button {
  color: var(--public-button-text, #111);
  background: var(--public-accent, #d8b46a);
  box-shadow: 0 18px 34px rgba(216, 180, 106, 0.24);
}

.public-site .primary-button:hover {
  background: var(--public-accent-hover, #f0cf83);
}

.public-site .ghost-button {
  color: #fff;
  border: 2px solid var(--surface-2);
  background: rgba(8, 10, 13, 0.66);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 4vw, 54px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(8, 10, 13, 0.88);
  backdrop-filter: blur(14px);
}

.public-brand {
  color: #fff;
  min-width: 0;
}

.public-brand .brand-mark {
  color: var(--public-accent, #d8b46a);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.public-brand small {
  color: rgba(247, 241, 232, 0.66);
}

.public-brand-text {
  display: grid;
  min-width: 0;
}

.public-compliance-marks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.public-compliance-marks img {
  display: block;
  width: auto;
  height: 30px;
  object-fit: contain;
}

.public-compliance-marks .equal-housing-mark {
  filter: invert(1) brightness(2);
}

.public-header nav {
  display: flex;
  gap: 8px;
}

.public-header nav a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: rgba(247, 241, 232, 0.72);
  font-weight: 850;
}

.public-header nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.public-hero,
.public-section {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.72fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  min-height: calc(100vh - 82px);
  padding: 70px 0 86px;
}

.public-hero-copy {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2vw, 24px) 0;
}

.public-hero-copy h1 {
  max-width: 780px;
  font-size: clamp(3rem, 7.4vw, 6.45rem);
  line-height: 0.88;
  color: #fff9ef;
  text-shadow: 0 10px 44px rgba(0, 0, 0, 0.32);
}

.public-hero-copy p:not(.section-label) {
  max-width: 660px;
  color: rgba(247, 241, 232, 0.72);
  font-size: 1.15rem;
  line-height: 1.55;
}

.public-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.public-hero-actions .primary-button,
.public-hero-actions .ghost-button {
  min-height: 58px;
  padding: 0 26px;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.public-hero-actions .ghost-button:hover {
  color: #111;
  background: #fff7e8;
}

.public-agent-card,
.public-lead-form,
.public-proof,
.public-visual-card,
.public-services article,
.public-process li {
  border: 1px solid rgba(220, 227, 234, 0.92);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.public-visual-card {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.16);
  background: #15181d;
}

.public-hero-image,
.public-hero-placeholder {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}

.public-headshot-card {
  max-width: 380px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.36);
}

.public-headshot-card .public-hero-image {
  border-radius: inherit;
}

.public-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 13, 0.08), rgba(8, 10, 13, 0.56));
  pointer-events: none;
}

.public-hero-placeholder {
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 24px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent, rgba(16, 24, 32, 0.72)),
    radial-gradient(circle at 30% 20%, rgba(12, 143, 140, 0.45), transparent 34%),
    linear-gradient(145deg, #101820, #283443);
}

.public-hero-placeholder span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}

.public-hero-placeholder strong {
  font-family: Georgia, serif;
  font-size: 5rem;
}

.public-agent-strip {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  z-index: 2;
  color: #f7f1e8;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 10, 13, 0.7);
  backdrop-filter: blur(12px);
}

.public-agent-strip img,
.public-mini-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  background: #15181d;
  font-family: Georgia, serif;
  font-weight: 800;
}

.public-agent-strip span,
.public-agent-strip strong,
.public-agent-strip small {
  display: block;
}

.public-agent-strip small {
  color: rgba(247, 241, 232, 0.66);
}

.public-agent-strip span {
  min-width: 0;
}

.client-consult-site {
  min-height: 100vh;
  padding: clamp(16px, 4vw, 42px);
}

.client-consult-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.client-consult-card {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  color: #15181d;
  background: var(--panel);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.26);
}

.client-consult-card h1 {
  color: #15181d;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  line-height: 0.95;
}

.client-fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.client-fieldset legend {
  padding: 0 8px;
  color: #15181d;
  font-weight: 900;
}

.public-agent-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  color: #15181d;
}

.public-agent-card img,
.public-avatar {
  width: 100%;
  aspect-ratio: 1.05;
  border-radius: var(--radius);
  object-fit: cover;
  background:
    radial-gradient(circle at 25% 20%, rgba(201, 162, 74, 0.38), transparent 34%),
    linear-gradient(145deg, #111111, #c9a24a);
}

.public-avatar {
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 800;
}

.public-agent-card strong {
  margin-top: 6px;
  font-size: 1.2rem;
  color: #15181d;
}

.public-agent-card span,
.public-agent-card a {
  color: #53606f;
  font-weight: 800;
}

.public-band {
  width: 100%;
  margin: 0;
  padding: 74px max(16px, calc((100vw - 1120px) / 2));
  color: #15181d;
  background: var(--surface-2);
}

.public-section-heading {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin-bottom: 22px;
}

.public-section-heading h2 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1;
}

.public-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.public-services article {
  position: relative;
  min-height: 240px;
  padding: 16px;
  overflow: hidden;
  color: #fff;
  border-color: rgba(21, 24, 29, 0.18);
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.3), rgba(8, 10, 13, 0.88)),
    var(--service-image) center / cover;
}

.public-services span {
  color: var(--public-accent, #d8b46a);
  font-weight: 950;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.public-services h3 {
  margin-top: 54px;
  font-size: 1.55rem;
  color: #fff;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.95),
    1px -1px 0 rgba(0, 0, 0, 0.95),
    -1px 1px 0 rgba(0, 0, 0, 0.95),
    1px 1px 0 rgba(0, 0, 0, 0.95),
    0 8px 24px rgba(0, 0, 0, 0.75);
}

.public-services p,
.public-process span {
  color: rgba(21, 24, 29, 0.68);
  line-height: 1.5;
}

.public-services p {
  color: var(--surface-2);
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.88),
    1px -1px 0 rgba(0, 0, 0, 0.88),
    -1px 1px 0 rgba(0, 0, 0, 0.88),
    1px 1px 0 rgba(0, 0, 0, 0.88),
    0 6px 18px rgba(0, 0, 0, 0.8);
}

.public-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  padding: 74px max(16px, calc((100vw - 1120px) / 2));
  color: #15181d;
  background: var(--panel);
}

.public-section#areas {
  display: block;
  text-align: center;
}

.public-section#areas > div:first-child {
  max-width: 720px;
  margin: 0 auto 26px;
}

.public-section#areas .muted {
  margin-inline: auto;
}

.public-about-section {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(8, 10, 13, 0.86), rgba(8, 10, 13, 0.7)),
    url("https://images.pexels.com/photos/16869702/pexels-photo-16869702.jpeg?auto=compress&cs=tinysrgb&w=1600") center / cover;
  color: #fff9ef;
}

.public-about-section p:not(.section-label) {
  max-width: 640px;
  color: rgba(247, 241, 232, 0.74);
  font-size: 1.12rem;
  line-height: 1.65;
}

.public-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.public-area-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
}

.public-area-list span {
  padding: 12px 12px;
  border: 1px solid rgba(21, 24, 29, 0.16);
  border-radius: 999px;
  background: #111;
  color: #f7f1e8;
  font-weight: 900;
  text-transform: capitalize;
}

.public-process-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111;
  color: #fff9ef;
}

.public-process-band .public-section-heading h2 {
  color: #fff9ef;
}

.public-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.public-process li {
  display: grid;
  gap: 8px;
  padding: 16px;
  color: #fff9ef;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.public-process strong {
  font-size: 1.05rem;
}

.public-process span {
  color: rgba(247, 241, 232, 0.72);
}

.public-form-section {
  align-items: stretch;
  background: var(--surface-2);
}

.public-proof,
.public-lead-form {
  padding: clamp(18px, 3vw, 28px);
  color: #15181d;
}

.public-proof p:not(.section-label),
#publicTestimonial {
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.55;
}

.public-social-card {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--radius);
  color: #fff9ef;
  background:
    linear-gradient(135deg, rgba(216, 180, 106, 0.22), transparent 42%),
    #111;
}

.public-social-card span {
  color: var(--public-accent, #d8b46a);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 900;
}

.public-social-card strong {
  color: #fff9ef;
  font-size: 1.08rem;
}

.public-social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}

.public-social-links a,
.capture-success a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: #111;
  background: var(--public-accent, #d8b46a);
  font-weight: 900;
}

.public-lead-form {
  display: grid;
  gap: 12px;
}

.capture-success {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: var(--radius-sm);
  color: #047857;
  background: #ecfdf5;
  font-weight: 850;
}

.public-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 24px max(16px, calc((100vw - 1120px) / 2)) 44px;
  background: var(--surface-2);
  color: #5b5147;
  font-weight: 850;
}

.public-footer a {
  color: #111;
}

.campaign-recipient-list,
.campaign-step-list,
.campaign-history,
.transaction-list {
  display: grid;
  gap: 8px;
}

.project-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06);
}

.project-row.closed {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, rgba(16,185,129,0.14), var(--panel) 42%);
  box-shadow: 0 14px 34px rgba(16, 185, 129, 0.12);
}

.project-row.closed .type-chip {
  background: var(--success);
}

.project-row span {
  min-width: 0;
}

.project-row strong,
.project-row small,
.project-row em {
  display: block;
}

.project-row em {
  margin-top: 4px;
  color: var(--ink-soft);
  font-style: normal;
  font-size: 0.82rem;
}

.project-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr) auto auto;
  align-items: end;
  gap: 12px;
}

.project-complete-toggle {
  min-height: 44px;
  align-content: center;
}

.project-create-form .primary-button {
  min-height: 44px;
  white-space: nowrap;
}

.template-builder {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 5px solid var(--warning);
  border-radius: var(--radius);
}

.template-builder summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

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

.project-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

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

.project-card summary span,
.project-card summary strong,
.project-card summary small {
  display: block;
}

.project-card summary em {
  color: var(--ink-soft);
  font-style: normal;
  font-weight: 850;
}

.project-preview {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 800;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.project-secondary-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.project-secondary-stack > details {
  display: grid;
  gap: 12px;
}

.project-secondary-stack > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.project-secondary-stack > details > summary span,
.project-secondary-stack > details > summary small,
.project-secondary-stack > details > summary strong,
.template-builder summary span,
.template-builder summary small,
.template-builder summary strong {
  display: block;
  min-width: 0;
  line-height: 1.35;
}

.project-secondary-stack > details > summary small + strong,
.template-builder summary small + strong {
  margin-top: 4px;
}

.project-secondary-stack > details > summary::-webkit-details-marker {
  display: none;
}

.project-secondary-stack > details > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 950;
}

.project-secondary-stack > details[open] > summary::after {
  content: "-";
}

.project-grid section {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.project-picker {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.document-card-list {
  gap: 12px;
  max-height: 430px;
}

.drop-card strong,
.drop-card span {
  display: block;
  min-width: 0;
  line-height: 1.35;
}

.drop-card strong + span {
  margin-top: 6px;
}

.tall-picker {
  max-height: 430px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.mini-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.portal-link-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.portal-link-box input {
  font-size: 0.8rem;
}

.client-project-page {
  min-height: 100dvh;
  background: transparent;
}

.client-project-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: 52vh;
  align-content: center;
}

.client-project-hero .public-hero-copy {
  max-width: 820px;
}

.client-project-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  grid-template-areas:
    "timeline documents"
    "approvals approvals";
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

.client-project-grid > div {
  display: grid;
  gap: 12px;
}

.client-progress-area {
  grid-area: timeline;
}

.client-documents-area {
  grid-area: documents;
}

.client-approvals-area {
  grid-area: approvals;
}

.client-timeline,
.client-decision-panel,
.client-document-list {
  display: grid;
  gap: 8px;
}

.client-timeline-item,
.client-decision-card,
.client-document-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius);
  background: var(--panel);
}

.client-document-card {
  border-color: rgba(109, 40, 217, 0.38);
  border-left: 5px solid var(--purple);
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.16), var(--panel) 60%),
    var(--panel);
  box-shadow: 0 12px 24px rgba(76, 29, 149, 0.12);
}

.client-document-card .ghost-button {
  justify-self: start;
  min-width: 170px;
}

.client-decision-panel {
  max-width: 920px;
}

.client-decision-card {
  max-width: 620px;
}

.client-timeline-item.done {
  border-color: rgba(16, 185, 129, 0.25);
  background: #ecfdf5;
}

.client-timeline-item span,
.client-document-card span {
  color: var(--ink-soft);
  font-weight: 800;
}

.client-response-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.client-response-item {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(236, 253, 245, 0.86);
}

.client-response-item.denied {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.9);
}

.client-response-item strong,
.client-response-item span,
.client-response-item p {
  display: block;
  min-width: 0;
  line-height: 1.35;
}

.client-response-item span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 850;
}

.client-response-item p {
  margin: 2px 0 0;
  color: var(--ink);
}

.project-task-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}

.project-chip-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.project-chip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}

.project-chip:hover {
  border-color: var(--accent);
}

.project-chip strong,
.project-chip span {
  display: block;
}

.project-chip span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.color-row input[type="color"] {
  min-height: 44px;
  padding: 4px;
}

.compact-drop {
  min-height: 116px;
}

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

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.team-row.disabled {
  opacity: 0.58;
}

.team-row span,
.team-row strong,
.team-row small {
  display: block;
}

.team-row small {
  color: var(--ink-soft);
  margin-top: 3px;
  font-weight: 800;
}

.team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.team-actions button,
.team-actions select,
.team-actions input {
  min-width: 0;
}

.organization-update-form select,
.organization-update-form input {
  min-height: 38px;
  width: 132px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 8px;
  background: var(--panel);
  font: inherit;
  font-weight: 800;
}

.organization-save-button {
  min-width: 92px;
}

.advanced-login {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface-2);
}

.advanced-login summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 900;
}

.advanced-login label {
  margin-top: 10px;
}

.help-hero {
  background:
    linear-gradient(135deg, rgba(17, 17, 17, 0.94), rgba(45, 47, 51, 0.9)),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.28), transparent 40%);
  color: white;
}

.help-hero .section-label {
  color: #93c5fd;
}

.help-steps,
.help-grid {
  display: grid;
  gap: 12px;
}

.help-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.help-steps article {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.help-steps span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-weight: 950;
}

.help-steps strong,
.help-grid h2 {
  display: block;
  line-height: 1.2;
}

.help-steps p,
.help-grid p {
  margin-top: 8px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.help-hero .help-steps p {
  color: #d8d0bf;
}

.help-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-recipient-list {
  max-height: 420px;
  overflow: auto;
}

.campaign-recipient-row,
.campaign-step,
.campaign-history-row {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  min-width: 0;
  overflow-wrap: anywhere;
}

.campaign-history-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  cursor: pointer;
  list-style: none;
}

.campaign-history-row summary::-webkit-details-marker {
  display: none;
}

.campaign-history-row summary span,
.campaign-history-row summary strong,
.campaign-history-row summary small {
  display: block;
  min-width: 0;
}

.campaign-history-row summary strong {
  overflow-wrap: anywhere;
}

.campaign-history-row summary small {
  color: var(--ink-soft);
  line-height: 1.35;
}

.campaign-history-row summary small + small {
  margin-top: 3px;
}

.campaign-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.campaign-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.campaign-step.done {
  border-left-color: var(--success);
  background: #ecfdf5;
}

.campaign-recipient-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
}

.campaign-recipient-status a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.campaign-recipient-status span {
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.campaign-recipient-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.campaign-recipient-row input {
  width: auto;
}

.campaign-recipient-row span,
.campaign-recipient-row strong,
.campaign-recipient-row small {
  display: block;
}

.campaign-recipient-row small {
  margin-top: 3px;
}

.campaign-recipient-row small,
.campaign-history-row span,
.campaign-step span {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 850;
}

.campaign-recipient-row em {
  color: var(--accent-dark);
  font-style: normal;
  font-weight: 900;
}

.campaign-step {
  border-left: 4px solid var(--accent);
}

.campaign-step p {
  margin-bottom: 0;
}

.transaction-panel {
  box-shadow: none;
}

.transaction-panel summary {
  cursor: pointer;
}

.transaction-panel summary span,
.transaction-panel summary small,
.transaction-panel summary strong {
  display: block;
}

.back-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 24;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: var(--panel-dark);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body.show-back-top .back-top {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  translate: -50% 12px;
  opacity: 0;
  pointer-events: none;
  padding: 12px 12px;
  color: white;
  background: var(--panel-dark);
  border-radius: var(--radius-sm);
  transition: 0.2s ease;
}

.toast.show {
  translate: -50% 0;
  opacity: 1;
}

.save-status {
  position: fixed;
  right: 74px;
  bottom: 18px;
  z-index: 31;
  min-width: 92px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(10, 18, 24, 0.16);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 950;
  text-align: center;
}

.save-status.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.save-status.saving {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.45);
  background: #fffbeb;
}

.save-status.pending {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
  background: #fef2f2;
}

.save-status.saved {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.24);
  background: #ecfdf5;
}

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(10, 18, 24, 0.55);
}

.dialog-card {
  width: min(520px, 92vw);
  padding: 24px;
  background: var(--panel);
}

.close-button {
  float: right;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
}

@media (max-width: 1120px) {
  .app-shell {
    display: block;
  }

  .side-rail {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 10;
    width: 100%;
    height: auto;
    border-radius: 0 0 14px 14px;
  }

  .workspace {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
  }

  .nav-list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-list a {
    white-space: nowrap;
  }

  .rail-note {
    display: none;
  }

  .dashboard-grid,
  .contacts-layout,
  .campaign-layout,
  .integration-grid,
  .dashboard-two-column,
  .public-hero,
  .public-section,
  .public-services,
  .public-process,
  .upload-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .side-rail {
    padding: 12px;
    gap: 12px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    z-index: 40;
    transition: transform 0.18s ease;
    will-change: transform;
  }

  body {
    padding-top: var(--mobile-rail-h, 0px);
  }

  .rail-toggle {
    display: none;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand {
    padding-right: 156px;
  }

  .help-link,
  .settings-link {
    position: absolute;
    top: 14px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: 0;
    padding: 0;
    font-size: 0;
    border-radius: var(--radius);
  }

  .settings-link {
    right: 62px;
  }

  .help-link {
    right: 110px;
  }

  .help-link span:not(.nav-icon),
  .settings-link span:not(.nav-icon) {
    display: none;
  }

  .help-link .nav-icon,
  .settings-link .nav-icon {
    width: 21px;
    height: 21px;
  }

  .logout-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: var(--radius);
  }

  .logout-button span:not(.nav-icon) {
    display: none;
  }

  .logout-button .nav-icon {
    width: 21px;
    height: 21px;
  }

  .nav-list {
    gap: 4px;
    padding-bottom: 2px;
    max-width: calc(100vw - 28px);
  }

  .nav-list a {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 42px;
    padding: 8px;
    font-size: 0;
  }

  .nav-list a span:not(.nav-icon) {
    display: none;
  }

  .nav-list a .nav-icon {
    width: 21px;
    height: 21px;
  }

  .help-steps,
  .help-grid {
    grid-template-columns: 1fr;
  }

  .organization-update-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    justify-content: stretch;
  }

  .organization-update-form select,
  .organization-update-form input {
    width: 100%;
  }

  .organization-save-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .workspace {
    padding: 12px;
    gap: 16px;
    padding-bottom: 92px;
  }

  .save-status {
    right: 62px;
    bottom: 74px;
    min-width: 82px;
    padding: 8px 8px;
  }

  .back-top {
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
    z-index: 22;
  }

  .topbar,
  .top-actions,
  .filter-row,
  .import-zone,
  .activity-layout,
  .detail-grid,
  .consult-grid,
  .research-grid,
  .calendar-grid,
  .project-create-form,
  .project-task-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .field-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .email-template-row {
    grid-template-columns: 1fr;
  }

  .share-grid,
  .share-user-row,
  .quick-link-slot,
  .project-campaign-row,
  .project-row,
  .document-row,
  .task-manage-row,
  .project-task-row {
    grid-template-columns: 1fr;
  }

  .task-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .task-actions > * {
    width: auto;
  }

  .mini-toggle {
    justify-content: flex-start;
    white-space: normal;
  }

  .task-actions .compact {
    min-width: 0;
    padding-inline: 8px;
  }

  .task-date-control {
    min-width: 0;
  }

  .task-date-control input {
    width: 136px;
  }

  .project-task-row .task-actions {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
    width: 100%;
  }

  .project-task-row .mini-toggle {
    white-space: nowrap;
  }

  .scanner-layout {
    grid-template-columns: 1fr;
  }

  .client-project-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "timeline"
      "documents"
      "approvals";
  }

  .client-decision-card {
    max-width: none;
  }

  .scanner-preview,
  .scanner-preview video,
  .scanner-preview img {
    min-height: min(56vh, 430px);
  }

  .scanner-action-bar {
    position: static;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }

  .scanner-action-bar.secondary {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .scanner-action-bar.secondary #stopCardCamera {
    grid-column: 1 / -1;
  }

  .pipeline-board {
    grid-template-columns: 1fr;
  }

  .pipeline-lane {
    max-height: 340px;
    min-height: 220px;
  }

  .lane-title {
    padding: 12px 12px;
  }

  .sync-notice {
    grid-template-columns: 1fr;
  }

  .filter-toolbar,
  .contact-table.roomy,
  .detail-hero,
  .calendar-page-grid,
  .follow-grid,
  .calendar-task {
    grid-template-columns: 1fr;
  }

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

  .contact-row.selectable-row .type-chip {
    grid-column: 2;
    justify-self: start;
  }

  .related-row {
    grid-template-columns: 1fr;
  }

  .tag-dropdown-list {
    position: fixed;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 18px;
    width: auto;
    max-height: min(52vh, 360px);
  }

  .related-row {
    align-items: start;
  }

  .calendar-day-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .calendar-task {
    gap: 4px;
  }

  .calendar-task input,
  .calendar-task strong,
  .calendar-task span,
  .calendar-task em,
  .calendar-task a,
  .calendar-task small {
    grid-column: auto;
    grid-row: auto;
  }

  .hero-actions {
    min-width: 0;
  }

  .topbar,
  .top-actions {
    min-width: 0;
  }

  h1 {
    max-width: calc(100vw - 28px);
    font-size: 1.72rem;
    line-height: 1;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: 1.05rem;
  }

  .search-wrap input {
    width: 100%;
  }

  .top-actions button,
  .top-actions label {
    width: 100%;
  }

  .ghost-button,
  .primary-button,
  .danger-button {
    min-width: 0;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .suggestion-card {
    padding: 12px;
    overflow: hidden;
  }

  .custom-task-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #customTaskDue {
    min-height: 46px;
    text-align: left;
  }

  #addCustomContactTask {
    margin-top: 2px;
  }

  .back-top {
    right: 18px;
    bottom: 86px;
    width: 40px;
    height: 40px;
    z-index: 12;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-link-grid {
    grid-template-columns: 1fr 1fr;
  }

  .settings-checks {
    grid-template-columns: 1fr;
  }

  .settings-section > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-section > summary > .pill,
  .settings-section > summary > .primary-button,
  .settings-section > summary > .ghost-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .public-header {
    align-items: center;
    padding: 12px;
  }

  .public-header nav {
    flex-shrink: 0;
    gap: 2px;
  }

  .public-header nav a {
    padding: 8px 8px;
    font-size: 0.82rem;
  }

  .public-brand {
    min-width: 0;
  }

  .public-brand strong,
  .public-brand small {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-compliance-marks {
    gap: 4px;
    margin-left: 0;
    padding-left: 8px;
  }

  .public-compliance-marks img {
    height: 22px;
  }

  .public-hero {
    width: calc(100vw - 24px);
  }

  .public-section {
    width: 100%;
    padding: 42px 12px;
  }

  .public-hero {
    min-height: auto;
    padding: 24px 0 16px;
  }

  .public-hero-copy h1 {
    font-size: 2.55rem;
    line-height: 0.95;
  }

  .public-visual-card {
    order: -1;
    min-height: 360px;
  }

  .public-hero-image,
  .public-hero-placeholder {
    min-height: 360px;
  }

  .public-band {
    width: 100%;
    padding: 42px 12px;
  }

  .public-services article {
    min-height: 180px;
  }

  .public-services h3 {
    margin-top: 24px;
  }

  .public-footer {
    display: grid;
    width: 100%;
    padding-inline: 12px;
  }

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

  .campaign-recipient-row em {
    grid-column: 2;
  }

  .campaign-history-row summary,
  .campaign-recipient-status {
    grid-template-columns: 1fr;
  }

  .campaign-recipient-status a {
    display: grid;
  }

  .panel {
    padding: 12px;
  }

  .detail-hero {
    padding: 16px;
  }

  .hero-actions .primary-button,
  .hero-actions .ghost-button,
  .hero-actions .danger-button {
    width: 100%;
  }

  .detail-hero p {
    max-width: calc(100vw - 72px);
    overflow-wrap: anywhere;
  }

  .tag-editor {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tag-editor .primary-button {
    width: 100%;
  }

  .detail-name {
    font-size: 1.7rem;
  }
}

@media print {
  body.print-consult {
    background: var(--panel);
  }

  body.print-consult .side-rail,
  body.print-consult .back-top,
  body.print-consult .toast,
  body.print-consult .hero-actions,
  body.print-consult .activity-layout,
  body.print-consult .sub-panel,
  body.print-consult .form-manager,
  body.print-consult .edit-panel,
  body.print-consult .follow-panel,
  body.print-consult .business-card-thumb,
  body.print-consult [data-save-form],
  body.print-consult .back-top {
    display: none !important;
  }

  body.print-consult .app-shell,
  body.print-consult .workspace {
    display: block;
    padding: 0;
  }

  body.print-consult .detail-hero,
  body.print-consult .panel,
  body.print-consult .info-box {
    box-shadow: none;
    border-color: #bbb;
  }

  body.print-consult .consult-section {
    break-inside: avoid;
  }

  body.print-consult .consult-section:not([open]) {
    display: block;
  }

  body.print-consult .consult-section:not([open]) .consult-grid {
    display: grid;
  }
}

/* CRM-themed login (v89) */
.crm-login {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(37, 99, 235, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(16, 185, 129, 0.12), transparent 55%),
    var(--navy);
  min-height: 100dvh;
  display: flex;
}

.crm-login-shell {
  margin: auto;
  width: 100%;
  max-width: 420px;
  padding: 24px;
}

.crm-login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: var(--shadow);
}

.crm-login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.crm-login-brand img {
  height: 54px;
  width: auto;
  background: var(--navy);
  border-radius: 10px;
  padding: 8px 12px;
}

.crm-login-card h1 {
  margin: 4px 0 8px;
  font-size: 24px;
  color: var(--ink);
}

.crm-login-card .muted {
  margin: 0 0 18px;
}

.crm-login-form {
  display: grid;
  gap: 12px;
}

.crm-login-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}

.crm-login-form input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  font: inherit;
  background: var(--panel);
  color: var(--ink);
}

.crm-login-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

@media (max-width: 480px) {
  .crm-login-card { padding: 24px 16px; }
}

/* Pipeline editor (v90) */
.pipeline-editor-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  background: var(--panel);
}

.pipeline-editor-row .field-row:last-child {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Toggle switches and toggle groups (v93) */
.toggle-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.toggle-group .section-label {
  margin: 0;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  cursor: pointer;
}

.toggle-row.standalone {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.toggle-row > span:first-child {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.toggle-row > span:first-child > * {
  min-width: 0; /* grid items default to min-width:auto and won't wrap past their
                   natural width otherwise -- only mattered once subtext got long
                   enough (the Sending window toggle) to actually hit the edge case */
}

.toggle-row small {
  color: var(--ink-soft);
}

.toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-switch {
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background 0.15s ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform 0.15s ease;
}

.toggle-row input:checked ~ .toggle-switch {
  background: var(--success);
}

.toggle-row input:checked ~ .toggle-switch::after {
  transform: translateX(18px);
}

.toggle-row input:disabled ~ .toggle-switch {
  opacity: 0.45;
}

/* Header logo on public lead pages */
.public-logo-image {
  max-height: 46px;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

.image-preview.logo-preview {
  background:
    repeating-conic-gradient(#e2e8f0 0% 25%, #f8fafc 0% 50%) 0 / 16px 16px;
}

.image-preview.logo-preview img {
  object-fit: contain;
  background: transparent;
}

/* Mobile overflow hardening (v93): nothing escapes the right edge */
@media (max-width: 760px) {
  .workspace,
  .panel,
  .panel > *,
  summary > span {
    min-width: 0;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    min-width: 0;
  }

  button,
  .primary-button,
  .ghost-button,
  .danger-button,
  .link-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .top-actions,
  .panel-heading,
  .team-actions,
  .field-row,
  .filter-row,
  .quick-form .field-row {
    flex-wrap: wrap;
  }

  .pill {
    white-space: normal;
    max-width: 100%;
  }

  img,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .public-logo-image {
    max-width: 130px;
  }
}

/* Lead page settings groups (v94) */
.settings-subgroup {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.settings-subgroup > summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.settings-subgroup > summary::-webkit-details-marker {
  display: none;
}

.settings-subgroup > summary small {
  color: var(--ink-soft);
}

.settings-subgroup[open] > summary {
  border-bottom: 1px solid var(--line);
}

.settings-subgroup > :not(summary) {
  margin: 12px 16px;
}

.lead-page-save-row {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  z-index: 5;
}

/* Signature builder preview (v97) */
.signature-preview-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--panel);
}

.signature-preview {
  overflow-x: auto;
  padding: 8px 0;
}

.signature-preview img {
  max-width: 160px;
  height: auto;
}

/* Settings readability pass (v101) */

/* Anchors styled as buttons now center like real buttons */
.primary-button,
.ghost-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

/* Top-level settings sections: tinted clickable header bars */
.settings-section {
  border: 1px solid var(--line);
  overflow: hidden;
}

.settings-section > summary {
  padding: 14px 16px;
  background: var(--surface-3);
  transition: background 0.12s ease;
}

.settings-section > summary:hover {
  background: var(--surface-3);
}

.settings-section[open] {
  border-color: #c7d2e2;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.settings-section[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}

.settings-section > summary small {
  color: var(--ink-soft);
}

/* Sub-groups: visible chevron + tinted headers so groups read as groups */
.settings-subgroup {
  background: var(--panel);
}

.settings-subgroup > summary {
  position: relative;
  background: var(--surface-2);
  padding-right: 40px;
  transition: background 0.12s ease;
}

.settings-subgroup > summary:hover {
  background: var(--surface-3);
}

.settings-subgroup > summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.15s ease;
}

.settings-subgroup[open] > summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.settings-subgroup[open] {
  border-color: #c7d2e2;
}

.settings-subgroup[open] > summary {
  background: var(--surface-3);
}

/* Body rhythm: clearer separation between text blocks and controls */
.settings-section .quick-form > p.muted {
  margin: 0 0 4px;
}

.toggle-group {
  background: var(--surface-2);
  border-color: #dbe3ee;
}

.toggle-row.standalone {
  background: var(--surface-2);
}

/* OAuth connect area: centered buttons with breathing room */
.oauth-account-list {
  display: grid;
  gap: 8px;
}

/* ============================================================
   PREMIUM INTERACTION STANDARD (v102) — standing rule:
   every interactive element gives feedback (hover, press, focus)
   ============================================================ */
.primary-button,
.ghost-button,
.danger-button,
.text-button,
.link-button,
.segmented button,
.toggle-row,
.tag,
.settings-section > summary,
.settings-subgroup > summary,
.nav-list a {
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease,
    box-shadow 0.14s ease, transform 0.1s ease;
}

.primary-button:hover,
.ghost-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

.primary-button:active,
.ghost-button:active,
.danger-button:active,
.text-button:active {
  transform: translateY(0) scale(0.985);
  box-shadow: none;
}

:is(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.panel {
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

input,
select,
textarea {
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #b6c2d4;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.toggle-switch {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18);
}

.toggle-row:hover .toggle-switch {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(37, 99, 235, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Campaign toggle trio (Active / Stop if they reply / See if they opened it):
   equal-width columns so all three always render the same size. Previously a
   plain flex row with no basis — since only "Active" had subtext, it was
   wider than the other two, which threw off wrapping and made the switches
   look mismatched even though their CSS dimensions were actually identical. */
.campaign-toggle-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.campaign-toggle-group .toggle-row { height: 100%; }
@media (max-width: 760px) {
  .campaign-toggle-group { grid-template-columns: 1fr; }
}

/* Campaign auto-email step editor (v102) */
.campaign-step-email {
  margin-top: 8px;
  border: 1px dashed #c7d2e2;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface-2);
}

.campaign-step-email summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 13px;
}

.campaign-step-email label {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* Campaigns tabs, blast, transparency log, scheduler modal (v103) */
.campaign-tabs {
  margin-bottom: 16px;
  max-width: 460px;
}

.campaign-tab-panel {
  display: grid;
  gap: 16px;
}

.recipient-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--panel);
  cursor: pointer;
}

.recipient-row span {
  display: grid;
  gap: 2px;
}

.scheduled-log {
  display: grid;
  gap: 8px;
}

.scheduled-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.scheduled-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scheduled-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.pill-success { background: #dcfce7; color: #166534; }
.pill-danger { background: #fee2e2; color: #991b1b; }
.pill-muted { background: var(--surface-3); color: var(--ink-soft); }

/* Grouped send summary card (a campaign step / automation / blast sent to many people,
   collapsed into one card instead of one row per recipient) — subtle accent so it reads
   as "this represents multiple people" at a glance. */
.scheduled-row-group { border-left: 3px solid var(--accent); }

/* Subscription cancel / reactivate */
.danger-zone {
  margin-top: 22px;
  border: 1px solid #fca5a5;
  background: color-mix(in srgb, #fee2e2 28%, transparent);
  border-radius: 14px;
  padding: 20px;
}
.danger-zone-head strong { display: block; font-size: 16px; color: #991b1b; margin-bottom: 4px; }
.danger-zone .danger-button { margin-top: 16px; }
.danger-button.full { width: 100%; }
.reactivate-card {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  background: var(--surface-2);
}
.reactivate-card strong { display: block; font-size: 18px; margin-bottom: 6px; }
.reactivate-card .primary-button { margin-top: 18px; }

/* Stripe payment modal */
.payment-method-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
  background: var(--surface-2);
}
.payment-method-card strong { display: block; margin-bottom: 2px; }
.payment-method-card .primary-button.compact { flex-shrink: 0; }
.pay-modal { max-width: 460px; }
.pay-element { margin: 16px 0; min-height: 40px; }
.pay-error {
  color: #dc2626;
  background: color-mix(in srgb, #fee2e2 40%, transparent);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 12px;
}
.pay-modal .primary-button { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Reassurance box inside the card modal */
.trial-reassure {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: color-mix(in srgb, #10b981 12%, transparent);
  border: 1px solid color-mix(in srgb, #10b981 35%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 16px;
}
.trial-reassure .ui-icon { color: #10b981; flex-shrink: 0; margin-top: 1px; }

/* Billing summary card in Settings → Subscription */
.billing-summary {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 18px;
  margin: 16px 0;
  background: var(--surface-2);
}
.billing-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.billing-summary-row:last-of-type { border-bottom: 0; }
.billing-label { color: var(--ink-soft); font-size: 14px; }
.billing-value { font-weight: 600; text-align: right; }
.billing-amount { font-size: 18px; color: var(--ink); }
.billing-confirm-note { margin: 12px 0; }
#billingConfirmWrap { padding: 4px 0 14px; }

/* Confirm-variant of the trial banner */
.trial-banner-confirm { background: var(--navy, #0f172a); }
.trial-banner-confirm strong { color: #6ee7b7; }
.trial-banner-warn { background: #7c2d12; }
.trial-banner-warn strong { color: #fed7aa; }
.trial-banner-warn .ui-icon { color: #fb923c; }
.pay-secure { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 14px; line-height: 1.4; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 200;
  animation: overlayIn 0.14s ease;
}

.modal-overlay[hidden] { display: none; }
.modal-overlay.modal-blocking { background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
[hidden] { display: none !important; }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4);
  animation: modalIn 0.16s ease;
}

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

@media (max-width: 760px) {
  .scheduled-row { flex-direction: column; align-items: flex-start; }
}

/* Merge-field helper (v104) */
.merge-help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 4px 0;
}

.merge-insert {
  display: inline;
  border: 0;
  background: var(--surface-3);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 0;
}

.merge-insert:hover {
  background: var(--accent);
  color: #fff;
}

/* Template manager (v104) */
.modal-wide { max-width: 640px; }
.soft-divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.template-list { display: grid; gap: 8px; }
.template-step-row {
  display: grid;
  grid-template-columns: 70px 130px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.campaign-builder-actions { gap: 8px; }
@media (max-width: 760px) {
  .template-step-row { grid-template-columns: 1fr 1fr; }
}

/* Campaign wizard / list / detail (v105) */
.campaign-card-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.campaign-card { text-align: left; cursor: pointer; display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); }
.campaign-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campaign-card-head strong { font-size: 16px; }
.empty-state { text-align: center; padding: 40px 24px; display: grid; gap: 12px; justify-items: center; }

.wizard-shell { padding: 24px; max-width: 760px; margin: 0 auto; }
.wizard-progress { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wizard-dot { font-size: 12px; font-weight: 700; color: var(--ink-soft); padding: 5px 12px; border-radius: 999px; background: var(--surface-3); }
.wizard-dot.active { background: var(--accent); color: #fff; }
.wizard-dot.done { background: #dcfce7; color: #166534; }
.wizard-body { min-height: 260px; display: grid; gap: 14px; align-content: start; }
.wizard-body h2 { margin: 0; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 20px; }
.wizard-name { display: grid; gap: 4px; font-weight: 600; }

.wizard-choice-grid, .wizard-template-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.wizard-template-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.wizard-choice { text-align: left; display: grid; gap: 6px; padding: 16px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.wizard-choice strong { font-size: 15px; }
.wizard-choice span { font-size: 13px; color: var(--ink-soft); }
.wizard-choice.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

.wizard-step-list { display: grid; gap: 12px; }
.wizard-step-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; background: var(--surface-2); }
.wizard-step-top { display: flex; gap: 10px; align-items: end; }
.wizard-step-top label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.wizard-step-top .ws-day input { width: 64px; }
.wizard-step-top .ws-del { margin-left: auto; }
.ws-email { display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.review-grid > div { display: grid; gap: 2px; }

.progress-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.progress-summary > div { text-align: center; padding: 12px; background: var(--surface-2); border-radius: var(--radius); }
.progress-summary strong { display: block; font-size: 22px; }
.progress-rows { display: grid; gap: 8px; }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.progress-main { display: grid; gap: 2px; min-width: 0; }
.progress-status { display: flex; align-items: center; gap: 8px; flex: none; }
.campaign-detail-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.sent-log-section { margin-top: 20px; }
.sent-log-section summary { cursor: pointer; }

@media (max-width: 760px) {
  .wizard-choice-grid, .review-grid, .progress-summary { grid-template-columns: 1fr; }
  .progress-summary { grid-template-columns: 1fr 1fr; }
}

/* Step drag handles + template delete (v106) */
.drag-handle {
  cursor: grab;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  user-select: none;
}
.wizard-step-card.dragging { opacity: 0.5; border-color: var(--accent); }
.wizard-step-card[draggable="true"] { cursor: default; }
.wizard-step-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wizard-choice { position: relative; }
.template-delete {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 11px;
  color: #b91c1c;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: 999px;
}
.template-delete:hover { background: var(--rose); color: #fff; }

/* Attachments (v107) */
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.attach-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.attach-chip { font-size: 12px; background: var(--surface-3); color: var(--ink); padding: 3px 10px; border-radius: 999px; }

/* Attach picker filters + campaign search (v108) */
.attach-filters { gap: 10px; margin-bottom: 8px; }
.attach-newproject { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.campaign-search-label { display: grid; gap: 4px; font-weight: 600; max-width: 420px; margin-bottom: 14px; }

/* Compose popup + contact email CTA (v109) */
.compose-recipients { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.compose-send-row { align-items: end; gap: 10px; }
.compose-when, .compose-at { display: grid; gap: 4px; font-weight: 600; }
.contact-email-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contact-email-cta > div { display: grid; gap: 2px; }
.contact-email-cta small { font-weight: 400; }

/* Campaign detail: Steps left (full height), Progress + People stacked right */
.campaign-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .campaign-detail-grid { grid-template-columns: 1fr; }
}
.campaign-steps-panel { min-width: 0; }
.campaign-steps-panel .scroll-steps { max-height: 560px; }

/* Campaign header: title pen-edit, stat chips, start row */
.campaign-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.campaign-title-edit { display: flex; align-items: center; gap: 8px; min-width: 0; }
.campaign-title-edit h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.icon-button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--ink-soft); flex: none; }
.icon-button:hover { color: var(--accent); border-color: var(--accent); }
.campaign-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.campaign-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
.campaign-stat strong { display: block; font-size: 1.4rem; line-height: 1; color: var(--accent); }
.campaign-stat small { color: var(--ink-soft); font-size: 0.76rem; }
.campaign-start-row { align-items: end; gap: 10px; flex-wrap: wrap; }
.ws-senddate { font-size: 0.74rem; color: var(--accent); background: var(--accent-tint, #eef2ff); padding: 2px 8px; border-radius: 999px; margin-left: auto; white-space: nowrap; }
.campaign-member-wrap { position: relative; }
.campaign-remove-btn { position: absolute; top: 10px; right: 10px; white-space: nowrap; font-size: 0.76rem; background: var(--panel); border-radius: 8px; padding: 3px 8px; }
.danger-text { color: #b91c1c; }
.modal-wide { max-width: 640px; width: 100%; }
@media (max-width: 560px) {
  .campaign-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* Reusable scroll areas — cap height, scroll instead of an endless page */
.scroll-area {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.scroll-steps { max-height: 600px; padding-right: 4px; }
.scroll-tasks { max-height: 430px; padding-right: 4px; }
.scroll-history { max-height: 430px; padding-right: 4px; }

/* Inbox cards (v114) — compact, expandable */
.inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.inbox-list { display: grid; gap: 8px; }
.inbox-card { border: 1px solid var(--accent-soft, #c7d2fe); border-radius: 12px; background: var(--accent-tint, #f5f7ff); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; margin-bottom: 8px; }
.inbox-card:hover { border-color: var(--accent); }
.inbox-card.unseen { border-left: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(37,99,235,0.12); }
.inbox-card-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; text-align: left; cursor: pointer; }
.inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; visibility: hidden; }
.inbox-card.unseen .inbox-dot { visibility: visible; }
.inbox-card-main { display: grid; gap: 1px; min-width: 0; }
.inbox-card-main strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-card-main small { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-when { color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; }
.convo-meta { display: inline-flex; align-items: center; gap: 8px; }
.convo-count { background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.inbox-card-body { padding: 4px 12px 12px; background: var(--panel); }
.inbox-card-body p { margin: 0 0 8px; color: var(--ink); font-size: 0.9rem; line-height: 1.45; }

/* Threaded conversation bubbles */
.thread-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.thread-msg { border-radius: 10px; padding: 8px 11px; max-width: 88%; }
.thread-msg.in { background: var(--surface-3); align-self: flex-start; border: 1px solid var(--line); }
.thread-msg.out { background: var(--accent-tint, #eef2ff); align-self: flex-end; border: 1px solid var(--accent-soft, #c7d2fe); }
.thread-msg-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 3px; }
.thread-msg-meta strong { font-size: 0.82rem; }
.thread-msg-meta span { color: var(--ink-soft); font-size: 0.72rem; white-space: nowrap; }
.thread-msg-text { font-size: 0.88rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.inbox-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inbox-card-actions .primary-button.compact, .inbox-card-actions .ghost-button.compact { height: 34px; display: inline-flex; align-items: center; }

/* Conversation history inside the compose popup */
.compose-thread { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-muted, #f8fafc); }
.compose-thread summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.compose-thread-list { max-height: 220px; overflow-y: auto; margin-top: 8px; }

/* Settings automation blocks (v115) */
.automation-block { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 12px 0; display: grid; gap: 10px; background: var(--surface); }
.automation-block > label { display: grid; gap: 4px; }
.automation-block .toggle-row.standalone { margin-bottom: 2px; }

/* Inbox toolbar actions (v115) */
.inbox-toolbar-actions { display: inline-flex; gap: 12px; align-items: center; }

/* Contact page rhythm + section spacing (v116) */
.activity-layout { gap: 16px; margin-top: 16px; }
.contact-inbox-section { margin-top: 16px; }

/* Inbox reconnect banner (v116) */
.inbox-reconnect { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 10px; }
.inbox-reconnect a { color: #9a3412; font-weight: 600; }

/* Step cards: collapsed face + expandable email editor (v116) */
.step-card .ws-text { width: 100%; margin-top: 4px; }
.ws-email-toggle { margin-top: 8px; background: var(--accent-tint, #eef2ff); color: var(--accent); border: 1px solid var(--accent-soft, #c7d2fe); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ws-email-toggle:hover { background: var(--accent); color: #fff; }
.ws-sms-toggle { margin-top: 8px; margin-left: 8px; background: var(--accent-tint, #eef2ff); color: var(--accent); border: 1px solid var(--accent-soft, #c7d2fe); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ws-sms-toggle:hover { background: var(--accent); color: #fff; }
.step-card .ws-email { margin-top: 10px; display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* Step email "ready" badge (v117) */
.ws-email-set { color: var(--success, #059669); font-weight: 600; }

/* Diagnostic table (v118) */
.diag-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.diag-table th, .diag-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.diag-table th { color: var(--ink-soft); font-weight: 600; }

/* Conversation chat pop-out (v122) */
.convo-modal { max-width: 620px; width: 100%; display: flex; flex-direction: column; max-height: 82vh; padding: 0; overflow: hidden; }
.convo-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.convo-modal-head h2 { margin: 2px 0; }
.convo-contact-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line); }
.convo-contact-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.convo-modal-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 440px; }

.chat-stream { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); min-height: 200px; }
.chat-row { display: flex; flex-direction: column; max-width: 78%; }
.chat-row.in { align-self: flex-start; align-items: flex-start; }
.chat-row.out { align-self: flex-end; align-items: flex-end; }
.chat-bubble { padding: 9px 13px; border-radius: 16px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-row.in .chat-bubble { background: var(--surface-3); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-row.out .chat-bubble { background: var(--accent, #2563eb); color: #fff; border-bottom-right-radius: 4px; }
.chat-time { font-size: 0.68rem; color: var(--ink-soft); margin: 3px 6px 0; }

.chat-replybar { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px 6px; border-top: 1px solid var(--line); background: var(--panel); }
.chat-replybar textarea { flex: 1 1 auto; resize: none; border: 1px solid var(--line); border-radius: 18px; padding: 9px 14px; font: inherit; font-size: 0.92rem; max-height: 140px; line-height: 1.4; }
.chat-replybar textarea:focus { outline: none; border-color: var(--accent); }
.chat-replybar .primary-button.compact { border-radius: 18px; height: 38px; }
.chat-reply-more { padding: 2px 16px 12px; text-align: right; }
.convo-preview { color: var(--ink-soft); opacity: 0.85; }

/* Chat sender name + tightened count (v124) */
.chat-name { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); margin: 2px 8px 2px; }
.chat-row.out .chat-name { text-align: right; }

/* Compose To/Cc/Bcc recipient chips (v124) */
.compose-to-block { display: grid; gap: 6px; }
.compose-field-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); display: grid; gap: 4px; }
.recipient-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recipient-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-tint, #eef2ff); border: 1px solid var(--accent-soft, #c7d2fe); color: var(--ink); border-radius: 999px; padding: 3px 8px 3px 11px; font-size: 0.82rem; }
.recipient-chip button { border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 0 2px; }
.recipient-chip button:hover { color: #b91c1c; }
.compose-ccbcc-toggle { align-self: start; padding: 0; }
#composeCcBcc { display: grid; gap: 8px; margin-top: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }

/* Recipient search dropdown (v125) */
.recipient-search { position: relative; }
.recipient-search input { width: 100%; }
.recipient-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,0.14); overflow: hidden; max-height: 240px; overflow-y: auto; }
.recipient-option { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; cursor: pointer; }
.recipient-option:hover { background: var(--accent-tint, #eef2ff); }
.recipient-option strong { font-size: 0.88rem; }
.recipient-option small { color: var(--ink-soft); font-size: 0.76rem; }

/* Attachments in chat (v125) */
.chat-att { margin: 4px 0 2px; }
.chat-row.out .chat-att { display: flex; justify-content: flex-end; }
.att-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; background: var(--panel); border: 1px solid var(--accent-soft, #c7d2fe); color: var(--accent, #2563eb); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.att-chip.muted-chip { color: var(--ink-soft); border-color: var(--line); cursor: default; }
.att-list { margin-top: 6px; display: grid; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; max-width: 320px; }
.att-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.att-download { font-size: 0.84rem; color: var(--accent); text-decoration: none; display: inline-flex; align-items: baseline; gap: 4px; }
.att-download small { color: var(--ink-soft); }
.att-download:hover { text-decoration: underline; }
.att-save select { font-size: 0.78rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; max-width: 150px; }

/* Corner X close button (v125) */
.modal-card { position: relative; }
.modal-x { position: absolute; top: 10px; right: 12px; z-index: 50; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(15,23,42,0.06); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-x:hover { background: rgba(15,23,42,0.12); }
.convo-modal .modal-x { background: var(--panel); }

/* Bluer inbox (v125) */
.inbox-card { background: var(--accent-soft); border-color: #cdddf7; }
.inbox-card:hover { border-color: var(--accent); }
.inbox-card .inbox-card-main small { color: #4b5b76; }
.inbox-toolbar { color: var(--accent); }

/* Mobile send buttons no longer squish (v125) */
@media (max-width: 540px) {
  .chat-replybar { gap: 6px; }
  .chat-replybar .primary-button.compact { flex: 0 0 auto; min-width: 64px; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
  .compose-send-row { flex-wrap: wrap; gap: 8px; }
  .compose-send-row .primary-button { flex: 1 1 100%; min-width: 0; }
  .modal-x { top: 8px; right: 8px; }
}

/* Removable attachment chips + tag group option (v126) */
.attach-chip { display: inline-flex; align-items: center; gap: 6px; }
.attach-chip button { border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 0 2px; }
.attach-chip button:hover { color: #b91c1c; }
.recipient-option.is-group { background: var(--accent-tint, #eef2ff); border-bottom: 1px solid var(--line); }
.recipient-option.is-group strong { color: var(--accent, #2563eb); }

/* Lock page scroll behind any open modal (v128) */
html.modal-open, body.modal-open { overflow: hidden !important; }

/* Contact page rework — top section, chips, popups (v128) */
.contact-hero { align-items: flex-start; }
.hero-title-row { display: flex; align-items: center; gap: 10px; }
.icon-pen { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.icon-pen:hover { background: var(--accent-tint, #eef2ff); border-color: var(--accent); }
.hero-info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 14px; color: var(--ink-soft); font-size: 0.9rem; }
.hero-info .contact-info { color: var(--blue); font-weight: 700; }
.hero-info span { position: relative; }
.hero-info span + span::before { content: "·"; position: absolute; left: -9px; color: var(--line); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; cursor: pointer; text-align: left; min-width: 96px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.hero-stat:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.hero-stat strong { display: block; font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.hero-stat small { color: var(--ink-soft); font-size: 0.76rem; }
.sharing-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; text-align: center; }
.sharing-btn small { font-size: 0.66rem; color: var(--ink-soft); font-weight: 400; }

/* Hero action hierarchy (v130) */
.hero-actions-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-actions-primary .primary-button, .hero-actions-primary .ghost-button { width: 100%; justify-content: center; }
.hero-actions-quiet { display: flex; gap: 8px; margin-top: 10px; }
.chip-button { flex: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: 0.82rem; color: var(--ink); line-height: 1.15; }
.chip-button:hover { border-color: var(--accent); color: var(--accent); }
.chip-button small { font-size: 0.66rem; color: var(--ink-soft); font-weight: 400; }
/* Unsubscribed status indicator -- deliberately NOT .chip-button, which has flex:1 and
   grows to fill its whole container. Fine for the button rows it was built for, but as
   the lone element in a contact-detail hero or a contact-list card, it stretched into a
   giant full-width banner instead of a small pill. */
.unsub-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
html[data-theme="dark"] .unsub-badge { background: rgba(180, 83, 9, 0.18); border-color: rgba(252, 211, 77, 0.4); color: #fbbf24; }
.unsub-row-group { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.unsub-row { display: inline-flex; align-items: center; gap: 8px; }
.unsub-row .text-button { font-size: 0.78rem; padding: 0; }
.hero-actions-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.text-button.danger-text { color: #b91c1c; }
.text-button.danger-text:hover { text-decoration: underline; }

.contact-work-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; margin-top: 16px; }
.contact-work-grid > .panel { display: flex; flex-direction: column; min-height: 520px; border-left: 5px solid var(--card-accent, var(--blue)); }
.contact-inbox-section { margin-top: 0; --card-accent: var(--blue); }
.contact-work-grid #contactInbox { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.contact-work-grid #contactInbox .inbox-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.contact-work-grid .task-stack { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 900px) { .contact-work-grid { grid-template-columns: 1fr; } .contact-work-grid > .panel { min-height: 0; } }

/* Contact modal helpers */
.cm-body { display: grid; gap: 12px; }
.cm-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.cm-list { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--panel); }
.cm-row:hover { border-color: var(--accent); background: var(--accent-tint, #f5f7ff); }
.cm-row small { display: block; color: var(--ink-soft); font-size: 0.78rem; }
.cm-row em { color: var(--accent); font-style: normal; font-size: 0.82rem; white-space: nowrap; }
.cm-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 440px; overflow-y: auto; }
.cm-contact-card { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--panel); }
.cm-contact-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.cm-contact-card small { color: var(--ink-soft); font-size: 0.78rem; }
.cm-contact-card .cm-tags { color: var(--accent); font-size: 0.78rem; margin-top: 4px; }
.cm-current-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Segmented toggle in add-task popup */
.seg-toggle { display: inline-flex; gap: 4px; background: var(--surface-muted, #f1f5f9); border-radius: 10px; padding: 3px; }
.seg-btn { border: none; background: none; padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; color: var(--ink-soft); }
.seg-btn.active { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(15,23,42,0.12); font-weight: 600; }

/* Form document cards (v129) */
.form-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.form-doc-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px; border: 1px solid var(--card-tint-strong, var(--line)); border-radius: 14px; background: var(--surface-2); }
.form-doc-icon { grid-row: span 2; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; background: rgba(109,40,217,0.12); }
.form-doc-main strong { display: block; font-size: 0.95rem; }
.form-doc-main small { color: var(--ink-soft); font-size: 0.78rem; }
.form-doc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.form-remove { color: #b91c1c; margin-left: auto; }
.form-popup-body .printable-form { border: none; box-shadow: none; padding: 0; background: none; }

/* Higher-end "glass" surfaces (v129) */
.panel, .detail-hero, .modal-card {
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 var(--surface-2);
}
.modal-card { background: var(--panel); border: 1px solid var(--surface-2); }
.hero-stat, .inbox-card, .form-doc-card, .cm-row, .cm-contact-card {
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.modal-overlay { background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* Campaign member remove button — compact corner, no tall stacking on mobile (v130) */
.campaign-member-wrap { position: relative; }
.campaign-member-wrap .campaign-remove-btn { position: absolute; top: 8px; right: 10px; font-size: 0.76rem; padding: 2px 8px; background: var(--panel); border-radius: 8px; }

/* Contacts page — alphabetical cards + A–Z jump rail (v130) */
#contactTable.contact-table, #contactTable.contact-table.roomy {
  display: block; grid-template-columns: none; max-height: none; overflow: visible; gap: 0;
}
.contacts-az-layout { display: flex; gap: 10px; align-items: flex-start; }
.contacts-sections { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.contacts-empty { padding: 28px 8px; }

.alpha-section { scroll-margin-top: 88px; }
.alpha-header {
  margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; color: var(--accent);
  letter-spacing: 0.04em; padding-bottom: 6px; border-bottom: 1px solid var(--card-tint-strong, rgba(37,99,235,0.18));
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.contact-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.contact-grid-card {
  position: relative; border: 1px solid rgba(220,227,234,0.9); border-radius: 16px;
  background: var(--surface-2); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 6px 18px rgba(15,23,42,0.06); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.contact-grid-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,99,235,0.14); border-color: var(--accent); }
.contact-grid-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,0.3); }
.contact-card-check { position: absolute; top: 10px; right: 10px; z-index: 3; }
.contact-card-check input { width: 17px; height: 17px; cursor: pointer; }
.contact-card-link { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-decoration: none; color: var(--ink); }
.contact-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding-right: 26px; }
.contact-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), #4f7cf0);
}
.contact-card-name { font-size: 1rem; line-height: 1.2; }
.contact-card-sub { color: var(--ink-soft); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card-tags { color: var(--accent); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card-share { color: var(--ink-soft); font-size: 0.72rem; margin-top: 2px; }

.az-rail {
  position: sticky; top: 84px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 3px; border-radius: 999px; background: var(--surface-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(220,227,234,0.7); max-height: calc(100vh - 110px);
}
.az-letter {
  border: none; background: none; cursor: pointer; font-size: 0.7rem; font-weight: 700; line-height: 1; color: var(--accent);
  width: 18px; height: 16px; display: grid; place-items: center; border-radius: 5px; padding: 0;
}
.az-letter:hover { background: var(--accent); color: #fff; }
.az-letter.is-empty { color: var(--line); cursor: default; font-weight: 500; }
@media (max-width: 640px) {
  .az-rail { top: 70px; }
  .az-letter { width: 15px; height: 15px; font-size: 0.62rem; }
  .contact-card-grid { grid-template-columns: 1fr; }
}

/* Contacts list — project-style cards + letter filter (v131) */
.contact-pick { position: relative; cursor: pointer; border-radius: var(--radius); transition: transform 0.12s ease; }
.contact-pick:hover { transform: translateY(-1px); }
.contact-pick:hover .project-contact-card { border-color: var(--accent); box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16); }
.contact-pick .project-contact-card { height: 100%; padding-left: 46px; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.contact-pick-check { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; z-index: 4; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.contact-pick-check input {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid rgba(37, 99, 235, 0.45); background: var(--panel);
  display: grid; place-items: center; transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.contact-pick-check input:hover { border-color: var(--blue); }
.contact-pick-check input:checked {
  background-color: var(--blue); border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.contact-pick.is-selected .project-contact-card { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.32); }

.az-letter.is-active { background: var(--accent); color: #fff; }
.az-all { font-size: 0.6rem; height: auto; padding: 3px 0; margin-bottom: 2px; border-bottom: 1px solid rgba(220,227,234,0.7); width: 100%; }

/* Shared-tags popup uses the project card (v132) */
.cm-people-grid { max-height: 440px; overflow-y: auto; padding: 2px; }
.shared-tag-item { display: flex; flex-direction: column; }
.shared-tag-caption { font-size: 0.74rem; color: var(--accent); padding: 4px 6px 0; }

/* Main navigation moved to the bottom on mobile (2026-06-17-b) */
@media (max-width: 760px) {
  .side-rail {
    top: auto; bottom: 0; left: 0; right: 0;
    flex-direction: row; align-items: center; gap: 6px;
    /* Extra bottom padding clears the iOS home-indicator ("grab bar") gesture
       zone so icons don't sit under it and become hard/impossible to tap
       (release bl). */
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px;
    border-radius: 16px 16px 0 0;
    overflow-x: auto; overflow-y: hidden;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.18);
    /* Force its own compositing layer so iOS Safari doesn't mis-place this
       fixed-to-bottom bar for a frame while the URL/toolbar chrome is
       collapsing or expanding during scroll — the "floats high, snaps back
       down" glitch (release bl). transform/backface hints below are the
       standard fix for that WebKit quirk. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* Nav lives at the bottom on mobile (see above), so nothing else protects the top edge --
     in standalone/installed mode there's no Safari chrome up there either, so the page's own
     top padding has to clear the notch / Dynamic Island / status bar itself. */
  body { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-bottom: var(--mobile-rail-h, 66px); }
  .side-rail .brand { display: none; }
  .side-rail .nav-list { overflow: visible; max-width: none; flex: 0 0 auto; gap: 4px; }
  .side-rail .help-link,
  .side-rail .settings-link,
  .side-rail .logout-button {
    position: static; top: auto; right: auto; margin: 0; flex: 0 0 auto;
  }
}

/* Batch email-selected inside share panel (v138) */
.batch-divider { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.batch-email-row { display: grid; gap: 4px; }

/* Inline UI SVG icons (v138) */
.ui-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.15em; }
.ui-icon svg { display: block; }
.form-doc-icon { color: #6d28d9; }

/* Project financials (v142) */
.project-financials .fin-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.fin-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.fin-chip small { color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fin-chip strong { font-size: 1.25rem; color: var(--ink); }
.fin-chip.is-due strong { color: var(--rose); }
.fin-chip.is-clear strong { color: var(--success); }
.fin-chip.is-profit strong { color: var(--success); }

.fin-progress { position: relative; height: 26px; border-radius: 999px; background: rgba(15,23,42,0.06); overflow: hidden; margin-bottom: 16px; }
.fin-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), #b8860b); border-radius: 999px; transition: width 0.4s ease; min-width: 2px; }
.fin-progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; color: var(--ink); }

.fin-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 820px) { .fin-columns { grid-template-columns: 1fr; } }
.fin-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.fin-block-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.fin-block-head h3 { margin: 0; font-size: 1rem; }

.fin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fin-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.fin-table td { padding: 7px 6px; border-bottom: 1px solid rgba(15,23,42,0.05); vertical-align: middle; }
.fin-num { text-align: right; white-space: nowrap; }
.fin-amt { font-weight: 600; }
.fin-desc { display: block; }
.fin-cat { color: var(--ink-soft); font-size: 0.72rem; }
.fin-x-cell { width: 28px; text-align: center; }
.fin-x { border: none; background: transparent; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 6px; width: 24px; height: 24px; }
.fin-x:hover { background: rgba(239,68,68,0.12); color: var(--rose); }

.fin-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.fin-row-main { display: flex; flex-direction: column; gap: 1px; }
.fin-row-main strong { font-size: 0.95rem; }
.fin-row-main small { color: var(--ink-soft); font-size: 0.78rem; }

.fin-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fin-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fin-form input, .fin-form select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--panel); }
.fin-form-row input, .fin-form-row select { flex: 1 1 0; min-width: 0; }
.fin-form .fin-qty { flex: 0 0 64px; max-width: 64px; text-align: center; }
.fin-form-row .primary-button { flex: 0 0 auto; }

.fin-expenses { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.fin-expenses > summary { cursor: pointer; font-weight: 600; list-style: none; }
.fin-expenses > summary::-webkit-details-marker { display: none; }
.fin-expenses > summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform 0.2s; color: var(--ink-soft); }
.fin-expenses[open] > summary::before { transform: rotate(90deg); }

/* Project financials v143 — invoice-style charges grid */
.fin-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fin-heading-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fin-share-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; }
.fin-share-toggle input { width: 16px; height: 16px; }

.fin-charges { --fin-cols: minmax(0,1fr) 46px 84px 92px 58px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.fin-grid-row { display: grid; grid-template-columns: var(--fin-cols); gap: 8px; align-items: center; padding: 8px 10px; }
.fin-head { background: rgba(15,23,42,0.03); border-bottom: 1px solid var(--line); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.fin-add-row { border-bottom: 1px solid var(--line); background: var(--card-tint, rgba(212,175,55,0.08)); }
.fin-add-row input, .fin-add-row select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; background: var(--panel); min-width: 0; width: 100%; }
.fin-add-row .fin-num-input { text-align: right; }
.fin-add-btn { width: 100%; padding: 7px 4px; }
.fin-items .fin-item { border-bottom: 1px solid rgba(15,23,42,0.05); }
.fin-items .fin-item:last-child { border-bottom: none; }
.fin-item-desc { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fin-lineno { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: rgba(15,23,42,0.06); color: var(--ink-soft); font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.fin-item-text { min-width: 0; }
.fin-item-text .fin-desc { display: block; overflow: hidden; text-overflow: ellipsis; }
.fin-empty { padding: 14px 10px; }
.fin-charges .fin-num { text-align: right; white-space: nowrap; font-size: 0.9rem; }
.fin-charges .fin-amt { font-weight: 600; }
.fin-item .fin-x { justify-self: center; }
@media (max-width: 600px) {
  .fin-charges { --fin-cols: minmax(0,1fr) 38px 66px 72px 32px; }
  .fin-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .fin-add-row input[name="description"] { flex: 1 1 100%; }
  .fin-add-row .fin-num-input { flex: 1 1 60px; }
  .fin-add-row select { flex: 2 1 110px; }
  .fin-add-btn { flex: 1 1 72px; width: auto; }
}

/* Client portal financials (shared, read-only, no costs/profit) */
.client-financials-area { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 0 auto 8px; max-width: 1100px; }
.client-fin-progress { position: relative; height: 30px; border-radius: 999px; background: rgba(15,23,42,0.06); overflow: hidden; margin: 10px 0 18px; }
.client-fin-progress-bar { height: 100%; background: linear-gradient(90deg, var(--public-accent, #d4af37), #b8860b); }
.client-fin-progress span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 600; }
.client-fin-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.client-fin-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 50px 90px 100px; gap: 10px; padding: 10px 14px; align-items: center; border-bottom: 1px solid rgba(15,23,42,0.05); }
.client-fin-row:last-child { border-bottom: none; }
.client-fin-head { background: rgba(15,23,42,0.03); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.client-fin-ln { color: #94a3b8; }
.client-fin-qty, .client-fin-rate, .client-fin-amt { text-align: right; white-space: nowrap; }
.client-fin-amt { font-weight: 600; }
.client-fin-totals { display: flex; gap: 24px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.client-fin-totals > div { text-align: right; }
.client-fin-totals span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.client-fin-totals strong { font-size: 1.1rem; }
.client-fin-totals .due strong { color: #b91c1c; }
.client-fin-totals .clear strong { color: #047857; }
@media (max-width: 560px) {
  .client-fin-row { grid-template-columns: 22px minmax(0,1fr) 92px; }
  .client-fin-qty, .client-fin-rate { display: none; }
}

/* Client portal financials — explicit readable colors (v144) */
.client-financials-area { color: var(--ink); }
.client-financials-area .section-label { color: var(--public-accent, #d4af37); }
.client-financials-area h2 { color: var(--ink); }
.client-fin-progress { background: var(--surface-3); }
.client-fin-progress span { color: var(--ink); text-shadow: 0 1px 2px var(--surface-2); }
.client-fin-desc { color: var(--ink); font-weight: 500; }
.client-fin-qty, .client-fin-rate { color: var(--ink-soft); }
.client-fin-amt { color: var(--ink); }
.client-fin-head, .client-fin-head .client-fin-desc { color: var(--ink-soft); font-weight: 600; }
.client-fin-ln { color: #94a3b8; }

/* Charges entry v144 — mode toggle, $ prefix, live total, % commission, invoice dialog */
.fin-mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.fin-mode-btn { border: none; background: var(--panel); padding: 7px 14px; font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--ink-soft); }
.fin-mode-btn + .fin-mode-btn { border-left: 1px solid var(--line); }
.fin-mode-btn.active { background: var(--gold); color: var(--ink); font-weight: 600; }

.fin-money-wrap { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); padding: 0 8px; min-width: 0; }
.fin-money-wrap .fin-pfx, .fin-money-wrap .fin-sfx { color: var(--ink-soft); font-size: 0.9rem; flex: 0 0 auto; }
.fin-money-wrap input { border: none !important; background: transparent !important; padding: 7px 0 !important; width: 100%; min-width: 0; text-align: right; font: inherit; outline: none; }
.fin-add-row > .fin-money-wrap { align-self: center; }
.fin-add-hint { font-size: 0.8rem; color: var(--ink); padding: 4px 2px 0; min-height: 18px; font-weight: 600; }

.fin-add-percent { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--card-tint, rgba(212,175,55,0.08)); }
.fin-add-percent .fin-pct-desc { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; background: var(--panel); }
.fin-pct-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-pct-line .fin-money-wrap { flex: 1 1 120px; }
.fin-pct-line .fin-pct-wrap { flex: 0 0 88px; }
.fin-pct-wrap input { text-align: left; }
.fin-op { color: var(--ink-soft); font-weight: 700; }
.fin-pct-out { flex: 1 1 90px; text-align: right; font-size: 1.05rem; color: var(--ink); min-width: 78px; }
.fin-pct-line select { flex: 0 0 auto; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; background: var(--panel); }
.fin-pct-line .primary-button { flex: 0 0 auto; }

.fin-form-row .fin-money-wrap { flex: 1 1 0; }
.fin-form-row .fin-money-wrap.fin-grow { flex: 2 1 0; }

.fin-invoice-modal .modal-card { max-width: 460px; }
.fin-dialog-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--ink-soft); margin-top: 14px; }
.fin-dialog-field select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: var(--panel); }
.fin-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@media (max-width: 600px) {
  .fin-add-row .fin-money-wrap { flex: 1 1 90px; }
}

/* ===== Project page overhaul (v146) ===== */
.project-hero .section-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; color: var(--ink-soft); }
.project-hero .hero-name { margin: 0; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 16px; }
.hero-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 700; color: var(--slate); }
.hero-tag.primary { background: var(--navy); color: #fff; border-color: var(--heading); }
.hero-tag-x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 2px; opacity: 0.7; }
.hero-tag-x:hover { opacity: 1; }
.hero-tag-add { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 700; color: var(--accent); cursor: pointer; }
.hero-tag-add:hover { border-color: var(--accent); background: var(--accent-tint, #eef2ff); }
.project-hero-stats { gap: 10px; }
.hero-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; cursor: pointer; text-align: left; min-width: 110px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.hero-chip:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.hero-chip small { display: block; color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-chip strong { display: block; font-size: 1.3rem; color: var(--accent); line-height: 1.15; }
.hero-chip .chip-sub { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; }
.hero-chip.is-due strong { color: #b91c1c; }
.project-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.quiet-chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 0.85rem; color: var(--slate); cursor: pointer; }
.quiet-chip:hover { border-color: var(--accent); color: var(--accent); }
.hero-complete { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.project-tasks-panel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task-bulk-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Manage pop-outs */
.manage-section { display: grid; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.manage-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.manage-section .section-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--ink-soft); margin: 0; }
.manage-contact-row { display: flex; align-items: center; gap: 10px; }
.manage-contact-row > :first-child { flex: 1 1 auto; min-width: 0; }
.client-preview-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); min-height: 420px; }
.client-preview-frame iframe { width: 100%; height: 60vh; min-height: 420px; border: 0; display: block; }
.client-preview-empty { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--ink-soft); }
.client-preview-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ===== Client portal overhaul (v146) ===== */
.client-progress-banner { display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 0 0 16px; cursor: pointer; box-shadow: 0 1px 4px rgba(15,23,42,0.05); }
.client-progress-banner:hover { border-color: var(--public-accent, #2563eb); }
.client-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.client-progress-top span { color: var(--ink-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.client-progress-top strong { color: var(--ink); font-size: 1.05rem; }
.client-progress-track { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 12px 0 8px; }
.client-progress-fill { height: 100%; border-radius: 999px; background: var(--public-accent, #2563eb); transition: width 0.3s ease; }
.client-progress-hint { font-size: 0.8rem; color: var(--ink-soft); }
.client-counter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.client-counter { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; text-align: left; box-shadow: 0 1px 4px rgba(15,23,42,0.05); }
.client-counter:hover { border-color: var(--public-accent, #2563eb); }
.client-counter small { display: block; color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.client-counter strong { display: block; font-size: 1.6rem; color: var(--ink); line-height: 1.1; }
.client-counter strong span { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.client-counter em { font-style: normal; font-size: 0.78rem; color: var(--ink-soft); }
.client-counter-pay { background: var(--public-accent, #2563eb); border-color: var(--public-accent, #2563eb); }
.client-counter-pay small, .client-counter-pay em { color: var(--panel); }
.client-counter-pay strong { color: #fff; }
.client-view-toggle { display: inline-flex; gap: 4px; background: var(--surface-3); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.client-view-toggle button { border: none; background: transparent; border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 0.84rem; color: var(--ink-soft); cursor: pointer; }
.client-view-toggle button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }
.client-pay-instructions { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; color: var(--ink); margin-bottom: 14px; }
.client-decision-doc { margin-bottom: 8px; }
@media (max-width: 720px) { .client-preview-frame iframe { height: 70vh; } .task-bulk-actions { flex-wrap: wrap; } }

/* ===== v147 overhaul fixes ===== */
/* Project detail: even vertical spacing between sections */
#projectDetail { display: flex; flex-direction: column; gap: 16px; }

/* Project hero: stack left-to-right (override the 2-col detail-hero grid) */
.detail-hero.project-hero { display: flex; flex-direction: column; align-items: stretch; }
.detail-hero.project-hero .hero-title-row,
.detail-hero.project-hero .hero-tags,
.detail-hero.project-hero .hero-stats,
.detail-hero.project-hero .hero-actions { width: 100%; }

/* Portal section collapsed */
.project-portal-panel > summary.project-portal-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-portal-panel > summary::-webkit-details-marker { display: none; }
.project-portal-summary .summary-hint { font-size: 0.78rem; color: var(--ink-soft); }
.project-portal-panel[open] .project-portal-summary .summary-hint { display: none; }
.project-portal-body { display: grid; gap: 12px; margin-top: 12px; }

/* Financials pop-out: single column + Payments as collapsible, green theme */
.fin-columns.fin-single { grid-template-columns: 1fr; }
.fin-section-details { }
.fin-section-details > summary { cursor: pointer; list-style: none; }
.fin-section-details > summary::-webkit-details-marker { display: none; }
.fin-section-details > summary.fin-block-head { margin-bottom: 0; }
.fin-section-details > summary.fin-block-head h3::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform 0.2s; color: var(--ink-soft); }
.fin-section-details[open] > summary.fin-block-head h3::before { transform: rotate(90deg); }
.fin-section-details[open] > summary.fin-block-head { margin-bottom: 10px; }
.project-financials .fin-progress-bar { background: linear-gradient(90deg, var(--success), #0e9f6e); }
.project-financials .fin-mode-btn.active { background: var(--success); color: #fff; }
.project-financials .fin-chip.is-clear strong { color: var(--success); }

/* Client portal: consistent-width body so all sections line up */
.client-portal-body { max-width: 1040px; margin: -28px auto 40px; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; }
.client-portal-body .client-progress-banner,
.client-portal-body .client-counter-row,
.client-portal-body .client-financials-area { margin: 0; max-width: none; width: 100%; }
.client-counter-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.client-counter { display: flex; flex-direction: column; justify-content: center; min-height: 96px; }
@media (max-width: 640px) { .client-portal-body { padding: 0 14px; } .client-counter-row { grid-template-columns: 1fr 1fr; } }

/* ===== v148: client card contrast, overdue tasks, stable pop-outs ===== */
/* Force readable dark text inside every modal on the public/client site */
.public-site .modal-card { color: var(--ink); }
.public-site .modal-card .panel-heading h2 { color: var(--ink); }
.public-site .modal-card .muted { color: var(--ink-soft); }

/* Task & approval cards: white with high-contrast text, regardless of lead-page theme */
.client-timeline-item, .client-decision-card { background: var(--panel); color: var(--ink); border-color: rgba(15,23,42,0.14); }
.client-timeline-item strong, .client-decision-card strong { color: var(--ink); }
.client-timeline-item span { color: var(--ink-soft); }
.client-decision-card p { color: var(--ink-soft); }
.client-timeline-item.done { background: #ecfdf5; border-color: rgba(16,185,129,0.3); }
.client-timeline-item.done strong { color: #065f46; }

/* Document cards: locked purple with contrasting light text */
.client-document-card { background: var(--purple); border: 1px solid #6d28d9; border-left: 5px solid #5b21b6; color: #fff; box-shadow: 0 8px 20px rgba(76,29,149,0.25); }
.client-document-card strong { color: #fff; }
.client-document-card span { color: var(--panel); font-weight: 600; }
.client-document-card .ghost-button { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid var(--surface-2); }
.client-document-card .ghost-button:hover { background: rgba(255,255,255,0.28); }
.client-document-card .muted { color: var(--surface-2); }

/* Overdue task cards (admin project + contact lists) */
.project-task-row.overdue { border-color: rgba(239,68,68,0.45); background: #fef2f2; }
.project-task-row.overdue .task-check small { color: #b91c1c; font-weight: 700; }
/* Overdue client timeline cards */
.client-timeline-item.overdue { background: #fef2f2; border-color: rgba(239,68,68,0.5); }
.client-timeline-item.overdue strong { color: #991b1b; }
.client-timeline-item.overdue span { color: #b91c1c; font-weight: 700; }

/* Keep tasks / approvals pop-outs a stable size when switching views */
.client-view-stable { height: 56vh; max-height: 56vh; overflow-y: auto; display: block; }
.client-view-stable > [data-cview-panel] { display: grid; gap: 8px; }
@media (max-width: 640px) { .client-view-stable { height: 62vh; max-height: 62vh; } }

/* ===== v149 fixes ===== */
/* Overdue tasks: prominent + win over tint-tasks gradient */
.tint-tasks .project-task-row.overdue,
.project-task-row.overdue {
  background: #fff1f0;
  border-color: #fca5a5;
  border-left: 4px solid #dc2626;
}
.project-task-row.overdue .task-check small { color: #b91c1c; font-weight: 800; }
.client-timeline-item.overdue { background: #fff1f0; border-color: #fca5a5; border-left: 4px solid #dc2626; }
.client-timeline-item.overdue strong { color: #991b1b; }
.client-timeline-item.overdue span { color: #b91c1c; font-weight: 700; }

/* Contacts pop-out: corner X on each contact card */
.manage-contact-card { position: relative; }
.manage-contact-card .project-contact-card { padding-right: 34px; }
.card-remove-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.card-remove-x:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* Contacts pop-out: search-to-reveal dropdown (in-flow so it never clips on mobile) */
.contact-add-field { position: relative; }
.contact-add-dropdown { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px; box-shadow: 0 10px 24px rgba(15,23,42,0.12); }
.contact-add-dropdown[hidden] { display: none; }
.contact-add-dropdown .project-picker { max-height: 42vh; overflow-y: auto; margin-bottom: 8px; }

/* Document scan/add row */
.doc-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scan-drop strong::before { content: "📷 "; }
@media (max-width: 560px) { .doc-add-row { grid-template-columns: 1fr; } }

/* Client document cards: plain like the task cards (drop the purple) */
.client-document-card {
  background: var(--panel);
  border: 1px solid rgba(15,23,42,0.14);
  border-left: 1px solid rgba(15,23,42,0.14);
  color: var(--ink);
  box-shadow: none;
}
.client-document-card strong { color: var(--ink); }
.client-document-card span { color: var(--ink-soft); font-weight: 600; }
.client-document-card .muted { color: var(--ink-soft); }
.client-document-card .ghost-button { background: var(--panel); color: var(--accent); border: 1px solid var(--line); }
.client-document-card .ghost-button:hover { background: var(--surface-3); }

/* Mobile: keep the task date picker inside the card */
@media (max-width: 760px) {
  .project-task-row .task-date-control { width: 100%; }
  .project-task-row .task-date-control input { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .project-task-row .task-actions { width: 100%; }
  .project-task-row .task-actions > * { min-width: 0; max-width: 100%; }
}

/* ===== v151: favorites, tabs, contact-search polish ===== */
/* Favorite star on contact cards */
.contact-pick .project-contact-card { padding-right: 40px; }
.fav-star { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; font-size: 19px; line-height: 1; color: #cbd5e1; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.12s ease, transform 0.12s ease; }
.fav-star:hover { color: #f59e0b; transform: scale(1.12); }
.fav-star.is-fav { color: #f59e0b; }

/* Favorites / All tabs */
.contact-tabs { display: inline-flex; gap: 4px; background: var(--surface-3); border-radius: 10px; padding: 4px; margin: 4px 0 12px; }
.contact-tab { border: none; background: transparent; border-radius: 8px; padding: 8px 16px; font-weight: 800; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer; }
.contact-tab.is-active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }

/* Keep the tag summary from reflowing the toolbar as filters change */
#selectedTagSummary { min-height: 1.25em; transition: none; }

/* Stop the page from jumping when a search returns nothing */
#contactTable.contact-table, #contactTable.contact-table.roomy { min-height: 320px; }

/* Mobile hashtag dropdown: render in-flow so it always shows and doesn't jump */
@media (max-width: 760px) {
  .tag-menu { position: static; }
  .tag-dropdown-list {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 8px;
    max-height: 50vh;
    box-shadow: none;
  }
  .contact-tabs { display: flex; }
  .contact-tab { flex: 1 1 0; }
}

/* ===== v151: image crop modal ===== */
.crop-modal .crop-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; background: #0f172a; border-radius: 10px; overflow: hidden; user-select: none; touch-action: none; }
.crop-stage img { display: block; max-width: 100%; max-height: 56vh; width: auto; height: auto; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(15,23,42,0.55); cursor: move; box-sizing: border-box; }
.crop-handle { position: absolute; width: 16px; height: 16px; background: var(--panel); border: 2px solid var(--accent); border-radius: 50%; touch-action: none; }
.crop-handle[data-handle="nw"] { left: -9px; top: -9px; cursor: nwse-resize; }
.crop-handle[data-handle="ne"] { right: -9px; top: -9px; cursor: nesw-resize; }
.crop-handle[data-handle="sw"] { left: -9px; bottom: -9px; cursor: nesw-resize; }
.crop-handle[data-handle="se"] { right: -9px; bottom: -9px; cursor: nwse-resize; }
.crop-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 12px; }

/* ===== v152: signature logo background select ===== */
.sig-logo-bg { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); }
.sig-logo-bg select { margin-top: 4px; width: 100%; }

/* ===== v154: minimal project topbar (title now lives in the hero) ===== */
.topbar.topbar-minimal { display: flex; justify-content: flex-start; align-items: center; min-height: 0; margin-bottom: 4px; padding-top: 4px; }
.topbar.topbar-minimal .link-button { font-size: 0.85rem; }

/* ===== v154: project portfolio stats banner + yearly cards ===== */
.project-stats-banner { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: flex-start; align-self: start; }
.pstat { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 7px 13px; cursor: pointer; display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.15; align-self: flex-start; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.pstat:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(37,99,235,0.1); }
.pstat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); font-weight: 800; }
.pstat-value { font-size: 1rem; font-weight: 800; color: var(--heading); }
.pstat.is-due .pstat-value { color: var(--rose); }
.pstat.is-paid .pstat-value { color: var(--success); }
.year-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.year-card { border: 1px solid #e6eaf0; border-radius: 14px; padding: 16px; background: var(--panel); }
.year-card-head { font-size: 1.4rem; font-weight: 800; color: var(--heading); display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.year-card-head small { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.year-card-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 4px 0; }
.year-card-row .pos { color: var(--success); }
.year-card-row .due { color: var(--rose); }
@media (max-width: 760px) { .project-stats-banner .pstat { flex: 1 1 calc(50% - 8px); } }

/* ===== v156: project team assignment ===== */
.hero-assignees { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.hero-assignees-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--ink-soft); margin-right: 2px; }
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: #3730a3; border: 1px solid #e0e7ff; border-radius: 999px; padding: 4px 11px; font-size: 0.8rem; font-weight: 700; }
.assign-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 6px 0 14px; }
.assign-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.assign-row:hover { background: var(--surface-2); }
.assign-row span { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.assign-row small { color: var(--ink-soft); padding-left: 26px; }

/* ===== v159: project board (kanban) + view toggle + year locks ===== */
.project-view-toggle { display: inline-flex; gap: 3px; background: var(--surface-3); border-radius: 9px; padding: 3px; }
.seg-btn { border: none; background: transparent; border-radius: 7px; padding: 6px 14px; font-weight: 800; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; }
.seg-btn.is-active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }

.board-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.board-columns { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.board-col { flex: 0 0 240px; background: var(--surface-2); border: 1px solid #eef2f7; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; min-height: 80px; }
.board-col-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; display: flex; justify-content: space-between; }
.board-col-head span { background: var(--surface-3); color: var(--ink-soft); border-radius: 999px; padding: 1px 8px; font-size: 0.7rem; }
.board-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; max-height: 62vh; overflow-y: auto; padding-right: 2px; border-radius: 8px; transition: background 0.12s ease; }
.board-col-body.drag-over { background: var(--accent-soft); outline: 2px dashed #a5b4fc; }
.board-empty { color: #cbd5e1; font-size: 0.78rem; text-align: center; padding: 14px 0; margin: 0; }
.board-card { background: var(--panel); border: 1px solid #e6eaf0; border-radius: 10px; padding: 10px; cursor: grab; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
.board-card.dragging { opacity: 0.5; }
.board-card-title { display: block; font-weight: 800; color: var(--heading); text-decoration: none; font-size: 0.92rem; margin-bottom: 3px; }
.board-card-title:hover { color: var(--accent); }
.board-card-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 8px; }
.board-card-meta .due { color: var(--rose); font-weight: 700; }
.board-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.board-card-foot small { color: var(--ink-soft); }
.board-card-stage { font-size: 0.72rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); max-width: 110px; }
.year-card.is-locked { border-color: #c7d2fe; background: var(--accent-soft); }
.year-card .text-button { margin-top: 8px; }

/* ===== v160: realtor deals on contact hero ===== */
.hero-stat.deal-stat.is-closed { background: #ecfdf5; border-color: #6ee7b7; }
.hero-stat.deal-stat.is-closed strong { color: #047857; }
.deal-row { border: 1px solid #e6eaf0; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--panel); }
.deal-row.is-closed { background: #ecfdf5; border-color: #a7f3d0; }
.deal-grid-head { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr 0.9fr; gap: 12px; padding: 0 12px 4px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: 800; }
.deal-row-fields { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr 0.9fr; gap: 12px; align-items: center; }
.deal-label { font-weight: 700; }
.deal-commission { text-align: right; }
.deal-commission strong { font-size: 1.05rem; color: var(--heading); }
.deal-row.is-closed .deal-commission strong { color: #047857; }
.deal-badge { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--surface-3); border-radius: 999px; padding: 3px 9px; }
.deal-row.is-closed .deal-badge { color: #047857; background: #d1fae5; }
.deal-row-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.deal-row-buttons { display: flex; gap: 10px; align-items: center; }
.contact-danger-zone { display: flex; justify-content: flex-end; padding: 4px 2px 16px; }
@media (max-width: 640px) {
  .deal-grid-head { display: none; }
  .deal-row-fields { grid-template-columns: 1fr 1fr; }
  .deal-label { grid-column: span 2; }
  .deal-commission { text-align: left; }
}

/* ===== v161: realtor dashboard deals rollup ===== */
.deals-rollup { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rollup-card { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
.rollup-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(37,99,235,0.12); transform: translateY(-1px); }
.rollup-card.is-closed:hover { border-color: #10b981; box-shadow: 0 6px 18px rgba(16,185,129,0.14); }
.rollup-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--ink-soft); }
.rollup-value { font-size: 1.7rem; font-weight: 800; color: var(--heading); line-height: 1.1; }
.rollup-card.is-closed .rollup-value { color: #047857; }
.rollup-sub { font-size: 0.8rem; color: var(--ink-soft); }
.deal-clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-height: 60vh; overflow-y: auto; }
.deal-client-card { text-decoration: none; border: 1px solid #e6eaf0; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.deal-client-card:hover { border-color: var(--accent); }
.deal-client-figures { display: flex; flex-direction: column; border-top: 1px solid #eef2f7; padding-top: 6px; }
.deal-client-figures span { font-weight: 800; color: var(--heading); }
.deal-client-figures small { color: var(--ink-soft); }

/* ===== v162: calendar redesign ===== */
.cal-upnext { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #0f172a, #1e293b); color: #fff; border-radius: 16px; padding: 14px 18px; flex-wrap: wrap; }
.cal-upnext-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #93c5fd; }
.cal-upnext-items { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.cal-upnext-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: #fff; text-align: left; }
.cal-upnext-item:hover { background: rgba(255,255,255,0.16); }
.cal-upnext-text { display: flex; flex-direction: column; }
.cal-upnext-text strong { font-size: 0.86rem; }
.cal-upnext-text small { font-size: 0.72rem; color: #cbd5e1; }
.cal-upnext-empty { color: #cbd5e1; font-size: 0.9rem; }
.cal-src-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

.cal-panel { display: flex; flex-direction: column; gap: 14px; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink); }
.cal-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-title { font-size: 1.25rem; margin: 0 0 0 6px; }
.cal-views.segmented { background: var(--surface-3); border-radius: 9px; padding: 3px; }
.cal-views button { border: none; background: transparent; border-radius: 7px; padding: 6px 14px; font-weight: 800; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; }
.cal-views button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }

.cal-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-legend-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.cal-legend-chip.is-off { opacity: 0.4; text-decoration: line-through; }

.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dow { text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--ink-soft); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, 1fr); gap: 6px; }
.cal-cell { border: 1px solid #eef2f7; border-radius: 10px; padding: 6px; background: var(--panel); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 96px; transition: border-color 0.12s ease; overflow: hidden; }
.cal-cell:hover { border-color: #cbd5e1; }
.cal-cell.cal-out { background: var(--surface-2); }
.cal-cell.cal-out .cal-cell-num { color: #cbd5e1; }
.cal-cell.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell-num { font-size: 0.78rem; font-weight: 800; color: var(--ink-soft); }
.cal-cell.cal-today .cal-cell-num { color: var(--accent); }
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; }
.cal-chip { display: flex; align-items: center; gap: 5px; border: 1px solid var(--chip-bd); background: var(--chip-bg); border-radius: 6px; padding: 2px 6px; font-size: 0.72rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; width: 100%; }
.cal-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chip); flex: 0 0 auto; }
.cal-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.is-done { opacity: 0.5; }
.cal-chip.is-done .cal-chip-text { text-decoration: line-through; }
.cal-more { border: none; background: transparent; color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; cursor: pointer; text-align: left; padding: 1px 6px; }
.cal-more:hover { color: var(--accent); }

.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week-col { border: 1px solid #eef2f7; border-radius: 10px; padding: 8px; background: var(--panel); min-height: 220px; cursor: pointer; }
.cal-week-col.cal-today { border-color: var(--accent); }
.cal-week-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.cal-week-head span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 800; }
.cal-week-head strong { font-size: 1.1rem; }
.cal-week-col.cal-today .cal-week-head strong { color: var(--accent); }
.cal-week-events { display: flex; flex-direction: column; gap: 4px; }
.cal-empty { color: #cbd5e1; text-align: center; font-size: 0.8rem; margin: 6px 0; }

.cal-agenda { display: flex; flex-direction: column; gap: 14px; }
.cal-agenda-date { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef2f7; padding-bottom: 5px; margin-bottom: 8px; }
.cal-agenda-date strong { font-size: 0.95rem; }
.cal-agenda-date span { font-size: 0.72rem; color: var(--ink-soft); background: var(--surface-3); border-radius: 999px; padding: 1px 9px; }
.cal-agenda-events, .cal-day-events { display: flex; flex-direction: column; gap: 6px; }
.cal-agenda-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--panel); cursor: pointer; text-align: left; width: 100%; }
.cal-agenda-row:hover { border-color: var(--ink-soft); }
.cal-agenda-text { display: flex; flex-direction: column; flex: 1; }
.cal-agenda-text strong { font-size: 0.88rem; }
.cal-agenda-text small { font-size: 0.74rem; color: var(--ink-soft); }
.cal-agenda-row.is-done .cal-agenda-text strong { text-decoration: line-through; color: var(--ink-soft); }
.cal-agenda-flag { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rose); }

.cal-connect-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-connect-row .ghost-button { display: inline-flex; align-items: center; gap: 8px; }
.cal-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.cal-toggle input { margin-top: 3px; }
.cal-toggle span { display: flex; flex-direction: column; }
.cal-toggle small { color: var(--ink-soft); font-size: 0.78rem; }

@media (max-width: 720px) {
  .cal-grid { grid-auto-rows: minmax(64px, auto); gap: 3px; }
  .cal-cell { min-height: 64px; padding: 4px; }
  .cal-chip-text { font-size: 0.68rem; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-week-col { min-height: auto; }
}

/* ===== v166: pipeline manager redesign ===== */
.pipe-card-list { display: flex; flex-direction: column; gap: 12px; }
.pipe-card { border: 1px solid #e6eaf0; border-radius: 14px; padding: 14px 16px; background: var(--panel); }
.pipe-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pipe-card-title { display: flex; align-items: center; gap: 10px; }
.pipe-card-title strong { font-size: 1.02rem; color: var(--heading); }
.pipe-chip-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 9px; }
.pipe-card-actions { display: flex; gap: 8px; align-items: center; }
.pipe-card-meta { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 0.8rem; color: var(--ink-soft); flex-wrap: wrap; }
.pipe-dot { color: #cbd5e1; }
.pipe-stage-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pipe-stage { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); background: var(--surface-3); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.pipe-arrow { color: #94a3b8; font-size: 0.78rem; }

.pe-section-label { margin: 16px 0 8px; }
.pe-type-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.pe-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pe-stages { display: flex; flex-direction: column; gap: 8px; }
.pe-stage-row { display: flex; align-items: center; gap: 8px; }
.pe-stage-num { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-3); color: var(--ink-soft); font-size: 0.74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pe-stage-input { flex: 1; }
.pe-move, .pe-remove { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--ink); }
.pe-move:hover, .pe-remove:hover { border-color: var(--accent); color: var(--accent); }
.pe-move:disabled, .pe-remove:disabled { opacity: 0.35; cursor: not-allowed; }
.pe-remove:hover { border-color: var(--rose); color: var(--rose); }

/* ===== v167: platform notice banner + team redesign ===== */
.platform-notice { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 12px; font-weight: 600; font-size: 0.9rem; }
.platform-notice .pn-msg { flex: 1; }
.platform-notice .pn-dismiss { border: none; background: rgba(0,0,0,0.08); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: inherit; flex: 0 0 auto; }
.platform-notice.tone-info { background: var(--accent-soft); color: #1e40af; border: 1px solid #bfdbfe; }
.platform-notice.tone-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.platform-notice.tone-warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

.admin-panel { border-left: 3px solid var(--gold); }
.admin-form-disclosure { margin: 8px 0; }
.admin-form-disclosure > summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 0.88rem; padding: 6px 0; }
.inline-check { display: flex; align-items: center; gap: 8px; flex-direction: row !important; }
.inline-check input { width: auto; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.member-card { border: 1px solid #e6eaf0; border-radius: 14px; padding: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.member-card.is-restricted { opacity: 0.6; background: var(--surface-2); }
.member-top { display: flex; align-items: center; gap: 10px; }
.member-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; }
.member-id { flex: 1; min-width: 0; }
.member-id strong { display: block; }
.member-id small { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.role-badge { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 3px 9px; background: var(--surface-3); color: var(--ink-soft); flex: 0 0 auto; }
.role-badge.role-platform-owner { background: #f5f3ff; color: #6d28d9; }
.role-badge.role-owner { background: var(--accent-soft); color: #1d4ed8; }
.role-badge.role-admin { background: #ecfeff; color: #0e7490; }
.member-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--ink-soft); align-items: center; }
.member-flag { color: var(--rose); font-weight: 700; }
.member-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; border-top: 1px solid #eef2f7; padding-top: 10px; }

/* ===== v168: team seats grouped + call/email + org banner ===== */
.company-group { border: 1px solid #e6eaf0; border-radius: 16px; padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.company-group + .company-group { margin-top: 14px; }
.company-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.company-group-head h3 { margin: 0; font-size: 0.95rem; color: var(--heading); }
.seat-count { font-size: 0.74rem; font-weight: 700; color: var(--ink-soft); background: var(--surface-3); border-radius: 999px; padding: 3px 10px; }
.seat-disclosure > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px dashed #cfd8e3; border-radius: 10px; color: var(--accent); font-weight: 700; font-size: 0.84rem; text-align: center; }
.seat-disclosure > summary::-webkit-details-marker { display: none; }
.seat-disclosure[open] > summary .seat-summary-label::after { content: " (hide)"; color: var(--ink-soft); font-weight: 600; }
.seat-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* member cards inside a group: full width stacked, not the outer grid */
.company-group .member-card { background: var(--panel); }
.member-contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contact-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; text-decoration: none; border: 1px solid var(--accent); cursor: pointer; }
.contact-btn.outline { background: var(--panel); color: var(--accent); }
.contact-btn:hover { filter: brightness(0.96); }
.pn-scope { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0,0,0,0.1); border-radius: 6px; padding: 2px 7px; flex: 0 0 auto; }
.team-directory { display: flex; flex-direction: column; gap: 14px; }
.team-directory .company-group + .company-group { margin-top: 0; }

/* ===== v169: email invites ===== */
.seg-toggle { display: inline-flex; background: var(--surface-3); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 12px; }
.seg-btn { border: none; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.seg-btn.is-on { background: var(--panel); color: var(--heading); box-shadow: 0 1px 3px rgba(15,23,42,0.12); }
.invite-sender-note { background: var(--accent-soft); border: 1px solid #bfdbfe; color: #1e40af; border-radius: 10px; padding: 9px 12px; }
.invite-sender-note.is-warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.invite-sender-note a { color: inherit; font-weight: 700; }

/* ===== v170: team page pop-out layout ===== */
.directory-actions { display: flex; gap: 8px; align-items: center; }
.company-group-meta { display: flex; align-items: center; gap: 10px; }
.compact-heading { margin-bottom: 4px; }
.compact-heading .section-label { margin: 0; }

/* ===== v172: settings hub redesign ===== */
.settings-hub-intro { color: var(--ink-soft); font-size: 0.95rem; margin: 2px 0 18px; max-width: 60ch; }
.settings-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.settings-tile {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--panel); border: 1px solid #e6eaf0; border-radius: 16px; padding: 18px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s;
}
.settings-tile:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(37,99,235,0.10); }
.settings-tile:active { transform: translateY(1px); }
.settings-tile-icon { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.settings-tile-icon svg { width: 26px; height: 26px; }
.settings-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.settings-tile-text strong { font-size: 1.02rem; color: var(--heading); }
.settings-tile-text small { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.35; }
.settings-tile-arrow { flex: 0 0 auto; color: #cbd5e1; font-size: 1.6rem; font-weight: 700; }

.settings-category { animation: settingsFade .18s ease; }
@keyframes settingsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.settings-cat-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.settings-back {
  align-self: flex-start; border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 7px 16px; font-size: 0.85rem; font-weight: 700; color: var(--accent); cursor: pointer;
}
.settings-back:hover { border-color: var(--accent); background: var(--accent-soft); }
.settings-cat-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-cat-title h2 { margin: 0; font-size: 1.35rem; color: var(--heading); }
/* the category body keeps the existing inner panels/subgroups; give it the panel surface */
.settings-category { background: var(--panel); border: 1px solid #e6eaf0; border-radius: 18px; padding: 22px; }
.settings-category > form, .settings-category > .quick-form { margin-top: 0; }

/* ===== v173: dashboard redesign ===== */
.dash-topbar .top-actions { flex-wrap: wrap; }

/* Stat band */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 4px; }
.dash-stat {
  display: flex; flex-direction: column; gap: 4px; text-align: left; text-decoration: none;
  background: var(--panel); border: 1px solid #e6eaf0; border-radius: 16px; padding: 16px 18px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.dash-stat:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(37,99,235,0.10); }
.dash-stat:active { transform: translateY(1px); }
.dash-stat-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.dash-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--heading); line-height: 1.05; }
.dash-stat-sub { font-size: 0.78rem; color: var(--ink-soft); }
.dash-stat.stat-money { background: var(--surface-2); }
.dash-stat.stat-money .dash-stat-value { color: var(--accent); }
.dash-stat.is-closed { background: linear-gradient(180deg, rgba(16,185,129,0.12), var(--panel)); border-color: #bbf7d0; }
.dash-stat.is-closed .dash-stat-value { color: #047857; }

/* Workflow: today + inbox */
.dash-work { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; }
.dash-today, .dash-inbox { display: flex; flex-direction: column; }
.focus-group { margin-bottom: 14px; }
.focus-group:last-child { margin-bottom: 0; }
.focus-group-label { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 8px; }
.focus-group-label span { background: var(--surface-3); border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; }
.focus-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.focus-row:hover { background: var(--accent-soft); }
.focus-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--line); }
.focus-row.is-overdue .focus-dot { background: var(--rose); }
.focus-row.is-today .focus-dot { background: var(--accent); }
.focus-row.is-soon .focus-dot { background: #f59e0b; }
.focus-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.focus-main strong { font-weight: 600; color: var(--ink); }
.focus-main small { color: var(--ink-soft); font-size: 0.78rem; }
.focus-row.is-overdue .focus-main small { color: var(--rose); font-weight: 600; }
.dash-empty { padding: 18px 4px; }
.dashboard-inbox { min-height: 120px; }
.dashboard-inbox .inbox-list { max-height: 340px; }

/* People + pipeline */
.dash-people { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.dash-people-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Launchpad as a tidy disclosure */
.dash-launchpad > summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.dash-launchpad > summary::-webkit-details-marker { display: none; }
.dash-launchpad > summary strong { color: var(--heading); }
.dash-launchpad .quick-link-grid { margin-top: 14px; }

@media (max-width: 900px) {
  .dash-work, .dash-people { grid-template-columns: 1fr; }
  .dash-people-cols { grid-template-columns: 1fr 1fr; }
  .dash-stat-value { font-size: 1.5rem; }
}
@media (max-width: 520px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-people-cols { grid-template-columns: 1fr; }
}

/* ===== v174: task click-off, overdue cleanup, inbox priority + notifications ===== */
/* Scoped to >900px (release bl-2) — unscoped, this had the same specificity as
   the @media (max-width: 900px) stacking rule above and came later in the
   file, so it silently won on every viewport including phones and undid the
   single-column stack: Inbox and Today's focus stayed side-by-side on
   mobile, squeezing "Newest first" / "Refresh" down to one letter per line. */
@media (min-width: 901px) {
  .dash-work { grid-template-columns: 1.1fr 0.9fr; }
}

/* focus rows now carry a checkbox + a link */
#todayFocus { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.focus-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: 10px; }
.focus-row > .focus-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; color: inherit; flex: 1; }
.focus-row:hover { background: var(--accent-soft); }
.focus-check { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.focus-row.is-overdue { border-left: 3px solid var(--rose); }
.focus-row.is-today { border-left: 3px solid var(--accent); }
.focus-row.is-soon { border-left: 3px solid #f59e0b; }
.focus-row.is-overdue .focus-main small { color: var(--rose); font-weight: 600; }
.focus-more { display: inline-block; margin: 4px 0 2px 30px; font-size: 0.8rem; font-weight: 700; color: var(--accent); text-decoration: none; }

/* overdue cleanup panel (calendar) */
.overdue-panel .count-badge { background: #fee2e2; color: var(--rose); }
.overdue-list { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

/* new-email pop-up notifications */
.inbox-notify-host { position: fixed; top: 16px; right: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.inbox-notify {
  display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid #e6eaf0;
  border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.16); cursor: pointer; animation: notifyIn .22s ease;
}
.inbox-notify.leaving { opacity: 0; transform: translateX(12px); transition: opacity .2s, transform .2s; }
@keyframes notifyIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.inbox-notify-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.inbox-notify-icon svg { width: 20px; height: 20px; }
.inbox-notify-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-notify-body strong { font-size: 0.9rem; color: var(--heading); }
.inbox-notify-body small { color: var(--ink-soft); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-notify-x { flex: 0 0 auto; border: none; background: transparent; font-size: 1.2rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }

/* clickable links inside email bodies */
.chat-bubble a, .thread-msg-text a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.chat-row.out .chat-bubble a { color: #fff; text-decoration: underline; }

@media (max-width: 520px) {
  .inbox-notify-host { left: 12px; right: 12px; max-width: none; }
}

/* ===== v176: attachment view/download buttons + convo jump ===== */
.att-name { font-size: 0.84rem; color: var(--ink); display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.att-name small { color: var(--ink-soft); }
.att-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-btn { font-size: 0.8rem; font-weight: 700; text-decoration: none; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.att-btn:hover { filter: brightness(0.95); }
.att-btn.att-btn-ghost { background: var(--panel); color: var(--accent); }
.att-btn.att-btn-ghost:hover { background: var(--accent-soft); filter: none; }
.att-actions select { font-size: 0.8rem; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); }
.convo-jump { white-space: nowrap; flex: 0 0 auto; }

/* v180: Gmail/Outlook correspondent import pop-out */
.imp-body { padding: 4px 2px 2px; min-height: 90px; }
.imp-spinner {
  width: 26px; height: 26px; margin: 14px auto 10px;
  border: 3px solid var(--line, #e2e8f0); border-top-color: var(--accent, #2563eb);
  border-radius: 50%; animation: imp-spin 0.8s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }
.imp-list {
  margin-top: 10px; max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
}
.imp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line, #eef2f7);
  cursor: pointer;
}
.imp-row:last-child { border-bottom: 0; }
.imp-row:hover { background: var(--tint, #f8fafc); }
.imp-row input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; }
.imp-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.imp-name { font-weight: 600; color: var(--ink, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-email { font-size: 12.5px; color: var(--ink-soft, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-meta { flex: 0 0 auto; font-size: 12px; color: var(--ink-soft, #64748b); white-space: nowrap; }
.imp-actions { align-items: center; gap: 14px; margin-top: 14px; }
.imp-selectall { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink, #1f2937); cursor: pointer; }
.imp-selectall input { width: 16px; height: 16px; }
.imp-count { font-size: 13px; color: var(--ink-soft, #64748b); margin-right: auto; }

/* v181: link conversations to projects + project inbox panel */
.convo-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.convo-proj-select {
  font-size: 13px; padding: 6px 10px; border: 1px solid var(--line, #e2e8f0);
  border-radius: 9px; background: var(--panel); color: var(--ink, #1f2937); cursor: pointer; max-width: 200px;
}
.convo-proj-select:hover { border-color: var(--accent, #2563eb); }
.project-inbox-panel .inbox-list { max-height: 52vh; }
.project-inbox-panel > .muted.small { margin: -2px 0 10px; }

/* v182: project icon control + searchable project picker */
.convo-modal-head { padding-right: 52px; } /* keep actions clear of the × button (× spans ~42px from edge) */
.convo-head-actions { align-items: center; }
.icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  border: 1px solid var(--line, #e2e8f0); background: var(--panel); color: var(--accent, #2563eb);
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.icon-action:hover { background: var(--accent-soft); border-color: var(--accent, #2563eb); }
.icon-action:active { transform: scale(0.94); }
.convo-proj-btn .ui-icon svg { overflow: visible; }

.project-picker-overlay { z-index: 1200; }
.project-picker-card { max-width: 440px; width: 92%; }
.project-picker-search {
  width: 100%; margin: 4px 0 10px; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 10px; box-sizing: border-box;
}
.project-picker-search:focus { outline: none; border-color: var(--accent, #2563eb); }
.project-picker-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.project-picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line, #eef2f7); border-radius: 10px; background: var(--panel);
  font-size: 14px; color: var(--ink, #1f2937);
}
.project-picker-row:hover { background: var(--tint, #f8fafc); border-color: var(--accent, #2563eb); }
.pp-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tag { flex: 0 0 auto; font-size: 12px; color: var(--ink-soft, #64748b); }
.pp-empty { padding: 12px 4px; }


/* v187: self-serve signup page */
.login-signup-cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); text-align: center; }
.login-signup-cta .muted { display: block; margin-bottom: 8px; }
.crm-signup-shell { margin: auto; width: 100%; max-width: 920px; padding: 32px 20px; }
.crm-signup-card { width: 100%; max-width: 880px; background: var(--panel); border-radius: 20px; padding: 32px; box-shadow: 0 24px 60px rgba(15,23,42,0.18); }
.crm-signup-card h1 { margin: 6px 0 4px; }
.signup-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; margin-top: 22px; align-items: start; }
.signup-main { display: flex; flex-direction: column; gap: 20px; }
.signup-block { border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 18px; }
.signup-block-title { font-weight: 700; color: var(--ink, #1f2937); margin: 0 0 12px; }
.signup-block .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.signup-block label { display: block; font-size: 13px; color: var(--ink-soft, #64748b); }
.signup-block input[type="text"], .signup-block input[type="email"], .signup-block input[type="tel"], .signup-block input[type="password"], .signup-block input[type="number"] {
  width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 9px; font: inherit; color: var(--ink, #1f2937);
}
.seat-field { max-width: 220px; }
.seat-stepper { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.seat-stepper input { width: 80px; text-align: center; font-weight: 700; }
.seat-btn { width: 38px; height: 38px; border: 1px solid var(--line, #e2e8f0); border-radius: 9px; background: var(--surface-2); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink, #1f2937); }
.seat-btn:hover { background: var(--surface-3); }
.toggle-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; }
.toggle-row input { margin-top: 3px; width: 18px; height: 18px; }
.terms-row { margin-top: 16px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pw-meter { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.pw-bar { display: block; height: 100%; width: 0; transition: width 0.2s ease, background 0.2s ease; }
.signup-summary { border: 1px solid var(--line, #e2e8f0); border-radius: 14px; padding: 20px; background: var(--surface-2); position: sticky; top: 20px; }
.summary-title { font-weight: 700; margin: 0 0 14px; color: var(--ink, #1f2937); }
.summary-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink, #1f2937); margin-bottom: 10px; }
.summary-addon { color: var(--ink-soft, #64748b); font-size: 13px; }
.summary-divider { height: 1px; background: var(--line, #e2e8f0); margin: 6px 0 12px; }
.summary-total { font-weight: 800; font-size: 18px; }
.summary-after { color: var(--ink-soft, #64748b); font-size: 13px; }
.summary-trial { color: var(--success, #10b981); font-weight: 600; font-size: 13px; margin: 6px 0 16px; }
.signup-summary .primary-button { margin-bottom: 12px; }
.summary-secure { line-height: 1.4; }
.discount-wrap { margin-bottom: 14px; }
.discount-row { display: flex; gap: 8px; align-items: center; }
.discount-row input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; }
.discount-status { margin: 5px 0 0; display: block; }
.discount-ok { color: var(--success, #10b981) !important; font-weight: 600; }
@media (max-width: 720px) {
  .signup-grid { grid-template-columns: 1fr; }
  .signup-block .field-row { grid-template-columns: 1fr; }
  .signup-summary { position: static; }
}

/* v187: platform-owner signups panel */
.signups-table { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.signup-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: var(--panel); flex-wrap: wrap; }
.signup-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.signup-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.signup-amt { font-weight: 700; color: var(--ink, #1f2937); }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--ink-soft, #475569); }
.chip-gold { background: rgba(212,175,55,0.16); color: #9a7b15; }
.chip-status { background: rgba(16,185,129,0.14); color: #0f7a55; }

/* v188: render the login->signup CTA anchor as a real button + signup links */
.login-signup-cta a.ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
.crm-signup-card a { color: var(--blue, #2563eb); }

/* v188: signup terms checkbox, inline links, legal modal */
.terms-row { margin-top: 16px; }
.terms-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.terms-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.link-inline { background: none; border: 0; padding: 0; font: inherit; color: var(--blue, #2563eb); cursor: pointer; text-decoration: underline; }
.link-inline:hover { color: var(--accent-dark, #1d4ed8); }
.legal-body { max-height: 55vh; overflow-y: auto; margin: 8px 0 16px; padding-right: 6px; }
.legal-body p { margin: 0 0 12px; line-height: 1.55; color: var(--ink, #1f2937); font-size: 14px; }

/* v189: ensure [hidden] modal overlays stay hidden (display:flex would otherwise win) */
.modal-overlay[hidden] { display: none; }

/* v190: free-trial banner + expiry modal */
.trial-banner { position: fixed; left: 280px; right: 0; bottom: 0; z-index: 180; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; background: var(--navy, #0f172a); color: #fff; box-shadow: 0 -8px 24px rgba(15,23,42,0.22); }
body.rail-collapsed .trial-banner { left: 86px; }
@media (max-width: 1120px) { .trial-banner { left: 0; } }
.trial-banner strong { color: var(--gold, #d4af37); }
.trial-banner-actions { display: flex; align-items: center; gap: 10px; }
.trial-banner .primary-button { min-height: 34px; padding: 0 14px; }
.trial-banner-x { background: transparent; border: 0; color: var(--surface-2); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.trial-banner-x:hover { color: #fff; }
.trial-modal-price { font-weight: 800; font-size: 18px; color: var(--ink, #1f2937); margin: 4px 0 16px; }
#trialExpiredModal .modal-card { max-width: 440px; text-align: left; }
#trialExpiredModal .ghost-button { margin-top: 10px; }
.trial-modal-secure { margin-top: 12px; text-align: center; }
.has-trial-banner { padding-bottom: 64px; }

/* v192: icon buttons — danger variant, small field-clear, icon+text spacing */
.icon-action.danger { color: #b91c1c; border-color: rgba(239,68,68,0.32); }
.icon-action.danger:hover { background: #fff1f2; border-color: #ef4444; }
.field-clear { background: transparent; border: 0; padding: 2px 4px; margin-left: 4px; color: var(--ink-soft, #64748b); cursor: pointer; vertical-align: middle; border-radius: 6px; line-height: 0; }
.field-clear:hover { color: #b91c1c; background: #fff1f2; }
/* keep a small gap between a leading icon and its label inside text/ghost/primary buttons */
.primary-button .ui-icon, .ghost-button .ui-icon, .danger-button .ui-icon, .text-button .ui-icon { margin-right: 5px; }

/* ============================================================
   v193: DARK MODE
   Tokens are overridden so every var()-based surface, text and
   border flips automatically. Below the tokens are targeted
   fixes for the few spots that need a dark-specific value.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6eaf2;
  --ink-soft: #9aa6b8;
  --paper: #0f1420;
  --panel: #161c28;
  --surface-2: #1b2230;
  --surface-3: #232c3d;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --line: #2a3342;
  --panel-dark: #0b0f18;
  --navy: #0b0f18;
  --slate: #cbd5e1;
  --accent: #4b8bf5;
  --accent-dark: #74a6f7;
  --blue: #4b8bf5;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  --heading: var(--ink);
}
html[data-theme="dark"] .inbox-card-main small,
html[data-theme="dark"] .convo-preview { color: var(--ink-soft); opacity: 1; }
html[data-theme="dark"] .inbox-card-main strong { color: var(--ink); }

/* Form controls: make sure inputs/selects/areas read as dark surfaces */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-soft); opacity: 0.8; }
html[data-theme="dark"] select option { background: var(--panel); color: var(--ink); }

/* Pieces that used light hardcoded values not caught by tokens */
html[data-theme="dark"] .check-option:hover { background: var(--surface-3); }
html[data-theme="dark"] .contact-tab { color: var(--ink-soft); }
html[data-theme="dark"] .contact-tabs { background: var(--surface-2); }
html[data-theme="dark"] .contact-tab.is-active { background: var(--panel); color: var(--ink); }
html[data-theme="dark"] .seat-btn { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .field-clear:hover { background: rgba(239, 68, 68, 0.16); }
html[data-theme="dark"] .icon-action:hover { background: var(--accent-soft); }
html[data-theme="dark"] .icon-action.danger:hover { background: rgba(239, 68, 68, 0.16); }
html[data-theme="dark"] .legal-body p { color: var(--ink); }
html[data-theme="dark"] .toast { background: var(--surface-3); color: var(--ink); }
html[data-theme="dark"] .tag { color: var(--accent-dark); }

/* Soft shadows read better as a faint ring in dark */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-card { box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px rgba(0,0,0,0.45); }

/* Dark scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3342; border-radius: 8px; border: 3px solid var(--paper); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* Appearance toggle (settings) */
.theme-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.theme-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-switch .switch-track { width: 50px; height: 28px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); position: relative; transition: background .18s ease; flex: 0 0 auto; }
.theme-switch .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .18s ease; }
.theme-switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.theme-switch input:checked + .switch-track::after { transform: translateX(22px); }
.theme-switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dark mode: calendar event chips. The per-type --chip-bg is a light tint, so in
   dark mode we override the background/border PROPERTIES directly (beats the inline
   custom-property) to a color-tinted dark chip with light, readable text. */
html[data-theme="dark"] .cal-chip {
  background: rgba(255, 255, 255, 0.07);
  background: color-mix(in srgb, var(--chip) 22%, #161c28);
  border-color: var(--chip);
  color: var(--ink);
}
html[data-theme="dark"] .cal-chip .cal-chip-text { color: var(--ink); }

/* Inbox: add-to-contacts prompt when a sender has no email on file */
.chat-reply-addcontact { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; border-top: 1px solid var(--line); }
.chat-reply-addcontact p { margin: 0; }

/* ============ New-user setup guide (onboarding wizard) ============ */
.sg-overlay { z-index: 1200; }
.sg-card { max-width: 540px; width: 100%; padding: 28px 30px 24px; text-align: left; position: relative; border-radius: 16px; }
.sg-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sg-dots { display: inline-flex; gap: 6px; }
.sg-dot { width: 22px; height: 5px; border-radius: 999px; background: var(--surface-3); transition: background .2s ease; }
.sg-dot.active { background: var(--accent); }
.sg-dot.done { background: var(--accent); opacity: 0.45; }
.sg-count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); text-transform: uppercase; }
.sg-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.sg-icon svg { width: 30px; height: 30px; }
.sg-eyebrow { margin: 0 0 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.sg-title { margin: 0 0 10px; font-size: 1.55rem; line-height: 1.15; }
.sg-body { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 0.98rem; }
.sg-bullets { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.sg-bullets li { position: relative; padding-left: 30px; color: var(--ink); font-size: 0.94rem; }
.sg-bullets li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); }
.sg-bullets li::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sg-note { margin: 14px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.sg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.sg-nav-right { display: inline-flex; gap: 10px; }
.sg-skip { color: var(--ink-soft); }
.sg-skip:empty { visibility: hidden; }
@media (max-width: 560px) {
  .sg-card { padding: 22px 20px 20px; }
  .sg-title { font-size: 1.3rem; }
  .sg-actions { flex-direction: column; }
  .sg-actions .primary-button, .sg-actions .ghost-button { width: 100%; text-align: center; }
}

/* Help page: replay setup guide callout */
.help-replay { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ============ Dashboard mortgage-rate chart ============ */
.dash-rates { display: flex; flex-direction: column; gap: 14px; }
.rates-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rates-title { display: block; font-size: 1.05rem; margin: 2px 0 1px; }
.rates-now { display: flex; align-items: center; gap: 14px; }
.rates-figure { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.rate-chart-svg { width: 100%; height: 220px; display: block; }
.rates-source { font-size: 0.74rem; margin: 0; }
@media (max-width: 560px) { .rates-figure { font-size: 1.5rem; } .rate-chart-svg { height: 180px; } }

/* ============ Safety net: undo toast + recently deleted ============ */
.toast-msg { margin-right: 4px; }
.toast-action { margin-left: 12px; background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; font-weight: 700; font-size: 0.82rem; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.toast-action:hover { background: rgba(255,255,255,0.16); }
.recently-deleted { margin-top: 16px; }
.recently-deleted > summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.recently-deleted-list { margin-top: 14px; display: grid; gap: 8px; }
.rd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rd-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Spotlight tour (guided setup) ============ */
.tour-overlay { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }
.tour-overlay.tour-centered { pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tour-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.66); }
.tour-coach-wrap { position: relative; }
.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 12, 20, 0.66); border: 2px solid var(--accent); transition: all 0.18s ease; pointer-events: none; }
.tour-coach { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(8, 12, 20, 0.4); }
.tour-centered .tour-coach { position: relative; width: min(440px, 100%); }
.tour-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.tour-eyebrow { margin: 0 0 5px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.tour-title { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.2; padding-right: 18px; }
.tour-body { margin: 0; color: var(--ink-soft); line-height: 1.5; font-size: 0.92rem; }
.tour-centered .tour-coach .tour-title { font-size: 1.5rem; }
.tour-centered .tour-coach .tour-body { font-size: 0.98rem; }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tour-count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.tour-nav-right { display: inline-flex; gap: 8px; }
.tour-coach .sg-bullets { margin-top: 14px; }

/* ============ Signature upload buttons: clean two-column alignment ============ */
.sig-uploads { align-items: flex-start; gap: 16px; }
.sig-upload-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sig-upload-row { display: flex; align-items: center; gap: 8px; }
.sig-upload-row .upload-button { flex: 1 1 auto; text-align: center; margin: 0; }
.sig-upload-row .icon-action { flex: 0 0 auto; }
@media (max-width: 560px) { .sig-uploads { flex-direction: column; } .sig-upload-col { width: 100%; } }

/* ============ Rate chart hover tooltip ============ */
.dash-rates { position: relative; }
.rate-chart-svg .rate-guide { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.5; }
.rate-chart-svg .rate-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.rate-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: var(--ink); color: var(--paper); padding: 6px 10px; border-radius: 9px; font-size: 0.8rem; line-height: 1.25; text-align: center; pointer-events: none; white-space: nowrap; z-index: 5; box-shadow: 0 6px 18px rgba(8,12,20,0.28); }
.rate-tip strong { display: block; font-size: 0.95rem; }
.rate-tip span { opacity: 0.8; font-size: 0.72rem; }
.rate-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--ink); }

/* ============ Session-expired login notice ============ */
.login-expired-note { background: var(--accent-soft); color: var(--heading); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; font-size: 0.88rem; }

/* ============ FRED key setup help + no-key chart prompt ============ */
.fred-help { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 4px; }
.fred-help .primary-button { display: inline-block; text-decoration: none; }
.fred-steps { margin: 14px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 0.9rem; color: var(--ink); }
.fred-steps li { padding-left: 2px; }
.rate-needs-key { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 4px 8px; max-width: 620px; }
.rate-needs-key p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.rate-needs-key .primary-button { display: inline-block; text-decoration: none; }

/* ============ Help page: get-in-touch buttons ============ */
.help-contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.help-contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.help-contact-actions .primary-button, .help-contact-actions .ghost-button { text-decoration: none; white-space: nowrap; }

/* ============ Platform owner operations console ============ */
.platform-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.platform-metrics .metric-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.platform-metrics .metric-card strong,
.platform-metrics .metric-card span { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.platform-metrics .metric-card strong { font-size: 1.5rem; color: var(--heading); }
.platform-metrics .metric-card span { color: var(--ink-soft); font-size: 0.82rem; }
.platform-metrics .metric-card.accent { border-color: var(--accent); }
.platform-metrics .metric-card.profit { border-color: var(--success); }
.platform-metrics .metric-card.trial-metric { border-color: #fcd34d; }
.platform-metrics .metric-card.trial-metric strong { color: #b45309; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th { text-align: left; padding: 8px 10px; color: var(--ink-soft); font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table select, .data-table input { padding: 6px 8px; }
.charge-input { display: inline-flex; align-items: center; gap: 2px; }
.charge-input input { width: 92px; }

/* Scrollable businesses table — sticky header, caps height past ~8 rows */
.org-table-scroll { max-height: 460px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.org-table-scroll .data-table { font-size: 0.9rem; }
.org-table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel, #fff);
  box-shadow: 0 1px 0 var(--line);
}

/* Trial marker */
.trial-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}
.org-row-trial { background: color-mix(in srgb, #fef3c7 28%, transparent); }
.org-row-trial:hover { background: color-mix(in srgb, #fef3c7 40%, transparent); }
.ghost-button.small, .primary-button.small { padding: 6px 12px; font-size: 0.82rem; }
.code-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
.code-actions { display: flex; gap: 6px; white-space: nowrap; }
.discount-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; margin-bottom: 18px; }
.discount-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--ink-soft); }
.discount-form .discount-note { grid-column: 1 / -1; }
.discount-form button[type="submit"] { height: fit-content; }
.cost-modal { max-width: 540px; }
.cost-rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.cost-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.cost-row .cost-amount { width: 88px; }
.cost-totals { display: flex; gap: 28px; padding: 14px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.cost-totals div { display: flex; flex-direction: column; gap: 2px; }
.cost-totals span { color: var(--ink-soft); font-size: 0.8rem; }
.cost-totals strong { font-size: 1.25rem; color: var(--heading); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ============================================================
   Release af (2026-06-30) — notification visibility + settings polish
   ============================================================ */

/* --- Unified bottom-chrome spacing (release ai) -------------------------------
   ONE source of truth for how much space the fixed bottom chrome occupies:
   the mobile nav rail (--mobile-rail-h, set by JS at <=760px) plus the trial
   banner (--trial-banner-h, set by JS when shown). Anything that must clear the
   bottom — toasts, the save-status pill, page bottom padding — reads
   --bottom-chrome-h. The variable already accounts for whichever chrome is
   present, so each of those needs only ONE rule and there are no more
   per-context overlap bugs to keep in sync. */
:root { --bottom-chrome-h: 0px; }
body.has-trial-banner { --bottom-chrome-h: var(--trial-banner-h, 64px); }
@media (max-width: 760px) {
  :root { --bottom-chrome-h: var(--mobile-rail-h, 66px); }
  body.has-trial-banner { --bottom-chrome-h: calc(var(--mobile-rail-h, 66px) + var(--trial-banner-h, 96px)); }
}

/* Notifications sit above all bottom chrome (nav rail z:40, trial banner z:180). */
.toast { z-index: 4000; bottom: calc(var(--bottom-chrome-h) + 22px + env(safe-area-inset-bottom, 0px)); }
.save-status { z-index: 4000; bottom: calc(var(--bottom-chrome-h) + 18px + env(safe-area-inset-bottom, 0px)); }

/* Modal close (×) is pinned top-right. Reserve a right gutter on modal headers so
   header action buttons never slide under it — fixes the "Mark all overdue done"
   button overlapping the × on the Overdue tasks popup. */
.modal-card .panel-heading { padding-right: 44px; }

/* Settings "Open provider" buttons (FRED + AI scanner, both use .fred-help):
   center the label vertically and horizontally, and center the pill in its help
   block so it reads as intentional rather than pinned to the left. */
.fred-help .primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 2px auto;
  min-height: 44px;
  text-decoration: none;
}

/* Inline links inside settings help text were muted grey and looked like plain
   copy. Make them obviously clickable (FRED API-keys URL, Anthropic console URL). */
.fred-help p a,
.fred-help li a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
}

/* ============================================================
   Release ag (2026-06-30) — trial banner clears the mobile nav rail
   ============================================================ */

/* Reserve page bottom space for whatever fixed chrome is present, from the same
   variable. Covers desktop (banner only), mobile (rail), and mobile+banner. The
   .has-trial-banner selector carries enough specificity to beat the older
   .has-trial-banner padding rule earlier in the file. */
body { padding-bottom: calc(var(--bottom-chrome-h) + 4px); }
body.has-trial-banner { padding-bottom: calc(var(--bottom-chrome-h) + 8px); }

@media (max-width: 760px) {
  /* Float the banner just above the bottom nav rail instead of overlapping it. */
  .trial-banner {
    bottom: var(--mobile-rail-h, 66px);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.28);
  }
}

/* ============================================================
   Release ah (2026-06-30) — dark-mode readability for notices / info callouts
   ============================================================ */

/* These used light-mode text colors (#1e40af, #047857, #b45309) on backgrounds that
   adapt to dark mode, yielding unreadable ~2:1 contrast (WCAG AA needs 4.5:1). Give each
   tone a dark-friendly translucent background with light text. Fixes the announcement
   banners pushed from the Team page and the "invite is sent from…" info box. */
html[data-theme="dark"] .platform-notice.tone-info,
html[data-theme="dark"] .invite-sender-note {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
  color: #bfdbfe;
}
html[data-theme="dark"] .platform-notice.tone-success {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
}
html[data-theme="dark"] .platform-notice.tone-warning,
html[data-theme="dark"] .invite-sender-note.is-warning {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fde68a;
}
/* Dismiss (×) chip is nearly invisible on dark; brighten its hit area. */
html[data-theme="dark"] .platform-notice .pn-dismiss {
  background: rgba(255, 255, 255, 0.14);
}

/* ============================================================
   Release ai (2026-06-30) — dark-mode status callouts + chip contrast
   (found during the mobile sweep of pipeline / projects / campaigns)
   ============================================================ */

/* Status callouts used hardcoded LIGHT backgrounds with no dark override, so in
   dark mode they rendered as bright boxes (and some text dropped below contrast).
   Give each a dark-friendly translucent background with light text. */

/* Orange / next-step (pipeline "Next task", inbox reconnect prompt) */
html[data-theme="dark"] .next-task-line { background: rgba(249, 115, 22, 0.14); }
html[data-theme="dark"] .next-task-line strong { color: #fdba74; }
html[data-theme="dark"] .inbox-reconnect { background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.4); color: #fdba74; }

/* Green / success (closed deals, done timeline items) */
html[data-theme="dark"] .client-timeline-item.done { background: rgba(16, 185, 129, 0.13); }
html[data-theme="dark"] .client-timeline-item.done strong { color: #6ee7b7; }
html[data-theme="dark"] .hero-stat.deal-stat.is-closed { background: rgba(16, 185, 129, 0.13); border-color: rgba(16, 185, 129, 0.4); }
html[data-theme="dark"] .hero-stat.deal-stat.is-closed strong { color: #6ee7b7; }
html[data-theme="dark"] .deal-row.is-closed { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.4); }
html[data-theme="dark"] .deal-row { border-color: var(--line); }

/* Red / overdue (project task rows, overdue client timeline cards) */
html[data-theme="dark"] .project-task-row.overdue { background: rgba(239, 68, 68, 0.12); }
html[data-theme="dark"] .project-task-row.overdue .task-check small { color: #fca5a5; }
html[data-theme="dark"] .client-timeline-item.overdue { background: rgba(239, 68, 68, 0.12); }
html[data-theme="dark"] .client-timeline-item.overdue strong { color: #fca5a5; }

/* Save-status pill transient states (were bright pills flashing on dark). */
html[data-theme="dark"] .save-status.saving { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .save-status.pending { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
html[data-theme="dark"] .save-status.saved { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }

/* Status chip: --slate resolves to a LIGHT grey in dark mode, so its white text was
   illegible (1.48:1). Use a mid-dark slate that white text reads on (~7.7:1). */
html[data-theme="dark"] .type-chip,
html[data-theme="dark"] .type-chip.Other { background: #475569; color: #fff; }

/* Analytics page: range/sort selects in the header, and the pipeline stage-funnel bars. */
.analytics-range-label,
.analytics-sort-label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.analytics-range-label select,
.analytics-sort-label select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink); }
.funnel-list { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 160px 1fr 90px; align-items: center; gap: 12px; }
.funnel-row-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-row-track { position: relative; height: 20px; border-radius: 6px; background: var(--surface-soft, #f1f5f9); overflow: hidden; }
.funnel-row-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 6px; background: var(--accent); opacity: 0.85; }
.funnel-row-meta { font-size: 0.78rem; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.funnel-pipeline-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 -2px; }

html[data-theme="dark"] .funnel-row-track { background: rgba(148, 163, 184, 0.18); }
html[data-theme="dark"] .analytics-range-label select,
html[data-theme="dark"] .analytics-sort-label select { background: var(--card-bg); border-color: var(--line); }

/* MLS linked-listings panel: small thumbnail before the address/price text. */
.listing-row { text-align: left; }
.listing-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surface-soft, #f1f5f9); }
.listing-thumb-empty { display: inline-block; }

html[data-theme="dark"] .listing-thumb-empty { background: rgba(148, 163, 184, 0.18); }

/* Install-app button reuses .settings-link's look but is a <button>, not an <a>, so reset
   the browser's default button chrome only (font/cursor) -- sizing is deliberately left
   alone so it matches its .help-link/.settings-link siblings exactly: full-width in the
   desktop sidebar (flex column, align-items:stretch) and content-sized in the mobile
   bottom bar (flex row, flex: 0 0 auto). An explicit width here previously fought that
   mobile row rule and made the button stretch across the whole bottom bar. */
.pwa-install-btn { font: inherit; cursor: pointer; text-align: left; }