/* 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. */

/* The clock and the deck share a row. The clock is a couple of small chips
   and the deck is the thing worth putting in the space beside them.
   1.35fr because a chart needs the width more than three chips do. */
.clock-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 28px;
  align-items: start;
}

/* One narrow column cannot hold a chart legibly, so below this they stack and
   the deck goes back to full width. */
@media (max-width: 1000px) {
  .clock-row { grid-template-columns: 1fr; gap: 8px; }
}

.weekly-col { min-width: 0; }

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

/* Compact: the deck now sits in roughly half the page width. */
#weekly-charts .show { padding: 14px 16px 10px; }
#weekly-charts .show-controls { margin-top: 6px; }

.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 {
  /* Stacked, not inline: at this width the title and its subtitle no longer
     fit on one line and wrapping mid-phrase read worse than two rows. */
  flex-direction: column;
  gap: 0;
}

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

.chart figcaption span {
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  /* Sized for the half-width column it now lives in. */
  max-height: 230px;
  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;
}

/* Sizes are in viewBox units and the SVG is scaled down to fit the column,
   so these are larger than they look — 18 here renders around 13px on screen. */
.ch-tick {
  fill: var(--muted);
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
}

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

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

.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: 22px;
}

/* 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: 230px; }
  .chart svg { max-height: 200px; }
}