/* ─────────────────────────────────────────────────────────────────────
   DiveOS chart card — .dv-chart-card

   Canonical panel for hand-rolled Chartkick chart containers (the
   `bg-surface border border-hairline rounded-lg shadow-card p-6` + an
   `<h3 class="text-lg ...">` pattern dotted around dashboards). White
   surface, 1px hairline, radius-lg, padding via the --space scale, and a
   head (title + optional actions) that flows into a body holding the
   chart canvas.

   Unlike .dv-card (eyebrow head, flush body), the chart card keeps a
   prominent --text-lg display title and a generous body min-height so the
   chart canvas has room before Chartkick measures it.

   Token-driven; @imported from application.css after components/card.css.
   ───────────────────────────────────────────────────────────────────── */

.dv-chart-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* --raised : soft elevation for cards floating above the canvas. */
.dv-chart-card--raised { box-shadow: var(--shadow-sm); }

/* Head — title (left) + optional actions (right). */
.dv-chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dv-chart-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: var(--font-display);
}

.dv-chart-card__sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.dv-chart-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Body — holds the chart canvas. min-height keeps the panel from
   collapsing before Chartkick renders / when data is empty. */
.dv-chart-card__body {
  min-height: 300px;
}