.astra-article .policy-tradeoffs {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}
.astra-article .content .takeaways .policy-tradeoffs { margin: 12px 0 0; }
.astra-article .tradeoff-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  justify-content: space-between;
  padding: 8px 12px 5px;
  font: 500 12px/1.4 var(--font);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.astra-article .tradeoff-heading > span { color: var(--muted); font: 10px/1.6 var(--font); letter-spacing: 0; text-transform: none; }
.astra-article .tradeoff-scroll { overflow-x: auto; }
.astra-article .tradeoff-scroll:focus-visible { outline-offset: -2px; }
.astra-article .tradeoff-grid { display: grid; grid-template-columns: 155px repeat(3, minmax(0, 1fr)); grid-template-rows: 20px repeat(5, minmax(24px, auto)) auto; column-gap: 24px; min-width: 750px; padding: 4px 12px 6px; }
.astra-article .tradeoff-roster,
.astra-article .tradeoff-panel { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
.astra-article .tradeoff-panel { --value-width: 58px; min-width: 0; margin: 0; padding: 0; border: 0; }
.astra-article .tradeoff-performance { --value-width: 94px; }
.astra-article .tradeoff-latency { --value-width: 94px; }
.astra-article .tradeoff-cost { --value-width: 100px; }
.astra-article .tradeoff-panel-heading { height: 20px; }
.astra-article .tradeoff-panel-heading h3 { margin: 0; padding: 0; border: 0; font: 500 11px/1.4 var(--font); letter-spacing: .03em; text-transform: uppercase; }
.astra-article .tradeoff-roster .tradeoff-panel-heading { font: 500 10px/1.4 var(--font); text-transform: uppercase; color: var(--muted); }
.astra-article .tradeoff-policy { min-height: 24px; display: flex; align-items: center; font: 400 11px/1.4 var(--font); color: var(--muted); }
.astra-article .tradeoff-row { min-height: 24px; display: grid; grid-template-columns: minmax(0, 1fr) var(--value-width); gap: 6px; align-items: center; }
.astra-article .tradeoff-policy:nth-last-child(2),
.astra-article .tradeoff-row[data-policy="cosmos3"] { border-top: 1px solid var(--line); }
.astra-article .tradeoff-value { grid-row: 1; grid-column: 2; text-align: right; white-space: nowrap; font: 10px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.astra-article .tradeoff-track { display: block; grid-row: 1; grid-column: 1; position: relative; height: 8px; background: var(--paper); box-shadow: inset 1px 0 var(--line); }
.astra-article .tradeoff-bar, .astra-article .tradeoff-score { position: absolute; top: 0; height: 8px; background: var(--green); }
.astra-article .tradeoff-delegated { position: absolute; top: 0; height: 8px; background: var(--green); }
.astra-article .tradeoff-score, .astra-article .is-reference .tradeoff-bar { background: var(--bar-secondary); }
.astra-article .is-reference .tradeoff-score { background: color-mix(in srgb, var(--bar-secondary) 40%, var(--white)); }
.astra-article .tradeoff-policy.is-reference { color: var(--muted); }
.astra-article .tradeoff-cost .is-missing .tradeoff-track { visibility: hidden; }
.astra-article .tradeoff-axis { margin-right: calc(var(--value-width) + 6px); padding-top: 2px; color: var(--muted); font: var(--chart-axis-font); }
.astra-article .policy-tradeoffs figcaption { margin: 0; padding: 6px 12px; background: #fafbf8; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.5; }
.astra-article .tradeoff-methods { margin-top: 2px; }
.astra-article .tradeoff-methods summary { width: fit-content; color: var(--green-ink); cursor: pointer; font: 10px/1.5 var(--font); }
.astra-article .tradeoff-methods p { margin: 4px 0 0; font: 10px/1.5 var(--font); }
@media (max-width: 700px) {
  .astra-article .tradeoff-roster { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 6px 0 6px -6px var(--line); }
}


.astra-article .policy-tradeoffs .tradeoff-axis > .result-axis-label { left: calc(100% + 6px); width: var(--value-width); text-align: right; }

.astra-article .policy-tradeoffs .tradeoff-latency [data-policy="cosmos3"] .tradeoff-bar { background: var(--green); }