/* fig-norm-shift ------------------------------------------------------------
   Firm wage norms before, during and after the inflation. Colours come only
   from the tokens, so the dark band remaps them without a variant here.
   -------------------------------------------------------------------------- */

.normshift__controls { justify-content: flex-start; }

.normshift__readout { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.normshift__readout .readout__value { font-variant-numeric: tabular-num lining-nums; }

/* the 2-4 percent band ---------------------------------------------------- */

.normshift__band {
  fill: var(--c-nominal);
  opacity: .07;
}
.normshift__bracket {
  fill: none;
  stroke: var(--c-muted);
  stroke-width: 1;
  opacity: .7;
}
.normshift__bracket.is-band { stroke: var(--c-nominal); stroke-width: 1.25; opacity: .6; }

.normshift__bandlbl {
  fill: var(--ink-3);
  font-size: 11.5px;
  font-weight: 560;
}
.normshift__bandlbl.is-band {
  fill: var(--c-nominal);
  font-size: 13px;
  font-weight: 660;
}

/* the ghost series is an outline, so its legend key must be one too */
.normshift__legend .sw-legend__item:first-child .sw-legend__swatch {
  background: none;
  border: 1.5px solid var(--c-muted);
}

/* bars -------------------------------------------------------------------- */

.normshift__ghost {
  fill: none;
  stroke: var(--c-muted);
  stroke-width: 1.25;
  opacity: .85;
}
.normshift__bar {
  fill: var(--c-nominal);
  opacity: .42;
}
.normshift__bar.is-in-band { opacity: 1; }

.normshift__barlbl {
  fill: var(--c-nominal);
  font-size: 12px;
  font-weight: 640;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}

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

.normshift__cursor {
  fill: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
.sw-layer--cursor.is-on .normshift__cursor { opacity: .06; }

/* tooltip highlight for the active period --------------------------------- */

.normshift__legend { margin-top: var(--sp-3); }

.sw-tip__row.is-on .sw-tip__key,
.sw-tip__row.is-on .sw-tip__val { color: inherit; font-weight: 640; }

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

.sw-table tr.is-in-band th,
.sw-table tr.is-in-band td { background: color-mix(in srgb, var(--c-nominal) 7%, transparent); }
.sw-table tr.is-total th,
.sw-table tr.is-total td {
  border-top: 1px solid var(--rule);
  font-weight: 640;
  color: var(--ink);
}

@media (max-width: 480px) {
  .normshift__bandlbl.is-band { font-size: 12px; }
  .normshift__barlbl { font-size: 11px; }
}