/* ==========================================================================
   SEN: Live — installed capacity chart
   Geometry and colour live in capchart.js: the SVG is generated, so a
   stylesheet cannot repaint it. Only typography and the shell are here.
   ========================================================================== */

.sl-capchart {
  max-width: 100%;
}

/* Inside the zoom dialog there is no column to size against, so the chart
   must claim the width the dialog gives it. */
.sl-zoom-mount .sl-capchart,
.sl-zoom-mount .sl-capchart-plot,
.sl-zoom-mount .sl-capchart-svg {
  width: 100%;
}

/* SVG text is sized in viewBox units, so stretching the viewBox to dialog
   width scales it with the drawing (L22). Scaled back by roughly the ratio
   between the dialog and the card, so the enlarged chart shows more detail
   rather than larger letters. */
.sl-zoom-mount .sl-capchart-axis { font-size: 7px; }
.sl-zoom-mount .sl-capchart-mark { font-size: 7px; }
.sl-zoom-mount .sl-capchart-note { font-size: 6.5px; }

.sl-capchart-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.sl-capchart-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Font sizes are in the SVG's coordinate system, not in rem: the viewBox
   scales with the card, and rem-sized labels would grow out of proportion
   on a wide screen. */
.sl-capchart-axis {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sl-capchart-note {
  font-size: 10px;
}

.sl-capchart-mark {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sl-capchart-foot {
  margin: 0.3rem 0 0;
  text-align: center;
  color: var(--sl-text-soft);
  font-size: 0.75rem;
}

/* Mode switch. Deliberately the same grammar as histchart's controls —
   same shape, same weight — so two charts on one page do not offer two
   different vocabularies for the same gesture. */
.sl-capchart-controls {
  display: inline-flex;
  gap: 4px;
  margin: -0.25em 0 -0.25em 8px;
  vertical-align: middle;
}

.sl-capchart-mode {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--sl-card-head);
  color: var(--sl-text-soft);
  border-radius: 4px;
  padding: 0.2em 0.5em;
  font: inherit;
  font-size: 0.75em;
  line-height: 1.4;
  cursor: pointer;
}

.sl-capchart-mode.is-active {
  color: var(--sl-text);
  font-weight: 600;
}

/* Legend, only in stacked mode. Swatches take their colour from JS, like
   every generated path on this site: a stylesheet cannot know the palette. */
.sl-capchart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: var(--sl-text-soft);
}

.sl-capchart-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}

.sl-capchart-key i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* The readout is HTML over the SVG, so the SVG needs a positioned parent. */
.sl-capchart-plot {
  position: relative;
}

/* Expand chip, matching histchart's. */
.sl-capchart-expand {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: var(--sl-text-soft);
  font: inherit;
  font-size: 0.9em;
  line-height: 1;
  padding: 0 0.3em;
  cursor: pointer;
  vertical-align: middle;
}

.sl-capchart-expand:hover {
  color: var(--sl-text);
}

/* Readout: base styling is inherited from .sl-hchart-readout in
   histchart.css, deliberately, so the two charts read identically. Only the
   stacked list needs anything of its own. */
.sl-capchart-readout .sl-hchart-readout-row i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sl-capchart-readout .sl-hchart-readout-row b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sl-capchart-readout .sl-hchart-readout-row.is-total {
  border-top: 1px solid var(--sl-rule);
  margin-top: 3px;
  padding-top: 4px;
  color: var(--sl-text);
}