/* ==========================================================================
   Figures — the shared chart chrome every module inherits
   ========================================================================== */

/* ---- Figure shell -------------------------------------------------------- */

.figure {
  margin: var(--sp-7) auto;
  width: var(--measure-wide);
  position: relative;
}
.figure--wide { width: var(--measure-full); }
.figure--full { width: min(100% - 1.5rem, 92rem); }
.figure--inline { margin: var(--sp-6) auto; width: var(--measure); }

.figure__head {
  margin-bottom: var(--sp-4);
  max-width: 46rem;
}

.figure__kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-nominal);
  margin: 0 0 .45rem;
  display: block;
}

.figure__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 .4rem;
  letter-spacing: -0.012em;
}

.figure__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 44rem;
}

.figure__body {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.band--dark .figure__body {
  background: var(--dark-2);
  border-color: var(--dark-rule);
}
.figure__body--plain {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.figure__plot { position: relative; }

.figure__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
}

.figure__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--ink-3);
  display: grid;
  gap: .35rem;
}
.figure__foot strong { color: var(--ink-2); font-weight: 600; }

.figure__note {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: var(--sp-4);
}

.figure__hint {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.figure__hint::before {
  content: "";
  width: 1.15em; height: 1.15em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--hint-icon) center / contain no-repeat;
  mask: var(--hint-icon) center / contain no-repeat;
  --hint-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .figure__body { padding: var(--sp-4) var(--sp-3) var(--sp-3); border-radius: var(--r-md); }
  .figure { margin: var(--sp-6) auto; }
}

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

.sw-svg { display: block; overflow: visible; max-width: 100%; }

.sw-t {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-num;
  fill: var(--ink-2);
  font-size: 12px;
}
.sw-t--axis { fill: var(--ink-3); font-size: 11.5px; }
.sw-t--axislabel { fill: var(--ink-3); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.sw-t--marker { fill: var(--ink-2); font-size: 11.5px; font-weight: 560; }
.sw-t--value { fill: var(--ink); font-size: 13px; font-weight: 620; }
.sw-t--big { font-size: 15px; font-weight: 640; fill: var(--ink); }
.sw-t--strong { font-weight: 640; }

@media (max-width: 480px) {
  .sw-t { font-size: 11.5px; }
  .sw-t--axis { font-size: 11px; }
  .sw-t--axislabel { font-size: 10px; }
}

.sw-grid {
  stroke: var(--c-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
  opacity: .75;
}
.sw-grid--zero { stroke: var(--ink-3); opacity: .55; }
.sw-tick { stroke: var(--c-grid); stroke-width: 1; shape-rendering: crispEdges; }

.sw-marker line {
  stroke: var(--ink-3);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}
.sw-marker--solid line { stroke-dasharray: none; }

.sw-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.sw-line--thin { stroke-width: 1.6; }
.sw-line--thick { stroke-width: 3; }
.sw-line--dash { stroke-dasharray: 6 5; }
.sw-line--dot { stroke-dasharray: 1.5 4; }
.sw-line--dashdot { stroke-dasharray: 8 4 2 4; }

.sw-dot { stroke: var(--card); stroke-width: 2; }

.sw-bar { transition: opacity var(--dur-fast) var(--ease); }

.sw-scrub {
  cursor: ew-resize;
  touch-action: pan-y;
  outline: none;
}
.sw-scrub:focus-visible {
  stroke: var(--c-nominal);
  stroke-width: 2;
  stroke-dasharray: 4 3;
  fill: color-mix(in srgb, var(--c-nominal) 5%, transparent);
}

/* ---- Legend -------------------------------------------------------------- */

.sw-legend {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.15rem;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}
.sw-legend--below { margin: var(--sp-3) 0 0; }
.sw-legend__item { display: inline-flex; align-items: center; gap: .45rem; }
.sw-legend__line {
  width: 1.3rem; height: 0;
  border-top: 2.5px solid var(--c);
  flex: none;
}
.sw-legend__line--dash { border-top-style: dashed; }
.sw-legend__line--dot { border-top-style: dotted; border-top-width: 3px; }
.sw-legend__line--dashdot { border-top-style: dashed; }
.sw-legend__swatch {
  width: .8rem; height: .8rem;
  border-radius: 2px;
  background: var(--c);
  flex: none;
}
.sw-legend__label { white-space: nowrap; }
.sw-legend__note { color: var(--ink-3); }

/* ---- Tooltip -------------------------------------------------------------- */

.sw-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.45;
  padding: .5rem .65rem;
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(18, 33, 46, .22);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  max-width: 15rem;
  white-space: nowrap;
}
.band--dark .sw-tip { background: var(--dark-ink); color: var(--dark); }
.sw-tip.is-on { opacity: 1; transform: none; }
.sw-tip b { font-weight: 640; }
.sw-tip__row { display: flex; justify-content: space-between; gap: .9rem; }
.sw-tip__key { color: color-mix(in srgb, currentColor 68%, transparent); }
.sw-tip__val { font-variant-numeric: tabular-num; font-weight: 620; }
.sw-tip__head {
  font-weight: 640;
  margin-bottom: .28rem;
  padding-bottom: .28rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* ---- Segmented control ---------------------------------------------------- */

.sw-seg { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.sw-seg__label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sw-seg__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-pill);
  padding: 3px;
}
.sw-seg__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.sw-seg__btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: .3rem .95rem;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 560;
  line-height: 1.15;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  text-align: center;
}
.sw-seg__btn-hint {
  font-size: .68rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: .1rem;
}
.sw-seg__btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sw-seg__input:checked + .sw-seg__btn {
  background: var(--ink);
  color: var(--paper);
}
.sw-seg__input:checked + .sw-seg__btn .sw-seg__btn-hint { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.sw-seg__input:focus-visible + .sw-seg__btn { box-shadow: var(--focus); }

@media (pointer: coarse) {
  .sw-seg__btn { min-height: 44px; padding-inline: 1.05rem; }
}

/* ---- Toggle --------------------------------------------------------------- */

.sw-toggle { display: inline-flex; }
.sw-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--tap);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 560;
  color: var(--ink);
  user-select: none;
}
.sw-toggle__track {
  position: relative;
  width: 46px; height: 27px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  flex: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sw-toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(18, 33, 46, .28);
  transition: transform var(--dur) var(--ease-out);
}
.sw-toggle__input:checked + .sw-toggle__label .sw-toggle__track {
  background: var(--c-gain);
  border-color: var(--c-gain);
}
.sw-toggle__input:checked + .sw-toggle__label .sw-toggle__thumb { transform: translateX(19px); }
.sw-toggle__input:focus-visible + .sw-toggle__label .sw-toggle__track { box-shadow: var(--focus); }

/* ---- Buttons -------------------------------------------------------------- */

.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--tap);
  padding: .55rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 580;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sw-btn:hover { background: var(--paper-2); border-color: var(--ink-3); }
.sw-btn:active { transform: translateY(1px); }
.sw-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sw-btn--primary:hover { background: var(--dark-3); border-color: var(--dark-3); }

/* ---- Range slider --------------------------------------------------------- */

.sw-range { display: grid; gap: .35rem; min-width: 12rem; flex: 1 1 14rem; }
.sw-range__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.sw-range__val { font-weight: 640; color: var(--ink); font-variant-numeric: tabular-num; }
.sw-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap);
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.sw-range input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
}
.sw-range input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
}
.sw-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--card);
  box-shadow: 0 1px 4px rgba(18, 33, 46, .3);
}
.sw-range input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--card);
  box-shadow: 0 1px 4px rgba(18, 33, 46, .3);
}
.sw-range input[type="range"]:focus-visible { box-shadow: none; }
.sw-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.sw-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }

/* ---- Data table fallback --------------------------------------------------- */

.sw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sw-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-num;
}
.sw-table th, .sw-table td {
  text-align: right;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.sw-table th:first-child, .sw-table td:first-child { text-align: left; }
.sw-table thead th {
  font-weight: 620;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom-color: var(--rule);
}
.sw-table tbody tr:last-child td { border-bottom: none; }

.sw-details {
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
}
.sw-details > summary {
  cursor: pointer;
  color: var(--ink-2);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .1rem;
  list-style: none;
  font-weight: 560;
}
.sw-details > summary::-webkit-details-marker { display: none; }
.sw-details > summary::before {
  content: "";
  width: .62em; height: .62em;
  flex: none;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-fast) var(--ease);
}
.sw-details[open] > summary::before { transform: rotate(-135deg) translate(-1px, -1px); }
.sw-details > summary:hover { color: var(--ink); }
.sw-details[open] > summary { margin-bottom: .5rem; }

/* ---- Readout strip (shared by scrubbable figures) --------------------------- */

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
}
.readout__cell { display: grid; gap: .15rem; min-width: 0; }
.readout__key {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  line-height: 1.3;
}
.readout__value {
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-num lining-nums;
  line-height: 1.1;
  color: var(--ink);
}
.readout__sub {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  line-height: 1.3;
}
.readout--4 { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.readout__value.is-inflation { color: var(--c-inflation); }
.readout__value.is-nominal   { color: var(--c-nominal); }
.readout__value.is-loss      { color: var(--c-loss); }
.readout__value.is-gain      { color: var(--c-gain); }

@media (max-width: 520px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
}

/* ---- fig-collision ---------------------------------------------------------- */

.collision__infl { stroke: var(--c-inflation); stroke-width: 2.6px; }
.collision__norm { stroke: var(--c-nominal); stroke-width: 2.8px; stroke-linejoin: miter; }
.collision__wedge {
  fill: var(--c-inflation);
  opacity: .15;
}
.collision__cushion {
  fill: var(--c-gain);
  opacity: .16;
}
.collision__peak-dot { fill: var(--c-inflation); stroke: var(--card); stroke-width: 2; }
.collision__peak-label { fill: var(--c-inflation); }
.collision__norm-label { fill: var(--c-nominal); }
.collision__end--infl { fill: var(--c-inflation); }
.collision__end--norm { fill: var(--c-nominal); }

.collision__cursor {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.collision__cursor-dot {
  opacity: 0;
  stroke: var(--card);
  stroke-width: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.collision__cursor-dot.is-infl { fill: var(--c-inflation); }
.collision__cursor-dot.is-norm { fill: var(--c-nominal); }
.sw-layer--cursor.is-on .collision__cursor,
.sw-layer--cursor.is-on .collision__cursor-dot { opacity: 1; }

/* Hero variant sits on the dark band and needs no card chrome. */
.hero .collision__wedge { opacity: .22; }

/* Chip label: an opaque plate behind an annotation so it stays readable
   wherever a line happens to run. */
.sw-chip__plate {
  fill: var(--card);
  opacity: .88;
}
.band--dark .sw-chip__plate { fill: var(--dark-2); opacity: .9; }
.hero .sw-chip__plate { fill: var(--dark); opacity: .85; }

.collision__legend { margin-bottom: var(--sp-3); }
.hero .collision__legend { color: var(--dark-ink-2); }

.collision__foot { border-top-color: color-mix(in srgb, currentColor 18%, transparent); }