.benchmark-hero {
  padding-block: var(--oracle-component-benchmark-hero-spacing-section-pad-top)
                 var(--oracle-component-benchmark-hero-spacing-section-pad-bottom);
  border-bottom: var(--oracle-border-width) solid var(--oracle-component-benchmark-hero-border-bottom-colour);
}

.benchmark-hero-inner {
  max-width: var(--oracle-component-benchmark-hero-spacing-max-width);
}

.benchmark-hero-eyebrow {
  font-family:    var(--oracle-component-benchmark-hero-type-eyebrow-family);
  font-size:      var(--oracle-component-benchmark-hero-type-eyebrow-size);
  font-weight:    var(--oracle-component-benchmark-hero-type-eyebrow-weight);
  letter-spacing: var(--oracle-component-benchmark-hero-type-eyebrow-tracking);
  text-transform: var(--oracle-component-benchmark-hero-type-eyebrow-transform);
  color:          var(--oracle-component-benchmark-hero-color-eyebrow);
  margin-bottom:  var(--oracle-space-s3);
}

.benchmark-hero-heading {
  font-family:    var(--oracle-component-benchmark-hero-type-heading-family);
  font-size:      var(--oracle-component-benchmark-hero-type-heading-size);
  font-weight:    var(--oracle-component-benchmark-hero-type-heading-weight);
  letter-spacing: var(--oracle-component-benchmark-hero-type-heading-tracking);
  line-height:    var(--oracle-component-benchmark-hero-type-heading-lh);
  color:          var(--oracle-component-benchmark-hero-color-heading);
  margin-bottom:  var(--oracle-component-benchmark-hero-spacing-heading-gap);
}

.benchmark-hero-body {
  font-family:   var(--oracle-component-benchmark-hero-type-body-family);
  font-size:     var(--oracle-component-benchmark-hero-type-body-size);
  font-weight:   var(--oracle-component-benchmark-hero-type-body-weight);
  line-height:   var(--oracle-component-benchmark-hero-type-body-lh);
  color:         var(--oracle-component-benchmark-hero-color-body);
  margin-bottom: var(--oracle-component-benchmark-hero-spacing-body-gap);
}

.benchmark-section {
  padding-block: var(--oracle-space-s7);
}

.leaderboard-wrap {
  overflow-x: auto;
  margin-top: var(--oracle-component-leaderboard-table-spacing-section-gap);
  -webkit-overflow-scrolling: touch;
}

.leaderboard-caption {
  font-family:    var(--oracle-component-leaderboard-table-type-caption-family);
  font-size:      var(--oracle-component-leaderboard-table-type-caption-size);
  font-weight:    var(--oracle-component-leaderboard-table-type-caption-weight);
  letter-spacing: var(--oracle-component-leaderboard-table-type-caption-tracking);
  text-transform: var(--oracle-component-leaderboard-table-type-caption-transform);
  color:          var(--oracle-component-leaderboard-table-color-caption);
  margin-bottom:  var(--oracle-space-s3);
}

.leaderboard-filters {
  display:     flex;
  flex-wrap:   wrap;
  align-items: flex-end;
  gap:         var(--oracle-space-s3);
  margin-bottom: var(--oracle-space-s4);
}

.leaderboard-filter-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--oracle-space-s1);
}

.leaderboard-filter-label {
  font-family:    var(--oracle-component-leaderboard-table-type-col-header-family);
  font-size:      var(--oracle-component-leaderboard-table-type-col-header-size);
  font-weight:    var(--oracle-component-leaderboard-table-type-col-header-weight);
  letter-spacing: var(--oracle-component-leaderboard-table-type-col-header-tracking);
  text-transform: var(--oracle-component-leaderboard-table-type-col-header-transform);
  color:          var(--oracle-component-leaderboard-table-color-caption);
}

.leaderboard-filter-select {
  font-family: var(--oracle-font-mono);
  font-size:   var(--oracle-size-data);
  color:       var(--oracle-color-ink);
  background:  var(--oracle-color-page);
  border:      var(--oracle-border-width) solid var(--oracle-component-leaderboard-table-color-row-border);
  padding:     var(--oracle-space-s2) var(--oracle-space-s3);
  min-width:   200px;
  cursor:      pointer;
}

.leaderboard-filter-select:focus-visible {
  outline:     var(--oracle-border-width) solid var(--oracle-component-leaderboard-table-color-sort-active);
  outline-offset: 1px;
}

.leaderboard-filter-reset {
  font-family:    var(--oracle-font-mono);
  font-size:      var(--oracle-size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--oracle-component-leaderboard-table-color-sort-active);
  background:     transparent;
  border:         none;
  padding:        var(--oracle-space-s2) 0;
  cursor:         pointer;
}

.leaderboard-filter-reset:hover { text-decoration: underline; }

.leaderboard-count {
  font-family:    var(--oracle-font-mono);
  font-size:      var(--oracle-size-label);
  letter-spacing: 0.08em;
  color:          var(--oracle-color-ink-muted);
  margin-left:    auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.leaderboard-table thead th {
  font-family:    var(--oracle-component-leaderboard-table-type-col-header-family);
  font-size:      var(--oracle-component-leaderboard-table-type-col-header-size);
  font-weight:    var(--oracle-component-leaderboard-table-type-col-header-weight);
  letter-spacing: var(--oracle-component-leaderboard-table-type-col-header-tracking);
  text-transform: var(--oracle-component-leaderboard-table-type-col-header-transform);
  color:          var(--oracle-component-leaderboard-table-color-header-text);
  background:     var(--oracle-component-leaderboard-table-color-header-bg);
  padding:        var(--oracle-component-leaderboard-table-spacing-cell-pad-block)
                  var(--oracle-component-leaderboard-table-spacing-cell-pad-inline);
  text-align: left;
  border-bottom: var(--oracle-border-width) solid var(--oracle-component-leaderboard-table-color-row-border);
  white-space: nowrap;
  cursor: default;
}

.leaderboard-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}

.leaderboard-table thead th.sort-active {
  color: var(--oracle-component-leaderboard-table-color-sort-active);
}

.leaderboard-table thead th.sort-active::after {
  content: ' ↓';
  font-size: 0.8em;
}

.leaderboard-table thead th.sort-active.sort-asc::after { content: ' ↑'; }

.leaderboard-table tbody tr {
  border-bottom: var(--oracle-border-width) solid var(--oracle-component-leaderboard-table-color-row-border);
}

.leaderboard-table tbody tr:nth-child(even) {
  background: var(--oracle-component-leaderboard-table-color-row-bg-alt);
}

.leaderboard-table tbody tr:nth-child(odd) {
  background: var(--oracle-component-leaderboard-table-color-row-bg);
}

.leaderboard-table tbody td {
  padding:     var(--oracle-component-leaderboard-table-spacing-cell-pad-block)
               var(--oracle-component-leaderboard-table-spacing-cell-pad-inline);
  font-size:   var(--oracle-component-leaderboard-table-type-cell-size);
  font-weight: var(--oracle-component-leaderboard-table-type-cell-weight);
  line-height: var(--oracle-component-leaderboard-table-type-cell-lh);
  color:       var(--oracle-component-leaderboard-table-color-cell);
  white-space: nowrap;
}

.leaderboard-table tbody td.cell-mono {
  font-family:    var(--oracle-component-leaderboard-table-type-cell-mono-family);
  font-size:      var(--oracle-component-leaderboard-table-type-cell-mono-size);
  letter-spacing: var(--oracle-component-leaderboard-table-type-cell-mono-tracking);
}

.leaderboard-table tbody td.cell-rank {
  font-family:    var(--oracle-component-leaderboard-table-type-rank-family);
  font-size:      var(--oracle-component-leaderboard-table-type-rank-size);
  letter-spacing: var(--oracle-component-leaderboard-table-type-rank-tracking);
  color:          var(--oracle-component-leaderboard-table-color-rank);
  width:          var(--oracle-component-leaderboard-table-spacing-rank-col-width);
  text-align:     center;
}

.leaderboard-table tbody td.cell-highlight {
  color:       var(--oracle-component-leaderboard-table-color-cell-highlight);
  font-weight: 500;
}

.leaderboard-ci {
  font-family:    var(--oracle-component-leaderboard-table-type-ci-family);
  font-size:      var(--oracle-component-leaderboard-table-type-ci-size);
  letter-spacing: var(--oracle-component-leaderboard-table-type-ci-tracking);
  color:          var(--oracle-component-leaderboard-table-color-ci);
  margin-left:    var(--oracle-space-s1);
}

.benchmark-chart {
  margin-bottom: var(--oracle-space-s5);
  padding:       var(--oracle-space-s4);
  border:        var(--oracle-border-width) solid var(--oracle-component-leaderboard-table-color-row-border);
  background:    var(--oracle-component-leaderboard-table-color-row-bg-alt);
}

.benchmark-chart-title {
  font-family:    var(--oracle-font-mono);
  font-size:      var(--oracle-size-label);
  letter-spacing: 0.08em;
  color:          var(--oracle-color-ink);
  margin-bottom:  var(--oracle-space-s3);
}

.benchmark-chart-sparse {
  font-family:   var(--oracle-font-mono);
  font-size:     var(--oracle-size-label);
  line-height:   1.5;
  color:         var(--oracle-component-leaderboard-table-color-sort-active);
  margin-bottom: var(--oracle-space-s3);
}

.benchmark-chart-loading,
.benchmark-chart-empty {
  font-family:    var(--oracle-font-mono);
  font-size:      var(--oracle-size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--oracle-color-ink-muted);
  padding-block:  var(--oracle-space-s4);
  text-align:     center;
}

.benchmark-chart-svg {
  width:   100%;
  height:  auto;
  display: block;
}

.chart-grid {
  stroke:       var(--oracle-component-leaderboard-table-color-row-border);
  stroke-width: 1;
}

.chart-axis-label {
  font-family: var(--oracle-font-mono);
  font-size:   11px;
  fill:        var(--oracle-color-ink-muted);
}

.chart-axis-title {
  font-family:    var(--oracle-font-mono);
  font-size:      11px;
  letter-spacing: 0.08em;
  fill:           var(--oracle-color-ink-muted);
}

.chart-dot {
  fill:           var(--oracle-color-ink-soft);
  fill-opacity:   0.55;
}

.chart-regression {
  stroke:         var(--oracle-component-leaderboard-table-color-sort-active);
  stroke-width:   2;
}

.chart-moving-avg {
  stroke:           var(--oracle-color-ink);
  stroke-width:     1.5;
  stroke-dasharray: 4 3;
  stroke-opacity:   0.7;
}

.benchmark-chart-legend {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--oracle-space-s4);
  margin-top: var(--oracle-space-s3);
}

.chart-legend-item {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--oracle-space-s2);
  font-family:    var(--oracle-font-mono);
  font-size:      var(--oracle-size-label);
  color:          var(--oracle-color-ink-muted);
}

.chart-legend-swatch {
  display:       inline-block;
  width:         18px;
  height:        0;
  border-top:    2px solid currentColor;
}
.swatch-dot {
  width:         8px;
  height:        8px;
  border-top:    none;
  border-radius: 50%;
  background:    var(--oracle-color-ink-soft);
  opacity:       0.55;
}
.swatch-reg { color: var(--oracle-component-leaderboard-table-color-sort-active); }
.swatch-ma  { color: var(--oracle-color-ink); border-top-style: dashed; }

.leaderboard-loading,
.leaderboard-empty,
.leaderboard-error {
  font-family:    var(--oracle-font-mono);
  font-size:      var(--oracle-size-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--oracle-color-ink-muted);
  padding-block:  var(--oracle-space-s6);
  text-align:     center;
}

.benchmark-methodology {
  margin-top:  var(--oracle-component-benchmark-methodology-spacing-section-gap);
  padding-top: var(--oracle-component-benchmark-methodology-spacing-pad-top);
  border-top:  var(--oracle-component-benchmark-methodology-spacing-border-width) solid
               var(--oracle-component-benchmark-methodology-color-border);
}

.benchmark-methodology-heading {
  font-family:    var(--oracle-component-benchmark-methodology-type-heading-family);
  font-size:      var(--oracle-component-benchmark-methodology-type-heading-size);
  font-weight:    var(--oracle-component-benchmark-methodology-type-heading-weight);
  letter-spacing: var(--oracle-component-benchmark-methodology-type-heading-tracking);
  line-height:    var(--oracle-component-benchmark-methodology-type-heading-lh);
  color:          var(--oracle-component-benchmark-methodology-color-heading);
  margin-bottom:  var(--oracle-space-s5);
}

.benchmark-methodology-items {
  display: flex;
  flex-direction: column;
  gap: var(--oracle-component-benchmark-methodology-spacing-item-gap);
}

.benchmark-methodology-item-label {
  font-family:    var(--oracle-component-benchmark-methodology-type-item-label-family);
  font-size:      var(--oracle-component-benchmark-methodology-type-item-label-size);
  font-weight:    var(--oracle-component-benchmark-methodology-type-item-label-weight);
  letter-spacing: var(--oracle-component-benchmark-methodology-type-item-label-tracking);
  text-transform: var(--oracle-component-benchmark-methodology-type-item-label-transform);
  color:          var(--oracle-component-benchmark-methodology-color-item-label);
  margin-bottom:  var(--oracle-space-s1);
}

.benchmark-methodology-item-body {
  font-size:   var(--oracle-component-benchmark-methodology-type-item-body-size);
  font-weight: var(--oracle-component-benchmark-methodology-type-item-body-weight);
  line-height: var(--oracle-component-benchmark-methodology-type-item-body-lh);
  color:       var(--oracle-component-benchmark-methodology-color-item-body);
  margin: 0;
}