/* fig-paycheck ------------------------------------------------------------- */

.paycheck__controls {
  align-items: flex-end;
  gap: var(--sp-4) var(--sp-6);
}
.paycheck__controls .sw-range { flex: 1 1 16rem; max-width: 26rem; }

.paycheck__nominal { stroke: var(--c-nominal); stroke-width: 2.6px; stroke-linejoin: miter; }
.paycheck__real    { stroke: var(--c-loss); stroke-width: 2.6px; }
.paycheck__wedge   { fill: var(--c-loss); opacity: .1; }
.paycheck__raise   { stroke: var(--c-nominal); stroke-width: 2.6px; opacity: .45; }

.paycheck__lbl-nom  { fill: var(--c-nominal); }
.paycheck__lbl-real { fill: var(--c-loss); }

.paycheck__cursor {
  stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.paycheck__dot {
  opacity: 0; stroke: var(--card); stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.paycheck__dot.is-nom  { fill: var(--c-nominal); }
.paycheck__dot.is-real { fill: var(--c-loss); }
.sw-layer--cursor.is-on .paycheck__cursor,
.sw-layer--cursor.is-on .paycheck__dot { opacity: 1; }

.paycheck__summary {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  border-left: 2px solid var(--c-loss);
  padding-left: var(--sp-3);
}

.paycheck__raise-dot { fill: var(--c-nominal); stroke: var(--card); stroke-width: 1.5; }
.paycheck__raise-lbl { fill: var(--c-nominal); font-size: 10.5px; }