/* TASK-166 — the subscriber chart's `.cc*` rules, ported from the design bundle's ONE chart
 * component (`design/components/chart-component.ts`, injectCSS). This file is the ONE
 * authorship of `.cc*`; no `.cc` selector exists under `apps/web/src/`.
 *
 * The port's one value-preserving rewrite: the mockup's `.cc{--color-neutral-100:…;
 * --color-neutral-200:…}` aliases are resolved — `.cc__grid` reads `var(--color-divider)`
 * and `.cc__guide` `var(--color-ink-3)` directly (the values the aliases resolved to), and
 * the mockup's `--cc-line` fallback reads (a line colour no caller of the `subscribers`
 * type ever sets) become plain `var(--color-primary)` reads — the `subscribers` type's
 * colour in CHART_CONFIG.types. The
 * resolved colours are identical, and the design-system twin (`tokens.css`) gains no
 * property it never declared. */

.cc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cc__chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.cc__chips::-webkit-scrollbar {
  display: none;
}

.cc__chip {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-ink-2);
  font: 500 13px/1 var(--font-ui);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast, 120ms) var(--ease-out, ease-out);
}

.cc__chip:hover {
  background: var(--color-success-bg);
}

.cc__chip.is-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-fg);
}

.cc__wrap {
  position: relative;
  min-width: 0;
}

.cc__svg {
  display: block;
  width: 100%;
  height: 240px;
}

.cc__grid {
  stroke: var(--color-divider);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.cc__guide {
  stroke: var(--color-ink-3);
  stroke-width: 1;
}

.cc__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cc__area {
  fill: var(--color-primary);
  opacity: 0.08;
}

.cc__dot {
  fill: var(--color-surface);
  stroke: var(--color-primary);
  stroke-width: 2;
}

.cc__y {
  font: 400 11px/1 var(--font-num);
  fill: var(--color-ink-3);
  text-anchor: end;
}

.cc__x {
  font: 400 11px/1 var(--font-num);
  fill: var(--color-ink-3);
}

.cc__tip {
  position: absolute;
  pointer-events: none;
  background: #1f1b16;
  color: #faf6f0;
  font: 400 12px/1.3 var(--font-num);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 5;
}

.cc__tip strong {
  font-weight: 600;
}

@media (max-width: 767px) {
  .cc__svg {
    height: 180px;
  }
}