/* ==========================================================================
   fig-belgium — the country comparison.
   Two panels sharing one time axis, a comparability strip and a plain-language
   account of the Belgian mechanism. Every colour comes from a token so the
   dark act-break band remaps the whole figure for free.
   ========================================================================== */

/* ---- country identity ---------------------------------------------------- */

.bel .is-belgium     { --c-country: var(--c-belgium); }
.bel .is-germany     { --c-country: var(--c-germany); }
.bel .is-netherlands { --c-country: var(--c-netherlands); }
.bel .is-denmark     { --c-country: var(--c-denmark); }
.bel .is-eurozone    { --c-country: var(--c-eurozone); }

/* Several of the country tokens are pale by design (they are meant to read as
   a cluster). Mixing each one toward the current foreground lifts it to a
   legible contrast in the light paper and in the dark band alike. */
.bel .bel__series,
.bel .bel__cdot { --c-strong: color-mix(in srgb, var(--c-country) 76%, var(--ink)); }
.bel .bel__series.is-belgium,
.bel .bel__cdot.is-belgium { --c-strong: var(--c-belgium); }

/* ---- chrome -------------------------------------------------------------- */

.bel__controls { margin-bottom: var(--sp-3); }
.bel__legend { margin-bottom: var(--sp-3); }
.bel__legend .sw-legend { margin-bottom: 0; }
.bel__readout { margin-bottom: var(--sp-2); }
/* Cells carry a different number of lines; keep every value on one baseline. */
.bel .readout__cell { align-content: start; }

.bel__phead { margin: var(--sp-5) 0 var(--sp-2); }
.bel__stack > .bel__phead:first-child { margin-top: var(--sp-3); }
.bel__ptitle {
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 640;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 .25rem;
}
.bel__psub {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 44rem;
}
.bel__live {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-num;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 .4rem;
  min-height: 2.1em;
  border-left: 2px solid var(--c-belgium);
  padding-left: .55rem;
}

/* ---- wage panel ---------------------------------------------------------- */

.bel .sw-grid--zero { stroke: var(--ink-3); opacity: .85; stroke-width: 1.25; }

.bel__span-fall { fill: var(--c-loss-soft); opacity: .38; }
.bel__span-lbl { fill: var(--ink-3); font-weight: 500; }
.bel__band { fill: var(--c-gain); opacity: .18; }

.bel__series { transition: opacity var(--dur) var(--ease); }
.bel__line--be { stroke: var(--c-belgium); stroke-width: 2.9px; }
.bel__line--peer {
  stroke: var(--c-strong);
  stroke-width: 1.7px;
  stroke-dasharray: 5 4;
  opacity: .62;
  transition: opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.bel__peer.is-lead .bel__line--peer { stroke-width: 2.4px; opacity: 1; stroke-dasharray: 6 4; }
.bel__dots { opacity: 0; transition: opacity var(--dur) var(--ease); }
.bel__peer.is-lead .bel__dots { opacity: 1; }
.bel__dot { fill: var(--c-strong); }

.bel__baseline-lbl { fill: var(--ink-3); font-size: 11px; }
.bel__trough-rule { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; }
.bel__trough-lbl { fill: var(--ink-3); font-weight: 500; }
.bel__back-dot { fill: var(--c-belgium); stroke: var(--card); stroke-width: 2; }
.bel__back-lbl { fill: var(--c-belgium); }
.bel__back-lbl2 { fill: var(--ink-3); }

.bel__end { fill: var(--c-strong); transition: opacity var(--dur) var(--ease); }
.bel__end--be { fill: var(--c-belgium); }
.bel__end--all { fill: var(--ink-2); }

.bel__bracket line { stroke: var(--ink-2); stroke-width: 1.25; }
.bel__bracket-lbl { fill: var(--ink); }

.bel__cursor {
  stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.bel__cursor-dot {
  opacity: 0; stroke: var(--card); stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.bel__cursor-dot.is-be { fill: var(--c-belgium); }
.bel__cursor-dot.is-peer { fill: color-mix(in srgb, var(--c-country, var(--ink-2)) 76%, var(--ink)); }
.sw-layer--cursor.is-on .bel__cursor,
.sw-layer--cursor.is-on .bel__cursor-dot,
.sw-layer--conf-cursor.is-on .bel__cursor,
.sw-layer--conf-cursor.is-on .bel__cursor-dot { opacity: 1; }

/* ---- confidence panel ---------------------------------------------------- */

.bel__conf-seg { stroke: var(--c-strong); stroke-width: 3.2px; stroke-linecap: butt; }
.bel__conf-step { stroke: var(--c-strong); stroke-width: 1.2px; stroke-dasharray: 2 3; opacity: .8; }
.bel__conf-lbl {
  fill: var(--c-strong);
  font-size: 11px;
  font-weight: 620;
  transition: opacity var(--dur) var(--ease);
}
.bel__conf.is-be .bel__conf-seg { stroke-width: 4.2px; }
.bel__conf:not(.is-lead) .bel__conf-seg { opacity: .55; }
.bel__conf:not(.is-lead) .bel__conf-step { opacity: .4; }
.bel__nodata { fill: var(--ink-3); font-style: italic; }

/* ---- comparability strip ------------------------------------------------- */

.bel__ctx, .bel__how {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
}
.bel__ctitle {
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 640;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.bel__csub, .bel__cnote {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 var(--sp-4);
  max-width: 46rem;
}
.bel__cnote { margin: var(--sp-3) 0 0; }
.bel__cnote em { color: var(--ink-2); font-style: italic; }

.bel__crow {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(9rem, 1fr) minmax(8.5rem, 10.5rem);
  align-items: center;
  gap: .3rem 1rem;
  padding: .45rem 0;
  border-top: 1px solid var(--rule-soft);
}
.bel__crow:first-of-type { border-top: none; }
.bel__clabel {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--ink-2);
}
.bel__scale {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.bel__cend {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-variant-numeric: tabular-num;
  color: var(--ink-3);
  white-space: nowrap;
  flex: none;
}
.bel__track {
  position: relative;
  height: 20px;
  margin: 0 8px;
  flex: 1 1 auto;
  min-width: 4rem;
}
.bel__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--rule);
}
.bel__cdot {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--c-strong);
  opacity: .55;
  transition: opacity var(--dur) var(--ease), width var(--dur) var(--ease),
              height var(--dur) var(--ease), margin var(--dur) var(--ease);
}
.bel__cdot.is-lead { opacity: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; z-index: 1; }
.bel__cdot.is-belgium {
  opacity: 1;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--card);
}
.bel__cvals {
  display: grid;
  gap: .1rem;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-num;
  line-height: 1.35;
}
.bel__cval.is-belgium { color: var(--c-belgium); font-weight: 640; }
.bel .bel__peer-val { color: color-mix(in srgb, var(--c-country) 76%, var(--ink)); }
.bel__cval.is-peer { color: var(--ink-3); }

/* ---- how indexation works ------------------------------------------------ */

.bel__how-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin: var(--sp-3) 0 0;
}
.bel__how-item { min-width: 0; }
.bel__how-item dt {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-belgium);
  margin-bottom: .2rem;
}
.bel__how-item dd {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* ---- tables -------------------------------------------------------------- */

.bel .sw-details .sw-table-wrap + .sw-table-wrap { margin-top: var(--sp-5); }
.bel__caption {
  caption-side: top;
  text-align: left;
  font-weight: 640;
  color: var(--ink-2);
  padding-bottom: .4rem;
  white-space: normal;
}

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 640px) {
  .bel__crow {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .6rem 0;
  }
  .bel__clabel { font-weight: 600; color: var(--ink); }
  .bel__cvals {
    grid-auto-flow: column;
    justify-content: start;
    gap: .9rem;
    order: 2;
  }
  .bel__scale { order: 3; margin-top: .1rem; }
  .bel__how-list { gap: var(--sp-4); }
  .bel__live { min-height: 3.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .bel__series,
  .bel__line--peer,
  .bel__dots,
  .bel__conf-lbl,
  .bel__end,
  .bel__cdot { transition: none; }
}