/* Client Health AI — the default pane on /dept/cs (?tab=command).
 * One hero strip (where the book stands + the oracle bar + CSM scope),
 * the health-state universe (doubles as the state filter), the ACCOUNT
 * CARDS — one per account, three sensors read in unison — and the side
 * rail (voice-of-customer pulse + doors to every deeper CS surface).
 * Island: static/js/cs_command.js, fed by /api/dept/cs/command.
 *
 * Palette rule (tone contract, services/cs_command.py): amber marks an
 * opening, teal marks healthy, slate marks quiet — never the danger red
 * the rest of the app reserves for real failures. */

.csc-root { display: flex; flex-direction: column; gap: 18px; }

.csc-loading, .csc-error {
  padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px;
}
.csc-error { color: var(--danger, #dc2626); }

/* ── Hero: where the book stands ───────────────────────────────────── */
.csc-hero {
  border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,148,136,0.07), rgba(59,130,246,0.05));
  padding: 22px 24px;
}
.csc-hero-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.csc-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cs-accent, #0d9488); margin-bottom: 6px;
}
.csc-title { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.csc-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; max-width: 560px; line-height: 1.5; }
.csc-scope-pill {
  display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: rgba(13,148,136,0.12); color: var(--cs-accent, #0d9488);
}
.csc-csm {
  margin-top: 10px; margin-left: 6px; padding: 3px 8px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-card, #fff); color: var(--text-primary);
}
.csc-hero-stats { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.csc-stat { min-width: 110px; }
.csc-stat .v { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.csc-stat .v.pos { color: var(--success, #16a34a); }
.csc-stat .v.neg { color: #d97706; } /* watching, not alarming */
.csc-stat .l { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.35; }

/* ── Oracle bar: the door into /chat, composed for you ─────────────── */
.csc-oracle { display: flex; gap: 8px; margin-top: 14px; }
.csc-oracle-input {
  flex: 1 1 auto; padding: 9px 14px; font-size: 13px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--bg-card, #fff); color: var(--text-primary);
}
.csc-oracle-input:focus { outline: 2px solid rgba(13,148,136,.35); }
.csc-oracle-go {
  border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--cs-accent, #0d9488);
}
.csc-oracle-go:hover { filter: brightness(1.08); }

/* ── The universe strip: health states ─────────────────────────────── */
.csc-universe {
  border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  background: var(--bg-card, #fff); padding: 14px 18px;
}
.csc-universe-title {
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-secondary, #475569); margin-bottom: 10px;
}
.csc-universe-row { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.csc-universe-arrow { align-self: center; color: var(--text-muted); font-size: 14px; }
.csc-state {
  flex: 1 1 120px; min-width: 118px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  background: transparent; padding: 10px 12px; cursor: pointer; text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.csc-state:hover { border-color: var(--cs-accent, #0d9488); background: rgba(13,148,136,.05); }
.csc-state.active {
  border-color: var(--cs-accent, #0d9488); background: rgba(13,148,136,.10);
  box-shadow: inset 0 0 0 1px var(--cs-accent, #0d9488);
}
.csc-state-count { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.csc-state-name { font-size: 12px; font-weight: 700; color: var(--text-secondary, #475569); }
.csc-state-sub { font-size: 11px; color: var(--text-muted); line-height: 1.35; }

/* ── Main grid: queue + side rail ──────────────────────────────────── */
.csc-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; }

.csc-queue {
  border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  background: var(--bg-card, #fff); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.csc-queue-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.csc-queue-title {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary, #475569);
}
.csc-search {
  padding: 5px 12px; font-size: 12.5px; min-width: 200px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 999px;
  background: var(--bg-card, #fff); color: var(--text-primary);
}
.csc-search:focus { outline: 2px solid rgba(13,148,136,.3); }
.csc-clear-state {
  border: 1px dashed var(--cs-accent, #0d9488); border-radius: 999px;
  background: rgba(13,148,136,.06); padding: 4px 12px; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--cs-accent, #0d9488);
}
.csc-clear-state:hover { background: rgba(13,148,136,.12); }

/* ── Queue tabs (Today + one per category) ─────────────────────────── */
.csc-queue-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 10px;
}
.csc-qtab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 999px;
  background: transparent; padding: 5px 12px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--text-secondary, #475569);
  transition: background .12s, border-color .12s, color .12s;
}
.csc-qtab:hover { background: rgba(0,0,0,.04); }
.csc-qtab.active {
  background: var(--cs-accent, #0d9488); border-color: var(--cs-accent, #0d9488); color: #fff;
}
.csc-qtab-n {
  font-size: 10.5px; font-weight: 800; min-width: 18px; text-align: center;
  padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.08); color: inherit;
}
.csc-qtab.active .csc-qtab-n { background: rgba(255,255,255,.25); }

/* ── Pager ──────────────────────────────────────────────────────────── */
.csc-qpager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-top: 4px;
}
.csc-qpage-btn {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: transparent; padding: 4px 12px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--cs-accent, #0d9488);
  transition: background .12s ease, border-color .12s ease;
}
.csc-qpage-btn:hover:not(:disabled) {
  background: rgba(13,148,136,.07); border-color: var(--cs-accent, #0d9488);
}
.csc-qpage-btn:disabled { opacity: .4; cursor: default; }
.csc-qpage-info { font-size: 12px; font-weight: 600; color: var(--text-muted, #94a3b8); }

/* ── The account cards — three sensors read in unison ──────────────────
 * State colour marks the KIND of moment (amber = an opening now, teal =
 * healthy, indigo = growth, slate = quiet) — never severity. */
.csc-cards { display: flex; flex-direction: column; gap: 14px; }
.csc-card {
  border: 1px solid var(--border, #e5e7eb);
  border-left: 4px solid var(--csc-st, #94a3b8);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--csc-st-bg, transparent);
}
.csc-card[data-state="alarm"]    { --csc-st: #d97706; --csc-st-bg: rgba(217,119,6,.04); }
.csc-card[data-state="renewal"]  { --csc-st: #d97706; --csc-st-bg: rgba(217,119,6,.03); }
.csc-card[data-state="quiet"]    { --csc-st: #0d9488; --csc-st-bg: rgba(13,148,136,.035); }
.csc-card[data-state="growing"]  { --csc-st: #6366f1; --csc-st-bg: rgba(99,102,241,.035); }
.csc-card[data-state="thriving"] { --csc-st: #0d9488; --csc-st-bg: transparent; }
.csc-card[data-state="steady"]   { --csc-st: #94a3b8; --csc-st-bg: transparent; }

.csc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csc-card-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.csc-card-statechip {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; color: #fff; background: var(--csc-st, #94a3b8);
}
.csc-health {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,.06); color: var(--text-secondary, #475569);
}
.csc-cat {
  font-size: 10px; font-weight: 700; text-transform: capitalize;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb); color: var(--text-muted);
}
.csc-card-value { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--text-primary); }

.csc-card-story { font-size: 13px; color: var(--text-secondary, #334155); line-height: 1.5; font-style: italic; }

.csc-card-sensors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  border-top: 1px dashed var(--border, #e5e7eb);
  border-bottom: 1px dashed var(--border, #e5e7eb);
  padding: 10px 0;
}
.csc-sensor { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.csc-sensor-name {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #94a3b8); display: flex; align-items: center; gap: 6px;
}
.csc-trend { font-size: 13px; font-weight: 800; }
.csc-trend.t-up { color: #16a34a; }
.csc-trend.t-down { color: #d97706; }
.csc-trend.t-flat { color: var(--text-muted, #94a3b8); }
.csc-sensor-state { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.csc-sensor-state.s-good { color: #0d9488; }
.csc-sensor-state.s-warm { color: #d97706; }
.csc-sensor-state.s-idle { color: var(--text-muted, #64748b); }
.csc-facts { display: flex; flex-wrap: wrap; gap: 4px; }
.csc-fact {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.045); color: var(--text-secondary, #475569); line-height: 1.4;
}
.csc-spark { flex: 0 0 auto; }
.sp-talking { color: #0d9488; }
.sp-buying { color: #6366f1; }
.sp-pulse { color: #0d9488; }

/* Behaviour dimensions — the sidecar, five bars. Risk inverts. */
.csc-dims { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.csc-dim { display: flex; align-items: center; gap: 6px; flex: 0 1 160px; min-width: 140px; }
.csc-dim-l { font-size: 10px; font-weight: 700; color: var(--text-muted); width: 62px; }
.csc-dim-bar {
  flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(0,0,0,.07);
  overflow: hidden;
}
.csc-dim-fill { display: block; height: 100%; border-radius: 3px; background: #0d9488; }
.csc-dim-fill.inv { background: #d97706; }
.csc-dim-v { font-size: 10px; font-weight: 700; color: var(--text-secondary, #475569); width: 20px; text-align: right; }

.csc-card-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.csc-flag {
  border: 1px solid rgba(217,119,6,.4); border-radius: 999px;
  background: rgba(217,119,6,.07); padding: 3px 11px; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: #b45309; text-align: left;
}
.csc-flag:hover { background: rgba(217,119,6,.14); }

.csc-card-play { font-size: 12.5px; color: var(--text-secondary, #334155); line-height: 1.5; }
.csc-play-k {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cs-accent, #0d9488); margin-right: 4px;
}

.csc-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.csc-card-btn {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: transparent; padding: 4px 11px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--cs-accent, #0d9488);
  transition: background .12s ease, border-color .12s ease;
}
.csc-card-btn:hover { background: rgba(13,148,136,.07); border-color: var(--cs-accent, #0d9488); }
.csc-dir-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 2px; }

@media (max-width: 760px) {
  .csc-card-sensors { grid-template-columns: 1fr; }
}

/* ── Side rail: pulse + pillars ─────────────────────────────────────── */
.csc-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.csc-pulse {
  border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  background: var(--bg-card, #fff); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.csc-pulse-title {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary, #475569);
}
.csc-pulse-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.csc-pulse-stats .csc-stat { min-width: 70px; }
.csc-pulse-stats .csc-stat .v { font-size: 20px; }
.csc-pulse-trend { display: flex; align-items: center; gap: 10px; }
.csc-pulse-trend-l { font-size: 11px; color: var(--text-muted); }
.csc-spark { flex: 0 0 auto; }

.csc-rail {
  border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  background: var(--bg-card, #fff); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.csc-rail-title {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary, #475569); margin-bottom: 2px;
}
.csc-rail-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid transparent; border-radius: 10px; padding: 8px 10px;
  background: transparent; cursor: pointer; transition: background .12s ease;
}
.csc-rail-item:hover { background: rgba(13,148,136,.06); }
.csc-rail-q { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.csc-rail-name { font-size: 13px; font-weight: 800; color: var(--cs-accent, #0d9488); }
.csc-rail-take { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.csc-rail-open {
  align-self: flex-start; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--cs-accent, #0d9488); padding: 4px 0 0;
}
.csc-rail-open:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .csc-main { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .csc-hero-head { flex-direction: column; }
}