:root {
  color-scheme: light;

  /* canvas — warm cream, honey, and forest */
  --bg: #fbf8f1;
  --bg-grad: #fbf8f1;
  --surface: #fffdf8;
  --card: #fffdf8;
  --surface-2: #f3ece0;
  --surface-3: #ece2d2;

  /* ink + text */
  --ink: #1b1916;
  --ink-2: #3a352e;
  --muted: #8a8275;
  --muted-2: #6e675b;

  /* hairlines */
  --line: #e9e0cf;
  --line-2: #ddd1ba;

  /* dark action (FOREST) */
  --accent: #17181d;
  --accent-hover: #0f1013;

  /* signature honey */
  --gold: #F0AC28;
  --gold-2: #C98F14;
  --gold-soft: #fdf1d7;
  --gold-line: #f3d99a;

  /* status — soft luxe tints, warmed */
  --leaf: #5d9a6c;
  --leaf-soft: #e7f0e6;
  --leaf-line: #d3e6d6;
  --amber: #b8862f;
  --amber-soft: #f7edd3;
  --amber-line: #ebd8a6;
  --rose: #b06a4a;
  --rose-2: #9a543b;
  --rose-soft: #f6e7df;
  --rose-line: #efd4c8;
  --blue: #5b7fb0;
  --blue-soft: #e7edf6;

  /* sidebar — deep forest (names kept; values are green) */
  --navy: #14161c;
  --navy-2: #0e1013;
  --navy-item: #21242c;
  --navy-line: #2a2e38;
  --navy-text: #c6c7ce;
  --navy-muted: #8a8d97;

  /* depth (warm, soft, never harsh) */
  --shadow-soft: 0 2px 6px rgba(40, 30, 10, 0.04), 0 18px 38px -24px rgba(40, 30, 10, 0.24);
  --shadow-lift: 0 4px 10px rgba(40, 30, 10, 0.06), 0 28px 56px -28px rgba(40, 30, 10, 0.32);
  --shadow-gold: 0 14px 28px -12px rgba(240, 172, 40, 0.55);

  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 13px;
  --sidebar: 268px;

  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

/* display headings — Cormorant Garamond */
#viewTitle,
.brand-title,
.greet-title,
.hero-head,
.agent-greeting,
.metric-value,
.panel h1,
.panel h2,
.onboarding-card h2,
.modal-head h1,
.modal-head h2 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg-grad) fixed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.004em;
}

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

/* ===== login gate ===== */
.auth-locked .app-shell {
  display: none;
}

.auth-locked .concierge-fab,
.auth-locked .concierge-pop,
.auth-locked .nav-scrim {
  display: none;
}

.login-gate {
  display: none;
}

.auth-locked .login-gate {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: var(--bg-grad) fixed;
}

.login-card {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-lift);
}

.login-brand {
  padding: 0;
  margin-bottom: 8px;
}

.brand-title.login-brand-name {
  color: var(--gold-2);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-label {
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.login-card input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
}

.login-card input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: transparent;
  background: #fff;
  box-shadow: none;
}

.login-card input:disabled {
  color: var(--ink-3);
  background: #eee9df;
  cursor: not-allowed;
}

.login-help {
  margin: -2px 0 0;
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.45;
}

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--rose-2);
  font-size: 0.82rem;
}

.login-button {
  width: 100%;
  justify-content: center;
}

.login-secondary-button,
.login-cancel-button {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.login-card button[hidden] {
  display: none !important;
}

.login-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

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

button {
  cursor: pointer;
  color: inherit;
}

/* ===== shell ===== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 14px;
  height: calc(100vh - 28px);
  min-height: 0;
  margin: 14px 0 14px 14px;
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  box-shadow: 0 20px 44px -28px rgba(20, 16, 8, 0.6);
  color: var(--navy-text);
  overflow: hidden auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 4px 6px 6px;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--gold-2);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.brand-title {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 3px;
}

.nav-list {
  display: grid;
  gap: 2px;
}

.nav-item,
.ghost-button,
.primary-button,
.secondary-button,
.small-button,
.chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-item {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  min-height: 38px;
  padding: 10px 13px;
  border-radius: 13px;
  background: transparent;
  color: var(--navy-text);
  font-weight: 500;
  font-size: 0.88rem;
}

.nav-item i[data-lucide] {
  color: var(--navy-muted);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-item:hover i[data-lucide] {
  color: #fff;
}

.nav-item.active {
  background: var(--gold);
  color: #1b1b1d;
  font-weight: 700;
  box-shadow: 0 12px 22px -12px rgba(240, 172, 40, 0.55);
}

.nav-item.active i[data-lucide] {
  color: #1b1b1d;
}

.sidebar-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
}

.ghost-button {
  flex-direction: column;
  gap: 5px;
  min-height: 56px;
  padding: 9px 6px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--navy-text);
  border-color: var(--navy-line);
  font-size: 0.72rem;
  font-weight: 600;
}

.ghost-button i[data-lucide] {
  color: var(--navy-muted);
}

.ghost-button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.ghost-button:hover i[data-lucide] {
  color: #fff;
}

.ghost-button.danger:hover {
  color: #ffd9d2;
  border-color: rgba(207, 124, 112, 0.6);
}

.ghost-button.danger:hover i[data-lucide] {
  color: var(--rose);
}

.search-status {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--gold-line);
  border-radius: 13px;
  background: var(--gold-soft);
  color: var(--ink-2);
  font-size: 0.84rem;
}

.search-status strong {
  color: var(--ink);
}

.search-status.danger {
  border-color: var(--rose-line);
  background: var(--rose-soft);
  color: var(--rose-2);
}

/* ===== modal ===== */
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  /* iOS Safari resolves 100vh to the LARGE viewport -- the page as it would be
     with the toolbars retracted. With them showing, a layer sized that way
     extends under the browser chrome and its lowest controls cannot be reached.
     100dvh tracks what is actually on screen. The vh line stays first as the
     fallback for engines without dvh. */
  height: 100vh;
  height: 100dvh;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 28, 31, 0.34);
  backdrop-filter: blur(3px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(20, 20, 25, 0.28);
}

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

.modal-copy {
  margin-bottom: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.icon-only {
  min-width: 38px;
  padding-inline: 9px;
}

.danger-action {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
  box-shadow: none;
}

.danger-action:hover {
  background: var(--rose-2);
}

.lead-operational-actions {
  display: grid;
  gap: 7px;
  min-width: 148px;
}

.lead-operational-actions .small-button {
  width: 100%;
  justify-content: center;
}

.small-button.lead-respond-button {
  min-height: 44px;
}

.job-main .lead-respond-button {
  margin-top: 8px;
}

.lead-respond-button:focus-visible,
.lead-respond-tools .small-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 172, 40, 0.45);
}

.lead-respond-notes {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lead-respond-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-respond-tools .small-button {
  min-height: 44px;
  text-decoration: none;
}

.lead-respond-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lead-respond-status:empty {
  display: none;
}

.lead-respond-form textarea {
  min-height: 150px;
  font-weight: 400;
  line-height: 1.55;
}

.dispatch-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  color: var(--muted);
}

.dispatch-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.dispatch-context span {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}

.dispatch-context small,
.dispatch-state small {
  color: var(--muted);
}

.dispatch-state {
  display: grid;
  gap: 8px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  background: var(--gold-soft);
}

.dispatch-state strong {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dispatch-state p {
  margin: 0;
}

.dispatch-state.success {
  border-color: var(--leaf-line);
  background: var(--leaf-soft);
}

.dispatch-reconcile {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  background: var(--surface);
}

.dispatch-reconcile.success {
  border-color: var(--leaf-line);
  background: var(--leaf-soft);
}

.dispatch-reconcile-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.dispatch-reconcile-title > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold-2);
}

.dispatch-reconcile-title > div {
  display: grid;
  gap: 3px;
}

.dispatch-reconcile-title small,
.dispatch-reconcile-compare small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dispatch-reconcile-title strong {
  line-height: 1.45;
}

.dispatch-reconcile-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.dispatch-reconcile-compare span {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.dispatch-reconcile-compare span.authoritative {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}

.dispatch-reconcile-compare em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.dispatch-reconcile p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.5;
}

.dispatch-reconcile-progress {
  min-height: 20px;
  margin: -3px 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

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

.dispatch-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.dispatch-form label span {
  font-size: 0.84rem;
}

/* The schedule row carries THREE controls (visit date, start time, how long).
   It used to reuse .form-row.compact, which is a two-column grid, so the third
   control fell into an implicit second row at half width while its neighbours
   stayed full width. Stacked is the honest phone layout - three of these side
   by side at 375px would be about 95px each, narrower than a thumb - so the
   columns only appear once there is room for them. */
.dispatch-form .form-row.dispatch-schedule {
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}

@media (min-width: 821px) {
  .dispatch-form .form-row.dispatch-schedule {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A native date input sizes itself around its own spinner and came out 47px
   tall next to 42px selects, which is the mismatch the owner saw between visit
   date and start time. Pinning one height makes them read as one row, and 48px
   clears the 44px minimum a finger lands on. The 16px font is not taste: iOS
   Safari zooms the whole page when a control under 16px takes focus, and that
   zoom is what made these drop-downs feel broken on a phone. */
.dispatch-form .form-row.dispatch-schedule input,
.dispatch-form .form-row.dispatch-schedule select {
  min-width: 0;
  height: 48px;
  padding: 0 13px;
  font-size: 16px;
}

.dispatch-boundary {
  margin: 0;
  padding: 12px;
  border-left: 3px solid var(--gold);
  border-radius: 0 11px 11px 0;
  background: var(--gold-soft);
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.dispatch-confirm {
  grid-template-columns: auto 1fr !important;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--rose-line);
  border-radius: 12px;
  background: var(--rose-soft);
}

.dispatch-confirm input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

@media (max-width: 560px) {
  .lead-operational-actions {
    width: 100%;
    min-width: 0;
  }

  .dispatch-context,
  .dispatch-reconcile-compare,
  .dispatch-form .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dispatch-reconcile + .dispatch-reconcile-progress + .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dispatch-reconcile + .dispatch-reconcile-progress + .modal-actions button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .dispatch-form .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dispatch-form .modal-actions button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .lead-respond-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-respond-tools .small-button {
    width: 100%;
  }

  .lead-respond-form textarea {
    min-height: 128px;
  }
}

/* ===== onboarding ===== */
.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.onboarding-scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 28, 31, 0.2);
  pointer-events: auto;
}

.onboarding-target {
  z-index: 45;
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #1b1b1d !important;
  box-shadow: 0 0 0 4px rgba(240, 172, 40, 0.3) !important;
}

.onboarding-target i[data-lucide] {
  color: #1b1b1d !important;
}

.onboarding-card {
  position: absolute;
  top: 92px;
  left: calc(var(--sidebar) + 24px);
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  pointer-events: auto;
}

.onboarding-kicker {
  margin-bottom: 6px;
  color: var(--gold-2);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.onboarding-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--gold-soft);
  overflow: hidden;
  margin-bottom: 14px;
}

.onboarding-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onboarding-card h2 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.onboarding-card p {
  margin-bottom: 14px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

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

.onboarding-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

/* ===== workspace ===== */
.workspace {
  min-width: 0;
  padding: 0 28px 40px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -28px 20px;
  padding: 16px 28px 14px;
  /* Sticky bar: must be fully opaque, or cards scrolling underneath ghost
     through the strip and read as clipped rows at the top of the column. */
  background: var(--bg);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--gold-2);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

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

h1 {
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
}

h2 {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: none;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
}

.search-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(300px, 28vw);
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
}

.search-shell input {
  border: 0;
  padding: 0;
  min-height: auto;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 0.86rem;
}

.search-shell input:focus {
  box-shadow: none;
  outline: none;
}

.search-shell kbd {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.68rem;
}

.profile-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 4px 14px 4px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.profile-pill:hover {
  transform: translateY(-1px);
}

.profile-pill strong,
.profile-pill small {
  display: block;
  line-height: 1.2;
}

.profile-pill strong {
  font-size: 0.82rem;
  font-weight: 700;
}

.profile-pill small {
  color: var(--muted);
  font-size: 0.72rem;
}

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
}

.primary-button,
.secondary-button,
.small-button,
.chip-button {
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.84rem;
  min-height: 42px;
  border-radius: 999px;
}

.primary-button {
  background: var(--gold);
  color: #1b1b1d;
  border-color: transparent;
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -12px rgba(240, 172, 40, 0.7);
}

.primary-button i[data-lucide] {
  color: #1b1b1d;
}

.secondary-button {
  background: var(--surface);
  color: var(--ink);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.secondary-button i[data-lucide] {
  color: var(--muted-2);
}

.secondary-button:hover {
  transform: translateY(-1px);
}

.small-button {
  min-height: 34px;
  padding: 7px 12px;
  background: var(--surface);
  color: var(--muted-2);
  border-color: var(--line-2);
  font-size: 0.8rem;
}

.small-button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.primary-button:disabled,
.secondary-button:disabled,
.small-button:disabled,
.chip-button:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

.lead-alert-panel {
  border-color: var(--gold-line);
  box-shadow: 0 20px 45px -28px rgba(240, 172, 40, 0.55);
}

.lead-alert-card {
  background: linear-gradient(135deg, rgba(255, 250, 236, 0.96), rgba(255, 255, 255, 0.98));
}
.lead-readiness {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--gold);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink-2);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.lead-readiness > * {
  min-width: 0;
}
.lead-readiness.tone-rose { border-left-color: var(--rose); background: rgba(255, 241, 241, 0.88); }
.lead-readiness.tone-amber { border-left-color: var(--amber); background: rgba(255, 247, 229, 0.9); }
.lead-readiness.tone-leaf { border-left-color: var(--leaf); background: rgba(239, 249, 243, 0.9); }
.lead-readiness.compact { padding: 10px; gap: 6px; }
.lead-readiness-pending { color: var(--muted-2); }
.lead-readiness-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lead-readiness-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
  color: var(--ink);
}
.lead-readiness-title i[data-lucide] { width: 16px; height: 16px; }
.lead-readiness-score {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lead-readiness-score strong { font-size: 1.05rem; }
.lead-readiness-confidence {
  color: var(--muted-2);
  font-size: 0.72rem;
}
.lead-readiness-reasons {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 18px;
}
.lead-readiness-missing,
.lead-readiness-next {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.lead-readiness-ready {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--leaf-2);
  font-weight: 700;
}
.lead-readiness-ready i[data-lucide] { width: 14px; height: 14px; }
.lead-metrics-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.lead-photo-thumb,
.lead-photo {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
}
.lead-photo-thumb {
  overflow: hidden;
  padding: 0;
  cursor: zoom-in;
}
.lead-photo-thumb .lead-photo,
.lead-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lead-photo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: var(--gold-2);
  font-size: 0.79rem;
  font-weight: 700;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  font-family: inherit;
}
.lead-photo-link:hover span {
  text-decoration: underline;
}
.lead-photo-link i[data-lucide] {
  width: 14px;
  height: 14px;
}
.lead-photo-modal {
  padding: 0 22px 24px;
  display: grid;
  place-items: center;
}
.lead-photo-modal img {
  display: block;
  max-width: 100%;
  max-height: min(68vh, 760px);
  border-radius: 12px;
  object-fit: contain;
  background: var(--surface-3);
}

@media (max-width: 520px) {
  .lead-readiness-head .badge { width: 100%; justify-content: center; }
  .lead-readiness { padding: 10px; }
}

.chip-button {
  min-height: 36px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line-2);
  font-size: 0.82rem;
}

.chip-button:hover {
  background: var(--surface-2);
}

.chip-button.active {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold-2);
}

/* ===== views ===== */
.view-region {
  min-width: 0;
}

.grid {
  display: grid;
  gap: 16px;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

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

.two-column {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
}

.customers-split {
  align-items: start;
}

.customers-list-panel .list,
.customer-detail-panel > .grid {
  min-width: 0;
}

.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

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

.panel-header .muted,
.panel-header p {
  font-size: 0.8rem;
}

.muted {
  color: var(--muted);
}

.metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  min-height: 96px;
  align-items: center;
}

.metric-value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.metric-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.metric .row-meta {
  font-size: 0.76rem;
}

.metric-line {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.metric-line span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
}

.list {
  display: grid;
  gap: 9px;
}

.relationship-row,
.commitment-row,
.timeline-row,
.community-row,
.folder-row,
.moment-row {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.relationship-row {
  grid-template-columns: auto minmax(160px, 0.95fr) minmax(200px, 1.05fr);
  align-items: center;
  text-align: left;
}

.relationship-row:hover,
.commitment-row:hover,
.timeline-row:hover,
.community-row:hover,
.folder-row:hover {
  background: var(--surface-2);
  transform: translateX(2px);
}

.relationship-row.selected {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}

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

.moment-row:hover {
  background: var(--surface-2);
}

.folder-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--gold-soft);
  color: var(--gold-2);
}

.row-next {
  min-width: 0;
  max-width: 260px;
  padding-left: 13px;
  border-left: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 0.82rem;
}

.row-title {
  font-weight: 700;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

/* ===== badges / pills ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted-2);
  font-size: 0.73rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge.teal,
.badge.gold {
  background: var(--gold-soft);
  color: var(--gold-2);
  border-color: var(--gold-line);
}

.badge.icon-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold-2);
}

.badge.amber {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber-line);
}

.badge.coral,
.badge.rose {
  background: var(--rose-soft);
  color: var(--rose-2);
  border-color: var(--rose-line);
}

.badge.leaf {
  background: var(--leaf-soft);
  color: var(--leaf);
  border-color: var(--leaf-line);
}

/* ===== forms ===== */
.form-grid {
  display: grid;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.36fr) auto;
  gap: 8px;
}

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

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 11px 13px;
  font-size: 0.86rem;
  outline: none;
}

textarea {
  min-height: 86px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input:focus,
textarea:focus,
select:focus {
  border-color: transparent;
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(240, 172, 40, 0.25);
}

.helper-output,
.folder-preview,
.summary-box {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.summary-box {
  line-height: 1.55;
}

.folder-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  background: var(--surface-2);
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* ===== business library ===== */
.library-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 172, 40, 0.16), transparent 35%),
    var(--surface);
}

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

.library-metric {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2);
  text-align: left;
}

.library-metric strong {
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  line-height: 1;
}

.library-metric span {
  color: var(--muted-2);
  font-size: 0.76rem;
  font-weight: 750;
}

.library-metric.active {
  border-color: rgba(190, 128, 12, 0.55);
  box-shadow: inset 0 0 0 1px rgba(240, 172, 40, 0.18);
  background: rgba(255, 244, 211, 0.82);
}

.library-client-list,
.library-shelves {
  display: grid;
  gap: 9px;
}

.membership-request-list {
  display: grid;
  gap: 10px;
}

.membership-request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(255, 250, 240, 0.82), var(--surface));
}

.membership-request-main,
.membership-request-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.membership-request-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.membership-request-title strong {
  color: var(--ink);
  font-size: 1rem;
}

.membership-request-main p,
.membership-request-main small {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.78rem;
  line-height: 1.5;
}

.membership-request-main .source-list a {
  color: var(--gold-dark);
  font-size: 0.76rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.membership-request-actions {
  justify-items: end;
  max-width: 260px;
  text-align: right;
}

.membership-request-actions .primary-button {
  width: 100%;
  white-space: normal;
  line-height: 1.3;
}

.library-client-row,
.library-shelf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  text-align: left;
}

.library-client-row:hover,
.library-shelf:hover {
  border-color: rgba(190, 128, 12, 0.42);
  background: #fffaf0;
}

.library-client-copy,
.library-shelf > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.library-client-copy strong,
.library-shelf strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.library-client-copy > span,
.library-shelf small {
  color: var(--muted-2);
  font-size: 0.76rem;
  line-height: 1.45;
}

.library-row-arrow,
.library-shelf > span:last-child {
  color: var(--gold-dark);
  font-weight: 800;
}

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

.library-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.library-reference-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.library-reference-card strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.library-reference-card p {
  margin: 5px 0 0;
  color: var(--muted-2);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.library-reference-wide {
  grid-column: 1 / -1;
}

.library-shelf {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 92px;
}

.brain-form {
  display: grid;
  gap: 10px;
}

.brain-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.4fr) minmax(100px, 0.24fr) auto;
  gap: 9px;
  align-items: end;
}

.brain-controls .primary-button {
  width: 100%;
}

.brain-query-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.brain-results {
  display: grid;
  gap: 11px;
}

.brain-hit {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.brain-hit-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.brain-hit h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.brain-excerpt {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.56;
  overflow-wrap: anywhere;
}

.brain-evidence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}

.brain-evidence code {
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted-2);
  font-size: 0.74rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.health-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--leaf);
  font-weight: 700;
  font-size: 0.84rem;
  border: 1px solid var(--leaf-line);
}

.care-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--rose-line);
  border-left: 3px solid var(--rose);
  border-radius: var(--radius-sm);
  background: var(--rose-soft);
  color: var(--rose-2);
  font-size: 0.85rem;
  line-height: 1.45;
}

.care-flag i[data-lucide] {
  color: var(--rose);
  flex: 0 0 17px;
}

.empty-state {
  padding: 18px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface);
  font-size: 0.84rem;
}

.inline-block,
.inline-form {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.inline-block p {
  margin: 0;
  font-size: 0.86rem;
}

.spark-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.spark-card svg {
  width: 82px;
  height: 26px;
}

.assistant-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.assistant-note:hover {
  background: var(--surface-2);
}

.assistant-note .small-button {
  min-width: 34px;
  padding: 8px;
}

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

.recent-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.recent-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

i[data-lucide] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* ===== responsive ===== */
@media (max-width: 1080px) {
  .metrics-grid,
  .three-column,
  .dashboard-grid,
  .two-column,
  .recent-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1440px) {
  .customers-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* mobile nav drawer (off-canvas) — hidden on desktop */
.topbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  /* sidebar becomes a slide-in drawer keeping its full labeled nav */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(286px, 84vw);
    height: 100%;
    margin: 0;
    border-radius: 0 22px 22px 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
  body.nav-open .sidebar {
    transform: translateX(0);
  }
  body.nav-open {
    overflow: hidden;
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-soft);
  }
  .nav-toggle i[data-lucide] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(20, 18, 12, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    position: static;
    margin: -16px -16px 16px;
    padding: 12px 16px;
  }

  .onboarding-card {
    position: fixed;
    inset: auto 12px 12px;
    width: auto;
  }

  .onboarding-actions {
    justify-content: stretch;
  }

  .onboarding-actions button {
    flex: 1;
  }

  .workspace {
    padding: 16px;
  }

  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
    gap: 8px;
  }

  .search-shell {
    grid-column: 1 / -1;
    min-width: 100%;
    min-height: 38px;
    padding: 0 11px;
  }

  .profile-pill,
  #startOnboardingTop {
    display: none;
  }

  .topbar-actions button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.78rem;
  }

  .search-status {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-card {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }

  .modal-actions,
  .form-row.compact {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    display: grid;
  }

  .metrics-grid,
  .three-column,
  .dashboard-grid,
  .two-column,
  .recent-grid {
    grid-template-columns: 1fr;
  }

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

  .brain-controls {
    grid-template-columns: 1fr;
  }

  .library-metrics,
  .library-shelves,
  .library-reference-grid {
    grid-template-columns: 1fr;
  }

  .library-reference-wide {
    grid-column: auto;
  }

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

  .library-client-row .source-list {
    grid-column: 2 / -1;
    margin-top: 0;
  }

  .membership-request-card {
    grid-template-columns: 1fr;
  }

  .membership-request-actions {
    justify-items: stretch;
    max-width: none;
    text-align: left;
  }

  .brain-evidence {
    align-items: stretch;
    flex-direction: column;
  }

}

@media (max-width: 480px) {
  .auth-locked .login-gate {
    align-items: start;
    padding: 14px;
    overflow-y: auto;
  }

  .login-card {
    gap: 10px;
    padding: 20px;
  }

  .metrics-grid {
    gap: 9px;
  }

  .panel {
    padding: 15px;
  }

  .dash-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-actions .secondary-button,
  .dash-actions .primary-button,
  .panel-header > button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .auto-card:has(.lead-readiness) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .auto-card:has(.lead-readiness) > .small-button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .auto-card:has(.lead-readiness) > .lead-operational-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .auto-card:has(.lead-readiness) > div,
  .auto-card:has(.lead-readiness) .lead-readiness {
    min-width: 0;
  }

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

  .row-next {
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }
}

/* ===== sidebar groups ===== */
.nav-sub {
  display: grid;
  gap: 2px;
  margin-left: 14px;
  padding-left: 11px;
  border-left: 1px solid var(--navy-line);
}
.nav-child {
  min-height: 34px;
  font-size: 0.84rem;
}
.nav-label {
  margin: 14px 10px 2px;
  color: var(--navy-muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ===== agent home / chat ===== */
.agent-home {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 6vh;
}
.agent-greeting {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.agent-greeting span {
  color: var(--muted);
}
.composer {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px 12px;
}
.composer textarea {
  border: 0;
  min-height: 52px;
  padding: 0;
  font-size: 0.98rem;
  background: transparent;
  resize: none;
}
.composer textarea:focus {
  box-shadow: none;
}
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.composer-foot .model-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--muted);
}
.send-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--gold);
  color: #1b1b1d;
  box-shadow: var(--shadow-gold);
}
.send-btn:hover {
  transform: translateY(-1px);
}
.suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.suggested button {
  width: auto;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.84rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.suggested button:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}

.chat-thread {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding-bottom: 8px;
}
.bubble-user {
  justify-self: end;
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 16px 16px 5px 16px;
  background: var(--navy);
  color: #fff;
  font-size: 0.9rem;
}
.bubble-agent {
  justify-self: start;
  max-width: 92%;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}
.bubble-agent .agent-mk b {
  font-weight: 700;
}
.bubble-agent .agent-mk {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}
.agent-ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--gold-soft);
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
}
.thinking {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
}
.thinking i {
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.draft-card {
  margin-top: 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  padding: 14px;
}
.draft-card .draft-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.draft-card .draft-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 0.88rem;
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.send-status {
  font-size: 0.82rem;
  color: var(--leaf);
  align-self: center;
}
.composer-docked {
  max-width: 820px;
  margin: 14px auto 0;
}

/* ===== data table ===== */
.seg {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.seg button {
  border: 0;
  background: transparent;
  padding: 8px 15px;
  font-size: 0.82rem;
  color: var(--muted-2);
  min-height: 36px;
}
.seg button.active {
  background: var(--gold);
  color: #1b1b1d;
  font-weight: 700;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
table.crm {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 720px;
}
table.crm th {
  text-align: left;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}
table.crm td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.crm tr:last-child td {
  border-bottom: 0;
}
table.crm tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
table.crm tbody tr:hover {
  background: var(--surface-2);
}
table.crm.audit-table {
  min-width: 880px;
}
table.crm.audit-table tbody tr {
  cursor: default;
}
.audit-meta {
  display: block;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
table.crm .cell-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
table.crm .mini-ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-2);
  font-size: 0.72rem;
  font-weight: 700;
  flex: 0 0 30px;
}
.col-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.col-ai .ai-tag {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  border-radius: 5px;
  padding: 2px 5px;
  letter-spacing: 0.04em;
}

/* ===== reports ===== */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 180px;
  padding: 8px 4px 0;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.chart-col .bar {
  width: 70%;
  max-width: 46px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.chart-col small {
  color: var(--muted);
  font-size: 0.74rem;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: var(--muted-2);
}
.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
}

/* ===== automations ===== */
.auto-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.auto-card > :not(.folder-icon):not(.badge):not(.toggle) {
  min-width: 0;
  max-width: 100%;
}
.auto-card .row-title,
.auto-card .row-meta,
.auto-card .row-meta > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.auto-card:hover {
  background: var(--surface-2);
}
.auto-card .toggle {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--leaf);
  position: relative;
  flex: 0 0 38px;
  transition: background 0.15s ease;
}
.auto-card .toggle.off {
  background: var(--surface-3);
  border: 1px solid var(--line-2);
}
.auto-card .toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 18px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}
.auto-card .toggle.off::after {
  left: 2px;
}
.flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.flow-arrow {
  text-align: center;
  color: var(--gold-2);
}

/* ===== calendar — agenda ===== */
.cal {
  margin-bottom: 18px;
}
.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.calendar-actions a {
  text-decoration: none;
}

.cal-agenda {
  display: grid;
  gap: 0;
}
.cal-dayrow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.cal-dayrow:first-child {
  border-top: 0;
  padding-top: 2px;
}
.cal-dayrow:last-child {
  padding-bottom: 2px;
}

/* left date rail */
.cal-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 3px;
}
.cal-dow {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-dnum {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cal-dayrow.is-today .cal-dow {
  color: var(--gold-2);
}
.cal-dayrow.is-today .cal-dnum {
  border-radius: 50%;
  background: var(--gold);
  color: #1b1b1d;
  font-size: 0.98rem;
  box-shadow: 0 8px 16px -8px rgba(240, 172, 40, 0.7);
}

/* jobs for a day */
.cal-jobs {
  display: grid;
  gap: 8px;
  min-width: 0;
  /* The job list is the sizing authority for its rows: the Jobs panel is a
     narrow side column on tablet and a wide full-bleed panel when stacked,
     so the row layout keys off the real container width, not the viewport. */
  container-type: inline-size;
  container-name: joblist;
}
/* Narrow container (mobile, and the tablet-landscape side column): time and
   status share the first line, the detail block gets the full width below. */
.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.job-row:hover {
  background: var(--surface-2);
  transform: translateX(2px);
  box-shadow: var(--shadow-soft);
}
.job-row.tone-leaf { border-left-color: var(--leaf); }
.job-row.tone-gold { border-left-color: var(--gold); }
.job-row.tone-rose { border-left-color: var(--rose); }
.job-row.tone-amber { border-left-color: var(--amber); }

.job-time {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.job-main {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}
.job-row > .badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* Wide container: the original three-up row (time · detail · status). */
@container joblist (min-width: 420px) {
  .job-row {
    grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
  }
  .job-main {
    grid-column: 2;
    grid-row: 1;
  }
  .job-row > .badge {
    grid-column: 3;
  }
}

.job-customer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.job-details {
  display: block;
  margin-top: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.79rem;
  overflow-wrap: anywhere;
}
.job-request {
  cursor: default;
}

/* An inbound lead card carries far more than a scheduled visit (readiness,
   notes, contact links, Respond). Below tablet it stacks so the detail column
   gets the full card width instead of a ~140px gutter. */
@media (max-width: 700px) {
  .job-row.job-request {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .job-request > .badge {
    justify-self: start;
  }
}
.job-call {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  min-width: 0;
  max-width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-2);
  /* Email addresses have no break opportunities — without this they push the
     whole document wider than the viewport. */
  overflow-wrap: anywhere;
}
.job-call i[data-lucide] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--gold-2);
}
.job-call:hover {
  text-decoration: underline;
}
.job-note {
  display: block;
  margin-top: 5px;
  font-size: 0.79rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.job-note i[data-lucide] {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--muted-2);
  vertical-align: -2px;
  margin-right: 3px;
}
.job-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
  max-width: 100%;
}
.loop-receipt {
  color: var(--gold-2);
  font-weight: 600;
}

/* ===== premium dashboard (Home) ===== */
.dash {
  display: grid;
  gap: 20px;
}

.dash-greet {
  margin: 2px 0 2px;
}
.dash-greet .eyebrow {
  margin-bottom: 8px;
}
.greet-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
}
.greet-title span {
  color: var(--muted);
  font-weight: 700;
}
.greet-sub {
  margin: 8px 0 0;
  color: var(--muted-2);
  font-size: 1.02rem;
  font-weight: 500;
}

/* dark hero card */
.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(240, 172, 40, 0.22), transparent 55%),
    linear-gradient(160deg, #26262b 0%, #161619 70%);
  color: #fff;
  box-shadow: 0 26px 54px -30px rgba(20, 16, 8, 0.7);
}
.hero-main {
  min-width: 0;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero-eyebrow i[data-lucide] {
  color: var(--gold);
}
.hero-head {
  margin: 0 0 8px;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #fff;
}
.hero-sub {
  margin: 0;
  color: #b6b2c0;
  font-size: 0.92rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1b1d;
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: var(--shadow-gold);
  transition: transform 0.15s ease;
}
.hero-pill:hover {
  transform: translateY(-1px);
}
.hero-pill.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.hero-pill.ghost i[data-lucide] {
  color: #fff;
}

/* quick-access tiles */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tile {
  display: grid;
  gap: 12px;
  align-content: start;
  text-align: left;
  padding: 18px;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.tile-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--gold-soft);
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
}
.tile-ic i[data-lucide] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.tile-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tile-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ask-the-concierge card */
.ask-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.ask-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ask-title {
  font-size: 1rem;
  font-weight: 700;
}
.ask-sub {
  font-size: 0.82rem;
}
.ask-card .composer {
  border-color: var(--line-2);
  box-shadow: none;
  background: var(--surface-2);
}

/* two-column lower dash */
.dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: start;
}
.dash-cols .cal {
  margin-bottom: 0;
}

/* dark panel variant */
.panel.dark {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
  border-color: var(--navy-line);
  color: #ededf2;
  box-shadow: 0 24px 50px -32px rgba(20, 16, 8, 0.7);
}
.panel.dark h2 {
  color: #fff;
}
.panel.dark .muted {
  color: #9a9aa6;
}
/* light cards inside a dark focal panel keep dark text (names were inheriting near-white) */
.panel.dark .auto-card {
  color: var(--ink);
}
.panel.dark .auto-card .row-meta {
  color: var(--muted-2);
}
.provider-command-center {
  display: grid;
  min-width: 0;
  gap: 18px;
  padding: clamp(20px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid #2b303b;
  border-radius: 28px;
  color: #f7f5ef;
  background:
    radial-gradient(circle at 10% 0%, rgba(240, 172, 40, 0.16), transparent 26%),
    radial-gradient(circle at 92% 16%, rgba(75, 139, 215, 0.13), transparent 24%),
    linear-gradient(145deg, #101217 0%, #1b1f27 58%, #111318 100%);
  box-shadow: 0 32px 72px -42px rgba(8, 10, 16, 0.88);
}
.panel.provider-command-center {
  color: var(--ink);
  background: var(--surface);
}
.panel.dark.provider-command-center {
  color: #f7f5ef;
}
.provider-command-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.provider-command-hero > div {
  min-width: 0;
}
.provider-command-hero h2 {
  max-width: 820px;
  margin: 8px 0 9px;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1;
}
.provider-command-hero p {
  max-width: 760px;
  margin: 0;
  color: #b8bbc5;
  font-size: 0.88rem;
  line-height: 1.65;
}
.provider-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.provider-kicker svg,
.provider-kicker i[data-lucide] {
  width: 15px;
  height: 15px;
}
.provider-refresh {
  min-height: 44px;
  flex: 0 0 auto;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
.provider-refresh:hover {
  color: #16191f;
  border-color: var(--gold);
  background: var(--gold);
}
.provider-truth-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.provider-truth-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #b9bbc3;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.66rem;
  font-weight: 700;
}
.provider-truth-strip svg {
  width: 13px;
  height: 13px;
  color: var(--gold);
}
.provider-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.provider-kpi {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  min-width: 0;
  gap: 1px 9px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
}
.provider-kpi > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #1a1c20;
  background: var(--gold);
}
.provider-kpi svg {
  width: 15px;
  height: 15px;
}
.provider-kpi strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  line-height: 0.95;
}
.provider-kpi small {
  color: #9699a4;
  font-size: 0.62rem;
  line-height: 1.2;
}
.provider-join-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: -2px 0 0;
  color: #989ba6;
  font-size: 0.7rem;
  line-height: 1.55;
}
.provider-join-notice svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--gold);
}
.provider-lanes {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: start;
}
.provider-lane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
}
.provider-lane > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.provider-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #33568b, #447cca);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.provider-logo.jobber {
  color: #121419;
  background: linear-gradient(145deg, #f7c253, var(--gold));
}
.provider-lane h3,
.provider-lane p,
.provider-lane h4 {
  margin: 0;
}
.provider-lane h3 {
  color: #fff;
  font-size: 0.92rem;
}
.provider-lane header p {
  margin-top: 2px;
  color: #9295a0;
  font-size: 0.67rem;
}
.provider-lane-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #8f929d;
  font-size: 0.63rem;
}
.provider-lane-meta strong {
  color: #d8d9de;
}
.provider-section {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.provider-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.provider-section-title h4 {
  color: #fff;
  font-size: 0.78rem;
}
.provider-section-title span {
  color: #858894;
  font-size: 0.61rem;
}
.provider-record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.provider-record:first-of-type {
  border-top: 0;
}
.provider-record-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--gold);
  background: rgba(240, 172, 40, 0.1);
}
.provider-record-icon svg {
  width: 14px;
  height: 14px;
}
.provider-record-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.provider-record .row-title {
  overflow: hidden;
  color: #f2f2f4;
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-record .row-meta {
  overflow-wrap: anywhere;
  color: #90939e;
  font-size: 0.62rem;
  line-height: 1.45;
}
.provider-record-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 2px;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 700;
}
.provider-record-link svg {
  width: 11px;
  height: 11px;
}
.provider-stream {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.provider-stream summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  gap: 10px;
  padding: 10px 16px;
  color: #e4e5e8;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  list-style: none;
}
.provider-stream summary::-webkit-details-marker {
  display: none;
}
.provider-stream summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.provider-stream summary svg {
  width: 14px;
  height: 14px;
  color: var(--gold);
}
.provider-stream summary strong {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #d7d8dd;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.62rem;
}
.provider-stream-body {
  padding: 0 16px 10px;
}
.provider-command-center .empty-state {
  color: #989ba5;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}
.provider-scope-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #9ca0aa;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.64rem;
  line-height: 1.55;
}
.provider-scope-note.warning {
  border-color: rgba(240, 172, 40, 0.24);
  background: rgba(240, 172, 40, 0.06);
}
.provider-scope-note > svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--gold);
}
.provider-scope-note strong {
  color: #e7e7ea;
}
[data-jobber-reconnect-control] {
  flex-wrap: wrap;
}
[data-jobber-reconnect-control] > span {
  flex: 1 1 190px;
}
.provider-reconnect-button {
  min-height: 44px;
  margin-left: auto;
  flex: 0 0 auto;
}
.provider-authority-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.provider-authority-footer span {
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  color: #9699a3;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.62rem;
  line-height: 1.5;
}
.provider-authority-footer strong {
  color: #dcdee3;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.jobber-staff-link-control {
  min-width: 0;
  overflow: hidden;
  border-color: var(--gold-line);
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 172, 40, 0.13), transparent 31%),
    linear-gradient(135deg, rgba(255, 252, 244, 0.98), rgba(255, 255, 255, 0.98));
}
.jobber-staff-link-control .panel-header {
  align-items: flex-start;
}
.jobber-staff-link-control .panel-header h2 {
  margin-top: 8px;
}
.jobber-staff-link-control .panel-header p {
  max-width: 78ch;
  margin-top: 5px;
  line-height: 1.6;
}
.jobber-staff-truth {
  margin: 16px 0;
}
.jobber-staff-truth span {
  color: #655f54;
  border-color: rgba(97, 74, 20, 0.13);
  background: rgba(240, 172, 40, 0.075);
}
.crm-staff-invite {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(210px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(97, 74, 20, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}
.crm-staff-invite-copy,
.crm-staff-invite label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.crm-staff-invite-copy span,
.crm-staff-invite label span,
.crm-staff-invite-boundary {
  color: var(--muted-2);
  font-size: 0.7rem;
  line-height: 1.45;
}
.crm-staff-invite input,
.crm-staff-invite button {
  min-width: 0;
  min-height: 44px;
}
.crm-staff-invite input {
  width: 100%;
}
.crm-staff-invite-boundary,
.crm-staff-invite .login-error,
.crm-staff-invite .success-banner {
  grid-column: 1 / -1;
  margin: 0;
}
.jobber-staff-link-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}
.jobber-staff-link-row {
  display: grid;
  grid-template-columns: auto minmax(150px, 0.65fr) minmax(280px, 1.35fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border-top: 1px solid var(--line);
}
.jobber-staff-link-row:first-child {
  border-top: 0;
}
.jobber-staff-link-person,
.jobber-staff-link-result {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.jobber-staff-link-person strong,
.jobber-staff-link-result small {
  overflow-wrap: anywhere;
}
.jobber-staff-link-person strong {
  font-size: 0.84rem;
}
.jobber-staff-link-person small,
.jobber-staff-link-result small {
  color: var(--muted-2);
  font-size: 0.68rem;
}
.jobber-staff-link-result {
  justify-items: start;
}
.jobber-staff-link-action {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.jobber-staff-link-action select,
.jobber-staff-link-action button,
.jobber-staff-link-control [data-refresh-jobber-staff-links] {
  min-height: 44px;
}
.jobber-staff-link-action select {
  width: 100%;
  min-width: 0;
}
.jobber-staff-boundary {
  margin: 12px 0 0;
  line-height: 1.55;
}
.success-banner {
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid rgba(45, 125, 82, 0.26);
  border-radius: 12px;
  color: #17623a;
  background: rgba(56, 151, 94, 0.08);
  font-size: 0.76rem;
  font-weight: 700;
}
@media (max-width: 1180px) {
  .provider-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .provider-lanes {
    grid-template-columns: minmax(0, 1fr);
  }
  .crm-staff-invite {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crm-staff-invite-copy {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .provider-command-center {
    padding: 18px;
    border-radius: 22px;
  }
  .provider-command-hero {
    flex-direction: column;
  }
  .provider-refresh {
    width: 100%;
    justify-content: center;
  }
  .provider-authority-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  .jobber-staff-link-control .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .jobber-staff-link-control [data-refresh-jobber-staff-links] {
    width: 100%;
    justify-content: center;
  }
  .crm-staff-invite {
    grid-template-columns: minmax(0, 1fr);
  }
  .crm-staff-invite-copy,
  .crm-staff-invite-boundary,
  .crm-staff-invite .login-error,
  .crm-staff-invite .success-banner {
    grid-column: 1;
  }
  .crm-staff-invite button {
    width: 100%;
    justify-content: center;
  }
  .jobber-staff-link-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .jobber-staff-link-action,
  .jobber-staff-link-result {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .provider-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .provider-lane > header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .provider-lane > header > .badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .provider-record {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .provider-record > .badge {
    grid-column: 2;
    justify-self: start;
  }
  .jobber-staff-link-action {
    grid-template-columns: minmax(0, 1fr);
  }
  .jobber-staff-link-action button {
    width: 100%;
    justify-content: center;
  }
}
.owner-client-hub-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  border-color: var(--gold-line);
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 172, 40, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 252, 244, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 24px 52px -36px rgba(121, 78, 0, 0.7);
}
.owner-client-hub-copy {
  min-width: 0;
}
.owner-client-hub-copy h2 {
  margin-top: 8px;
}
.owner-client-hub-copy p {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--muted-2);
  font-size: 0.86rem;
  line-height: 1.65;
}
.owner-client-hub-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #855d00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.owner-client-hub-kicker i[data-lucide] {
  width: 16px;
  height: 16px;
}
.owner-client-hub-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.owner-client-hub-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 174px;
  text-decoration: none;
}
.owner-client-hub-actions i[data-lucide] {
  width: 16px;
  height: 16px;
}
@media (max-width: 900px) {
  .owner-client-hub-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .owner-client-hub-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .owner-client-hub-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 48px;
  }
  .owner-client-hub-actions a {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
}
.panel.dark .attn-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.panel.dark .attn-row:last-child {
  border-bottom: 0;
}
.attn-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold);
  flex: 0 0 36px;
}
.attn-ic.rose {
  color: #f0a99e;
  background: rgba(207, 124, 112, 0.16);
}
.attn-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #f3f3f6;
  overflow-wrap: anywhere;
}
.attn-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  color: #9a9aa6;
  margin-top: 2px;
}
.attn-when {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-cols {
    grid-template-columns: 1fr;
  }
  .greet-title {
    font-size: 2rem;
  }
}
@media (max-width: 820px) {
  .hero-card {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-head {
    font-size: 1.45rem;
  }
  .hero-actions {
    width: 100%;
  }
  .hero-pill {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0 12px;
  }
}
@media (max-width: 480px) {
  .tile-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .tile {
    min-height: 0;
    padding: 14px;
  }
  .greet-title {
    font-size: 1.7rem;
  }
}

/* ===================================================================
   KnightStone design framework — Home rings, tasks carousel, concierge FAB
   (brought from the-beehive-crm reference build)
=================================================================== */

/* Home: header + workspace grid */
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 2px 0 2px;
}
.dash-head-lead { min-width: 0; }
.dash-head .greet-title { margin: 2px 0 0; }
.dash-today {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: var(--muted-2);
  font-size: 0.96rem;
}
.dash-today svg { width: 15px; height: 15px; color: var(--gold-2); }
.dash-actions { display: flex; gap: 8px; flex-shrink: 0; }
.home-grid {
  display: grid;
  /* The Jobs panel carries names, addresses, emails and a readiness card, so
     it gets a real floor. Below 1100px the split cannot give it that floor,
     and the two panels stack full width instead of being squeezed. */
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
  gap: 20px;
  align-items: start;
}
.home-main, .home-side { min-width: 0; }
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-actions { width: 100%; }
  .dash-actions .secondary-button, .dash-actions .primary-button { flex: 1; }
}

/* Operations at a glance — SVG rings */
.ops-panel { margin-top: 18px; }
.ops-rings {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.ops-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 8px 14px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.ops-ring:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-line);
}
.ring-svg { width: 78px; height: 78px; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 8; }
.ring-arc { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.7s ease; }
.ring-center {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  fill: var(--ink);
}
.ops-ring-label { font-weight: 600; font-size: 0.86rem; color: var(--ink); line-height: 1.2; }
.ops-ring-sub { font-size: 0.72rem; color: var(--muted); }
@media (max-width: 1100px) { .ops-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ops-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home: Today's Tasks carousel (dark) */
.tasks-carousel {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  color: #fff;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  overflow: hidden;
}
.tasks-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tasks-head h2 {
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0;
}
.tasks-count { color: var(--gold); font-weight: 700; font-size: 0.95rem; }
.tasks-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tasks-track::-webkit-scrollbar { display: none; }
.tasks-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.task-row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.task-row:last-child { border-bottom: 0; }
.task-ic { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, 0.06); color: #fff; }
.task-ic svg { width: 20px; height: 20px; }
.task-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.task-title { font-weight: 600; font-size: 0.98rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-sub { font-size: 0.8rem; color: var(--navy-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-check {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28); background: transparent;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.task-check:hover { border-color: var(--gold); }
.task-check svg { width: 15px; height: 15px; color: #1b1b1d; opacity: 0; transition: opacity 0.15s ease; }
.task-row.done .task-check { background: var(--gold); border-color: var(--gold); }
.task-row.done .task-check svg { opacity: 1; }
.task-row.done .task-title, .task-row.done .task-sub { text-decoration: line-through; color: var(--navy-muted); }
.tasks-dots { display: flex; justify-content: center; gap: 7px; padding-top: 12px; }
.tasks-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: background 0.15s ease, width 0.15s ease; }
.tasks-dot.active { background: var(--gold); width: 18px; border-radius: 4px; }
.task-empty { color: var(--navy-muted); padding: 18px 2px; font-size: 0.9rem; }

/* Floating AI Concierge */
.concierge-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--navy-line);
  background: var(--navy);
  color: var(--gold);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.concierge-fab:hover { transform: translateY(-2px) scale(1.04); }
.concierge-fab svg { width: 24px; height: 24px; }
.concierge-fab .fab-close { display: none; }
body.concierge-open .concierge-fab .fab-open { display: none; }
body.concierge-open .concierge-fab .fab-close { display: block; }
.concierge-pop {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 50;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(72vh, 640px);
  max-height: min(72dvh, 640px, calc(100dvh - 104px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
body.concierge-open .concierge-pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.concierge-pop-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--navy);
  color: #fff;
}
.concierge-pop-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; }
.concierge-pop-title svg { width: 18px; height: 18px; color: var(--gold); }
.concierge-pop-close {
  background: transparent; border: 0; color: rgba(255, 255, 255, 0.8);
  cursor: pointer; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
}
.concierge-pop-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.concierge-pop-body { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.concierge-thread {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.concierge-intro { display: flex; gap: 10px; align-items: flex-start; color: var(--muted-2); font-size: 0.9rem; }
.concierge-intro p { margin: 0; }
.concierge-composer { flex-shrink: 0; border-top: 1px solid var(--line); padding: 10px; background: var(--surface); }
@media (max-width: 560px) {
  .concierge-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .concierge-pop { right: 10px; left: 10px; bottom: 78px; width: auto; max-width: none; max-height: 76vh; }
  .concierge-pop { max-height: min(76dvh, calc(100dvh - 90px)); }
}

/* Mobile: inline-styled two-column grids (Revenue/Bills/Operations) must collapse —
   an inline grid-template-columns beats a media query without !important. */
@media (max-width: 820px) {
  .grid.two-column { grid-template-columns: 1fr !important; }
}

/* Mobile: 12-month revenue chart must fit — tighten gaps + labels */
@media (max-width: 560px) {
  .chart-bars { gap: 4px; }
  .chart-col { min-width: 0; }
  .chart-col small { font-size: 0.56rem; }
}

/* ===== Home calendar: Schedule / Month toggle + month grid ===== */
.cal-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; flex: none; }
.cal-tab { border: 0; background: transparent; color: var(--muted-2); font-weight: 600; font-size: 0.82rem; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.cal-tab.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); }
.cal-tab:hover:not(.active) { color: var(--ink); }
.small-button.icon-only { padding: 7px 9px; }
.cal-month { margin-top: 4px; }
.cal-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
.cal-month-label { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.cal-m-grid { display: grid; gap: 6px; }
.cal-m-head, .cal-m-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-m-dow { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--muted); padding: 2px 0; }
.cal-m-cell { position: relative; aspect-ratio: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 0.85rem; padding: 0; cursor: default; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.cal-m-cell.empty { border: 0; background: transparent; }
.cal-m-cell.has { cursor: pointer; border-color: var(--gold-line); background: var(--gold-soft); }
.cal-m-cell.has:hover { box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.cal-m-cell.is-today { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal-m-cell .cal-m-n { font-weight: 600; }
.cal-m-dot { font-size: 0.62rem; font-weight: 700; color: #1b1916; background: var(--gold); min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
@media (max-width: 560px) {
  .cal-m-cell { border-radius: 8px; font-size: 0.78rem; }
  .cal-m-dot { min-width: 14px; height: 14px; }
  .cal-tab { padding: 6px 11px; }
}

/* ===== Growth Lab ===== */
.growth-shell { display: grid; gap: 28px; max-width: 1480px; margin: 0 auto; padding-bottom: 34px; }
.growth-shell h2,
.growth-shell h3 { margin: 0; color: var(--ink); }
.growth-shell h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.45rem, 2vw, 2.15rem); line-height: 1.05; }
.growth-shell h3 { font-size: 0.98rem; line-height: 1.35; }
.growth-shell p { margin: 0; }
.growth-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 34px; align-items: center;
  padding: clamp(28px, 4vw, 50px); border: 1px solid #2c303a; border-radius: 28px;
  color: #fff; background:
    radial-gradient(circle at 80% 12%, rgba(240, 172, 40, 0.2), transparent 30%),
    linear-gradient(140deg, #101217 0%, #20242d 100%); box-shadow: var(--shadow-lift);
}
.growth-hero::after { content: ""; position: absolute; width: 280px; height: 280px; right: -150px; bottom: -170px; border: 1px solid rgba(240, 172, 40, 0.2); border-radius: 50%; box-shadow: 0 0 0 38px rgba(240, 172, 40, 0.035), 0 0 0 76px rgba(240, 172, 40, 0.025); }
.growth-hero-copy { position: relative; z-index: 1; max-width: 790px; }
.growth-hero .eyebrow { color: var(--gold); }
.growth-hero h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.65rem); max-width: 780px; margin: 9px 0 14px; }
.growth-hero-copy > p:last-child { max-width: 740px; color: #b9bbc4; font-size: 0.98rem; line-height: 1.75; }
.growth-hero-state { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.055); backdrop-filter: blur(12px); }
.growth-hero-state > strong { margin-top: 20px; color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: 3.8rem; line-height: .8; }
.growth-hero-state > small { margin-top: 9px; color: #a9acb6; }
.growth-hero-state > span:last-child { margin-top: 22px; color: var(--gold); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.growth-status { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted-2); font-size: .66rem; font-weight: 800; letter-spacing: .055em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.growth-status svg { width: 12px; height: 12px; }
.growth-status.active,
.growth-status.connected,
.growth-status.allowed,
.growth-status.approved_for_manual_promotion { color: #356a41; border-color: var(--leaf-line); background: var(--leaf-soft); }
.growth-status.partial,
.growth-status.required,
.growth-status.pending,
.growth-status.waiting,
.growth-status.awaiting_first_sync { color: #8a611f; border-color: var(--amber-line); background: var(--amber-soft); }
.growth-status.blocked,
.growth-status.not_connected,
.growth-status.degraded,
.growth-status.rejected { color: var(--rose-2); border-color: var(--rose-line); background: var(--rose-soft); }
.growth-status.not_applicable { color: var(--muted-2); }
.growth-hero .growth-status.active { color: var(--gold); border-color: rgba(240,172,40,.3); background: rgba(240,172,40,.1); }
.growth-loop { display: grid; grid-template-columns: repeat(11, auto); gap: 10px; align-items: center; padding: 18px 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); }
.growth-loop-step { display: flex; align-items: center; gap: 9px; min-width: max-content; }
.growth-loop-step span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #1b1916; background: var(--gold); font-size: .65rem; font-weight: 800; }
.growth-loop-step strong { font-size: .77rem; }
.growth-loop > i { display: grid; place-items: center; color: var(--line-2); }
.growth-loop > i svg { width: 15px; height: 15px; }
.growth-section { display: grid; gap: 16px; }
.growth-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.growth-section-head .eyebrow { margin-bottom: 5px; }
.growth-engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.growth-engine { min-height: 188px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-soft); }
.growth-engine-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 30px; }
.growth-engine-number { color: var(--gold-2); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.45rem; font-weight: 700; }
.growth-engine h3 { margin-bottom: 7px; font-size: 1.02rem; }
.growth-engine p { color: var(--muted-2); font-size: .82rem; line-height: 1.65; }
.growth-grid-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 16px; }
.growth-report,
.growth-readiness { padding: clamp(22px, 3vw, 32px); border-radius: 22px; }
.growth-report { border: 1px solid #2c303a; color: #fff; background: linear-gradient(145deg, #15171d, #242832); box-shadow: var(--shadow-lift); }
.growth-report .eyebrow { color: var(--gold); }
.growth-report h2 { margin: 6px 0 12px; color: #fff; }
.growth-learning { max-width: 740px; color: #c2c4ca; line-height: 1.7; }
.growth-report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 24px 0 18px; }
.growth-report-metrics span { display: flex; flex-direction: column; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; color: #a9acb6; background: rgba(255,255,255,.04); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.growth-report-metrics strong { margin-bottom: 2px; color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.55rem; line-height: 1; text-transform: none; }
.growth-boundary { display: flex; align-items: flex-start; gap: 7px; color: #989ba5; font-size: .75rem; line-height: 1.55; }
.growth-boundary svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--gold); }
.growth-readiness { border: 1px solid var(--amber-line); background: var(--amber-soft); }
.growth-readiness h2 { margin: 6px 0 12px; }
.growth-readiness > p:last-of-type { color: var(--muted-2); font-size: .84rem; line-height: 1.65; }
.growth-readiness ul,
.growth-governance-lane ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.growth-readiness li,
.growth-governance-lane li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-size: .78rem; line-height: 1.45; }
.growth-readiness li svg,
.growth-governance-lane li svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--gold-2); }
.growth-connectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.growth-connectors article { min-height: 150px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.growth-connectors h3 { margin: 22px 0 6px; }
.growth-connectors p { color: var(--muted-2); font-size: .75rem; line-height: 1.55; }
.growth-experiments { display: grid; gap: 12px; }
.growth-experiment { padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-soft); }
.growth-experiment-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.growth-experiment-head > div { min-width: 0; }
.growth-run { display: block; margin-bottom: 7px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.growth-experiment h3 { max-width: 920px; font-size: .92rem; font-weight: 650; }
.growth-measures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.growth-measures span { display: flex; flex-direction: column; min-width: 0; padding: 11px; border-radius: 11px; color: var(--muted); background: var(--surface-2); font-size: .68rem; }
.growth-measures strong { overflow-wrap: anywhere; color: var(--ink-2); font-size: .77rem; }
.growth-measures em { color: var(--gold-2); font-style: normal; font-weight: 700; }
.growth-evidence-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; color: var(--muted-2); font-size: .7rem; }
.growth-evidence-row span { display: inline-flex; align-items: center; gap: 5px; }
.growth-evidence-row svg { width: 13px; height: 13px; color: var(--gold-2); }
.growth-measure-note { margin-top: 12px !important; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.growth-review-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.growth-review-actions .primary-button,
.growth-review-actions .small-button { font-size: .72rem; }
.growth-governance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.growth-governance-lane { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.growth-governance-lane.required { border-color: var(--amber-line); background: #fffaf0; }
.growth-governance-lane.blocked { border-color: var(--rose-line); background: #fff9f6; }
.growth-governance-lane header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.growth-governance-lane ul { margin-top: 15px; }
.growth-governance-lane.blocked li svg { color: var(--rose-2); }
.growth-private-empty,
.growth-empty { display: grid; justify-items: center; gap: 9px; padding: 44px 20px; border: 1px dashed var(--line-2); border-radius: 20px; color: var(--muted-2); background: var(--surface); text-align: center; }
.growth-private-empty > svg,
.growth-empty > svg { width: 28px; height: 28px; color: var(--gold-2); }
.growth-private-empty p,
.growth-empty p { max-width: 560px; font-size: .82rem; line-height: 1.6; }

@media (max-width: 1120px) {
  .growth-engines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-connectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .growth-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .growth-hero { grid-template-columns: 1fr; }
  .growth-hero-state { width: min(100%, 280px); }
  .growth-grid-2 { grid-template-columns: 1fr; }
  .growth-connectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-governance { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .growth-shell { gap: 22px; }
  .growth-hero { padding: 25px 20px; border-radius: 22px; }
  .growth-hero-copy > p:last-child { font-size: .86rem; }
  .growth-loop {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    overflow-x: visible;
    padding: 16px;
  }
  .growth-loop-step {
    min-width: 0;
  }
  .growth-loop-step strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .growth-loop > i {
    justify-content: start;
    padding-left: 7px;
    transform: rotate(90deg);
    transform-origin: center;
  }
  .growth-engines,
  .growth-connectors,
  .growth-report-metrics,
  .growth-measures { grid-template-columns: 1fr; }
  .growth-engine { min-height: 0; }
  .growth-section-head,
  .growth-experiment-head { align-items: flex-start; flex-direction: column; }
  .growth-section-head .small-button { width: 100%; justify-content: center; }
  .growth-review-actions .primary-button,
  .growth-review-actions .small-button { width: 100%; justify-content: center; }
}

/* Final narrow-screen guard: these rules intentionally follow the home
   framework so its later desktop declarations cannot reintroduce overflow. */
@media (max-width: 480px) {
  .dash-head,
  .dash-head-lead,
  .dash-actions,
  .home-grid,
  .home-main,
  .home-side {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .dash-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-actions .secondary-button,
  .dash-actions .primary-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .dash-today {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }

  .dash-today svg {
    margin-right: 5px;
    vertical-align: -2px;
  }
}

@media (max-width: 820px) {
  #app .seg button,
  #app .cal-tab {
    min-height: 44px;
  }
}
.ai-usage-overlay[hidden] {
  display: none;
}

.ai-usage-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(30, 25, 15, 0.45);
}

.ai-usage-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  transform: translate(-50%, -50%);
  background: var(--surface, #fffdf8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(30, 25, 15, 0.25);
}

.ai-usage-head,
.ai-usage-grid {
  display: flex;
  align-items: center;
}

.ai-usage-head {
  justify-content: space-between;
  margin-bottom: 14px;
}

.ai-usage-head h3 {
  margin: 0;
  font-size: 17px;
}

.ai-usage-close {
  color: #8a8375;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
}

.ai-usage-body {
  color: #4c4638;
  font-size: 13.5px;
  line-height: 1.6;
}

.ai-usage-grid {
  gap: 8px;
}

.ai-usage-cell {
  flex: 1;
  padding: 12px 10px;
  text-align: center;
  background: var(--surface-2, #f3ece0);
  border-radius: 10px;
}

.ai-usage-value {
  color: #2e2a20;
  font-size: 22px;
  font-weight: 700;
}

.ai-usage-label {
  margin-top: 2px;
  color: #8a8375;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-usage-detail {
  margin: 12px 0 0;
  color: #6d6656;
  font-size: 12.5px;
}

.ai-usage-footnote {
  margin: 14px 0 0;
  color: #8a8375;
  font-size: 11.5px;
}

.ai-usage-footnote a {
  color: #a07714;
  font-weight: 600;
}

/* Owner-only dispatch unlock. Shown inside the "Dispatch setup required"
   banner when the capability attestation is the ONLY thing still blocking —
   scopes already satisfied. The credential is used for one request and the
   field is cleared immediately; nothing is stored. */
.dispatch-unlock {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 27, 22, 0.12);
}
.dispatch-unlock p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}
.dispatch-unlock label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.dispatch-unlock label span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dispatch-unlock input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(31, 27, 22, 0.18);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  font-size: 0.9rem;
}
.dispatch-unlock input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.dispatch-unlock small {
  font-size: 0.76rem;
  opacity: 0.75;
}
.dispatch-unlock button {
  justify-self: start;
  min-height: 44px;
}
.dispatch-unlock-status {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.dispatch-unlock-status.danger {
  color: var(--danger, #8c2f20);
  font-weight: 700;
}

/* Will's owner operating system: one truthful view across the CRM, GHL,
   Jobber, memberships, and approved marketing evidence. */
.owner-os {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #2b303b;
  border-radius: 27px;
  color: #f7f5ef;
  background:
    radial-gradient(circle at 8% 0%, rgba(240, 172, 40, .17), transparent 27%),
    radial-gradient(circle at 93% 18%, rgba(66, 125, 194, .12), transparent 25%),
    linear-gradient(145deg, #101217, #1c2029 58%, #111318);
  box-shadow: 0 30px 70px -43px rgba(8, 10, 16, .9);
}
/* Provider receipts and exact lineage identifiers can be one long token. A
   grid item's default min-content width lets those tokens widen the entire
   phone page even when the card itself looks clipped. Collapse every nested
   owner-data lane to its available width and wrap the evidence in place. */
.owner-os > *,
.owner-os-grid > *,
.owner-os-panel > *,
.owner-os-list > *,
.owner-os-action > *,
.owner-os-pain-row > *,
.owner-os-customer > *,
.owner-os-simple-row > *,
.owner-os-membership > *,
.owner-os-history > div > span,
.owner-os-customer-facts > span { min-width: 0; max-width: 100%; }
.owner-os :where(h2, h3, p, small, strong, summary) { overflow-wrap: anywhere; word-break: break-word; }
.owner-os.loading,
.owner-os.unavailable { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.owner-os.unavailable h2 { margin: 7px 0 5px; color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.owner-os.unavailable p { margin: 0; color: #b9bbc3; }
.owner-os.unavailable .small-button { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.owner-os-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.owner-os-hero > div { min-width: 0; }
.owner-os-hero h2 { max-width: 900px; margin: 8px 0 8px; color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.85rem, 3.3vw, 3.15rem); line-height: 1; }
.owner-os-hero p { max-width: 820px; margin: 0; color: #b8bbc5; font-size: .86rem; line-height: 1.6; }
.owner-os-hero .small-button { flex: 0 0 auto; min-height: 44px; color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.owner-os-coverage-row { display: flex; flex-wrap: wrap; gap: 7px; }
.owner-os-coverage { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #c0c2c9; background: rgba(255,255,255,.045); font-size: .64rem; font-weight: 750; text-transform: capitalize; }
.owner-os-coverage svg { width: 13px; height: 13px; }
.owner-os-coverage.healthy svg { color: #83cf98; }
.owner-os-coverage.warning svg { color: var(--gold); }
.owner-os-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.owner-os-kpis > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.045); }
.owner-os-kpis small { color: #979aa4; font-size: .7rem; line-height: 1.3; }
.owner-os-kpis strong { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; line-height: 1; }
.owner-os-kpis strong.kpi-status { font-family: inherit; font-size: .82rem; font-weight: 500; line-height: 1.3; opacity: .72; }
.owner-os-kpis > span { justify-content: space-between; min-height: 76px; }
.owner-os-campaign-provenance { margin: 0; font-size: .7rem; line-height: 1.4; opacity: .78; }
.owner-os-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.owner-os-grid-primary { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.owner-os-panel { min-width: 0; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.045); }
.owner-os-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.owner-os-panel h3 { margin: 4px 0 0; color: #fff; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.2; }
.owner-os-panel .eyebrow { margin: 0; color: var(--gold); font-size: .58rem; letter-spacing: .12em; }
.owner-os-explainer,
.owner-os-boundary { margin: -5px 0 14px; color: #9ca0aa; font-size: .7rem; line-height: 1.55; }
.owner-os-boundary { margin: 14px 0 0; }
.owner-os-list { display: grid; gap: 8px; }
.owner-os-action { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(0,0,0,.13); }
.owner-os-action strong,
.owner-os-customer strong,
.owner-os-simple-row strong,
.owner-os-membership strong,
.owner-os-campaign strong { color: #f8f6f0; font-size: .78rem; line-height: 1.35; }
.owner-os-action p,
.owner-os-customer p,
.owner-os-simple-row p,
.owner-os-membership p,
.owner-os-campaign p { margin: 3px 0 0; color: #b0b4bd; font-size: .74rem; line-height: 1.5; }
.owner-os-action small { display: block; margin-top: 6px; color: #858994; font-size: .62rem; line-height: 1.45; }
.owner-os-action-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; }
.owner-os-action-controls .badge { margin: 0; }
.owner-os-pain-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; padding: 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(0,0,0,.1); }
.owner-os-pain-row > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #1b1b1a; background: var(--gold); font-size: .75rem; font-weight: 850; }
.owner-os-pain-row strong { display: block; color: #f8f6f0; font-size: .75rem; }
.owner-os-pain-row small { display: block; margin-top: 2px; color: #9296a0; font-size: .61rem; }
.owner-os-pain-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,.3fr); gap: 8px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.09); }
.owner-os-pain-form label { display: grid; gap: 5px; }
.owner-os-pain-form label > span { color: #aeb1b9; font-size: .62rem; font-weight: 750; }
.owner-os-pain-form input,
.owner-os-pain-form select { width: 100%; min-width: 0; min-height: 42px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #fff; background: rgba(0,0,0,.2); font: inherit; font-size: .72rem; }
.owner-os-pain-note { grid-column: 1 / -1; }
.owner-os-pain-form button { justify-self: start; }
.owner-os-inline-control { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.owner-os-inline-control summary { min-height: 34px; padding-top: 7px; color: #d9d5ca; cursor: pointer; font-size: .62rem; font-weight: 800; }
.owner-os-inline-control > p { margin: 0 0 8px; color: #9296a0; font-size: .62rem; line-height: 1.5; }
.owner-os-inline-control form { display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.25fr); gap: 8px; }
.owner-os-inline-control label { display: grid; gap: 4px; }
.owner-os-inline-control label > span { color: #aeb1b9; font-size: .58rem; font-weight: 750; }
.owner-os-inline-control input,
.owner-os-inline-control select { width: 100%; min-width: 0; min-height: 38px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; background: rgba(0,0,0,.23); font: inherit; font-size: .67rem; }
.owner-os-inline-control .owner-os-pain-note { grid-column: 1 / -1; }
.owner-os-form-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 7px; }
.owner-os .small-button.danger { color: #ffb3aa; border-color: rgba(255,118,101,.3); background: rgba(135,45,35,.18); }
.owner-os-customer { display: grid; gap: 7px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(0,0,0,.13); }
.owner-os-customer > small { color: #858994; font-size: .6rem; line-height: 1.4; }
.owner-os-customer-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.owner-os-customer-facts span { padding: 4px 7px; border-radius: 999px; color: #c0c3ca; background: rgba(255,255,255,.06); font-size: .58rem; }
.owner-os-provenance { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 5px; padding-top: 2px; }
.owner-os-provenance span { display: grid; gap: 2px; min-width: 0; padding: 6px 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; color: #989ca6; background: rgba(255,255,255,.025); font-size: .55rem; overflow-wrap: anywhere; }
.owner-os-provenance strong { color: #d8d4ca; font-size: .55rem; }
.owner-os-history { border-top: 1px solid rgba(255,255,255,.07); padding-top: 7px; }
.owner-os-history summary { min-height: 32px; color: #d6d2c8; cursor: pointer; font-size: .64rem; font-weight: 750; }
.owner-os-history > div { display: grid; gap: 5px; padding-top: 5px; }
.owner-os-history > div > span { display: grid; gap: 2px; padding: 7px; border-radius: 8px; background: rgba(255,255,255,.035); }
.owner-os-history > div strong { color: #ece9e2; font-size: .61rem; }
.owner-os-history > div small,
.owner-os-history > div p { margin: 0; color: #8f939d; font-size: .57rem; line-height: 1.4; }
.owner-os-sub-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-bottom: 12px; }
.owner-os-sub-kpis > span { display: flex; flex-direction: column; gap: 3px; padding: 9px; border-radius: 11px; background: rgba(0,0,0,.14); }
.owner-os-sub-kpis strong { color: #fff; font-size: 1.05rem; }
.owner-os-sub-kpis small { color: #969aa4; font-size: .57rem; }
.owner-os-simple-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.12); }
.owner-os-simple-row .lead-operational-actions .small-button { min-height: 36px; }
.owner-os-simple-row .lead-operational-actions .lead-respond-button { min-height: 44px; }
.owner-os-simple-row > small { flex: 0 0 auto; color: #898d97; font-size: .6rem; text-align: right; }
.owner-os-membership { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.12); }
.owner-os-membership > div { display: grid; min-width: 0; gap: 3px; }
.owner-os-membership small { color: #898d97; font-size: .58rem; line-height: 1.4; }
.owner-os-membership .owner-os-membership-warning { color: #efc56b; }
.owner-os-membership-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.owner-os-membership-controls details { flex: 1 1 100%; min-width: 0; color: #aeb1b9; font-size: .6rem; }
.owner-os-membership-controls summary { min-height: 32px; padding-top: 7px; cursor: pointer; font-weight: 800; }
.owner-os-membership-controls details > p { margin: 0 0 7px; font-size: .6rem; }
.owner-os-membership-controls form { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.owner-os-membership-controls label { display: grid; flex: 1 1 180px; min-width: 0; gap: 4px; }
.owner-os-membership-controls input { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; background: rgba(0,0,0,.23); font: inherit; }
.owner-os-work-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.owner-os-work-grid > section { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(0,0,0,.13); }
.owner-os-work-grid > section > header { display: flex; gap: 9px; align-items: center; padding: 11px; border-bottom: 1px solid rgba(255,255,255,.07); }
.owner-os-work-grid > section > header > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #191b1e; background: var(--gold); }
.owner-os-work-grid svg { width: 14px; height: 14px; }
.owner-os-work-grid header strong { display: block; color: #fff; font-size: 1rem; }
.owner-os-work-grid header small { display: block; color: #9296a0; font-size: .57rem; }
.owner-os-work-grid > section > div { display: grid; gap: 7px; padding: 9px; }
.owner-os-work-grid article { display: grid; gap: 2px; padding: 8px; border-radius: 9px; background: rgba(255,255,255,.04); }
.owner-os-work-grid article strong { overflow-wrap: anywhere; color: #e9e7e2; font-size: .65rem; line-height: 1.35; }
.owner-os-work-grid article small,
.owner-os-work-grid p { margin: 0; color: #858994; font-size: .57rem; line-height: 1.4; }
.owner-os-work-lane { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(0,0,0,.1); }
.owner-os-work-lane + .owner-os-work-lane { margin-top: 10px; }
.owner-os-work-lane > h4 { margin: 0; color: #f3f0e9; font-size: .75rem; }
.owner-os-report-work { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.owner-os-report-work article { display: grid; gap: 4px; min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(0,0,0,.13); }
.owner-os-report-work article > strong { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.8rem; }
.owner-os-report-work article > span { color: #f2efe8; font-size: .7rem; font-weight: 800; }
.owner-os-report-work article > small { color: #8f939d; font-size: .58rem; line-height: 1.4; }
.owner-canonical-view { width: 100%; }
.owner-os-campaign { display: grid; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.14); }
.owner-os-campaign > header { display: flex; justify-content: space-between; gap: 12px; }
.owner-os-campaign header small { display: block; margin-top: 3px; color: #9aa0ab; font-size: .7rem; text-transform: capitalize; }
.owner-os-metric-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(132px,1fr)); gap: 7px; }
.owner-os-metric-row > span { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 4px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.045); }
.owner-os-metric-row small { color: #9aa0ab; font-size: .7rem; line-height: 1.3; }
.owner-os-metric-row strong { overflow-wrap: anywhere; font-size: .82rem; line-height: 1.25; }
.owner-os-metric-row em { color: #8d939e; font-size: .66rem; font-style: normal; line-height: 1.35; }
.owner-os-campaign-rates { display: flex; flex-wrap: wrap; gap: 6px; }
.owner-os-campaign-rates span { padding: 7px 9px; border-radius: 8px; color: #a4a9b3; background: rgba(255,255,255,.035); font-size: .72rem; }
.owner-os-campaign-rates strong { color: #e9e6df; font-size: inherit; }
.owner-os-evidence-warning { padding: 8px 9px; border-radius: 9px; color: #d8bd7a !important; background: rgba(214,166,60,.08); }
.owner-os-source-coverage { display: grid; gap: 6px; margin-top: 12px; }
.owner-os-source-coverage article { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(0,0,0,.11); }
.owner-os-source-coverage article > div { display: grid; gap: 2px; }
.owner-os-source-coverage strong { color: #f1eee7; font-size: .67rem; }
.owner-os-source-coverage small { color: #898e99; font-size: .56rem; }
.owner-os-source-coverage p { max-width: 55%; margin: 0; color: #c4a85f; font-size: .57rem; line-height: 1.4; text-align: right; }
.owner-os-connection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.owner-os-connection { display: grid; min-width: 0; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.14); }
.owner-os-connection > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.owner-os-connection header strong { display: block; color: #fff; font-size: .76rem; }
.owner-os-connection header small { display: block; margin-top: 2px; color: #8d929d; font-size: .55rem; }
.owner-os-connection details { border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.owner-os-connection summary { min-height: 36px; padding: 9px 0; color: #d7d2c6; cursor: pointer; font-size: .61rem; font-weight: 800; }
.owner-os-connection-detail { display: grid; gap: 5px; padding-bottom: 9px; }
.owner-os-connection-detail > strong { color: #e8e4db; font-size: .58rem; }
.owner-os-connection-detail ul { margin: 0; padding-left: 17px; color: #9499a3; font-size: .55rem; line-height: 1.45; }
.owner-os-connection > ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.owner-os-connection > ol li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 7px; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.035); }
.owner-os-connection > ol strong { color: #e8e5de; font-size: .59rem; }
.owner-os-connection > ol span { color: #d2b96f; font-size: .52rem; text-transform: capitalize; }
.owner-os-connection > ol small { grid-column: 1 / -1; color: #818691; font-size: .52rem; line-height: 1.35; }
.owner-os-connection > p { margin: 0; color: #a7abb4; font-size: .6rem; line-height: 1.5; }
.owner-os-connection > p.owner-os-stop { padding: 8px; border: 1px solid rgba(255,113,91,.25); border-radius: 9px; color: #ffb3a7; background: rgba(120,36,28,.18); }
.owner-os-internal-health { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 11px; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.025); }
.owner-os-internal-health > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #e7e3da; font-size: .65rem; }
.owner-os-internal-health svg { width: 14px; height: 14px; color: var(--gold); }
.owner-os-internal-health p { flex: 1 1 auto; margin: 0; color: #9196a0; font-size: .58rem; line-height: 1.45; }
.owner-os-marketing-empty { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px dashed rgba(255,255,255,.13); border-radius: 15px; background: rgba(0,0,0,.12); }
.owner-os-marketing-empty > svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--gold); }
.owner-os-marketing-empty strong { color: #fff; font-size: .8rem; }
.owner-os-marketing-empty p { margin: 5px 0 0; max-width: 850px; color: #9a9ea8; font-size: .7rem; line-height: 1.55; }
.owner-os-marketing-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.owner-os-control-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.13); }
.owner-os-control-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 11px 13px; color: #f3f0e8; cursor: pointer; font-size: .68rem; font-weight: 800; list-style: none; }
.owner-os-control-card > summary::-webkit-details-marker { display: none; }
.owner-os-control-card > summary span { display: inline-flex; align-items: center; gap: 7px; }
.owner-os-control-card > summary svg { width: 15px; height: 15px; color: var(--gold); }
.owner-os-control-card > summary small { color: #8f939d; font-size: .57rem; font-weight: 650; }
.owner-os-control-card > p { margin: 0; padding: 0 13px 11px; color: #9296a0; font-size: .63rem; line-height: 1.5; }
.owner-os-control-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 13px 13px; }
.owner-os-control-form label { display: grid; min-width: 0; gap: 5px; }
.owner-os-control-form label > span { color: #aeb1b9; font-size: .58rem; font-weight: 750; }
.owner-os-control-form input,
.owner-os-control-form select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; background: rgba(0,0,0,.23); font: inherit; font-size: .67rem; }
.owner-os-control-form .owner-os-control-wide,
.owner-os-control-form > button { grid-column: 1 / -1; }
.owner-os-control-form > button { justify-self: start; min-width: 0; max-width: 100%; white-space: normal; }
.owner-os-trends { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.owner-os-repeat-service { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.owner-os-repeat-service > strong { color: #f2efe8; font-size: .68rem; letter-spacing: .02em; }
.owner-os-trends > header { display: flex; justify-content: space-between; gap: 12px; color: #fff; }
.owner-os-trends header small { color: #8d919b; font-size: .6rem; }
.owner-os-trend-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.owner-os-trend-grid > section { min-width: 0; padding: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.1); }
.owner-os-trend-grid > section > strong { display: block; margin-bottom: 6px; color: var(--gold); }
.owner-os-trend-grid > section > div { display: grid; gap: 5px; }
.owner-os-trend-grid > section span { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 8px; border-radius: 9px; background: rgba(0,0,0,.13); }
.owner-os-trends strong { color: #f2efe8; font-size: .65rem; }
.owner-os-trends small { overflow-wrap: anywhere; color: #8c909a; font-size: .57rem; line-height: 1.45; }
.owner-os .empty-state { color: #969aa4; border-color: rgba(255,255,255,.12); background: rgba(0,0,0,.12); }
@media (max-width: 1180px) {
  .owner-os-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .owner-os-grid,
  .owner-os-grid-primary,
  .owner-os-marketing-controls,
  .owner-os-connection-grid { grid-template-columns: minmax(0,1fr); }
  .owner-os-work-grid,
  .owner-os-report-work { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .owner-os { padding: 16px; border-radius: 21px; }
  .owner-os-hero { flex-direction: column; }
  .owner-os-hero .small-button { width: 100%; justify-content: center; }
  .owner-os-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .owner-os-work-grid,
  .owner-os-metric-row,
  .owner-os-trend-grid,
  .owner-os-report-work { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
  .owner-os.loading,
  .owner-os.unavailable { grid-template-columns: minmax(0,1fr); }
  .owner-os-sub-kpis,
  .owner-os-work-grid,
  .owner-os-metric-row,
  .owner-os-trend-grid { grid-template-columns: minmax(0,1fr); }
  .owner-os-pain-form { grid-template-columns: minmax(0,1fr); }
  .owner-os-pain-note { grid-column: 1; }
  .owner-os-inline-control form,
  .owner-os-control-form { grid-template-columns: minmax(0,1fr); }
  .owner-os-inline-control .owner-os-pain-note,
  .owner-os-form-actions,
  .owner-os-control-form .owner-os-control-wide,
  .owner-os-control-form > button { grid-column: 1; }
  .owner-os-simple-row,
  .owner-os-membership { align-items: flex-start; flex-direction: column; }
  .owner-os-simple-row > small { text-align: left; }
  .owner-os-source-coverage article,
  .owner-os-internal-health { align-items: flex-start; flex-direction: column; }
  .owner-os-source-coverage p { max-width: none; text-align: left; }
}

.owner-os-mvp-job { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.12); }
.owner-os-mvp-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #1b1b1a; background: var(--gold); font-size: .72rem; font-weight: 850; }
.owner-os-mvp-job strong { color: #f8f6f0; font-size: .78rem; line-height: 1.35; }
.owner-os-mvp-job p { margin: 3px 0 0; color: #a8abb4; font-size: .68rem; line-height: 1.45; }
.owner-os-mvp-job small { display: block; margin-top: 6px; color: #858994; font-size: .62rem; line-height: 1.45; }
.owner-os-mvp-meta { display: grid; justify-items: end; gap: 4px; }
.owner-os-mvp-meta small { color: #898d97; font-size: .6rem; }
/* Owner Home: measured source CSS, namespaced and scoped to prevent legacy leakage. */
/* Integrate the source page as Home without altering the other CRM surfaces. */
body.owner-home { padding: 0; background: #718087; }
.owner-home > .app-shell { display: block; padding: 0; margin: 0; max-width: none; width: 100%; min-height: 100vh; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.owner-home > .app-shell > .sidebar,
.owner-home > .app-shell > .workspace > .topbar { display: none; }
/* The concierge bubble stays on the Home: it is the one way to ask a question
   from the page the owner actually lives on. */
.owner-home > .concierge-fab { display: grid; }
.owner-home > .app-shell > .workspace { margin: 0; padding: 0; width: 100%; min-width: 0; }
.home-reference { font: 16px/1.5 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif; color: #162621; }
.home-reference :where(h1,h2,h3,p) { margin: 0; color: inherit; }
.home-reference :where(button,input,select,textarea) { font: inherit; letter-spacing: inherit; border-radius: 0; }
.home-reference :where(button) { appearance: auto; background: transparent; margin: 0; border: 0; padding: 0; }
.home-reference :where(svg) { display: block; vertical-align: middle; flex-shrink: 0; }
.home-reference :where([hidden]) { display: none !important; }

@scope (.home-reference) {
:scope{--canvas:#718087;--paper:#edf3f0;--panel:#f8fcfac2;--ink:#162621;--muted:#66756f;--line:#1430281f;--gold:#5fc4a3;--sage:#8da8be;--danger:#cf6d58;--radius:1.5rem}
*{box-sizing:border-box}
:scope{background:var(--canvas);max-width:100%;overflow-x:clip}
:scope{max-width:100%;color:var(--ink);margin:0;font-family:Avenir Next,Avenir,Helvetica Neue,Arial,sans-serif;overflow-x:clip}
button,a{color:inherit;font:inherit}
button{cursor:pointer;border:0}
.kh-site-shell{min-height:100svh;padding:max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-top)) max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-right)) max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-bottom)) max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-left));background:radial-gradient(circle at 78% 18%,#5fc4a347,#0000 25%),radial-gradient(circle at 20% 85%,#5c829b38,#0000 30%),linear-gradient(145deg,#99a7ab 0%,#829197 50%,#6f7f86 100%)}
.kh-dashboard-frame{background:radial-gradient(circle at 87% 13%,#5fc4a340,#0000 24%),radial-gradient(circle at 58% 82%,#8da8be33,#0000 33%),linear-gradient(135deg,#f8fbf9fa,#e2ede8f7);border:1px solid #ffffff8c;border-radius:38px;grid-template-columns:190px minmax(0,1fr);width:min(1480px,100%);margin:auto;padding:0;display:grid;overflow:hidden;box-shadow:0 34px 70px #12282347,inset 0 1px #ffffffe6}
.kh-dashboard-content{min-width:0;padding:22px;overflow:hidden}
.kh-command-sidebar{border-right:1px solid var(--line);background:#e8f1edb8;flex-direction:column;min-height:100%;padding:22px 14px 15px;display:flex}
.kh-sidebar-brand{align-items:center;gap:9px;padding:0 7px 19px;display:flex}
.kh-sidebar-brand div{flex-direction:column;display:flex}
.kh-sidebar-brand strong{letter-spacing:-.03em;font-size:15px;font-weight:500}
.kh-sidebar-brand small{color:var(--muted);font-size:9px}
.kh-sidebar-search{border:1px solid var(--line);color:#77756e;text-align:left;background:#ffffff73;border-radius:13px;align-items:center;gap:8px;width:100%;padding:11px 12px;font-size:11px;display:flex}
.kh-sidebar-nav{box-shadow:none;background:0 0;border-radius:0;grid-template-columns:1fr 1fr;gap:5px;margin-top:13px;padding:0;display:grid}
.kh-sidebar-nav button{border:1px solid var(--line);color:#68665f;background:#ffffff47;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:66px;padding:8px;font-size:10px;display:flex}
.kh-sidebar-nav button.kh-active{color:#fff;background:#18312a;border-color:#18312a;box-shadow:0 10px 24px #1231292e}
.kh-sidebar-section{margin-top:22px}
.kh-sidebar-section>p{color:#89877e;letter-spacing:.13em;text-transform:uppercase;margin:0 8px 8px;font-size:9px;font-weight:600}
.kh-sidebar-section button{color:#65635d;text-align:left;background:0 0;border-radius:9px;grid-template-columns:7px 1fr auto;align-items:center;gap:7px;width:100%;padding:9px 8px;font-size:10px;display:grid}
.kh-sidebar-section button:hover{background:#ffffff80}
.kh-sidebar-section button i{background:var(--gold);border-radius:2px;width:6px;height:6px}
.kh-sidebar-section button i.kh-red{background:var(--danger)}
.kh-sidebar-section button i.kh-sage{background:var(--sage)}
.kh-sidebar-section button span{color:#99968e}
.kh-sidebar-profile{color:#fff;background:#18312a;border-radius:13px;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;margin-top:auto;padding:9px;display:grid}
.kh-sidebar-profile>span{background:var(--gold);color:#363126;border-radius:9px;place-items:center;width:32px;height:32px;font-size:12px;display:grid}
.kh-sidebar-profile div{flex-direction:column;min-width:0;display:flex}
.kh-sidebar-profile strong{text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500;overflow:hidden}
.kh-sidebar-profile small{color:#aaa79d;font-size:8px}
.kh-topbar{justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:0 8px 0 10px;display:flex}
.kh-topbar>.kh-brand{display:none}
.kh-breadcrumb{color:#8a887f;align-items:center;gap:7px;font-size:11px;display:flex}
.kh-breadcrumb i{opacity:.5;font-style:normal}
.kh-breadcrumb strong{color:#575650;font-weight:500}
.kh-brand{letter-spacing:-.04em;align-items:center;gap:9px;font-size:20px;text-decoration:none;display:flex}
.kh-brand-mark{border:1px solid #20201c47;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}
.kh-desktop-nav{background:#ffffff8c;border-radius:999px;align-items:center;gap:2px;padding:5px;display:flex;box-shadow:0 8px 26px #2b2a220a}
.kh-desktop-nav button{color:#5f5e58;background:0 0;border-radius:999px;padding:10px 15px;font-size:13px;transition:all .2s}
.kh-desktop-nav button:hover{color:#222}
.kh-desktop-nav .kh-nav-active{color:#fff;background:#18312a;box-shadow:0 8px 20px #12312933}
.kh-header-actions{align-items:center;gap:7px;display:flex}
.kh-icon-button,.kh-profile-button,.kh-menu-button,.kh-round-link{background:#ffffff9e;border-radius:50%;place-items:center;height:38px;display:grid}
.kh-icon-button{width:38px;position:relative}
.kh-notification i{background:var(--gold);border:1px solid #fff;border-radius:50%;width:6px;height:6px;position:absolute;top:8px;right:8px}
.kh-profile-button{border-radius:999px;gap:7px;width:auto;padding:0 10px 0 5px;display:flex}
.kh-profile-button span{color:#fff;background:#18312a;border-radius:50%;place-items:center;width:28px;height:28px;font-size:12px;display:grid}
.kh-menu-button{width:38px;display:none}
.kh-mobile-nav{display:none}
.kh-welcome-row{grid-template-columns:minmax(300px,1fr) minmax(470px,1.2fr);align-items:end;gap:28px;padding:33px 14px 25px;display:grid}
.kh-eyebrow{color:#77756e;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px;font-size:11px;font-weight:600}
h1{letter-spacing:-.06em;margin:0;font-size:clamp(38px,4.4vw,66px);font-weight:400;line-height:1}
.kh-subhead{color:#696861;margin:12px 0 0;font-size:15px}
.kh-health-summary{gap:28px;min-width:0;display:flex}
.kh-health-summary div{min-width:105px;position:relative}
.kh-health-summary div+div:before{background:var(--line);content:"";width:1px;position:absolute;top:12px;bottom:6px;left:-25px}
.kh-health-summary span{color:#276f5a;background:#5fc4a330;border-radius:999px;width:fit-content;margin-bottom:4px;padding:3px 8px;font-size:10px;font-weight:600;display:block}
.kh-health-summary span.kh-trend{color:#3f6078;background:#8da8be40}
.kh-health-summary span.kh-alert{color:#994735;background:#cf6d5829}
.kh-health-summary strong{letter-spacing:-.06em;font-size:clamp(30px,3vw,46px);font-weight:400;line-height:1.05;display:block}
.kh-health-summary small{color:#74736d;font-size:11px}
.kh-business-gauge{flex-direction:column;align-items:center;display:flex}
.kh-gauge-ring{background:conic-gradient(from 225deg, var(--gold) 0 72%, #ffffffc7 72% 84%, transparent 84%);border-radius:50%;place-items:center;width:126px;height:126px;display:grid;position:relative}
.kh-gauge-ring:after{content:"";background:#edf5f1;border-radius:50%;position:absolute;inset:13px}
.kh-gauge-ring span{z-index:1;flex-direction:column;align-items:center;line-height:1;display:flex}
.kh-gauge-ring strong{letter-spacing:-.05em;font-size:25px;font-weight:400}
.kh-gauge-ring small{color:#77756e;margin-top:5px;font-size:8px}
.kh-business-gauge>p{color:#66705f;align-items:center;gap:5px;margin:2px 0 0;font-size:9px;display:flex}
.kh-business-gauge>p i{background:var(--sage);border-radius:50%;width:6px;height:6px}
.kh-health-score-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 1px 14px;display:grid}
/* Business-at-a-glance (Owner Home above the fold) */
.kh-welcome-row.kh-welcome-glance{grid-template-columns:1fr;align-items:flex-start;gap:10px;padding-bottom:12px}
.kh-welcome-row.kh-welcome-glance .kh-subhead{margin-top:8px;max-width:36rem}
.kh-glance-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 1px 12px;display:grid}
.kh-glance-tile{text-align:left;background:#ffffffa8;border:1px solid #ffffffbf;border-radius:18px;min-width:0;min-height:108px;padding:14px 15px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 1px #ffffffa6;transition:transform .18s,background .18s,border-color .18s;cursor:pointer}
.kh-glance-tile:hover{background:#fff;border-color:#5fc4a366;transform:translateY(-1px)}
.kh-glance-tile:focus-visible{outline:2px solid #5fc4a3;outline-offset:2px}
.kh-glance-kicker{color:#276f5a;background:#5fc4a330;border-radius:999px;width:fit-content;padding:3px 8px;font-size:10px;font-weight:600;letter-spacing:.02em}
.kh-glance-tile[data-glance="waiting"] .kh-glance-kicker{color:#3f6078;background:#8da8be40}
.kh-glance-tile[data-glance="plans"] .kh-glance-kicker{color:#7a5a12;background:#f0ac2833}
.kh-glance-tile[data-glance="money"] .kh-glance-kicker{color:#994735;background:#cf6d5829}
.kh-glance-value{letter-spacing:-.06em;font-size:clamp(28px,3vw,40px);font-weight:400;line-height:1.05;color:#17312a}
.kh-glance-hint{color:#74736d;font-size:11px;line-height:1.3}
.kh-next-move{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 1px 14px;padding:18px 20px;min-height:0}
.kh-next-move-copy{min-width:0;flex:1}
.kh-next-move-copy h2{letter-spacing:-.04em;margin:0;font-size:clamp(18px,2.4vw,24px);font-weight:400;line-height:1.2}
.kh-next-move-why{color:#696861;margin:8px 0 0;font-size:13px;line-height:1.45}
.kh-next-move .kh-gold-button{flex:none;white-space:nowrap}
@media (width<=820px){
.kh-glance-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kh-glance-tile{min-height:96px;padding:12px 13px;border-radius:15px}
.kh-glance-value{font-size:28px}
.kh-next-move{flex-direction:column;align-items:stretch;padding:16px}
.kh-next-move .kh-gold-button{width:100%;justify-content:center}
}
@media (width<=560px){
.kh-welcome-row.kh-welcome-glance{padding:24px 5px 14px}
.kh-glance-kicker{font-size:9px}
.kh-glance-hint{font-size:10px}
}

.kh-health-score-card{background:#fff6;border:1px solid #ffffffbf;border-radius:22px;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:13px;min-width:0;min-height:126px;padding:14px;display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffffa6}
.kh-score-ring{--score-color:var(--gold);aspect-ratio:1;background:conic-gradient(from 225deg, var(--score-color) 0 82%, #ffffffc7 82% 89%, transparent 89%);border-radius:50%;place-items:center;width:88px;display:grid;position:relative}
.kh-score-ring:after{content:"";background:#edf5f1;border-radius:50%;position:absolute;inset:10px}
.kh-score-ring.kh-blue{--score-color:var(--sage);background:conic-gradient(from 225deg,var(--score-color) 0 74%,#ffffffc7 74% 89%,transparent 89%)}
.kh-score-ring.kh-dark{--score-color:#17312a;background:conic-gradient(from 225deg,var(--score-color) 0 91%,#ffffffc7 91% 95%,transparent 95%)}
.kh-score-ring.kh-amber{--score-color:#d89b58;background:conic-gradient(from 225deg,var(--score-color) 0 68%,#ffffffc7 68% 89%,transparent 89%)}
.kh-score-ring span{z-index:1;text-align:center;flex-direction:column;align-items:center;min-width:0;display:flex}
.kh-score-ring strong{letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:23px;font-weight:450;line-height:1}
.kh-score-ring small{color:#66736e;letter-spacing:.005em;text-align:center;white-space:normal;width:66px;margin-top:6px;font-size:9px;font-weight:500;line-height:1.1;display:block}
.kh-score-copy{flex-direction:column;gap:7px;min-width:0;display:flex}
.kh-score-copy>span{color:#50645d;align-items:center;gap:7px;font-size:11px;line-height:1.3;display:flex}
.kh-score-copy i{background:var(--gold);border-radius:50%;flex:none;width:7px;height:7px}
.kh-score-copy i.kh-blue{background:var(--sage)}
.kh-score-copy i.kh-dark{background:#17312a}
.kh-score-copy i.kh-amber{background:#d89b58}
.kh-score-copy small{color:#83817a;font-size:9px}
.kh-pulse-strip{background:#ffffff70;border:1px solid #ffffffbf;border-radius:21px;grid-template-columns:1.05fr repeat(3,1fr) 1.8fr;min-height:70px;margin:0 1px 14px;display:grid;overflow:hidden}
.kh-pulse-strip>div{align-items:center;gap:10px;padding:14px 18px;display:flex;position:relative}
.kh-pulse-strip>div+div{border-left:1px solid var(--line)}
.kh-pulse-label{font-size:13px;font-weight:600}
.kh-pulse-label svg{color:#a98724}
.kh-pulse-metric{grid-template-columns:1fr auto;align-content:center;row-gap:7px!important;display:grid!important}
.kh-pulse-metric span{color:#73726c;font-size:11px}
.kh-pulse-metric strong{font-size:16px;font-weight:500}
.kh-pulse-metric i{background:#29292717;border-radius:999px;grid-column:1/-1;width:100%;height:4px;display:block;overflow:hidden}
.kh-pulse-metric i:after{border-radius:inherit;background:var(--gold);content:"";width:46%;height:100%;display:block}
.kh-pulse-metric i.kh-wide:after{background:#333331;width:68%}
.kh-pulse-metric i.kh-fullest:after{background:var(--sage);width:91%}
.kh-pulse-note{color:#5d5c56;font-size:12px;line-height:1.45}
.kh-pulse-dot{background:var(--gold);border-radius:50%;flex:none;width:8px;height:8px;box-shadow:0 0 0 5px #5fc4a32e}
.kh-dashboard-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"actions insight""schedule schedule""revenue lead";gap:12px;display:grid}
.kh-panel{border-radius:var(--radius);background:var(--panel);border:1px solid #ffffffb8;min-width:0;position:relative;overflow:hidden;box-shadow:0 9px 34px #49422b0d,inset 0 1px #ffffffd6}
.kh-panel-heading{justify-content:space-between;align-items:flex-start;gap:14px;padding:23px 24px 17px;display:flex}
.kh-panel-heading h2{letter-spacing:-.04em;margin:0;font-size:22px;font-weight:400}
.kh-count-pill,.kh-ai-pill{color:#706e66;background:#efeade;border-radius:999px;padding:6px 9px;font-size:10px}
.kh-round-link{border:1px solid #2626220f;flex:none;width:36px;transition:transform .2s}
.kh-round-link:hover{transform:translate(2px,-2px)}
.kh-actions-panel{grid-area:actions}
.kh-schedule-panel{grid-area:schedule}
.kh-insight-panel{grid-area:insight}
.kh-revenue-panel{grid-area:revenue}
.kh-lead-panel{grid-area:lead}
.kh-task-stack{perspective:1100px;touch-action:pan-y;min-width:0;min-height:372px;padding:18px 0 0 18px;position:relative}
.kh-task-card-front{cursor:grab;-webkit-user-select:none;user-select:none;backface-visibility:hidden;min-height:354px;transform-style:preserve-3d;will-change:transform, opacity;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .26s,filter .42s,box-shadow .22s}
.kh-task-deck-card{position:absolute;top:18px;left:18px;right:0}
.kh-task-deck-card.kh-is-front{z-index:3;opacity:1;filter:brightness();pointer-events:auto;position:relative;top:auto;left:auto;right:auto}
.kh-task-deck-card.kh-is-next{z-index:2;opacity:.78;filter:brightness(.83);pointer-events:none;transform:translate(-9px,-12px)scale(.985)}
.kh-task-deck-card.kh-is-third{z-index:1;opacity:.48;filter:brightness(.7);pointer-events:none;transform:translate(-17px,-20px)scale(.968)}
.kh-task-deck-card.kh-is-next:before,.kh-task-deck-card.kh-is-third:before{color:#ffffffa8;letter-spacing:.08em;text-transform:uppercase;content:attr(data-card-title);font-size:8px;position:absolute;top:2px;right:15px}
.kh-task-deck-card.kh-is-hidden{z-index:0;opacity:0;pointer-events:none;transform:translate(14px,8px)scale(.95)}
.kh-task-deck-card.kh-is-leaving-next{z-index:4;opacity:0;filter:brightness();pointer-events:none;transform-origin:0;transform:perspective(1100px)translate(-42%)rotateY(-88deg)scale(.94)!important}
.kh-task-deck-card.kh-is-leaving-previous{z-index:4;opacity:0;filter:brightness();pointer-events:none;transform-origin:100%;transform:perspective(1100px)translate(42%)rotateY(88deg)scale(.94)!important}
.kh-task-card-front:active{cursor:grabbing;box-shadow:0 22px 45px #14131247}
.kh-task-card-footer{color:#aaa79d;align-items:center;flex-wrap:wrap;gap:7px;padding:12px 22px 17px;font-size:10px;display:flex}
.kh-task-card-footer>span{margin-left:auto}
.kh-deck-arrow{color:#ddd8ca;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:50%;flex:none;place-items:center;width:27px;height:27px;padding:0;display:grid}
.kh-deck-arrow:hover{background:#ffffff21}
.kh-deck-arrow.kh-previous svg{transform:rotate(180deg)}
.kh-deck-dots{align-items:center;gap:5px;display:flex}
.kh-deck-dots button{background:#68665f;border-radius:999px;width:6px;height:6px;padding:0;transition:width .2s,background .2s}
.kh-deck-dots button.kh-active{background:var(--gold);width:18px}
.kh-action-rail .kh-count-pill{color:#83d9bd;background:#5fc4a324}
.kh-action-rail .kh-action-list{padding:0 10px}
.kh-action-rail .kh-action-row{color:#f7f4eb;border-color:#ffffff14;min-height:57px}
.kh-action-rail .kh-action-row:hover{background:#ffffff0f}
.kh-action-rail .kh-action-copy small{color:#aaa79d}
.kh-action-rail .kh-action-row>svg{color:#74716a}
.kh-action-rail .kh-text-link{color:#d5d1c5}
.kh-action-rail .kh-action-check{color:#d9d5c9;background:#ffffff17}
.kh-action-rail .kh-action-check.kh-urgent{color:#f1a396;background:#d978682b}
.kh-action-rail .kh-action-check.kh-attention{color:#8fe0c2;background:#5fc4a324}
.kh-action-rail .kh-action-check.kh-calm{color:#c3cfb9;background:#a9b69d26}
.kh-action-list{padding:0 12px}
.kh-action-row{text-align:left;background:0 0;border-top:1px solid #2b2b2712;align-items:center;gap:11px;width:100%;padding:12px;transition:background .2s;display:flex}
.kh-action-row:hover{background:#ffffff80;border-radius:14px}
.kh-action-check{color:#5d5c56;background:#e9e7df;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:grid}
.kh-action-check.kh-urgent{color:#9b4d42;background:#d978682e}
.kh-action-check.kh-attention{color:#28755e;background:#5fc4a338}
.kh-action-check.kh-calm{color:#60715b;background:#a9b69d40}
.kh-action-copy{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}
.kh-action-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}
.kh-action-copy small{color:#7d7b74;font-size:10px}
.kh-action-row>svg{color:#a3a099}
.kh-action-row.kh-is-done{opacity:.5}
.kh-action-row.kh-is-done .kh-action-copy strong{text-decoration:line-through}
.kh-text-link{color:#5f5e58;background:0 0;align-items:center;gap:5px;margin:10px 22px 18px auto;font-size:11px;display:flex}
.kh-schedule-panel{min-height:354px}
.kh-timeline{padding:0 18px 0 16px;position:relative}
.kh-timeline:before{content:"";border-left:1px dashed #d1cec5;width:1px;position:absolute;top:18px;bottom:22px;left:75px}
.kh-timeline-row{grid-template-columns:43px 13px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:56px;display:grid}
.kh-timeline-row time{color:#74736d;text-align:right;font-size:10px}
.kh-timeline-node{z-index:1;background:#ddd9cc;border:3px solid #fff;border-radius:50%;width:11px;height:11px;display:block;box-shadow:0 0 0 1px #d1cec5}
.kh-timeline-node.kh-dark{background:#333331}
.kh-timeline-node.kh-gold{background:var(--gold)}
.kh-timeline-node.kh-alert{background:var(--danger)}
.kh-timeline-row div{min-width:0}
.kh-timeline-row strong,.kh-timeline-row small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}
.kh-timeline-row strong{font-size:12px;font-weight:500}
.kh-timeline-row small{color:#85837c;margin-top:2px;font-size:9px}
.kh-status-tag{color:#66645d;white-space:nowrap;background:#ece9df;border-radius:999px;padding:5px 8px;font-size:9px}
.kh-status-tag.kh-dark{color:#fff;background:#18312a}
.kh-status-tag.kh-gold{color:#226b54;background:#5fc4a347}
.kh-status-tag.kh-alert{color:#994f43;background:#cf6d582e}
.kh-schedule-footer{border-top:1px solid var(--line);color:#72716a;justify-content:space-around;gap:8px;margin-top:10px;padding:14px 10px;font-size:10px;display:flex}
.kh-dark-panel{color:#f4faf7;background:#17312a;border-color:#ffffff12;box-shadow:0 14px 32px #102a2333}
.kh-dark-panel .kh-eyebrow{color:#a6bbb4}
.kh-dark-panel .kh-panel-heading h2{color:#fff}
.kh-ai-pill{color:#8fe0c2;background:#5fc4a321;align-items:center;gap:4px;display:flex}
.kh-insight-panel{padding-bottom:18px}
.kh-insight-number{flex-direction:column;padding:3px 24px 12px;display:flex}
.kh-insight-number span{color:#8fe0c2;letter-spacing:-.05em;font-size:35px;font-weight:400}
.kh-insight-number small{color:#a6bbb4;font-size:10px}
.kh-insight-panel>p{z-index:2;color:#66645e;margin:4px 24px 20px;font-size:12px;line-height:1.6;position:relative}
.kh-gold-button{z-index:2;background:var(--gold);color:#343026;border-radius:999px;justify-content:space-between;align-items:center;gap:8px;width:calc(100% - 48px);margin:0 24px;padding:12px 14px;font-size:11px;display:flex;position:relative}
.kh-dot-pattern{opacity:.4;grid-template-columns:repeat(9,7px);gap:7px;display:grid;position:absolute;bottom:70px;right:18px;transform:rotate(-7deg)}
.kh-dot-pattern i{background:#52665f;border-radius:50%;width:7px;height:7px}
.kh-dot-pattern i.kh-lit{background:var(--gold);box-shadow:0 0 11px #5fc4a380}
.kh-revenue-panel{min-height:315px}
.kh-legend{color:#78766f;gap:14px;font-size:9px;display:flex}
.kh-legend span{align-items:center;gap:5px;display:flex}
.kh-legend i{border-top:2px solid #2e2e2c;width:15px}
.kh-legend i.kh-goal{border-top:1px dashed #a7a49d}
.kh-chart-wrap{height:220px;margin:0 25px 4px 58px;position:relative}
.kh-chart-wrap svg{width:100%;height:186px;overflow:visible}
.kh-grid-lines line{stroke:#ddd9ce;stroke-width:1px}
.kh-goal-line{fill:none;stroke:#a7a49d;stroke-width:1.4px;stroke-dasharray:5 6}
.kh-area{fill:url(#area)}
.kh-actual-line{fill:none;stroke:#292927;stroke-width:2.4px;stroke-linecap:round}
.kh-chart-wrap circle{fill:var(--gold);stroke:#fff;stroke-width:2px}
.kh-marker{stroke:var(--gold);stroke-width:1px;stroke-dasharray:3 5}
.kh-chart-y{color:#9a978f;flex-direction:column;justify-content:space-between;font-size:9px;display:flex;position:absolute;top:7px;bottom:39px;right:calc(100% + 12px)}
.kh-chart-x{color:#8d8b83;justify-content:space-between;font-size:9px;display:flex;position:absolute;bottom:15px;left:0;right:0}
.kh-chart-callout{color:#fff;background:#18312a;border-radius:8px;padding:6px 8px;font-size:10px;position:absolute;top:22px;right:-7px}
.kh-chart-callout small{color:#8fe0c2}
.kh-lead-panel{min-height:315px}
.kh-lead-score{align-items:center;gap:17px;padding:2px 24px 14px;display:flex}
.kh-donut{background:conic-gradient(#18312a 0 44%, var(--gold) 44% 76%, var(--sage) 76% 94%, #d2dcda 94%);border-radius:50%;place-items:center;width:98px;height:98px;display:grid;position:relative}
.kh-donut:after{content:"";background:#f9f6ed;border-radius:50%;position:absolute;inset:11px}
.kh-donut span{z-index:1;text-align:center;letter-spacing:-.05em;flex-direction:column;font-size:24px;display:flex;position:relative}
.kh-donut small{color:#77756d;letter-spacing:0;font-size:9px}
.kh-lead-score>div:last-child{flex-direction:column;display:flex}
.kh-lead-score strong{font-size:21px;font-weight:400}
.kh-lead-score small{color:#77756e;font-size:9px}
.kh-lead-score em{color:#61715b;margin-top:7px;font-size:9px;font-style:normal}
.kh-source-list{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:8px 18px;padding:8px 24px 20px;display:grid}
.kh-source-list>div{color:#65635d;justify-content:space-between;padding-top:7px;font-size:10px;display:flex}
.kh-source-list span{align-items:center;gap:6px;display:flex}
.kh-source-list strong{color:#3d3c39;font-weight:500}
.kh-source-dot{background:#18312a;border-radius:50%;width:7px;height:7px}
.kh-source-dot.kh-referral{background:var(--gold)}
.kh-source-dot.kh-repeat{background:var(--sage)}
.kh-source-dot.kh-other{background:#d2dcda}
.kh-design-extension-grid{grid-template-columns:minmax(310px,.82fr) minmax(0,1.8fr);gap:12px;margin-top:12px;display:grid}
.kh-membership-panel{flex-direction:column;min-height:410px;display:flex}
.kh-membership-heading{justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 23px 13px;display:flex}
.kh-membership-heading h2{letter-spacing:-.035em;margin:0;font-size:21px;font-weight:500}
.kh-membership-heading>button{border:1px solid var(--line);color:#65635c;background:#ffffff8c;border-radius:11px;padding:9px 12px;font-size:10px}
.kh-membership-body{grid-template-columns:1fr 1.05fr;align-items:center;gap:18px;padding:22px 24px 16px;display:grid}
.kh-membership-donut{aspect-ratio:1;background:conic-gradient(#4fae91 0 82%, #8da8be 82% 95%, #d89b58 95% 97.5%, #cf6d58 97.5% 100%);border-radius:50%;place-items:center;width:min(170px,100%);margin:auto;display:grid;position:relative}
.kh-membership-donut:after{content:"";background:#faf8f0;border-radius:50%;position:absolute;inset:22px}
.kh-membership-donut span{z-index:1;flex-direction:column;align-items:center;display:flex}
.kh-membership-donut strong{letter-spacing:-.06em;font-size:38px;font-weight:400}
.kh-membership-donut small{color:#73716a;font-size:12px}
.kh-membership-legend{gap:15px;display:grid}
.kh-membership-legend>div{justify-content:space-between;align-items:center;gap:12px;font-size:11px;display:flex}
.kh-membership-legend span{color:#65635d;align-items:center;gap:8px;display:flex}
.kh-membership-legend i{background:#8da8be;border-radius:50%;width:10px;height:10px}
.kh-membership-legend i.kh-active{background:#4fae91}
.kh-membership-legend i.kh-past-due{background:#d89b58}
.kh-membership-legend i.kh-failed{background:#cf6d58}
.kh-membership-legend strong{font-size:13px;font-weight:500}
.kh-renewal-link{color:#345fa4;background:0 0;align-items:center;gap:7px;margin:auto 22px 20px;padding:0;font-size:12px;font-weight:600;display:flex}
.kh-growth-studio{color:#f3faf7;background:#10241f;border:1px solid #ffffff17;border-radius:27px;overflow:hidden;box-shadow:0 16px 36px #0e272033}
.kh-growth-studio-header{justify-content:space-between;align-items:center;padding:18px 20px;display:flex}
.kh-growth-studio-header>div{align-items:center;gap:9px;display:flex}
.kh-growth-studio-header strong{font-size:12px;font-weight:500}
.kh-growth-mark{background:var(--gold);color:#2d2b24;border-radius:9px;place-items:center;width:28px;height:28px;display:grid}
.kh-growth-studio-header>button{color:#30302c;background:#f8f6ef;border-radius:999px;padding:8px 11px;font-size:9px}
.kh-growth-hero{color:#2e2e2a;background:#f9f7ef;border-radius:21px 21px 10px 10px;grid-template-columns:.85fr 1.15fr;gap:14px;margin:0 14px;padding:17px;display:grid}
.kh-growth-hero h2{letter-spacing:-.06em;margin:0;font-size:clamp(28px,3vw,45px);font-weight:500;line-height:.95}
.kh-growth-services{grid-template-columns:1fr 1fr;gap:7px 12px;margin-top:24px;display:grid}
.kh-growth-services span{border-top:1px solid var(--line);color:#66645e;padding-top:7px;font-size:10px}
.kh-growth-feature{color:#fff;background:radial-gradient(circle at 92% 10%,#5fc4a359,#0000 32%),linear-gradient(145deg,#25453c,#10241f);border-radius:17px;flex-direction:column;justify-content:flex-end;min-height:190px;padding:20px;display:flex}
.kh-growth-feature p{color:#a9c2b9;text-transform:uppercase;letter-spacing:.12em;margin:0 0 auto;font-size:9px}
.kh-growth-feature h3{letter-spacing:-.045em;max-width:330px;margin:16px 0 7px;font-size:24px;font-weight:500;line-height:1}
.kh-growth-feature>span{color:#b4c9c1;max-width:350px;font-size:10px;line-height:1.4}
.kh-growth-feature button{color:#18312a;background:#eff7f3;border-radius:999px;align-items:center;gap:5px;width:fit-content;margin-top:14px;padding:8px 11px;font-size:9px;display:flex}
.kh-growth-programs{grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 14px 14px;display:grid}
.kh-growth-programs>button{color:#fff;text-align:left;background:#19342c;border:1px solid #ffffff14;border-radius:13px;grid-template-columns:30px 1fr;gap:2px 9px;padding:11px;display:grid}
.kh-program-icon{background:var(--gold);color:#17372d;border-radius:9px;grid-row:span 3;place-items:center;width:30px;height:30px;display:grid}
.kh-program-icon.kh-sage{background:var(--sage)}
.kh-program-icon.kh-dark{background:#edf3f0}
.kh-program-icon.kh-amber{background:#cf7f62}
.kh-growth-programs strong{text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:500;overflow:hidden}
.kh-growth-programs small{color:#9fb8af;font-size:8px}
.kh-growth-programs em{color:#83d9bd;font-size:8px;font-style:normal}
.kh-watchlist-panel{margin-top:12px}
.kh-watchlist-heading{justify-content:space-between;align-items:center;gap:20px;padding:20px 22px 13px;display:flex}
.kh-watchlist-heading h2{letter-spacing:-.035em;margin:0;font-size:19px;font-weight:400}
.kh-watchlist-heading>button{border:1px solid var(--line);color:#85837b;background:#ffffff8c;border-radius:999px;align-items:center;gap:7px;padding:9px 12px;font-size:10px;display:flex}
.kh-watchlist-scroll{scrollbar-width:thin;overflow-x:auto}
.kh-watchlist-panel table{border-collapse:collapse;width:100%;min-width:780px}
.kh-watchlist-panel th{color:#86847c;letter-spacing:.08em;text-align:left;text-transform:uppercase;background:#e5e1d68f;padding:9px 13px;font-size:8px;font-weight:600}
.kh-watchlist-panel td{color:#67655f;border-top:1px solid #2b2b2712;padding:11px 13px;font-size:10px}
.kh-watchlist-panel td:first-child{color:#3d3c38;align-items:center;gap:9px;display:flex}
.kh-watchlist-panel td strong{font-weight:500}
.kh-watchlist-panel td:last-child{width:40px}
.kh-watchlist-panel td:last-child button{background:0 0;border-radius:50%;place-items:center;width:28px;height:28px;display:grid}
.kh-customer-initial{color:#fff;background:#18312a;border-radius:50%;place-items:center;width:30px;height:30px;font-size:9px;display:grid}
.kh-customer-initial.kh-amber{color:#fff;background:#cf7f62}
.kh-customer-initial.kh-sage{background:var(--sage);color:#233d50}
.kh-table-status{border-radius:999px;padding:5px 8px;font-size:9px}
.kh-table-status.kh-overdue{color:#954b40;background:#cf6d582b}
.kh-table-status.kh-pending{color:#3f6078;background:#8da8be40}
.kh-table-status.kh-healthy{color:#276f5a;background:#5fc4a333}
footer{color:#77756e;align-items:center;gap:20px;min-height:48px;padding:10px 14px 0;font-size:10px;display:flex}
footer span:nth-child(2){align-items:center;gap:5px;margin-left:auto;display:flex}
footer button{background:#ffffff8c;border-radius:50%;place-items:center;width:32px;height:32px;display:grid}
@media (width<=1120px){.kh-dashboard-frame{grid-template-columns:1fr}
.kh-command-sidebar{display:none}
.kh-menu-button{display:grid}
.kh-mobile-nav{background:#fffc;border-radius:16px;grid-template-columns:1fr 1fr;gap:4px;padding:10px;display:grid}
.kh-mobile-nav button{text-align:left;background:0 0;border-radius:10px;padding:10px;font-size:13px}
.kh-mobile-nav button:hover{background:#eee9dd}
.kh-topbar>.kh-brand{display:flex}
.kh-breadcrumb{display:none}
.kh-welcome-row{grid-template-columns:minmax(0,1fr) minmax(420px,1.1fr);align-items:center}
.kh-health-summary{gap:24px;min-width:0}
.kh-gauge-ring{width:112px;height:112px}
.kh-pulse-strip{grid-template-columns:1fr repeat(3,.85fr)}
.kh-pulse-note{display:none!important}
.kh-dashboard-grid{grid-template-columns:1fr 1fr;grid-template-areas:"actions actions""insight lead""schedule schedule""revenue revenue"}
.kh-lead-panel{min-height:300px}
.kh-design-extension-grid{grid-template-columns:minmax(300px,.9fr) minmax(0,1.4fr)}
.kh-growth-programs{grid-template-columns:1fr 1fr}
.kh-dot-pattern{bottom:25px;right:35px}
}
@media (width<=820px){.kh-site-shell{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
.kh-dashboard-frame{border-radius:26px}
.kh-dashboard-content{padding:14px}
.kh-desktop-nav,.kh-profile-button{display:none}
.kh-welcome-row{grid-template-columns:1fr;align-items:flex-start;padding-top:32px}
.kh-welcome-row>div:first-child{grid-column:auto}
.kh-health-summary{justify-content:space-between;width:100%;min-width:0}
.kh-health-summary strong{font-size:30px}
.kh-health-score-rail{scroll-snap-type:x mandatory;scrollbar-width:none;padding:1px 1px 5px;display:flex;overflow-x:auto}
.kh-health-score-rail::-webkit-scrollbar{display:none}
.kh-health-score-card{scroll-snap-align:start;flex:0 0 min(78vw,330px)}
.kh-pulse-strip{grid-template-columns:repeat(3,1fr)}
.kh-pulse-label{display:none!important}
.kh-pulse-strip>div:nth-child(2){border-left:0}
.kh-dashboard-grid{grid-template-columns:1fr;grid-template-areas:"actions""insight""schedule""revenue""lead"}
.kh-task-stack{width:100%;min-height:0;margin-bottom:4px;padding:20px 8px 0 20px}
.kh-task-card-front{min-height:0}
.kh-design-extension-grid{grid-template-columns:1fr}
.kh-membership-panel{min-height:380px}
.kh-revenue-panel{min-height:300px}
}
@media (width<=560px){.kh-site-shell{padding:max(16px, env(safe-area-inset-top)) env(safe-area-inset-right) max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left)}
.kh-dashboard-frame{border:0;border-radius:0}
.kh-dashboard-content{padding:11px}
.kh-topbar{min-height:50px}
.kh-brand{font-size:18px}
.kh-header-actions .kh-icon-button:first-child{display:none}
.kh-welcome-row{gap:20px;padding:28px 5px 21px}
h1{overflow-wrap:anywhere;max-width:100%;font-size:clamp(36px,11.5vw,43px)}
.kh-subhead{font-size:13px;line-height:1.5}
.kh-health-score-card{flex-basis:min(84vw,330px)}
.kh-health-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}
.kh-health-summary div{background:#ffffff52;border:1px solid #ffffffa8;border-radius:15px;min-width:0;padding:11px}
.kh-health-summary div:last-child{grid-column:1/-1}
.kh-health-summary div+div:before{display:none}
.kh-health-summary span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9px;overflow:hidden}
.kh-health-summary strong{font-size:25px}
.kh-health-summary small{max-width:none;line-height:1.25;display:block}
.kh-pulse-strip{grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.kh-pulse-strip>div{min-width:0;padding-inline:9px}
.kh-pulse-metric span{text-overflow:ellipsis;font-size:10px;line-height:1.15;overflow:hidden}
.kh-pulse-metric strong{font-size:14px}
.kh-panel-heading{padding:20px 18px 15px}
.kh-action-list{padding-inline:7px}
.kh-action-copy strong{font-size:14px}
.kh-action-copy small{font-size:12px;line-height:1.35}
.kh-action-rail .kh-action-row{min-height:64px;padding:12px 10px}
.kh-task-card-footer{padding-inline:17px;font-size:12px}
.kh-task-card-footer>span{display:none}
.kh-task-stack{min-height:0}
.kh-membership-body{grid-template-columns:1fr}
.kh-membership-donut{width:150px}
.kh-membership-legend{grid-template-columns:1fr 1fr;width:100%}
.kh-membership-legend>div{border-top:1px solid var(--line);min-width:0;padding:7px 0}
.kh-growth-hero{grid-template-columns:1fr}
.kh-growth-services{margin-top:17px}
.kh-growth-feature{min-height:180px}
.kh-growth-programs{grid-template-columns:1fr 1fr}
.kh-growth-programs>button{grid-template-columns:28px minmax(0,1fr);min-width:0;padding:9px}
.kh-program-icon{width:28px;height:28px}
.kh-schedule-footer{font-size:8px}
.kh-status-tag{text-overflow:ellipsis;max-width:72px;overflow:hidden}
.kh-revenue-panel .kh-legend{display:none}
.kh-chart-wrap{margin-left:48px;margin-right:17px}
.kh-dot-pattern{opacity:.2}
.kh-watchlist-heading{flex-direction:column;align-items:flex-start}
.kh-watchlist-heading>button{justify-content:center;width:100%}
footer{flex-wrap:wrap}
footer span:nth-child(2){margin-left:0}
}
@media (width<=390px){.kh-dashboard-content{padding-inline:9px}
.kh-topbar{gap:10px;padding-inline:2px}
.kh-brand{font-size:16px}
.kh-brand-mark{width:31px;height:31px}
.kh-health-summary{grid-template-columns:1fr}
.kh-health-summary div:last-child{grid-column:auto}
.kh-health-summary div{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2px 10px;display:grid}
.kh-health-summary span{grid-column:1/-1}
.kh-health-summary small{align-self:center}
.kh-health-summary strong{grid-area:2/2}
.kh-health-score-card{grid-template-columns:82px minmax(0,1fr);padding:12px}
.kh-score-ring{width:82px}
.kh-task-stack{min-height:0;padding-left:14px;padding-right:5px}
.kh-panel-heading{padding-inline:15px}
.kh-action-rail .kh-action-list{padding-inline:5px}
.kh-action-rail .kh-action-row{padding-inline:8px}
.kh-action-copy strong{white-space:normal;line-height:1.25;overflow:visible}
.kh-action-copy small{font-size:11px}
.kh-timeline{padding-inline:10px}
.kh-timeline:before{left:61px}
.kh-timeline-row{grid-template-columns:37px 11px minmax(0,1fr) auto;gap:7px}
.kh-status-tag{text-overflow:ellipsis;max-width:63px;overflow:hidden}
.kh-membership-heading,.kh-growth-studio-header{gap:8px;padding-inline:15px}
.kh-membership-heading h2{font-size:19px}
.kh-membership-heading>button,.kh-growth-studio-header>button{flex:none;padding-inline:9px}
.kh-membership-legend,.kh-growth-programs{grid-template-columns:1fr}
.kh-growth-programs>button{padding:11px}
.kh-chart-wrap{margin-left:42px;margin-right:12px}
.kh-chart-callout{right:-4px}
.kh-schedule-footer{gap:5px;font-size:7px}
}
@media (prefers-reduced-motion:no-preference){.kh-dashboard-frame{animation:.55s cubic-bezier(.2,.8,.2,1) both settle}
.kh-panel{animation:.55s cubic-bezier(.2,.8,.2,1) both rise}
.kh-panel:nth-child(2){animation-delay:50ms}
.kh-panel:nth-child(3){animation-delay:.1s}
@keyframes settle{0%{opacity:0;transform:translateY(12px)scale(.99)}
}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}
}
}

}
.home-reference :is(button,a,[role=button]):focus-visible { outline: 2px solid #277d60; outline-offset: 3px; }
.home-reference .kh-source-alert { background: #fff4e9; color: #6b3829; border: 1px solid #dab49b; padding: 12px 16px; border-radius: 14px; font-size: 12px; margin: 10px 0; }
.home-reference .kh-empty { margin: 10px 16px; font-size: 12px; line-height: 1.5; color: #66756f; }
.home-reference .kh-dark-panel .kh-empty { color: #a6bbb4; }
.home-reference .kh-timeline { min-height: 224px; }
.home-reference .kh-action-list { min-height: 250px; }
.home-reference .kh-action-check svg { width: 16px; height: 16px; }
.home-reference .kh-action-row > svg { width: 18px; height: 18px; }
.home-reference :is(.kh-renewal-link,.kh-growth-feature button) > svg { width: 14px; height: 14px; }
.home-reference .kh-watchlist-panel td button svg { width: 16px; height: 16px; }
.home-reference footer > span > svg { width: 14px; height: 14px; }
.home-reference footer button { background: #ffffff8c; border-radius: 50%; }
.home-reference .kh-watchlist-panel { min-height: 277.5px; }
.home-reference .kh-score-ring.kh-unknown { background: conic-gradient(from 225deg, color-mix(in srgb, var(--score-color), transparent 65%) 0 82%, #ffffffc7 82% 89%, transparent 89%); }
.home-reference .kh-pulse-metric i.kh-unknown:after { width: 0; }
.home-reference .kh-donut.kh-unknown { background: #d2dcda; }
.home-reference .kh-membership-donut.kh-unknown { background: #d2dcda; }
.home-reference .kh-chart-empty { position: absolute; top: 75px; left: 0; right: 0; text-align: center; font-size: 12px; color: #66756f; }
.home-reference .kh-chart-x:has(>span:only-child) { justify-content: center; }
.home-reference .kh-revenue-panel { position: relative; }
.home-reference .kh-chart-link { display: block; font-size: 10px; color: #526b60; position: absolute; right: 24px; bottom: 7px; }
.home-reference .kh-pulse-note button { text-align: left; font-size: inherit; }
.home-reference .kh-sidebar-profile { cursor: pointer; }
.home-reference .kh-membership-legend span { min-width: 0; }
.home-reference .kh-source-list span { min-width: 0; overflow-wrap: anywhere; }
.home-reference-dialog .modal-card { max-height: 90dvh; overflow: auto; width: min(920px,calc(100vw - 28px)); }
.home-reference-dialog .owner-os { background: #172b24; padding: 16px; border-radius: 16px; color: #eef7f1; }
.home-reference-dialog .owner-os .owner-os-membership { display: block; }
.home-reference-dialog .owner-os .owner-os-membership-controls { display: grid; grid-template-columns: minmax(0,1fr); }
.home-reference-dialog .owner-os :where(button,p,small,strong) { overflow-wrap: anywhere; }
.home-reference-dialog .kh-tool-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 15px 0; }
.home-reference-dialog .kh-tool-list .nav-item { background: #e5efe8; color: #17312a; min-width: 0; white-space: normal; }
.home-reference-dialog [data-kh-search-form] { display: grid; gap: 12px; }
@media (max-width:820px) {
  .home-reference .kh-timeline { min-height: 224px; }
  .home-reference .kh-action-list { min-height: 0; }
  .home-reference .kh-deck-arrow { min-width: 38px; min-height: 38px; }
  .home-reference-dialog .kh-tool-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .home-reference *, .home-reference *:before, .home-reference *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Graphic fit — text inside a ring must fit the CIRCLE, not the box.

   A ring is round; a text box is not. A label as wide as the hole's
   DIAMETER still crosses the arc once it sits above or below centre,
   because the circle is narrower there. Measured on the shipped board:

     .kh-score-ring       label 66px wide where the hole is 48px at the
                          label's own height  -> "Business health" crossed
                          the mint arc on every card
     .kh-donut            "observed leads" 63px against a 58px chord
     .kh-membership-donut at 118px the stack was 75px tall against a 74px
                          hole -> the number sat outside the hole entirely
     .kh-chart-y          money labels ran 10px past the panel's left edge

   Sizes below are chosen against the chord at each label's vertical
   offset, verified by tests/graphics-fit-browser.py rather than by eye.
   ===================================================================== */
.home-reference .kh-score-ring strong { font-size: 19px; }
.home-reference .kh-score-ring small {
  /* Two short lines inside the hole beat one line across the arc. */
  width: 44px;
  margin-top: 3px;
  font-size: 8.5px;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.home-reference .kh-donut span { font-size: 21px; }
.home-reference .kh-donut small { font-size: 8px; line-height: 1.1; }
.home-reference .kh-membership-donut::after { inset: 14%; }
.home-reference .kh-membership-donut strong { font-size: 26px; }
.home-reference .kh-membership-donut small { font-size: 10px; }

@media (width <= 560px) {
  /* The y-axis is positioned outside the plot, so the plot's left margin
     has to reserve the widest money label plus its gap. */
  .home-reference .kh-chart-wrap { margin-left: 62px; }
  .home-reference .kh-chart-y { right: calc(100% + 8px); }
}
@media (width <= 390px) {
  .home-reference .kh-chart-wrap { margin-left: 60px; }
}

/* =====================================================================
   Home corrections from QA as the plumbing owner (measured)
   Contrast pixel-sampled on the real render; tap targets at 375px; clipping
   as scrollWidth > clientWidth. These target the Home itself, so they live
   here with the graphic-fit corrections, never in the theme layer.
   ===================================================================== */
.home-reference .kh-action-copy small, .home-reference .kh-timeline-row small, .home-reference .kh-source-list > div,
.home-reference .kh-schedule-footer, .home-reference .kh-task-card-footer { color: #5a6963; }   /* were 3.4-4.2:1 */
.home-reference .kh-eyebrow, .home-reference .kh-breadcrumb { color: #5f6e68; }
.home-reference .kh-empty { color: #4f5f59; }                          /* dark-pane grey on light cards was 1.8:1 */
.home-reference .kh-dark-panel :is(.kh-empty, p, small) { color: #b7c8c1; }
/* the emergency's title and the customer's name were single-line ellipsized: two lines, then clip */
.home-reference .kh-action-copy strong, .home-reference .kh-timeline-row strong {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
/* Owner insight took the ad-efficiency slot: four counts on inner-tier glass, above the dots */
.home-reference .kh-insight-facts { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 24px 16px; }
.home-reference .kh-insight-facts > div { background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; box-shadow: inset 0 1px #ffffffa6; }
.home-reference .kh-insight-facts strong { font-size: 18px; font-weight: 400; letter-spacing: -.04em; color: #18312a; line-height: 1.1; }
.home-reference .kh-insight-facts small { font-size: 10px; color: #5a6963; }
.home-reference .kh-insight-number span { color: #277d60; }            /* mint #8fe0c2 on glass was 1.6:1 */
.home-reference .kh-dot-pattern { top: 92px; bottom: auto; right: 22px; }   /* beside the number, clear of the count cards */
/* touch-action is not inherited: without this the browser could claim a horizontal
   gesture that starts on an action row, and the deck never sees the swipe. */
.home-reference .kh-task-stack, .home-reference .kh-task-stack * { touch-action: pan-y; }
.home-reference .kh-insight-panel > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
@media (max-width: 820px) {
  /* 44px thumbs: brand 31, deck arrows 38, chart link 15, footer tools 32, table action 28, round links 36, dots 6 */
  .home-reference :is(.kh-brand, .kh-chart-link, .kh-text-link, .kh-renewal-link, .kh-growth-feature button, .kh-growth-studio-header > button,
    .kh-membership-heading > button, .kh-watchlist-heading > button, .kh-sidebar-search, .kh-gold-button, .kh-growth-programs > button, .kh-action-row) { min-height: 44px; }
  .home-reference :is(.kh-brand, .kh-chart-link) { display: inline-flex; align-items: center; }
  .home-reference .kh-chart-link { padding: 0 8px; right: 16px; bottom: 0; }
  .home-reference :is(.kh-round-link, .kh-icon-button, .kh-menu-button, .kh-profile-button, .kh-deck-arrow,
    .kh-watchlist-panel td:last-child button, footer > button) { min-width: 44px; min-height: 44px; }
  /* each dot is its own 44x44 button; the visible dot is drawn inside it, so neighbours never overlap */
  .home-reference .kh-deck-dots { gap: 0; }
  .home-reference .kh-deck-dots button { position: relative; width: 44px; height: 44px; background: transparent; border-radius: 0; transition: none; }
  .home-reference .kh-deck-dots button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%); border-radius: 999px; background: #68665f; transition: width .2s, background .2s; }
  .home-reference .kh-deck-dots button.kh-active { background: transparent; width: 44px; }
  .home-reference .kh-deck-dots button.kh-active::before { width: 18px; background: var(--gold); }
}

/* =====================================================================
   Search rankings — owner-declared phrases and their recorded readings.
   Built from the shared panel tier so the kh theme carries it unchanged.
   ===================================================================== */
.visibility-shell { display: grid; gap: 12px; }
.rank-panel { display: grid; gap: 14px; }
.rank-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rank-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px #ffffffa6; min-width: 0; }
.rank-summary strong { font-size: 18px; font-weight: 400; letter-spacing: -.04em; line-height: 1.15; overflow-wrap: anywhere; }
.rank-summary small { font-size: 10px; color: #5a6963; }
.rank-notice { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45;
  background: #5fc4a326; color: #1f5344; border: 1px solid #5fc4a34d; }
.rank-notice-bad { background: #d978682b; color: #7a3227; border-color: #d9786855; }
.rank-add { display: grid; gap: 6px; }
.rank-add button { justify-self: start; margin-top: 4px; }
.rank-list { display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr) auto;
  align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px;
  background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px #ffffffa6; }
.rank-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-phrase strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.rank-row small { font-size: 10px; color: #5a6963; overflow-wrap: anywhere; }
.rank-position strong { font-size: 20px; font-weight: 400; letter-spacing: -.04em; }
.rank-empty { font-size: 11px; color: #5a6963; }
.rank-tag { align-self: start; margin-top: 3px; padding: 2px 7px; border-radius: 999px; font-size: 9px; background: #5fc4a32e; color: #1f5344; white-space: nowrap; }
.rank-change { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.rank-change svg { width: 14px; height: 14px; }
.rank-up { color: #1f5344; }
.rank-down { color: #7a3227; }
.rank-flat { color: #5a6963; }
.rank-traffic span { font-size: 11px; color: #4f5f59; }
.rank-when span { font-size: 11px; }
.rank-import { border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.7); }
.rank-import summary { cursor: pointer; font-size: 12px; min-height: 24px; }
.rank-import form { display: grid; gap: 6px; margin: 10px 0; }
.rank-import button { justify-self: start; }
.rank-import p { font-size: 11px; line-height: 1.5; }
.rank-boundary { margin: 0; font-size: 11px; line-height: 1.55; color: #4f5f59; }
@media (max-width: 900px) {
  .rank-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-row { grid-template-columns: minmax(0,1fr) auto; grid-auto-flow: row; row-gap: 8px; }
  .rank-row > button { grid-column: 2; grid-row: 1; align-self: start; }
  .rank-row > div { grid-column: 1 / -1; }
  .rank-phrase { grid-column: 1; grid-row: 1; }
  .rank-traffic { flex-direction: row; gap: 12px; }
  .rank-import summary, .rank-row > button { min-height: 44px; display: flex; align-items: center; }
}

/* =====================================================================
   Care Pulse — the working care page: every row carries its own action.
   Built on the inner glass tier so the theme carries it unchanged.
   ===================================================================== */
.care-shell { display: grid; gap: 12px; }
.care-head .panel-header { align-items: flex-start; }
.care-head-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.care-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.care-counts > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; min-width: 0;
  background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px #ffffffa6; }
.care-counts strong { font-size: 22px; font-weight: 400; letter-spacing: -.04em; line-height: 1.1; color: #18312a; }
.care-counts small { font-size: 11px; color: #5a6963; }
.care-counts > div.care-hot strong { color: #7a3227; }
.care-list { display: grid; gap: 8px; }
.care-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px #ffffffa6; }
.care-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #5fc4a32e; color: #1f5344; }
.care-icon svg { width: 16px; height: 16px; }
.care-icon.care-rose { background: #d978682b; color: #7a3227; }
.care-icon.care-gold { background: #f0ac2833; color: #6b4d0a; }
.care-icon.care-slate { background: #8da8be33; color: #2f4a5c; }
.care-copy { min-width: 0; }
.care-copy strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.care-copy small { display: block; font-size: 11px; line-height: 1.4; color: #5a6963; margin-top: 2px; overflow-wrap: anywhere; }
.care-copy .badge { margin-left: 6px; vertical-align: middle; }
.care-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.care-actions :is(.small-button, .primary-button) { white-space: nowrap; }
.care-actions a.small-button { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.care-empty { font-size: 12px; line-height: 1.5; color: #4f5f59; padding: 4px 2px; }
.care-done { margin-top: 8px; }
.care-done summary { font-size: 12px; color: #5a6963; cursor: pointer; min-height: 24px; }
.care-done .care-row { opacity: .72; }
@media (max-width: 820px) {
  .care-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-row { grid-template-columns: auto minmax(0, 1fr); }
  .care-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .care-actions :is(.small-button, .primary-button) { min-height: 44px; }
  .care-head-actions { justify-content: flex-start; }
}

/* =====================================================================
   kh-theme — the owner Home design, applied to every other view.

   The Home board (.home-reference / .kh-*) is a self-contained design:
   slate canvas, one glass frame, sage sidebar, Avenir, 22px/400 headings
   with tight tracking, mint accent (#5fc4a3), deep-green active state
   (#18312a), hairline panels with an inset highlight. Every other view
   still spoke the older cream/gold/serif/navy language, so the app read
   as two products. This block makes the legacy shell and vocabulary
   resolve to the same values the Home template uses, by re-pointing the
   tokens the legacy CSS is already built on and restyling the handful of
   rules that hard-coded colors. Nothing inside .home-reference is
   touched: Home stays the reference, the rest now matches it.
   ===================================================================== */
body.kh-theme {
  /* canvas + surfaces — from @scope (.home-reference) */
  --bg: #718087;
  --bg-grad: radial-gradient(circle at 78% 18%, #5fc4a347, #0000 25%),
             radial-gradient(circle at 20% 85%, #5c829b38, #0000 30%),
             linear-gradient(145deg, #99a7ab 0%, #829197 50%, #6f7f86 100%);
  --surface: #f8fcfa;
  --card: #f8fcfa;
  --surface-2: #edf3f0;
  --surface-3: #e2ede8;
  --ink: #162621;
  --ink-2: #2f3f39;
  /* #66756f measured 4.4:1 on the 0.40 inner glass; one step darker clears 4.5 */
  --muted: #5a6963;
  --muted-2: #50645d;
  --line: #1430281f;
  --line-2: #14302833;
  /* accent: the Home's "gold" is mint */
  --gold: #5fc4a3;
  --gold-2: #276f5a;
  --gold-soft: #5fc4a330;
  --gold-line: #5fc4a366;
  --accent: #18312a;
  --accent-hover: #17312a;
  --leaf: #5fc4a3; --leaf-soft: #5fc4a333; --leaf-line: #5fc4a366;
  --amber: #d89b58; --amber-soft: #d89b5829; --amber-line: #d89b5866;
  --rose: #cf6d58; --rose-2: #994f43; --rose-soft: #cf6d582b; --rose-line: #cf6d5866;
  --blue: #8da8be; --blue-soft: #8da8be40;
  /* "navy" is the Home's deep green: active nav, profile, dark panels */
  --navy: #18312a; --navy-2: #17312a; --navy-item: #1f3b33; --navy-line: #ffffff12;
  --navy-text: #f4faf7; --navy-muted: #a6bbb4;
  --shadow-soft: 0 9px 34px #49422b0d, inset 0 1px #ffffffd6;
  --shadow-lift: 0 14px 32px #102a2333;
  --shadow-gold: 0 10px 24px #1231292e;
  --radius-lg: 38px; --radius: 24px; --radius-sm: 14px;
  --sidebar: 190px;
  --panel: #f8fcfac2;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: #718087;
  background-image: var(--bg-grad);
  background-attachment: fixed;
  padding: max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-top)) max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-right))
           max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-bottom)) max(clamp(18px, 4.2vw, 72px), env(safe-area-inset-left));
}
/* Home hides the shell and paints its own canvas; keep that intact. */
body.kh-theme.owner-home { padding: 0; background: #718087; }
body.kh-theme.auth-locked { padding: 0; }

/* The frame: the legacy grid becomes the Home's glass card. */
body.kh-theme > .app-shell {
  width: min(1480px, 100%);
  margin: auto;
  overflow: hidden;
  border: 1px solid #ffffff8c;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 87% 13%, #5fc4a340, #0000 24%),
              radial-gradient(circle at 58% 82%, #8da8be33, #0000 33%),
              linear-gradient(135deg, #f8fbf9fa, #e2ede8f7);
  box-shadow: 0 34px 70px #12282347, inset 0 1px #ffffffe6;
  min-height: calc(100vh - 2 * clamp(18px, 4.2vw, 72px));
}
body.kh-theme.owner-home > .app-shell { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: 100vh; }

/* headings: Home uses one sans, 400 weight, tight tracking — no serif */
body.kh-theme #viewTitle, body.kh-theme .brand-title, body.kh-theme .greet-title, body.kh-theme .hero-head,
body.kh-theme .agent-greeting, body.kh-theme .metric-value, body.kh-theme .panel h1, body.kh-theme .panel h2,
body.kh-theme .onboarding-card h2, body.kh-theme .modal-head h1, body.kh-theme .modal-head h2,
body.kh-theme .tasks-head h2, body.kh-theme .growth-hero-state > strong, body.kh-theme .growth-report-metrics strong,
body.kh-theme .owner-os.unavailable h2, body.kh-theme .owner-os-hero h2, body.kh-theme .owner-os-kpis strong {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: -0.04em;
}
body.kh-theme :is(#app, .topbar, .sidebar, .modal-card, .login-card, .onboarding-card) :is(h1, h2, h3, h4, strong, .metric-value, .hero-head, .greet-title) {
  font-family: inherit;
}
body.kh-theme h1 { font-weight: 400; letter-spacing: -0.04em; }
body.kh-theme h2 { font-size: 22px; font-weight: 400; letter-spacing: -0.04em; margin-bottom: 10px; }
body.kh-theme h3 { color: var(--muted); font-weight: 500; letter-spacing: 0; }
body.kh-theme .eyebrow { color: #77756e; font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 8px; }
body.kh-theme .muted { color: var(--muted); }

/* sidebar: sage, light, tiled nav; active = deep green */
body.kh-theme .sidebar {
  position: sticky; top: 0; height: 100%; min-height: calc(100vh - 2 * clamp(18px, 4.2vw, 72px));
  margin: 0; padding: 22px 14px 15px; gap: 12px;
  border-radius: 0; border-right: 1px solid var(--line);
  background: #e8f1edb8; box-shadow: none; color: var(--ink);
}
body.kh-theme .brand { padding: 0 7px 19px; gap: 9px; }
body.kh-theme .brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 50%; background: transparent; color: var(--ink);
  border: 1px solid #20201c47; box-shadow: none; font-family: inherit; font-weight: 500; font-size: 14px; }
body.kh-theme .brand-title { color: var(--ink); font-weight: 500; font-size: 15px; letter-spacing: -0.03em; }
body.kh-theme .brand-subtitle { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; }
body.kh-theme .nav-list { gap: 5px; }
body.kh-theme .nav-item { min-height: 44px; padding: 10px 11px; border-radius: 13px; border: 1px solid var(--line);
  background: #ffffff47; color: #68665f; font-size: 12px; font-weight: 500; }
body.kh-theme .nav-item i[data-lucide] { color: #68665f; }
body.kh-theme .nav-item:hover { background: #ffffff80; color: var(--ink); }
body.kh-theme .nav-item:hover i[data-lucide] { color: var(--ink); }
body.kh-theme .nav-item.active { background: #18312a; border-color: #18312a; color: #fff; font-weight: 500; box-shadow: 0 10px 24px #1231292e; }
body.kh-theme .nav-item.active i[data-lucide] { color: #fff; }
body.kh-theme .nav-item:focus-visible { outline: 2px solid #277d60; outline-offset: 3px; }
body.kh-theme .nav-label { color: #89877e; letter-spacing: 0.13em; text-transform: uppercase; font-size: 9px; font-weight: 600; margin: 10px 8px 4px; }
body.kh-theme .nav-child { min-height: 40px; font-size: 11px; }
body.kh-theme .ghost-button { min-height: 44px; border-radius: 13px; border: 1px solid var(--line); background: #ffffff73; color: #77756e; font-weight: 500; }
body.kh-theme .ghost-button:hover { background: #ffffffb0; color: var(--ink); }
body.kh-theme .ghost-button i[data-lucide], body.kh-theme .ghost-button:hover i[data-lucide] { color: inherit; }

/* topbar: transparent, one-line brand title, round controls */
body.kh-theme .workspace { padding: 0 22px 32px; }
body.kh-theme .topbar { margin: 0 -22px 14px; padding: 12px 22px; min-height: 58px;
  background: #f8fbf9; border-bottom: 1px solid var(--line); }
body.kh-theme #viewTitle { font-size: 20px; }
body.kh-theme .search-shell { border: 1px solid var(--line); background: #ffffff73; border-radius: 13px; color: #77756e; }
body.kh-theme .search-shell input { color: var(--ink); }
body.kh-theme .profile-pill { border-radius: 999px; background: #ffffff9e; border: 1px solid #2626220f; min-height: 38px; padding: 0 10px 0 5px; }
body.kh-theme .profile-pill .avatar { width: 28px; height: 28px; border-radius: 50%; background: #18312a; color: #fff; font-size: 12px; }
body.kh-theme .nav-toggle { width: 38px; height: 38px; flex-basis: 38px; border-radius: 50%; border: 1px solid #2626220f; background: #ffffff9e; box-shadow: none; }

/* buttons: primary = mint pill, others = white glass pills */
body.kh-theme .primary-button { background: var(--gold); color: #343026; font-weight: 500; box-shadow: none; }
body.kh-theme .primary-button:hover { background: #4fb894; box-shadow: 0 8px 20px #5fc4a33d; }
body.kh-theme .primary-button i[data-lucide] { color: #343026; }
body.kh-theme .secondary-button, body.kh-theme .small-button, body.kh-theme .chip-button {
  background: #ffffff9e; border: 1px solid #2626220f; color: #5f5e58; font-weight: 500; font-size: 13px; }
body.kh-theme .secondary-button:hover, body.kh-theme .small-button:hover, body.kh-theme .chip-button:hover { background: #fff; color: var(--ink); transform: translate(1px, -1px); }
body.kh-theme .chip-button.active { background: #18312a; border-color: #18312a; color: #fff; }
body.kh-theme :is(button, a, [role="button"], input, select, textarea):focus-visible { outline: 2px solid #277d60; outline-offset: 3px; }
body.kh-theme select, body.kh-theme input:not([type="checkbox"]):not([type="radio"]), body.kh-theme textarea {
  border-radius: 13px; border: 1px solid var(--line); background: #ffffff8c; color: var(--ink); }
body.kh-theme select:focus, body.kh-theme input:focus, body.kh-theme textarea:focus { background: #fff; box-shadow: 0 0 0 3px #5fc4a33d; }

/* panels: the Home card */
body.kh-theme .panel { padding: 22px 24px; border: 1px solid #ffffffb8; border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 9px 34px #49422b0d, inset 0 1px #ffffffd6; position: relative; overflow: hidden; }
body.kh-theme .panel-header { margin-bottom: 14px; gap: 14px; }
body.kh-theme .panel-header .muted, body.kh-theme .panel-header p { font-size: 12px; color: #696861; }
body.kh-theme .badge { background: #efeade; color: #706e66; font-size: 10px; font-weight: 500; min-height: 22px; padding: 3px 9px; }
body.kh-theme .badge.gold { background: #5fc4a347; color: #226b54; }
body.kh-theme .badge.rose { background: #cf6d582e; color: #994f43; }
body.kh-theme .badge.leaf { background: #5fc4a333; color: #276f5a; }
body.kh-theme .badge.amber { background: #d89b5829; color: #8a611f; }

/* rows: the Home action row */
body.kh-theme .auto-card, body.kh-theme .job-row, body.kh-theme .folder-row {
  border: 0; border-top: 1px solid #2b2b2712; border-radius: 0; background: transparent; padding: 12px; transition: background .2s, border-radius .2s; }
body.kh-theme .list > :is(.auto-card, .job-row, .folder-row):first-child { border-top: 0; }
body.kh-theme :is(.auto-card, .job-row, .folder-row):hover { background: #ffffff80; border-radius: 14px; transform: none; box-shadow: none; }
body.kh-theme .job-row { border-left: 0; }
body.kh-theme .folder-icon { width: 32px; height: 32px; border-radius: 50%; background: #e9e7df; color: #5d5c56; }
body.kh-theme .row-title { font-size: 13px; font-weight: 500; }
body.kh-theme .row-meta { font-size: 11px; color: #7d7b74; }
body.kh-theme .metric-value { font-size: clamp(30px, 3vw, 46px); font-weight: 400; letter-spacing: -0.06em; line-height: 1.05; }
body.kh-theme .metric-label { color: #74736d; font-size: 11px; }
body.kh-theme .empty-state { color: #66756f; font-size: 12px; line-height: 1.5; background: transparent; }
body.kh-theme .search-status { border-color: #5fc4a366; background: #5fc4a330; color: #276f5a; border-radius: 13px; font-size: 12px; }
body.kh-theme .search-status.danger { border-color: #cf6d5866; background: #cf6d582b; color: #994f43; }
body.kh-theme .table-wrap { border-radius: 16px; border: 1px solid #ffffffb8; overflow: auto; }
body.kh-theme table th { color: #86847c; letter-spacing: 0.08em; text-transform: uppercase; background: #e5e1d68f; font-size: 9px; font-weight: 600; padding: 9px 13px; }
body.kh-theme table td { color: #67655f; border-top: 1px solid #2b2b2712; padding: 11px 13px; font-size: 12px; }
body.kh-theme .mini-ava, body.kh-theme .avatar { background: #18312a; color: #fff; }

/* dark surfaces: the Home's deep-green panel, not navy */
/* The Home uses dark green for ONE accent card. The owner views were built
   on a dark .owner-os container, so themed dark they became whole pages of
   green slab -- "disgusting" was the owner's word. Only the staff task
   carousel and the concierge header stay dark, as the Home's accents do;
   everything else is the pane. */
body.kh-theme .tasks-carousel, body.kh-theme .concierge-pop-head {
  background: #17312a; border-color: #ffffff12; color: #f4faf7; box-shadow: 0 14px 32px #102a2333; }
body.kh-theme .tasks-carousel :is(h2, h3, strong) { color: #fff; }
body.kh-theme .tasks-carousel :is(.muted, p, small) { color: #a6bbb4; }
body.kh-theme :is(.owner-os, .panel.dark, .growth-hero, .growth-report, .hero-card, .owner-canonical-view > section) {
  background: var(--panel); border: 1px solid #ffffffb8; border-radius: var(--radius); color: var(--ink);
  box-shadow: 0 9px 34px #49422b0d, inset 0 1px #ffffffd6; }
body.kh-theme .owner-os { padding: 22px 24px; gap: 14px; }
/* every inner surface of owner-os was a dark well (rgba(0,0,0,.1-.23)) with white-alpha edges: now the 0.40 inner card */
body.kh-theme :is(.owner-os-panel, .owner-os-action, .owner-os-pain-row, .owner-os-customer, .owner-os-simple-row, .owner-os-membership,
  .owner-os-work-grid > section, .owner-os-work-lane, .owner-os-report-work article, .owner-os-campaign, .owner-os-kpis > span,
  .owner-os-sub-kpis > span, .owner-os-history > div > span, .owner-os-work-grid article, .owner-os-provenance span, .growth-loop-step,
  .growth-governance-lane, .hero-pill.ghost) {
  background: rgba(255, 255, 255, 0.40); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px #ffffffa6; color: var(--ink); }
body.kh-theme :is(.owner-os-panel, .owner-os-work-grid > section, .owner-os-work-lane, .owner-os-campaign) { border-radius: 18px; }
body.kh-theme :is(.owner-os-action, .owner-os-pain-row, .owner-os-customer, .owner-os-simple-row, .owner-os-membership, .owner-os-report-work article) { border-radius: 14px; }
/* text: every hard-coded light tone becomes ink or the 4.5:1 muted */
body.kh-theme :is(.owner-os, .growth-hero, .growth-report, .hero-card, .panel.dark) :is(h1, h2, h3, h4, strong, summary, .hero-head, .owner-os-kpis strong, .owner-os-sub-kpis strong,
  .owner-os-work-grid header strong, .owner-os-work-grid article strong, .owner-os-report-work article > strong, .owner-os-report-work article > span,
  .owner-os-campaign strong, .owner-os-pain-row strong, .owner-os-history > div strong, .owner-os-provenance strong, .owner-os-work-lane > h4, .owner-os-inline-control summary, .owner-os-history summary) { color: var(--ink); }
body.kh-theme :is(.owner-os, .growth-hero, .growth-report, .hero-card, .panel.dark) :is(p, small, li, td, label, label > span, .muted, .owner-os-boundary, .owner-os-marketing-empty, .owner-os-kpis small,
  .owner-os-action small, .owner-os-pain-row small, .owner-os-campaign p, .owner-os-campaign header small, .owner-os-customer > small, .owner-os-membership small,
  .owner-os-work-grid header small, .owner-os-work-grid p, .owner-os-report-work article > small, .owner-os-history > div p, .owner-os-sub-kpis small,
  .owner-os-simple-row > small, .owner-os-inline-control > p, .owner-os-membership-controls details, .growth-boundary, .growth-learning, .hero-sub, .empty-state) { color: #5a6963; }
body.kh-theme .owner-os .eyebrow, body.kh-theme .owner-os-panel .eyebrow, body.kh-theme .growth-report .eyebrow { color: #276f5a; }
body.kh-theme :is(.owner-os-coverage, .owner-os-customer-facts span) { background: rgba(95, 196, 163, 0.14); border: 0; color: #226b54; }
body.kh-theme .owner-os-coverage.warning { background: rgba(216, 155, 88, 0.2); color: #8a611f; }
body.kh-theme .owner-os-coverage.healthy svg { color: #276f5a; }
body.kh-theme .owner-os-membership .owner-os-membership-warning { color: #8a611f; }
body.kh-theme :is(.owner-os-hero .small-button, .owner-os.unavailable .small-button, .owner-os .small-button, .hero-pill.ghost) { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(38, 38, 34, 0.06); color: #5f5e58; }
body.kh-theme .owner-os .small-button.danger { color: #994f43; background: rgba(207, 109, 88, 0.16); border-color: rgba(207, 109, 88, 0.3); }
body.kh-theme :is(.owner-os select, .owner-os input, .owner-os-pain-form select, .owner-os-inline-control select, .owner-os-membership-controls input) {
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(20, 48, 40, 0.14); color: var(--ink); }
body.kh-theme :is(.owner-os-pain-form, .owner-os-inline-control, .owner-os-history, .owner-os-membership-controls, .owner-os-work-grid > section > header) { border-color: rgba(255, 255, 255, 0.55); }
body.kh-theme :is(.owner-os-pain-row > span, .owner-os-work-grid > section > header > span, .growth-loop-step span) { background: var(--gold); color: #17372d; }
body.kh-theme .growth-hero h2, body.kh-theme .growth-report h2, body.kh-theme .growth-hero-copy > p:last-child, body.kh-theme .growth-hero-state > strong, body.kh-theme .growth-hero-state > small { color: var(--ink); }
body.kh-theme .growth-hero-copy > p:last-child, body.kh-theme .growth-hero-state > small { color: #5a6963; }
body.kh-theme .lead-alert-panel { border-color: #ffffffb8; box-shadow: 0 9px 34px #49422b0d, inset 0 1px #ffffffd6; }
body.kh-theme .lead-alert-card { background: transparent; }
body.kh-theme .lead-readiness { border-left-color: var(--gold); background: #ffffff73; }
body.kh-theme .concierge-fab { background: #18312a; color: #fff; box-shadow: 0 10px 24px #1231292e; }
body.kh-theme .concierge-pop { border-radius: var(--radius); border: 1px solid #ffffffb8; box-shadow: 0 34px 70px #12282347; }

/* ---- Material: the Home's liquid glass, applied to every inner surface ----
   Measured on the Home board, not assumed. There is NO backdrop blur anywhere;
   the glass is translucent white over the frame's glowing gradient, edged with
   a WHITE hairline (not the dark --line) and lit by a 1px inner highlight:
     card    rgba(255,255,255,.40)  1px rgba(255,255,255,.75)  r22  inset 0 1px #ffffffa6
     strip   rgba(255,255,255,.44)  1px rgba(255,255,255,.75)  r21
     control rgba(255,255,255,.62)  1px rgba(38,38,34,.06)     r999/50%
     row     transparent            top 1px rgba(255,255,255,.08)
     tag     rgba(95,196,163,.28)   no border                  r999
     topbar  transparent, no border, scrolls with the page
   The other views had 43 opaque inner cards and 43 dark-hairline surfaces,
   which is exactly what reads as "painted" next to the Home. */
body.kh-theme {
  --surface: rgba(255, 255, 255, 0.40);
  --surface-2: rgba(255, 255, 255, 0.45);
  --surface-3: rgba(255, 255, 255, 0.62);
  --card: rgba(255, 255, 255, 0.40);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-light: inset 0 1px #ffffffa6;
}
/* Home's top bar is transparent and scrolls away; a solid sticky strip is the
   single biggest "painted" tell on the other views. */
body.kh-theme .topbar { position: static; background: transparent; border-bottom: 0; padding: 28px 22px 10px; margin: 0 -22px 6px; min-height: 0; }
body.kh-theme #viewTitle { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.05em; line-height: 1; }
body.kh-theme .workspace { padding: 0 22px 32px; }
body.kh-theme .grid { gap: 12px; }
/* Panels keep the Home's PANEL recipe (#f8fcfac2 fill, #ffffffb8 hairline,
   inset light) set above; the 0.40 recipe below is for the cards INSIDE them,
   which is how the Home layers its glass: a denser outer pane, airier inner
   panes. */

/* inner cards: every light surface that was opaque, now the score-card recipe */
body.kh-theme :is(.summary-box, .moment-row, .community-row, .growth-loop, .growth-empty, .growth-section, .metric-line, .metric,
  .folder-preview, .library-client-row, .library-shelf, .helper-output, .care-flag, .inline-form, .form-grid, .table-wrap,
  .search-status, .lead-readiness, .membership-request-card, .crm-staff-invite, .recent-card, .onboarding-card, .concierge-intro,
  .hero-pill.ghost, .job-call):not(.panel) {
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  box-shadow: var(--glass-light);
  color: var(--ink);
}
body.kh-theme :is(.moment-row, .community-row, .library-client-row, .library-shelf, .care-flag, .metric-line):not(.panel) { border-radius: 18px; }
body.kh-theme .folder-preview { border-radius: 18px; background: rgba(255, 255, 255, 0.44); }
body.kh-theme .search-status { background: rgba(95, 196, 163, 0.18); border-color: rgba(255, 255, 255, 0.6); color: #276f5a; }
body.kh-theme .search-status.danger { background: rgba(207, 109, 88, 0.16); color: #994f43; }
body.kh-theme .lead-readiness { border-left: 1px solid var(--glass-line); }
body.kh-theme .empty-state { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.6); border-radius: 18px; padding: 16px; }

/* controls: white glass pills and fields, dark hairline only on inputs (as the Home's search) */
body.kh-theme select, body.kh-theme input:not([type="checkbox"]):not([type="radio"]), body.kh-theme textarea {
  background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(20, 48, 40, 0.12); }
body.kh-theme .secondary-button, body.kh-theme .small-button, body.kh-theme .chip-button, body.kh-theme .ghost-button, body.kh-theme .nav-toggle, body.kh-theme .profile-pill {
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(38, 38, 34, 0.06); box-shadow: none; }
body.kh-theme .search-shell { background: rgba(255, 255, 255, 0.45); box-shadow: none; }

/* tags: mint glass, no border, as the Home's status tags */
body.kh-theme .badge { border: 0; background: rgba(95, 196, 163, 0.14); color: #226b54; }
body.kh-theme .badge.gold, body.kh-theme .badge.leaf { background: rgba(95, 196, 163, 0.28); color: #226b54; }
body.kh-theme .badge.rose, body.kh-theme .badge.coral { background: rgba(207, 109, 88, 0.18); color: #994f43; }
body.kh-theme .badge.amber { background: rgba(216, 155, 88, 0.2); color: #8a611f; }
body.kh-theme .badge.dark { background: #18312a; color: #fff; }

/* rows stay transparent with the Home's white hairline between them */
body.kh-theme :is(.auto-card, .job-row, .folder-row) { border-top-color: rgba(255, 255, 255, 0.35); }

/* tables sit inside a glass wrap; header band is the Home's soft sand */
body.kh-theme .table-wrap { padding: 0; overflow: auto; }
body.kh-theme table th { background: rgba(255, 255, 255, 0.5); }
body.kh-theme table td { border-top-color: rgba(255, 255, 255, 0.55); }

/* ---- Login gate: the first surface anyone sees, in the same glass ----
   Measured live at rgba(255,255,255,.96) with the dark hairline and an 18px
   corner: a painted card on the glass canvas. It takes the Home's PANE tier
   (the denser outer glass) so the form stays legible over the gradient. */
body.kh-theme .login-card {
  background: var(--panel);
  border: 1px solid #ffffffb8;
  border-radius: var(--radius);
  box-shadow: 0 34px 70px #12282347, inset 0 1px #ffffffd6;
}
body.kh-theme .login-card input { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(20, 48, 40, 0.12); border-radius: 13px; }
body.kh-theme .login-card input:focus { background: #fff; box-shadow: 0 0 0 3px #5fc4a33d; }
body.kh-theme .login-card :is(h1, h2) { font-family: inherit; font-weight: 400; letter-spacing: -0.04em; }
body.kh-theme .login-card .primary-button { background: var(--gold); color: #343026; }

/* ---- Floating surfaces: dense glass, never the 0.40 inner tier ----
   The inner-card recipe re-pointed --surface to 40% white. Three surfaces
   FLOAT over other content and inherited that: the dispatch modal (over a
   dark scrim -> muddy grey), the onboarding card and the concierge pop-up
   (over a busy page -> text fighting the page beneath). Anything that floats
   gets the frame's density instead, so it reads as the same material lifted
   off the board. */
body.kh-theme .modal-card,
body.kh-theme .onboarding-card,
body.kh-theme .concierge-pop {
  background: rgba(248, 252, 250, 0.95);
  border: 1px solid #ffffffb8;
  border-radius: var(--radius);
  box-shadow: 0 34px 70px #12282347, inset 0 1px #ffffffd6;
}
body.kh-theme .modal-scrim { background: rgba(20, 48, 40, 0.42); backdrop-filter: blur(3px); }
body.kh-theme .concierge-composer { background: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.75); }
body.kh-theme .concierge-pop-head { background: #18312a; }
body.kh-theme :is(.modal-card, .onboarding-card, .concierge-pop) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(20, 48, 40, 0.14); }
body.kh-theme .dispatch-state { border: 1px solid rgba(95, 196, 163, 0.45); background: rgba(95, 196, 163, 0.16); border-radius: 18px; }
body.kh-theme .dispatch-state.warning { border-color: rgba(216, 155, 88, 0.5); background: rgba(216, 155, 88, 0.16); }
body.kh-theme .dispatch-state.success { border-color: rgba(95, 196, 163, 0.5); background: rgba(95, 196, 163, 0.22); }
body.kh-theme .dispatch-state :is(p, small, span) { color: #2f4a42; }
body.kh-theme .dispatch-state.danger, body.kh-theme .dispatch-unlock-status.danger { color: #994f43; }

/* ---- QA as the plumbing owner (legacy views), measured ----
   Contrast pixel-sampled on the real render; tap targets at 375px. */
body.kh-theme .row-meta { color: #5a6963; }     /* #7d7b74 measured 4.0-4.2:1 on the glass */
body.kh-theme .eyebrow { color: #5f6e68; }
/* Dark panes: every secondary run reads light. One rule, kept whole — the
   list lives inside :is() and must never be split on its commas. */
body.kh-theme :is(.tasks-carousel) :is(.empty-state, .owner-os-boundary, .owner-os-marketing-empty, .owner-os-kpis small, .owner-os-action small, .owner-os-pain-row small, .owner-os-campaign p, .growth-boundary, .growth-learning, .muted, p, small, li, td, label, .row-meta) { color: #b7c8c1; }

@media (max-width: 820px) {
  /* 44px thumbs everywhere a thumb goes */
  body.kh-theme :is(.secondary-button, .small-button, .chip-button, .ghost-button, .primary-button, .topbar-actions button,
    .lead-operational-actions .small-button, .concierge-pop .suggested button, .helper-run, .nav-child) { min-height: 44px; }
  body.kh-theme :is(.nav-toggle, .concierge-pop-close, .concierge-send, .concierge-composer button, .modal-head .icon-only, .tasks-dot) { min-width: 44px; min-height: 44px; }
  body.kh-theme :is(.search-shell, .search-shell input, .concierge-composer input, .concierge-composer textarea,
    #app input:not([type="checkbox"]):not([type="radio"]), #app select) { min-height: 44px; }
  body.kh-theme .job-call { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
}

/* On a phone the panel header stacks; a lone badge or icon must not stretch
   into a full-width stripe. It sits at the start, at its own width. */
@media (max-width: 820px) {
  body.kh-theme .panel-header > .badge, body.kh-theme .panel-header > .small-button, body.kh-theme .panel-header > .helper-run { align-self: flex-start; justify-self: start; width: auto; max-width: max-content; }
}
/* motion: panels rise in, staggered, exactly as the Home cards do */
@media (prefers-reduced-motion: no-preference) {
  body.kh-theme .panel { animation: .55s cubic-bezier(.2,.8,.2,1) both rise; }
  body.kh-theme .panel:nth-child(2) { animation-delay: 50ms; }
  body.kh-theme .panel:nth-child(3) { animation-delay: .1s; }
  body.kh-theme .panel:nth-child(n+4) { animation-delay: .15s; }
}
@media (prefers-reduced-motion: reduce) {
  body.kh-theme *, body.kh-theme *::before, body.kh-theme *::after { animation: none !important; transition: none !important; }
}

/* phone: the drawer keeps its behaviour, in the Home's materials */
@media (max-width: 820px) {
  body.kh-theme { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  body.kh-theme > .app-shell { border-radius: 26px; min-height: calc(100vh - 24px); }
  body.kh-theme .sidebar { position: fixed; height: 100%; min-height: 0; border-right: 0; border-radius: 0 22px 22px 0;
    background: #e8f1ed; box-shadow: 0 24px 64px #10201b66; }
  body.kh-theme .nav-scrim { background: #14302866; }
  body.kh-theme .workspace { padding: 14px; }
  body.kh-theme .topbar { margin: -14px -14px 14px; padding: 10px 14px; min-height: 50px; }
  body.kh-theme .topbar-actions button { min-height: 44px; }
}
@media (max-width: 560px) {
  body.kh-theme { padding: max(16px, env(safe-area-inset-top)) env(safe-area-inset-right) max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left); }
  body.kh-theme > .app-shell { border: 0; border-radius: 0; }
  body.kh-theme .workspace { padding: 11px; }
  body.kh-theme .topbar { margin: -11px -11px 11px; padding: 10px 11px; }
  body.kh-theme .panel { padding: 18px 16px; }
  body.kh-theme h2 { font-size: 19px; }
}

/* =====================================================================
   Owner command center (Operations) — the last dark slab, now the same
   glass as everything else. Pane tier for the block, inner tier for KPI
   tiles and the two lanes, mint for icons and links, dark-green ink.
   Base rules live around line 3182; these re-ink them for the theme.
   ===================================================================== */
body.kh-theme .provider-command-center, body.kh-theme .panel.dark.provider-command-center {
  color: var(--ink); background: var(--panel); border: 1px solid #ffffffb8; border-radius: var(--radius);
  box-shadow: 0 9px 34px #49422b0d, inset 0 1px #ffffffd6; gap: 14px; padding: clamp(16px, 2.4vw, 24px); }
body.kh-theme .provider-command-hero h2 { font-family: inherit; font-size: 22px; font-weight: 400; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); margin: 6px 0 8px; }
body.kh-theme .provider-command-hero p { color: #5a6963; font-size: 13px; line-height: 1.55; }
body.kh-theme .provider-kicker { color: #5f6e68; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
body.kh-theme .provider-kicker svg, body.kh-theme .provider-kicker i[data-lucide] { color: #277d60; }
body.kh-theme .provider-refresh { color: var(--ink); background: rgba(255,255,255,.62); border: 1px solid rgba(38,38,34,.06); border-radius: 999px; }
body.kh-theme .provider-refresh:hover { color: var(--ink); background: #5fc4a3; border-color: transparent; }
body.kh-theme .provider-truth-strip span { color: #3f4f49; background: rgba(255,255,255,.62); border: 1px solid rgba(38,38,34,.06); font-size: 11px; font-weight: 500; }
body.kh-theme .provider-truth-strip svg { color: #277d60; }
body.kh-theme .provider-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.kh-theme .provider-kpi { background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); border-radius: 14px; box-shadow: inset 0 1px #ffffffa6; padding: 12px; }
body.kh-theme .provider-kpi > span { background: #5fc4a32e; color: #1f5344; border-radius: 10px; }
body.kh-theme .provider-kpi strong { font-family: inherit; font-size: 22px; font-weight: 400; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); }
body.kh-theme .provider-kpi small { color: #5a6963; font-size: 11px; }
body.kh-theme .provider-join-notice { color: #4f5f59; font-size: 12px; }
body.kh-theme .provider-join-notice svg { color: #277d60; }
body.kh-theme .provider-lane { background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); border-radius: 16px; box-shadow: inset 0 1px #ffffffa6; }
body.kh-theme .provider-lane > header { border-bottom: 1px solid rgba(20,48,40,.08); }
body.kh-theme .provider-lane h3 { color: var(--ink); font-size: 14px; font-weight: 500; }
body.kh-theme .provider-lane header p { color: #5a6963; font-size: 11px; }
body.kh-theme .provider-logo { background: #8da8be; color: #fff; box-shadow: none; }
body.kh-theme .provider-logo.jobber { background: #5fc4a3; color: var(--ink); }
body.kh-theme .provider-lane-meta { color: #5a6963; font-size: 11px; border-bottom: 1px solid rgba(20,48,40,.08); }
body.kh-theme .provider-lane-meta strong { color: var(--ink); }
body.kh-theme .provider-section { border-bottom: 1px solid rgba(20,48,40,.08); }
body.kh-theme .provider-section-title h4 { color: var(--ink); font-size: 13px; font-weight: 500; }
body.kh-theme .provider-section-title span { color: #5a6963; font-size: 11px; }
body.kh-theme .provider-record { border-top: 1px solid rgba(20,48,40,.08); }
body.kh-theme .provider-record-icon { background: #5fc4a32e; color: #1f5344; }
body.kh-theme .provider-record .row-title { color: var(--ink); font-size: 13px; }
body.kh-theme .provider-record .row-meta { color: #5a6963; font-size: 11px; }
body.kh-theme .provider-record-link { color: #277d60; font-size: 11px; }
body.kh-theme .provider-stream { border-bottom: 1px solid rgba(20,48,40,.08); }
body.kh-theme .provider-stream summary { color: var(--ink); font-size: 13px; font-weight: 500; }
body.kh-theme .provider-stream summary svg { color: #277d60; }
body.kh-theme .provider-stream summary strong { color: var(--ink); background: rgba(24,49,42,.08); font-size: 11px; }
body.kh-theme .provider-command-center .empty-state { color: #4f5f59; background: rgba(255,255,255,.34); border-color: rgba(255,255,255,.7); }
body.kh-theme .provider-scope-note { color: #3f4f49; background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); font-size: 12px; border-radius: 14px; }
body.kh-theme .provider-scope-note strong { color: var(--ink); }
body.kh-theme .provider-scope-note > svg { color: #277d60; }
body.kh-theme .provider-scope-note.warning { background: #f0ac2826; border-color: #f0ac2866; color: #5a4310; }
body.kh-theme .provider-scope-note.warning > svg, body.kh-theme .provider-scope-note.warning strong { color: #6b4d0a; }
body.kh-theme .provider-reconnect-button { background: #5fc4a3; color: var(--ink); border-color: transparent; border-radius: 999px; }
body.kh-theme .provider-authority-footer span { color: #5a6963; background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.75); font-size: 11px; border-radius: 12px; }
body.kh-theme .provider-authority-footer strong { color: var(--ink); }
@media (max-width: 900px) {
  body.kh-theme .provider-lanes { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body.kh-theme .provider-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.kh-theme .provider-authority-footer { grid-template-columns: 1fr; }
  body.kh-theme .provider-stream summary, body.kh-theme .provider-refresh, body.kh-theme .provider-reconnect-button { min-height: 44px; }
  /* "Open in Jobber" was a 17px text link: a thumb needs 44 */
  body.kh-theme .provider-record-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; margin: -6px 0 0 -6px; }
}

/* ===== Nav simplify (v30): short daily path + "More" disclosure ===== */
.nav-more { display: grid; gap: 5px; margin-top: 6px; }
.nav-more-summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 11px; border-radius: 13px; cursor: pointer; list-style: none; user-select: none; }
.nav-more-summary::-webkit-details-marker { display: none; }
.nav-more-summary .nav-more-chevron { margin-left: auto; transition: transform 0.2s ease; }
.nav-more[open] > .nav-more-summary .nav-more-chevron { transform: rotate(180deg); }
.nav-more-list { display: grid; gap: 5px; padding-left: 8px; }
.nav-more-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
body.kh-theme .nav-more-summary { border: 1px dashed var(--line); background: transparent; color: #68665f; font-size: 12px; font-weight: 500; }
body.kh-theme .nav-more-summary:hover { background: #ffffff80; color: var(--ink); }
body.kh-theme .nav-more-summary:focus-visible { outline: 2px solid #277d60; outline-offset: 3px; }
body.kh-theme .nav-more-summary i[data-lucide] { color: inherit; }
body.kh-theme .nav-more[open] > .nav-more-summary { border-style: solid; background: #ffffff5c; color: var(--ink); }
body.kh-theme .nav-more-list .nav-item { min-height: 40px; font-size: 11.5px; }
body.kh-theme .nav-list { overflow-y: auto; min-height: 0; }

/* Money: Revenue and Bills as in-page tabs */
.money-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; }
.money-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
body.kh-theme .money-tabs { background: #ffffff66; border: 1px solid #ffffffb8; box-shadow: inset 0 1px #ffffffd6; }
body.kh-theme .money-tab { background: transparent; color: #5a6963; font-weight: 500; }
body.kh-theme .money-tab:hover { color: var(--ink); background: #ffffff80; }
body.kh-theme .money-tab.active { background: #18312a; color: #fff; }
body.kh-theme .money-tab:focus-visible { outline: 2px solid #277d60; outline-offset: 2px; }
@media (max-width: 820px) { .money-tab { min-height: 44px; } }

/* Onboarding contrast: overrides the floating-surface glass and the 0.40
   inner-card recipe above (same specificity, later wins) so the guide card
   reads as the top layer. kh-theme remaps --gold to mint, so the tour carries
   its own true gold. */
body.kh-theme .onboarding-layer { z-index: 1000; --tour-gold: #f0ac28; --tour-gold-2: #c98f14; }
body.kh-theme .onboarding-layer .onboarding-scrim { background: rgba(12, 30, 25, 0.62); backdrop-filter: blur(2px); }
body.kh-theme .onboarding-layer .onboarding-card:not(.panel) {
  background: #fbfdfc;
  border: 2px solid var(--tour-gold);
  border-radius: 20px;
  padding: 22px;
  color: var(--ink);
  box-shadow: 0 0 0 6px rgba(240, 172, 40, 0.28), 0 40px 80px rgba(8, 22, 18, 0.5);
}
body.kh-theme .onboarding-layer .onboarding-card h2 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
body.kh-theme .onboarding-layer .onboarding-card p { color: #2f4a42; font-size: 14px; line-height: 1.55; }
body.kh-theme .onboarding-layer .onboarding-kicker { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--tour-gold); color: #1b1b1d; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 10px; }
body.kh-theme .onboarding-layer .onboarding-progress { height: 8px; background: #18312a1f; margin-bottom: 16px; }
body.kh-theme .onboarding-layer .onboarding-progress span { background: linear-gradient(90deg, var(--tour-gold-2), var(--tour-gold)); }
body.kh-theme .onboarding-target { position: relative; z-index: 2; background: #f0ac28 !important; border-color: #f0ac28 !important; color: #1b1b1d !important;
  outline: 3px solid #f0ac28; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(240, 172, 40, 0.3) !important; }
body.kh-theme .onboarding-target i[data-lucide] { color: #1b1b1d !important; }
/* keep the highlighted sidebar item above the scrim on desktop */
@media (min-width: 821px) {
  body.kh-theme:has(.onboarding-layer) .app-shell > .sidebar { z-index: 1001; }
}