/* ==========================================================================
   fig-indexation — the switch that redraws the shortfall.
   ========================================================================== */

.ix__controls {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
}
.ix__seg-rule, .ix__seg-bench { align-items: flex-start; flex-direction: column; gap: .4rem; }

/* ---- headline numbers ----------------------------------------------------- */

.ix__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
}
.ix__stat { display: grid; gap: .2rem; min-width: 0; }
.ix__stat-key {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  line-height: 1.3;
}
.ix__stat-line { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.ix__stat-value {
  font-size: clamp(2.1rem, 6.4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-variant-numeric: tabular-num lining-nums;
  color: var(--c-loss);
}
.ix__stat + .ix__stat .ix__stat-value { color: var(--c-gain); }
.ix__stat-unit {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  line-height: 1.2;
}
.ix__stat-sub {
  font-size: var(--fs-micro);
  color: var(--ink-2);
  line-height: 1.45;
  max-width: 24rem;
}

/* ---- lines ---------------------------------------------------------------- */

.ix__obs   { stroke: var(--c-real); stroke-width: 2px; opacity: .9; }
.ix__cf    { stroke: var(--c-gain); }
.ix__track { stroke: var(--c-trend); stroke-width: 2px; }
.ix__track-end { fill: var(--c-trend); font-size: 12px; }

.ix__band-loss { fill: var(--c-loss); opacity: .16; }
.ix__band-gain { fill: var(--c-gain); opacity: .22; }
.ix__band-over { fill: var(--c-gain); opacity: .3; }

.ix__start line { stroke: var(--ink-3); opacity: .6; }
.ix__start text { fill: var(--ink-3); }

.ix__bracket { fill: none; stroke: var(--c-loss); stroke-width: 1.5; }
.ix__bracket.is-over { stroke: var(--c-gain); }
.ix__bracket-label {
  fill: var(--c-loss);
  font-size: 14px;
  font-weight: 660;
  font-variant-numeric: tabular-num;
}
.ix__bracket-label.is-over { fill: var(--c-gain); }

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

.ix__cursor {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.ix__cursor-dot {
  opacity: 0;
  stroke: var(--card);
  stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.ix__cursor-dot.is-obs   { fill: var(--c-real); }
.ix__cursor-dot.is-cf    { fill: var(--c-gain); }
.ix__cursor-dot.is-track { fill: var(--c-trend); }
.sw-layer--cursor.is-on .ix__cursor,
.sw-layer--cursor.is-on .ix__cursor-dot { opacity: 1; }

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

@media (max-width: 640px) {
  .ix__controls { gap: var(--sp-4); }
  .ix__stats { gap: var(--sp-3); padding-bottom: var(--sp-3); }
  .ix__stat-value { font-size: clamp(1.9rem, 11vw, 2.6rem); }
}

/* On a phone the three rules stack into full-width rows: still one radio
   group, still 44px targets, but no ragged wrap. */
@media (max-width: 560px) {
  .ix__seg-rule { width: 100%; }
  .ix__seg-rule .sw-seg__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-radius: var(--r-md);
  }
  .ix__seg-rule .sw-seg__btn { width: 100%; border-radius: var(--r-sm); }
}

/* The dark band swallows low-opacity fills; give them more body there. */
.band--dark .ix__band-loss { opacity: .28; }
.band--dark .ix__band-gain { opacity: .3; }
.band--dark .ix__band-over { opacity: .38; }