/* ==========================================================================
   fig-deciles — two linked panels of Figure 16.
   All colour from tokens: --c-muted for the pre-period reference, --c-real for
   the inflation period, --c-loss / --c-gain for worse / better than before.
   ========================================================================== */

.fdec__controls { margin-bottom: var(--sp-4); }

.fdec__readout {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.fdec__readout .readout__value { font-weight: 400; }
.fdec__legend { margin-bottom: var(--sp-3); }

/* ---- Panel grid ---------------------------------------------------------- */

/* Container-driven, not viewport-driven: a media query cannot see that this
   figure has been dropped into a 334px column on a 1440px screen. auto-fit
   collapses the second track when it will not fit. */
.fdec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: var(--sp-6) var(--sp-4);
}

.fdec__panel { min-width: 0; }

.fdec__title {
  font-family: var(--font-ui);
  font-size: .98rem;
  font-weight: 640;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 .3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.fdec__n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 700;
}
.band--dark .fdec__n { background: var(--dark-3); border-color: var(--dark-rule); }

.fdec__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 .5rem;
  min-height: 2.9em;
}

/* ---- Marks --------------------------------------------------------------- */

.fdec__band { stroke: none; }
.fdec__band.is-worse  { fill: var(--c-loss); opacity: .17; }
.fdec__band.is-better { fill: var(--c-gain); opacity: .22; }
/* the dark band swallows a 17% wash; the shortfall has to stay readable */
.band--dark .fdec__band.is-worse  { opacity: .34; }
.band--dark .fdec__band.is-better { opacity: .40; }

.fdec__line--pre { stroke: var(--c-muted); stroke-width: 1.8px; }
.fdec__line--inf { stroke: var(--c-real);  stroke-width: 2.4px; }

.fdec__dot--pre { fill: var(--card); stroke: var(--c-muted); stroke-width: 1.8; }
.fdec__dot--inf { fill: var(--c-real); stroke: var(--card); stroke-width: 1.4; }
.band--dark .fdec__dot--pre { fill: var(--dark-2); }
.band--dark .fdec__dot--inf { stroke: var(--dark-2); }

.fdec__gapbar.is-worse  { fill: var(--c-loss); opacity: .82; }
.fdec__gapbar.is-better { fill: var(--c-gain); opacity: .85; }

/* the 2021 mobility spotlight, deciles 1–2 of panel (a) */
.fdec__spotband { fill: var(--c-accent); opacity: .11; }
.band--dark .fdec__spotband { opacity: .17; }

.fdec__spotnote {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-2);
  margin: .55rem 0 0;
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.fdec__spotkey {
  flex: none;
  width: .8rem;
  height: .8rem;
  margin-top: .28rem;
  border-radius: 2px;
  background: var(--c-accent);
  opacity: .28;
  border: 1px solid var(--c-accent);
}

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

.fdec__cursor {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .8;
}
.fdec__ring {
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}
.fdec__ring.is-inf { stroke: var(--c-real); }
.fdec__ring.is-pre { stroke: var(--c-muted); }

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

.fdec__t thead th[colspan] {
  text-align: center;
  border-bottom-color: var(--rule-soft);
}
.fdec__before { color: var(--ink-3); }
.fdec__change { font-weight: 640; color: var(--ink-2); }
.fdec__change.is-loss { color: var(--c-loss); }
.fdec__change.is-gain { color: var(--c-gain); }

.fdec__caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-3);
  padding: 0 0 .5rem;
}