/* ── Tokens (aligned to the marketing site at innovite.io) ── */
:root {
  --bg: #0b0c11;
  --s1: #14151d;
  --s2: #1a1c25;
  --s3: #242732;
  --border: rgba(255,255,255,.05);
  --b2: rgba(255,255,255,.09);
  --t1: #ecedf3;
  --t2: #9a9da8;
  --t3: #5e6069;
  --accent:      #8FB7FF;                    /* primary accent: light periwinkle */
  --accent-h:    #a8c8ff;
  --accent-bg:   rgba(143,183,255,.10);
  --accent-bg2:  rgba(143,183,255,.05);
  --accent-deep: #3d7cf5;                    /* saturated variant for charts / full-bleed only */
  --green:    #3ecf8e;
  --green-bg: rgba(62,207,142,.08);
  --amber:    #e8a43a;
  --amber-bg: rgba(232,164,58,.08);
  --red:      #ef4444;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(.2,.6,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family:'Outfit', sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  color:var(--t1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  display:grid;
  grid-template-columns: 220px 1fr;
  min-height:100vh;
}

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

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  background:var(--s1);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:18px 14px;
  position:sticky;
  top:0;
  height:100vh;
}

.sb-top {
  padding:6px 8px 18px;
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.sb-logo {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--accent);
}
.sb-mark { height:13px; width:auto; flex-shrink:0; }
.sb-word {
  font-family:'Outfit', sans-serif;
  font-size:17px;
  font-weight:600;
  color:var(--t1);
  letter-spacing:-.3px;
  line-height:1;
}
.sb-eyebrow {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.5px;
  color:var(--t3);
  text-transform:uppercase;
  margin-top:8px;
  padding-left:30px;
}

.sb-nav {
  display:flex;
  flex-direction:column;
  gap:1px;
  flex:1;
}
.sb-item {
  position:relative;
  display:flex;
  align-items:center;
  padding:8px 12px;
  font-size:13.5px;
  font-weight:400;
  color:var(--t2);
  border-radius:var(--r-sm);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sb-item:hover { background:var(--s2); color:var(--t1); }
.sb-item.is-active { background:var(--s2); color:var(--t1); font-weight:500; }
.sb-item.is-active::before {
  content:'';
  position:absolute;
  left:-14px;
  top:50%;
  width:2px;
  height:18px;
  background:var(--accent);
  border-radius:2px;
  transform:translateY(-50%);
}

.sb-foot {
  padding:14px 8px 4px;
  border-top:1px solid var(--border);
}
.sb-user-name { font-size:13px; font-weight:500; color:var(--t1); }
.sb-user-mail { font-size:11.5px; color:var(--t3); }

/* ── Main ────────────────────────────────────────────── */
.main {
  padding:32px 36px 60px;
  max-width:1400px;
  width:100%;
}
.page-title {
  font-family:'Newsreader', serif;
  font-size:28px;
  font-weight:400;
  letter-spacing:-.4px;
  line-height:1.15;
  margin-bottom:6px;
  color:var(--t1);
}
.page-sub {
  font-size:13.5px;
  color:var(--t2);
  font-weight:300;
  margin-bottom:28px;
}

/* ── Reusable blocks ─────────────────────────────────── */
.card {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:20px;
}

.placeholder {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:56px 24px;
  text-align:center;
  color:var(--t3);
  font-size:13.5px;
}
.placeholder strong { color:var(--t2); font-weight:500; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:var(--t1);
  background:var(--s2);
  border:1px solid var(--b2);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background:var(--s3); border-color:rgba(255,255,255,.16); }
.btn-primary {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);                  /* dark text on light accent — matches marketing .btn-a */
  font-weight:600;
}
.btn-primary:hover {
  background:var(--accent-h);
  border-color:var(--accent-h);
  box-shadow:0 2px 12px rgba(143,183,255,.30);
}
.btn-primary:disabled:hover { box-shadow:none; }

/* ── Banners ─────────────────────────────────────────── */
.banner {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 16px;
  margin-bottom:18px;
  border-radius:var(--r-sm);
  font-size:13px;
  line-height:1.5;
}
.banner-err {
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.20);
  color:#fca5a5;
}
.banner-err strong { color:#fda4a4; font-weight:600; }
.banner-detail { font-family:'SF Mono','Menlo',monospace; font-size:11.5px; color:var(--t3); }

/* ── Page head ───────────────────────────────────────── */
.page-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:28px;
}
.page-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}
.btn-icon { font-size:13px; line-height:1; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ── Metric cards ────────────────────────────────────── */
.metrics {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  gap:1px;
  margin-bottom:24px;
}
.metric {
  background:var(--s1);
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.metric-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--t3);
}
.metric-value {
  font-family:'Newsreader', serif;
  font-size:32px;
  font-weight:400;
  color:var(--t1);
  line-height:1;
  letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.metric-change {
  font-size:11.5px;
  color:var(--t3);
  margin-top:auto;
  padding-top:6px;
}
.metric-change.up   { color:var(--green); }
.metric-change.down { color:var(--red); }
.metric-change.flat { color:var(--t3); }

@media (max-width: 980px) {
  .metrics { grid-template-columns:repeat(2, 1fr); }
}

/* ── Card title (used by chart + activity) ──────────── */
.card-title {
  font-size:12.5px;
  font-weight:600;
  color:var(--t2);
  margin-bottom:14px;
  letter-spacing:.2px;
}

/* ── Chart card ──────────────────────────────────────── */
.chart-card { margin-bottom:24px; padding:20px 22px; }
.chart-wrap { height:220px; }

/* ── Activity feed ───────────────────────────────────── */
.activity-card { padding:20px 22px 12px; }
.activity-feed { display:flex; flex-direction:column; }
.activity-row {
  display:grid;
  grid-template-columns: 14px 1fr auto;
  align-items:center;
  gap:12px;
  padding:9px 4px;
  border-top:1px solid var(--border);
  font-size:13.5px;
}
.activity-row:first-child { border-top:none; }
.activity-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
  justify-self:center;
}
.dot-blue  { background:var(--accent); }
.dot-green { background:var(--green);  }
.dot-amber { background:var(--amber);  }
.activity-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-label  { color:var(--t1); font-weight:500; }
.activity-detail { color:var(--t2); font-weight:300; }
.activity-time   { color:var(--t3); font-size:12px; font-variant-numeric:tabular-nums; }

.empty {
  padding:36px 16px;
  text-align:center;
  color:var(--t3);
  font-size:13px;
}

/* ── Clients page (Step 4) ───────────────────────────── */
.client-list { display:flex; flex-direction:column; gap:14px; }
.client-row {
  display:block;
  background:var(--s1);
  border:1px solid var(--border);
  border-left-width:3px;
  border-left-color:transparent;   /* coloured per op-state below */
  border-radius:var(--r-md);
  padding:20px 22px 18px;
  text-decoration:none;
  color:inherit;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.client-row:hover  { background:var(--s2); border-color:var(--b2); }
.client-row:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.client-row.is-paused  { opacity:.78; }
.client-row.is-churned { opacity:.55; }

/* Operational state — left-border tells the eye what to triage (US-019) */
.client-row.op-healthy         { border-left-color: var(--green); }
.client-row.op-stale           { border-left-color: var(--amber); }
.client-row.op-paused          { border-left-color: var(--red); }
.client-row.op-just_added      { border-left-color: var(--t3); }
.client-row.op-needs_targeting { border-left-color: var(--t3); }

.client-row-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.client-row-name {
  font-family:'Newsreader', serif;
  font-size:22px;
  font-weight:400;
  letter-spacing:-.3px;
  color:var(--t1);
  line-height:1.1;
}

.client-status {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--t3);
}
.client-status .status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.status-active  { color:var(--green); }
.status-paused  { color:var(--amber); }
.status-churned { color:var(--t3); }

.client-row-meta {
  font-size:12.5px;
  color:var(--t2);
  font-weight:300;
  margin-top:4px;
}

.client-row-divider {
  height:1px;
  background:var(--border);
  margin:14px 0 14px;
}

.client-row-stats {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:24px;
}
.cstat {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.cstat-fee,
.cstat-op { text-align:right; }
.cstat-op .cstat-l,
.cstat-op .cstat-d { text-align:right; }
.cstat-v {
  font-family:'Newsreader', serif;
  font-size:24px;
  font-weight:400;
  letter-spacing:-.3px;
  color:var(--t1);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.cstat-mo {
  font-family:'Outfit', sans-serif;
  font-size:13px;
  color:var(--t3);
  margin-left:2px;
}
.cstat-l {
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.6px;
  color:var(--t3);
  text-transform:lowercase;
}
.cstat-d {
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.cstat-d.up   { color:var(--green); }
.cstat-d.down { color:var(--red); }
.cstat-d.flat { color:var(--t3); }

/* Tag-style value used by the contextual third column — same slot as
   .cstat-v but a sans-serif label instead of a hero number. */
.cstat-v-tag {
  font-family:'Outfit', sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  color:var(--t1);
  line-height:1.15;
  text-transform:none;
  font-variant-numeric:normal;
}
.cstat-op-paused          .cstat-v-tag { color:var(--amber); }
.cstat-op-stale           .cstat-v-tag { color:var(--amber); }
.cstat-op-needs_targeting .cstat-v-tag { color:var(--t2); }
.cstat-op-just_added      .cstat-v-tag { color:var(--t2); }
.cstat-d-link { color:var(--accent); font-weight:500; }
.client-row:hover .cstat-d-link { color:var(--accent-h); }

@media (max-width: 720px) {
  .client-row-stats { grid-template-columns:1fr 1fr; gap:16px; }
  .cstat-fee,
  .cstat-op { grid-column:1 / -1; text-align:left; padding-top:10px; border-top:1px solid var(--border); }
  .cstat-op .cstat-l,
  .cstat-op .cstat-d { text-align:left; }
}

/* ── Client detail page ──────────────────────────────── */
.back-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--t3);
  text-decoration:none;
  margin-bottom:18px;
  padding:4px 0;
  transition: color .15s var(--ease);
}
.back-link:hover { color:var(--t1); }

.meta-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}
.meta-status .status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.meta-mail {
  color:var(--t2);
  text-decoration:none;
  border-bottom:1px dotted var(--border);
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.meta-mail:hover { color:var(--accent); border-bottom-color:var(--accent); }

.metric-suffix {
  font-family:'Outfit', sans-serif;
  font-size:14px;
  color:var(--t3);
  margin-left:2px;
}

.card-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
}
.card-head .card-title { margin-bottom:0; }
.card-link {
  font-size:12.5px;
  color:var(--t2);
  text-decoration:none;
  transition: color .15s var(--ease);
}
.card-link:hover { color:var(--accent); }

.card { margin-bottom:24px; padding:22px; }

.lead-rows {
  display:flex;
  flex-direction:column;
}
.lead-row {
  display:grid;
  grid-template-columns: 28px 1fr auto auto auto;
  gap:14px;
  align-items:center;
  padding:11px 4px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:inherit;
  text-decoration:none;
  transition: background .15s var(--ease);
  border-radius:4px;
}
.lead-row:first-child { border-top:none; }
.lead-row:hover { background:var(--s2); }

.grade {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:6px;
  font-family:'Newsreader', serif;
  font-size:13px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.grade-green { background:var(--green-bg); color:var(--green); }
.grade-blue  { background:var(--accent-bg); color:var(--accent); }
.grade-amber { background:var(--amber-bg); color:var(--amber); }
.grade-red   { background:rgba(239,68,68,.10); color:#fca5a5; }
.grade-grey  { background:var(--s3); color:var(--t3); }

.lead-name {
  color:var(--t1);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lead-status {
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:100px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
}
.pill-blue  { background:var(--accent-bg); color:var(--accent); }
.pill-green { background:var(--green-bg);  color:var(--green); }
.pill-amber { background:var(--amber-bg);  color:var(--amber); }
.pill-red   { background:rgba(239,68,68,.10); color:#fca5a5; }
.pill-grey  { background:var(--s3); color:var(--t3); }

.lead-est {
  font-size:12.5px;
  color:var(--t2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lead-time {
  font-size:12px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

@media (max-width: 720px) {
  .lead-row {
    grid-template-columns: 28px 1fr auto;
    gap:10px;
  }
  .lead-est, .lead-time { display:none; }
}

/* ── Lead detail (Step 6) ────────────────────────────── */
.lead-status-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.status-label {
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--t3);
}
.save-indicator {
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
  transition:color .15s var(--ease);
}
.save-indicator.is-err { color:var(--red); }

.lead-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-bottom:24px;
}
.lead-col { display:flex; flex-direction:column; gap:18px; }
.lead-col .card { margin-bottom:0; }

.card-title-sub {
  font-weight:400;
  color:var(--t3);
  margin-left:6px;
  font-size:11.5px;
}

.empty-sm {
  padding:16px 4px;
  font-size:12.5px;
  text-align:left;
  color:var(--t3);
}

/* Timeline */
.timeline {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.timeline-item {
  position:relative;
  display:grid;
  grid-template-columns: 14px 1fr;
  gap:14px;
  padding-left:0;
}
.timeline-item:not(:last-child)::before {
  content:'';
  position:absolute;
  left:6px;
  top:18px;
  bottom:-18px;
  width:1px;
  background:var(--border);
}
.timeline-dot {
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid var(--bg);
  margin-top:2px;
  position:relative;
  z-index:1;
  box-shadow:0 0 0 1px currentColor;
}
.timeline-dot.dot-blue  { background:var(--accent); color:var(--accent); }
.timeline-dot.dot-green { background:var(--green);  color:var(--green); }
.is-pending .timeline-dot { background:var(--bg); }
.timeline-body { min-width:0; }
.timeline-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:baseline;
  margin-bottom:4px;
}
.timeline-title {
  font-size:13px;
  font-weight:500;
  color:var(--t1);
}
.is-pending .timeline-title { color:var(--t2); }
.timeline-time {
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.timeline-subject {
  font-size:13px;
  color:var(--t2);
  font-style:italic;
  margin-bottom:4px;
}
.timeline-body-text {
  font-size:12.5px;
  color:var(--t3);
  line-height:1.55;
}

/* Key-value list */
.kv {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kv li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--t2);
}
.kv li strong { color:var(--t1); font-weight:500; }
.kv li a { color:var(--accent); text-decoration:none; }
.kv li a:hover { text-decoration:underline; }
.kv-icon { width:16px; flex-shrink:0; opacity:.7; }
.kv-inline { flex-direction:row; flex-wrap:wrap; gap:14px; margin-top:10px; }
.kv-inline li { font-size:12px; color:var(--t3); }

/* Decision-maker */
.dm-name { font-size:15px; font-weight:500; color:var(--t1); }
.dm-title { font-size:12.5px; color:var(--t2); margin:2px 0 8px; }

/* Big number block (Google rating) */
.big-line { display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; }
.big-num {
  font-family:'Newsreader', serif;
  font-size:32px;
  font-weight:400;
  color:var(--t1);
  line-height:1;
}
.big-suffix { font-size:18px; color:var(--amber); margin-right:4px; }
.big-meta { font-size:12.5px; color:var(--t3); }

/* Score bar */
.bar-wrap { display:flex; align-items:center; gap:12px; }
.bar {
  flex:1;
  height:6px;
  background:var(--s3);
  border-radius:100px;
  overflow:hidden;
}
.bar-fill {
  height:100%;
  background:var(--accent);
  border-radius:100px;
  transition:width .3s var(--ease);
}
.bar-label {
  font-size:12px;
  color:var(--t2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Competitors */
.comp-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.comp-row {
  display:grid;
  grid-template-columns: minmax(120px, 1.4fr) 2fr auto;
  gap:14px;
  align-items:center;
  font-size:12.5px;
}
.comp-name { color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comp-target .comp-name { color:var(--t1); font-weight:500; }
.comp-tag {
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-bg);
  border-radius:100px;
  vertical-align:1px;
}
.comp-bar {
  height:5px;
  background:var(--s3);
  border-radius:100px;
  overflow:hidden;
}
.comp-fill {
  display:block;
  height:100%;
  background:var(--t3);
  border-radius:100px;
}
.comp-target .comp-fill { background:var(--accent); }
.comp-meta {
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Notes textarea */
.notes-textarea {
  width:100%;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-family:inherit;
  font-size:13.5px;
  color:var(--t1);
  line-height:1.6;
  resize:vertical;
  min-height:80px;
  outline:none;
  transition:border-color .15s var(--ease);
}
.notes-textarea:focus { border-color:var(--accent); }
.notes-textarea::placeholder { color:var(--t3); }

@media (max-width: 980px) {
  .lead-grid { grid-template-columns:1fr; }
}

/* ── Leads page (Step 5) ─────────────────────────────── */
.tabbar {
  display:flex;
  gap:2px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  scrollbar-width:none;
}
.tabbar::-webkit-scrollbar { display:none; }
.tab {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 14px;
  font-size:13px;
  font-weight:500;
  color:var(--t3);
  text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.tab:hover { color:var(--t1); }
.tab.is-active { color:var(--t1); border-bottom-color:var(--accent); }
.tab-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:18px;
  padding:0 6px;
  border-radius:100px;
  background:var(--s2);
  color:var(--t3);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.tab.is-active .tab-count { background:var(--accent-bg); color:var(--accent); }

/* Primary client tabbar — slightly heavier, sits above the status row */
.tabbar-clients {
  margin-bottom:8px;
  border-bottom-color:var(--b2);
}
.tabbar-clients .tab {
  font-size:13.5px;
  font-weight:500;
  padding:10px 16px;
  font-family:'Newsreader', serif;
  font-weight:400;
  font-size:16px;
  letter-spacing:-0.005em;
}
.tabbar-clients .tab .tab-count {
  font-family:'Outfit', sans-serif;
  font-size:11px;
}

.leads-toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.filter-select {
  height:36px;
  padding:0 14px;
  font-family:inherit;
  font-size:13px;
  color:var(--t1);
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9da8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:32px;
}
.filter-select:hover, .filter-select:focus { border-color:var(--b2); outline:none; }

.search-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  flex:1;
  min-width:220px;
  max-width:380px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--t3);
  transition:border-color .15s var(--ease);
}
.search-wrap:focus-within { border-color:var(--accent); }
.search-wrap input {
  flex:1;
  border:none;
  background:none;
  outline:none;
  font:inherit;
  font-size:13px;
  color:var(--t1);
}
.search-wrap input::placeholder { color:var(--t3); }

.bulkbar {
  display:flex;
  gap:10px;
  align-items:center;
  padding:0 14px;
  margin-bottom:0;
  background:var(--accent-bg);
  border:1px solid rgba(143,183,255,.25);
  border-radius:var(--r-sm);
  /* Closed-by-default: collapses height + opacity; .is-open animates in */
  max-height:0;
  opacity:0;
  overflow:hidden;
  border-color:transparent;
  transition:
    max-height .2s var(--ease),
    opacity .2s var(--ease),
    padding .2s var(--ease),
    margin .2s var(--ease),
    border-color .2s var(--ease);
}
.bulkbar.is-open {
  max-height:64px;
  opacity:1;
  padding:10px 14px;
  margin-bottom:14px;
  border-color:rgba(143,183,255,.25);
}
.bulkbar-count {
  font-size:13px;
  font-weight:500;
  color:var(--accent);
  margin-right:6px;
}

.leads-table-wrap {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow-x:auto;
}
.leads-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:var(--t1);
}
.leads-table thead th {
  text-align:left;
  font-weight:500;
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--t3);
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--s1);
  white-space:nowrap;
}
.leads-table tbody td {
  padding:14px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.leads-table tbody tr:last-child td { border-bottom:none; }
.leads-table tbody tr.lead-tr { cursor:pointer; transition:background .15s var(--ease); }
.leads-table tbody tr.lead-tr:hover { background:rgba(255,255,255,.02); }

.col-check    { width:36px; }
.col-grade    { width:60px; }
.col-client   { color:var(--t2); }
.col-status   { white-space:nowrap; }
.col-decision { color:var(--t2); }
.col-time     { color:var(--t3); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.col-business { font-weight:500; }
.lead-name-link {
  color:var(--t1);
  text-decoration:none;
  display:inline-block;
  padding:1px 0;
  border-radius:3px;
  font-size:14px;
  font-weight:500;
}
.lead-name-link:hover { color:var(--accent); }
.lead-name-link:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Undo banner — bottom-left, persists for 60s after a bulk action */
.undo-banner {
  position:fixed;
  bottom:24px;
  left:240px;     /* clear the 220px sidebar + 20px gutter */
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  background:var(--s2);
  border:1px solid var(--b2);
  border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  z-index:90;
  font-size:13px;
  color:var(--t1);
  animation:undoIn .25s var(--ease);
}
.undo-banner form { margin:0; }
.undo-banner-text { font-weight:500; }
.undo-banner-ttl {
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
  min-width:24px;
}
.undo-banner-btn {
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  font:inherit;
  font-size:12px;
  font-weight:600;
  padding:5px 12px;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition: background .15s var(--ease);
}
.undo-banner-btn:hover { background:var(--accent-bg); }
@keyframes undoIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 768px) {
  .undo-banner { left:16px; right:16px; bottom:16px; }
}

.leads-table input[type="checkbox"] {
  width:14px;
  height:14px;
  cursor:pointer;
  accent-color:var(--accent);
}

/* ── Leads triage view (US-021) ─────────────────────────
   The first cell carries a 2px coloured stripe driven by lead.grade —
   subtle enough to scan without reading, distinct enough that a row of
   Grade A leads stands apart from Grade C noise. Terminal states
   (won/lost) keep their dim treatment via .lead-op-*. */
.leads-table-triage tbody tr.lead-tr td:first-child {
  border-left:2px solid transparent;
}
.lead-grade-green td:first-child { border-left-color:var(--green)  !important; }
.lead-grade-blue  td:first-child { border-left-color:var(--accent) !important; }
.lead-grade-amber td:first-child { border-left-color:var(--amber)  !important; }
.lead-grade-red   td:first-child { border-left-color:#ef4444       !important; }
.lead-grade-grey  td:first-child { border-left-color:transparent   !important; }

.lead-op-won, .lead-op-lost { opacity:.78; }

.lead-sub {
  margin-top:2px;
  font-size:12px;
  color:var(--t3);
  font-weight:300;
}
.lead-cta {
  display:inline-block;
  margin-left:8px;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.lead-cta-amber { color:var(--amber); }
.lead-cta-red   { color:#ef4444; }

.col-stage {
  font-size:12.5px;
  color:var(--t2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  width:90px;
}
.col-stage.stage-green { color:var(--green); }
.col-stage.stage-amber { color:var(--amber); }
.col-stage.stage-red   { color:#ef4444; }

/* Needs-attention status line — flat, inline, Linear-style.
   The dot carries the urgency signal; the banner stays neutral. */
.leads-attn {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  margin-bottom:14px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  border-radius:0;
  font-size:12.5px;
}
.leads-attn-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.leads-attn-amber .leads-attn-dot { background:var(--amber); }
.leads-attn-green .leads-attn-dot { background:var(--green); }
.leads-attn-text {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--t2);
}
.leads-attn-link {
  color:var(--t1);
  text-decoration:none;
  border-bottom:1px dotted var(--border);
  transition:border-color .14s var(--ease), color .14s var(--ease);
}
.leads-attn-link strong { font-weight:600; }
.leads-attn-link-amber { color:var(--amber); }
.leads-attn-link-green { color:var(--green); }
.leads-attn-link:hover { border-bottom-color:currentColor; }
.leads-attn-sep { color:var(--t3); }

.pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  flex-wrap:wrap;
  gap:12px;
}
.page-info { font-size:12.5px; color:var(--t3); }
.page-nav  { display:flex; gap:8px; align-items:center; }
.page-num  { font-size:12.5px; color:var(--t2); font-variant-numeric:tabular-nums; padding:0 8px; }
.page-nav .btn[aria-disabled="true"] { opacity:.4; cursor:not-allowed; }

.flash-stack {
  position:fixed;
  bottom:24px;
  right:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:100;
}
.flash {
  padding:11px 16px;
  font-size:13px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--s2);
  color:var(--t1);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation: flashIn .25s var(--ease);
}
.flash-success { border-color:rgba(62,207,142,.30); }
.flash-error   { border-color:rgba(239,68,68,.30); color:#fca5a5; }
@keyframes flashIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 720px) {
  .col-client, .col-decision, .col-time { display:none; }
  .leads-table thead th { font-size:10.5px; padding:10px; }
  .leads-table tbody td { padding:12px 10px; }
  .leads-toolbar { flex-direction:column; align-items:stretch; }
  .search-wrap { max-width:none; }
}

/* ── Outreach (Step 7) ───────────────────────────────── */
.send-panel {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px 14px;
  margin-bottom:24px;
}
.send-panel-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  margin-bottom:10px;
}
.send-panel-hint {
  font-size:11.5px;
  color:var(--t3);
  font-weight:300;
}
.send-rows { display:flex; flex-direction:column; }
.send-row {
  display:grid;
  grid-template-columns: 1.4fr auto 1.6fr auto;
  gap:18px;
  align-items:center;
  padding:11px 0;
  border-top:1px solid var(--border);
  font-size:13px;
}
.send-row:first-child { border-top:none; }
.send-row.is-paused { opacity:.78; }
.send-row-name { color:var(--t1); font-weight:500; }
.send-row-meta {
  font-size:12.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
}
.send-num { color:var(--t2); font-weight:500; }
.send-sep { margin:0 6px; color:var(--t3); }
.send-row-action { margin:0; }

.send-state {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}
.send-state .status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.state-sending { color:var(--green); }
.state-paused  { color:var(--amber); }

@media (max-width: 720px) {
  .send-row {
    grid-template-columns: 1fr auto;
    gap:10px;
  }
  .send-row-status { grid-column:2; grid-row:1; justify-self:end; }
  .send-row-meta   { grid-column:1 / -1; }
  .send-row-action { grid-column:1 / -1; justify-self:end; }
}

/* Outreach table — inherits .leads-table; just adds step + flag cells. */
.outreach-table .col-step    { width:74px; }
.outreach-table .col-flag    { width:64px; text-align:center; }
.outreach-table .col-action  { width:110px; text-align:right; }
.outreach-table .col-subject {
  color:var(--t2);
  max-width:380px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.outreach-table .col-addr {
  color:var(--t2);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.outreach-table .col-reason {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:var(--t2);
}

.step-pill {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  background:var(--s3);
  color:var(--t2);
  white-space:nowrap;
}
.step-pill.step-1 { background:var(--accent-bg);  color:var(--accent); }
.step-pill.step-2 { background:var(--accent-bg2); color:var(--accent); }
.step-pill.step-3 { background:var(--s3);         color:var(--t2); }

.dot-flag {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}
.dot-flag.dot-blue  { background:var(--accent); }
.dot-flag.dot-green { background:var(--green); }
.dot-flag.dot-empty {
  width:8px;
  height:8px;
  border:1px solid var(--b2);
  background:transparent;
}

.bounce-pill {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
}
.bounce-hard    { background:rgba(239,68,68,.10); color:#fca5a5; }
.bounce-soft    { background:var(--amber-bg);     color:var(--amber); }
.bounce-unknown { background:var(--s3);           color:var(--t3); }
.bounce-detail  {
  color:var(--t3);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btn.btn-quiet {
  background:transparent;
  border-color:var(--border);
  color:var(--t3);
}
.btn.btn-quiet:hover:not(:disabled) {
  border-color:var(--b2);
  color:var(--t1);
}

@media (max-width: 720px) {
  .outreach-table .col-client,
  .outreach-table .col-flag,
  .outreach-table .col-action,
  .outreach-table .col-addr { display:none; }
  .outreach-table .col-subject { max-width:none; }
}

/* ── Inbound (Step 8) ────────────────────────────────── */

/* Score pills — three buckets, distinct hues, all dim enough to sit
   alongside text without shouting. Hot uses the red token at low alpha,
   warm uses amber, cold reuses the neutral surface. */
.score-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  padding:3px 10px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.7px;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  border:1px solid transparent;
}
.score-pill.score-hot  {
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  border-color:rgba(239,68,68,.18);
}
.score-pill.score-warm {
  background:var(--amber-bg);
  color:var(--amber);
  border-color:rgba(232,164,58,.20);
}
.score-pill.score-cold {
  background:var(--s3);
  color:var(--t3);
  border-color:var(--border);
}

/* Status pills — neutral surfaces with text-color carrying the meaning. */
.status-pill {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  background:var(--s3);
  color:var(--t2);
  white-space:nowrap;
}
.status-pill.status-new       { background:var(--accent-bg);  color:var(--accent); }
.status-pill.status-contacted { background:var(--s3);         color:var(--t1); }
.status-pill.status-called    { background:var(--accent-bg2); color:var(--accent); }
.status-pill.status-proposal  { background:var(--accent-bg);  color:var(--accent); }
.status-pill.status-won       { background:var(--green-bg);   color:var(--green); }
.status-pill.status-lost      { background:var(--s3);         color:var(--t3); }

.auto-flag {
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  color:var(--t3);
  cursor:help;
}

/* Inbound table — columns + the two-line time cell */
.inbound-table .col-score    { width:78px; }
.inbound-table .col-co       { color:var(--t2); }
.inbound-table .col-deal     {
  width:90px;
  font-variant-numeric:tabular-nums;
  color:var(--t1);
  font-weight:500;
}
.inbound-table .col-industry {
  width:200px;
  color:var(--t3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inbound-table .col-status   { width:130px; white-space:nowrap; }
.inbound-table .col-when     { width:130px; }
.inbound-table .when-rel {
  display:block;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.inbound-table .when-abs {
  display:block;
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
}

.inbound-tr { cursor:pointer; }
.inbound-tr:hover { background:var(--s2); }
.inbound-tr:focus-visible {
  outline:1px solid var(--accent);
  outline-offset:-1px;
}

/* Priority strip — repurposes .send-row but renders as <button>. */
.inbound-priority-row {
  background:none;
  border:none;
  border-top:1px solid var(--border);
  padding:11px 0;
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  display:grid;
  grid-template-columns: auto 1.6fr 1fr auto;
  gap:18px;
  align-items:center;
  transition:background-color .14s var(--ease);
}
.inbound-priority-row:first-child { border-top:none; }
.inbound-priority-row:hover {
  background:var(--s2);
  border-radius:8px;
  padding-left:10px;
  padding-right:10px;
  margin-left:-10px;
  margin-right:-10px;
}
.inbound-priority-row:focus-visible {
  outline:1px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
}
.send-row-co { color:var(--t3); margin-left:4px; font-weight:300; }
.row-chevron {
  color:var(--t3);
  font-size:14px;
  transition:transform .14s var(--ease), color .14s var(--ease);
}
.inbound-priority-row:hover .row-chevron {
  color:var(--accent);
  transform:translateX(2px);
}

/* ── Drawer ──────────────────────────────────────────── */
.drawer-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  opacity:0;
  transition:opacity .22s var(--ease);
  z-index:80;
}
.drawer-overlay.is-open { opacity:1; }

.drawer {
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width:min(520px, 92vw);
  background:var(--s1);
  border-left:1px solid var(--b2);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .24s var(--ease);
  z-index:90;
}
.drawer.is-open { transform:translateX(0); }

.drawer-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border);
}
.drawer-head-titles { min-width:0; }
.drawer-eyebrow { margin-bottom:8px; }
.drawer-title {
  font-family:'Newsreader', serif;
  font-weight:400;
  font-size:24px;
  line-height:1.2;
  color:var(--t1);
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
.drawer-sub {
  font-size:12.5px;
  color:var(--t2);
  font-weight:300;
}
.drawer-close {
  background:transparent;
  border:1px solid var(--border);
  color:var(--t2);
  width:30px;
  height:30px;
  border-radius:8px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.drawer-close:hover {
  background:var(--s3);
  border-color:var(--b2);
  color:var(--t1);
}

.drawer-body {
  flex:1;
  overflow-y:auto;
  padding:18px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.drawer-section { display:flex; flex-direction:column; gap:8px; }
.drawer-section-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--t3);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.drawer-pill {
  display:inline-flex;
  padding:2px 8px;
  border-radius:100px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.drawer-pill--ok    { background:var(--green-bg); color:var(--green); }
.drawer-pill--muted { background:var(--s3);       color:var(--t3); }

.drawer-dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
  margin:0;
  font-size:12.5px;
}
.drawer-dl > div { min-width:0; }
.drawer-dl dt {
  font-size:10.5px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--t3);
  font-weight:500;
  margin-bottom:2px;
}
.drawer-dl dd {
  margin:0;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}

.drawer-quote {
  margin:0;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13px;
  line-height:1.55;
  color:var(--t1);
  font-style:italic;
}

.drawer-grade-list {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12.5px;
  color:var(--t2);
}
.drawer-grade-list li {
  padding-left:14px;
  position:relative;
}
.drawer-grade-list li::before {
  content:'';
  position:absolute;
  left:2px;
  top:8px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  opacity:.55;
}
.drawer-grade-list li:first-child {
  font-size:13px;
  color:var(--t1);
  font-weight:500;
  padding-left:0;
}
.drawer-grade-list li:first-child::before { display:none; }

.drawer-reply {
  margin:0;
  padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'Outfit', sans-serif;
  font-size:12.5px;
  line-height:1.6;
  color:var(--t1);
  white-space:pre-wrap;
  word-break:break-word;
}

.drawer-foot {
  border-top:1px solid var(--border);
  padding:14px 24px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drawer-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.drawer-actions .btn { flex:1; min-width:0; justify-content:center; }
.drawer-foot .card-link {
  align-self:flex-start;
  font-size:12px;
  color:var(--t2);
}
.drawer-foot .card-link:hover { color:var(--accent); }

@media (max-width: 720px) {
  .inbound-table .col-co,
  .inbound-table .col-industry,
  .inbound-table .col-deal { display:none; }
  .drawer { width:100vw; border-left:none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition:none; }
  .drawer-overlay { transition:none; }
  .row-chevron { transition:none; }
  .inbound-priority-row { transition:none; }
}

/* ── Reports (Step 9) ────────────────────────────────── */

.report-head .report-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.report-select { min-width:150px; }

.report-hero {
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--s1) 0%, var(--bg) 100%);
  border-radius:var(--r-md);
  padding:24px 28px;
  margin-bottom:24px;
}
.report-hero-eyebrow {
  font-size:11.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:8px;
}
.report-hero-title {
  font-family:'Newsreader', serif;
  font-weight:400;
  font-size:34px;
  line-height:1.15;
  color:var(--t1);
  margin:0 0 6px;
  letter-spacing:-0.012em;
}
.report-hero-meta {
  font-size:13px;
  color:var(--t3);
  font-weight:300;
}

.report-chart-card { padding:22px 24px; }
.chart-wrap-tall { height:260px; }

.report-grid {
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap:20px;
  margin-bottom:24px;
}
.report-grid-right {
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
}

/* Funnel — text rows + horizontal bars proportional to conversion */
.funnel-card { padding:20px 22px; }
.funnel { display:flex; flex-direction:column; gap:14px; }
.funnel-row { display:flex; flex-direction:column; gap:6px; }
.funnel-row-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:13px;
}
.funnel-label  { color:var(--t1); font-weight:500; }
.funnel-value  { color:var(--t1); font-variant-numeric:tabular-nums; font-weight:600; }
.funnel-bar-track {
  position:relative;
  height:22px;
  background:var(--s3);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.funnel-bar-track--top { background:var(--accent-bg); }
.funnel-bar {
  height:100%;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-h) 100%);
  border-radius:6px;
  transition:width .35s var(--ease);
}
.funnel-bar--full { width:100%; opacity:.6; }
.funnel-bar-label {
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:600;
  color:var(--bg);
  letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 2px rgba(255,255,255,.25);
}
.funnel-bar-track--top .funnel-bar-label {
  color:var(--accent);
  text-shadow:none;
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.7px;
}

/* Sequence table */
.sequence-card { padding:20px 22px; }
.seq-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.seq-table th {
  font-size:11px;
  font-weight:600;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.7px;
  text-align:left;
  padding:0 0 10px;
  border-bottom:1px solid var(--border);
}
.seq-table th.num,
.seq-table td.num { text-align:right; }
.seq-table tbody td {
  padding:11px 0;
  color:var(--t1);
  border-bottom:1px solid var(--border);
}
.seq-table tbody tr:last-child td { border-bottom:none; }

/* Grade mix — letter pill, horizontal bar, count, % */
.grade-card { padding:20px 22px; }
.grade-stack { display:flex; flex-direction:column; gap:9px; }
.grade-row {
  display:grid;
  grid-template-columns: 28px 1fr auto auto;
  gap:14px;
  align-items:center;
  font-size:13px;
}
.grade-letter {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  font-family:'Newsreader', serif;
  letter-spacing:.4px;
}
.grade-letter.grade-A { background:var(--green-bg); color:var(--green); }
.grade-letter.grade-B { background:var(--accent-bg); color:var(--accent); }
.grade-letter.grade-C { background:var(--accent-bg2); color:var(--accent); }
.grade-letter.grade-D { background:var(--amber-bg); color:var(--amber); }
.grade-letter.grade-F { background:rgba(239,68,68,.10); color:#fca5a5; }
.grade-bar-track {
  height:8px;
  background:var(--s3);
  border-radius:100px;
  overflow:hidden;
  min-width:60px;
}
.grade-bar { height:100%; border-radius:100px; transition:width .35s var(--ease); }
.grade-bar.grade-bar-A { background:var(--green); }
.grade-bar.grade-bar-B { background:var(--accent); }
.grade-bar.grade-bar-C { background:var(--accent); opacity:.65; }
.grade-bar.grade-bar-D { background:var(--amber); }
.grade-bar.grade-bar-F { background:#ef4444; opacity:.78; }
.grade-count {
  color:var(--t1);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  min-width:30px;
  text-align:right;
}
.grade-pct {
  color:var(--t3);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  min-width:46px;
  text-align:right;
}

/* Wins this period — named meetings + deals as a row list */
.wins-card { padding:20px 22px; margin-bottom:24px; }
.wins-card .card-title { display:flex; align-items:center; }
.card-title-tag {
  display:inline-block;
  margin-left:10px;
  padding:2px 8px;
  font-size:10.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--t3);
  background:var(--s3);
  border-radius:999px;
}
.wins-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
}
.wins-row {
  display:grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.wins-row:last-child { border-bottom:none; }
.wins-icon {
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
}
.wins-row--meeting .wins-icon { background:var(--accent-bg); color:var(--accent); }
.wins-row--won     .wins-icon { background:var(--green-bg);  color:var(--green); }
.wins-main { min-width:0; }
.wins-name {
  color:var(--t1);
  font-weight:500;
  font-size:13.5px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wins-business {
  color:var(--t2);
  font-size:12px;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wins-meta {
  font-size:12px;
  color:var(--t2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.wins-outcome { color:var(--t1); font-weight:500; }
.wins-when    { color:var(--t3); }
.wins-value {
  font-size:13.5px;
  font-weight:600;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
  min-width:62px;
  text-align:right;
}
.wins-value--none { color:var(--t3); font-weight:400; }

@media (max-width: 720px) {
  .wins-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    row-gap:4px;
  }
  .wins-meta  { grid-column: 2 / 4; }
  .wins-value { grid-column: 2 / 4; text-align:left; min-width:0; }
}

/* Print-only blocks: hidden on screen, shown in print */
.print-only { display:none; }

@media (max-width: 980px) {
  .report-grid { grid-template-columns: 1fr; }
}

/* ── Print stylesheet ───────────────────────────────── */
@media print {
  /* Keep dark Innovite styling — the brand IS dark.
     Force colour adjust so backgrounds print. */
  :root, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body { background:var(--bg); }

  /* Hide chrome */
  .sidebar,
  .undo-banner,
  .flash-stack,
  .report-actions,
  .page-sub,
  .page-title { display:none !important; }

  .main { padding:24px 32px !important; max-width:none; }

  /* Show print-only header + footer */
  .print-only { display:block !important; }
  .print-header {
    display:flex !important;
    justify-content:space-between;
    align-items:flex-end;
    border-bottom:1px solid var(--b2);
    padding-bottom:14px;
    margin-bottom:22px;
  }
  .print-brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--accent);
  }
  .print-mark { width:50px; height:10px; }
  .print-wordmark {
    font-family:'Newsreader', serif;
    font-size:22px;
    color:var(--t1);
    letter-spacing:-.01em;
  }
  .print-meta { text-align:right; }
  .print-client {
    font-family:'Newsreader', serif;
    font-size:18px;
    color:var(--t1);
    margin-bottom:3px;
  }
  .print-period {
    font-size:11px;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:var(--t3);
  }

  .print-footer {
    display:flex !important;
    justify-content:center;
    gap:10px;
    margin-top:28px;
    padding-top:14px;
    border-top:1px solid var(--border);
    font-size:10.5px;
    color:var(--t3);
    letter-spacing:.5px;
    text-transform:uppercase;
  }
  .print-footer-sep { color:var(--t3); }

  /* Hide the hero (the print header replaces it) */
  .report-hero { display:none; }

  /* Slim the cards for paper */
  .card { break-inside:avoid; page-break-inside:avoid; }
  .chart-wrap-tall { height:200px; }
  .metrics { gap:12px; }
  .metric { padding:14px 16px; }
  .report-grid { gap:14px; }

  /* Force page-break before the funnel grid on shorter A4 layouts
     so the chart sits on page 1 cleanly. */
  @page { size: A4; margin: 14mm 14mm 18mm; }
}

/* ── Settings (Step 10) ──────────────────────────────── */

.settings-flash { margin-bottom:18px; }

.settings-stack {
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:920px;
}

.settings-card { padding:24px 26px; }
.settings-card-head { margin-bottom:18px; }
.settings-card-title {
  font-family:'Newsreader', serif;
  font-weight:400;
  font-size:20px;
  line-height:1.2;
  color:var(--t1);
  margin:0 0 4px;
  letter-spacing:-0.005em;
}
.settings-card-sub {
  font-size:12.5px;
  color:var(--t3);
  font-weight:300;
  margin:0;
  line-height:1.55;
}

.settings-form { display:flex; flex-direction:column; gap:14px; }

.field-row {
  display:grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap:18px;
  align-items:center;
  padding:6px 0;
}
.field-row > label {
  font-size:12.5px;
  color:var(--t2);
  font-weight:500;
}
.field-row input[type="text"],
.field-row input[type="email"],
.field-row input[type="url"],
.field-row input[type="number"],
.field-row input[type="time"] {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--t1);
  padding:9px 12px;
  font-size:13px;
  font-family:inherit;
  width:100%;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.field-row input[type="text"]:focus,
.field-row input[type="email"]:focus,
.field-row input[type="url"]:focus,
.field-row input[type="number"]:focus,
.field-row input[type="time"]:focus {
  outline:none;
  background:var(--s2);
  border-color:var(--accent);
}
.field-row input[type="number"] { max-width:120px; }
.field-row-split { align-items:center; }
.field-split { display:flex; align-items:center; gap:10px; }
.field-split input[type="time"] { max-width:130px; }
.field-split-sep {
  font-size:12px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.field-row-checkbox {
  grid-template-columns: 200px minmax(0, 1fr);
  gap:18px;
}
.field-row-checkbox > label.checkbox:first-of-type { grid-column-start:2; }

.checkbox {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--t1);
  font-weight:400;
  cursor:pointer;
  margin-right:18px;
}
.checkbox input[type="checkbox"] {
  appearance:none;
  width:16px;
  height:16px;
  border:1px solid var(--b2);
  border-radius:5px;
  background:var(--bg);
  cursor:pointer;
  position:relative;
  margin:0;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.checkbox input[type="checkbox"]:checked {
  background:var(--accent);
  border-color:var(--accent);
}
.checkbox input[type="checkbox"]:checked::after {
  content:'';
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border:solid var(--bg);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.settings-form-foot {
  display:flex;
  gap:10px;
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.client-new-foot { justify-content:flex-end; border-top:none; }
.form-foot-hint  { margin:0 0 4px 4px; color:var(--t3); font-size:12.5px; }
.req             { color:var(--accent); margin-left:2px; }

/* Wrapper sits in the right-hand grid cell so we can stack input + hint
   + error vertically without the field-row grid stretching them sideways. */
.field-input        { min-width:0; }
.field-input-inline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.field-suffix       { font-size:12.5px; color:var(--t3); }
.field-hint         { font-size:11.5px; color:var(--t3); margin-top:6px; }
.field-hint-inline  { margin:0; }
.field-err {
  font-size:12px;
  color:var(--red);
  margin-top:6px;
}
.field-row input.is-invalid,
.chip-input.is-invalid {
  border-color:var(--red);
}

/* ── Chip input ─────────────────────────────────────────
   Used for target_industries, target_locations, exclusion_list on the
   new-client form (US-017). Hidden comma-joined input is the source of
   truth for form submit; the visible chips are JS-rendered. */
.chip-input {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:6px 8px;
  min-height:38px;
  cursor:text;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.chip-input:focus-within {
  background:var(--s2);
  border-color:var(--accent);
}
.chip-input-bag {
  display:contents; /* chips lay out in the parent flex */
}
.chip-input-entry {
  flex:1 1 140px;
  min-width:120px;
  border:none;
  background:transparent;
  color:var(--t1);
  font-size:13px;
  font-family:inherit;
  padding:4px 6px;
}
.chip-input-entry:focus { outline:none; }

.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent-bg);
  border:1px solid rgba(143,183,255,.18);
  color:var(--t1);
  font-size:12.5px;
  padding:4px 4px 4px 9px;
  border-radius:6px;
  line-height:1.2;
}
.chip-x {
  border:none;
  background:transparent;
  color:var(--t3);
  font-size:15px;
  line-height:1;
  padding:0 4px;
  cursor:pointer;
  border-radius:4px;
  transition:color .12s var(--ease), background .12s var(--ease);
}
.chip-x:hover { color:var(--t1); background:rgba(255,255,255,.08); }

/* ── Employee size band toggles ────────────────────────
   Multi-select pill row. Each pill is a label wrapping a hidden checkbox
   — the checkbox is the source of truth, .is-on is just the visual. */
.band-group {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.band-chip {
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12.5px;
  color:var(--t2);
  cursor:pointer;
  user-select:none;
  background:var(--bg);
  transition:border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.band-chip input[type="checkbox"] {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.band-chip:hover { border-color:var(--b2); color:var(--t1); }
.band-chip.is-on {
  background:var(--accent-bg);
  border-color:var(--accent);
  color:var(--t1);
  font-weight:500;
}

/* Read-only rows above an editable form */
.settings-readonly {
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.readonly-row {
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:14px;
  align-items:center;
  padding:11px 14px;
  border-top:1px solid var(--border);
  font-size:12.5px;
}
.readonly-row:first-child { border-top:none; }
.readonly-label {
  color:var(--t3);
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-weight:600;
}
.readonly-value {
  color:var(--t1);
  font-variant-numeric:tabular-nums;
  font-family:'SF Mono','Menlo',monospace;
  font-size:12px;
}

/* Status tags — used in many places */
.status-tag {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:3px 9px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  white-space:nowrap;
}
.status-tag .status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.status-tag.state-healthy      { background:var(--green-bg); color:var(--green); }
.status-tag.state-idle         { background:var(--s3);       color:var(--t3); }
.status-tag.state-warn         { background:var(--amber-bg); color:var(--amber); }
.status-tag.state-warming      { background:var(--amber-bg); color:var(--amber); }
.status-tag.state-throttled    { background:var(--amber-bg); color:var(--amber); }
.status-tag.state-down         { background:rgba(239,68,68,.10); color:#fca5a5; }
.status-tag.state-disconnected { background:rgba(239,68,68,.10); color:#fca5a5; }
.status-tag.state-muted        { background:var(--s3);       color:var(--t3); }
.status-tag.state-paused       { background:var(--s3);       color:var(--t2); }
.status-tag.state-unassigned   { background:var(--s3);       color:var(--t3); }

/* Cadence flow visual */
.cadence-flow {
  display:flex;
  align-items:stretch;
  gap:12px;
  padding:14px 0 22px;
  margin-bottom:6px;
  border-bottom:1px solid var(--border);
}
.cadence-step {
  flex:1;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  opacity:.45;
  transition:opacity .14s var(--ease), border-color .14s var(--ease);
}
.cadence-step.is-on { opacity:1; border-color:var(--accent); background:var(--accent-bg2); }
.cadence-step-num {
  font-family:'Newsreader', serif;
  font-size:18px;
  color:var(--accent);
  letter-spacing:-.01em;
}
.cadence-step-label {
  font-size:11px;
  color:var(--t3);
  letter-spacing:.7px;
  text-transform:uppercase;
}
.cadence-arrow {
  display:flex;
  align-items:center;
  color:var(--t3);
  font-size:14px;
}

/* Integrations list */
.integrations { display:flex; flex-direction:column; }
.integration-row {
  display:grid;
  grid-template-columns: 1.4fr 1fr 1.2fr auto;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-top:1px solid var(--border);
  font-size:12.5px;
}
.integration-row:first-child { border-top:none; }
.integration-label { color:var(--t1); font-weight:500; }
.integration-host  { color:var(--t3); font-size:12px; }
.integration-key   {
  color:var(--t2);
  font-family:'SF Mono','Menlo',monospace;
  font-size:11.5px;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* System status grid */
.status-grid { display:flex; flex-direction:column; }
.status-row {
  display:grid;
  grid-template-columns: 180px auto 1fr;
  gap:18px;
  align-items:center;
  padding:11px 0;
  border-top:1px solid var(--border);
  font-size:13px;
}
.status-row:first-child { border-top:none; }
.status-row-label  { color:var(--t1); font-weight:500; }
.status-row-detail { color:var(--t3); font-size:12.5px; }

/* Danger zone */
.danger-card {
  border-color:rgba(239,68,68,.18);
  background:linear-gradient(180deg, var(--s1) 0%, rgba(239,68,68,.025) 100%);
}
.danger-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 0;
  border-top:1px solid var(--border);
}
.danger-row:first-of-type { border-top:none; padding-top:6px; }
.danger-row-title { font-size:13.5px; color:var(--t1); font-weight:500; margin-bottom:3px; }
.danger-row-sub   { font-size:12px;   color:var(--t3); line-height:1.55; max-width:520px; }
.state-paused-tag { color:var(--amber); margin-left:6px; font-weight:600; }

.btn.btn-danger {
  background:rgba(239,68,68,.10);
  color:#fca5a5;
  border-color:rgba(239,68,68,.22);
}
.btn.btn-danger:hover:not(:disabled) {
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.32);
  color:#fda4a4;
}

@media (max-width: 720px) {
  .field-row,
  .field-row-checkbox { grid-template-columns: 1fr; gap:6px; }
  .field-row-checkbox > label.checkbox:first-of-type { grid-column-start:1; }
  .readonly-row { grid-template-columns: 1fr auto; }
  .readonly-row .readonly-value { grid-column:1 / -1; }
  .integration-row { grid-template-columns: 1fr auto; gap:6px 12px; }
  .integration-host,
  .integration-key { grid-column:1 / -1; }
  .status-row { grid-template-columns: 1fr auto; }
  .status-row-detail { grid-column:1 / -1; }
  .cadence-flow { flex-direction:column; }
  .cadence-arrow { transform:rotate(90deg); }
  .danger-row { flex-direction:column; align-items:flex-start; }
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  body { grid-template-columns:1fr; }
  .sidebar {
    position:relative;
    height:auto;
    flex-direction:row;
    align-items:center;
    padding:10px 14px;
    overflow-x:auto;
  }
  .sb-top { padding:0; border:none; margin:0 18px 0 0; }
  .sb-eyebrow { display:none; }
  .sb-nav { flex-direction:row; flex:1; gap:2px; }
  .sb-item.is-active::before { display:none; }
  .sb-item.is-active { background:var(--accent-bg); color:var(--accent); }
  .sb-foot { display:none; }
  .main { padding:20px; }
  .page-head { flex-direction:column; gap:14px; }
  .page-actions { width:100%; }
  .page-actions .btn { flex:1; justify-content:center; }
}

/* ── Find new leads modal + progress card (US-018) ─────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(11,12,17,.72);
  z-index:1000;
  opacity:0;
  transition:opacity .2s var(--ease);
}
.modal-overlay.is-open { opacity:1; }

.modal {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -48%);
  z-index:1001;
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.modal.is-open {
  opacity:1;
  transform:translate(-50%, -50%);
}
.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:20px 24px 12px;
  border-bottom:1px solid var(--border);
}
.modal-title {
  font-family:'Newsreader', serif;
  font-size:22px;
  font-weight:400;
  letter-spacing:-.3px;
  margin:0;
}
.modal-sub  { margin:6px 0 0; font-size:12.5px; color:var(--t2); line-height:1.5; }
.modal-close {
  background:transparent;
  border:none;
  color:var(--t3);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
  border-radius:6px;
  transition:color .14s var(--ease), background .14s var(--ease);
}
.modal-close:hover { color:var(--t1); background:rgba(255,255,255,.06); }
.modal-body { padding:14px 24px 18px; overflow-y:auto; }
.modal-foot {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 24px;
  border-top:1px solid var(--border);
}

.picker-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.picker-row {
  display:grid;
  grid-template-columns: auto auto 1fr;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.picker-row:hover { border-color:var(--b2); }
.picker-row.is-disabled { opacity:.7; cursor:default; }
.picker-row.is-disabled:hover { border-color:var(--border); }
.picker-check {
  appearance:none;
  width:16px; height:16px;
  border:1px solid var(--b2);
  border-radius:5px;
  background:var(--bg);
  cursor:pointer;
  position:relative;
  margin:0;
  flex-shrink:0;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.picker-check:checked {
  background:var(--accent);
  border-color:var(--accent);
}
.picker-check:checked::after {
  content:'';
  position:absolute;
  left:4px; top:1px;
  width:5px; height:9px;
  border:solid var(--bg);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.picker-check:disabled { cursor:not-allowed; opacity:.55; }
.picker-name {
  font-size:13.5px;
  color:var(--t1);
  font-weight:500;
}
.picker-meta {
  font-size:11.5px;
  color:var(--t3);
  text-align:right;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}
.picker-warn { color:var(--amber); }
.picker-link {
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.picker-link:hover { color:var(--accent-h); }
.picker-sep { color:var(--t3); }
.picker-empty {
  padding:18px;
  text-align:center;
  color:var(--t2);
  font-size:13px;
}

.picker-estimate {
  font-size:11.5px;
  color:var(--t2);
  margin-bottom:10px;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.picker-disclaimer {
  font-size:11.5px;
  color:var(--t2);
  padding:10px 12px;
  background:var(--accent-bg2);
  border:1px solid rgba(143,183,255,.18);
  border-radius:var(--r-sm);
  line-height:1.55;
}
.picker-disclaimer strong { color:var(--accent); font-weight:600; }

/* Progress card — appears after the modal closes. Sits above page content. */
.progress-card {
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:var(--r-md);
  padding:16px 20px 14px;
  margin-bottom:18px;
}
.progress-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.progress-card-title { font-size:13.5px; font-weight:600; color:var(--t1); }
.progress-card-sub   { font-size:12px; color:var(--t3); margin-top:2px; }
.progress-rows {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.progress-row {
  display:grid;
  grid-template-columns: 24px 1fr auto;
  align-items:center;
  gap:12px;
  font-size:12.5px;
  padding:8px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.progress-row-state {
  font-size:14px;
  text-align:center;
  width:18px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.progress-row-state.state-queued  { color:var(--t3); }
.progress-row-state.state-running { color:var(--accent); animation:spin 1.1s linear infinite; }
.progress-row-state.state-done    { color:var(--green); }
.progress-row-state.state-failed  { color:var(--red); }
.progress-row-name { color:var(--t1); }
.progress-row-meta { color:var(--t3); font-variant-numeric:tabular-nums; }
.btn-sm { padding:5px 10px; font-size:12px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Inbox (Epic 9 / US-022) ───────────────────────────
   Unified queue: replies + form submissions. Row layout reads
   left-to-right: signal pill → name + snippet → kind tag + time. */
.inbox-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.inbox-row {
  display:grid;
  grid-template-columns: 80px 1fr auto;
  gap:16px;
  align-items:start;
  padding:14px 18px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  text-decoration:none;
  color:inherit;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.inbox-row:hover { background:var(--s2); border-color:var(--b2); }

.inbox-signal {
  font-size:11px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-align:center;
  padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
}
.inbox-signal.signal-positive { background:var(--green-bg); color:var(--green); }
.inbox-signal.signal-neutral  { background:var(--accent-bg); color:var(--accent); }
.inbox-signal.signal-negative { background:rgba(239,68,68,.10); color:var(--red); }
.inbox-signal.signal-hot      { background:rgba(239,68,68,.10); color:var(--red); }
.inbox-signal.signal-warm     { background:var(--amber-bg); color:var(--amber); }
.inbox-signal.signal-cold     { background:rgba(255,255,255,.05); color:var(--t3); }

.inbox-body { min-width:0; }
.inbox-head {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:baseline;
  font-size:13.5px;
  margin-bottom:3px;
}
.inbox-name   { color:var(--t1); font-weight:500; }
.inbox-co     { color:var(--t2); }
.inbox-client {
  margin-left:auto;
  font-size:11.5px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.inbox-subject {
  font-size:12.5px;
  color:var(--t2);
  margin-bottom:4px;
}
.inbox-snippet {
  font-size:12.5px;
  color:var(--t3);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.inbox-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  white-space:nowrap;
}
.inbox-kind-tag {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:4px;
  color:var(--t3);
  background:rgba(255,255,255,.04);
}
.inbox-kind-tag-reply { color:var(--accent); background:var(--accent-bg2); }
.inbox-kind-tag-form  { color:var(--amber);  background:var(--amber-bg); }
.inbox-time {
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
}

@media (max-width: 720px) {
  .inbox-row { grid-template-columns: 1fr; }
  .inbox-meta { flex-direction:row; align-items:center; }
  .inbox-client { margin-left:0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; }
  .progress-row-state.state-running { animation:none; }
}

/* ── Reports — KPI targets + activity subline + kebab ── */
.metric-target {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--t3);
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.metric-target-bar {
  flex:1;
  height:3px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
  min-width:40px;
}
.metric-target-fill {
  display:block;
  height:100%;
  background:var(--accent);
  border-radius:2px;
  transition:width .4s var(--ease);
}
.metric-target--ok    { color:var(--green); }
.metric-target--under { color:var(--amber); }

.report-activity-line {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:var(--t3);
  margin:-8px 0 22px;
  padding:10px 14px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums;
}
.report-activity-line .activity-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--t2);
}
.report-activity-line .activity-stat strong {
  color:var(--t1);
  font-weight:500;
}
.report-activity-line .activity-sep { opacity:.5; }

/* Kebab dropdown */
.kebab { position:relative; }
.kebab-trigger {
  width:36px;
  padding:0;
  font-size:18px;
  line-height:1;
  letter-spacing:2px;
}
.kebab-menu {
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:160px;
  background:var(--s2);
  border:1px solid var(--b2);
  border-radius:var(--r-sm);
  padding:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:60;
}
.kebab-menu[hidden] { display:none; }
.kebab-item {
  appearance:none;
  background:transparent;
  border:none;
  font:inherit;
  font-size:13px;
  color:var(--t1);
  text-align:left;
  text-decoration:none;
  padding:8px 12px;
  border-radius:var(--r-sm);
  cursor:pointer;
}
.kebab-item:hover,
.kebab-item:focus-visible { background:var(--s3); outline:none; }

@media print {
  .kebab { display:none !important; }
  .metric-target-bar { background:#eee; }
  .metric-target-fill { background:#444; }
}


/* ── Reply drawer (US-024) ──────────────────────────────────────────
   Wider drawer than the form drawer, full thread above, composer
   docked at the bottom. Reuses .drawer / .drawer-overlay base styles. */
.drawer.drawer--wide { width:min(720px, 96vw); }

.drawer-eyebrow .signal-pill { margin-right:6px; }
.signal-pill {
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:4px;
  background:var(--accent-bg);
  color:var(--accent);
}
.signal-pill.signal-positive { background:var(--green-bg); color:var(--green); }
.signal-pill.signal-negative { background:rgba(239,68,68,.10); color:var(--red); }
.signal-pill.signal-neutral  { background:var(--accent-bg);   color:var(--accent); }
.signal-pill.signal-ooo      { background:var(--amber-bg);    color:var(--amber); }
.signal-pill.signal-status   { background:var(--s3); color:var(--t2); text-transform:capitalize; }

.drawer-leadlink {
  margin-left:8px;
  font-size:12px;
  color:var(--t3);
  text-decoration:none;
}
.drawer-leadlink:hover { color:var(--accent); }

/* Thread ────────────────────────────────────────────────────────── */
.thread {
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:none;
}
.thread-msg {
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 16px;
  background:var(--s1);
}
.thread-msg--out {
  background:var(--accent-bg2);
  border-color:rgba(143,183,255,.12);
}
.thread-msg--in {
  background:var(--s2);
  border-color:var(--b2);
}
.thread-meta {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.thread-who {
  font-size:12px;
  font-weight:600;
  color:var(--t1);
}
.thread-step {
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:4px;
  color:var(--accent);
  background:var(--accent-bg2);
}
.thread-time {
  margin-left:auto;
  font-size:11.5px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
}
.thread-subject {
  font-size:13px;
  font-weight:500;
  color:var(--t1);
  margin:2px 0 6px;
}
.thread-body {
  font-size:13.5px;
  line-height:1.6;
  color:var(--t2);
  word-wrap:break-word;
}
.thread-empty {
  font-size:13px;
  color:var(--t3);
  padding:12px 0;
}

/* Skeleton loading. */
.thread-skeleton {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.skeleton-bubble {
  height:80px;
  border-radius:var(--r-md);
  background:linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%);
  background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite;
}
.skeleton-bubble--in  { width:88%; }
.skeleton-bubble--out { width:92%; align-self:flex-end; }
@keyframes skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.thread-error {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(239,68,68,.20);
  background:rgba(239,68,68,.06);
  border-radius:var(--r-md);
  font-size:13px;
  color:var(--t1);
}

/* Foot wrap repurposed for the composer — overrides .drawer-foot. */
.reply-foot {
  display:block;
  padding:0;
  border-top:1px solid var(--border);
  background:var(--s1);
}
.composer { padding:14px 18px 16px; display:flex; flex-direction:column; gap:10px; }
.composer-meta {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.composer-row {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
}
.composer-row--input { padding-top:2px; }
.composer-label {
  width:54px;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--t3);
}
.composer-static {
  font-size:12.5px;
  color:var(--t2);
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}
.composer-input {
  flex:1;
  font:inherit;
  font-size:13px;
  color:var(--t1);
  background:var(--s3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:7px 10px;
  outline:none;
  transition:border-color .15s var(--ease);
}
.composer-input:focus { border-color:var(--accent); }
.composer-body {
  width:100%;
  min-height:160px;
  resize:vertical;
  font:inherit;
  font-size:13.5px;
  line-height:1.6;
  color:var(--t1);
  background:var(--s3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:12px 14px;
  outline:none;
  transition:border-color .15s var(--ease);
}
.composer-body:focus { border-color:var(--accent); }
.composer-error {
  font-size:12.5px;
  color:var(--red);
  background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.18);
  padding:8px 12px;
  border-radius:var(--r-sm);
}
.composer-actions {
  display:flex;
  align-items:center;
  gap:8px;
}
.composer-send-group {
  margin-left:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.composer-send-group .btn { white-space:nowrap; }
.btn-send-secondary {
  font-size:12.5px;
  padding:7px 12px;
}

.reply-readonly {
  padding:18px 20px;
  border-top:1px solid var(--border);
  background:var(--s2);
  font-size:13px;
  color:var(--t3);
  line-height:1.6;
}

/* Toast ─────────────────────────────────────────────────────────── */
.toast-stack {
  position:fixed;
  right:20px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:1000;
  pointer-events:none;
}
.toast {
  background:var(--s2);
  border:1px solid var(--b2);
  color:var(--t1);
  font-size:13px;
  padding:10px 16px;
  border-radius:var(--r-sm);
  box-shadow:0 8px 28px rgba(0,0,0,.40);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-in { opacity:1; transform:translateY(0); }

@media (max-width: 720px) {
  .drawer.drawer--wide { width:100vw; }
  .composer-send-group { width:100%; }
  .composer-send-group .btn { flex:1; }
}

/* ── Mailboxes page ─────────────────────────────────────── */

/* Inline state colour text — used in page-sub headers and settings summary */
.state-healthy-text { color:var(--green); font-weight:500; }
.state-warn-text    { color:var(--amber); font-weight:500; }

/* Settings → mailboxes summary card */
.settings-summary-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:6px;
  flex-wrap:wrap;
}
.settings-summary-text {
  color:var(--t3);
  font-size:13px;
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}
.mb-stat-num {
  color:var(--t1);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.mb-stat-num-healthy { color:var(--green); }
.mb-stat-num-warn    { color:var(--amber); }
.mb-stat-label       { color:var(--t3); }
.mb-stat-sep         { color:var(--t3); margin:0 2px; }

/* Domain summary strip — one card per sending domain */
.mb-domain-strip {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
  margin-bottom:18px;
}
.mb-domain-card {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* No card-level treatment for attention domains — the amber
   "N need attention" badge already carries the signal. */
.mb-domain-name {
  font-family:'SF Mono','Menlo',monospace;
  font-size:12.5px;
  color:var(--t1);
  letter-spacing:.2px;
}
.mb-domain-counts { color:var(--t3); font-size:12px; }
.mb-domain-state { margin-top:2px; }
.mb-domain-dns { display:flex; gap:7px; align-items:center; margin-top:4px; }
.mb-dns-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  cursor:help;
}
.mb-dns-dot.is-ok  { background:var(--green); }
.mb-dns-dot.is-bad { background:#ef4444; }

/* Capacity summary — sits between domain strip and table.
   The number that answers "can we onboard another client?" */
.mb-capacity-summary {
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:14px;
  padding:10px 14px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:12.5px;
  color:var(--t3);
}
.mb-capacity-num {
  color:var(--t1);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.mb-capacity-label { color:var(--t3); }
.mb-capacity-sep   { color:var(--t3); margin:0 4px; }
.mb-capacity-pct {
  color:var(--t2);
  font-variant-numeric:tabular-nums;
  margin-left:2px;
}
.mb-capacity-pct.is-warn { color:var(--amber); font-weight:500; }
.mb-capacity-pct.is-full { color:#ef4444;      font-weight:500; }

/* Mailbox table */
.mb-table-card { padding:0; overflow:hidden; }
.mb-table {
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.mb-table thead th {
  text-align:left;
  font-weight:500;
  color:var(--t3);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--s1);
}
.mb-table thead th.num { text-align:right; }
.mb-table tbody td {
  padding:13px 16px;
  border-bottom:1px solid var(--border);
  color:var(--t2);
  vertical-align:middle;
}
.mb-table tbody td.num { text-align:right; }
.mb-table tbody tr:last-child td { border-bottom:none; }
.mb-row:hover { background:var(--s2); }
.mb-row-paused, .mb-row-unassigned { opacity:.65; }

.mb-addr {
  font-family:'SF Mono','Menlo',monospace;
  font-size:12px;
  color:var(--t1);
  letter-spacing:.2px;
}
.mb-dom { color:var(--t3); font-size:11.5px; }
/* Pool is the default — only dedicated assignments render. Reduces
   visual noise on a page that's typically 90% pool. */
.mb-assigned-dedicated {
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--t3);
}
.mb-assigned-sep  { color:var(--t3); margin:0 2px; }
.mb-assigned-name { color:var(--t1); }

.mb-sent { color:var(--t1); font-weight:500; }
.mb-cap  { color:var(--t3); }
.mb-cap-warn { color:var(--amber) !important; font-weight:500; }
.mb-cap-full { color:#ef4444     !important; font-weight:500; }

.mb-warmup-done    { color:var(--green); }
.mb-warmup-running { color:var(--t1); }
.mb-warmup-paused  { color:var(--t3); }
.mb-warmup-tag {
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  background:var(--s3);
  color:var(--t3);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.3px;
}
.mb-state-cell { white-space:nowrap; }
.mb-err {
  margin-top:4px;
  color:var(--amber);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;
}

@media (max-width:1024px) {
  .mb-table thead th, .mb-table tbody td { padding:11px 12px; }
  .mb-dom { display:none; }
  .mb-table thead th:nth-child(2) { display:none; }
}
@media (max-width:768px) {
  .mb-domain-strip { grid-template-columns:1fr; }
  .mb-table thead { display:none; }
  .mb-table, .mb-table tbody, .mb-table tr, .mb-table td { display:block; width:100%; }
  .mb-row { padding:14px 16px; border-bottom:1px solid var(--border); }
  .mb-table tbody td { padding:3px 0; border-bottom:none; }
  .mb-table tbody td.num { text-align:left; }
  .mb-table tbody td.num::before { content:attr(data-label) ' '; color:var(--t3); }
}