/* ==========================================================================
   fig-sentiment-age — sentiment by age against the share of each group's
   income that was protected, plus the income-quintile companion.
   Years are ramped by recency; see the year tokens below.
   ========================================================================== */

/* A recency ramp: the earlier years sit on the shared cohort ramp and the
   most recent year — the one the paper's summary is about — takes the ink
   colour, so it stays the strongest line on the light paper and on the dark
   band alike. The dark band's darkest cohort tone is too weak for a line. */
.is-y2021 { --year-c: var(--c-muted); }
.is-y2022 { --year-c: var(--c-age-1); }
.is-y2023 { --year-c: var(--c-age-2); }
.is-y2024 { --year-c: var(--ink); }

/* ---- main panel ---------------------------------------------------------- */

.readout--age { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

.sw-legend--age { margin-bottom: var(--sp-2); }
/* the shared legend paints from an inline --c; these swatches take their
   colour from the same year class the lines use instead */
.sw-legend--age .sw-legend__line {
  border-top: 3px solid var(--year-c);
}

.age__line {
  stroke: var(--year-c);
  stroke-width: 2.6px;
}
.age__line.is-y2022 { stroke-width: 3px; }

.age__dot {
  fill: var(--year-c);
  stroke: var(--card);
  stroke-width: 1.6;
  transition: r var(--dur-fast) var(--ease);
}
.age__dot.is-on { stroke-width: 2.4; }

.age__endlabel { fill: var(--year-c); font-size: 12px; }

.age__guide {
  stroke: var(--c-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
  opacity: .8;
}
.age__guide.is-on {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  opacity: 1;
}

.age__grouplabel {
  fill: var(--ink-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-num;
}
.age__grouplabel.is-on { fill: var(--ink); font-weight: 640; }

.age__xlabel { fill: var(--ink-3); }

.sw-marker.age__base line { stroke: var(--ink-3); opacity: .85; }
.sw-marker.age__base text { fill: var(--ink-3); font-weight: 500; }

.sw-marker.age__compare line { stroke: var(--c-accent); stroke-dasharray: 6 4; }
.sw-marker.age__compare text { fill: var(--c-accent); font-weight: 600; }

/* ---- income-quintile companion ------------------------------------------- */

.age-quint {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-soft);
}
.age-quint__title {
  font-size: 1.05rem;
  line-height: var(--lh-snug);
  margin: 0 0 .3rem;
}
.age-quint__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
  max-width: 42rem;
}

.quint__line { stroke: var(--year-c); stroke-width: 2.1px; }
.quint__dot { fill: var(--year-c); stroke: var(--card); stroke-width: 1.4; }
.quint__endlabel { fill: var(--year-c); font-size: 11.5px; }

.quint__worst {
  fill: none;
  stroke: var(--c-loss);
  stroke-width: 1.6;
  stroke-dasharray: 2.5 2.5;
}
.quint__worst-label { fill: var(--c-loss); font-size: 12px; }

/* ---- details ------------------------------------------------------------- */

.sw-details__h {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--sp-4) 0 .4rem;
}
.sw-details__h:first-of-type { margin-top: 0; }

@media (max-width: 520px) {
  .readout--age { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}