/* fee-race: two funds race over the years; the shaded gap is what the higher fee costs. */
.fee-race-root.fee-race-root > * + * { margin-top: var(--s4); }
.fee-race-root .fee-race-facts { margin: 0; font: 400 var(--fs-ui)/1.5 var(--font-ui); color: var(--ink); }
.fee-race-root .fee-race-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.fee-race-root .fee-race-top .w-btn { min-width: 8rem; }
.fee-race-root .fee-race-clock { font-variant-numeric: tabular-nums; min-height: 32px; padding-inline: 12px; font-size: var(--fs-small); }
.fee-race-root .fee-race-chart { width: 100%; min-height: 200px; }
.fee-race-root .fee-race-grid { stroke: var(--line); stroke-width: 1; }
.fee-race-root .fee-race-base { stroke: var(--ink); stroke-width: 1.5; }
.fee-race-root .fee-race-finish { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }
.fee-race-root .fee-race-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.fee-race-root .fee-race-gap { fill: var(--down-wash); }
.fee-race-root .fee-race-gaplabel { font: 700 var(--fs-chart) var(--font-ui); fill: var(--down); paint-order: stroke; stroke: var(--down-wash); stroke-width: 4px; stroke-linejoin: round; }
.fee-race-root .fee-race-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fee-race-root .fee-race-line--a { stroke: var(--ink); }
.fee-race-root .fee-race-line--b { stroke: var(--ink-2); stroke-dasharray: 8 5; }
.fee-race-root .fee-race-runner circle { stroke: var(--ink); stroke-width: 1.5; }
.fee-race-root .fee-race-runner--a circle { fill: var(--ink); }
.fee-race-root .fee-race-runner--b circle { fill: var(--paper); }
.fee-race-root .fee-race-runner text { fill: var(--on-ink); font: 700 var(--fs-chart) var(--font-ui); }
.fee-race-root .fee-race-runner--b text { fill: var(--ink); }
.fee-race-root .fee-race-badge { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--on-ink); font: 700 var(--fs-eyebrow)/1 var(--font-ui); vertical-align: -5px; }
.fee-race-root .fee-race-badge--a { background: var(--ink); }
.fee-race-root .fee-race-badge--b { background: var(--paper); color: var(--ink); }
.fee-race-root .fee-race-readouts { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fee-race-root .fee-race-readouts .w-readout { align-content: start; }
.fee-race-root .fee-race-readouts .fee-race-gapout { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .fee-race-root .fee-race-readouts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .fee-race-root .fee-race-readouts .fee-race-gapout { grid-column: auto; }
}
.fee-race-root .fee-race-controls { display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
/* keep shared notes small even inside page rules like ".prose p" */
.fee-race-root.fee-race-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }