/* ==========================================================================
   fig-real-wage-index — the level chart.
   Every colour comes from a token so the dark band remaps cleanly.
   ========================================================================== */

.rwi__controls { justify-content: space-between; }

.rwi__readout .readout__value.is-real  { color: var(--c-real); }
.rwi__readout .readout__value.is-trend { color: var(--c-trend); }

/* ---- the lines ----------------------------------------------------------- */

.rwi__obs   { stroke: var(--c-real); }
.rwi__cps   { stroke: var(--c-muted); opacity: .9; }
.rwi__trend { stroke: var(--c-trend); stroke-width: 2px; }

.sw-layer--cps {
  transition: opacity var(--dur) var(--ease);
}
.sw-layer--cps.is-off { opacity: 0; }

/* the January 2017 baseline */
.rwi__base line { stroke: var(--ink-3); opacity: .45; stroke-dasharray: none; stroke-width: 1; }

/* ---- the shortfall ------------------------------------------------------- */

.rwi__wedge {
  fill: var(--c-loss);
  opacity: .16;
}
.rwi__wedge-label {
  fill: var(--c-loss);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: .01em;
}
.rwi__wedge-label2 { fill: var(--c-loss); opacity: .85; }

.rwi__bracket {
  fill: none;
  stroke: var(--c-loss);
  stroke-width: 1.5;
}
.rwi__bracket-value {
  fill: var(--c-loss);
  font-size: 15px;
  font-weight: 660;
  letter-spacing: -0.01em;
}
.rwi__bracket-note { fill: var(--ink-3); }

.rwi__end--trend { fill: var(--c-trend); font-size: 12px; }

/* ---- the moments --------------------------------------------------------- */

.rwi__moment { fill: var(--c-real); stroke: var(--card); stroke-width: 2; }
.rwi__moment.is-low { fill: var(--c-loss); }
.rwi__moment.is-regain { fill: var(--c-gain); }

.rwi__moment-label { fill: var(--ink); }
.rwi__moment-label.is-low { fill: var(--c-loss); font-size: 15px; }
.rwi__moment-label.is-regain { fill: var(--c-gain); }
.rwi__moment-sub { fill: var(--ink-3); }

/* ---- scrub cursor -------------------------------------------------------- */

.rwi__cursor {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.rwi__cursor-gap {
  stroke: var(--c-loss);
  stroke-width: 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.rwi__cursor-dot {
  opacity: 0;
  stroke: var(--card);
  stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.rwi__cursor-dot.is-obs   { fill: var(--c-real); }
.rwi__cursor-dot.is-trend { fill: var(--c-trend); }
.sw-layer--cursor.is-on .rwi__cursor,
.sw-layer--cursor.is-on .rwi__cursor-gap,
.sw-layer--cursor.is-on .rwi__cursor-dot { opacity: 1; }
.sw-layer--cursor.is-on .rwi__cursor-gap { opacity: .5; }

/* ---- table caption ------------------------------------------------------- */

.sw-table__caption {
  caption-side: top;
  text-align: left;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.5;
  padding-bottom: .5rem;
  white-space: normal;
}

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 640px) {
  .rwi__controls { gap: var(--sp-3); }
  .rwi__bracket-value { font-size: 14px; }
  .rwi__wedge-label { font-size: 12px; }
}

/* The dark band swallows low-opacity fills; give the wedge more body there. */
.band--dark .rwi__wedge { opacity: .26; }