/* Client Health view (superadmin CRM) — Apple-design standard.
   Materials, hairlines, spring easing, press feedback, Day/Night via tokens. */
:root {
  --ch-ease: cubic-bezier(.2, .8, .2, 1);
  --ch-healthy: #0D9488;
  --ch-watch: #D97706;
  --ch-risk: #E11D48;
  --ch-dormant: #64748B;
  --ch-unscored: #94A3B8;
  --ch-card: var(--color-surface, #fff);
  --ch-line: var(--color-border, #E5E7EB);
  --ch-line-soft: rgba(15, 23, 42, .06);
  --ch-txt: var(--color-text, #0f172a);
  --ch-txt2: var(--color-text-secondary, #475569);
  --ch-txt3: var(--color-text-muted, #94a3b8);
  --ch-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --ch-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px -16px rgba(15, 23, 42, .22);
  --ch-inset: inset 0 1px 0 rgba(255, 255, 255, .7);
  --ch-radius: 16px;
}

.ch-wrap { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

/* ---------- loading ---------- */
.ch-loading { display: flex; align-items: center; gap: 12px; padding: 48px 16px; color: var(--ch-txt3); font-size: 13.5px; letter-spacing: .01em; justify-content: center; }
.ch-loading__pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--color-secondary, #0D9488); animation: ch-pulse 1.2s var(--ch-ease) infinite; }
@keyframes ch-pulse { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }

/* ---------- summary tiles ---------- */
.ch-summary { display: grid; grid-template-columns: 1.4fr 1.6fr .8fr .8fr; gap: 12px; }
.ch-tile {
  background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
  padding: 14px 16px 13px; box-shadow: var(--ch-shadow), var(--ch-inset); min-height: 96px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.ch-tile__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ch-txt3); display: flex; align-items: center; gap: 7px; }
.ch-tile__value { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; color: var(--ch-txt); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ch-tile__sub { font-size: 12px; color: var(--ch-txt2); margin-top: 3px; }
.ch-tile__sub--risk { color: var(--ch-risk); font-weight: 500; }
.ch-tile__chart { margin-top: 8px; }
.ch-tile--live::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 80px at 90% 10%, rgba(45, 212, 191, .16), transparent 70%); pointer-events: none; }

.ch-bandbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--ch-line-soft); margin: 10px 0 8px; box-shadow: inset 0 1px 1px rgba(15, 23, 42, .08); }
.ch-bandbar__seg { display: block; height: 100%; transition: width .5s var(--ch-ease); }
.ch-bandbar__seg + .ch-bandbar__seg { border-left: 1px solid rgba(255, 255, 255, .55); }
.ch-bandbar__seg--unscored { background: repeating-linear-gradient(45deg, #cbd5e1 0 4px, #e2e8f0 4px 8px); }
.ch-bandlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ch-txt2); font-variant-numeric: tabular-nums; }
.ch-bandlegend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

.ch-livedot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; display: inline-block; flex: none; position: relative; }
.ch-livedot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #10B981; opacity: .6; animation: ch-ripple 1.8s var(--ch-ease) infinite; }
.ch-livedot--sm { width: 6px; height: 6px; }
.ch-livedot--sm::after { inset: -3px; }
@keyframes ch-ripple { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- bars ---------- */
.ch-bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; }
.ch-bar { flex: 1; min-width: 3px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--color-secondary, #0D9488), rgba(13, 148, 136, .55)); transform-origin: bottom; animation: ch-grow .6s var(--ch-ease) both; transition: filter .15s; }
.ch-bar:hover { filter: brightness(1.15); }
@keyframes ch-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ch-bars__axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ch-txt3); margin-top: 5px; letter-spacing: .02em; }

/* ---------- body layout ---------- */
.ch-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }

/* controls */
.ch-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ch-controls__right { display: flex; align-items: center; gap: 8px; }
.ch-search { width: 200px; }
.ch-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--ch-line-soft); border: 1px solid var(--ch-line); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05); }
.ch-seg__btn {
  appearance: none; border: 0; background: transparent; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ch-txt2); display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s var(--ch-ease), color .18s, transform .12s var(--ch-ease), box-shadow .18s;
}
.ch-seg__btn:hover { color: var(--ch-txt); }
.ch-seg__btn:active { transform: scale(.96); }
.ch-seg__btn.is-active { background: var(--ch-card); color: var(--ch-txt); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px -2px rgba(15, 23, 42, .12), var(--ch-inset); }
.ch-seg__n { font-size: 11px; color: var(--ch-txt3); font-variant-numeric: tabular-nums; font-weight: 600; }
.ch-seg__btn.is-active .ch-seg__n { color: var(--ch-txt2); }
.ch-recompute { white-space: nowrap; }

/* ---------- org cards ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ch-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--ch-txt3); font-size: 13.5px; }
.ch-card {
  background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius); padding: 14px 15px 13px;
  box-shadow: var(--ch-shadow), var(--ch-inset); cursor: pointer; position: relative; overflow: hidden; outline: none;
  transition: transform .22s var(--ch-ease), box-shadow .22s var(--ch-ease), border-color .22s;
  animation: ch-in .4s var(--ch-ease) both;
}
@keyframes ch-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ch-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ch-unscored); opacity: .9; }
.ch-card--healthy::before { background: var(--ch-healthy); }
.ch-card--watch::before { background: var(--ch-watch); }
.ch-card--at_risk::before { background: var(--ch-risk); }
.ch-card--dormant::before { background: var(--ch-dormant); }
.ch-card:hover { transform: translateY(-2px); box-shadow: var(--ch-shadow-hover), var(--ch-inset); border-color: rgba(15, 23, 42, .14); }
.ch-card:active { transform: scale(.985); transition-duration: .1s; }
.ch-card:focus-visible { box-shadow: 0 0 0 3px rgba(13, 148, 136, .35), var(--ch-shadow); }
.ch-card__top { display: flex; align-items: center; gap: 12px; }
.ch-card__id { flex: 1; min-width: 0; }
.ch-card__name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ch-txt); display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-card__name > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-card__name .ch-online { flex: 0 0 auto; }
.ch-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.ch-card__mrr { font-size: 12px; color: var(--ch-txt2); font-variant-numeric: tabular-nums; }
.ch-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.ch-card__stats { display: flex; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ch-line-soft); font-size: 12px; color: var(--ch-txt3); flex-wrap: wrap; }
.ch-card__stats b { color: var(--ch-txt2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-card__reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ch-card__reasons span, .ch-hero__reasons span { font-size: 11.5px; padding: 3px 8px; border-radius: 7px; background: var(--ch-line-soft); color: var(--ch-txt2); border: 1px solid transparent; }
.ch-card__flag { margin-top: 8px; font-size: 11px; color: var(--ch-watch); font-weight: 500; }
.ch-online { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #059669; background: rgba(16, 185, 129, .1); padding: 2px 7px 2px 5px; border-radius: 999px; }
.ch-online i { width: 6px; height: 6px; border-radius: 50%; background: #10B981; display: inline-block; animation: ch-blink 1.6s ease-in-out infinite; }
@keyframes ch-blink { 50% { opacity: .35; } }

/* rings + sparklines */
.ch-ring { display: block; flex: none; }
.ch-ring__track { fill: none; stroke: var(--ch-line-soft); }
.ch-ring__arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ch-ease); }
.ch-ring__num { font-weight: 650; fill: var(--ch-txt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-spark { display: block; }
.ch-trend { font-size: 11px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ch-trend--up { color: var(--ch-healthy); }
.ch-trend--down { color: var(--ch-risk); }
.ch-trend--flat { color: var(--ch-txt3); font-weight: 500; }

/* chips */
.ch-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--ch-line-soft); color: var(--ch-txt2); border: 1px solid transparent; white-space: nowrap; }
.ch-chip--trial { background: rgba(37, 99, 235, .1); color: #1D4ED8; }
.ch-chip--first_month { background: rgba(124, 58, 237, .1); color: #6D28D9; }
.ch-chip--paying { background: rgba(13, 148, 136, .12); color: #0F766E; }
.ch-chip--lapsed { background: rgba(217, 119, 6, .12); color: #B45309; }
.ch-chip--cancelled { background: rgba(100, 116, 139, .14); color: #475569; }
.ch-chip--band { background: color-mix(in srgb, var(--band) 14%, transparent); color: var(--band); }
.ch-chip--mrr { background: rgba(15, 23, 42, .06); color: var(--ch-txt); font-variant-numeric: tabular-nums; }

.ch-computed { margin-top: 14px; font-size: 11.5px; color: var(--ch-txt3); text-align: right; }

/* ---------- live rail ---------- */
.ch-rail {
  position: sticky; top: 12px; background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow), var(--ch-inset); padding: 14px 14px 10px; max-height: calc(100vh - 140px); overflow-y: auto;
}
.ch-rail__head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ch-txt3); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ch-rail__head--sub { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ch-line-soft); }
.ch-rail__empty { font-size: 12.5px; color: var(--ch-txt3); padding: 6px 0 4px; }
.ch-live-org { padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; margin: 0 -6px; }
.ch-live-org:hover { background: var(--ch-line-soft); }
.ch-live-org:active { transform: scale(.985); }
.ch-live-org__name { font-size: 12.5px; font-weight: 600; color: var(--ch-txt); margin-bottom: 4px; }
.ch-live-user { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ch-txt2); padding: 2px 0; }
.ch-live-user__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-live-user__route { font-size: 10.5px; color: var(--ch-txt3); background: var(--ch-line-soft); padding: 1px 6px; border-radius: 5px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-feed__item { padding: 7px 10px; margin: 0 -6px; border-radius: 10px; cursor: pointer; transition: background .15s; animation: ch-in .35s var(--ch-ease) both; }
.ch-feed__item:hover { background: var(--ch-line-soft); }
.ch-feed__what { font-size: 12.5px; color: var(--ch-txt); font-weight: 500; }
.ch-feed__who { font-size: 11px; color: var(--ch-txt3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- org drawer ---------- */
.ch-drawer { width: 52vw; min-width: 520px; max-width: 720px; }
.ch-hero { position: relative; padding: 26px 26px 20px; color: #fff; background: linear-gradient(135deg, #0B1F3A 0%, #12345C 60%, #0F4C5C 100%); }
.ch-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px 200px at 100% 0%, rgba(45, 212, 191, .22), transparent 70%); }
.ch-hero--at_risk::after { background: radial-gradient(360px 200px at 100% 0%, rgba(225, 29, 72, .28), transparent 70%); }
.ch-hero--watch::after { background: radial-gradient(360px 200px at 100% 0%, rgba(217, 119, 6, .26), transparent 70%); }
.ch-hero--dormant::after { background: radial-gradient(360px 200px at 100% 0%, rgba(148, 163, 184, .2), transparent 70%); }
.ch-hero__row { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.ch-hero .ch-ring__track { stroke: rgba(255, 255, 255, .16); }
.ch-hero .ch-ring__num { fill: #fff; }
.ch-hero__id { flex: 1; min-width: 0; }
.ch-hero__name { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.ch-hero__tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.ch-hero__tags .ch-chip { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
.ch-hero__tags .ch-chip--band { background: color-mix(in srgb, var(--band) 55%, rgba(255,255,255,.1)); }
.ch-hero__tags .ch-trend--up { color: #5EEAD4; } .ch-hero__tags .ch-trend--down { color: #FDA4AF; } .ch-hero__tags .ch-trend--flat { color: rgba(255,255,255,.6); }
.ch-hero__admin { font-size: 12.5px; color: rgba(255, 255, 255, .72); margin-top: 8px; }
.ch-hero__admin a { color: #99F6E4; text-decoration: none; }
.ch-hero__reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; position: relative; z-index: 1; }
.ch-hero__reasons span { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .1); }

.ch-actions { display: flex; align-items: center; gap: 8px; padding: 12px 26px; border-bottom: 1px solid var(--ch-line); background: var(--ch-card); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(12px); }
.ch-actions__note { font-size: 12px; color: var(--ch-watch); margin-left: auto; }
.ch-actions .btn:active { transform: scale(.97); }

.ch-sections { padding: 6px 26px 40px; display: flex; flex-direction: column; gap: 22px; }
.ch-section__title { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ch-txt3); margin: 14px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.ch-section__title small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ch-txt3); }

.ch-subscores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ch-sub__head { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ch-txt2); margin-bottom: 5px; }
.ch-sub__head b { color: var(--ch-txt); font-variant-numeric: tabular-nums; }
.ch-sub__head small { color: var(--ch-txt3); font-weight: 500; }
.ch-sub__track { height: 6px; border-radius: 4px; background: var(--ch-line-soft); overflow: hidden; box-shadow: inset 0 1px 1px rgba(15, 23, 42, .06); }
.ch-sub__fill { height: 100%; border-radius: 4px; transition: width .7s var(--ch-ease); }
/* Score breakdown captions (24 Sep 2026) — every bar says what it measures */
.ch-section__lede { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ch-txt3); max-width: 62ch; }
.ch-sub__what { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--ch-txt3); }


.ch-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin-top: 14px; }
.ch-kv > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px; background: var(--ch-line-soft); }
.ch-kv span { font-size: 11px; color: var(--ch-txt3); letter-spacing: .02em; }
.ch-kv b { font-size: 13.5px; color: var(--ch-txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-kv small { font-size: 11px; color: var(--ch-txt3); font-weight: 400; }

.ch-funnel { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 12px; }
.ch-funnel__cell { text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--ch-line-soft); }
.ch-funnel__cell b { display: block; font-size: 16px; font-weight: 650; color: var(--ch-txt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-funnel__cell span { font-size: 10px; color: var(--ch-txt3); letter-spacing: .02em; }
.ch-funnel__cell.is-zero b { color: var(--ch-txt3); font-weight: 500; }

.ch-seats { display: flex; flex-direction: column; gap: 8px; }
.ch-seat { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px; transition: background .15s; }
.ch-seat:hover { background: var(--ch-line-soft); }
.ch-seat__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #12345C, #0F766E); flex: none; box-shadow: var(--ch-inset); }
.ch-seat.is-pending .ch-seat__avatar { background: var(--ch-line-soft); color: var(--ch-txt3); border: 1px dashed var(--ch-line); }
.ch-seat.is-online .ch-seat__avatar { box-shadow: 0 0 0 2px var(--ch-card), 0 0 0 3.5px #10B981; }
.ch-seat__id { flex: 1; min-width: 0; }
.ch-seat__name { font-size: 13.5px; font-weight: 600; color: var(--ch-txt); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-seat__role { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ch-txt3); background: var(--ch-line-soft); padding: 1px 6px; border-radius: 5px; }
.ch-seat__meta { font-size: 11.5px; color: var(--ch-txt3); display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.ch-seat__stats { text-align: right; flex: none; }
.ch-seat__stats b { display: block; font-size: 13px; font-weight: 600; color: var(--ch-txt); font-variant-numeric: tabular-nums; }
.ch-seat__stats span { font-size: 11px; color: var(--ch-txt3); }

.ch-milestones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.ch-ms { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ch-txt3); padding: 5px 0; }
.ch-ms i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ch-line); flex: none; position: relative; transition: background .25s var(--ch-ease), border-color .25s; }
.ch-ms.is-hit { color: var(--ch-txt); }
.ch-ms.is-hit i { background: var(--ch-healthy); border-color: var(--ch-healthy); }
.ch-ms.is-hit i::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ch-ms small { margin-left: auto; font-size: 11px; color: var(--ch-txt3); }

.ch-features { display: flex; flex-direction: column; gap: 6px; }
.ch-feature { display: grid; grid-template-columns: 150px 1fr 36px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ch-txt2); text-transform: capitalize; }
.ch-feature__track { height: 7px; border-radius: 4px; background: var(--ch-line-soft); overflow: hidden; }
.ch-feature__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #12345C, var(--ch-healthy)); transition: width .7s var(--ch-ease); }
.ch-feature b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ch-txt); font-weight: 600; }

.ch-alerts { display: flex; flex-direction: column; gap: 6px; }
.ch-alert { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 11px; border-radius: 10px; background: var(--ch-line-soft); border-left: 3px solid var(--ch-txt3); }
.ch-alert--sent { border-left-color: var(--ch-healthy); }
.ch-alert--failed { border-left-color: var(--ch-risk); }
.ch-alert--skipped, .ch-alert--suppressed { border-left-color: var(--ch-watch); }
.ch-alert__kind { font-size: 12.5px; font-weight: 600; color: var(--ch-txt); }
.ch-alert__meta { font-size: 11px; color: var(--ch-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .ch-summary { grid-template-columns: 1fr 1fr; } .ch-body { grid-template-columns: 1fr; } .ch-rail { position: static; max-height: none; } }
@media (max-width: 720px) { .ch-summary { grid-template-columns: 1fr; } .ch-drawer { width: 100vw; min-width: 0; } .ch-subscores { grid-template-columns: repeat(2, 1fr); } .ch-funnel { grid-template-columns: repeat(4, 1fr); } .ch-kv { grid-template-columns: 1fr 1fr; } .ch-feature { grid-template-columns: 100px 1fr 32px; } }

@media (prefers-reduced-motion: reduce) {
  .ch-card, .ch-feed__item, .ch-bar { animation: none; }
  .ch-livedot::after, .ch-online i, .ch-loading__pulse { animation: none; }
  .ch-card, .ch-seg__btn, .ch-ring__arc, .ch-sub__fill, .ch-feature__fill, .ch-bandbar__seg { transition: none; }
}

/* Embedded inside the CRM lead drawer (Usage tab) */
.ch-embed { margin: 0 -22px; }
.ch-embed .ch-hero--compact { padding: 18px 22px 16px; border-radius: 14px; margin: 0 22px 0; }
.ch-embed .ch-hero--compact .ch-hero__name { font-size: 17px; }
.ch-embed .ch-actions { padding: 10px 22px; top: -1px; }
.ch-embed .ch-sections { padding: 6px 22px 30px; }
.ch-embed > .ch-loading { padding: 40px 0; }

/* ---------- usage shape (per person and per account, same renderer) ---------- */
.ch-usage { display: flex; flex-direction: column; gap: 12px; }
.ch-usage--empty {
  padding: 18px 16px; border-radius: 13px; border: 1px dashed var(--ch-line);
  background: var(--ch-line-soft); color: var(--ch-txt3); font-size: 12.5px; line-height: 1.5;
}

.ch-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ch-fact {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 11px 12px 12px; border-radius: 13px;
  background: var(--ch-card); border: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow), var(--ch-inset);
}
.ch-fact__label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ch-txt3); }
.ch-fact__value {
  font-size: 19px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15;
  color: var(--ch-txt); font-variant-numeric: tabular-nums;
}
.ch-fact__value small { font-size: 12.5px; font-weight: 500; color: var(--ch-txt3); letter-spacing: 0; }
.ch-fact__sub { font-size: 11px; line-height: 1.4; color: var(--ch-txt3); font-weight: 400; }
.ch-fact--quiet .ch-fact__value { color: var(--ch-txt3); }

.ch-usage__split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ch-panel {
  padding: 13px 15px 14px; border-radius: 13px;
  background: var(--ch-card); border: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow), var(--ch-inset);
}
.ch-panel__title {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ch-txt3);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.ch-panel__title small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ch-txt3); font-size: 11.5px; }

/* days of the week */
.ch-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.ch-wk { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.ch-wk__col { width: 100%; height: 72px; display: flex; align-items: flex-end; border-radius: 7px; background: var(--ch-line-soft); overflow: hidden; }
.ch-wk__fill {
  width: 100%; border-radius: 7px;
  background: linear-gradient(180deg, rgba(13, 148, 136, .72), var(--ch-healthy));
  transition: height .6s var(--ch-ease);
}
.ch-wk__day { font-size: 11px; font-weight: 600; color: var(--ch-txt2); letter-spacing: .01em; }
.ch-wk__val { font-size: 10.5px; color: var(--ch-txt3); font-variant-numeric: tabular-nums; }
.ch-wk.is-peak .ch-wk__fill { background: linear-gradient(180deg, #12345C, var(--ch-healthy)); }
.ch-wk.is-peak .ch-wk__day { color: var(--ch-txt); }
.ch-wk.is-zero .ch-wk__fill { background: var(--ch-line); }
.ch-wk.is-zero .ch-wk__day { color: var(--ch-txt3); font-weight: 500; }

/* time of day */
.ch-clock { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; }
.ch-hr { min-width: 0; }
.ch-hr__col { height: 72px; display: flex; align-items: flex-end; border-radius: 3px; background: var(--ch-line-soft); overflow: hidden; }
.ch-hr__fill { width: 100%; border-radius: 3px; background: var(--ch-line); transition: height .6s var(--ch-ease); }
.ch-hr.has-login .ch-hr__fill { background: linear-gradient(180deg, rgba(13, 148, 136, .7), var(--ch-healthy)); }
.ch-clock__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--ch-txt3); font-variant-numeric: tabular-nums; }
.ch-clock__key { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--ch-txt3); }
.ch-clock__key i { width: 9px; height: 9px; border-radius: 3px; background: var(--ch-healthy); flex: none; }

/* the weighted score, kept but folded away */
.ch-why { margin-top: 14px; border-top: 1px solid var(--ch-line-soft); padding-top: 10px; }
.ch-why > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--ch-txt3);
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 9px;
  background: var(--ch-line-soft); transition: color .15s, background .15s, transform .12s var(--ch-ease);
}
.ch-why > summary::-webkit-details-marker { display: none; }
.ch-why > summary::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .28s var(--ch-ease); margin-left: 1px;
}
.ch-why[open] > summary::before { transform: rotate(45deg); }
.ch-why > summary:hover { color: var(--ch-txt); }
.ch-why > summary:active { transform: scale(.985); }
.ch-why[open] > summary { margin-bottom: 12px; }

/* ---------- expandable seats ---------- */
.ch-seatx {
  border: 1px solid var(--ch-line); border-radius: 14px; background: var(--ch-card);
  box-shadow: var(--ch-shadow), var(--ch-inset); overflow: hidden;
  transition: box-shadow .28s var(--ch-ease), border-color .28s var(--ch-ease);
}
.ch-seatx:hover { box-shadow: var(--ch-shadow-hover), var(--ch-inset); }
.ch-seatx.is-open { border-color: rgba(13, 148, 136, .34); }
.ch-seatx__row {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)) 22px;
  align-items: center; gap: 12px; padding: 11px 14px; background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: background .15s, transform .12s var(--ch-ease);
}
.ch-seatx__row:hover { background: var(--ch-line-soft); }
.ch-seatx__row:active { transform: scale(.995); }
.ch-seatx__row:focus-visible { outline: 2px solid var(--ch-healthy); outline-offset: -2px; }
.ch-seatx__id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch-seatx__nums { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch-seatx__nums b { font-size: 13.5px; font-weight: 650; color: var(--ch-txt); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-seatx__nums b small { font-size: 11.5px; font-weight: 500; color: var(--ch-txt3); }
.ch-seatx__nums span { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ch-txt3); }
.ch-seatx__nums--wide b { text-transform: capitalize; font-weight: 600; font-size: 12.5px; }
.ch-seatx__chev {
  width: 7px; height: 7px; border-right: 1.5px solid var(--ch-txt3); border-bottom: 1.5px solid var(--ch-txt3);
  transform: rotate(-45deg); justify-self: end; transition: transform .3s var(--ch-ease), border-color .2s;
}
.ch-seatx.is-open .ch-seatx__chev { transform: rotate(45deg); border-color: var(--ch-healthy); }
.ch-seatx__drill { height: 0; overflow: hidden; transition: height .36s var(--ch-ease); }
.ch-seatx__drill > * { padding: 4px 14px 16px; }
.ch-seatx.is-idle .ch-seatx__row { opacity: .72; }
.ch-seatx.is-pending { border-style: dashed; box-shadow: none; }
.ch-seatx.is-pending .ch-seatx__row { cursor: default; }
.ch-seat__role--top { color: #0F766E; background: rgba(13, 148, 136, .12); }
.ch-seat__role--idle { color: var(--ch-risk); background: rgba(225, 29, 72, .1); }
.ch-seat__avatar--sm { width: 24px; height: 24px; font-size: 10px; }

/* ---------- recent activity, a card per day ---------- */
.ch-days { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-day {
  padding: 12px 14px 10px; border-radius: 13px; background: var(--ch-card);
  border: 1px solid var(--ch-line); box-shadow: var(--ch-shadow), var(--ch-inset);
}
.ch-day__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--ch-line-soft);
}
.ch-day__head b { font-size: 13px; font-weight: 650; color: var(--ch-txt); letter-spacing: -.01em; }
.ch-day__head span { font-size: 11px; color: var(--ch-txt3); font-variant-numeric: tabular-nums; }
.ch-day__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 8px 0; align-items: start; }
.ch-day__row + .ch-day__row { border-top: 1px solid var(--ch-line-soft); }
.ch-day__id { min-width: 0; grid-column: 2; }
.ch-day__id b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ch-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-day__id small { font-size: 11px; color: var(--ch-txt3); font-variant-numeric: tabular-nums; }
/* third child of the two column row, so it sits under the name, not under the avatar */
.ch-day__kinds { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ch-kind {
  font-size: 10.5px; font-weight: 500; color: var(--ch-txt2); background: var(--ch-line-soft);
  border-radius: 6px; padding: 2px 7px; text-transform: capitalize; white-space: nowrap;
}
.ch-kind b { font-weight: 650; color: var(--ch-txt); font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .ch-facts { grid-template-columns: repeat(3, 1fr); }
  .ch-usage__split { grid-template-columns: 1fr; }
  .ch-days { grid-template-columns: 1fr; }
  .ch-seatx__row { grid-template-columns: 34px minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) 22px; }
  .ch-seatx__nums--wide { display: none; }
}
@media (max-width: 720px) {
  .ch-facts { grid-template-columns: repeat(2, 1fr); }
  .ch-seatx__row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, .8fr) 22px; }
  .ch-seatx__nums:nth-of-type(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-wk__fill, .ch-hr__fill, .ch-seatx__drill, .ch-seatx__chev, .ch-seatx__row, .ch-why > summary { transition: none; }
}