/* Reply Ready workspace (portal.html): shared visual system.
   Loads AFTER the page's own <style>, which keeps layout and component rules and now reads every colour from the tokens defined here.
   The tokens mirror the public website (growth-home.css / growth-depth.css): the same navy and light surfaces, the same violet/cobalt, magenta,
   lime, peach/orange and emerald hues, the same fonts and the same remembered theme (localStorage "rr-theme").

   Daily-work rules for this file:
   - colour and depth go AROUND the workspace (atmosphere, headline tiles, cards); dense information (tables, forms, evidence) stays on calm,
     high-contrast surfaces;
   - motion is short and optional: no scroll-linked effects, no tilting tables, nothing that hides controls while scrolling;
   - a colour never carries meaning alone: every status chip also has words and an icon (see STATUS MEANINGS). */

@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

/* ── Tokens: dark (default) ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #050b18; --bg-2: #0a1530; --surface: #101b34; --surface-2: #0d1730;
  --border: rgba(160, 190, 240, .22); --border-soft: rgba(160, 190, 240, .11);
  --text: #edf4ff; --muted: #bccbe4; --faint: #9db0cf;
  --brand: #2f6fe0; --brand-dark: #2459c4; --brand-text: #9bbcff; --on-brand: #ffffff;
  --brand-rgb: 77, 141, 255; --ink-rgb: 190, 210, 245;
  --ok: #5fd4a4; --ok-rgb: 95, 212, 164;
  --warn: #f2b45a; --warn-rgb: 242, 180, 90; --on-warn: #1b1200;
  --danger: #ff8a80; --danger-rgb: 255, 138, 128;
  --sidebar-bg: #081124; --sidebar-text: #bccbe4; --sidebar-text-active: #ffffff; --sidebar-hover: rgba(160, 190, 240, .09); --sidebar-active: rgba(84, 104, 244, .32);
  --card-sheen: linear-gradient(160deg, rgba(30, 48, 88, .92), rgba(13, 22, 45, .86));
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 26px 60px rgba(0, 0, 0, .5);
  --ring: rgba(120, 165, 255, .55);
  --logo-chip: #ffffff;
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* The five hues, as text/accents on this theme */
  --hv-violet: #b7aefc; --hv-cobalt: #8fb0ff; --hv-magenta: #ffadd0; --hv-lime: #e7fa22; --hv-orange: #f6bf95; --hv-emerald: #8fe0b8;
  --hv-violet-bg: rgba(84, 104, 244, .26); --hv-cobalt-bg: rgba(46, 77, 226, .32); --hv-magenta-bg: rgba(241, 63, 130, .22);
  --hv-lime-bg: rgba(231, 250, 34, .16); --hv-orange-bg: rgba(244, 150, 80, .22); --hv-emerald-bg: rgba(52, 125, 85, .36);
  --orb-v: .34; --orb-p: .2; --orb-l: .09; --orb-o: .16; --orb-g: .22;
}
/* ── Tokens: light ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f9ff; --bg-2: #e6f1fd; --surface: #ffffff; --surface-2: #eef5fe;
  --border: rgba(14, 38, 72, .22); --border-soft: rgba(14, 38, 72, .1);
  --text: #0a1a31; --muted: #364c69; --faint: #4d627f;
  --brand: #1e5ee3; --brand-dark: #1850c4; --brand-text: #1a4fc4; --on-brand: #ffffff;
  --brand-rgb: 30, 94, 227; --ink-rgb: 14, 38, 72;
  --ok: #0a6b4a; --ok-rgb: 10, 107, 74;
  --warn: #8a5400; --warn-rgb: 176, 108, 0; --on-warn: #ffffff;
  --danger: #b42318; --danger-rgb: 180, 35, 24;
  --sidebar-bg: #ffffff; --sidebar-text: #364c69; --sidebar-text-active: #0a1a31; --sidebar-hover: rgba(14, 38, 72, .06); --sidebar-active: rgba(84, 104, 244, .14);
  --card-sheen: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(236, 246, 255, .8));
  --shadow-1: 0 1px 2px rgba(10, 26, 49, .06), 0 8px 24px rgba(10, 26, 49, .07);
  --shadow-2: 0 2px 4px rgba(10, 26, 49, .05), 0 26px 60px rgba(10, 26, 49, .16);
  --ring: rgba(30, 94, 227, .4);
  --logo-chip: transparent;
  --hv-violet: #4a4fe0; --hv-cobalt: #1a4fc4; --hv-magenta: #b81d5f; --hv-lime: #566600; --hv-orange: #8c4d28; --hv-emerald: #1a6a43;
  --hv-violet-bg: rgba(84, 104, 244, .13); --hv-cobalt-bg: rgba(46, 77, 226, .12); --hv-magenta-bg: rgba(241, 63, 130, .11);
  --hv-lime-bg: rgba(146, 165, 27, .2); --hv-orange-bg: rgba(172, 108, 70, .15); --hv-emerald-bg: rgba(52, 125, 85, .15);
  --orb-v: .22; --orb-p: .16; --orb-l: .16; --orb-o: .16; --orb-g: .14;
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
body { font-family: var(--font-body); background: var(--bg); color: var(--text); position: relative; }
h1, h2, h3, h4, .page-title, .auth-logo, .set-card-title, .sidebar-brand { font-family: var(--font-head); }
/* Atmosphere: five coloured light sources, fixed behind the whole workspace. Static: it never moves with scroll. */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 34% at 8% 4%, rgba(84, 104, 244, var(--orb-v)), transparent 70%),
    radial-gradient(34% 32% at 94% 8%, rgba(241, 63, 130, var(--orb-p)), transparent 70%),
    radial-gradient(26% 28% at 88% 52%, rgba(231, 250, 34, var(--orb-l)), transparent 70%),
    radial-gradient(32% 34% at 2% 56%, rgba(244, 150, 80, var(--orb-o)), transparent 70%),
    radial-gradient(40% 36% at 52% 106%, rgba(52, 125, 85, var(--orb-g)), transparent 70%); }
#app, #auth-gate, #billing-gate, #loading-screen { position: relative; z-index: 1; }
#app .main { position: relative; z-index: 1; }
.sidebar { z-index: 40; }
:focus-visible { outline-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ── Sign-in and billing gates ──────────────────────────────────────────────────────────────────────────────────────────────── */
#auth-gate, #billing-gate { background: transparent; color: var(--text); }
#auth-gate::before { background: radial-gradient(circle, rgba(var(--brand-rgb), .16), transparent 68%); }
.auth-card, .billing-card { background: var(--card-sheen); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
.auth-card::before, .billing-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #5468F4, #F13F82, #F49650, #E7FA22); }
.auth-logo img { padding: 6px 12px; border-radius: 12px; background: var(--logo-chip); box-sizing: content-box; }
.auth-card input, #auth-gate select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 14px; min-height: 48px; font-family: var(--font-body); }
.auth-card input:hover, #auth-gate select:hover { border-color: var(--brand); }
.auth-card input:focus, .auth-card input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); outline: none; }
.auth-card button, .billing-card button { background: var(--brand); color: var(--on-brand); border-radius: 14px; min-height: 48px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -10px rgba(var(--brand-rgb), .8); }
.auth-card button:hover:not(:disabled), .billing-card button:hover:not(:disabled) { background: var(--brand-dark); }
.auth-card button:focus-visible, .billing-card button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.auth-error, .billing-card .billing-error { color: var(--danger); }
.theme-btn-gate { position: absolute; top: 18px; right: 18px; z-index: 3; }

/* Theme switch (top bar and gates) */
.theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s; }
.theme-btn:hover { background: rgba(var(--brand-rgb), .12); color: var(--text); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; } :root[data-theme="light"] .theme-btn .i-sun { display: none; }

/* ── Shell ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sidebar { border-right: 1px solid var(--border-soft); }
.sidebar-brand { font-family: var(--font-head); letter-spacing: -.02em; }
.nav-item { border-radius: 12px; min-height: 40px; }
#nav-growth:checked ~ .sidebar .nav-item[for="nav-growth"] { background: linear-gradient(135deg, rgba(84, 104, 244, .42), rgba(241, 63, 130, .26)); }
.sidebar-nav .nav-item[for="nav-growth"] { font-weight: 700; }
.topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); }
.btn-signout, .topbar-search { border-radius: 999px; }
.page-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.page-subtitle { color: var(--muted); font-size: 14px; }

/* ── Cards, buttons, forms (shared by every screen) ─────────────────────────────────────────────────────────────────────────── */
.set-card, .pb-card, .gr-stat, .gr-col, .wd-metric, .wd-actions li, .cp-stage { background: var(--surface); border-color: var(--border); }
.set-card { border-radius: 18px; box-shadow: var(--shadow-1); }
.set-card-title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.set-btn-primary { border-radius: 12px; background: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -10px rgba(var(--brand-rgb), .9); transition: background-color .15s, transform .15s var(--ease); }
.set-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.set-btn-primary:disabled { background: var(--faint); color: var(--bg); }
.set-btn-secondary { border-radius: 12px; color: var(--text); border-color: var(--border); background: transparent; }
.set-btn-secondary:hover:not(:disabled) { background: rgba(var(--brand-rgb), .1); border-color: var(--brand); }
.set-link { border-radius: 10px; color: var(--brand-text); }
.set-form-row input, .set-form-row textarea, .gr-form select, .gr-form input, .gr-form textarea { background: var(--surface-2); color: var(--text); border-color: var(--border); border-radius: 12px; }
.set-form-row input:focus, .set-form-row textarea:focus, .gr-form select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.set-form-hint, .set-note { color: var(--faint); }
a { color: var(--brand-text); }
#gr-root :is(button, a, input, select, textarea, summary):focus-visible, #access-root :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ── STATUS MEANINGS (fixed across the workspace; colour is never the only signal: each chip has words and a leading icon) ────────
   emerald  confirmed, complete, ready, healthy            icon check
   orange   needs care: a hypothesis, sample data, a limit  icon exclamation
   violet   researched, company fit, in progress            icon open circle
   cobalt   information, contacted                          icon dot
   magenta  needs your action, a decision or an addition     icon plus
   lime     qualified, a positive outcome                    icon star
   red      failed, blocked, lost                            icon cross                                                               */
.pb-badge, .status-badge, .gr-tag { display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; }
.pb-badge::before { font-weight: 800; font-size: 11px; }
.pb-badge.active { background: var(--hv-emerald-bg); color: var(--hv-emerald); } .pb-badge.active::before { content: "\2713"; }
.pb-badge.unavailable { background: var(--hv-orange-bg); color: var(--hv-orange); } .pb-badge.unavailable::before { content: "!"; }
.pb-badge.needs-setup { background: var(--hv-violet-bg); color: var(--hv-violet); } .pb-badge.needs-setup::before { content: "\25CB"; }
.pb-badge.disabled { background: rgba(var(--ink-rgb), .09); color: var(--muted); }
.pb-badge.failed { background: rgba(var(--danger-rgb), .16); color: var(--danger); } .pb-badge.failed::before { content: "\00D7"; }
.pb-badge.skipped { background: var(--hv-orange-bg); color: var(--hv-orange); }
.gr-tag.sure { background: var(--hv-emerald-bg); color: var(--hv-emerald); } .gr-tag.maybe { background: var(--hv-orange-bg); color: var(--hv-orange); }
.gr-sample { background: var(--hv-orange-bg); color: var(--hv-orange); border-color: rgba(244, 150, 80, .55); }
.gr-banner { border-radius: 14px; background: var(--surface); border-color: var(--border); }
.gr-banner.warn { background: var(--hv-orange-bg); border-color: rgba(244, 150, 80, .5); }
.gr-banner.ok { background: var(--hv-emerald-bg); border-color: rgba(52, 125, 85, .6); }
.gr-banner.err { background: rgba(var(--danger-rgb), .12); border-color: rgba(var(--danger-rgb), .5); color: var(--danger); }

/* ── Growth: tabs ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.gr-tabs { gap: 8px; margin: 6px 0 22px; }
.gr-tab { border-radius: 999px; background: var(--surface); border-color: var(--border); color: var(--muted); min-height: 40px; padding: 8px 16px; transition: background-color .15s, border-color .15s, color .15s; }
.gr-tab:hover { background: rgba(var(--brand-rgb), .1); color: var(--text); border-color: var(--brand); }
.gr-tab.on { background: linear-gradient(135deg, #5468F4, #2E4DE2); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -12px rgba(84, 104, 244, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ── Growth: overview and next actions (headline tiles are the dimensional cards; the lists beneath stay calm) ───────────────── */
.wd-metrics { gap: 14px; }
.wd-metric { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .2); color: #fff; background: var(--tile-bg, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 44px -26px var(--tile-shadow, rgba(84, 104, 244, .6)), 0 8px 16px -10px rgba(0, 0, 0, .4); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.wd-metric::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 55% at 50% -10%, rgba(255, 255, 255, .26), transparent 72%); }
.wd-metric:hover, .wd-metric:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, .5); outline: none; }
.wd-metric:focus-visible { box-shadow: 0 0 0 3px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .45); }
.wd-metric b { font-family: var(--font-head); font-size: 30px; letter-spacing: -.03em; color: inherit; }
.wd-metric span { color: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 600; }
.wd-metric:nth-child(4n+1) { --tile-bg: linear-gradient(180deg, #A9A0F8 0%, #5468F4 14%, #2E4DE2 32%, #0C184D 72%, #050A26 100%); --tile-shadow: rgba(84, 104, 244, .65); }
.wd-metric:nth-child(4n+2) { --tile-bg: linear-gradient(180deg, #FAA6C9 0%, #F13F82 13%, #C02B68 28%, #953A60 48%, #480826 82%, #240312 100%); --tile-shadow: rgba(241, 63, 130, .6); }
.wd-metric:nth-child(4n+3) { --tile-bg: linear-gradient(180deg, #D4A37F 0%, #B8703F 12%, #8C5230 34%, #5a3015 62%, #2C1504 100%); --tile-shadow: rgba(172, 108, 70, .6); }
.wd-metric:nth-child(4n+4) { --tile-bg: linear-gradient(180deg, #79B49B 0%, #347D55 13%, #1B5A40 34%, #0E3729 66%, #04120D 100%); --tile-shadow: rgba(52, 125, 85, .6); }
.wd-bar { background: rgba(255, 255, 255, .28); } .wd-bar i { background: #fff; }
.wd-actions li { border-radius: 14px; border-left: 4px solid var(--hv-magenta); }
.wd-actions li:nth-child(3n+2) { border-left-color: var(--hv-violet); } .wd-actions li:nth-child(3n+3) { border-left-color: var(--hv-emerald); }
.gr-today .gr-sec { border-radius: 18px; }
.cp-stage { border-radius: 14px; border-top: 4px solid var(--hv-violet); }
.cp-stage:nth-of-type(2) { border-top-color: var(--hv-cobalt); } .cp-stage:nth-of-type(3) { border-top-color: var(--hv-emerald); } .cp-stage:nth-of-type(4) { border-top-color: var(--hv-orange); } .cp-stage:nth-of-type(5) { border-top-color: var(--hv-lime); }
.cp-step.done .tick, .gr-steps li.done .tick, .cp-checks li.done .tick { color: var(--ok); }
.cp-step.current { color: var(--brand-text); }

/* ── Growth: stat tiles (quiet: a coloured edge, not a filled card) ─────────────────────────────────────────────────────────── */
.gr-stats { gap: 12px; }
.gr-stat { border-radius: 16px; border-left: 4px solid var(--hv-violet); box-shadow: var(--shadow-1); }
.gr-stat:nth-child(4n+2) { border-left-color: var(--hv-magenta); } .gr-stat:nth-child(4n+3) { border-left-color: var(--hv-orange); } .gr-stat:nth-child(4n+4) { border-left-color: var(--hv-emerald); }
.gr-stat b { font-family: var(--font-head); letter-spacing: -.02em; }
.gr-stat span { color: var(--muted); }

/* ── Growth: pipeline board (stage colours match the website's sample: researched violet, contacted cobalt, replied emerald, qualified lime) */
.gr-board { gap: 14px; }
.gr-col { border-radius: 18px; border-top: 4px solid var(--hv-violet); }
.gr-col:nth-child(4n+2) { border-top-color: var(--hv-cobalt); } .gr-col:nth-child(4n+3) { border-top-color: var(--hv-emerald); } .gr-col:nth-child(4n+4) { border-top-color: var(--hv-lime); }
.gr-col-head { color: var(--muted); }
.gr-card { border-radius: 12px; background: var(--surface-2); border-color: var(--border-soft); transition: border-color .15s, transform .15s var(--ease); }
.gr-card:hover { border-color: var(--brand); }

/* ── Growth: tables ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.gr-table { font-size: 13px; }
.gr-table th { color: var(--muted); font-family: var(--font-body); background: var(--surface-2); }
.gr-table tbody tr { transition: background-color .12s; }
.gr-table tbody tr:hover { background: rgba(var(--brand-rgb), .07); }
.gr-scroll { border-radius: 14px; }

/* ── Growth: Prospects (table plus detail panel, as in the website's sample workspace) ──────────────────────────────────────────── */
.pr-top { display: grid; gap: 14px; }
.pr-split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1180px) { .pr-split.has-detail { grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr); } }
@media (max-width: 1179px) { .pr-split.has-detail .pr-list { display: none; } }
.pr-list, .pr-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: start; }   /* minmax(0,1fr): an auto column grows to the table's width and defeats .gr-scroll */
.pr-detail { position: relative; }
@media (min-width: 1180px) { .pr-detail { position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); overflow: auto; padding-right: 2px; overscroll-behavior: contain; } }
.pr-detail > .set-card:first-of-type { border-top: 5px solid var(--hv-violet); }
.pr-table th, .pr-table td { vertical-align: middle; }
.pr-table .pr-name { all: unset; cursor: pointer; font-weight: 700; color: var(--text); font-size: 13.5px; line-height: 1.3; border-radius: 6px; }
.pr-table .pr-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pr-table .pr-name:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.pr-table tbody tr.is-sel { background: rgba(84, 104, 244, .16); box-shadow: inset 4px 0 0 #5468F4; }
.pr-table tbody tr.is-sel td:first-child { border-radius: 0; }
.pr-table .pr-sub { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
/* three readings kept visibly apart: company fit, buyer-role relevance, contact readiness */
.rd { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font: 700 11.5px/1.3 var(--font-body); white-space: nowrap; }
.rd::before { font-weight: 800; }
.rd.fit-strong { background: var(--hv-lime-bg); color: var(--hv-lime); } .rd.fit-strong::before { content: "\2605"; }
.rd.fit-good { background: var(--hv-emerald-bg); color: var(--hv-emerald); } .rd.fit-good::before { content: "\2713"; }
.rd.fit-poss { background: var(--hv-orange-bg); color: var(--hv-orange); } .rd.fit-poss::before { content: "!"; }
.rd.fit-none { background: rgba(var(--ink-rgb), .09); color: var(--muted); }
.rd.role-ok { background: var(--hv-violet-bg); color: var(--hv-violet); } .rd.role-ok::before { content: "\2713"; }
.rd.role-none { border: 1px dashed var(--hv-magenta); color: var(--hv-magenta); padding: 2px 9px; } .rd.role-none::before { content: "+"; }
.rd.ct-ok { background: var(--hv-emerald-bg); color: var(--hv-emerald); } .rd.ct-ok::before { content: "\2713"; }
.rd.ct-add { border: 1px dashed var(--hv-magenta); color: var(--hv-magenta); padding: 2px 9px; } .rd.ct-add::before { content: "+"; }
.pr-kv { display: grid; gap: 4px; }
.pr-kv > b { font: 700 10.5px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pr-readings { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pr-readings > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-soft); display: grid; gap: 6px; align-content: start; }
.pr-readings > div:nth-child(1) { border-top: 3px solid var(--hv-violet); } .pr-readings > div:nth-child(2) { border-top: 3px solid var(--hv-cobalt); } .pr-readings > div:nth-child(3) { border-top: 3px solid var(--hv-emerald); }
.pr-readings small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pr-more { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-2); padding: 0 14px; }
.pr-more > summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 13px; color: var(--brand-text); min-height: 44px; display: flex; align-items: center; }
.pr-more[open] > summary { border-bottom: 1px solid var(--border-soft); margin-bottom: 10px; }
.pr-more[open] { padding-bottom: 14px; }
.pr-filters { border-radius: 18px; }
.pr-filters > summary { cursor: pointer; font-weight: 800; font-family: var(--font-head); font-size: 14px; padding: 4px 0; min-height: 40px; display: flex; align-items: center; justify-content: space-between; }
.pr-pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 2px; }
.pr-skeleton { height: 54px; border-radius: 14px; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: pr-shimmer 1.4s linear infinite; }
@keyframes pr-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pr-skeleton { animation: none; } }
.pr-detail-enter { animation: pr-in .22s var(--ease); }
@keyframes pr-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* ── Growth: usage, results, integrations (calm cards, coloured meters) ─────────────────────────────────────────────────────── */
.p5-bar { background: rgba(var(--ink-rgb), .14); } .p5-bar i { background: linear-gradient(90deg, #5468F4, #F13F82); }
.gr-bar i { background: rgba(var(--ink-rgb), .14); } .gr-bar i b { background: linear-gradient(90deg, #5468F4, #A9A0F8); }
.pb-card { border-radius: 18px; box-shadow: var(--shadow-1); border-top: 4px solid var(--hv-violet); }
.pb-grid > .pb-card:nth-child(4n+2) { border-top-color: var(--hv-magenta); } .pb-grid > .pb-card:nth-child(4n+3) { border-top-color: var(--hv-orange); } .pb-grid > .pb-card:nth-child(4n+4) { border-top-color: var(--hv-emerald); }
.pb-stat { border-radius: 999px; }
.gr-primary-q { background: var(--hv-violet-bg); border-color: rgba(84, 104, 244, .5); border-radius: 14px; }
.gr-draft, .gr-panel, .p5-run, .cp-box { background: var(--surface-2); border-color: var(--border-soft); }
.gr-ev a, .gr-find a, .gr-details a, .gr-details summary { color: var(--brand-text); }
.gr-quote { border-left-color: var(--hv-violet); }

/* ── Phones: stacked, comfortable targets ───────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-title { font-size: 1.35rem; }
  .gr-tab { min-height: 44px; }
  .wd-metric b { font-size: 26px; }
  .theme-btn { width: 44px; height: 44px; }
}

/* Prospects: list columns, filters, progressive-disclosure blocks in the detail panel */
.pr-split.has-detail .pr-opt { display: none; }
.pr-split.has-detail .pr-actions .set-btn-secondary:not(:first-child) { display: none; }
.pr-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.pr-filters-sum { list-style: revert; }
.pr-filters .set-form-actions { margin-top: 14px; }
.pr-more > .set-card { border: 0; box-shadow: none; padding: 0 0 4px; background: transparent; }
.pr-detail .set-card { padding: 16px; }
.pr-table .pb-badge { margin: 2px 0; }
.pr-table .rd { margin: 1px 0; }
.pr-table .pr-sub { max-width: 28ch; }
.pr-filters-sum { list-style: none; cursor: pointer; font-weight: 800; font-family: var(--font-head); font-size: 14px; min-height: 40px; display: flex; align-items: center; gap: 10px; }
.pr-filters-sum::-webkit-details-marker { display: none; }
.pr-filters-sum::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease); }
.pr-filters[open] > .pr-filters-sum::after { transform: rotate(-135deg); }
.pr-more > summary { list-style: none; }
.pr-more > summary::-webkit-details-marker { display: none; }
.pr-more > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease); }
.pr-more[open] > summary::after { transform: rotate(-135deg); }
.pr-list > *, .pr-detail > * { min-width: 0; max-width: 100%; }
.pr-split.has-detail .pr-table .pr-sub { max-width: 20ch; }
.pr-split.has-detail .pr-actions { display: none; }
.pr-table .pr-name { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.pr-table .pr-name:hover { text-decoration-color: currentColor; }

/* Phones: nothing may widen the page. The closed drawer sits off-screen to the right (translateX 100%), so clip it to its own box; wide tables
   scroll inside .gr-scroll instead. */
.lead-drawer { overflow: hidden; }
.lead-drawer-panel { max-width: 100vw; }
.gr-scroll { max-width: 100%; position: relative; }   /* position: the visually-hidden (absolute) header labels inside a wide table must be clipped by the scroller, not escape it */
.gr-scroll > table { min-width: 100%; }
.lead-drawer-panel, .pr-detail { overflow-wrap: anywhere; }   /* long emails and URLs wrap inside the panel instead of widening it */

/* Spacing and wrapping found in the visual review */
.set-card > .gr-stats { margin: 12px 0; }
.cp-flow-sm .cp-arrow { display: none; }   /* a chevron that wraps onto its own line reads as a stray mark; each step is its own chip instead */
.cp-flow-sm { gap: 6px; }
.cp-flow-sm .cp-step { white-space: nowrap; padding: 3px 10px; border: 1px solid var(--border-soft); border-radius: 999px; }
.cp-flow-sm .cp-step.current { border-color: var(--brand); }