/* The weekly chart deck.
 *
 * Every colour comes from a theme variable, same rule as the rest of the site:
 * a hex code here is a chart that only reads correctly in one of the six
 * themes. The SVG has a fixed viewBox and scales to the slide, so there is no
 * resize handler and no layout thrash. */

#weekly-charts .track { min-height: 360px; }

.chart-slide {
  width: 100%;
  flex-direction: column;
  gap: 6px;
}

.chart {
  margin: 0;
  width: 100%;
}

.chart figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.chart figcaption b {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 27px;
  color: var(--key-ink);
}

.chart figcaption span {
  font-size: 16px;
  color: var(--muted);
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  /* Below the caption's height and above unreadable. A chart that grows with a
     wide desktop stops being legible long before it stops fitting. */
  max-height: 320px;
  overflow: visible;
}

/* --- axes and furniture --------------------------------------------------- */

.ch-grid {
  stroke: var(--edge);
  stroke-width: 1;
}

/* The zero line carries meaning the other rules do not: everything above it is
   a gain and everything below a loss. */
.ch-zero {
  stroke: var(--muted);
  stroke-width: 1.5;
}

.ch-tick {
  fill: var(--muted);
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
}

.ch-name {
  fill: var(--body-ink);
  font-family: 'Patrick Hand', cursive;
  font-size: 15px;
}

.ch-value {
  fill: var(--body-ink);
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
}

.ch-empty {
  fill: var(--muted);
  font-family: 'Caveat', cursive;
  font-size: 26px;
}

/* --- marks ---------------------------------------------------------------- */

.ch-up { fill: var(--green); }
.ch-down { fill: var(--red); }
.ch-neutral { fill: var(--muted); }

.ch-range {
  fill: var(--edge);
}

.ch-dot-up { fill: var(--green); }
.ch-dot-down { fill: var(--red); }

.ch-median {
  stroke: var(--body-ink);
  stroke-width: 2;
}

/* A stroked path, never a filled one. The `fill="none"` presentation attribute
   on the element loses to any CSS `fill`, and the series rules below set one
   for the text labels — which turned every line into a filled polygon. */
.ch-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ch-label {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 18px;
}

/* Three series is all any chart here plots, and they have to stay apart on six
   different backgrounds — so they come from the theme's own accents rather
   than from a generic categorical ramp. Key ink, purple and green are the three
   that stay distinguishable in every theme; accent-ink is purple in most of
   them and sat too close to key-ink on the blueprints.

   Stroke only. The fill goes on the label rule below, which is scoped to text
   so it cannot reach a polyline. */
.ch-series-0 { stroke: var(--key-ink); }
.ch-series-1 { stroke: var(--purple); }
.ch-series-2 { stroke: var(--green); }

.ch-label.ch-series-0 { fill: var(--key-ink); stroke: none; }
.ch-label.ch-series-1 { fill: var(--purple); stroke: none; }
.ch-label.ch-series-2 { fill: var(--green); stroke: none; }

.range-note {
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 720px) {
  #weekly-charts .track { min-height: 300px; }
  .chart figcaption b { font-size: 23px; }
}