/* ==========================================================================
   fig-offcycle — escape hatch 2: the raise outside the annual review.
   Off-cycle raises carry the accent token; the on-cycle norm carries the
   nominal-wage token, so the pair reads the same way everywhere on the page.
   ========================================================================== */

.ofc { display: block; }

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

.ofc-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;
}
.ofc-say b { color: var(--ink); font-weight: 620; }

/* ---- Act 1: Figure 11, the two distributions ------------------------------ */

.ofc-zone.is-norm { fill: var(--c-nominal); opacity: .07; }
.ofc-zone.is-tail { fill: var(--c-accent); opacity: .055; }

.ofc-area.is-on  { fill: var(--c-nominal); opacity: .3; }
.ofc-area.is-off { fill: var(--c-accent);  opacity: .32; }

.ofc-step { stroke-linejoin: miter; stroke-linecap: butt; }
.ofc-step.is-on  { stroke: var(--c-nominal); stroke-width: 2.2px; }
.ofc-step.is-off { stroke: var(--c-accent);  stroke-width: 2.2px; }

.ofc-lab.is-on  { fill: var(--c-nominal); }
.ofc-lab.is-off { fill: var(--c-accent); }
.ofc-lab { fill: var(--ink-2); }

.ofc-cursor {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.ofc-flag {
  fill: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sw-layer--cursor.is-on .ofc-cursor { opacity: .5; }
.sw-layer--cursor.is-on .ofc-flag { opacity: 1; }

/* ---- Act 2: Figure 12, the medians ---------------------------------------- */

.ofc-ribbon { fill: var(--c-accent); opacity: .12; }

.ofc-line.is-on  { stroke: var(--c-nominal); stroke-width: 2.4px; }
.ofc-line.is-off { stroke: var(--c-accent);  stroke-width: 2.4px; }
.ofc-cpi { stroke: var(--c-inflation); stroke-width: 2px; opacity: .85; }

.ofc-mark.is-on  { fill: var(--c-nominal); stroke: var(--card); stroke-width: 1.2; }
.ofc-mark.is-off { fill: var(--c-accent);  stroke: var(--card); stroke-width: 1.2; }

.ofc-end.is-on  { fill: var(--c-nominal); }
.ofc-end.is-off { fill: var(--c-accent); }
.ofc-end.is-cpi { fill: var(--c-inflation); }

.ofc-gapline {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sw-layer--cursor.is-on .ofc-gapline { opacity: .45; }

/* ---- Persistent strip: Figure 10 ----------------------------------------- */

.ofc-strip {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.ofc-block { min-width: 0; }
.ofc-block__title {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 640;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.ofc-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: 38rem;
}
.ofc-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: 42rem;
}
.ofc-block__note b { color: var(--ink); font-weight: 640; }

.ofc-normband { fill: var(--c-nominal); opacity: .1; }
.ofc-bandlab { fill: var(--c-nominal); opacity: .95; }

.ofc-bar { fill: var(--c-muted); opacity: .8; }
.ofc-bar.is-hot { fill: var(--c-accent); opacity: 1; }

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

.ofc-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;
}

/* ---- Readout variants ----------------------------------------------------- */

.readout--three { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.readout__value.is-accent { color: var(--c-accent); }

.ofc-zone-edge {
  stroke: var(--c-accent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .5;
}

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