/* Versioned separately because editorial assets are cached as immutable. */
@media screen {
  #runtime-api .runtime-tradeoffs {
    --tradeoff-ink: #70430d;
    --tradeoff-surface: #f7ead6;
    --tradeoff-line: #d4ad76;
    margin-block: 22px 24px;
    border: 0;
  }

  #runtime-api .runtime-tradeoffs > summary {
    background: var(--tradeoff-surface);
    color: var(--tradeoff-ink);
    border: 1px solid var(--tradeoff-line);
    border-radius: 6px;
    padding: 20px;
    gap: 20px;
    cursor: pointer;
  }

  #runtime-api .runtime-tradeoffs > summary:hover {
    border-color: var(--tradeoff-ink);
  }

  #runtime-api .runtime-tradeoffs > summary::after,
  #runtime-api .runtime-tradeoff-print,
  #runtime-api .runtime-tradeoff-hide,
  #runtime-api .runtime-tradeoffs[open] .runtime-tradeoff-show {
    display: none;
  }

  #runtime-api .runtime-tradeoff-copy {
    flex: 1;
    min-width: 0;
  }

  #runtime-api .runtime-tradeoff-title {
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  #runtime-api .runtime-tradeoff-support {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
  }

  #runtime-api .runtime-tradeoff-action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--tradeoff-line);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  #runtime-api .runtime-tradeoffs[open] .runtime-tradeoff-hide {
    display: inline;
  }

  #runtime-api .runtime-tradeoff-chevron {
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  #runtime-api .runtime-tradeoffs[open] .runtime-tradeoff-chevron {
    transform: rotate(225deg);
    margin-top: 4px;
  }

  #runtime-api .runtime-tradeoffs > .runtime-detail-body {
    padding-top: 22px;
  }
}

@media screen and (prefers-color-scheme: dark) {
  #runtime-api .runtime-tradeoffs {
    --tradeoff-ink: #edb978;
    --tradeoff-surface: #30291f;
    --tradeoff-line: #826341;
  }
}

@media screen and (max-width: 720px) {
  #runtime-api .runtime-tradeoffs > summary {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
  }

  #runtime-api .runtime-tradeoff-title {
    font-size: 20px;
  }
}

@media print {
  #runtime-api .runtime-tradeoff-screen,
  #runtime-api .runtime-tradeoff-support,
  #runtime-api .runtime-tradeoff-action {
    display: none;
  }
}