/* Contact Behaviour explorer — /dept/audience?tab=behavior
 *
 * Every colour resolves from themes.css tokens so the surface is correct on
 * dark AND light themes (brand / sage / pastel / demo). Semantic ink mixes the
 * tone toward --text-primary the way audience_dmm.css does — it darkens on a
 * light canvas and brightens on a dark one. Do not introduce hardcoded dark
 * fallbacks or invented tokens; that is what made light mode unreadable on the
 * matrix tab.
 */

#panel-behavior {
  --cbh-tone: var(--accent);
  --cbh-ink: color-mix(in srgb, var(--cbh-tone) 72%, var(--text-primary));
  --cbh-tint: color-mix(in srgb, var(--cbh-tone) 14%, transparent);
}

/* ── Controls ────────────────────────────────────────────────────────────── */
.cbh-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 14px 0 10px;
}
.cbh-field { display: flex; flex-direction: column; gap: 4px; }
.cbh-grow { flex: 1 1 320px; }
.cbh-field-sm { max-width: 110px; }
.cbh-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.cbh-select, .cbh-input {
  min-width: 150px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
}
.cbh-grow .cbh-input { min-width: 100%; }
.cbh-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.cbh-btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--text-on-accent);
}
.cbh-btn:hover { filter: brightness(1.06); }
.cbh-btn:disabled { opacity: .45; cursor: default; filter: none; }

.cbh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.cbh-fgroup { min-width: 150px; }
.cbh-fgroup-wide { flex: 1 1 460px; }
.cbh-flabel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cbh-mode { display: flex; gap: 8px; text-transform: none; letter-spacing: 0; }
.cbh-mode label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.cbh-toggles {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}
.cbh-toggles label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.cbh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cbh-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
}
.cbh-chip:hover { border-color: var(--cbh-ink); color: var(--text-primary); }
.cbh-chip.on {
  background: var(--cbh-tint);
  border-color: var(--cbh-ink);
  color: var(--cbh-ink);
  font-weight: 600;
}
/* A blocked domain stays clickable — filtering on it correctly returns nobody,
   which is a truer answer than hiding the domain would be. */
.cbh-chip.blocked { border-style: dashed; opacity: .7; }
.cbh-chip-n { font-size: 10px; color: var(--text-muted); }

.cbh-status { margin: 8px 0; font-size: 13px; color: var(--text-muted); }
.cbh-status.ok { color: var(--success); }
.cbh-status.warn { color: var(--warning); }
.cbh-status.error { color: var(--error); }

/* ── KPI strip ───────────────────────────────────────────────────────────── */
.cbh-kpis {
  display: grid;
  /* Ten tiles, sized so the whole strip lands on one row at 1440px — a single
     orphan on a second row reads as a different kind of figure. */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.cbh-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
}
.cbh-kpi-v { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.cbh-kpi-l {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* ── Two-column lens + domain census ─────────────────────────────────────── */
.cbh-split { display: flex; flex-wrap: wrap; gap: 22px; }
/* The lens table carries seven numeric columns; the census needs room for a
   domain name, a bar and a "measured of observable" figure. 1.3:1 is where
   neither clips at 1440px. */
.cbh-split-col { flex: 1.3 1 480px; min-width: 0; }
.cbh-split-col + .cbh-split-col { flex: 1 1 400px; }
.cbh-subhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  margin: 6px 0 8px;
}
.cbh-mute { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.cbh-table-wrap { overflow-x: auto; }
.cbh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cbh-table th {
  padding: 7px 9px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cbh-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: top;
}
.cbh-table th.num, .cbh-table td.num { text-align: right; white-space: nowrap; }
.cbh-table tbody tr:hover { background: var(--accent-bg-subtle); }
.cbh-empty { color: var(--text-muted); text-align: center; padding: 18px 0; }
.cbh-sep td {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--accent-bg-subtle);
}

.cbh-drill { cursor: pointer; }
.cbh-drill.on { background: var(--cbh-tint); }
.cbh-gval { position: relative; }
/* The bar sits behind the label rather than in its own column: the lens table
   already carries nine numeric columns and a tenth would push people off. */
.cbh-gbar {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  border-radius: 4px;
  background: var(--cbh-tint);
  z-index: 0;
}
.cbh-table td:first-child { position: relative; }

.cbh-people tr { cursor: pointer; }

/* ── Accounts ────────────────────────────────────────────────────────────── */
.cbh-bar-tight { gap: 10px; margin: 8px 0 4px; }
.cbh-chip-total { align-self: center; margin-left: 4px; }
.cbh-accounts tr { cursor: pointer; }
.cbh-arow.on { background: var(--cbh-tint); }
.cbh-arow td:first-child {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.cbh-chevron {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
  transition: transform .15s ease;
}
.cbh-arow.on .cbh-chevron { transform: rotate(90deg); }
.cbh-aexpand,
.cbh-aexpand:hover {
  cursor: default;
  background: var(--accent-bg-subtle);
}
.cbh-aexpand > td { padding: 10px 12px 14px 28px; }
.cbh-expand-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.cbh-expand-status {
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.cbh-expand-status.error { color: var(--warning); }
.cbh-expand-more { padding: 4px 10px; font-size: 12px; font-weight: 600; }
.cbh-expand-people { margin: 0; }
.cbh-expand-people tr { cursor: pointer; }
/* A share above the single-threading line is the finding this table exists for,
   so it is the one number allowed to shout. */
.cbh-warn { color: var(--warning); font-weight: 600; }
.cbh-accounts .cbh-pmeta { display: inline; margin-left: 5px; }
.cbh-pname { display: block; font-weight: 600; }
.cbh-sf {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 6px;
  text-decoration: none;
  vertical-align: middle;
}
.cbh-sf:hover { text-decoration: underline; }
.cbh-pacct { display: block; }
.cbh-pmeta { display: block; font-size: 11px; color: var(--text-muted); }
.cbh-sbar {
  display: inline-block;
  width: 44px;
  height: 5px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  vertical-align: middle;
}
.cbh-sbar span { display: block; height: 100%; background: var(--cbh-ink); }

/* ── Bands + trajectory ──────────────────────────────────────────────────── */
.cbh-band, .cbh-traj {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.cbh-band-strong { background: var(--success-bg); color: var(--success); }
.cbh-band-steady { background: var(--accent-bg-subtle); color: var(--cbh-ink); }
.cbh-band-soft { background: var(--warning-bg-subtle); color: var(--warning); }
.cbh-band-faint { background: var(--bg-card); color: var(--text-muted); }
.cbh-band-no-signal, .cbh-band-unknown, .cbh-band-none {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
}
.cbh-traj-rising { background: var(--success-bg); color: var(--success); }
.cbh-traj-holding { background: var(--accent-bg-subtle); color: var(--cbh-ink); }
.cbh-traj-cooling { background: var(--warning-bg); color: var(--warning); }
.cbh-traj-dormant { background: var(--bg-card); color: var(--text-muted); }
.cbh-traj-new, .cbh-traj-unknown { color: var(--text-muted); }

/* ── Domain census ───────────────────────────────────────────────────────── */
.cbh-domains { display: flex; flex-direction: column; gap: 3px; }
.cbh-drow {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) 1fr minmax(110px, auto);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.cbh-drow:hover { background: var(--accent-bg-subtle); }
.cbh-drow.on { border-color: var(--cbh-ink); background: var(--cbh-tint); }
.cbh-drow.blocked { opacity: .65; }
.cbh-dname { display: flex; flex-direction: column; }
.cbh-dim {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
/* In the census the dimension tag sits under the domain name; in a table cell
   it sits beside it and needs the gap. */
.cbh-table .cbh-dim { margin-left: 7px; }
.cbh-dbar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.cbh-dbar span { display: block; height: 100%; background: var(--cbh-ink); }
.cbh-dnum { text-align: right; font-size: 11.5px; color: var(--text-secondary); }
.cbh-dblocked { color: var(--warning); }
.cbh-dchip {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 1px 6px;
  font-size: 10.5px;
  border-radius: 999px;
  background: var(--accent-bg-subtle);
  color: var(--text-secondary);
}
.cbh-dchip.more { background: transparent; color: var(--text-muted); }

/* ── Pager ───────────────────────────────────────────────────────────────── */
.cbh-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

/* ── Person drawer ───────────────────────────────────────────────────────── */
.cbh-pgrid { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 14px; }
.cbh-pcol { flex: 1 1 380px; min-width: 0; }
.cbh-phead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cbh-pfacts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 12px;
  font-size: 12.5px;
  color: var(--text-primary);
}
.cbh-pfacts .cbh-mute { color: var(--text-muted); }
.cbh-dims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cbh-dim-card {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
}
.cbh-dim-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.cbh-dim-v { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.cbh-dim-b { font-size: 10.5px; color: var(--text-muted); }
.cbh-dim-blurb { margin-top: 4px; font-size: 11px; color: var(--text-secondary); }
.cbh-spark { display: block; margin-top: 6px; }
.cbh-spark rect { fill: var(--cbh-ink); }