/* fig-cohort ---------------------------------------------------------------
   A hundred squares above and below the line they started on. Colour carries
   the only distinction that matters: still above, or fallen below.
   -------------------------------------------------------------------------- */

.cohort__readout { --readout-cols: 3; }
.cohort__controls { margin-bottom: var(--sp-2); }

.cohort__pop {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: .01em;
}

/* ---- the units ------------------------------------------------------------ */

.cohort__unit {
  transition: fill var(--dur) var(--ease);
}
.cohort__unit.is-kept   { fill: var(--c-gain); }
.cohort__unit.is-behind { fill: var(--c-loss); }

/* ---- the line they started on --------------------------------------------- */

.cohort__zero {
  stroke: var(--ink);
  stroke-width: 1.25;
  shape-rendering: crispEdges;
  opacity: .8;
}
.cohort__zero-label { fill: var(--ink-3); font-size: 11.5px; }
.cohort__kept-label { fill: var(--c-gain); font-size: 11.5px; font-weight: 620; }

/* ---- depth ruler ----------------------------------------------------------- */

.cohort__ruler { stroke: var(--c-grid); stroke-width: 1.25; }
.cohort__ruler-tick { stroke: var(--c-grid); stroke-width: 1.25; }
.cohort__ruler-label { fill: var(--ink-3); }
.cohort__ruler-title { fill: var(--ink-3); opacity: .8; }

.cohort__depth-lead {
  stroke: var(--c-loss);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .7;
}
.cohort__depth-dot { fill: var(--c-loss); }

/* ---- annotations ------------------------------------------------------------ */

.cohort__gap-a { fill: var(--c-loss); font-size: 13px; }
.cohort__gap-b { fill: var(--c-loss); font-size: 11.5px; opacity: .85; }

.cohort__pre-line {
  stroke: var(--ink-2);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  opacity: .75;
}
.cohort__pre-label {
  fill: var(--ink-2);
  font-size: 11.5px;
  font-weight: 560;
  paint-order: stroke fill;
  stroke: var(--card);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.cohort__pre-label--2 { font-weight: 500; fill: var(--ink-3); }

@media (max-width: 400px) {
  .cohort__gap-a { font-size: 12px; }
  .cohort__gap-b, .cohort__pre-label, .cohort__zero-label, .cohort__kept-label { font-size: 10.5px; }
}

/* The Table 1 fallback is two cohorts wide; let it scroll rather than shove
   the page sideways. */
.cohort__table th[scope="colgroup"] {
  text-align: center;
  border-bottom-color: var(--rule);
}

@media (prefers-reduced-motion: reduce) {
  .cohort__unit { transition: none; }
}

/* ---- the four-horizon rail (wide containers) --------------------------------- */

.cohort__rail-line { stroke: var(--c-loss); stroke-width: 1.5px; opacity: .45; }
.cohort__rail-dot {
  fill: var(--card);
  stroke: var(--c-loss);
  stroke-width: 2;
  transition: r var(--dur) var(--ease);
}
.cohort__rail-dot.is-on { fill: var(--c-loss); }
.cohort__rail-base { stroke: var(--c-grid); stroke-width: 1; }
.cohort__rail-title {
  fill: var(--ink-3); font-size: 11.5px; font-weight: 600;
  letter-spacing: .01em;
}
.cohort__rail-value { fill: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.cohort__rail-x { fill: var(--ink-3); }