/* "The problem" section: the all-time bypass total, its split bar, and the chart caption. */

.bypass-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(var(--spacing) * 14);
  text-align: center;
}
.bypass-label { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.bypass-amount {
  margin-block: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bypass-label b, .bypass-scope b { color: var(--primary); font-weight: var(--font-weight-semibold, 600); }
.bypass-scope { color: var(--muted-foreground); font-size: var(--text-sm); }

/* One bar: a thin blue slice for the designed pools, grey for everything else. */
.bypass-split {
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: 40rem;
  height: 14px;
  margin-top: calc(var(--spacing) * 8);
}
.bypass-split span {
  width: 0;
  border-radius: 3px;
  background: var(--color-neutral-200);
  transition: width .9s cubic-bezier(.22, 1, .36, 1) .2s;
}
.bypass-split .is-designed { min-width: 0; background: #1f6fff; }
.bypass-total.is-in .bypass-split span { width: var(--share); }
.bypass-total.is-in .bypass-split .is-designed { min-width: 6px; }

.bypass-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 4);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  list-style: none;
}
.bypass-legend li { display: flex; align-items: center; gap: 8px; }
.bypass-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--color-neutral-200); }
.bypass-legend .is-designed::before { background: #1f6fff; }
.bypass-legend b { color: var(--primary); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }

.bench-caption { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.bench-note { margin-top: calc(var(--spacing) * -3); color: var(--muted-foreground); font-size: var(--text-xs); }
.bench-key { color: var(--brand-content); }

.bypass-fees { margin-top: calc(var(--spacing) * 6); color: var(--muted-foreground); font-size: var(--text-base); }
.bypass-fees b { color: var(--primary); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .bypass-split span { transition: none; } }
@media (min-width: 48rem) { .bench-caption { margin-bottom: calc(var(--spacing) * -6); } }
@media (min-width: 80rem) { .bypass-amount { font-size: 4.5rem; } }