/* ===== ch_chart_html (HTML form, scoped) =====
   Loaded from anvil.yaml native_deps.head_html.

   The root is the card, <div class="ch-chart-card" id="chart-card">, so its own rule stays a
   bare class and the rest scope on it at zero specificity. No other sheet, template or
   injected theme styles these four classes, so no rule here ties with another sheet.

   #chart-empty ships visible: the module hides it at init, so the designer canvas shows the
   empty-state line; the page at runtime does not. */

.ch-chart-card {
  background: var(--ch-bg-card);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  padding: var(--ch-space-md);
}

:where(.ch-chart-card) .ch-chart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ch-text-primary);
  margin: 0 0 var(--ch-space-md) 0;
  padding-bottom: var(--ch-space-sm);
  border-bottom: 1px solid var(--ch-border);
}

:where(.ch-chart-card) .ch-chart-container {
  position: relative;
  width: 100%;
  height: 250px;
}

:where(.ch-chart-card) .ch-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ch-text-muted);
  font-size: 14px;
}