/* fig-spread ----------------------------------------------------------------
   Two four-year distributions, before and during. The pre-pandemic one is the
   quiet ground the reader compares against; the inflation-period one is the
   figure. Loss red is reserved for the region below zero and its labels.
   --------------------------------------------------------------------------- */

.spread__controls { gap: var(--sp-3) var(--sp-6); }
.spread__legend { margin-top: var(--sp-2); }

/* ---- the two distributions -------------------------------------------------- */

.spread__pre-fill { fill: var(--c-muted); opacity: .2; }
.spread__pre-line { stroke: var(--c-muted); stroke-width: 2px; }
.spread__inf-line { stroke: var(--c-real); stroke-width: 2.4px; }
.spread__ghost {
  stroke: var(--c-nominal);
  stroke-dasharray: 2 3.5;
  opacity: .9;
}

/* ---- below zero -------------------------------------------------------------- */

.spread__zone { fill: var(--c-loss); opacity: .07; }
.sw-marker.spread__zero line { stroke: var(--ink-3); stroke-dasharray: 4 4; opacity: .9; }

.spread__zone-inf, .spread__zone-inf-sub, .spread__zone-pre, .spread__zone-pre-sub {
  paint-order: stroke fill; stroke: var(--card); stroke-width: 3.5px; stroke-linejoin: round;
}
.spread__zone-inf { fill: var(--c-loss); font-size: 17px; font-weight: 640; }
.spread__zone-dot { stroke: var(--card); stroke-width: 1.5; }
.spread__zone-dot.is-inf { fill: var(--c-real); }
.spread__zone-dot.is-pre { fill: var(--c-muted); }
.spread__zone-inf-sub { fill: var(--c-loss); font-size: 11px; opacity: .9; }
.spread__zone-pre { fill: var(--ink-3); font-size: 14px; font-weight: 620; }
.spread__zone-pre-sub { fill: var(--ink-3); font-size: 11px; }

/* ---- medians ------------------------------------------------------------------ */

.spread__med { stroke-width: 1.25; stroke-dasharray: 3 3; }
.spread__med--pre { stroke: var(--c-muted); fill: var(--c-muted); }
.spread__med--inf { stroke: var(--c-real); fill: var(--c-real); }
.spread__med-dot { stroke: var(--card); stroke-width: 1.5; }
.spread__med-tri { stroke: none; }

.spread__half { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }
.spread__half-label { fill: var(--ink-3); font-weight: 500; }

.spread__spike { fill: var(--ink-3); font-size: 11px; }

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

.spread__cursor {
  stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.spread__cursor-dot {
  opacity: 0; stroke: var(--card); stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.spread__cursor-dot.is-pre { fill: var(--c-muted); }
.spread__cursor-dot.is-inf { fill: var(--c-real); }
.sw-layer--cursor.is-on .spread__cursor,
.sw-layer--cursor.is-on .spread__cursor-dot { opacity: 1; }

.spread__readout .readout__value.is-muted { color: var(--ink-2); }

@media (max-width: 400px) {
  .spread__zone-inf { font-size: 15px; }
  .spread__zone-pre { font-size: 13px; }
  .spread__zone-inf-sub, .spread__zone-pre-sub, .spread__spike { font-size: 10px; }
}

.spread__over { font-size: 11px; font-weight: 600; }
.spread__over.is-pre { fill: var(--ink-3); }
.spread__over.is-inf { fill: var(--c-real); }

.spread__med-label {
  font-size: 11px; font-weight: 600;
  paint-order: stroke fill; stroke: var(--card); stroke-width: 3.5px; stroke-linejoin: round;
}
.spread__med-label.spread__med--pre { fill: var(--ink-3); }
.spread__med-label.spread__med--inf { fill: var(--c-real); }

.spread__catchall { stroke: var(--c-grid); stroke-width: 1; stroke-dasharray: 1 3; opacity: .9; }
.spread__med-caption { fill: var(--ink-3); font-size: 11px; }
.spread__over.is-ghost { fill: var(--c-nominal); }
.spread__spike-lead { stroke: var(--ink-3); stroke-width: 1; opacity: .5; }