/* Spirited Energy — motion chart plates */

.se-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--se-border);
  background: var(--se-white);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
}

.se-chart.se-chart-tall { aspect-ratio: 16 / 10; }
.se-chart.se-chart-band { aspect-ratio: 21 / 9; }
.se-chart.se-chart-wide { aspect-ratio: 2 / 1; }

.se-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.se-chart-title {
  font-family: var(--se-font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.se-chart-sub,
.se-chart-foot,
.se-axis,
.se-chart-note {
  font-family: var(--se-font-body);
  font-size: 0.72rem;
}

.se-axis-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.se-tick-label {
  font-variant-numeric: tabular-nums;
}

.se-legend-label {
  font-size: 0.7rem;
}

.se-axis-rule {
  shape-rendering: crispEdges;
}

.se-bar-label,
.se-card-title {
  font-family: var(--se-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.se-card-title { font-size: 0.85rem; }

.se-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js-motion .se-chart:not(.is-drawn) .se-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
  }
  html.js-motion .se-chart.is-drawn .se-line {
    animation: se-draw-line 1.1s var(--se-ease) forwards;
  }
  html.js-motion .se-chart.is-drawn .se-fill,
  html.js-motion .se-chart.is-drawn .se-card,
  html.js-motion .se-chart.is-drawn .se-mark {
    animation: se-fade-up 0.7s var(--se-ease) both;
  }
}

@keyframes se-draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes se-fade-up {
  from { opacity: 0; }
  to { opacity: 1; }
}

@container (max-width: 520px) {
  .se-chart-title { font-size: 0.95rem; }
  .se-bar-label, .se-axis, .se-chart-sub { font-size: 0.62rem; }
}