/* ==========================================================================
   fig-age — age gradient lanes + the two mechanism cards.
   Every colour comes from a token; `--c` is set per row by the module so the
   same age hue carries across the main chart and both mechanism panels.
   ========================================================================== */

.fage__controls { margin-bottom: var(--sp-3); }

.fage__unit {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
  max-width: 34rem;
}

/* ---- Lanes --------------------------------------------------------------- */

.fage__name {
  fill: var(--ink);
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.005em;
}

/* The age hue is carried by the lane, not by the type: the palest tint is
   unreadable as small text on paper and the darkest is unreadable on the dark
   band, so every number stays in ink. */
.fage__delta {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 640;
  font-variant-numeric: tabular-num;
}
.fage__delta-sub { fill: var(--ink-3); }

.fage__missing {
  fill: var(--ink-3);
  font-size: 12px;
  font-style: italic;
}

.fage__lane {
  fill: var(--c);
  opacity: .42;
}

.fage__dot { stroke-width: 2.5; }
.fage__dot--pre { fill: var(--card); stroke: var(--c); }
.fage__dot--inf { fill: var(--c); stroke: var(--card); }
.band--dark .fage__dot--pre { fill: var(--dark-2); }
.band--dark .fage__dot--inf { stroke: var(--dark-2); }

.fage__val {
  font-size: 13px;
  font-variant-numeric: tabular-num;
}
.fage__val--inf { fill: var(--ink); font-weight: 640; }
.fage__val--pre { fill: var(--ink-3); font-weight: 500; }

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

/* ---- Mechanism cards ------------------------------------------------------ */

/* Container-driven, not viewport-driven: this figure has to survive being put
   in a 334px column on a 1440px screen, which a media query cannot see. */
.fage__mech {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--sp-5) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
}

.fage__card { min-width: 0; }

.fage__card-title {
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 640;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 .3rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.fage__card-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 700;
  align-self: center;
}
.band--dark .fage__card-n { background: var(--dark-3); border-color: var(--dark-rule); }

.fage__card-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 .35rem;
}

.fage__card-plot { margin-top: .1rem; }

.fage__card-note {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-3);
  margin: .45rem 0 0;
}

/* mechanism 1 — mobility bars */
.fage__bar-track { fill: var(--c); opacity: .14; }
.fage__bar { fill: var(--c); opacity: .85; }
.fage__bar-name { fill: var(--ink); font-size: 12.5px; font-weight: 600; }
.fage__bar-val {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 640;
  font-variant-numeric: tabular-num;
}

/* mechanism 2 — the payoff slope */
.fage__slope-line { stroke: var(--c); stroke-width: 2.6px; }
.fage__slope-name { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.fage__slope-end {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 640;
  font-variant-numeric: tabular-num;
}
.fage__slope-sub { fill: var(--ink-3); }

/* ---- Tables ---------------------------------------------------------------- */

.fage__table2 { margin-top: var(--sp-4); }

.fage__caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 640;
  color: var(--ink-2);
  padding: 0 0 .4rem;
}

.fage__t thead th[colspan] {
  text-align: center;
  border-bottom-color: var(--rule-soft);
}

/* ---- Distribution view (Figure 17) ---------------------------------------- */

.fage__controls .sw-seg[hidden] { display: none; }
.fage__controls { gap: var(--sp-3) var(--sp-5); }

.fage__readout { margin-bottom: var(--sp-3); }
.fage__readout .readout__value { font-weight: 400; }

.fage__cdf-band { fill: var(--c-loss); opacity: .15; stroke: none; }
.band--dark .fage__cdf-band { opacity: .3; }

.fage__cdf-line--pre  { stroke: var(--c-muted); stroke-width: 1.7px; }
.fage__cdf-line--post { stroke: var(--c); stroke-width: 2.6px; }
.fage__row--young .fage__cdf-line--post,
.fage__cdf .fage__cdf-line--post { stroke: var(--c); }

.fage__cdf-zero {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .75;
}

.fage__cdf-cursor {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: .45;
}
.fage__cdf-cursor-dot { stroke: var(--card); stroke-width: 1.6; }
.fage__cdf-cursor-dot.is-pre  { fill: var(--c-muted); }
.fage__cdf-cursor-dot.is-post { fill: var(--c); }
.band--dark .fage__cdf-cursor-dot { stroke: var(--dark-2); }

/* The two zero-line readings sit on top of a curve, so they carry a halo of
   the card colour rather than being nudged somewhere less meaningful. */
.fage__cdf .fage__val {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.band--dark .fage__cdf .fage__val { stroke: var(--dark-2); }
.fage__cdf .fage__name,
.fage__cdf .fage__delta {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.band--dark .fage__cdf .fage__name,
.band--dark .fage__cdf .fage__delta { stroke: var(--dark-2); }