/* fig-two-costs ------------------------------------------------------------ */

.twocosts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--sp-5);
}

.twocosts__panel {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.band--dark .twocosts__panel { background: var(--dark-2); border-color: var(--dark-rule); }
.twocosts__panel--burn { border-top: 3px solid var(--c-accent); }
.twocosts__panel--transfer { border-top: 3px solid var(--c-loss); }

.twocosts__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .5rem;
}
.twocosts__panel--burn .twocosts__eyebrow { color: var(--c-accent); }
.twocosts__panel--transfer .twocosts__eyebrow { color: var(--c-loss); }

.twocosts__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
}

.twocosts__art { margin-bottom: var(--sp-4); }
.twocosts__svg { width: 100%; height: auto; display: block; overflow: visible; }

.twocosts__bar { fill: var(--c-nominal); }
.twocosts__bar--kept { fill: var(--c-nominal); }
.twocosts__ghost {
  fill: none;
  stroke: var(--c-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.twocosts__slice { fill: var(--c-loss); }

.twocosts__void { opacity: .9; }
.twocosts__hatch-line { stroke: var(--c-muted); stroke-width: 1.4; opacity: .55; }
.twocosts__void-ring {
  fill: none;
  stroke: var(--c-muted);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

.twocosts__box {
  fill: color-mix(in srgb, var(--c-gain) 14%, transparent);
  stroke: var(--c-gain);
  stroke-width: 1.4;
}

.twocosts__track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.4;
  stroke-dasharray: 2 4;
}
.twocosts__token { fill: var(--c-accent); }
.twocosts__token-label {
  font-family: var(--font-ui);
  font-size: 10px;
  fill: var(--ink-3);
}
.twocosts__cap {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink-2);
}
.twocosts__cap--good { fill: var(--c-gain); }
.twocosts__cap--bad { fill: var(--c-loss); }
.twocosts__panel--burn .twocosts__cap--bad { fill: var(--ink-3); }

.twocosts__body {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
  flex: 1;
}

.twocosts__verdict {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.twocosts__verdict b { color: var(--ink); font-weight: 660; }
.twocosts__panel--burn .twocosts__verdict b { color: var(--c-accent); }
.twocosts__panel--transfer .twocosts__verdict b { color: var(--c-loss); }

.twocosts__ledger {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-2);
  border-radius: var(--r-md);
  border: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
  display: grid;
  gap: .5rem;
}
.band--dark .twocosts__ledger { background: var(--dark-2); border-color: var(--dark-rule); }
.twocosts__ledger-label {
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.twocosts__ledger-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: -0.02em;
}
.twocosts__ledger-sum b { font-weight: 620; }
.twocosts__ledger-sum b.is-burn { color: var(--c-accent); }
.twocosts__ledger-sum b.is-transfer { color: var(--c-loss); }
.twocosts__ledger-sum i { font-style: normal; color: var(--ink-3); }
.twocosts__ledger-note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46rem;
}