/* ============================================================================
   BuyerPath theme — the single source of truth for site-wide styling.
   Linked LAST in every templates/buyerpath/*.html page (after the inline
   <style>), so it governs color + depth. To restyle the whole app, edit
   THIS file. Page templates keep only their own layout in their <style>.
   Palette derived from the logo: teal-green "Buyer" + orange "Path".
   ============================================================================ */

:root {
  --bp-primary: #1f7a6b;          /* teal-green — primary actions, links */
  --bp-primary-deep: #155e52;
  --bp-primary-soft: #e7f2ef;     /* teal tint — result panels, fills */
  --bp-accent: #e3852f;           /* orange — accents, bars, highlights */
  --bp-accent-ink: #a8530f;       /* readable burnt-orange for small text */
  --bp-accent-soft: #fcecd9;      /* orange tint — highlight cards */
  --bp-accent-line: #f0d6b6;

  --bp-ink: #172b27;              /* warm near-black — headings */
  --bp-ink-soft: #33453f;         /* body text */
  --bp-muted: #67767d;            /* secondary text */
  --bp-bg: #f1f6f4;               /* faint cool tint, not flat gray */
  --bp-card: #ffffff;
  --bp-line: #e2ece8;

  --bp-shadow: 0 1px 2px rgba(16,40,34,.04), 0 6px 18px rgba(16,40,34,.05);
  --bp-shadow-hover: 0 2px 5px rgba(16,40,34,.07), 0 14px 32px rgba(16,40,34,.10);
  --bp-radius: 16px;
}

/* ---- base ---------------------------------------------------------------- */
body { background: var(--bp-bg); color: var(--bp-ink-soft); }

/* ---- header / brand chrome ---------------------------------------------- */
header.site {
  background: var(--bp-card);
  border-bottom: 1px solid var(--bp-line);
  box-shadow: 0 1px 0 rgba(16,40,34,.02);
}
.back, .signout { color: var(--bp-muted); transition: color .15s; }
.back:hover, .signout:hover { color: var(--bp-primary); }

/* ---- headings ------------------------------------------------------------ */
.hero h1, .pagehead h1 { color: var(--bp-ink); letter-spacing: -.01em; }
.pagehead p, .hero p { color: var(--bp-muted); }

/* ---- cards: depth + lift ------------------------------------------------- */
.card, .agent-card, .ready-card, .prog {
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow);
}
.agent-card, .ready-card { position: relative; overflow: hidden; }

/* tappable cards lift on hover/active */
a.ready-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.ready-card:hover { transform: translateY(-2px); box-shadow: var(--bp-shadow-hover); border-color: #cfe0da; }
a.ready-card:active { transform: translateY(0); }
.prog { transition: box-shadow .15s ease, border-color .15s ease; }
.prog:hover { box-shadow: var(--bp-shadow-hover); border-color: #cfe0da; }

/* Cards are differentiated by per-card colored ICON tiles (see client_home.html),
   not left stripes. */

/* ---- color hierarchy inside cards --------------------------------------- */
/* eyebrow label = warm accent; title = ink; CTA = teal.
   Scoped to match the inline card selectors' specificity so the theme wins. */
.label,
.agent-card .label, .ready-card .label { color: var(--bp-accent-ink); letter-spacing: .06em; }
.ready-card .score, .agent-card .name { color: var(--bp-ink); }
.agent-card .co, .ready-card .score span { color: var(--bp-muted); }
.ready-card .cta { color: var(--bp-primary); font-weight: 600; }
a.ready-card:hover .cta { color: var(--bp-primary-deep); }

/* ---- pills / badges ------------------------------------------------------ */
/* .track ("BUYING") stays solid teal via the recolored token; only the
   programs type badge (hardcoded blue inline) needs an explicit override. */
.badge { background: var(--bp-primary-soft); color: var(--bp-primary-deep); font-weight: 700; }

/* ---- primary buttons ----------------------------------------------------- */
button.calc, .composer button, .consent button, .bp-btn {
  background: linear-gradient(180deg, var(--bp-primary) 0%, var(--bp-primary-deep) 100%);
  box-shadow: 0 1px 2px rgba(16,40,34,.10), 0 4px 12px rgba(31,122,107,.22);
  transition: filter .15s ease, transform .05s ease;
}
button.calc:hover, .composer button:hover, .consent button:hover, .bp-btn:hover { filter: brightness(1.06); }
button.calc:active, .composer button:active, .consent button:active, .bp-btn:active { transform: translateY(1px); }

/* ---- inputs: teal focus ring -------------------------------------------- */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--bp-primary);
  box-shadow: 0 0 0 3px rgba(31,122,107,.15);
}

/* ---- tools: tabs + result ------------------------------------------------ */
.tabs button.active { background: var(--bp-primary); border-color: var(--bp-primary); }
.tabs button { transition: background .12s, color .12s, border-color .12s; }
.result { background: var(--bp-primary-soft); }
.result .big { color: var(--bp-primary-deep); }

/* ---- programs ------------------------------------------------------------ */
.prog-name { color: var(--bp-ink); }
.benefit b { color: var(--bp-accent-ink); }   /* the $ amount pops in orange */
.reason { background: var(--bp-primary-soft); border-color: #cfe6e0; color: var(--bp-primary-deep); }
.link { color: var(--bp-primary); }

/* ---- chat ---------------------------------------------------------------- */
.msg.user .bubble { background: var(--bp-primary); }

/* ---- realtor pages (dashboard / invites / client detail) ---------------- */
/* match the client side's card depth (.card already gets it above) */
.col, .panel, .inv, .insights { box-shadow: var(--bp-shadow); }
/* primary realtor buttons get the same gradient + shadow as the client side */
.btn, .btn-email, .btn-primary, .analyze-btn {
  background: linear-gradient(180deg, var(--bp-primary) 0%, var(--bp-primary-deep) 100%);
  box-shadow: 0 1px 2px rgba(16,40,34,.10), 0 4px 12px rgba(31,122,107,.22);
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover, .btn-email:hover, .btn-primary:hover, .analyze-btn:hover { filter: brightness(1.06); }
.btn:active, .btn-email:active, .btn-primary:active, .analyze-btn:active { transform: translateY(1px); }

/* ---- logo: one size across every page (change here = site-wide) -------- */
.bp-logo { height: clamp(60px, 9vw, 104px); width: auto; display: block; }

/* ---- client-type balloons: buyer = teal, seller = orange, both = blend - */
.type-pill {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #fff; padding: 2px 8px; border-radius: 999px;
}
.type-pill.buyer  { background: var(--bp-primary); }
.type-pill.seller { background: #c0631a; }
.type-pill.both   { background: linear-gradient(90deg, var(--bp-primary) 0%, #c0631a 100%); }
/* client home "Buying / Selling / Both" track badge uses the same scheme */
.track.seller { background: #c0631a; }
.track.both   { background: linear-gradient(90deg, var(--bp-primary) 0%, #c0631a 100%); }

/* ---- chat history drawer (buyer chat + realtor coach) ------------------ */
.hist-btn {
  background: none; border: 1px solid var(--bp-line, #e6eaf0); color: var(--bp-muted, #5b6472);
  font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
  padding: 7px 11px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px;
}
.hist-btn:hover { background: #eef2f7; color: var(--bp-ink, #0f172a); }
.hist-btn .hb-ico { font-size: 14px; }

.cd-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .38);
  opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 60;
}
.cd-overlay.open { opacity: 1; visibility: visible; }
.chat-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 290px; max-width: 84vw;
  background: #fff; border-right: 1px solid var(--bp-line, #e6eaf0);
  transform: translateX(-100%); transition: transform .22s ease; z-index: 61;
  display: flex; flex-direction: column;
}
.chat-drawer.open { transform: none; box-shadow: 6px 0 24px rgba(15,23,42,.12); }
.chat-drawer .cd-head {
  flex: 0 0 auto; padding: 14px 16px; border-bottom: 1px solid #eef1f6;
  display: flex; align-items: center; justify-content: space-between;
}
.chat-drawer .cd-head h3 { margin: 0; font-size: 15px; color: var(--bp-ink, #0f172a); }
.cd-close { background: none; border: none; font-size: 17px; color: #8a94a3; cursor: pointer; line-height: 1; padding: 2px 4px; }
.cd-close:hover { color: var(--bp-ink, #0f172a); }
.cd-new {
  flex: 0 0 auto; margin: 12px 14px 6px; display: block; text-align: center;
  background: var(--bp-primary, #1f7a6b); color: #fff; border-radius: 10px;
  padding: 10px; font-weight: 700; font-size: 14px;
}
.cd-new:hover { filter: brightness(1.06); }
.cd-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 10px 16px; }
.cd-item { display: flex; align-items: center; gap: 4px; border-radius: 9px; padding: 2px 4px 2px 0; }
.cd-item:hover { background: #f4f7fa; }
.cd-item.active { background: #e7f1ef; }
.cd-item .cd-link { flex: 1 1 auto; min-width: 0; padding: 9px 8px 9px 10px; }
.cd-item .cd-title { font-size: 14px; font-weight: 600; color: var(--bp-ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-item .cd-when { font-size: 11px; color: #8a94a3; margin-top: 1px; }
.cd-del { background: none; border: none; color: #c3cad4; cursor: pointer; font-size: 13px; padding: 6px; border-radius: 7px; flex: 0 0 auto; line-height: 1; }
.cd-del:hover { color: #d04545; background: #fbeaea; }
.cd-empty { color: #8a94a3; font-size: 13px; padding: 16px 12px; text-align: center; }

/* ---- native shell (Capacitor, F6) ---------------------------------------- */
/* Paint <html> so the shell background never shows through short pages
   (capacitor.config.json ios.backgroundColor). */
html { background: var(--bp-bg); }
/* viewport-fit=cover + contentInset "never": pad the chrome below the
   notch/status bar. buyerpath-native.js tags <html> with these classes. */
html.capacitor header.site { padding-top: env(safe-area-inset-top); }
html.capacitor .chat-drawer { padding-top: env(safe-area-inset-top); }
/* Android 15 edge-to-edge doesn't reliably populate env() in the WebView —
   fixed fallback, same approach as LoanSpace's style-bundle.css. */
html.capacitor-android header.site { padding-top: 32px; }
html.capacitor-android .chat-drawer { padding-top: 32px; }
html.capacitor body { padding-bottom: env(safe-area-inset-bottom); }