/* fig-round-numbers ---------------------------------------------------------
   Bunching of annual wage changes at whole and half numbers.
   Colour carries the category: whole = the firm-norm blue, half = accent,
   everything else = muted context. All from the tokens.
   -------------------------------------------------------------------------- */

/* ---- headline stats ------------------------------------------------------ */

.rn__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
}
.rn__stat { display: grid; gap: .15rem; min-width: 0; }
.rn__statval {
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-variant-numeric: tabular-num lining-nums;
  color: var(--c-nominal);
}
.rn__statlbl {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 560;
}
.rn__statnote {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-3);
}

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

.rn__bar { shape-rendering: crispEdges; }
.rn__bar.is-other { fill: var(--c-muted); opacity: .48; }
.rn__bar.is-half  { fill: var(--c-accent); }
.rn__bar.is-whole { fill: var(--c-nominal); }
.rn__bar.is-detail { shape-rendering: auto; }
.rn__bar.is-detail.is-other { opacity: .48; }

.rn__leader {
  stroke: var(--c-nominal);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .55;
}
.rn__spikeval {
  fill: var(--c-nominal);
  font-size: 21px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.rn__spikecap { fill: var(--ink-3); font-size: 10.5px; }
.rn__minorval { fill: var(--c-nominal); font-size: 11px; font-weight: 620; }

.rn__detailval {
  fill: var(--c-nominal);
  font-size: 15px;
  font-weight: 640;
}
.rn__detailminor {
  fill: var(--ink-3);
  font-size: 10.5px;
  font-weight: 560;
}

.rn__coreband { fill: var(--c-nominal); opacity: .06; }
.rn__bracket { fill: none; stroke: var(--c-nominal); stroke-width: 1.1; opacity: .55; }
.rn__bracketlbl { fill: var(--c-nominal); font-size: 12px; font-weight: 620; }

.rn__cursor {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.rn__cursor2 {
  fill: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sw-layer--cursor.is-on .rn__cursor { opacity: .35; }
.sw-layer--cursor.is-on .rn__cursor2 { opacity: .08; }

.rn__legend { margin-top: var(--sp-3); }
.rn__legend .sw-legend__item:nth-child(1) .sw-legend__swatch { background: var(--c-nominal); }
.rn__legend .sw-legend__item:nth-child(2) .sw-legend__swatch { background: var(--c-accent); }
.rn__legend .sw-legend__item:nth-child(3) .sw-legend__swatch { background: var(--c-muted); opacity: .48; }

/* ---- composition strip ---------------------------------------------------- */

.rn__composition {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
}
.rn__complede {
  margin: 0 0 .7rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}
.rn__complede strong {
  color: var(--c-nominal);
  font-weight: 640;
  font-size: 1.25em;
  font-variant-numeric: tabular-num lining-nums;
}
.rn__comp {
  display: flex;
  width: 100%;
  height: 1.6rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper-2);
}
.rn__compseg { display: block; height: 100%; }
.rn__compseg.is-whole { background: var(--c-nominal); }
.rn__compseg.is-half  { background: var(--c-accent); }
.rn__compseg.is-other { background: color-mix(in srgb, var(--c-muted) 46%, var(--card)); }

.rn__complegend {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
}
.rn__complegend-item {
  display: grid;
  grid-template-columns: .7rem auto;
  grid-template-areas: "key val" "key lbl";
  column-gap: .45rem;
  align-items: baseline;
}
.rn__compkey {
  grid-area: key;
  width: .7rem; height: .7rem;
  border-radius: 2px;
  transform: translateY(.15rem);
}
.rn__compkey.is-whole { background: var(--c-nominal); }
.rn__compkey.is-half  { background: var(--c-accent); }
.rn__compkey.is-other { background: color-mix(in srgb, var(--c-muted) 46%, var(--card)); }
.rn__compval {
  grid-area: val;
  font-size: 1.05rem;
  font-weight: 560;
  font-variant-numeric: tabular-num lining-nums;
  color: var(--ink);
  line-height: 1.15;
}
.rn__complbl {
  grid-area: lbl;
  font-size: var(--fs-micro);
  color: var(--ink-2);
  line-height: 1.4;
}
.rn__comphint { color: var(--ink-3); }
.rn__comphint::before { content: " — "; }

/* ---- detail block --------------------------------------------------------- */

.rn__subhead {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 660;
  color: var(--ink);
  margin: var(--sp-6) 0 .3rem;
}
.rn__subnote {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
  max-width: 44rem;
}
.rn__plot--detail { margin-top: var(--sp-2); }

@media (max-width: 480px) {
  .rn__spikeval { font-size: 18px; }
  .rn__detailval { font-size: 13px; }
  .rn__comp { height: 1.35rem; }
}