/* ==========================================================================
   fig-switching — escape hatch 1: change employers.
   Every colour is a token so the dark act-break band remaps cleanly.
   ========================================================================== */

.jsw { display: block; }

/* ---- Act switcher --------------------------------------------------------- */

.jsw-tabs { margin-bottom: var(--sp-4); }
.jsw-stage { position: relative; }
.jsw-panel[hidden] { display: none; }

/* The sentence that carries each act's point. */
.jsw-say {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  margin: var(--sp-4) 0 0;
  max-width: 46rem;
}
.jsw-say b { color: var(--ink); font-weight: 620; }

/* ---- Act 1: Figure 2, stayers vs changers -------------------------------- */

.jsw-band { fill: var(--c-inflation); opacity: .055; }
.jsw-band-label { fill: var(--c-inflation); opacity: .85; letter-spacing: .02em; }

.jsw-stay { stroke: var(--c-nominal); stroke-width: 2.4px; }
.jsw-chg  { stroke: var(--c-gain);    stroke-width: 2.6px; }

.jsw-lossarea { fill: var(--c-loss); opacity: 0; }

.jsw-dot { stroke: var(--card); stroke-width: 2; }
.jsw-dot.is-chg  { fill: var(--c-gain); }
.jsw-dot.is-stay { fill: var(--c-nominal); }

.jsw-lab.is-chg  { fill: var(--c-gain); }
.jsw-lab.is-stay { fill: var(--c-nominal); }
.jsw-lab.is-loss { fill: var(--c-loss); }

.jsw-end.is-stay { fill: var(--c-nominal); }
.jsw-end.is-chg  { fill: var(--c-gain); }

.jsw-ann { transition: none; }

.jsw-cursor {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.jsw-cursor-dot {
  opacity: 0;
  stroke: var(--card);
  stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.jsw-cursor-dot.is-stay { fill: var(--c-nominal); }
.jsw-cursor-dot.is-chg  { fill: var(--c-gain); }
.sw-layer--cursor.is-on .jsw-cursor,
.sw-layer--cursor.is-on .jsw-cursor-dot { opacity: 1; }

/* ---- Act 2: Figure 13, the pass-through slope ---------------------------- */

.jsw-slope {
  display: grid;
  gap: var(--sp-5);
  max-width: 62rem;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .jsw-slope {
    grid-template-columns: minmax(0, 34rem) minmax(15rem, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .jsw-slope__side { position: sticky; top: var(--sp-5); }
}
.jsw-slope__plot { min-width: 0; }
.jsw-slope__side { min-width: 0; }

.jsw-mk.is-stay { fill: var(--c-nominal); opacity: .3; }
.jsw-mk.is-chg  { fill: var(--c-gain);    opacity: .3; }

.jsw-vgrid { opacity: .45; }

.jsw-ref { stroke: var(--ink-3); opacity: .75; }
.jsw-fit.is-chg  { stroke: var(--c-gain);    stroke-width: 3px; }
.jsw-fit.is-stay { stroke: var(--c-nominal); stroke-width: 3px; }

.jsw-span {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sw-layer--cursor.is-on .jsw-span { opacity: .8; }

/* Pass-through comparator ---------------------------------------------------*/

.jsw-pt__box {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.band--dark .jsw-pt__box { background: var(--dark-3); border-color: var(--dark-rule); }

.jsw-pt__title {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 640;
  letter-spacing: .01em;
  margin: 0 0 .3rem;
  color: var(--ink);
}
.jsw-pt__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 var(--sp-4);
}
.jsw-pt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }

.jsw-pt__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "track track"
    "note  note";
  align-items: baseline;
  gap: .25rem .6rem;
  font-family: var(--font-ui);
}
.jsw-pt__label {
  grid-area: label;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.jsw-pt__value {
  grid-area: value;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-num lining-nums;
  color: var(--ink);
  line-height: 1;
}
.jsw-pt__note {
  grid-area: note;
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.jsw-pt__track {
  grid-area: track;
  position: relative;
  display: block;
  height: 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: visible;
}
.jsw-pt__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-pill);
  background: var(--c-gain);
  width: 0;
}
.jsw-pt__row:nth-child(2) .jsw-pt__fill { background: var(--c-nominal); }
.jsw-pt__row:nth-child(3) .jsw-pt__fill { background: var(--c-muted); }
.jsw-pt__rule {
  position: absolute;
  top: -4px; bottom: -4px; right: 0;
  width: 2px;
  background: var(--ink-2);
  opacity: .9;
}

/* ---- Persistent strip ----------------------------------------------------- */

.jsw-strip {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
@media (min-width: 820px) {
  .jsw-strip {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--sp-7);
  }
}

.jsw-block { min-width: 0; }
.jsw-block__title {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 640;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.jsw-block__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 var(--sp-4);
  max-width: 34rem;
}
.jsw-block__note {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-2);
  margin: var(--sp-4) 0 0;
  max-width: 38rem;
}
.jsw-block__note b { color: var(--ink); font-weight: 640; }

/* Unit grids: two hundred-square blocks that look identical, which is the point */

.jsw-grids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.jsw-grid { margin: 0; min-width: 0; }
.jsw-grid__svg {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: auto;
  margin-top: .45rem;
}
.jsw-grid__cap { display: grid; font-family: var(--font-ui); gap: .05rem; }
.jsw-grid__val {
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-num lining-nums;
  color: var(--c-gain);
  line-height: 1.05;
}
.jsw-grid__lab { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); }
.jsw-grid__sub { font-size: var(--fs-micro); color: var(--ink-3); }

.jsw-cell { fill: color-mix(in srgb, var(--ink) 11%, transparent); }
.jsw-cell.is-on { fill: var(--c-gain); }

/* Dumbbell: the share whose real wage fell over four years */

.jsw-row-label { fill: var(--ink); }
.jsw-bar {
  stroke: var(--c-loss);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .5;
}
.jsw-mark.is-pre {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.jsw-mark.is-infl { fill: var(--c-loss); stroke: var(--card); stroke-width: 1.5; }
.jsw-val.is-pre { fill: var(--ink-3); }
.jsw-val.is-infl { fill: var(--c-loss); }

.jsw-gapline { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.jsw-gaparrow { stroke: var(--ink-2); stroke-width: 1.5; }
.jsw-gaptext { fill: var(--ink-2); }

/* ---- Table captions ------------------------------------------------------- */

.jsw-caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 620;
  color: var(--ink-2);
  padding: var(--sp-4) 0 .4rem;
}
.jsw .sw-table + .sw-table { margin-top: var(--sp-3); }

/* ---- Readout variant ------------------------------------------------------ */

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

@media (max-width: 520px) {
  .jsw-grids { gap: var(--sp-3); }
  .jsw-pt__value { font-size: 1.2rem; }
}

/* Labels that may land on top of the shortfall wash keep a paper-coloured
   halo so they stay legible in both the light and the dark band. */
.jsw-halo {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

.jsw-hint { margin: 0 0 var(--sp-3); }