/* Import the Exo font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');


:root {
  --bg-start: #f0f4ff;
  --bg-end: #f6f9ff;
  --text-main: #1b2430;
  --text-subtle: #596579;

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-700: #334155;
  --gray-900: #0f172a;

  --white: #ffffff;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.05);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.18);

  --font-display: 'Exo', sans-serif;
  --font-body:    'Exo', sans-serif;
  
  --transition: 140ms ease;
}


body {
  /* background: linear-gradient(160deg, var(--bg-start), var(--bg-end)); */
  /* color: var(--text-main); */
  /* font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif; */
  font-family: var(--font-body);
  background: var(--gray-50);
  color: var(--gray-900);
  margin: 0;
}


/* dcc.Loading component with transparent background */
/* this defines a style for a Loading component with parent_className='loading-wrapper' */
.loading_wrapper>div {
    visibility: visible !important;
}

/* Logo centred inside all dcc.Loading spinners */
.dash-spinner-container {
  transform: scale(1.25);
}

.dash-spinner-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background-image: url("logo_medium.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.dashboard-shell {
  max-width: 1400px;
}

/* ── Dashboard header bar ────────────────────────────────────────────── */
.dashboard-header {
  padding: 10px 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-200);
}

.dashboard-title {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--gray-900);
  margin: 0;
}

.dashboard-subtitle {
  font-size: 0.8rem;
  color: var(--text-subtle);
  margin-bottom: 0;
  margin-top: 2px;
}

/* Category-level header */
.category-header {
  font-weight: 700;
  padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
  border-bottom: 2px solid #dee2e6;
}

.section-title {
  font-weight: 650;
  margin-bottom: 0.8rem;
}

.tracker-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.not-implemented-card {
  opacity: 0.65;
}

.tracker-detail-row {
  color: #344054;
}

.status-badge {
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
}

.grade-pill {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
}

.metric-label {
  font-weight: 600;
  color: #344054;
}

.metric-value {
  font-size: 1.35rem;
  font-weight: 700;
}

.metric-status-pill {
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  letter-spacing: 0.2px;
}

.score-gauge-wrapper {
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.score-gauge-wrapper .js-plotly-plot,
.score-gauge-wrapper .plot-container,
.score-gauge-wrapper .svg-container {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
}

.pagespeed-audit-table td {
  vertical-align: top;
}

/* ── Inline business-type radios ─────────────────────────────── */
.audit-focus-radios .form-check {
  margin-right: 1.25rem;
}

/* ── AI Recommendation section ───────────────────────────────── */
.recommendation-section {
  border-left: 4px solid #0d6efd;
  padding-left: 0.75rem;
}

.recommendation-card {
  border: 1px solid rgba(13, 110, 253, 0.15);
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.recommendation-header {
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(13, 110, 253, 0.15);
}


/* ── Panel ──────────────────────────────────────────────────────────── */
#linkedin-view {
  max-width: 96%;
  margin: 48px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ── Header ─────────────────────────────────────────────────────────── */
.linkedin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.linkedin-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--blue-600);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.linkedin-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--gray-900);
  margin: 0;
  letter-spacing: -0.3px;
}

.linkedin-subtitle {
  font-size: 14px;
  color: var(--gray-400);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* ── Divider ────────────────────────────────────────────────────────── */
.linkedin-divider {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: 0 0 28px;
}

/* ── Section Label ──────────────────────────────────────────────────── */
.linkedin-section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 6px;
}

/* ── Prospect Select ────────────────────────────────────────────────── */
.linkedin-prospect-block {
  margin-bottom: 28px;
}

.linkedin-prospect-block .Select-control {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  background: var(--gray-50) !important;
  min-height: 42px !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.linkedin-prospect-block .Select-control:hover {
  border-color: var(--blue-400) !important;
}

.linkedin-prospect-block .is-focused .Select-control {
  border-color: var(--blue-500) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── Field Group ─────────────────────────────────────────────────────── */
.linkedin-field-group {
  margin-bottom: 22px;
}

/* ── Text / URL / Number Inputs ─────────────────────────────────────── */
.linkedin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-900);
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: var(--shadow-sm);
}

.linkedin-input::placeholder {
  color: var(--gray-400);
}

.linkedin-input:hover {
  border-color: var(--blue-400);
}

.linkedin-input:focus {
  border-color: var(--blue-500);
  background: var(--white);
  box-shadow: var(--shadow-focus);
}

.linkedin-input--narrow {
  width: 140px;
}

/* ── Chip Row ────────────────────────────────────────────────────────── */
.linkedin-chip-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.linkedin-chip-row .linkedin-input {
  flex: 1;
}

/* ── Add Button ─────────────────────────────────────────────────────── */
.linkedin-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-600);
  background: var(--blue-50);
  border: 1.5px solid var(--blue-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.linkedin-btn-add:hover {
  background: var(--blue-100);
  border-color: var(--blue-400);
  color: var(--blue-700);
}

.linkedin-btn-add:active {
  box-shadow: var(--shadow-focus);
}

/* ── Chips ───────────────────────────────────────────────────────────── */
#ingest-title-chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  min-height: 32px;
}

.linkedin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-700);
  transition: background var(--transition), border-color var(--transition);
}

.linkedin-chip:hover {
  background: var(--blue-100);
  border-color: var(--blue-400);
}

.linkedin-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--blue-400);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background var(--transition), color var(--transition);
}

.linkedin-chip-remove:hover {
  background: var(--blue-200);
  color: var(--blue-700);
}

/* ── Hint Text ───────────────────────────────────────────────────────── */
.linkedin-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Run Button ─────────────────────────────────────────────────────── */
.linkedin-btn-run {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--blue-600);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 4px 12px rgba(37,99,235,0.15);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.linkedin-btn-run:hover {
  background: var(--blue-700);
  box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 6px 16px rgba(29,78,216,0.2);
}

.linkedin-btn-run:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(29,78,216,0.2);
}

/* ── Status / Result ─────────────────────────────────────────────────── */
#ingest-run-status {
  margin-top: 16px;
  font-size: 14px;
  color: var(--gray-500);
  min-height: 20px;
}

#ingest-result-panel {
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   CHAT VIEW
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer panel — fills remaining viewport height ───────────────────── */
#chat-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height) - 40px);
  min-height: 0;
  overflow: hidden;
}

/* The single body card stretches to fill #chat-view */
#chat-view .chat-body-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-body);
}

/*
 * card-body is a flex column: history wrapper grows and scrolls, input stays
 * pinned at the bottom in normal flow. Scrolling is on the .loading_wrapper
 * (the dcc.Loading shell around chat-history) rather than on card-body itself,
 * which means position:sticky is no longer needed and the input is always
 * visible at the bottom regardless of how much history content there is.
 */
#chat-view .chat-body-card > .card-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 20px !important;
}

/* dcc.Loading wrapper gets the flex growth and owns the scroll */
#chat-view .chat-body-card > .card-body > .loading_wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Override Bootstrap card to match design system ─────────────────── */
#linkedin-view .card {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-body);
}

#linkedin-view .card-body {
  padding: 20px 24px !important;
}

/* ── Top bar (prospect select + actions) ─────────────────────────────── */
.chat-topbar-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 6px;
}

/* Prospect dropdown — reuse linkedin styles */
#chat-prospect-select .Select-control {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  background: var(--gray-50) !important;
  min-height: 40px !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}

#chat-prospect-select .Select-control:hover {
  border-color: var(--blue-400) !important;
}

#chat-prospect-select .is-focused .Select-control {
  border-color: var(--blue-500) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* Delete & menu buttons */
#chat-delete-thread-btn {
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-md) !important;
  font-size: 15px !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-400) !important;
  background: var(--white) !important;
  transition: border-color var(--transition), color var(--transition), background var(--transition) !important;
}

#chat-delete-thread-btn:hover {
  border-color: #f87171 !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
}

#chat-threads-menu .btn {
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-md) !important;
  font-size: 15px !important;
  background: var(--gray-50) !important;
  border: 1.5px solid var(--gray-200) !important;
  color: var(--gray-700) !important;
  transition: background var(--transition), border-color var(--transition) !important;
}

#chat-threads-menu .btn:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
}

/* ── Chat history window ─────────────────────────────────────────────── */
#chat-history {
  padding: 16px;
  margin-bottom: 0;
  background: var(--gray-50);
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md);
  scroll-behavior: smooth;
}

#chat-history:empty {
  padding: 0;
  background: transparent;
  border-color: transparent !important;
}

/*
 * Input row: normal block at the bottom of the flex card-body.
 * flex-shrink: 0 prevents it from being squeezed by the growing history wrapper.
 */
.chat-input-row {
  flex-shrink: 0;
  width: 100%;
  background: white;
  padding-top: 12px;
  z-index: 5;
}

#chat-history::-webkit-scrollbar {
  width: 6px;
}

#chat-history::-webkit-scrollbar-track {
  background: transparent;
}

#chat-history::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 999px;
}

#chat-history::-webkit-scrollbar-thumb:hover {
  background: var(--gray-300);
}

/* ── Message wrappers ────────────────────────────────────────────────── */
.chat-msg-wrapper {
  margin-bottom: 16px !important;
}

/* ── User bubble ─────────────────────────────────────────────────────── */
.chat-msg-wrapper.text-end > div,
#chat-history .text-end .bg-primary {
  background: var(--blue-600) !important;
  color: var(--white) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
  border: none !important;
  max-width: 78%;
  display: inline-block;
  text-align: left;
}

/* ── Assistant bubble ────────────────────────────────────────────────── */
.chat-bubble-assistant {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
  color: var(--gray-900) !important;
}

.chat-bubble-assistant .m-0 p:last-child {
  margin-bottom: 0;
}

/* ── Action bar ──────────────────────────────────────────────────────── */
.chat-action-bar {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  padding-left: 2px;
}

.chat-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  padding: 0;
}

.chat-action-btn:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.chat-action-btn:active {
  background: var(--blue-100);
}

/* ── Input row ───────────────────────────────────────────────────────── */
#chat-input {
  width: 100%;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--gray-900) !important;
  background: var(--gray-50) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
  outline: none !important;
}

#chat-input::placeholder {
  color: var(--gray-400) !important;
}

#chat-input:hover {
  border-color: var(--blue-400) !important;
}

#chat-input:focus {
  border-color: var(--blue-500) !important;
  background: var(--white) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── Send button ─────────────────────────────────────────────────────── */
.chat-input-actions {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}

#chat-send {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--blue-600) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 20px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 4px 12px rgba(37,99,235,0.15) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
  flex: 1;
  min-width: 0;
}

#chat-help-btn {
  flex-shrink: 0;
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
  font-size: 15px;
  color: var(--gray-500) !important;
  border-color: var(--gray-300) !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition) !important;
}

#chat-help-btn:hover {
  background: var(--gray-100) !important;
  color: var(--blue-600) !important;
  border-color: var(--blue-400) !important;
}

#chat-send:hover {
  background: var(--blue-700) !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 6px 16px rgba(29,78,216,0.2) !important;
}

#chat-send:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(29,78,216,0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
  LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════ */

#login-page .card {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

#login-page .card-body {
  padding: 24px 28px !important;
}

#login-page .btn {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--blue-600) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 24px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 4px 12px rgba(37,99,235,0.15) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

#login-page .btn:hover {
  background: var(--blue-700) !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 6px 16px rgba(29,78,216,0.2) !important;
}

#login-page .btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(29,78,216,0.2) !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   AUDIT VIEW
   ═══════════════════════════════════════════════════════════════════════ */

#audit-view {
  max-width: 96%;
  margin: 48px auto;
  font-family: var(--font-body);
}

#audit-view .card {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

#audit-view .card-body {
  padding: 24px 28px !important;
}

/* ── Audit Focus label ───────────────────────────────────────────────── */
.audit-focus-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-right: 16px;
  white-space: nowrap;
}

/* ── Radio pill buttons ──────────────────────────────────────────────── */
.audit-focus-radios .form-check {
  margin-right: 4px !important;
}

.audit-focus-radios .form-check-input {
  display: none !important;
}

.audit-focus-radios .form-check-label {
  display: inline-block;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  user-select: none;
}

.audit-focus-radios .form-check-label:hover {
  background: var(--blue-50);
  border-color: #93c5fd;
  color: var(--blue-600);
}

.audit-focus-radios .form-check-input:checked + .form-check-label {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}

/* ── Field labels ────────────────────────────────────────────────────── */
.audit-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 6px;
}

/* ── URL input ───────────────────────────────────────────────────────── */
#url-input {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--gray-900) !important;
  background: var(--gray-50) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-sm) !important;
  height: auto !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
}

#url-input::placeholder { color: var(--gray-400) !important; }
#url-input:hover        { border-color: var(--blue-400) !important; }
#url-input:focus {
  border-color: var(--blue-500) !important;
  background: var(--white) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── Audit button ────────────────────────────────────────────────────── */
#audit-button {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--blue-600) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 24px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 4px 12px rgba(37,99,235,0.15) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

#audit-button:hover {
  background: var(--blue-700) !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 6px 16px rgba(29,78,216,0.2) !important;
}

#audit-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(29,78,216,0.2) !important;
}

/* ── Findings processing overlay (Quick Look: state-driven, not dcc.Loading) */
.findings-processing-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  z-index: 10000;
}

/* ── Audit progress overlay (text only — dcc.Loading renders the spinner) */
.audit-progress-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  z-index: 10000;
  pointer-events: none;
}

.audit-progress-message {
  position: absolute;
  top: calc(50% + 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: #1e3a5f;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  animation: progressFadeIn 0.4s ease;
}

@keyframes progressFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Status / summary text ───────────────────────────────────────────── */
#audit-status,
#save-status,
#recommendation-status {
  font-size: 13px;
  color: var(--gray-500);
}

#audit-status:empty,
#save-status:empty,
#recommendation-status:empty {
  min-height: 0;
  margin: 0;
}

#report-summary {
  font-size: 14px;
  color: var(--gray-700);
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
#view-control .nav-tabs,
#date-tabs-container .nav-tabs {
  border-bottom: 2px solid var(--gray-200) !important;
  gap: 2px;
}

#view-control .nav-tabs .nav-link,
#date-tabs-container .nav-tabs .nav-link {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gray-500) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -2px;
  padding: 9px 16px !important;
  background: transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

#view-control .nav-tabs .nav-link:hover,
#date-tabs-container .nav-tabs .nav-link:hover {
  color: var(--blue-600) !important;
  border-bottom-color: #93c5fd !important;
}

#view-control .nav-tabs .nav-link.active,
#date-tabs-container .nav-tabs .nav-link.active {
  color: var(--blue-600) !important;
  border-bottom-color: var(--blue-600) !important;
  font-weight: 600 !important;
}

/* ── Tab content ─────────────────────────────────────────────────────── */
#recommendation-content,
#view-content {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   PROFILES (Business Profile & Your Profile)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── View containers ─────────────────────────────────────────────────── */
#profile-business-view,
#profile-your-view {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.profile-card {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-body);
}

.profile-card .card-body {
  padding: 20px 24px !important;
}

/* ── Region heading ──────────────────────────────────────────────────── */
.profile-region-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--gray-900);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
  letter-spacing: -0.2px;
}

/* ── Section label ───────────────────────────────────────────────────── */
.profile-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 6px;
}

/* ── Field badge (recommended / optional) ────────────────────────────── */
.profile-field-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-200);
}

/* ── Field group spacing ─────────────────────────────────────────────── */
.profile-field-group {
  margin-bottom: 22px;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.profile-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-900);
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: var(--shadow-sm);
}

.profile-input::placeholder {
  color: var(--gray-400);
}

.profile-input:hover {
  border-color: var(--blue-400);
}

.profile-input:focus {
  border-color: var(--blue-500);
  background: var(--white);
  box-shadow: var(--shadow-focus);
}

.profile-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Chip container ──────────────────────────────────────────────────── */
.profile-chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  min-height: 32px;
}

/* ── Inline error ────────────────────────────────────────────────────── */
.profile-inline-error {
  font-size: 12px;
  color: #dc2626;
  min-height: 18px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-inline-error:empty {
  display: none;
}

/* ── List items ──────────────────────────────────────────────────────── */
.profile-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}

.profile-list-row:hover {
  border-color: var(--blue-400);
}

.profile-list-row .profile-list-input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.profile-segment-card {
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.profile-segment-card .profile-list-row {
  background: transparent;
  border: none;
  padding: 0 0 6px 0;
}

.profile-segment-card .profile-list-row:hover {
  border: none;
}

/* ── Save bar ────────────────────────────────────────────────────────── */
.profile-save-bar {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--gray-100);
}

/* ── Truncation note ─────────────────────────────────────────────────── */
.profile-truncation-note {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  margin-top: 6px;
}

/* ── Profile dropdown in header ──────────────────────────────────────── */
#profile-dropdown .btn {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Responsive: stack regions on narrow viewports ───────────────────── */
@media (max-width: 767.98px) {
  #profile-business-view .row,
  #profile-your-view .row {
    flex-direction: column;
  }

  #profile-business-view .row > [class*="col-"],
  #profile-your-view .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PROFILE CHAT INPUT BAR
   ═══════════════════════════════════════════════════════════════════════ */

.profile-chat-bar {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-body);
  margin-top: 16px;
}

.profile-chat-bar .card-body {
  padding: 16px 20px !important;
}

.profile-chat-input {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--gray-900) !important;
  background: var(--gray-50) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
  outline: none !important;
}

.profile-chat-input::placeholder {
  color: var(--gray-400) !important;
}

.profile-chat-input:hover {
  border-color: var(--blue-400) !important;
}

.profile-chat-input:focus {
  border-color: var(--blue-500) !important;
  background: var(--white) !important;
  box-shadow: var(--shadow-focus) !important;
}

.profile-chat-send {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--blue-600) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 20px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 4px 12px rgba(37,99,235,0.15) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
  width: 100%;
}

.profile-chat-send:hover {
  background: var(--blue-700) !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 6px 16px rgba(29,78,216,0.2) !important;
}

.profile-chat-send:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(29,78,216,0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   MODE TOGGLE (Prospect / Setup)
   ═══════════════════════════════════════════════════════════════════════ */

#mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 2px !important;
  box-shadow: none !important;
}

/* Strip Bootstrap form-check padding that creates extra left gap */
#mode-toggle .form-check {
  padding: 0 !important;
  margin: 0 !important;
}

#mode-toggle .btn {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 18px !important;
  min-width: 90px !important;
  text-align: center !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: var(--gray-500) !important;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition) !important;
  white-space: nowrap;
  line-height: 1.4 !important;
}

#mode-toggle .btn:hover:not(.active) {
  color: var(--gray-700) !important;
  background: var(--gray-200) !important;
}

#mode-toggle .btn.active {
  background: var(--blue-600) !important;
  color: var(--white) !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.30), 0 2px 6px rgba(37,99,235,0.15) !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════ */

#landing-page {
  background: #fff;
  color: var(--gray-900);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.lp-nav {
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(to bottom, #fff, var(--gray-50));
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lp-nav-logo {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: contain;
}

.lp-nav-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
}

.lp-nav-subtitle {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.4;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.lp-btn-nav-login {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-900) !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
  line-height: 1;
}

.lp-btn-nav-login:hover {
  border-color: var(--gray-400);
  box-shadow: var(--shadow-sm);
}

.lp-btn-cta-login {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 14px;
  background: #fff;
  color: var(--gray-900) !important;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15,23,42,0.12);
  transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
}

.lp-btn-cta-login:hover {
  box-shadow: 0 3px 10px rgba(15,23,42,0.18);
  transform: translateY(-1px);
}

.lp-btn-cta-login:active {
  transform: translateY(0);
}

/* ── Layout helpers ───────────────────────────────────────────────────── */
.lp-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.lp-section-sm {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
}

.lp-dark-section {
  background: var(--gray-900);
  color: #fff;
  padding: 4rem 0;
}

.lp-dark-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.lp-muted-section {
  background: var(--gray-50);
  padding: 4rem 0;
}

/* ── Overlines ────────────────────────────────────────────────────────── */
.lp-overline {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #7c3aed;
  margin-bottom: 0.5rem;
}

.lp-overline-light {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #93c5fd;
  margin-bottom: 0.5rem;
}

.lp-center { text-align: center; }

/* ── Headings ─────────────────────────────────────────────────────────── */
.lp-h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--gray-900);
  margin: 0 0 1.25rem;
}

.lp-h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin: 0.4rem 0 1rem;
  line-height: 1.2;
}

.lp-h2-light {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0.4rem 0 1rem;
  line-height: 1.2;
}

/* ── Lead text ────────────────────────────────────────────────────────── */
.lp-lead {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-500);
  margin: 0;
}

.lp-lead-light {
  font-size: 1rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.lp-hero-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(99,102,241,0.07) 0%, transparent 28%),
              radial-gradient(circle at top left, rgba(37,99,235,0.07) 0%, transparent 30%);
}

.lp-hero-left {
  max-width: 38rem;
}

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: var(--blue-600);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.lp-vp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

.lp-vp-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

/* ── Flow card ────────────────────────────────────────────────────────── */
.lp-flow-card {
  border-radius: 22px;
  border: 1px solid var(--gray-200);
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 8px 30px rgba(15,23,42,0.08);
}

.lp-flow-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.lp-flow-card-eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-500);
  line-height: 1.3;
}

.lp-flow-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}

.lp-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.lp-step-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  padding: 0.85rem 1rem;
}

.lp-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gray-900);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.lp-step-title {
  font-weight: 600;
  color: var(--gray-900);
  font-size: 0.9rem;
  line-height: 1.3;
}

.lp-step-desc {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.5;
}

.lp-grad-badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue-600), #7c3aed);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Grids ────────────────────────────────────────────────────────────── */
.lp-grid-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: start;
}

.lp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.lp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.lp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.1rem;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.lp-card {
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.lp-card-dark {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  padding: 1.75rem;
}

.lp-card-muted {
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  background: var(--gray-50);
  padding: 1.5rem;
}

/* ── Pain points ──────────────────────────────────────────────────────── */
.lp-pain-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
}

/* ── Section intro block ──────────────────────────────────────────────── */
.lp-section-intro {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

/* ── Benefit cards ────────────────────────────────────────────────────── */
.lp-benefit-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.lp-benefit-text {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--gray-500);
  margin: 0;
}

/* ── How it works cards ───────────────────────────────────────────────── */
.lp-step-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.3;
}

.lp-step-card-desc {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0;
}

/* ── What happens next ────────────────────────────────────────────────── */
.lp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(to right, var(--blue-600), #7c3aed);
  flex-shrink: 0;
  margin-top: 5px;
}

.lp-after-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 2rem;
}

.lp-after-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  padding: 0.85rem 1rem;
}

.lp-after-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--gray-700);
}

/* ── Core platform card ───────────────────────────────────────────────── */
.lp-platform-card {
  border-radius: 22px;
  border: 1px solid var(--gray-200);
  background: linear-gradient(135deg, var(--blue-50) 0%, #fff 50%, #f5f3ff 100%);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.lp-platform-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray-500);
  margin-bottom: 0.4rem;
}

.lp-platform-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.lp-platform-body {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin-bottom: 0;
}

.lp-why-box {
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  background: #fff;
  padding: 1.1rem 1.25rem;
  margin-top: 1.25rem;
}

.lp-why-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 0.4rem;
}

.lp-why-text {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.lp-faq-inner {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.lp-faq-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-faq-q {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.65rem;
}

.lp-faq-a {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--gray-500);
  margin: 0;
}

/* ── CTA section ──────────────────────────────────────────────────────── */
.lp-cta-block {
  border-radius: 28px;
  background: var(--gray-900);
  padding: 3rem;
  color: #fff;
  box-shadow: 0 20px 60px rgba(15,23,42,0.15);
}

.lp-cta-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #94a3b8;
  max-width: 40rem;
  margin: 1rem 0 2rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .lp-grid-hero,
  .lp-grid-2,
  .lp-grid-3,
  .lp-vp-grid {
    grid-template-columns: 1fr;
  }

  .lp-section,
  .lp-section-sm {
    padding: 2.5rem 1.25rem;
  }

  .lp-dark-inner,
  .lp-faq-inner {
    padding: 0 1.25rem;
  }

  .lp-cta-block {
    padding: 2rem 1.5rem;
  }

  .lp-nav {
    padding: 1rem 1.25rem;
  }
}

/* ── Print / Save as PDF ──────────────────────────────────────────────── */
@media print {
  [id^="teep-help-"] { display: none !important; }
  .dashboard-header,
  #prospect-card,
  #mode-tabs,
  #tenant-tabs,
  #landing-page,
  #login-page,
  #audit-engagement-msg,
  #audit-new-prospect-card,
  #audit-no-data-msg,
  #audit-progress,
  #save-status,
  #recommendation-loader,
  #view-control,
  .btn { display: none !important; }

  #recommendation-content,
  #view-content { display: block !important; }

  .card { break-inside: avoid; page-break-inside: avoid; }
  h4, h5 { break-after: avoid; page-break-after: avoid; }

  /* Category groups: force new page before each, keep group intact */
  div:has(> h4.category-header) {
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h4.category-header { break-after: avoid; page-break-after: avoid; }

  /* Force all accordion items open in print/PDF */
  .accordion-collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
  .accordion-button.collapsed::after,
  .accordion-button::after { display: none; }

  @page { margin: 1.5cm; }
}

.teep-tooltip .tooltip-inner {
  max-width: 500px;
}
/* ── Claude-style app shell: left sidebar + top bar + main ─────────── */
:root {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 44px;
  --topbar-height: 56px;
  --sidebar-bg: #f6f5f1;
  --sidebar-border: #e8e6df;
  --sidebar-fg: #2a2a28;
  --sidebar-fg-muted: #7a7771;
  --sidebar-hover: rgba(0,0,0,0.05);
  --sidebar-active: rgba(0,0,0,0.07);
  --avatar-bg: #c96442;
  --avatar-bg-tenant: #2b6cb0;
}

#dashboard-container.dashboard-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #ffffff;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 24px 24px;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.app-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  margin-bottom: 8px;
  min-height: 40px;
}

.sidebar-toggle-btn {
  background: transparent;
  border: 0;
  color: var(--sidebar-fg-muted);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-fg);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

.sidebar-brand-text {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--sidebar-fg);
  letter-spacing: -0.01em;
}

.sidebar-new-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-fg);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 14px;
  cursor: pointer;
  transition: background 120ms ease;
  text-align: left;
}

.sidebar-new-btn:hover {
  background: var(--sidebar-hover);
}

.sidebar-new-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--sidebar-fg);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}

.sidebar-nav-item:hover {
  background: var(--sidebar-hover);
}

.sidebar-nav-item.active {
  background: var(--sidebar-active);
  font-weight: 600;
}

/* Separates the funnel stages in the nav (see layouts/sidebar.py). */
.sidebar-nav-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 6px 10px;
}

/* Intro line at the top of each sidebar-reachable view. The view's name is
   already in the top bar, so this is a subheading, not a title. Both tokens
   are redefined for dark mode. See layouts/page_intro.py. */
.page-intro {
  color: var(--text-subtle);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 70ch;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
  /* #chat-view and #agentic-chat-view are fixed-height flex columns; keep the
     intro at its natural height there instead of letting it be squeezed. */
  flex-shrink: 0;
}

.sidebar-nav-icon {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sidebar-fg-muted);
}

.sidebar-nav-item.active .sidebar-nav-icon {
  color: var(--sidebar-fg);
}

.sidebar-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* History */
.sidebar-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sidebar-fg-muted);
  padding: 4px 10px 6px;
}

.sidebar-thread-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Chat nav row: nav item + right-aligned "new session" button */
.sidebar-nav-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sidebar-nav-row .sidebar-nav-item {
  flex: 1;
  min-width: 0;
}

.sidebar-session-new {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--sidebar-fg-muted);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
}

.sidebar-session-new:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-fg);
}

/* Agentic chat sessions in the sidebar — blend the list-group items with
   the sidebar theme (they reuse the chat view's session-row markup). */
.sidebar-session-list .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
}

.sidebar-session-list .list-group-item {
  background: transparent;
  border: 0;
  color: var(--sidebar-fg);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.84rem;
  cursor: pointer;
}

.sidebar-session-list .list-group-item:hover {
  background: var(--sidebar-hover);
}

.sidebar-session-list .list-group-item.active {
  background: var(--sidebar-active);
  font-weight: 600;
}

.sidebar-session-list .text-muted {
  color: var(--sidebar-fg-muted) !important;
}

.sidebar-thread-item {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 6px 10px;
  font-size: 0.84rem;
  color: var(--sidebar-fg);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-thread-item:hover {
  background: var(--sidebar-hover);
}

.sidebar-thread-item.active {
  background: var(--sidebar-active);
  font-weight: 600;
}

.sidebar-thread-empty {
  font-size: 0.8rem;
  color: var(--sidebar-fg-muted);
  padding: 6px 10px;
}

/* Footer (user avatar) */
.sidebar-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sidebar-border);
}

.user-avatar-toggle,
.user-avatar-toggle.nav-link {
  padding: 4px !important;
  border-radius: 8px;
  width: 100%;
  display: block;
}

.user-avatar-toggle:hover {
  background: var(--sidebar-hover);
}

.user-avatar-toggle::after {
  display: none !important;
}

.user-avatar-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none
}

.user-avatar-letter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar-name {
  flex: 1;
  font-size: 0.88rem;
  color: var(--sidebar-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* Collapsed sidebar — show icons only */
.app-sidebar.collapsed .sidebar-brand,
.app-sidebar.collapsed .sidebar-nav-label,
.app-sidebar.collapsed .sidebar-history,
.app-sidebar.collapsed .user-avatar-name,
.app-sidebar.collapsed .sidebar-session-new,
.app-sidebar.collapsed .sidebar-new-btn .sidebar-nav-label {
  display: none !important;
}

.app-sidebar.collapsed {
  padding: 8px 4px;
}

.app-sidebar.collapsed .sidebar-nav-item,
.app-sidebar.collapsed .sidebar-new-btn {
  justify-content: flex-start;
  padding: 6px 8px;
  border: 0;
}

.app-sidebar.collapsed .sidebar-header {
  justify-content: flex-start;
  padding: 0;
}

.app-sidebar.collapsed .sidebar-toggle-btn {
  padding: 4px 6px;
}

.app-sidebar.collapsed .user-avatar-trigger {
  justify-content: flex-start;
}

.app-sidebar.collapsed .user-avatar-letter {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

/* ── Topbar ────────────────────────────────────────────────────────── */
.app-topbar {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
  min-height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
}

.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-view-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gray-900);
}

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

.topbar-prospect-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-context-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
}

.topbar-prospect-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-subtle);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.topbar-prospect-dropdown {
  min-width: 280px;
}

/* The subject switcher separates the tenant from the accounts with a rule on
   the "Us" row itself — not a separator option, which would sit there looking
   like an empty choice. Scoped to the open menu so the closed control, which
   renders the same label, is unaffected. */
.topbar-prospect-dropdown .Select-menu-outer .Select-option:has(.subject-us-row),
.topbar-prospect-dropdown .Select-menu-outer .VirtualizedSelectOption:has(.subject-us-row) {
  border-bottom: 2px solid var(--gray-500, #7b8494);
  font-weight: 600;
}

/* Subject badge — which company every screen is currently about. Present on
   every view so the user is never guessing (navigation_ux_analysis.md §6.3). */
.topbar-subject {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid var(--gray-300, #d5d9e0);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-subtle, #5b6472);
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-subject-kind {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.topbar-subject-us {
  border-color: var(--brand-300, #9db4ff);
  color: var(--brand-700, #2b4bbd);
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.tenant-avatar-toggle,
.tenant-avatar-toggle.nav-link {
  padding: 0 !important;
}

.tenant-avatar-toggle::after {
  display: none !important;
}

.tenant-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--avatar-bg-tenant);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 120ms ease;
}

.tenant-avatar:hover {
  filter: brightness(1.08);
}

/* Chat thread controls — now lives inside chat card */
.chat-thread-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 8px;
}

/* ── Dark theme ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --gray-50:  #14171c;
  --gray-100: #1a1e24;
  --gray-200: #2a2f37;
  --gray-300: #3a4049;
  --gray-400: #6b7280;
  --gray-500: #9ca3af;
  --gray-700: #d1d5db;
  --gray-900: #f1f5f9;

  --text-main: #e5e7eb;
  --text-subtle: #94a3b8;

  --sidebar-bg: #1a1d22;
  --sidebar-border: #2a2e35;
  --sidebar-fg: #e5e7eb;
  --sidebar-fg-muted: #9ca3af;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active: rgba(255,255,255,0.1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
}

[data-theme="dark"] body {
  background: #14171c;
  color: var(--gray-900);
}

[data-theme="dark"] #dashboard-container.dashboard-shell {
  background: #14171c;
}

[data-theme="dark"] .app-topbar {
  background: #14171c;
  border-bottom-color: var(--sidebar-border);
}

[data-theme="dark"] .topbar-view-title,
[data-theme="dark"] .topbar-prospect-label {
  color: var(--gray-900);
}

/* Engagement message panel */
[data-theme="dark"] #audit-engagement-msg {
  background-color: rgba(37, 99, 235, 0.12) !important;
}
[data-theme="dark"] #audit-engagement-msg p {
  color: var(--gray-900) !important;
}

/* Cards & surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas {
  background-color: #1c2027 !important;
  color: var(--gray-900);
  border-color: var(--sidebar-border) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--gray-900);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--sidebar-hover);
  color: var(--gray-900);
}

[data-theme="dark"] .offcanvas-header {
  border-bottom-color: var(--sidebar-border);
}

/* Inputs (Bootstrap + Dash) */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #1a1d22;
  border-color: var(--sidebar-border);
  color: var(--gray-900);
}
[data-theme="dark"] .form-control::placeholder {
  color: var(--gray-500);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #1a1d22;
  color: var(--gray-900);
  border-color: var(--blue-500);
}

/* react-select (dcc.Dropdown) */
[data-theme="dark"] .Select-control,
[data-theme="dark"] .Select-menu-outer {
  background-color: #1a1d22 !important;
  border-color: var(--sidebar-border) !important;
  color: var(--gray-900) !important;
}
[data-theme="dark"] .Select-value-label,
[data-theme="dark"] .Select-placeholder,
[data-theme="dark"] .Select-input > input {
  color: var(--gray-900) !important;
}
[data-theme="dark"] .VirtualizedSelectOption,
[data-theme="dark"] .Select-option {
  background-color: #1a1d22 !important;
  color: var(--gray-900) !important;
}
[data-theme="dark"] .VirtualizedSelectFocusedOption,
[data-theme="dark"] .Select-option.is-focused {
  background-color: var(--sidebar-hover) !important;
}

/* Tabs / accordions */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--sidebar-border);
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--gray-500);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #1c2027;
  border-color: var(--sidebar-border) var(--sidebar-border) #1c2027;
  color: var(--gray-900);
}
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button {
  background-color: #1c2027;
  color: var(--gray-900);
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #232830;
  color: var(--gray-900);
}

/* Chat bubbles & assistant */
[data-theme="dark"] .chat-bubble-assistant {
  background-color: #1c2027;
  color: var(--gray-900);
}
[data-theme="dark"] #chat-history .text-end .bg-primary {
  background-color: #2563eb !important;
}

/* Tables */
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  color: var(--gray-900);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: var(--sidebar-border);
  background-color: transparent;
  color: var(--gray-900);
}

/* Subtle text */
[data-theme="dark"] .text-muted {
  color: var(--gray-500) !important;
}

/* Placeholder dashboard panels */
.dashboard-placeholder {
  padding: 48px 24px;
}
.dashboard-placeholder-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gray-700);
}

/* ── Overall Dashboard ──────────────────────────────────────────────── */
.dashboard-overall {
  padding: 24px 4px;
}

.dashboard-section-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.dashboard-section-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 12px 0;
}

.dashboard-section-body {
  font-size: 0.92rem;
}

.dashboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.dashboard-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  padding: 6px 10px;
  border-bottom: 1px solid var(--gray-200);
}

.dashboard-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-900);
  vertical-align: middle;
}

.dashboard-cell-label {
  font-weight: 600;
}

.dashboard-cell-muted {
  color: var(--text-subtle);
  font-size: 0.86rem;
}

.dashboard-pill {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.dashboard-pill-ok {
  background-color: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.dashboard-pill-warn {
  background-color: rgba(234, 88, 12, 0.14);
  color: #b45309;
}

.dashboard-check {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
}

.dashboard-check-ok {
  color: #15803d;
}

.dashboard-check-off {
  color: var(--gray-300);
}

.dashboard-empty {
  color: var(--text-subtle);
  font-style: italic;
  padding: 8px 0;
}

/* ── Lead Management ────────────────────────────────────────────────── */
.lead-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lead-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.86rem;
  color: var(--gray-900);
}

.lead-filter .form-check {
  margin: 0;
}

/* Thirteen columns do not fit the content area at any realistic window width,
   so the table scrolls inside itself rather than pushing the page sideways. */
.lead-table-wrap,
.lead-access-wrap,
.referral-table-wrap {
  overflow-x: auto;
  --lead-sticky-bg: #ffffff;
}

/* Denser than the dashboard tables it borrows from: this one is a working
   list of many rows, not a three-row summary. */
.lead-table,
.lead-access-table,
.referral-table {
  font-size: 0.82rem;
}

.lead-table th,
.lead-access-table th,
.referral-table th {
  padding: 4px 8px;
  font-size: 0.66rem;
}

.lead-table td,
.lead-access-table td,
.referral-table td {
  padding: 5px 8px;
  white-space: nowrap;
}

.lead-stack-main {
  line-height: 1.25;
}

.lead-stack-sub {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--text-subtle);
}

/* The free-text columns give way first: a long company name or address
   truncates rather than pushing the whole table sideways. */
.lead-cell-clip {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-table .dashboard-pill,
.lead-access-table .dashboard-pill,
.referral-table .dashboard-pill {
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
}

.lead-action {
  padding: 0.15rem 0.5rem;
  font-size: 0.74rem;
}

/* Neutral, so it reads as "look" beside Contact and Status, which act. Drawn
   from the theme's grays so it stays legible in both themes. */
.lead-action-access {
  color: var(--gray-700);
  border: 1px solid var(--gray-400);
  background: transparent;
}

.lead-action-access:hover,
.lead-action-access:focus {
  color: var(--gray-900);
  border-color: var(--gray-700);
  background: var(--gray-100);
}

/* The three action columns are pinned to the right edge. Without this they are
   the first thing the horizontal scroll hides — the buttons would sit off
   screen behind a scrollbar most people never notice, which is exactly the
   part of the table that has to be reachable. Their widths are fixed because
   each one's offset is the combined width of those to its right. */
.lead-table th:nth-last-child(3),
.lead-table td:nth-last-child(3),
.lead-table th:nth-last-child(2),
.lead-table td:nth-last-child(2),
.lead-table th:last-child,
.lead-table td:last-child {
  position: sticky;
  z-index: 1;
  width: 84px;
  min-width: 84px;
  background: var(--lead-sticky-bg);
}

.lead-table th:last-child,
.lead-table td:last-child {
  right: 0;
}

.lead-table th:nth-last-child(2),
.lead-table td:nth-last-child(2) {
  right: 84px;
}

/* The inset border marks where the pinned group begins, so the columns to its
   left read as scrolling underneath rather than as being cut off. */
.lead-table th:nth-last-child(3),
.lead-table td:nth-last-child(3) {
  right: 168px;
  box-shadow: inset 1px 0 0 var(--gray-200);
}

/* Retired leads stay listed but read as background, so the live ones lead.
   The pinned cells are left out: dimming them would make their background
   translucent and let the scrolling columns show through, and their buttons
   are the one thing on the row that must stay legible. */
.lead-row-inactive td:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)) {
  opacity: 0.55;
}

.lead-link {
  color: var(--primary, #f97316);
  text-decoration: none;
}

.lead-link:hover {
  text-decoration: underline;
}

/* Pages instead of a scroll, so the table stays within two thirds of the window
   and the access log below it is on screen. */
.lead-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.lead-pagination .page-link {
  color: var(--gray-700);
  border-color: var(--gray-200);
  background: transparent;
  font-size: 0.78rem;
}

.lead-pagination .page-item.active .page-link {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
}

.lead-pagination .page-item.disabled .page-link {
  color: var(--gray-400);
}

.lead-pagination .page-link:focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

.lead-access-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* A user agent is the one value long enough to widen the table on its own. */
.lead-access-ua {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-source-register {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.lead-source-verify {
  background-color: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.lead-source-share {
  background-color: rgba(59, 130, 246, 0.14);
  color: var(--blue-700);
}

.lead-source-referral {
  background-color: rgba(249, 115, 22, 0.14);
  color: #c2410c;
}

/* ── Referrals, and the links between the two tables ── */
.lead-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lead-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Says that a card shows one referral's rows, not all of them. */
.lead-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  font-size: 0.76rem;
}

.lead-filter-chip-clear {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}

/* A cell that navigates to the other table: reads as a link, acts as a button. */
.lead-link-button {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  color: var(--primary, #f97316);
  cursor: pointer;
}

.lead-link-button:hover .lead-stack-main {
  text-decoration: underline;
}

.lead-access-subline {
  font-size: 0.78rem;
  color: var(--text-subtle);
  white-space: pre-line;
}

.referral-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.referral-notes {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.referral-copy {
  cursor: pointer;
  color: var(--gray-700);
}

.referral-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.referral-link-text {
  flex: 1;
  word-break: break-all;
}

/* The New referral dialog. Both steps — the form that issues the link and the
   compose step that puts it in a message — share one body height so the dialog
   keeps its size when it switches between them. */
.referral-modal-body {
  min-height: 620px;
}

.referral-form-pane {
  max-width: 560px;
}

.referral-compose {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.referral-compose-controls {
  flex: 0 0 38%;
  min-width: 0;
}

.referral-preview-pane {
  flex: 1;
  min-width: 0;
}

.referral-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.referral-preview {
  display: block;
  width: 100%;
  height: 420px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #ffffff;
}

/* Tall enough for every placeholder a template has today; longer lists scroll
   rather than push the preview out of the dialog. */
.referral-placeholder-fields {
  max-height: 290px;
  overflow-y: auto;
}

.referral-ph-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.referral-ph-label {
  flex: 0 0 130px;
  margin: 0;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-ph-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  font-size: 0.82rem;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
}

.referral-ph-input.referral-ph-missing {
  border-color: var(--bs-warning, #f59e0b);
}

/* Dark theme adjustments */
[data-theme="dark"] .dashboard-section-card {
  background: #1c2027;
  border-color: var(--sidebar-border);
}

[data-theme="dark"] .dashboard-table td,
[data-theme="dark"] .dashboard-table th {
  border-color: var(--sidebar-border);
}

[data-theme="dark"] .dashboard-pill-ok {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .dashboard-pill-warn {
  background-color: rgba(234, 88, 12, 0.2);
  color: #fb923c;
}

/* The pinned cells paint over the scrolling ones, so their background has to
   match the card rather than be transparent. */
[data-theme="dark"] .lead-table-wrap {
  --lead-sticky-bg: #1c2027;
}

[data-theme="dark"] .lead-table th:nth-last-child(3),
[data-theme="dark"] .lead-table td:nth-last-child(3) {
  box-shadow: inset 1px 0 0 var(--sidebar-border);
}

[data-theme="dark"] .lead-source-verify {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .lead-source-share {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--blue-400);
}

[data-theme="dark"] .lead-source-referral,
[data-theme="dark"] .lead-filter-chip {
  background-color: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

[data-theme="dark"] .referral-copy {
  color: var(--gray-400);
}

/* The preview keeps its own white page: it shows the email as the recipient
   will see it, not as the app is themed. */
[data-theme="dark"] .referral-preview,
[data-theme="dark"] .referral-link-box {
  border-color: var(--sidebar-border);
}

[data-theme="dark"] .referral-ph-input {
  background: #1c2027;
  border-color: var(--sidebar-border);
  color: var(--text-main);
}

[data-theme="dark"] .lead-access-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .dashboard-check-ok {
  color: #4ade80;
}

[data-theme="dark"] .dashboard-check-off {
  color: var(--gray-500);
}




/* Planner */


/* Main container */
.persona-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

/* Main container */
.age-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

/* Main container */
.gender-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

/* Main container */
.location-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

/* Main container */
.topics-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

/* Main container */
.ad_analysis-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}


/* Main container */
.ga4_audit-marketing-report,
.gtm_audit-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}


/* Main container */
.brand-marketing-report {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

div.brand-marketing-report table {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid black;
    border-collapse: collapse;

    width: 80%;
    /* Set the overall table width */
    table-layout: auto;
    /* Let the browser size columns based on content */
    border-collapse: collapse;
}

div.brand-marketing-report table th,
div.brand-marketing-report table td {
    border: 1px solid black;
}

div.brand-marketing-report h2 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    color: white;
}

/* growth-snapshot */
#growth-snapshot-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    background-color: #f8fafc;
}

div#growth-snapshot-content table {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid black;
    border-collapse: collapse;

    width: 80%;
    /* Set the overall table width */
    table-layout: auto;
    /* Let the browser size columns based on content */
    border-collapse: collapse;
}

div#growth-snapshot-content table th,
div#growth-snapshot-content table td {
    border: 1px solid black;
}

/* Section titles are the top of the hierarchy; headings inside a section's
   Markdown (the writer uses ###) sit below them. Class-scoped so the share
   page, which renders the same builder in another container, matches. */
.growth-snapshot-report .gs-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    color: white;
}

.growth-snapshot-report .markdown-content h1,
.growth-snapshot-report .markdown-content h2,
.growth-snapshot-report .markdown-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.growth-snapshot-report .markdown-content h4 {
    font-size: 1rem;
    font-weight: 600;
}


/* Header styles */
.report-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    /* blue */
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    border-radius: 12px;
    color: white;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
}

.main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.client-title {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
}

.client-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.9;
}

.copyright {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
}

.title-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, white, transparent);
    margin-top: 1.5rem;
}

/* Section headers */
.section-header {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 1.25rem 0 0.75rem 0;
    color: #2d3748;
    border-bottom: 3px solid #e2e8f0;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
}

.appendix-header {
    margin-top: 4rem;
    border-bottom-color: #cbd5e0;
}

/* Card containers */
.recommendation-section {
    margin-bottom: 1.5rem;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.recommendations-container {
    margin-bottom: 3rem;
}

.chart_wrapper {
    margin-top: 20px;
}

/* Base card styles */
.recommendation-card,
.info-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-top: 10px;
}

.recommendation-card:hover,
.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Card headers */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.segment-title,
.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.card-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

/* Card body */
.card-body {
    padding: 1rem;
}

.card-section {
    margin-bottom: 0.75rem;
}

.card-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recommendation-text {
    color: #2d3748;
    line-height: 1.7;
    margin-bottom: 0;
}


.icon-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-button {
    background: none;
    border: none;
    color: #2d3748;
    ;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: color 0.2s ease;
}

.help-button:hover {
    color: #4299e1;
    background-color: rgba(66, 153, 225, 0.1);
}

.help-button:focus {
    outline: 2px solid #4299e1;
    outline-offset: 2px;
}

/* Card type specific colors */
.segments-to-scale-up-card {
    border-left: 4px solid #E98A4C;
}

.segments-to-scale-up-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

.segments-to-hold-and-test-card {
    border-left: 4px solid #E98A4C;
}

.segments-to-hold-and-test-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

.segments-to-pull-back-exclude-card {
    border-left: 4px solid #f56565;
}

.segments-to-pull-back-exclude-card .card-header {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

/* Info cards specific styles */
.summary-card {
    border-left: 4px solid #667eea;
}

.summary-card .card-header {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);
    color: white;
}

.budget-card {
    border-left: 4px solid #38b2ac;
}

.budget-card .card-header {
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    color: white;
}

.optimization-card {
    /*border-left: 4px solid #9f7aea;*/
    border-left: 4px solid #316DF4;
}

.optimization-card .card-header {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
    color: white;
}

.usage-card {
    /*border-left: 4px solid #9f7aea;*/
    border-left: 4px solid #316DF4;
}

.usage-card .card-header {
    /*background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);*/
    background: linear-gradient(45deg, #316DF4, #1C4F9F, #57A2E5);

    color: white;
}

.justification-card {
    border-left: 4px solid #667eea;
}

.justification-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.notes-card {
    border-left: 4px solid #667eea;
}

.notes-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}


/* Card type specific colors */
.recommended-city-card {
    border-left: 4px solid #E98A4C;
}

.recommended-city-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

/* Card type specific colors */
.recommended-age-card {
    border-left: 4px solid #E98A4C;
}

.recommended-age-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

/* Card type specific colors */
.recommended-gender-card {
    border-left: 4px solid #E98A4C;
}

.recommended-gender-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}

/* Card type specific colors */
.recommended-persona-card {
    border-left: 4px solid #E98A4C;
}

.recommended-persona-card .card-header {
    background: linear-gradient(45deg, #E98A4C, #CB6520, #8A3F0E);
    color: white;
}


/* Lists styling */
.actions-list,
.blueprint-list,
.levers-list,
.usage_list {
    list-style: none;
    padding: 0;
}

.action-item,
.blueprint-item,
.lever-item,
.usage_item {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.action-item:hover,
.blueprint-item:hover,
.lever-item:hover,
.usage-item:hover {
    background: #edf2f7;
    border-left-color: #a0aec0;
}

.action-item:last-child,
.blueprint-item:last-child,
.lever-item:last-child,
.usage-item:last-child {
    margin-bottom: 0;
}

/* Summary text */
.summary-text {
    font-size: 14px;
    line-height: 1.8;
    color: #2d3748;
    font-weight: 400;
}

/* Appendix styles */
.appendix-section {
    /*margin-top: 4rem;*/
    /*padding-top: 2rem;*/
    border-top: 2px solid #e2e8f0;
}

.dash-table-container {
    font-size: 0.8rem;
    font-weight: 400;
}

.table-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2d3748;
    margin: 1rem 0 0.5rem 0;
}

.table-container {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 0.75rem;
}

.table-description {
    color: #718096;
    font-style: italic;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   AGENTIC CHAT VIEW
   ═══════════════════════════════════════════════════════════════════════ */

/* Columns fill the viewport below the sticky topbar; only the message
   list scrolls. Matches the height formula used by #chat-view. */
#agentic-chat-view .agentic-view-col {
  height: calc(100vh - var(--topbar-height) - 8px);
}

#agentic-chat-view .agentic-chat-col {
  overflow: hidden;
}

#agentic-chat-view .agentic-chat-col > .loading_wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Composer ("Command Bar") ─────────────────────────────────────────── */
.agentic-composer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.agentic-composer:focus-within {
  border-color: var(--blue-400);
  box-shadow: var(--shadow-focus);
}

.agentic-composer-input.form-control {
  width: 100%;
  min-height: 52px;
  padding: 12px 8px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--gray-900) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  resize: none;
  outline: none !important;
  box-shadow: none !important;
}

.agentic-composer-input.form-control::placeholder {
  color: var(--gray-400) !important;
}

/* ── Next-step suggestion chips above the input ──────────────────────── */
.agentic-next-steps:empty {
  display: none;
}

.agentic-next-steps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 2px;
}

.agentic-next-step-chip.btn {
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.agentic-next-step-chip.btn:hover {
  background: var(--blue-50, #eff6ff) !important;
  border-color: var(--blue-400) !important;
  color: var(--blue-700) !important;
}

[data-theme="dark"] .agentic-next-step-chip.btn {
  background: #2a2f36 !important;
  border-color: var(--sidebar-border) !important;
  color: var(--gray-300) !important;
}

/* ── Toolbar row: reasoning switch (left) + send button (right) ──────── */
.agentic-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 4px;
}

.agentic-composer-switch .form-check-label {
  font-size: 13px;
  color: var(--gray-500);
}

.agentic-composer-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--blue-600) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25), 0 4px 12px rgba(37,99,235,0.15) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

.agentic-composer-send:hover {
  background: var(--blue-700) !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35), 0 6px 16px rgba(29,78,216,0.2) !important;
}

.agentic-composer-send:active {
  transform: translateY(1px);
}

/* ── Switch bordered group ─────────────────────────────────────────────── */
.agentic-switch-box {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background: var(--gray-50);
}

/* ── Help button ────────────────────────────────────────────────────────── */
.agentic-help-btn.btn {
  color: var(--gray-400) !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  transition: color var(--transition);
}

.agentic-help-btn.btn:hover {
  color: var(--blue-600) !important;
}

/* ── Dark theme ────────────────────────────────────────────────────────── */
[data-theme="dark"] .agentic-composer {
  background: #1c2027;
  border-color: var(--sidebar-border);
}

[data-theme="dark"] .agentic-composer-input.form-control {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .agentic-composer-switch .form-check-label {
  color: var(--gray-500);
}

[data-theme="dark"] .agentic-switch-box {
  border-color: var(--sidebar-border);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Tables inside chat window ────────────────────────────────────────── */
#chat-window table {
  border: 1px solid var(--gray-300);
  border-collapse: collapse;
}

#chat-window table th,
#chat-window table td {
  border: 1px solid var(--gray-300);
}

#chat-window table th {
  border: 3px double var(--gray-300);
}

/* ── Tables inside chat history (shared) ────────────────────────────────────────── */
#chat-history table {
  border: 1px solid var(--gray-300);
  border-collapse: collapse;
}

#chat-history table th,
#chat-history table td {
  border: 1px solid var(--gray-300);
}

#chat-history table th {
  border: 3px double var(--gray-300);
}


/* Widen the New Prospect modal to ~2x the default modal width. */
.new-prospect-modal-wide {
    max-width: 1000px;
}

/* ── Public share page ──────────────────────────────────────────────── */
/*
 * The page shell is height-capped and clipped by the chrome toggle
 * (chrome_js._DASHBOARD_STYLE, applied because the default landing view is a
 * full-height chat view), and that runs on every load including a share link
 * opened cold — which left a shared report showing only its first screen. The
 * share page therefore owns its own scroll rather than relying on whatever the
 * signed-in chrome last wrote on the container.
 */
#share-page {
  height: 100vh;
  overflow-y: auto;
}

/* Report width, not window width: the Growth Snapshot is long-form prose and
 * the Data Pipeline is a card grid, and both read better in a fixed measure. */
#share-page .share-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* A Data Pipeline card's rows are one Markdown block: the summary paragraph
 * (Detected, Network Hits) then the details, spaced as the separate rows were. */
.analytic-details p {
  margin-bottom: 0.5rem;
}

.analytic-details p:last-child {
  margin-bottom: 0;
}

/* The analytic cards size off the viewport, not their container, so inside the
 * narrower measure the xl three-up grid squeezes them. Two up keeps each card
 * about as wide as it is on the signed-in Findings page. */
#share-page .analytic-card {
  min-width: 0;
}

@media (min-width: 768px) {
  #share-page .share-container .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* A long analytic name must push the status badge down, never sit under it. */
#share-page .analytic-card .card-body > .d-flex {
  align-items: flex-start;
  gap: 8px;
}

#share-page .analytic-card .card-body > .d-flex > h5 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#share-page .analytic-card .status-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ==========================================================================
   Executive Summary and Action Plan (GAds_Requirements_5.md §FR-1)
   --------------------------------------------------------------------------
   Two ideas carry the section, and everything else is kept quiet so they land.

   1. The problems are ordered by the money each explains (D26), so the money
      is drawn: every problem carries a bar scaled against the largest one, and
      the ranking becomes something you can see rather than something you have
      to read. This is the one loud element on the page.
   2. The plan is a sequence — do now, then test, then commit (D36) — so it is
      drawn as one spine with three stops. Numbered markers are used here
      because the content genuinely is ordered; nothing else in the app numbers
      its cards.

   Colour is the app's own blue and slate. Problem kinds are named in words
   rather than coloured, because six badge colours compete with each other and
   none of them tells the reader which problem costs the most.
   ========================================================================== */

.exec {
  --exec-rule: #e6ecf5;
  --exec-bar: var(--blue-500);
  --exec-bar-soft: #dbe7fb;
  --exec-ink: var(--gray-900);
  --exec-quiet: var(--gray-500);
  --exec-spine: #dce5f2;
  margin-bottom: 2.25rem;
}

.exec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--exec-rule);
  padding-bottom: .55rem;
  margin-bottom: 1.25rem;
}
.exec-head h4 { font-size: 1.32rem; font-weight: 700; margin: 0; color: var(--exec-ink); }
.exec-head .exec-asof { font-size: .78rem; color: var(--exec-quiet); white-space: nowrap; }

/* -- The lead paragraph: the only thing some readers read ----------------- */
.exec-lead {
  border-left: 3px solid var(--exec-bar);
  padding: .1rem 0 .1rem 1.1rem;
  margin-bottom: 1.9rem;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--exec-ink);
  max-width: 74ch;
}

/* -- Money: two pairs, not four identical tiles --------------------------- */
.exec-money {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.75rem;
  padding: .9rem 0 1.15rem;
  border-bottom: 1px solid var(--exec-rule);
  margin-bottom: 1.9rem;
}
.exec-money-group { display: flex; gap: 1.75rem; }
.exec-money-group + .exec-money-group {
  padding-left: 1.75rem;
  border-left: 1px solid var(--exec-rule);
}
.exec-figure { min-width: 8.5rem; }
.exec-figure-value {
  font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--exec-ink);
  font-variant-numeric: tabular-nums;
}
.exec-figure-value.is-quiet { color: var(--gray-500); font-weight: 600; }
.exec-figure-label { font-size: .82rem; font-weight: 600; color: var(--gray-700); margin-top: .15rem; }
.exec-figure-note { font-size: .74rem; color: var(--exec-quiet); line-height: 1.35; }

/* -- Positioning: a statement, then the three things around it ------------ */
.exec-position { margin-bottom: 2rem; }
.exec-position-statement {
  font-size: 1.18rem; line-height: 1.5; font-weight: 600;
  color: var(--exec-ink); max-width: 62ch; margin-bottom: 1rem;
}
.exec-position-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.35rem;
}
.exec-position-label { font-size: .76rem; color: var(--exec-quiet); font-weight: 600; margin-bottom: .15rem; }
.exec-position-text { font-size: .92rem; line-height: 1.55; color: var(--gray-700); }

/* -- The Buyer Motivation check ------------------------------------------- */
/* Drawn wherever the pipeline's `placement` puts it, so the same rules have to
   read correctly directly under the lead paragraph and again lower down. The
   left rule carries the verdict; the band is a plain chip rather than a colour,
   because the band is a measurement and colouring it invites reading it as
   good or bad news. */
.exec-motivation {
  border-left: 3px solid var(--exec-bar-soft);
  background: #fbfdff;
  padding: .85rem 1.1rem .9rem;
  margin-bottom: 1.9rem;
  max-width: 74ch;
}
.exec-motivation.is-validated { border-left-color: #16a34a; }
.exec-motivation.is-contradicted { border-left-color: #dc2626; }
.exec-motivation.is-quiet { border-left-color: var(--exec-rule); }

/* The two framings, side by side: the comparison IS the finding, so the two
   ROAS figures are set at the same size and weight and left to be read
   against each other rather than one being styled as the answer. */
.exec-framing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.25rem;
  margin: .7rem 0 .6rem;
}
.exec-framing-side {
  border-left: 2px solid var(--exec-rule);
  padding-left: .8rem;
}
.exec-framing-label {
  font-size: .76rem; font-weight: 700; color: var(--exec-quiet);
  text-transform: uppercase; letter-spacing: .05em;
}
.exec-framing-roas {
  font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  color: var(--exec-ink); font-variant-numeric: tabular-nums;
}
.exec-framing-unit { font-size: .72rem; color: var(--exec-quiet); }
.exec-framing-detail { font-size: .8rem; color: var(--gray-700); margin-top: .3rem; }
.exec-framing-note { font-size: .74rem; color: var(--exec-quiet); }
.exec-framing-verdict {
  font-size: .98rem; line-height: 1.5; color: var(--exec-ink);
  padding-top: .35rem; border-top: 1px solid var(--exec-rule);
}
.exec-framing-aside {
  font-size: .76rem; color: var(--exec-quiet); font-style: italic; margin-top: .35rem;
}
.exec-framing-guidance {
  font-size: .88rem; line-height: 1.5; color: var(--exec-ink);
  border-left: 2px solid var(--exec-rule);
  padding-left: .8rem; margin-top: .5rem;
}
.exec-framing-guidance-title { font-weight: 700; }

.exec-motivation-top {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.exec-motivation-verdict {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--exec-quiet);
}
.exec-motivation-band {
  font-size: .7rem; font-weight: 600; color: var(--gray-700);
  background: var(--exec-rule); border-radius: 20px; padding: .05rem .5rem;
}
/* The margin sits beside the verdict because it is what sets how firmly the
   plan recommends the move. Deliberately the same shape as the reliability
   chip: they are two halves of one judgement, not a headline and a footnote. */
.exec-motivation-margin {
  font-size: .7rem; font-weight: 700; color: var(--exec-ink);
  background: var(--exec-bar-soft); border-radius: 20px; padding: .05rem .5rem;
}
.exec-motivation-subject { margin-bottom: .35rem; }
.exec-motivation-name {
  font-size: 1.1rem; font-weight: 700; color: var(--exec-ink);
}
.exec-motivation-role { font-size: .84rem; color: var(--exec-quiet); }
.exec-motivation-text {
  font-size: .95rem; line-height: 1.55; color: var(--gray-700);
}
.exec-motivation-terms {
  font-size: .82rem; color: var(--gray-700); margin-top: .4rem;
}
.exec-motivation-label { color: var(--exec-quiet); font-weight: 600; }
.exec-motivation-meta {
  font-size: .74rem; color: var(--exec-quiet); margin-top: .45rem;
}

/* -- What to revise in the Internet Scan ---------------------------------- */
.exec-revisions { padding-top: .6rem; margin-bottom: 2rem; }
.exec-revision { padding: .95rem 0; border-top: 1px solid var(--exec-rule); }
.exec-revision:last-child { border-bottom: 1px solid var(--exec-rule); }
.exec-revision-top {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.exec-revision-target {
  font-size: .95rem; font-weight: 700; color: var(--exec-ink);
}
.exec-revision-scope {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--exec-quiet);
}
.exec-revision-change {
  font-size: .95rem; line-height: 1.55; color: var(--gray-800); max-width: 74ch;
}
.exec-revision-why {
  font-size: .85rem; line-height: 1.5; color: var(--exec-quiet);
  margin-top: .25rem; max-width: 74ch;
}

/* -- Problems, drawn as the ranking they are ------------------------------ */
.exec-section-title {
  font-size: 1.02rem; font-weight: 700; color: var(--exec-ink);
  margin: 0 0 .15rem;
}
.exec-position + div > .exec-section-title,
.exec-plan > .exec-section-title { margin-top: .35rem; }
.exec-position, .exec-plan { padding-top: .6rem; }
.exec-section-note { font-size: .8rem; color: var(--exec-quiet); margin-bottom: 1.1rem; }

/* -- The summary: the growth pitch and the advice under it ----------------- */
.exec-pitch-opener { font-weight: 600; margin-bottom: .4rem; }
.exec-lead p:last-child { margin-bottom: 0; }
.exec-pitch-section { margin-bottom: 1.2rem; }
.exec-pitch-text { font-size: .98rem; line-height: 1.55; color: var(--exec-ink); margin-bottom: .35rem; }
.exec-pitch-list { margin: 0; padding-left: 1.2rem; font-size: .95rem; line-height: 1.55; }

.exec-problem { padding: 1.05rem 0; border-top: 1px solid var(--exec-rule); }
.exec-kind { font-size: .75rem; font-weight: 600; color: var(--exec-quiet); margin-bottom: .2rem; }
.exec-problem:last-child { border-bottom: 1px solid var(--exec-rule); }
.exec-problem-top { display: flex; align-items: baseline; gap: 1rem; }
.exec-problem-title {
  font-size: .98rem; font-weight: 650; color: var(--exec-ink); margin: 0;
  flex: 1 1 auto; line-height: 1.4;
}
.exec-problem-money {
  font-size: 1.12rem; font-weight: 700; color: var(--exec-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2;
}
.exec-problem-money.is-none { color: var(--gray-400); font-weight: 600; }

.exec-bar-track {
  height: 6px; border-radius: 999px; background: #eef3fa;
  margin: .5rem 0 .6rem; overflow: hidden;
}
.exec-bar-fill { height: 100%; border-radius: 999px; background: var(--exec-bar); }
.exec-problem.is-resolved .exec-bar-fill { background: var(--gray-300); }
.exec-problem.is-resolved { opacity: .72; }

.exec-problem-body { font-size: .92rem; line-height: 1.55; color: var(--gray-700); max-width: 78ch; }

.exec-evidence { margin: .5rem 0 0; padding: 0; list-style: none; }
.exec-evidence li {
  font-size: .82rem; color: var(--exec-quiet); line-height: 1.5;
  padding-left: .95rem; position: relative;
}
.exec-evidence li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gray-300);
}

/* -- The plan: one spine, three stops ------------------------------------- */
.exec-plan { margin-top: 2.1rem; }
.exec-phase { position: relative; padding-left: 2.6rem; padding-bottom: 1.6rem; }
.exec-phase::before {
  content: ""; position: absolute; left: .84rem; top: 1.65rem; bottom: 0;
  width: 2px; background: var(--exec-spine);
}
.exec-phase:last-child::before { display: none; }
.exec-phase-step {
  position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--white); border: 2px solid var(--exec-bar); color: var(--exec-bar);
  font-size: .82rem; font-weight: 700; line-height: 1.55rem; text-align: center;
}
.exec-phase.is-later .exec-phase-step { border-color: var(--exec-spine); color: var(--gray-400); }
.exec-phase-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .1rem; }
.exec-phase-title { font-size: 1.02rem; font-weight: 700; color: var(--exec-ink); margin: 0; }
.exec-phase-when { font-size: .78rem; color: var(--exec-quiet); }
.exec-phase-note { font-size: .82rem; color: var(--exec-quiet); margin-bottom: .9rem; }

.exec-action { padding: .75rem 0; border-top: 1px solid var(--exec-rule); }
.exec-action:first-of-type { border-top: none; padding-top: .15rem; }
.exec-action-do {
  font-size: .96rem; font-weight: 650; color: var(--exec-ink); line-height: 1.45;
  margin-bottom: .2rem;
}
.exec-action-where { font-size: .79rem; color: var(--exec-quiet); margin-bottom: .35rem; }
.exec-action-expect { font-size: .9rem; color: var(--gray-700); line-height: 1.55; max-width: 76ch; }
.exec-action-measure {
  font-size: .84rem; color: var(--gray-700); line-height: 1.5; margin-top: .35rem;
  padding-left: 1.25rem; position: relative;
}
.exec-action-measure .bi { position: absolute; left: 0; top: .12em; color: var(--blue-500); }
.exec-action-basis { font-size: .78rem; color: var(--exec-quiet); margin-top: .3rem; }

/* -- Footnotes ------------------------------------------------------------ */
.exec-foot {
  border-top: 1px solid var(--exec-rule); margin-top: 1.1rem; padding-top: .9rem;
}
.exec-foot-title { font-size: .82rem; font-weight: 650; color: var(--gray-700); margin-bottom: .3rem; }
.exec-foot ul { margin: 0; padding-left: 1.05rem; }
.exec-foot li { font-size: .82rem; color: var(--exec-quiet); line-height: 1.55; }
.exec-provenance { font-size: .76rem; color: var(--gray-500); margin-top: .8rem; line-height: 1.5; }

@media (max-width: 720px) {
  .exec-money-group { flex-wrap: wrap; gap: 1.1rem; }
  .exec-money-group + .exec-money-group { padding-left: 0; border-left: none; }
  .exec-phase { padding-left: 2.1rem; }
}

/* ==========================================================================
   Semantic Brain palette, applied to the interpretation panel
   --------------------------------------------------------------------------
   Scoped to `.sb-brand` rather than applied to the shared report classes: the
   same components render the positioning, brand voice and growth reports, and
   those have not been through the brand guide yet. Lifting this is a matter of
   moving the selector, not rewriting the rules.

   What the guide asks for, and what changes here (Semantic_Brain_Brand_Image_LLM.md):

   * Royal is dominant; violet is rationed to dot indicators. The orange and
     blue gradient card headers go — orange is not a permitted emphasis colour
     at all, and gradients are allowed only as background washes at 6-18%.
   * No third accent. Functional colour (the grounding warning) stays, quietly.
   * Radius is 4px, or 999px for pills. Nothing in between: the 12px cards and
     6px value chips both resolve to 4px.
   * Dividers are 1px #E6E7EF, single, never decorative.
   ========================================================================== */

.sb-brand {
  --royal: #1E3A8A;
  --royal-deep: #14256B;
  --royal-bright: #2547B3;
  --violet: #6D28D9;
  --paper: #FFFFFF;
  --paper-tint: #F6F6FA;
  --ink: #0A0E1F;
  --ink-soft: #2A2F45;
  --mute: #6B7088;
  --line: #E6E7EF;
  color: var(--ink-soft);
}

/* -- Sections ------------------------------------------------------------- */
/* The Bootstrap-blue rail down the left of every block: royal, and thinner.
   One rule per section is structure; a 4px bar in a colour the guide does not
   contain is decoration. */
.sb-brand .recommendation-section {
  border-left: 2px solid var(--line);
  padding-left: 1rem;
}
.sb-brand .recommendation-section:first-of-type { border-left-color: var(--royal); }

.sb-brand .section-header {
  background: none;
  border-bottom: 1px solid var(--line);
  border-left: none;
  padding: 0 0 .5rem;
  margin: 1.75rem 0 1rem;
}
.sb-brand .section-header .card-title { color: var(--royal); font-size: 1.15rem; font-weight: 600; }
.sb-brand .card-icon { opacity: .55; font-size: 1.05rem; }

/* -- Cards: a rule and a tint, never a gradient --------------------------- */
.sb-brand .recommendation-card,
.sb-brand .info-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--royal);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: none;
}
/* Decoration the guide rules out: no lift, no shadow bloom on hover. */
.sb-brand .recommendation-card:hover,
.sb-brand .info-card:hover { transform: none; box-shadow: none; }

.sb-brand .recommendation-card .card-header,
.sb-brand .info-card .card-header {
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.sb-brand .card-header .segment-title,
.sb-brand .card-header .card-title { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.sb-brand .card-header .segment-icon,
.sb-brand .card-header .card-icon { color: var(--mute); }

/* The memo itself is the one place royal is used as a field, not a rule:
   it is the dominant emphasis and the thing the section is named after. */
.sb-brand .summary-card { border-left-color: var(--royal-deep); }
.sb-brand .summary-card .card-header {
  background: var(--royal);
  border-bottom: none;
}
.sb-brand .summary-card .card-header .card-title,
.sb-brand .summary-card .card-header .card-icon { color: var(--paper); }
.sb-brand .summary-text { color: var(--ink-soft); }

/* -- Labels and values ---------------------------------------------------- */
.sb-brand .card-section .section-title {
  color: var(--mute);
  font-size: .72rem;
  letter-spacing: .14em;
}
.sb-brand .actions-list .action-item,
.sb-brand .usage-list .usage-item {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
}

/* Violet is rationed to dot indicators — the one place the guide names that
   this panel actually has. */
.sb-brand .usage-list li::marker,
.sb-brand .md li::marker { color: var(--violet); }

/* -- Functional colour, desaturated so it cannot compete ------------------ */
.sb-brand .alert-warning,
.sb-brand .alert-danger,
.sb-brand .alert-info,
.sb-brand .alert-light {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mute);
  border-radius: 4px;
  color: var(--ink-soft);
}

/* -- Dividers and links --------------------------------------------------- */
.sb-brand hr { border-top: 1px solid var(--line); opacity: 1; }
.sb-brand a { color: var(--royal); }
.sb-brand a:hover { color: var(--royal-bright); }
.sb-brand .text-muted { color: var(--mute) !important; }

/* --------------------------------------------------------------------------
   The same palette across the 1st-Party Data Analysis report tabs.
   `render_report` puts `sb-brand` on every tab body, so the rules above —
   cards, sections, notes, alerts, dividers — already apply. What follows is
   what only these reports have.

   **Charts are deliberately untouched.** A chart's colour is its data: the
   series in the age, gender, location and search figures are keyed by colour,
   and recolouring them to fit a brand would change what they say. Plotly draws
   those from the figure itself, and nothing here selects into `.js-plotly-plot`.
   The same goes for a table's cells — only its chrome is restyled.
   -------------------------------------------------------------------------- */

.sb-brand .report-header {
  background: var(--royal);
  border-radius: 4px;
  box-shadow: none;
  color: var(--paper);
  text-align: left;
  padding: 1.5rem 1.75rem;
}
.sb-brand .main-title {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-shadow: none;
}
.sb-brand .client-title { font-size: 1.05rem; opacity: .92; }
.sb-brand .client-subtitle { font-size: .92rem; opacity: .75; }
.sb-brand .copyright { font-size: .72rem; opacity: .6; }
/* A gradient rule is decoration; a hairline is a divider. */
.sb-brand .title-divider {
  height: 1px;
  background: rgba(255, 255, 255, .25);
  margin-top: 1.1rem;
}

/* Table chrome only: the header band and the grid. Cell colour, where a report
   uses it to mean something, is left to the table that set it. */
.sb-brand .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background: var(--paper-tint) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.sb-brand .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  border-color: var(--line) !important;
}
.sb-brand .table-title,
.sb-brand .chart-title { color: var(--royal); }

/* GA4 Audit lists its checks, and GTM Audit its tags and triggers, in Bootstrap
   tables, whose cells hold more than a DataTable cell can (a fold-out, a status
   badge). Same chrome as the DataTables above: a tinted header band, hairline
   grid, cells on paper. */
.sb-brand .ga4-audit-table,
.sb-brand .gtm-audit-table {
  --bs-table-bg: var(--paper);
  --bs-table-color: var(--ink-soft);
  --bs-table-border-color: var(--line);
  font-size: .8rem;
}
.sb-brand .ga4-audit-table th,
.sb-brand .gtm-audit-table th {
  background: var(--paper-tint);
  color: var(--ink);
}
/* A section that opens on demand keeps the marker `display: flex` would drop. */
.sb-brand summary.section-header { display: list-item; cursor: pointer; }
.sb-brand summary.section-header .card-title { display: inline; }
/* It is not the report's first section, whatever `:first-of-type` makes of a `<details>`. */
.sb-brand details.recommendation-section:first-of-type { border-left-color: var(--line); }

/* -- Download PDF ---------------------------------------------------------
   html2pdf lays a copy of the report out in `.html2pdf__container`, draws it
   as one tall image and cuts that image into pages at a fixed height.

   Where it cuts: it moves an element marked `break-inside: avoid` to the next
   page rather than cut through it, so a table row, a card or a paragraph is
   never halved. It has no "keep with what follows", so in the copy a section's
   opening (heading and lead) is measured with room for the table's header and
   first row: with less than that left on the page, the section starts the next.

   What it draws: its renderer does not know `<details>`. It draws the text a
   closed one hides, over the rows below, and numbers the summary ("1.") where
   the browser shows a marker. In the copy, a closed fold-out is its summary
   alone, as it is on screen. */
.ga4-audit-table tr,
.ga4-audit-section-opening,
.ga4_audit-marketing-report .info-card,
.ga4_audit-marketing-report .alert,
.ga4_audit-marketing-report .section-header,
.ga4_audit-marketing-report p,
.gtm-audit-table tr,
.gtm-audit-section-opening,
.gtm_audit-marketing-report .info-card,
.gtm_audit-marketing-report .alert,
.gtm_audit-marketing-report .section-header,
.gtm_audit-marketing-report p { break-inside: avoid; }
.html2pdf__container .ga4-audit-section-opening,
.html2pdf__container .gtm-audit-section-opening { padding-bottom: 12rem; margin-bottom: -12rem; }

/* `!important` because the fold-out's body carries Bootstrap's `d-flex`, which
   sets `display` with `!important` itself. */
.html2pdf__container details:not([open]) > :not(summary) { display: none !important; }
.html2pdf__container summary,
.html2pdf__container summary.section-header { display: block; }
/* The grid, on the cells: the renderer skips a border set on a table row. */
.html2pdf__container .ga4-audit-table th,
.html2pdf__container .ga4-audit-table td,
.html2pdf__container .gtm-audit-table th,
.html2pdf__container .gtm-audit-table td { border: 1px solid var(--line); }

/* Download buttons sit inside the tab body: royal, not Bootstrap blue. */
.sb-brand .btn-primary {
  background: var(--royal);
  border-color: var(--royal);
  border-radius: 4px;
}
.sb-brand .btn-primary:hover,
.sb-brand .btn-primary:focus {
  background: var(--royal-bright);
  border-color: var(--royal-bright);
}

/* ==========================================================================
   Manual Ad Analysis: the campaign map (manual_ads_hierarchy.py).
   One grid for the header and every row, so the four measures line up as
   columns at every depth; depth is carried by the label's indent alone.
   ========================================================================== */

.adtree-table {
  border-top: 1px solid var(--gray-200);
  font-size: .86rem;
  overflow-x: auto;
}
.adtree-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) repeat(4, minmax(6.5rem, 8.5rem));
  gap: .75rem;
  align-items: baseline;
  padding: .35rem .25rem;
  border-bottom: 1px solid var(--gray-200);
  min-width: 46rem;
}
.adtree-header { font-size: .76rem; font-weight: 600; color: var(--gray-500); }
.adtree-num { text-align: right; font-variant-numeric: tabular-nums; }
.adtree-label { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.adtree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adtree-level {
  flex-shrink: 0;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gray-500);
  min-width: 5.5rem;
}
.adtree-detail { flex-shrink: 0; font-size: .76rem; color: var(--gray-500); }

.adtree-row.depth-0 { font-weight: 700; }
.adtree-row.depth-1 { font-weight: 600; }
.adtree-row.depth-1 .adtree-label { padding-left: 1.25rem; }
.adtree-row.depth-2 .adtree-label { padding-left: 2.5rem; }
.adtree-row.depth-3 .adtree-label { padding-left: 3.75rem; }

/* The disclosure triangle sits inside the label's indent rather than before
   the grid, so a leaf and a branch at the same depth still align. */
.adtree-branch > summary { list-style: none; cursor: pointer; }
.adtree-branch > summary::-webkit-details-marker { display: none; }
.adtree-branch > summary .adtree-label::before {
  content: "\25B8";
  flex-shrink: 0;
  width: .8rem;
  color: var(--gray-500);
  transition: transform .12s;
}
.adtree-branch[open] > summary .adtree-label::before { transform: rotate(90deg); }
.adtree-leaf .adtree-label::before { content: ""; flex-shrink: 0; width: .8rem; }
.adtree-branch > summary:hover { background: var(--gray-50, #f8fafc); }

/* -- Campaign recommendations, under the map (manual_ads_recommendations.py) */
.adrec-summary { font-size: .98rem; line-height: 1.55; max-width: 74ch; margin-bottom: 1rem; }
/* The intro: framing, then strategic and tactical in brief (GAds_Search_5.md). */
.adrec-intro {
  border-left: 3px solid var(--blue-500);
  padding: .5rem .9rem;
  max-width: 80ch;
  background: var(--gray-50, #f8fafc);
}
.adrec-intro-title { font-size: .8rem; font-weight: 700; color: var(--gray-700); }
/* Strategic / Tactical within growth and within waste. */
.adrec-horizon { font-size: .8rem; font-weight: 600; color: var(--gray-700); margin: .25rem 0 .35rem; }
.adrec-subhead {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gray-500); margin: 0 0 .5rem;
}
.adrec-card {
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--blue-500);
  border-radius: 4px;
  padding: .75rem .9rem;
  margin-bottom: .6rem;
  max-width: 80ch;
}
.adrec-title { font-weight: 600; margin-right: .5rem; }
.adrec-label { font-weight: 600; color: var(--gray-700); }
.adrec-evidence { color: var(--gray-700); font-variant-numeric: tabular-nums; }
.adrec-test {
  background: var(--gray-50, #f8fafc);
  border-radius: 4px;
  padding: .45rem .6rem;
  margin-top: .4rem;
}
.adrec-reasoning {
  border-top: 1px solid var(--gray-200);
  padding-top: .6rem;
  margin-top: .5rem;
}
.adrec-reasoning > summary { cursor: pointer; color: var(--gray-700); }